Jump to Main Content

Create an HTML Web Page

Body tag

Between the opening and closing body <body> tag is where content is displayed. This includes headings, paragraphs, tables, unordered & ordered lists, etc.

Heading Tags

HTML supports six headings, one through six, with one being the most prominent. The syntax for a heading three tag is:

 <h3>Heading Three</h3>

Between the opening and closing <body> tag, place a heading three tag with your name as follows:

 <h3>Your Name Page</h3>

Save your file and preview the results.

Heading Three Tag

Heading three alignment

Heading tags support three basic alignments, which are:

  • Left
    • default
  • Center
  • Right

In order to align our heading three in the center of the web page, between the opening heading three tags, press the space bar once and type the following:

<body>
<h3 align="center">Ryan's Page</h3>
 </body>

Save your file and preview the results.

Heading Three Tag Centered

Paragraphs

Arguably the most used tag in HTML. The syntax for a paragraph tag is:

<body>
<h3>Ryan's Page</h3>
<p></p>
</body>
</html>

Paragraphs are not treated the same as they are with typical word processing documents. Paragraphs in HTML do not recognize word wrap the same as Word documents. For example, in your text editor, you can have one long line of text in a paragraph tag and it does not affect word wrap in a browser. The browser will wrap the text at a predefined width which is suitable for viewing. For an example of this, look at index_nocarriage.html in the project files link. To create new paragraphs, you simply create additional paragraph tags. Using your current file, follow these steps to insert text into the opening and closing paragraph tags:

  • Visit: http://www.lipsum.com/
  • Highlight a sample paragraph of text, right click and select copy
  • Between the opening and closing paragraph tags, right click and select paste

If you want word wrap in PS Pad, follow these steps:

  • From the main menu, select View>Word Wrap Lines

PS Pad Word Wrap

Save your file and preview the results.

Paragraphs

Alignment of paragraph tags work identically to that of heading tags.

Images

Web pages or websites wouldn’t be very appealing if you didn’t use images. The syntax for the image tag is:

<img src= "images/dragon2.gif"  width="162" height="216" alt="Dragon Blowing  Smoke">

The attribute/values are:

  • Src
    • Informs the browser where the image is located
  • Width & Height
    • Informs the browser of the physical dimensions of your graphic
  • Alt
    • Informs assistant readers for blind people that an image is in your web page. As an assistant reader scans the above image, the voice command would say “Dragon Blowing Smoke”

If you don’t know the dimensions of your graphic, follow these steps:

  • From the Desktop, double-click My Computer
  • Double click the local hard drive (C:)
  • Right click just below the address bar:

My Computer - Below Address Bar

  • Select More:

Select More

  • A new window will show
  • Scroll down to find dimensions and check it:

Choose dimension

  • Click OK

When you return to the original window, you will see the dimensions of your graphic:

My Computer - Dimension Shown

We'll continue working with images from the next page.

top of page