HTML World Wide Web Consortium What does HTML stand for? – – –://Reference.sitepoint.com.
23
HTML • World Wide Web Consortium • What does HTML stand for? – www.w3.org – www.w3schools.com – http://Reference.sitepoint.com
-
Upload
janice-bridges -
Category
Documents
-
view
229 -
download
0
description
HTML 5 Doctype All HTML documents should begin with the DOCTYPE tag.
Transcript of HTML World Wide Web Consortium What does HTML stand for? – – –://Reference.sitepoint.com.
HTML
• World Wide Web Consortium• What does HTML stand for?
– www.w3.org– www.w3schools.com– http://Reference.sitepoint.com
HTML 5
• Released in 2012• Extends HTML 4 (Backwards Compatible)
• Plays better with smartphones/tablets• New Tags:
<video><audio><canvas>Etc…
HTML 5 Doctype
• <!DOCTYPE HTML>
• All HTML documents should begin with the DOCTYPE tag.
HTML Tag Structure
• Tags use brackets
< and >
– Begin tags: <tagname>Text Between
Tags– End Tags: </tagname>
HTML Document
• HTML Tag• At the top and bottom of every web page.
• Just after the <!DOCTYPE HTML> tag
• Each page needs only one set of HTML tags.
<html>Page Information
</html>
HTML Header Section
<head><title>This text displays on the browser’s title bar.</title>
</head>
HTML Body Section
• <body>
Everything that displays on the web page goes here.
• </body>
Sample Page<html>
<head><title>Stoll’s web page</title>
</head>
<body>This is my content
</body>
</html>
HTML Tag Structure
• Attributes<tagname attribute1=“value1” attribute2=“value2”>
Text, images, multimedia, etc. go between tags
</tagname>
• Example<body text=“blue” bgcolor=“red”>
Web page stuff
</body>
HyperText Links
HyperText Links
<a href=“http://www.website.com”>Display Text</a>
Bold Underline and Italics
• Bold Tag– <strong>This text will appear bold</strong>
• Underline Tag– <u>This text will underlined</u>
• Italic Tag (Emphasize)– <em>This text will appear in italics</em>
HTML
• Headings<h1>…</h1> through <h6>…</h6>Largest to smallest (h1 is largest)
• Line breaks and paragraphs<p></p> (end tag optional)<br /> (no end tag)
HTML
• <body>most stuff goes here</body>• Attributes:
<body bgcolor="#RRGGBB">
The web page is defined here</body>
• Browsers and white space
HTML
• Ordered Lists:<ol>
<li>Chevelle</li><li>Cuda</li><li>Shelby</li><li>Camaro</li>
</ol>
HTML
• Unordered Lists:<ul>
<li>Chevelle</li><li>Cuda</li><li>Shelby</li><li>Camaro</li>
</ul>
HTML Tables<table width="650" border="2" cellspacing="0"
cellpadding="0">
<tr><td>Mickey Mouse </td><td>87</td><td>4'1''</td>
</tr>
</table>
Tables<table width="650" border="2" cellspacing="0"
cellpadding="0"> <caption>
This is my test table</caption><tr>
<td>Mickey Mouse </td><td>87</td><td>4'1''</td>
</tr>
</table>
A Table With Two Rows<table width="650" border="2" cellspacing="0" cellpadding="0">
<tr><td>Mickey Mouse </td><td>87</td><td>4'1''</td>
</tr><tr>
<td>Goofy</td><td>220</td><td>6‘9''</td>
</tr></table>
Two Row Table Output<tr>
<td>Mickey Mouse </td><td>87</td><td>4'1''</td>
</tr><tr>
<td>Goofy</td><td>220</td><td>6‘9''</td>
</tr>
HTML Tables<table width="650" border="2" cellspacing="0"
cellpadding="0">
<tr><td>Mickey Mouse </td><td>87</td><td>4'1''</td>
</tr>
</table>
CSS Vs. HTML Tables
• www.2advanced.com (beautiful - all flash - site)
• www.cssremix.com • www.css-tricks.com (Look at videos 1-20
in order) • Colorzilla - A FireFox addon that allows
you to copy colors directly from web pages.
Changing the color of links
<body link="#FF3333">
</body>
Tips for the Quiz
• Some items on the quiz:– Bold, italic, and underline tags– Hyperlink syntax– Line break tag– Background color– Lists– Tables
