Scribd
Upload
7 views

html

Uploaded by

newmetallovers
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
7 views

html

Uploaded by

newmetallovers
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 46

HTML

What is an HTML File?

• HTML stands for Hyper Text Markup Language


• An HTML file is a text file containing small
markup tags
• The markup tags tell the Web browser how to
display the page
• An HTML file must have an htm or html file
extension
• An HTML file can be created using a simple
text editor
Example
• <html>
• <head>
• <title>Title of page</title>
• </head>
• <body> This is my first homepage. <b>This text
is bold</b>
• </body>
• </html>
• Save the file as "mypage.htm".
Tags
• <html> - his tag tells your browser that this
is the start of an HTML document.
• </html>. This tag tells your browser that
this is the end of the HTML document.
• The text between the <head> tag and the
</head> tag is header information. Header
information is not displayed in the browser
window.
Contd..
• The text between the <title> tags is the
title of your document. The title is
displayed in your browser's caption.
• The text between the <body> tags is the
text that will be displayed in your browser.
• The text between the <b> and </b> tags
will be displayed in a bold font.
HTM or HTML Extension?

• inherited from the past when some of the


commonly used software only allowed
three letter extensions.
• With newer software we think it will be
perfectly safe to use .html.
HTML Editors:
• edit HTML files using a WYSIWYG (what
you see is what you get) editor like
FrontPage, Claris Home Page, or Adobe
PageMill instead of writing your markup
tags in a plain text file.
• HTML documents are text files made up of
HTML elements.
• HTML elements are defined using HTML
tags.
• HTML Tags
• HTML tags are used to mark-up HTML elements
• HTML tags are surrounded by the two characters < and
>
• The surrounding characters are called angle brackets
• HTML tags normally come in pairs like <b> and </b>
• The first tag in a pair is the start tag, the second tag is
the end tag
• The text between the start and end tags is the element
content
• HTML tags are not case sensitive, <b> means the
same as <B>
• the HTML element starts with a start tag:
<b>
The content of the HTML element is: This
text is bold
The HTML element ends with an end tag:
</b>
Why do We Use Lowercase
Tags?
• We have just said that HTML tags are not case
sensitive: <B> means the same as <b>. When
you surf the Web, you will notice that most
tutorials use uppercase HTML tags in their
examples. We always use lowercase tags. Why?
• If you want to prepare yourself for the next
generations of HTML, you should start using
lowercase tags. The World Wide Web
Consortium (W3C) recommends lowercase tags
in their HTML 4 recommendation, and XHTML
(the next generation HTML) demands lowercase
tags.
Tag Attributes

• Attributes can provide additional information


about the HTML elements on your page.
• <body bgcolor="red">.
• the table should have no borders: <table
border="0">
• Attributes always come in name/value pairs like
this: name="value".
• Attributes are always added to the start tag of an
HTML element.
Quote Styles, "red" or 'red'?

• Attribute values should always be


enclosed in quotes. Double style quotes
are the most common, but single style
quotes are also allowed.
• In some rare situations, like when the
attribute value itself contains quotes, it is
necessary to use single quotes:
• name='John "ShotGun" Nelson'
• headings, paragraphs and line breaks.
• <h>content</h>
• Paragraph <p> </p>
• Break <br>
Comments in HTML

• <!-- This is a comment -->


Tips
• When you write HTML text, you can never
be sure how the text is displayed in
another browser
• text will be reformatted every time the user
resizes his window
• Any number of spaces count as one.
Some extra information: In HTML a new
line counts as one space.
Tips
• You might have noticed that paragraphs can be
written without the closing tag </p>. Don't rely on
it. The next version of HTML will not allow you to
skip ANY closing tags.
• HTML automatically adds an extra blank line
before and after some elements, like before and
after a paragraph, and before and after a
heading.
• We use a horizontal rule (the <hr> tag), to
separate the sections in our tutorials.
Tag Description
• <html>Defines an HTML document
• <body>Defines the document's body
• <h1> to <h6>Defines header 1 to header 6
• <p>Defines a paragraph
• <br>Inserts a single line break
• <hr>Defines a horizontal rule
• <!-->Defines a comment
Try this…
• <html>
• <body>

• <p>
• My Bonnie lies over the ocean.
• My Bonnie lies over the sea.
• My Bonnie lies over the ocean.
• Oh, bring back my Bonnie to me.
• </p>

• <p>Note that your browser simply ignores your formatting!</p>

• </body>
• </html>
Headings
• <html>
• <body>

• <h1>This is heading 1</h1>


• <h2>This is heading 2</h2>
• <h3>This is heading 3</h3>
• <h4>This is heading 4</h4>
• <h5>This is heading 5</h5>
• <h6>This is heading 6</h6>

• <p>Use heading tags only for headings. Don't use them just to make
something bold. Use other tags for that.</p>

• </body>
• </html>
Centre
• <html>
• <body>

• <h1 align="center">This is heading 1</h1>

• <p>The heading above is aligned to the center of this


page. The heading above is aligned to the center of this
page. The heading above is aligned to the center of this
page.</p>

• </body>
• </html>
• <html>
• <body>
• <p>The hr tag defines a horizontal rule:</p>
• <hr>
• <p>This is a paragraph</p>
• <hr>
• <p>This is a paragraph</p>
• <hr>
• <p>This is a paragraph</p>
• </body>
• </html>
Text Formatting Tags

• TagDescription
• <b>Defines bold text
• <big>Defines big text
• <em>Defines emphasized text
• <i>Defines italic text
• <small>Defines small text
• <strong>Defines strong text
• <sub>Defines subscripted text
• <sup>Defines superscripted text<ins>Defines inserted text
• <del>Defines deleted text
• <s>Deprecated. Use <del> instead
• <strike>Deprecated. Use <del> instead
• <u>Deprecated. Use styles instead
Try this
• <html>
• <body>

• <pre>
• This is
• preformatted text.
• It preserves both spaces
• and line breaks.
• </pre>

• <p>The pre tag is good for displaying computer code:</p>

• <pre>
• for i = 1 to 10
• print i
• next i
• </pre>

• </body>
• </html>
"Computer Output" Tags

• <code>Defines computer code text


• <kbd>Defines keyboard text
• <samp>Defines sample computer code
• <tt>Defines teletype text
• <var>Defines a variable
• <pre>Defines preformatted
text<listing>Deprecated. Use <pre> instead
<plaintext>Deprecated. Use <pre>
instead<xmp>Deprecated. Use <pre> instead
Citations, Quotations, and
Definition Tags
• <abbr>Defines an abbreviation
• <acronym>Defines an acronym
• <address>Defines an address element
• <bdo>Defines the text direction
• <blockquote>Defines a long quotation
• <q>Defines a short quotation
• <cite>Defines a citation
• <dfn>Defines a definition term
Character Entities

• A character entity has three parts: an


ampersand (&), an entity name or a # and
an entity number, and finally a semicolon
(;).
• less than sign in an HTML document we
must write: &lt; or &#60;
• Note that the entities are case sensitive.
The Most Common Character Entities:

• non-breaking space &nbsp ;&#160;


• <less than&lt;&#60;>
• greater than&gt;&#62;
• &ampersand&amp;&#38;
• "quotation mark&quot;&#34;
• 'apostrophe &apos; (does not work in IE)&#39; ¢cent&cent;&#162;
• £pound&pound;&#163;
• ¥yen&yen;&#165;
• §section&sect;&#167;
• ©copyright&copy;&#169;
• ®registered trademark&reg;&#174;
• ×multiplication&times;&#215;
• ÷division&divide;&#247;
The Anchor Tag and the Href Attribute

• An anchor can point to any resource on


the Web: an HTML page, an image, a
sound file, a movie, etc.
• <a
href="http://www.w3schools.com/">Visit
W3Schools!</a>
The Target Attribute

• you can define where the linked document will


be opened.
• <a href="http://www.w3schools.com/"
target="_blank">Visit W3Schools!</a>
• To link directly to the "tips" section, add a # sign
and the name of the anchor to the end of a URL,
like this:
• <a
href="http://www.w3schools.com/html_links.asp#
tips"> Jump to the Useful Tips Section</a>
Open in same page
Link locations
• <a href="#C4">See also Chapter 4.</a>
Frames
• you can display more than one HTML
document in the same browser window.
Each HTML document is called a frame,
and each frame is independent of the
others.
Frames
• The Frameset Tag
• The <frameset> tag defines how to divide the window into frames
• Each frameset defines a set of rows or columns
• The values of the rows/columns indicate the amount of screen area
each row/column will occupy
• The Frame Tag
• The <frame> tag defines what HTML document to put into each
frame
• In the example below we have a frameset with two columns. The
first column is set to 25% of the width of the browser window. The
second column is set to 75% of the width of the browser window.
The HTML document "frame_a.htm" is put into the first column, and
the HTML document "frame_b.htm" is put into the second column:
• <frameset cols="25%,75%"> <frame src="frame_a.htm">
<frame src="frame_b.htm"> </frameset>
Tables
• Tables are defined with the <table> tag.
• A table is divided into rows (with the <tr>
tag), and each row is divided into data
cells (with the <td> tag).
• The letters td stands for "table data,"
which is the content of a data cell.
Tables and the Border Attribute

• If you do not specify a border attribute the


table will be displayed without any
borders. Sometimes this can be useful, but
most of the time, you want the borders to
show.
Headings in a Table

• Headings in a table are defined with the


<th> tag.
• Empty Cells in a Table
• Table cells with no content are not
displayed very well in most browsers.
Table Tags

• <table>Defines a table
• <th>Defines a table header
• <tr>Defines a table row
• <td>Defines a table cell
• <caption>Defines a table caption
• <colgroup>Defines groups of table columns
• <col>Defines the attribute values for one or more
columns in a table
• <thead>Defines a table head
• <tbody>Defines a table body
• <tfoot>Defines a table footer
Unordered Lists

• The list items are marked with bullets


(typically small black circles).
• An unordered list starts with the <ul> tag.
Each list item starts with the <li> tag.
• <ul>
• <li>Coffee</li>
• <li>Milk</li>
• </ul>
Ordered Lists

• An ordered list is also a list of items. The list


items are marked with numbers.
• An ordered list starts with the <ol> tag. Each list
item starts with the <li> tag.
• <ol>
• <li>Coffee</li>
• <li>Milk</li>
• </ol>
Definition Lists

• A definition list is not a list of items. This is a list


of terms and explanation of the terms.
• A definition list starts with the <dl> tag. Each
definition-list term starts with the <dt> tag. Each
definition-list definition starts with the <dd> tag.
• <dl>
• <dt>Coffee</dt>
• <dd>Black hot drink</dd>
• <dt>Milk</dt>
• <dd>White cold drink</dd>
• </dl>
List Tags

• <ol>Defines an ordered list


• <ul>Defines an unordered list
• <li>Defines a list item
• <dl>Defines a definition list
• <dt>Defines a definition term
• <dd>Defines a definition description
• <dir>Deprecated. Use <ul> instead
• <menu>Deprecated. Use <ul> instead
Forms

• A form is an area that can contain form


elements.
• Form elements are elements that allow the
user to enter information (like text fields,
textarea fields, drop-down menus, radio
buttons, checkboxes, etc.) in a form.
• A form is defined with the <form> tag.
• <form> <input> <input> </form>
Text Fields

• Text fields are used when you want the user to


type letters, numbers, etc. in a form.
• <form>
• First name: <input type="text"
name="firstname">
• <br>
• Last name: <input type="text"
name="lastname">
• </form>
The Form's Action Attribute and the Submit
Button

• When the user clicks on the "Submit" button, the


content of the form is sent to another file. The
form's action attribute defines the name of the
file to send the content to. The file defined in the
action attribute usually does something with the
received input.
• <form name="input"
action="html_form_action.asp" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit"> </form>
The Alt Attribute

• The alt attribute is used to define an "alternate


text" for an image. The value of the alt attribute
is an author-defined text:
• <img src="boat.gif" alt="Big Boat"> The "alt"
attribute tells the reader what he or she is
missing on a page if the browser can't load
images. The browser will then display the
alternate text instead of the image. It is a good
practice to include the "alt" attribute for each
image on a page, to improve the display and
usefulness of your document for people who
have text-only browsers.

You might also like