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.

The (X)HTML Document

2,516 views

Published on

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

Published in: Technology, Design
  • Be the first to comment

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>

×