Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

How to create a simple page in HTML

Wednesday, August 14th, 2013 by Servage

This chapter introduces the elements you have to choose from for marking up text content. There probably aren’t as many of them as you might think, and really just a handful that you’ll use with regularity.

A semantically marked up document ensures your content is available and accessible in the widest range of browsing environments, from desktop computers and mobile devices to assistive screen readers. It also allows non-human readers, such as search engine indexing programs, to correctly parse your content and make decisions about the relative importance of elements on the page. With these principles in mind, it is time to meet the HTML text elements, starting with the most basic element of them all, the humble paragraph.

Paragraphs

<p>...</p>

A paragraph element

Paragraphs are the most rudimentary elements of a text document. You indicate a paragraph with the p element by inserting an opening <p> tag at the beginning of the paragraph and a closing </p> tag after it, as shown in this example.

Peace cannot be kept by force; it can only be achieved by understanding.</p>

Headings

We use the h1 and h2 elements to indicate headings. There are actually six levels of headings, from h1 to h6. When you add headings to content, the browser uses them to create a document outline for the page. Assistive reading devices such as screen readers use the document outline to help users quickly scan and navigate through a page. In addition, search engines look at heading levels as part of their algorithms (information in higher heading levels may be given more weight). For these reasons, it is a best practice to start with the Level 1heading (h1) and work down in numerical order (see note), creating a logical document structure and outline.

This example shows the mark-up for four heading levels.

<h1>Type Design</h1>
<h2>Serif Typefaces</h2>
<p>Serif typefaces have small slabs at the ends of letter strokes. In general, serif fonts can make large amounts of text easier to read.</p>
<h3>Baskerville</h3>
<h4>Description</h4>
<p>Description of the Baskerville typeface.</p>
<h4>History</h4>
<p>The history of the Baskerville typeface.</p>
<h3>Georgia</h3>
<p>Description and history of the Georgia typeface.</p>
<h2>Sans-serif Typefaces</h2>
<p>Sans-serif typefaces do not have slabs at the ends of strokes.</p>

The output in a web page is shown below.

Untitled

Lists

Humans are natural list makers, and HTML provides elements for marking up three types of lists:

• Unordered lists. Collections of items that appear in no particular order.

• Ordered lists. Lists in which the sequence of the items is important.

• Description lists. Lists that consist of name and value pairs, including but not limited to terms and definitions.

All list elements are displayed as block elements by default, which means that they start on a new line and have some space above and below, but that may be altered with CSS.

Unordered lists

To identify an unordered list, mark it up as a ul element. The opening <ul> tag goes before the first list item, and the closing tag </ul> goes after the last item. Then, each item in the list gets marked up as a list item (li) by enclosing it in opening and closing li tags, as shown in this example. Notice that there are no bullets in the source document. They are added automatically by the browser.

 <ul>
<li>Samsung</li>
<li>Apple</li>
<li>LG</li>
<li>HTC</li>
<li>Nokia</li>
</ul>

The output in a webpage is shown below.

Capturex

Ordered lists

Ordered lists are for items that occur in a particular order, such as step-by step instructions or driving directions. They work just like the unordered lists described earlier, except they are defined with the ol element (for ordered list, of course). Instead of bullets, the browser automatically inserts numbers before ordered list items, so you don’t need to number them in the source document.

<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>PHP</li>
</ol>

The output in a webpage is shown below.

Capturec

Description lists

Description lists are used for any type of name/value pairs, such as terms and their definitions, questions and answers, or other types of terms and their associated information. The whole description list is marked up as a dl element. The content of a dl is some number of dt elements indicating the names and dd elements for their respective values.

Here is an example of a list.

<dl>
<dt>Linotype</dt>
<dd>Line-casting allowed type to be selected, used, then recirculate into the machine automatically. This advance increased the speed of typesetting and printing dramatically.</dd>
<dt>Photocomposition</dt>
<dd>Typefaces are stored on film then projected onto photo-sensitive paper. Lenses adjust the size of the type.</dd>
<dt>Digital type</dt>
<dd><p>Digital typefaces store the outline of the font shape in a format such as Postscript. The outline may be scaled to any size for output.</p>
<p>Postscript emerged as a standard due to its support of graphics and its early support on the Macintosh computer and Apple laser printer.</p>
</dd>
</dl>

The output in a webpage is shown below.

ddd

Further Reading

How to create a simple page in HTML, 5.0 out of 5 based on 2 ratings
Categories: Guides & Tutorials

Keywords:

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.