Adding Page Content

Web Design Help » Web Design Basics » Learn Basic HTML and Web Page Construction

Page Contents
Paragraph Tag
Blockquote
Lists
Rule (Line)
Block & Inline Elements
Non-Breaking Space
BR (Linebreak)
Link Tag
Anchor
Email Link
Image Tag
Text & Image Alignment

Now we'll address the tags for adding page content — text, images and links. We'll leave out the page structure tags in order to focus on these tags.

:: Header Tags (H tags)

Most web pages need a "headline" that distinguishes itself from the rest of the text. The header or H tags are good for this, although they technically follow outlines of the I. A. (a) variety. H tags go from H1–H6. We'll show you later how to make them look nicer by applying styles to them — but, for now, it's important to know what they are.

<h1>h1 About Joe's Bookshelf</h1>
<h6>h6 About Joe's Bookshelf</h6>

h1 About Joe's Bookshelf

h6 About Joe's Bookshelf

Well, I agree. Both of those are fairly ugly. We can style them (change their look) with CSS — and, while CSS is a huge topic in itself which I'll be delving into later, I can give a little tip here:

<h1 style="color:#F00; font-size:20px">About Joe's Bookshelf</h1>

About Joe's Bookshelf

:: Paragraph Tag

Paragraph tags may contain the bulk of your text; they're separated from other page elements with a double line space, like hitting {Enter} twice on your keyboard.

<p>Default paragraph</p>
<p>Default paragraph</p>

Default paragraph

:: Blockquote Tag

The Blockquote tag indents its contents. Note that, if what you want is margins, blockquote will work ... but will expand or contract with the size of the browser screen. We'll cover another way to achieve margins later. Note that the blockquote element can be nested.

<blockquote>Blockquote indents whatever's in it.</blockquote>

Blockquote indents whatever's in it.

<blockquote><blockquote>Double Blockquote</blockquote></blockquote>

Double Blockquote.

:: Lists

Lists are numbered ("ordered") or bullet-pointed (unordered) lists. The opening tag in each specifies whether the list is numbered or bulleted — note that the closing tag comes at the end:

Ordered List

Text
Text
Text

Unordered List

Text
Text
Text

:: Rule (Line) Tag

The <hr> tag gives a horizontal "rule" or line. Note that there is no closing tag. The default is a centered rule of 100% of the screen (or any container it is in. The text for this Tutorial is in an invisible container that gives it left and right margins). You can also use the align command to make the rule align to the left or right:

<hr>

BLOCK versus INLINE TAGS

The above tags are displayed with an extra blank line above and below, and are called "block level elements". These can contain other block level elements (for example, our double blockquote) and inline elements — those which can be inserted within the text. This is fairly intuitive, as you will see.

  — non-breaking space

Aside from normal spaces, such as those between words, HTML allows a second type. Although references tell us it's just a "space", the letters seem to reference a word processing term: the non-breaking space. The "empty" paragraph below will display in a browser only as extra blank lines.

  can also be used to hold words together so that they do not get separated by a line break (thus, our non-breaking space):

Because HTML displays two or more regular spaces (spacebar spaces) as one, you can alternate spaces with   to achieve horizontal spacing. (But don't use strings of spaces and   to try to center page elements. We'll cover the proper alignment further down.)

<p>      Hello</p>

Hello

:: BR (Line Break) Tag

The BR tag gives a line break, like the carriage return on a typewriter (or the Enter key on a computer); note that there is no closing tag:

<p>One sentence here.<br>
Another sentence here.</p>

One sentence here.
Another sentence here.

Bear in mind that HTML "wraps around" from line to line like a word processor. For example, I am not hitting the {Enter} key at the end of each line of this paragraph; instead, the HTML automatically wraps around to the next line. Due to the differences in display by various browsers, it's usually best to let the text wrap around, rather than to try to control it with <br> ... lest you end up with awkward line breaks!

:: Link Tag

Ah, our "hypertext link"! Link tags specify not only where the link will take you, but what the text of the link will say. Note that, with the a href tag, the closing tag is simply </a>. In our example below, "0-intro.html" is the first page of this Tutorial. (All link examples on this page are "live".)

Go to home page

If the page or file you're linking to is in a subdirectory:

If the page or file you're linking to is one directory "above":

:: Anchor Tag

The Anchor tag is a method of linking to a specific point in a page. Two elements are needed: the specific point itself (the "anchor") and then the link to the anchor.

Here, our anchor is on the same page, so no .html page needs to be specified.

Anchor: <a name="top"></a>

Link to anchor: <a href="#top">Go to "Adding Page Content" at top of this page</a>

Go to "Adding Page Content" at top of this page

If the anchor is on another page, simply add the anchor link to the HTML page link:

<a href="2-basicpagemarkup.html#top">Basic Web Page Markup</a>

Basic Web Page Markup

:: Email Link

Email links allow your website visitors to click on a link to open an email window in their email programs. Just add "mailto:" to an a href link containing the email address:

<a href="mailto:someone@somesite.com">Email us</a>

Email us

:: Image Tag

Image tags allow us to specify where images are to be displayed in pages.

In HTML, you specify where the image is to be displayed, but it does not become part of the page. Thus, when you launch your website, you'll need to upload your pages and images. If you've ever seen the "broken image" icon on a website, you'll know that the image was not uploaded.

Broken Image Icon

Specifying Image Dimensions. The image tag should include height and width specifications to enable the browser to "plan" how much space the image will take (and speed download time). Here, we specify that it's an image (img), that the source (src) is the "dot.gif" image, which is in the images folder (directory), and that the image has a width of 30 pixels and a height of 32 pixels:

:: Image Link

To make an image link, just put the img tag into the a href tag. Note the border="0" — without this, most browsers will display a blue border around the image that is a link. This might have been nice when browsers with the capability of displaying image links were new, but it doesn't usually look good on modern websites.

(click the dot to go to the first page)

:: Image Email Link

Same as above, with the mailto:you@website.com email address.

(click the dot to send email to us)

Text & Image Alignment

Images (and other elements) can be aligned (positioned) with respect to the surrounding text. The first image has no alignment specified, so the browser default takes effect.

Notice also how the block-level element, the <p> tag, contains the image tag (an inline element).

:: Default Alignment

Text here. Text here. Text here.

:: Align Middle

Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here.

:: Align Bottom

Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here.

:: Align Left

Text here.
Text here.
Text here.
Text here.

:: Align Right

Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here.

Note re Alignment: the "align" specification can be inserted into most tags, such as the paragraph <p> tag and tables (which we'll address next): align="left", align="right" and align="center".

That's it. We've covered the HTML basics for adding content to your pages, but so far we've only added linear paragraphs to a page. Let's move on to structuring our page for a little more style.

Okay? Let's go to Tables.

The Learn Basic HTML Series:

DianeV Web Design Studio

© 1998- DianeV Web Design Studio. All Rights Reserved. :: Privacy/Legal/Return Policy. Any unauthorized reproduction
or distribution of the contents of this website is a violation of copyright law and may result in severe civil and criminal penalties.