How an html file is structured

  • 679 views
Uploaded on

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

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

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
679
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
2
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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