Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.



Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this


  1. 1. Introduction to (X)HTML Hum Col 450.03 Jason Palmeri 01/09/06
  2. 2. What is HTML? <ul><li>Stands for Hypertext Markup Language. </li></ul><ul><li>Developed by Tim Berners-Lee (1989) to facilitate sharing of scientific documents. </li></ul><ul><li>Added support for images when the Mosaic browser was released (1994). </li></ul><ul><li>Defines the structure of documents (marking up different kinds of content as paragraphs, lists, headers etc.). </li></ul>
  3. 3. What Are Web Standards? <ul><li>The World Wide Web Consortium (W3C) was formed in 1994 to set standards for coding in html. </li></ul><ul><li>Standards ensure that the content will display the same no matter what browser (Explorer, Firefox, Safari, JAWS) and platform (Windows, Mac, Linux) the reader is using. </li></ul><ul><li>XHTML (a stricter version of HTML) is the current W3C standard. </li></ul>
  4. 4. Won’t Dreamweaver Write HTML for me? <ul><li>WYSIWYMG (“What You See is What You Might Get”) editors such as Dreamweaver will automate the process of writing code, but they make mistakes that you will need to fix by editing the code. </li></ul><ul><li>To meet web standards for accessibility, you will sometimes need to add additional code that Dreamweaver won’t write. </li></ul>
  5. 5. HTML Tags and Elements <ul><li>An HTML element is a piece of content enclosed between an opening and a closing tag. </li></ul><ul><li>The opening tag is an abbreviation/word enclosed in brackets <tag>. The closing tag is the same except it includes a backslash between the first bracket and the tag </tag>. </li></ul><ul><li>Tags should always be lowercase. </li></ul><ul><li><p> This is a paragraph </p> </li></ul>
  6. 6. HTML Header Tags <ul><li>There are six levels of header tags: </li></ul><ul><li><h1> h1 is the largest and most important header </h1> </li></ul><ul><li><h6> h6 is the smallest and least important header </h6> </li></ul>
  7. 7. HTML Structure: Nesting Tags <ul><li>The <ul> tag defines a unordered (bulleted) list while <li> tags define a line in a list. </li></ul><ul><li>The <li> tag can be nested (placed inside) the <ul> tag. </li></ul><ul><li><ul> </li></ul><ul><li><li> Rock on with the nesting </li> </li></ul><ul><li><li> Go crazy with the nesting </li> </li></ul><ul><li></ul> </li></ul>
  8. 8. HTML Structure: Empty Tags <ul><li>Empty tags are tags that don’t enclose any content. </li></ul><ul><li>The br tag <br /> is an empty tag that creates a break in a line . </li></ul><ul><li>You indicate an empty tag by placing a space and a backslash before the closing bracket. </li></ul><ul><li><p> This is bracket tag <br /> </li></ul><ul><li>It forces a line break in this paragraph .</p> </li></ul>
  9. 9. HTML attributes <ul><li>Some tags have attributes that define how they should appear or what they should do. </li></ul><ul><li>The link tag <a> has the attribute href=“url” to define where the link should lead. </li></ul><ul><li>Attributes always go in the opening tag. </li></ul><ul><li><a href=“”> </li></ul><ul><li>This is a link to our class site </a> </li></ul>
  10. 10. Multiple HTML attributes <ul><li>HTML tags can have multiple attributes separated by a space. </li></ul><ul><li>In addition to the href attribute, link <a> tags can also have a target. </li></ul><ul><li>The target=“_blank” attribute opens a link in a new window (overriding the default of opening in the same window). </li></ul><ul><li><a href=“http://rhetorical” </li></ul><ul><li>target=“_blank”> This link opens in a </li></ul><ul><li>new window </a> </li></ul>
  11. 11. Inserting images <ul><li>The <img /> tag is an empty tag for inserting images. </li></ul><ul><li>The <img /> tag has the attribute src=“url” to tell the browser where on the web the image is located. </li></ul><ul><li>The <img /> tag has the attribute alt=“description” to describe the content of the image in words for those who can’t see it. </li></ul><ul><li>An image is always a separate file (jpg, png, or gif) located in a different place than the webpage (htm) file. </li></ul>
  12. 12. Example image code: <ul><li><img src=“” alt=“picture of jason” /> </li></ul>