How to make a web page (for people who are touching a computer for the first time)

Ever wonded how webmasters do it ?

You might not want to waste your time reading this and jump right into the next capsule... This one is just an introduction.

When I was about 11 I wondered how websites were made, who made them, and everything. I remember asking my father this: "Dad, if I wanted to make a website just like Yahoo, what would I need to do ?" and my father told me "You'd need a lot of money and a lot of knowledge...". I made my first website at 12 years old, it had 6 static pages and is not online right now. I just used simple HTML and some Javascript snippes that came with CoffeeCup HTML Editor.

But those days are over and now I make my own websites and my own code from start to finish with just a text editor. This is my personal website: http://joaopintojeronimo.freehostia.com and I've built other websites already.

I'm going to show you how you can make your own website in 5 minutes without any knowledge. Let's consider this as the first part of the article, because I think I might extend it to cover more advance things. This will be the simplest article on How to make a Web Page.

Welcome to the webmaster's world

What will you need ?

You might think you would need expensive software just like Adobe Dreamweaver just because your cool neighbor told you so, but you don't.

In fact, you can get everything you need to make a website for free.

Here's what you'll need:

A text editor - If you're running windows then you probably have "Wordpad". If you're running Linux, just learn how to use "nano" or another one. If you want a better text editor with syntax highlighting, I recomend you use Notepad++ for Windows and Gedit/Kate for Linux.
A host for your site, but we will talk about that later.
5 Minutes.

Simple things you need to know before we start

First of all, you need to know that:

Web Pages are simple plain text files with the .html extension, for an example "index.html" would be a file-name of a Web Page.
You should not edit files with Microsoft Word, because Word is not a simple text editor and will not provide you simple HTML files, even if you "Save as html file". You'll have a huge *.html file that will be full of things you don't need. You really need to use a simple plain text editor.
This will only cover the most basic things about creating a web page. I might write more articles about making web pages, and so far I wrote this one and How to make web pages Part 2 - CSS. Probably more will be added.

OK, Let's get to work

This is the exciting part.. You'll be now starting to make your web page. Here is what you need to do:

1. Fire up your text editor and type the basic structure of the .html file

Start your text editor and type this:

<html>

	<head>

<title>Your web page's title here</title>

</head>

	<body>

	</body>

</html>

And save it somewhere with the name "index.html" without quotation marks.

As you noticed, there are some tags in the file. Everyone of them starts with <, then the name of the tag and then > (example: <tag>). And the tags you find there close them selves also with </tag>.

The <html></html> tags define the beginning and the end, respectively, of your HTML document, that is your web page. Everything written outside those tags will not be showed on your web page.

The <head></head> tags define the head section of the page, where you put things that will also not be shows on the page, but are crucial to the web page. For now, we'll only add one thing inside those tags.

The <title></title> tags are the only thing we'll add into the head section of the page at this time. They are used to define the title of your page, and you're supposed to type the title inside those tags, just like this: The title of my new Web PageThe title of my new Web Page<title>The title of my new Web Page</title> . The title you define here will appear on the top of your browser's window.

The <body></body> tags define the beginning and the end, respectively of the content of your web page. This is where we will work from now, and this is where you put everything that will be showed on your web page.

Inside the body tags

As I said before, this is where you'll put the content of your web page.

Let's start by the header.

There are 7 levels of headers you can use in your web page, and they can be defined by this tags:

<h1>Header 1</h1>

<h2>Header 2</h2>

<h3>Header 3</h3>

<h4>Header 4</h4>

<h5>Header 5</h5>

<h6>Header 6</h6>

<h7>Header 7</h7>

And they should follow the logical and semantic structure of your HTML document (your web page), just like this:

<h1>Main title of your web page</h1>

<h2>Sub title of your home page</h2>

<h3>Sub title of the subtitle</h3>

<h2>Another sub title</h2>

<h2>And another one</h2>

<h3>Another "sub sub" title</h3>

<h5>Right to the 7th level of sub titles</h5>

<h3>And then get back to upper levels</h3>

<h2>And even upper levels</h2>

Paragraphs

If you did not skip 2nd grade of school then you know what paragraphs are.

They can be defined in your HTML document like this:

<p>This is a paragraph. It can be big or small</p>

And you can now write your document with headers and paragraphs

Scroll down for more :)

A few tags you can use to format the text in your paragraphs

So far you should have a page that consists on the basic structure, some header tags and some paragraphs, just like this one:

<html>

	<head>

<title>Your web page's title here</title>

</head>

	<body>

<h1>Main title of your web page</h1>

<p>Another paragraph of text...</p>

<h2>Sub title</h2>

<p>And this would probably be a sub topic in the page...</p>

	</body>

</html>

I will now teach you how you can format your text, but just some few simple things because we don't want to get to complicated, because this is supposed to be a simple article. I hope I'm not confusing you till now... Just ask in the comments if you didn't understand something and I'll be glad to help :)

Bold and Italic text

If you've used Microsoft Word before than you know what bold and italic text is. If you want to have bold text on your web page, just wrap whatever you want to make bold with the tags <strong></strong> around it, just like the example:

<p>This is a paragraph with <strong>some bold strong text</strong> within it.</p>

As you may be thinking, the text inside the <strong></strong> tags will show up bold on your web page.

The same thing happens if you want to have italic text on your web page. This time we'll use the <em></em> tags. They stand for emphasis and will get you your italic text if you use them just like the <strong></strong> tags:

<p>This is a paragraph with <em>some italic text</em> within it.</p>

And once again you'll have your italic text if you wrapped it around with the <em></em> tags correctly.

Links

I think that if you reached this then you know what links are. Links are text the when clicked, it leads to other web page.

You might want to learn how to use links, to link your web pages so people can navigate between them.

The link tags are <a></a>, and you'll need to use the href="" property to define the other location where you want the person who clicks it to go to. This is an example of a link to Google:

<a href="http://www.google.com">Take me to Google</a>

In that example, you have the opening tag, the href="" property that is defined in the example to, once clicked, lead the user to Google.com. Inside the tags you have the text that will show up on the page, that may be clicked by a user visiting your web page.

Images

Now I will show you how you can use images in your web page.

The <img /> tag is self closing, meaning it closes itself, that's why you add a slash before the > sign.

Inside the image tag, you'll need two things, the image location, and the alternative text, that you define with two properties, src="" and alt="" respectively.

Inside the quotes in the src="" property you'll put your image's location relactive to the location of your HTML document. If the file of your HTML document and the image are located in the same folder, then you can just use

<img src="image-filename.jpg" alt="" />

But if, for instance, your image is in a folder which is on the same location as your HTML document, you must use

<img src="folder/image-filename.jpg" alt="" />

or

<img src="the/full/location/of/the/image-filename.jpg" alt="" />

The alt="" property is where you define the alternative text to your image, if it can not be showed. You must use the alt="" property, even if empty (it's a part of the web standards defined by the W3C).

You should not use the <img /> tag inside paragraphs.

Just save the file and there you have it :)

Now you just need to save the file anywhere in your computer as an .html file with the html extension, and there you have it, your own web page :)

You can open it with your web browser, such as Mozilla Firefox, Internet Explorer or Safari, whatever you use, and view your HTML page.

Let other people see your Web Page

In your computer you can see your web page, but you probably want other people to also be able to see it and read it. You need to host your web page in a web host.

I'm not going to cover web hosts now, as this is suposed to be an easy guide for the avarage joe that is starting to make his web page.

Let's make an account at GooglePages but do not use the automatic page maker. You want to learn how to make your web pages by yourself. Once you created your account, upload your web page and any image you use one your website there trough the right column thingy when you see all your files. Acess your webpage trough http://yourname.googlepages.com/filename.html and you'll be looking at what others will when they access your web page.