Introduction to HTML

LANGUAGE REFERENCES
HyperText Markup Language (HTML) is a markup language designed for the creation of web pages with hypertext and other information to be displayed in a web browser. HTML is used to structure information denoting certain text as headings, paragraphs, lists and so on and can be used to describe, to some degree, the appearance and semantics of a document. HTML's grammar structure is the HTML DTD that was created using SGML syntax. Markup Language combines text and extra information about the text. The extra information, for example about the text's structure or presentation, is expressed using markup, which is intermingled with the primary text. The best-known markup language in modern use is HTML (HyperText Markup Language), one of the foundations of the World Wide Web. Web page or webpage is a resource on the World Wide Web, usually in HTML/XHTML format with hypertext links to enable navigation from one page or section to another. Varying filename extensions can be used, such as .htm, .html, or .php to name a few. Web pages often use graphic files to provide illustration. A web page is displayed using a web browser, which can have a Graphical User Interface, like Internet Explorer, Mozilla Firefox, or Opera, or can have a Command Line Interface, like Lynx. Hypertext is a user interface paradigm for displaying documents which, according to an early definition (Nelson 1970), "branch or perform on request." The most frequently discussed form of hypertext document contains automated cross-references to other documents called hyperlinks. Selecting a hyperlink causes the computer to display the linked document within a very short period of time. Web browser is a software application that enables a user to display and interact with text, images, and other information typically located on a web page at a website on the World Wide Web or a local area network. Text and images on a web page can contain hyperlinks to other web pages at the same or different websites. Web browsers allow a user to quickly and easily access information provided on many web pages at many websites by traversing these links. Uniform Resource Locator (URL) is a string of characters conforming to a standardized format, which refers to a resource on the Internet (such as a document or an image) by its location. For example, the URL of this page on Wikipedia is http://en.wikipedia.org/wiki/Uniform_Resource_Locator. An HTTP URL, commonly called a web address, is usually shown in the address bar of a web browser. Standard Generalized Markup Language (SGML) is a metalanguage in which one can define markup languages for documents. SGML is a descendant of IBM's Generalized Markup Language (GML), developed in the 1960s by Charles Goldfarb, Edward Mosher and Raymond Lorie (whose surname initials also happen to be GML). SGML should not be confused with the Geography Markup Language (GML) developed by the Open GIS Consortium; cf, or the Game Maker scripting language, GML.

BRIEF HISTORY
Tim Berners-Lee, who pioneered the use of hypertext for sharing information, created the first web browser, named WorldWideWeb, in 1990 and introduced it to colleagues at CERN in March
1

1991. Since then the development of web browsers has been inseparably intertwined with the development of the web itself. The explosion in popularity of the web was triggered by NCSA Mosaic which was a graphical browser running originally on Unix but soon ported to the Apple Macintosh and Microsoft Windows platforms. Version 1.0 was released in September 1993, and was dubbed the killer application of the Internet. Marc Andreessen, who was the leader of the Mosaic team at NCSA, quit to form a company that would later be known as Netscape Communications Corporation. NCSA Mosaic was originally designed and programmed for Unix's X Window System by Marc Andreessen and Eric Bina at NCSA. Development of Mosaic began in December 1992. Version 1.0 was released on April 22, 1993, followed by two maintenance releases during summer 1993

Markup element types

Structural markup. Describes the purpose of text. For example, : <h2>Golf</h2> directs the browser to render "Golf" as a second-level heading, similar to the "Markup element types" title at the start of this section. Structural markup does not denote any specific rendering, but most web browsers have standardised on how elements should be formatted. By default, for example, headings like these will appear in large, bold text. Further styling should be done with Cascading Style Sheets (CSS).

Presentational markup. Describes the appearance of the text, regardless of its function. For example, <b>boldface</b> will render "boldface" in bold text. In the majority of cases, using presentational markup is inappropriate, and presentation should be controlled by using CSS. In the case of both <b>bold</b> and <i>italic</i> there are elements which usually have an equivalent visual rendering but are more semantic in nature, namely <strong>strong emphasis</strong> and <em>emphasis</em> respectively. It is easier to see how an aural user agent should interpret the latter two elements. Note that most presentational markup elements have become deprecated under the HTML 4.0 specification, in favour of CSS based style design.

Hypertext markup. Links parts of the document to other documents. For example : <a href="http://wikipedia.org/">Wikipedia</a>

HTML element indicates structure in an HTML document. More specifically, it is an SGML element that meets the requirements of one or more of the HTML Document Type Definitions (DTDs). HTML elements generally consist of three parts: a start tag marking the beginning of an element, some amount of content, and an end tag. Elements may represent headings, paragraphs, hypertext links, lists, embedded media, and a variety of other structures.

Many HTML elements include attributes in their start tags, defining desired behavior. The end tag is optional for many elements; in a minimal case, an empty element has no content or end tag. There are a few elements that are not part of any official DTDs, yet are supported by some browsers and used by some web pages. Such elements may be ignored or displayed improperly on browsers not supporting them. Informally, HTML elements are sometimes referred to as "tags" (an example of synecdoche), though many prefer the term tag strictly in reference to the semantic structures delimiting the start and end of an element. HTML BASIC STRUCTURE HTML The first and last tags in a document should always be the HTML tags. These are the tags that tell a Web browser where the HTML in your document begins and ends. The absolute most basic of all possible Web documents is: <HTML> </HTML> HEAD. The HEAD tags contain all of the document's header information. When I say "header," I don't mean what appears at the top of the browser window, but things like the document title and so on. Speaking of which... TITLE. This container is placed within the HEAD structure. Between the TITLE tags, you should have the title of your document. This will appear at the top of the browser's title bar, and also appears in the history list. Finally, the contents of the TITLE container go into your bookmark file, if you create a bookmark to a page. BODY. BODY comes after the HEAD structure. Between the BODY tags, you find all of the stuff that gets displayed in the browser window. All of the text, the graphics, and links, and so on -- these things occur between the BODY tags. We'll get to what happens there starting with the next chapter. So, putting everything we've covered thus far into one file, we have: <HTML> <HEAD> <TITLE>Document Title</TITLE> </HEAD> <BODY> </BODY> </HTML>

BASIC TAGS

Headings
Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading. <h6> defines the smallest heading. <h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3> <h4>This is a heading</h4> <h5>This is a heading</h5> <h6>This is a heading</h6> HTML automatically adds an extra blank line before and after a heading.

Paragraphs
Paragraphs are defined with the <p> tag. <p>This is a paragraph</p> <p>This is another paragraph</p> HTML automatically adds an extra blank line before and after a paragraph.

Line Breaks
The <br> tag is used when you want to end a line, but don't want to start a new paragraph. The <br> tag forces a line break wherever you place it. <p>This <br> is a para<br>graph with line breaks</p> The <br> tag is an empty tag. It has no closing tag.

Comment Tags
If you want to leave yourself notes in an HTML document, but don't want those notes to show up in the browser window, you need to use the comment tag. To do that, you would do the following: <!-- Hi, I'm a comment. --> Your note would go where the text Hi, I'm a comment. appears. Yes, you do need an exclamation point after the opening bracket, but not before the closing bracket. That's the way the standard is written

Text Formatting Tags

Tag <b> <big> <em> <i> <small> <strong> <sub> Description Defines bold text Defines big text Defines emphasized text Defines italic text Defines small text Defines strong text Defines subscripted text
4

<sup> <ins> <del> <s> <strike> <u>

Defines superscripted text Defines inserted text Defines deleted text Deprecated. Use <del> instead Deprecated. Use <del> instead Deprecated. Use styles instead

HTML Character Entities

Some characters like the < character, have a special meaning in HTML, and therefore cannot be used in the text. To display a less than sign (<) in HTML, we have to use a character entity.

Character Entities
Some characters have a special meaning in HTML, like the less than sign (<) that defines the start of an HTML tag. If we want the browser to actually display these characters we must insert character entities in the HTML source. A character entity has three parts: an ampersand (&), an entity name or a # and an entity number, and finally a semicolon (;). To display a less than sign in an HTML document we must write: &lt; or &#60; The advantage of using a name instead of a number is that a name is easier to remember. The disadvantage is that not all browsers support the newest entity names, while the support for entity numbers is very good in almost all browsers.

Non-breaking Space
The most common character entity in HTML is the non-breaking space. Normally HTML will truncate spaces in your text. If you write 10 spaces in your text HTML will remove 9 of them. To add spaces to your text, use the &nbsp; character entity. The Most Common Character Entities: Result < > & " ' Description non-breaking space less than greater than ampersand quotation mark apostrophe Entity Name &nbsp; &lt; &gt; &amp; &quot; &apos; (does not work in IE) Entity Number &#160; &#60; &#62; &#38; &#34; &#39;

Some Other Commonly Used Character Entities:

5

Result

Description cent pound yen section copyright registered trademark multiplication division

Entity Name &cent; &pound; &yen; &sect; &copy; &reg; &times; &divide;

Entity Number &#162; &#163; &#165; &#167; &#169; &#174; &#215; &#247;

The HTML <font> Tag

The <font> tag in HTML is deprecated. It is supposed to be removed in a future version of HTML.Even if a lot of people are using it, you should try to avoid it, and use styles instead. <font color="red"> Sample Text </font> Font Attributes Attribute Size="number" Size="+number" size="-number" face="face-name" color="color-value" color="color-name" Example size="2" size="+1" size="-1" face="Times" color="#eeff00" color="red" Purpose Defines the font size Increases the font size Decreases the font size Defines the font-name Defines the font color Defines the font color

The <font> tag is deprecated in the latest versions of HTML (HTML 4 and XHTML). The World Wide Web Consortium (W3C) has removed the <font> tag from its recommendations. In future versions of HTML, style sheets (CSS) will be used to define the layout and display properties of HTML elements.

The Image Tag and the Src Attribute

In HTML, images are defined with the <img> tag. The <img> tag is empty, which means that it contains attributes only and it has no closing tag. To display an image on a page, you need to use the src attribute. Src stands for "source". The value of the src attribute is the URL of the image you want to display on your page. The syntax of defining an image:
6

<img src="url"> The URL points to the location where the image is stored. An image named "boat.gif" located in the directory "images" on "www.w3schools.com" has the URL: http://www.w3schools.com/images/boat.gif. The browser puts the image where the image tag occurs in the document. If you put an image tag between two paragraphs, the browser shows the first paragraph, then the image, and then the second paragraph. 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.

Backgrounds
The <body> tag has two attributes where you can specify backgrounds. The background can be a color or an image. Bgcolor The bgcolor attribute specifies a background-color for an HTML page. The value of this attribute can be a hexadecimal number, an RGB value, or a color name: <body bgcolor="#000000"> <body bgcolor="rgb(0,0,0)"> <body bgcolor="black"> Background The background attribute specifies a background-image for an HTML page. The value of this attribute is the URL of the image you want to use. If the image is smaller than the browser window, the image will repeat itself until it fills the entire browser window. <body background="clouds.gif"> <body background="http://www.w3schools.com/clouds.gif"> The URL can be relative (as in the first line above) or absolute (as in the second line above). Note: If you want to use a background image, you should keep in mind:

Will the background image Will the background image Will the background image Will the background image Will the background image Basic Notes - Useful Tips

increase the loading time too much? look good with other images on the page? look good with the text colors on the page? look good when it is repeated on the page? take away the focus from the text?

The bgcolor, background, and the text attributes in the <body> tag are deprecated in the latest versions of HTML (HTML 4 and XHTML). The World Wide Web Consortium (W3C) has removed these attributes from its recommendations. Style sheets (CSS) should be used instead (to define the layout and display properties of HTML elements).

The Anchor Tag and the Href Attribute

HTML uses the <a> (anchor) tag to create a link to another document. An anchor can point to any resource on the Web: an HTML page, an image, a sound file, a movie, etc. The syntax of creating an anchor: <a href="url">Text to be displayed</a> The <a> tag is used to create an anchor to link from, the href attribute is used to address the document to link to, and the words between the open and close of the anchor tag will be displayed as a hyperlink.

The Target Attribute

With the target attribute, you can define where the linked document will be opened. The line below will open the document in a new browser window: <a href="http://www.w3schools.com/" target="_blank">Visit W3Schools!</a>

The Anchor Tag and the Name Attribute

The name attribute is used to create a named anchor. When using named anchors we can create links that can jump directly into a specific section on a page, instead of letting the user scroll around to find what he/she is looking for. Below is the syntax of a named anchor: <a name="label">Text to be displayed</a> The name attribute is used to create a named anchor. The name of the anchor can be any text you care to use. The line below defines a named anchor: <a name="tips">Useful Tips Section</a> You should notice that a named anchor is not displayed in a special way.

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> A hyperlink to the Useful Tips Section from WITHIN the file "html_links.asp" will look like this: <a href="#tips">Jump to the Useful Tips Section</a>

Unordered Lists
An unordered list is a list of items. 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> Here is how it looks in a browser: <li>Coffee</li> Coffee <li>Milk</li> Milk </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> Here is how it looks in a browser: <li>Coffee</li> 1. Coffee <li>Milk</li> 2. Milk </ol> Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc.

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> Here is how it looks in a browser: <dt>Coffee</dt> Coffee <dd>Black hot drink</dd> Black hot drink <dt>Milk</dt> Milk <dd>White cold drink</dd> White cold drink </dl> Inside a definition-list definition (the <dd> tag) you can put paragraphs, line breaks, images, links, other lists, etc.

List Tags
9

Tag <ol> <ul> <li> <dl> <dt> <dd>

Description Defines an ordered list Defines an unordered list Defines a list item Defines a definition list Defines a definition term Defines a definition description

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. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc. <table border="1"> <tr> <td>row 1, cell 1</td> How it looks in a browser: <td>row 1, cell 2</td> row 1, cell row 1, cell </tr> 1 2 <tr> row 2, cell row 2, cell <td>row 2, cell 1</td> 1 2 <td>row 2, cell 2</td> </tr> </table>

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. To display a table with borders, you will have to use the border attribute: <table border="1"> <tr> <td>Row 1, cell 1</td> <td>Row 1, cell 2</td> </tr> </table>

Headings in a Table
Headings in a table are defined with the <th> tag. <table border="1"> <tr> <th>Heading</th> <th>Another Heading</th> </tr> <tr> <td>row 1, cell 1</td>

How it looks in a browser: Another Heading Heading row 1, cell row 1, cell 2 1 row 2, cell row 2, cell 2
10

<td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> Empty Cells in a Table

Table cells with no content are not displayed very well in most browsers. <table border="1"> <tr> <td>row 1, cell 1</td> How it looks in a browser: <td>row 1, cell 2</td> row 1, cell row 1, cell </tr> 1 2 <tr> row 2, cell <td>row 2, cell 1</td> 1 <td></td> </tr> </table> Note that the borders around the empty table cell are missing (NB! Mozilla Firefox displays the border). To avoid this, add a non-breaking space (&nbsp;) to empty data cells, to make the borders visible: <table border="1"> <tr> <td>row 1, cell 1</td> How it looks in a browser: <td>row 1, cell 2</td> row 1, cell row 1, cell </tr> 1 2 <tr> row 2, cell <td>row 2, cell 1</td> 1 <td>&nbsp;</td> </tr> </table>

Basic Notes - Useful Tips

The <thead>,<tbody> and <tfoot> elements are seldom used, because of bad browser support. Expect this to change in future versions of XHTML. If you have Internet Explorer 5.0 or newer, you can view a working example in our XML tutorial. Table Tags Tag <table> <th> <tr> Description Defines a table Defines a table header Defines a table row
11

<td>

Defines a table cell

Spanning Multiple Rows and Cells Use rowspan to span multiple rows and colspan to span multiple columns. Note: if you would like to place headers at the top of your columns, use the <th> tag as shown below. By default these headers are bold to set them apart from the rest of your table's content. <table border="1"> Column 1 Column 2 Column 3 <tr> Row 1 Cell Row 1 Cell <th>Column 1</th> 3 Row 1 Cell 2 <th>Column 2</th> 1 Row 2 Cell Row 2 Cell <th>Column 3</th> 2 3 </tr> <tr><td rowspan="2">Row 1 Cell 1</td> Row 3 Cell 1 <td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr> <tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr> <tr><td colspan="3">Row 3 Cell 1</td></tr> </table> Cell Padding and Spacing With the cellpadding and cellspacing attributes you will be able to adjust the white space on your tables. Spacing defines the width of the border, while padding represents the distance between cell borders and the content within. Color has been added to the table to emphasize these attributes. HTML Code: <table border="1" cellspacing="10" bgcolor="rgb(0,255,0)"> <tr> <th>Column 1</th> <th>Column 2</th> </tr> <tr><td>Row 1 Cell 1</td><td>Row 1 Cell 2</td></tr> <tr><td>Row 2 Cell 1</td><td>Row 2 Cell 2</td></tr> </table>

12

13