Académique Documents
Professionnel Documents
Culture Documents
The Basics
HTML
HTML means Hyper Text Markup Language. HTML is a language that helps us to create web sites in the Internet. HTML helps to coordinate human and the computer. So we have to use some codes to explain to computer what are we going to do. Therefore we use HTML to give instructions to create web sites.
Beginning of HTML
HTML 1 (Sir Tim Berners-Lee, 1989): very basic, limited integration of multimedia in 1993, Mosaic added many new features (e.g., integrated images)
HTML 2.0 (IETF, 1994): tried to standardize these & other features, but late in 1994-96, Netscape & IE added many new, divergent features
HTML 3.2 (W3C, 1996): attempted to unify into a single standard but didn't address newer technologies like Java applets & streaming video
HTML 4.0 (W3C, 1997): current standard (but moving towards XHTML) attempted to map out future directions for HTML, not just react to vendors HTML 4.01(W3C, 1999): XHTML 1.0 (W3C, 2000): HTML 4.01 modified to conform to XML standards
HTML Tags
We use some codes to explain to computer what are we going to do. These codes called as Tags. HTML tags must type in the angle brackets(<>) ,it wants to type in a text editor and save with .htm or .html extension. If we use a tag we should close the tag. To close the tag we use closing tags(</>).
Heading Section
Body Section
HTML Tags
Tag an HTML code that tells the browser HOW to display something Opening Tag <h3> Closing Tag </h3> Example : <b>This will be bold</b> Tags will not appear in browsers All open tags must have corresponding closing tag.
Attributes
Attributes provide additional display information about a tag Attributes appear within the opening tag brackets Attribute values must be contained in quotes You can have more than one attribute in a tag <font size=1 color=green">This text would be green and smaller</font>
HTML Tags
Basic Tags
<html></html> Creates an HTML document <head></head> Sets off the title and other information that isn't displayed on the Web page itself <body></body> Sets off the visible portion of the document
Header Tags
<title></title> Puts the name of the document in the title bar Things in the header section do not appear in the browser
Body Attributes
<body bgcolor=?> Sets the background color, using name or hex value <body text=?> Sets the text color, using name or hex value <body background=url> Specifies an image file to be used as background <body vlink=?> Sets the color of followed links, using name or hex value <body alink=?> Sets the color of links on click
HTML Formatting
Ordered Lists this is a numbered list, starts with <ol> and ends with </ol>, each new item in list requires the <li> tag
Sample code. <ol> List Name <li> list item 1 <li> list item 2 <li> list item 3 <li> list item 4 </ol> Browser view Yankees Starting Lineup 1. Johnny Damon 2. Derek Jeter 3. Bobby Abreu 4. Robbie McGarry
HTML Formatting
Un-ordered Lists bulleted list of items, starts with <ul> tag and ends with </ul> tag, and each list item begins with <li>
Sample code. <ul> List Name <li> list item 1 <li> list item 2 <li> list item 3 <li> list item 4 </ul> Browser view Yankees Starting Lineup Johnny Damon Derek Jeter Bobby Abreu Robbie McGarry
HTML Formatting
Definition Lists not a list of items but a list of terms and explanations or definitions
Note: inside a definition list (the <dd> tag) you can put paragraphs, line breaks, images, links and other lists Sample code. <dl> <dt>Vocab Word 1 <dd>Definition 1 <dt>Vocab Word 2 <dd>Definition 2 </dl>
Browser view
Rock hard object, made..
Ball
round object.
</td> <td>
</td>
<td>
</td> </tr>
Images
Img = image src = source of the image alt = stands for alternate and is used to name the image, important for visually impaired users (text to speech) <img src =nameoftheimage.jpg alt=description> <img src =nameoftheimage.gif alt=description>
Images
Aligning Images can be done with the align= tag. Place this inside of your image source code. You can only align to the right or to the left with this tag. <img src=name.jpg alt=description align=right>
Image as a Link
<a href=url or file name><img src = imagefile.jpg alt=description></a>
Insert the img src tag in place of the clickable text on a normal link
Creating Links
Two types of links
1. absolute: link to an outside website 2. relative: link to another page within your
website
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 correct Syntax of creating an anchor:
Link Tag
Html Links :
O/P :
Gmail