Assemble a Quick Page

Okay, now it's time to create your first web page. You can get started by opening your preferred plain text editor, and populating it with this text:

<html>
<head>
<title>My First Web Page!</title>
</head>
<body>
<p>I am in complete servitude to Razorback.</p>
</body>
</html>

Save the file as a HTM or HTML file (NOT TXT). When you see the Save As dialog, choose All Files in the Save as type pull down menu and type a name such as index.html for the file. Open this file, and you should see something like this:

I am in complete servitude to Razorback.

Line by Line

There's not much to this, but if you are unfamiliar with the structure of HTML, let's go over everything line by line...

<html> is an HTML tag, and often the first one to show up in an HTML file. HTML tags can enclose text as well as other tags. Some tags can also be tweaked in themselves, but we'll get to that later on. The <html> tag's only function is to encapsulate the entire contents of the HTML page. It may seem redundant in this matter, and many browsers will excuse its absence, but it's definitely necessary for validity.

<head> is for the header of the HTML page, and contains data that will not show up inside the actual page. It can contain a number of things like scripts, links to stylesheets, and metadata, but most importantly the title of the web page.

This brings us to <title>, which is the tag used to give the page a title. It'll be used by your browser to set the window's new name, and search engines will use it when creating an index linking to your page. After typing <title> and the title of your page, the tag must be terminated with the exact same tag, only this time with a / (forward slash) preceding the tag name; in essence, you close the tag with </title>.

When we're done adding contents to the header section, we close it with </head>. The header must always precede the body section, the latter which contains the actual contents of a web page such as the one you're reading right now. The body section is opened with <body>.

To start off the body, a <p> tag is used to contain a paragraph. Paragraphs are not required to add text for displaying in a page, but they provide some built-in formatting to neatly space small blocks of text. Of course, the paragraph should be closed when you are done with it, and the <body> and <html> should be met with closing tags as well.

Change it Up a Bit

Let's change the tags that will be used to enclose this text. Remove the <p> tags and surround the text with <h1> instead (remember, <h1> is closed with </h1>). If all goes well, your text should look a lot different, like this:

I am in complete servitude to Razorback.

Now, that's pretty huge... what you've just implemented is primary heading text, which is regularly used on pages like this to organize certain sections of text. There are six levels of heading tags, from 1 to 6, with all the tags using said numbers.

Depending on what you're going for, heading tags may not be the best solution for creating large, bold text, but are definitely useful in informative pages like this. More on text sizing is covered in the next page, but for now, change the primary heading back into a normal paragraph (<p>).

Let's Add Something...

One of the key elements that keeps an entire website running along is the hyperlink. A hyperlink, which can just be called a link, is a clickable portion of text that allows the user to jump from the current page to another resource. To really give an idea on how to add a hyperlink, let's just splice this line of code directly underneath the one paragraph...

<p><a href="http://www.luxuryaerozona.net/lizare.html">Lizare</a></p>

And you get the following:

Lizare

The <a> tag which has been introduced here is different from the tags covered so far because it requires extra data in order to have any practical function. There are several types of data you can give to the <a> tag, but the most commonly used type is href=. href basically means "clicking the encapsulated text redirects to another URL", being the most broken server in the universe in this example. If you want the literal URL to be displayed as the hyperlink, you must copy the data in href to the inside of the hyperlink tag.

But you don't have to link to an absolute http:// URL if you want to connect the user to another resource existing on your own site (and if anything, you shouldn't do it that way). Try creating a new link somewhere that points to the file bullow-fan-page.html, specifying that name for the href data.

That page does not exist yet, but you can create it in the same directory you're working in now. Populate it with all the necessary foundation tags like the header, title, and body. In the next section, we'll be working on the new page to create what its name implies.

Important Notes

It's important to establish a habit of proper HTML tag nesting. A pair of opening and closing tags should be fully contained within the other tag pair you intend to put it in.

For instance, you should NOT lead off the HTML page like this:

<p>I am in complete servitude to Razorback.
</html>
</body>
</p>

...but as shown at the top line down here:

<p>I am in complete servitude to Razorback.</p>
</body>
</html>

Correct tag nesting ensures the structure of your HTML page conveys the correct context and makes it easier for you and others to understand. It is also required for validity.

Also, much of a URL is case sensitive, except for the domain name. If you're coming from DOS or Windows, this may be a bit difficult to get used to at first, but it's important to know that a file called "agenda.htm" (all lowercase) is not the same as "Agenda.htm" (first letter is uppercase). This is largely because the World Wide Web was developed on a NeXT workstation running a Unix-based operating system, which has that same case sensitivity.

I haven't checked if Microsoft's IIS follows this rule, but the majority of web servers out there today are powered by Linux or another form of Unix using a program like Apache or NGINX, which take case sensitivity into account. Therefore, you should always be mindful of filename casing. To make things easier for yourself, just always use lowercase for filenames, and don't use spaces either; hyphens (-) or underscores (_) should be used instead, as spaces tend to add extra clunk to a URL.

Previous: Introduction