How to create a web page

It is free and relatively easy to create a web page. You only need a computer with a text editor. If you are on a windows machine you can use NotePad. Open NotePad and either write the following code or just copy and paste it.

<html>
<head>
</head>
<body>
Hello world!
</body>
</html>

Save it as index.html and make sure its name is index.html, not Index.html, meaning all the characters must be lower case. Now open the file with your web browser. You should see something like the following:

Hello World first web page

The next step is to upload this file to your web server. Open you FTP client software and upload the index.html file inside your htdocs folder.

Finally, open your web browser and visit your web site address. You should see your web page loading. Now you need to start customizing your web page. A task that we will address in a future article.

As an aside, you may wonder which was the first web page ever made and maybe take it as an example to develop what could be your very first web site.

The first web page in The Internet was created by Tim Berners-Lee. Its original location has changed but, for now, it remains somewhere inside w3.org domain, exactly here. Once you are there, right-click over the web page and click in View source code. Copy all and paste it to NotePad (Windows) or TextEdit (Mac OS) or your favorite text editor (any OS). You need to delete the original content because it is property of its creator. You should add your own code and write your own content.

Again, save it as index.html and upload it to your htdocs directory. Now visit your URL with your web browser and voilá. There you have it, your first web page.

But you will need more HTML elements and attributes to give some style to your content. We’ll be covering:

Text styles

You may want to mark some words with a bigger and darker text, or bold text:

Lorem ipsum. Your 
<b>
bold text goes here.
</b>

Or you may want to mark some words with a slight inclination, or italic text:

Lorem ipsum. Your 
<i>
italic text goes here.
</i>

Perhaps you want to remark some words with a line below the text, or underline text:

Lorem ipsum. Your 
<u>
underlined text goes here.
</u>

Perhaps you found some words you want to delete in your next document version, or strike-through text:

Lorem ipsum. Your 
<strike>
strike-through text goes here.
</strike>

You can make your text to be shown as teletype or monospaced text too, using the code below:

Lorem ipsum. Your 
<tt>
teletype or monospaced text goes here.
</tt>

You can make text bigger and/or smaller with the following code:

Lorem ipsum. Your 
<big>
big text goes here 
</big>
and your 
<small>
small text goes here.
</small>

Do you want to separate two sentences with a LINE BREAK? You can use the BR element as in the following example:

Lorem ipsum. Your first sentence.
<br>
Your second one.
<br>
And the third sentence.
Phrase styles

It is possible to emphasize text too with EM and
STRONG elements, for example:

Lorem ipsum. Your 
<em>
EM emphasized text goes here 
</em>
and your 
<strong>
STRONG emphasized text goes here.
</strong>

If you wish to show some program code lines of text, use the CODE element, for example:

Lorem ipsum. Your 
<code>
program code text goes here.
</code>

In a similar way, you can use the CITE element for reference and citation, for example:

Lorem ipsum. Your 
<cite>
citation or source reference goes here.
</cite>

And what if you want to show a postal address? Then, you can use the ADDRESS element for shipping and contact details, for example:

<address>
Chief editor
J. Smith
1234 Santa Clara
Tel: +1-123-456-7890 </address>
Paragraphs

It is a good idea to divide your text into paragraphs so it is easier to read. The HTML element for paragraphs is P:

<p>
Lorem ipsum. This is your paragraph.
</p>

You can set the paragraph text alignment with the ALIGN attribute. By the default it is set to LEFT. You can change it to RIGHT or CENTER. Examples:

<p>
This paragraph is aligned by the default value.
</p>
<p align=center>
This paragraph is aligned to be centered.
</p>
<p align=right>
This paragraph is aligned to the right.
</p>
<p align=left>
This paragraph is forced to be aligned to the left.
</p>
Headings

There are several HTML elements for different title sizes. These are known as headings and there 6 predefined sizes:

<h1>
Heading size 1
</h1>
<h2>
Heading size 2
</h2>
<h3>
Heading size 3
</h3>
<h4>
Heading size 4
</h4>
<h5>
Heading size 5
</h5>
<h6>
Heading size 6
</h6>

Optional: you can use the ALIGN attribute here too. Examples:

<h1 align=center>
Heading size 1
</h1>
<h2 align=right>
Heading size 2
</h2>
<h3 align=left>
Heading size 3
</h3>
<h4 align=center>
Heading size 4
</h4>
<h5 align=right>
Heading size 5
</h5>
<h6>
Heading size 6
</h6>
Font sizes

You can change and set the font size to a different size in any section of your HTML document. The HTML element to do this is FONT with the attribute SIZE and you can use the HTML attribute COLOR to change the color of your text. So if you want to have different text sizes you should take the following code:

<font size=1 color=green>
Text size 1
</font>
<br>
<font size=2 color=maroon>
Text size 2
</font>
<br>
<font size=3 color=olive>
Text size 3
</font>
<br>
<font size=4 color=black>
Text size 4
</font>
<br>
<font size=5 color=yellow>
Text size 5
</font>
<br>
<font size=6 color=purple>
Text size 6
</font>
<br>
<font size=7 color=gray>
Text size 7
</font>
Lists

If you want to create lists, you have more HTML elements for that. If you want to create a numbered list you should use the following code:

<ol>
<li>
item 1
</li>
<li>
item 2
</li>
</ol>

But if you want to create an unordered list then you should use the following code:

<ul>
<li>
item 1
</li>
<li>
item 2
</li>
</ul>

Links are the most important side of a web page. Links are connections to other web pages, documents and different resources. These connections can be pointing to external web pages and web sites. After you click on the link you will be visiting the requested resource. Imagine you want to include a link to a search engine in your web page. Proposed example code:

<a href="http://yahoo.com/" title="yahoo search engine">Yahoo!</a>

Links are defined by the A element followed by the href attribute. The title attribute is optional but it is strongly recommended to include it, especially when linking to external resources for accessibility’s sake.

Links can also be pointing to internal places within your web page. Imagine a very long web page and let’s say you want to include a link to a later paragraph in your document. Proposed example code:

<a href="#paragraph10">Link to paragraph 10</a>
+++ other lines of code +++
<p id="paragraph10">Paragraph 10</p>

And links can also point to internal web pages and other resources. Let’s say you have two different web pages index.html and contact.html IN THE SAME DIRECTORY. And you want to link both to each other. Proposed example code:

+++ in your index.html file +++
<a href="contact.html" title="contact">Link to contact document</a>
+++ in your contact.html file +++
<a href="index.html" title="index">Link to index document</a>

Now you can create many web pages and link them together. If you make your webpages share a common design pattern then the result is a web site.

There are more HTML elements not covered here such as

Tables
Images
Objects and applets
Frames
Forms
Style sheets

We will leave this task for a future article. Visit the following link for further reading: HTML 4.01

Other resources:

W3C HTML Checker will validate your HTML code and inform you about any incident

W3C CSS Checker will validate your CSS code and inform you about any incident