Creating a web page with HTML

HTML stands for HyperText Markup Language. The web pages you see, including this one, are chiefly composed of HTML. Although html is just text, such as letters, numbers and several special characters, web browsers interpret html to produce text, graphic elements and formatting.

Although there are many tools for visually authoring web pages, knowing some html is extremely valuable. It can allow you to understand how web pages are created so that you can better analyze and customize them, or even create your own pages from scratch.

Web pages are themselves a document, but they also have parts and elements. Tags are short pieces of code that tell the browser how to interpret other text. Tags are typically enclosed in <> signs. Tags also come in pairs, where tags in the format if </> enclose content in those tag pairs.

Simple web pages are embodied in a single file, in the form of filename.html, where the .html tells the browser that this is an html file. (Entire websites often utilize several or many files).

The simplest web page is:

<html>

</html>

Although it does nothing, it is an html document. A web page can be given structure, such as:

<html>

  <head>

  </head>

  <body>

  </body>

</html>

Information about the web document goes into the head section. Such can include the title for the document, styling information, script resources and other information. Document contents goes into the body section. This can include headings (including a title that appears in the page), paragraphs, lists, image, videos and much more.

Create your own file

This document has a head area which can provide information about the document. It also has a body area that will hold and possibly display the content. Create a file called firstwebpage.html in a text editor. The text editor should be using plain text. Xcode, or pico can be used. MS Word is problematic because it adds much hidden text which becomes problematic for web pages. Add the indenting shown to improve readability. Not the tags are arranged in pairs. They can be on separate lines, but do not need to be.

Thne add the above code to it. Save the file and open it in a browser. You should see a blank page, but there should not be any error warnings. There are line numbers to the left of the below html code. Line numbers are useful to refer to particular items of code. Some text editors will display them. Line numbers are not part of the code, so do not enter them.

<html>

    <head>

        <title>My First Web Page</title>

    </head>

    <body>

        <h1>This is my first web page.</h1>

    </body>

</html>

Congratulations, you have created a web page, and it should show a title at the top of the window or tab, as well as content in the window itself.

You can use additional tags to add some helpful formatting.

The h2 page provides a header. Increasing the number makes the header smaller (6 is the maximum).
The p tag organizes text into a paragraph.
br adds a line break line. The slash at the end of <br /> removed the need for an enclosing tag such as for a line, where it is generally not possible to enclose content anyway.
hr adds a horizontal line.
The em tag adds emphasis.

<html>

    <head>
        <title>My First Web Page></title>
    </head>

    <body>

        <h2>Introduction</h2>
        <hr />

        <p>This is the <em>first</em> paragraph.</p>

        <p>This is the second paragraph.</p>

    </body>

</html>

Lists

It is possible to create both ordered and unordered lists in html.

ul creates an unordered list.
ol creates an unordered list.
li creates an element (list item) in either list type.

For example:

<h3> Cities around the world</h3>:
<ul>
    <li>Tokyo</li>
    <li>Paris</li>
    <li>Lima</li>
</ul>

<h3> Years of recent summer Olympic Games</h3>:
<ol>
    <li>2004</li>
    <li>2008</li>
    <li>2012</li>
    <li>2016</li>
</ol>

Links

Hyperlinks in html using the “a” element. href specified the target of the link. The text that you want displayed for the link got between the a tags.

<a href="http://www.historyquant.com">HistoryQuant</a>

Tables

You can create tables in html.

table creates the table
tr creates a row
th creates a row header
td creates a table cell

Bringing It All Together

Let’s bring all of these features together into a single file.

<html>

<head>
    <title>My First Web Page</title>
</head>

<body>

<h2>Introduction</h2>
<hr />
 
This is the <em>first</em> paragraph.

This is the second paragraph.

<table>
    <tr>
        <th>Country</th>
        <th>Continent<th>
    </tr>
    <tr>
        <td>Australia</td>
        <td>Australia</td>
    </tr>
    <tr>
        <td>China</td>
        <td>Asia</td>
    </tr>
    <tr>
        <td>Italy</td>
        <td>Europe</td>
    </tr>
    <tr>
        <td>Zimbabwe</td>
        <td>Africa</td>
    </tr>
</table>

<h3>Useful additional web page languages</h3>

<ul>     
    <li>Cascading Style Language(CCS)styles content.</li>
    <li>Javascript makes pages more dynamic.</li>
    <li>PHP connect web pages to databases.</li>
</ul>

<h3>You should learn web programming in the following order</h3>
   
<ol>     
    <li>HTML</li>
    <li>CSS</li>
    <li>Javascript</li>
</ol>

Please see <a href="http://www.historyquant.com">
HistoryQuant</a> for additional tools.

</body>

</html>

This page may not be beautiful, but it all should display without errors, and demonstrate some of the most useful features of html.

Troubleshooting

Having trouble with your web page? Here are several of the most common problem areas.

The file does not end in .html
Tags are not organized in pairs.
The second tag in a pair is missing its /
One pair of tags only encloses one of another pair. Tag pairs should not be split across enclosing tags.
A tag may be misspelled.
Your file contains hidden characters.

« Graphing with R | COURSE | Styling a web page with CSS »

Computer Skills for Research