You need:
- web browser (Firefox, Internet Explorer, Safari or something alike)
- plain text editor (Notepad, Vim, Arachnophilia,...).
The most important part of a web page is HTML document. That is a text document containing page formatting code (HTML tags) and page items (texts, pictures etc...).
Let us assume you use Notepad which is bundled with any version of Windows.
General plan:
Make simple HTML document using some common basic tags. Choose Notepad text editor as main tool now.
Fill the document with some texts and an
image.
Add link to another page.
Open it in web browser to see how it works.
Procedure:
Open Notepad text editor:
(Start->All programs->Accessories->Notepad).
It will show you a blank untitled document. Save it first:
File -> Save as
Now you see a Save As dialog box. It has a field labeled "File name".
Name your document as my_page.html
IMPORTANT:
You have to type name of the document enclosed in quotation marks, like this: "my_page.html".
Otherwise, Notepad will name it like my_page.html.txt and it wont work.
Then you click Save button.
2. Start coding
Make sure you remember where you saved your document, so you can find it later.
Now, We'll start to write code:
You begin with <html> tag, it marks the beginning of a HTML document.
HTML tags are special markings enclosed between angle brackets, like so: <html>, <body>, <h1>, <h2>, etc...
Second tag is <head>. Head section contains code that does not appear on a visible part of a web page, it has some special purpose.
After that, give your page a title: <title>This is my first web page</title>. Almost all web tags have it's closing tag. It has an extra slash character, like so: </html>,</title>, </body>, </h1> ...
Close the head section: add closing </head> tag.
Now comes the part of putting actual page content, what is supposed to be seen on the page.
Open body tag: <body>
Your code should look like this so far:
<html>
<head>
<title>
This is my first web page
</title>
</head>
<body>
Let's put some text.
Text is often formatted as paragraphs. Put tag to open new paragraph: <p>.
You can write some text of your own, or copy/paste it from somewhere. I'll use dummy text used for making page templates. You can find it on internet by googling "Lorem ipsum".
Paste it after <p> tag.
Then add closing </p> tag to close that paragraph.
Your page has some content so we could give it a try and see how it looks like in a browser.
But before that we have to close
body and
html tag.
Add closing </body> tag after the closed paragraph.
Then add closing </html> tag.
Save the document: File->Save
Find the document where you saved it (Desktop, My Documents or else), double click on icon and, voila, you see it in a web browser.
On the very top of browser window, you can see the page title you have defined using <title> tags.
Anyway, not much of a beauty to see.
Let's add some more elements to it.
5. Add text title.
Before the opening <p> tag, add opening <h1> tag. It is often used to make a heading title on a page. Write some title for your paragraph. I'll put "What is lorem ipsum" .
Save it again and refresh your page in browser: Ctrl+F5 (reload) to see the added title.
Your code so far should look like this:
<html>
<head>
<title>
This is my first web page
</title>
</head>
<body>
<h1>What is Lorem Ipsum</h1>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</body>
</html>
You need to use <img> tag to display images.
Put it after the closing </p> tag.
First, you need the image file. Copy some file of your choice to the same place where your "my_page.html" document is (Desktop, My Documents, or else). Image file should be of type .jpeg, .gif or .png. Today, mostly used image formats on web pages are JPEG and PNG.
You can check it out by looking at file properties: right click on file icon, then click Properties and see what kind of image file you have.
Change <img> file in the following way: <img src="moon.jpg">
My image happens to be an image of the Moon and it's file is named in that manner: moon.jpg
You should find out what is your file named and what is it's extension. Extension is a part of a file name that comes after the dot.
Image files usually have .jpeg, .jpg, .gif, etc. extension. Check it out by looking at file properties.
After you put exact file name of the image including it's extension in image tag's attribute src="image_file_name.file_extension", refresh your document in the browser (Ctrl+F5) and there is your web page with an image.
Links are something common to see and use on a web page. It is created by putting anchor tags:
<a href="">Link text</a>
The main part is
href attribute. It contains web address of a page you want to link to. I'll use Wikipedia.
So put this under the image tag:
<br />
Break tag <br /> makes break on a page, so the next part starts in a new row.
After the break tag add the link code:
<a href="http://wikipedia.org">Wikipedia</a>
http:// part is essential for browser to recognize that it should look for the linked address at internet.
Refresh page and that is it. Click on the link.
You have web page at your computer, made by you.
Add more texts, images and links to experiment.
Next time I'll show you how to put it on internet.
The complete code:
<html>
<head>
<title>
This is my first web page
</title>
</head>
<body>
<h1>What is Lorem Ipsum</h1>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<img src="moon.jpg">
<br />
<a href="http://wikipedia.org">Wikipedia</a>
</body>
</html>
