Announcement

Collapse
No announcement yet.

HTML 101: pt2 - Simple Page Layout

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • HTML 101: pt2 - Simple Page Layout

    Part 1: Starting Out

    So you have your shell, and now you want to come out of it…

    Simple enough but, in order to ensure that you get the output layout that you want, you will do well to follow this tutorial, as it covers the standard coding for headings, paragraphs, lists and images.

    The tutorial refers to Cascaded StyleSheets (CSS) in several places, but will not go into detail here. Tutorials will be written for CSS in time.

    A simple text layout (only the body section is displayed, because that is all that matters in this example – it is still necessary to have all the other elements from the skeleton in the previous tutorial in order for the page to be correct):

    Code:
      <body>
        <div class=’section’ id=’heading’>
          <h1>Main Page Heading</h1>
    
          <p>
           This is a very simple example of how a page could be laid out.
          </p>
        </div>
    
        <div class=’section’ id=’section_1’>
          <h2>Section Heading</h2>
    
          <p>
            A page can be divided up into several sections – but make sure that it is not too
            long.
          </p>
    
          <p>
            Paragraphs can be used, but sometimes it makes sense just to use a line
            break<br />
            This lets you start a new line in the middle of a paragraph.
          </p>
        </div>
    
        <div class=’section’ id=’section_2’>
          <h2>Section Heading</h2>
    
          <p>
            <span class=’highlight’>Notice how I use div elements to separate
            sections</span> – this will make it easier for when I start to use styling, along
            with the <b>class</b> and <i>id</i> attributes.
          </p>
    
          <img src=’images/logo.jpg’ style=’height : 50px; width : 150px’ alt=’Logo’ />
        </div>
      </body>
    Heading Tags

    Headings (like the <h1> tag) are highly relevant to search engines, like Google, and should be used sensibly within the page.

    Headings are generally displayed in browsers as larger and bolder text – although with CSS styling it is possible to define the look of the headings to personalise your page.

    Code:
          <h1>Main Page Heading</h1>
          <h2>Section Heading</h2>
    There are six grades of heading (<h1>, <h2>, <h3>, <h4>, <h5>, <h6>) – they can be used in any order, but it is generally recognised that <h1> is a main heading, <h2> is a section heading, <h3> a sub-section heading, and so on. Search engines will place the most relevance on the contents of your main heading, and less relevance on the subsequent sub-headings.

    Divisions and Paragraphs

    Code:
        <div class=’section’>
          <p>
           This is a very simple example of how a page could be laid out.
          </p>
        </div>
    The point of the <div> element is to define sections within a page. Combined with CSS styling, this means that you can lend a varied look to certain parts of your page.

    <div> elements can be arranged in a variety of ways, allowing for flexible page layouts and grouping of information. They can even be nested:

    Code:
        <div class=’section’>
          <div class=’subsection’>
            <p>
              This separates the information about one item…
            </p>
          </div>
          <div class=’subsection’>
            <p>
              …from another
            </p>
          </div>
        </div>
    Please note that the names within the class attribute are examples only – they can be anything you like. The attribute is used by CSS to identify elements for styling.

    Paragraph elements (<p>) are pretty much that. They are sections of text within a page. You will find that, by default, the <p> element adds a bit of clearspace above and below the text displayed within it.

    Sometimes, all you want to do is start a new line in the browser without that clearspace. This can be done with the <br /> tag.

    Text Highlighting

    Code:
          <p>
            <span class=’highlight’>Notice how I use div elements to separate
            sections</span> – this will make it easier for when I start to use styling, along
            with the <b>class</b> and <i>id</i> attributes.
          </p>
    If you want to highlight a piece of text, you can make use of <span> and CSS styling, or just plain old <b> (bold) or <i> (italic) elements. You could use the <u> (underline) element, but that can cause confusion as people expect underlined text to be a hyperlink.

    It is recommended that you do make use of the <b> and <i> tags, as they provide information that a search engine can make out and inform it that the content within those particular tags carry a higher relevance, whereas <span> is without context – it only gains meaning depending on the CSS attributes defined for it – something that a search engine will not see.

    CSS styling can be used on <b> and <i> tags as well – but remember to only use them where necessary, otherwise the text they are highlighting for the search engine will be swamped.

    If you copy the above HTML paragraph code example, you will not see a difference between the text within the <span> element or outside it – this is because the <span> element requires CSS in order to change its appearance.

    Inserting Images into a Page

    Code:
          <img src=’images/logo.jpg’ style=’height : 50px; width : 150px’ alt=’Logo’ />
    Images are placed “inline” – that is, they are put where the next bit of text would have been put in the flow of the document. It is possible to control image placement with a bit of CSS or just some clever HTML design.

    An <img> element requires, of course, a source – the location of the image that is to be displayed. This is usually referred to with a relative path from where the page is stored – in this case it is logo.jpg which can be found in the images folder.

    Alternatively, it can be an absolute path (from the driver letter), although this is not recommended as it limits the portability of a page/site, as you have to have the same folder path and drive letter no matter what server the page is stored on.

    A third source can be via a URL, such as http://www.htmlforums.com/style1/images/misc/logo.gif. This is not the norm, however, and it can be abused in the form of “hotlinking”, where unscrupulous designers connect to images on other people’s sites. This increases the other person’s bandwidth usage, without affecting the visitor count.

    The style attribute is part of CSS, but is required to let the browser know what size the image is expected to be. This lets the browser draw the rest of the page after the image, even while the image is still being downloaded to the client.

    Finally, an alternative text is required in case there is a problem in downloading the image, or if a user has disabled automatic image downloads, or if a user is using a text-only browser. This text is displayed in place of the image, and lets users know something should be there.

    So that’s that… More tutorials will follow with information on navigation and tables and lists and…

    Part 3: Pulling it Together with Links
Working...
X