How an XHTML file is structured<br />This slide show should help you understand how an xhtml file should be structured.<br />
<html><br />The finished xhtml file<br />The diagram on the right shows you how a finished xhtml file should be structured...
<html><br />Starting point – the <html> tag<br />Once you have an blank Notepad document open, the first thing you need to...
Two Sections<br />The next thing we do is split the document in to two sections:<br />The head<br />The body<br />Your cod...
Reminder!<br />The <body> section is where you put the content of your page. This includes your headers, paragraphs, lists...
<html><br />The <title> tag<br />The next thing we add is the title tag. <br />This goes between the <head> tags.<br />You...
About the <title> tag.<br />Try to remember that the <title> tag is different to the headings you use in your content.<br ...
<html><br />And that’s the basic structure of a web page.<br />All that remains now is to:<br />Save it using the .html fi...
Upcoming SlideShare
Loading in …5
×

How an html file is structured

935 views

Published on

This presentation gives you an overview of the basic structure of a web page. Refer back to this if you need to.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
935
On SlideShare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

How an html file is structured

  1. 1. How an XHTML file is structured<br />This slide show should help you understand how an xhtml file should be structured.<br />
  2. 2. <html><br />The finished xhtml file<br />The diagram on the right shows you how a finished xhtml file should be structured.<br />We will go through this from the beginning to help you understand.<br /><head><br /><title><br /><body><br />
  3. 3. <html><br />Starting point – the <html> tag<br />Once you have an blank Notepad document open, the first thing you need to do is type:<br /><html><br /></html><br />This creates the first layer – as shown on the right.<br />We will be adding more layers inside this.<br />The <html> tags wraps around all of the other tags we use. Your web page, then, needs to start with <br />
  4. 4. Two Sections<br />The next thing we do is split the document in to two sections:<br />The head<br />The body<br />Your code at this stage should now look like this:<br /><html><br /><head><br /></head><br /><body><br /></body><br /></html><br />Can you see that the <html> tags wrap around the <head> and <body> tags? They enclose the head and body sections (see diagram right).<br /><html><br /><head><br /><body><br />
  5. 5. Reminder!<br />The <body> section is where you put the content of your page. This includes your headers, paragraphs, lists, links etc. This is the page the visitor to your web site reads.<br />The <head> section is where extra information goes. This includes the <title> tag which tells the browser what to show in the title bar of your web browser.<br /><html><br /><head><br /><body><br />
  6. 6. <html><br />The <title> tag<br />The next thing we add is the title tag. <br />This goes between the <head> tags.<br />Your code at this point should now look like:<br /><html><br /><head><br /> <title>Page title goes here</title><br /></head><br /><body><br /></body><br /></html><br />Notice that the title tag is indented. This makes your code easier to read.<br /><head><br /><title><br /><body><br />
  7. 7. About the <title> tag.<br />Try to remember that the <title> tag is different to the headings you use in your content.<br />Text that appears between the <title> tags appears in the title bar and on the tabs of the web browser displaying your page. See the example to the right.<br />In this example, the <title> tags would read:<br /><title>BBC – Homepage</title><br />Hopefully this makes sense.<br />
  8. 8. <html><br />And that’s the basic structure of a web page.<br />All that remains now is to:<br />Save it using the .html file extensione.g. mypage.html<br />Add content between the <body> tags.<br /><head><br /><title><br /><body><br />Content goes in here<br />

×