The (X)HTML Document

2.481 visualizaciones

Publicado el

A simple overview of the parts that make up an (X)HTML document.

Publicado en: Tecnología, Diseño
  • Sé el primero en comentar

The (X)HTML Document

  1. 1. The (X)HTML Document <ul><ul><li>LearningNerd.com </li></ul></ul>Background photo by Gualtiero
  2. 2. <ul><ul><li>This is part of a series of (X)HTML and CSS tutorials which can all be found at LearningNerd.com/series/xhtml-css </li></ul></ul>
  3. 3. <ul><ul><li>The (X)HTML document contains two main sections: the head and the body. </li></ul></ul><ul><ul><li>This slideshow will cover what you need to know to turn your blank HTML file into a web page. </li></ul></ul>
  4. 4. <ul><ul><li>First, the head: this section is an invisible element containing info about the web page. </li></ul></ul>Background photo by Trent Strohm <ul><ul><li><head></head> </li></ul></ul><ul><ul><li>The elements in the head aren't visible on the web page itself, but they're just as important. </li></ul></ul>
  5. 5. <ul><ul><li>Inside the head, you need to specify the title of your web page with this tag: </li></ul></ul><ul><ul><li><title></title> </li></ul></ul><ul><ul><li>It should be descriptive, fairly short, and understandable in any context. </li></ul></ul>
  6. 6. <ul><ul><li>The title appears at the top of the web browser, in search results, and more. </li></ul></ul>
  7. 7. <ul><ul><li><body></body> </li></ul></ul>Background photo by Gonzalo Barrera Sáez <ul><ul><li>Next, the body. It contains everything you see on the web page. </li></ul></ul><ul><ul><li>Most of this series will focus on the content of the body element. </li></ul></ul>
  8. 8. <ul><ul><li><html> </li></ul></ul><ul><ul><li><head> </li></ul></ul><ul><ul><li><title> Title Here </title> </li></ul></ul><ul><ul><li></head> </li></ul></ul><ul><ul><li><body> </li></ul></ul><ul><ul><li>Content Here </li></ul></ul><ul><ul><li></body> </li></ul></ul><ul><ul><li></html> </li></ul></ul><ul><ul><li>The head and body are wrapped inside html tags to mark the start and end of the (X)HTML document. </li></ul></ul>Photo by Craig Munro
  9. 9. <ul><ul><li>But there's one more thing that appears even before the opening html tag: the document type declaration . </li></ul></ul><ul><ul><li>Also called a DOCTYPE , it tells the web browser what version and what type of (X)HTML you're using. </li></ul></ul>
  10. 10. <ul><ul><li>Transitional </li></ul></ul><ul><ul><li>Only use this for older websites that are still in the process of being updated to the new version of (X)HTML. </li></ul></ul><ul><ul><li>Strict </li></ul></ul><ul><ul><li>This is the one you should use. Documents with strict (X)HTML are not allowed to use outdated tags. </li></ul></ul><ul><ul><li>Both HTML and XHTML have these two main types: </li></ul></ul>
  11. 11. <ul><ul><li>For example, here's the HTML Strict document type declaration (DOCTYPE) : </li></ul></ul><ul><ul><li><!DOCTYPE HTML PUBLIC </li></ul></ul><ul><ul><li>&quot;-//W3C//DTD HTML 4.01//EN&quot; </li></ul></ul><ul><ul><li>&quot;http://www.w3.org/TR/html4/strict.dtd&quot;> </li></ul></ul><ul><ul><li>As mentioned in the intro for this series, you should stick with HTML for now, so use this DOCTYPE. </li></ul></ul>
  12. 12. <ul><ul><li>See LearningNerd.com/xhtml-doc for a basic HTML template that you can copy and paste into your own file. </li></ul></ul><ul><ul><li>There are some other important tags for specifying information about your web page, but more on those later. </li></ul></ul>
  13. 13. <ul><ul><li>The next part of this series will cover some essential tags for adding text to your new (X)HTML document. </li></ul></ul><ul><ul><li>If you have any questions, feel free to contact me through LearningNerd.com . </li></ul></ul>

×