Html Intro2


Published on

Published in: Education
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Html Intro2

  1. 1. Learning HTML Basics ~Fall 2008~ .:WebDesign:.
  2. 2. <ul><li>Basic page has 2 components </li></ul><ul><li>-page content and html tags </li></ul><ul><li>HTML (hyper text mark-up language) </li></ul><ul><li>-code called “tags” </li></ul><ul><li>-angled brackets/ enclose “tags” </li></ul><ul><li>-every opening bracket has a closing bracket </li></ul><ul><li>-tags should be all lower case (recommended by W3C) </li></ul><ul><li>-to close tag </title> </li></ul>
  3. 3. <ul><li>HTML (hyper text mark-up language) </li></ul><ul><li>-The markup tags tell the Web browser how to display the page </li></ul><ul><li>-An HTML file must have an htm or html file extension </li></ul><ul><li>-An HTML file can be created using a simple text editor </li></ul>
  4. 4. <ul><li><html> tells browser that file contains html coded info </li></ul><ul><li><head> contains title that appears in browser window </li></ul><ul><li><title> displays words that are shown @ top of browser window, in title bar </li></ul><ul><li><body> contains contents of page </li></ul>
  5. 5. <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><title> ……. </title> </li></ul><ul><li></head> </li></ul><ul><li><body>…………………… </li></ul><ul><li>…………………………… </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  6. 6. <ul><li>Headings </li></ul><ul><li><h1>...</h1> largest </li></ul><ul><li><h2>...</h2> </li></ul><ul><li><h3>…</h3> </li></ul><ul><li><h4>…</h4> </li></ul><ul><li><h5>…</h5> </li></ul><ul><li><h6>…</h6> smallest </li></ul><ul><li>-html automatically adds a blank line break before and after a heading </li></ul>HTML Basic Tags
  7. 7. <ul><li>Paragraphs </li></ul><ul><li><p>…..</p> </li></ul><ul><li>-html automatically adds a blank line break before and after a paragraph </li></ul>HTML Basic Tags
  8. 8. <ul><li>Line Breaks </li></ul><ul><li><br> </li></ul><ul><li>-is used to break a line but don’t want to start a new paragraph </li></ul><ul><li>-forces a line break wherever you place it </li></ul><ul><li>-<br> is an empty tag, it has no end tag (i.e. </br>) </li></ul><ul><li>-<br> or <br/> </li></ul>HTML Basic Tags
  9. 9. <ul><li>Comments in HTML </li></ul><ul><li><!--This is a comment -- > </li></ul><ul><li>-comments will be ignored by the browser </li></ul><ul><li>-use them to explain your code, which helps when others are looking at your code or you come back later to make changes ( reusability ) </li></ul><ul><li>-to comment out code &quot;<!--&quot;, ends with &quot;-->&quot; </li></ul>HTML Basic Tags
  10. 10. <ul><li>Bold <b> </li></ul><ul><li>Italics <i> </li></ul><ul><li>Strong <strong> </li></ul><ul><li>Emphasized <em> </li></ul><ul><li>Small <small> </li></ul><ul><li>Subscript <sub> </li></ul><ul><li>Superscript <sup> </li></ul><ul><li>Center text <center> </li></ul>HTML Formatting
  11. 11. <ul><li>Advanced:Citations , Quotations, and Definition Tags </li></ul><ul><li>Abbreviation <abbr> </li></ul><ul><li>Address <address> </li></ul><ul><li>Blockquote <blockquote> </li></ul><ul><li>Short Quotation <q> </li></ul><ul><li>Citation <cite> </li></ul><ul><li>Definition <dfn> </li></ul>HTML Formatting
  12. 12. <ul><li>Attributes –provide additional info to a HTML element </li></ul><ul><li><h1 align=“center”> </h1> </li></ul><ul><li><body bgcolor=“red”> </body> </li></ul><ul><li><table border=“1”> </li></ul><ul><li>*One Tag can have multiple attributes </li></ul><ul><li><font size=“5” color=“navy” face=“courier”> </li></ul>HTML Attributes
  13. 13. <ul><li>Colors: there are 16 standards colors recognized by HTML </li></ul><ul><li>aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow </li></ul><ul><li>Can also use hexadecimal color codes (i.e. <font color=“#FF0000”>) </li></ul><ul><li>*See W3Schools site for large listing </li></ul>HTML Colors
  14. 14. <ul><li>Ordered Lists – this is a numbered list, starts with <ol> and ends with </ol>, each new item in list requires the <li> tag </li></ul>HTML Formatting 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
  15. 15. <ul><li>Un-ordered Lists –bulleted list of items, starts with <ul> tag and ends with </ul> tag, and each list item begins with <li> </li></ul>HTML Formatting Sample code…. <ul> List Name <li> list item 1 <li> list item 2 <li> list item 3 <li> list item 4 </ul> <ul><li>Browser view… </li></ul><ul><li>Yankees Starting Lineup </li></ul><ul><li>Johnny Damon </li></ul><ul><li>Derek Jeter </li></ul><ul><li>Bobby Abreu </li></ul><ul><li>Robbie McGarry </li></ul>
  16. 16. <ul><li>Definition Lists –not a list of items but a list of terms and explanations or definitions </li></ul><ul><li>Note: inside a definition list (the <dd> tag) you can put paragraphs, line breaks, images, links and other lists </li></ul>HTML Formatting 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….
  17. 17. HTML Notes and Miscellaneous Info White space Syntax
  18. 18. Creating Links <ul><li>Two types of links </li></ul><ul><li>absolute: link to an outside website </li></ul><ul><li>relative: link to another page within your website </li></ul><ul><li>HTML uses the <a> (anchor) tag to create a link to another document </li></ul><ul><li>An anchor can point to any resource on the Web: an HTML page, an image, a sound file, a movie, etc. </li></ul><ul><li>The correct Syntax of creating an anchor: </li></ul><ul><li><a href=&quot;url&quot;>Text to be displayed</a> </li></ul>
  19. 19. Creating Absolute Links <a href=&quot;url&quot;>Text to be displayed</a> Anchor Tag href attribute used to address the document to link to Where this link will take you (website, page, open file etc.) Text hyperlink that appears in browser Closing Anchor Tag
  20. 20. Creating Relative Links <a href=“nameofpage.html&quot;>Text to be displayed</a> Anchor Tag href attribute used to address the document to link to Where this link will take you (page within website name.) Text hyperlink that appears in browser Closing Anchor Tag
  21. 21. Creating Links Target attribute With the target attribute, you can define where the linked document will be opened. Target=“_blank” ….opens link in new browser window Enrichment….additional targets (4 of them), and Name attribute of Anchor tag <a href=&quot;url“ target=“_blank” >Text to be displayed</a>
  22. 22. Creating Links Email Link (Mailto) <a href= “ ”> click here to email me</a>
  23. 23. Link Colors You can change all of the link colors by adding the following attributes to the body tag. link –any hyperlink on page vlink –any visited (or link once clicked on) link on the page <body link=“red” vlink=“blue”>
  24. 24. 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”>
  25. 25. 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”> *Note <img….> tag is an empty tag with no </img> tag necessary
  26. 26. 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
  27. 27. <ul><li>Background Color </li></ul><ul><li><body bgcolor=“red”> </li></ul><ul><li>Background Image </li></ul><ul><li><body background=“picture.jpg”> </li></ul>Changing Backgrounds
  28. 28. <ul><li><hr> </li></ul><ul><li><hr noshade width=“50”> length of line (50 = 50 pixels) </li></ul><ul><li><hr noshade size=“20”> thickness of line </li></ul><ul><li><hr noshade size=“10” color=“red”> color of line </li></ul>Horizontal Rule
  29. 29. <ul><li>Tables are defined with the <table> tag </li></ul><ul><li>Tables are divided into rows with the <tr> tag </li></ul><ul><li>Each row is divided into data cells with the <td> tag </li></ul><ul><li>A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, nested tables, etc…. </li></ul>Tables
  30. 30. <ul><li><table border=&quot;1&quot;> </li></ul><ul><li><tr> </li></ul><ul><li><td>row 1, cell 1</td> </li></ul><ul><li><td>row 1, cell 2</td> </li></ul><ul><li></tr> </li></ul><ul><li><tr> </li></ul><ul><li><td>row 2, cell 1</td> </li></ul><ul><li><td>row 2, cell 2</td> </li></ul><ul><li></tr> </li></ul><ul><li></table> </li></ul>Tables Turn on table Turn on row 1 Turn on Cell #1 & Cell #2 Turn off row 1 Turn off table
  31. 31. <ul><li><table border=“#”> </li></ul><ul><li>-sets width of border around table cells, # refers to pixels </li></ul><ul><li><table cellspacing=“#”> </li></ul><ul><li>-sets amount of space between table cells, # refers to pixels </li></ul>Tables Attributes
  32. 32. <ul><li><table width=“#” or “%”> </li></ul><ul><li>-sets width of table in pixels or percentage of document width </li></ul><ul><li><td bgcolor=“red”> </li></ul><ul><li>-sets the background color of cell </li></ul>Tables Attributes
  33. 33. <ul><li>colspan & rowspan </li></ul><ul><li><td colspan=“#”> </li></ul><ul><li>-sets number of columns a cell should span </li></ul><ul><li><td rowspan=“#”> </li></ul><ul><li>-sets number of rows a cell should span </li></ul>Tables Attributes
  34. 34. Tables Attributes <ul><li>colspan & rowspan </li></ul>
  35. 35. <ul><li><th> table heading tag </li></ul><ul><li>Used in place of <td> </li></ul><ul><li>Usually used in first row </li></ul><ul><li>Makes text in this cell bold and larger </li></ul>Tables Attributes
  36. 36. Process for creating table… <ul><li>Visualize the table you want (draw sketch if need be) </li></ul><ul><li>2. Enter html tags </li></ul><ul><li><table> </li></ul><ul><li><tr> </li></ul><ul><li><td> cell1 row 1</td> </li></ul><ul><li><td>cell2 row1</td> </li></ul><ul><li><td>cell3 row1</td> </li></ul><ul><li></tr> </li></ul><ul><li></table> </li></ul><ul><li>3. Add attributes </li></ul><ul><li>-table border, cell spacing, cell padding, table width, table, background color or background images, table alignment, table headers </li></ul>