We will create a web page out of scratch.
How to start? Tags
We create a flie index.html — this is the file, the browser looks for in your home directory to show your page. Start with opening Notepad and saving the file into directory public_html as index.html (make sure that Notepad does not add automatically extension .txt)
File of type .html consists of contents which will be put between so called tags, which will describe the type of given content. There are opening and closing tags. The whole content of the file will be put in between two tags:
That is how opening and closing tags look like. They differ by a slash and are paired.
The structure of .html file
A .html file consists of two parts: head , in which we inform the browser about some technical things and body , where we put the content of our web page:
Now you can open your web page in the browser! Done?
Paragraphs and breaking lines
Quick test shows that an enter does not break lines or make new paragraphs. To creat new paragraph we can use tag (remember about the closing tag at the end of the paragraph!).
On the other hand, to break a line we can use tag — breaking line does not contain any content, so this tag is a opening-closing tag. It opens and closes at the same time (notice where the slash is). In this case we have only one tag and we do not need a second tag in this case.
We modify the content of the webpage in the following way (two paragraphs, in the first one we break the line):
Now let us deal with information we can include in the head. We start with a title:
The second important element of the header is tag . It is an opening-closing tag and all the information is included in the attributes. What are attributes? In the tag we can put some additional in the form attribute_name=”value”. Tag accepts two attributes: attribute name which defines what information we would like to give and attribute content — where we include data. It will be clear in the following example. Let us add the following tags in the head:
So above we have defined author, description, key words and language of our web page.
Nearly everything in IT was created in US, so initially people have not thought about using special national characters. Therefore there has been some confusion with them how to encode such characters. An encoding of characters is a sort of dictionary which tells which sequence of zeros and ones is which character. The following encodings are the most popular:
- ASCII — original character encoding. Each character war encoded by sequence of only 8 bits. There are no Polish characters here./li>
- ISO_8859-2 — still every character is encoded by a sequence of eight bits. Therefore it is impossible to have one encoding for all national character used around the world and there are versions for each region. Version 8859_2 contains in particular polish national characters.
- Windows-1250 — alternative to ISO_889-2 encoding of Polish characters, which generated even more confusion. One had to know not only that there are Polish characters in a document, but also which encoding has been used…
- UTF-8 — finally people started to use more then 8 bits to encode some characters. Still basic characters are encoded by 8 bits but some codes can have even 32 bits. No more versions for different regions of the world — UTF-8 encodes nearly all national characters used around the world. We will use this encoding.
- UTF-16 — as above, but codes have always at least 16 bits. Encodes even more characters.
- UTF-32 (USC-4), sometimes called simply Unicode, universal encoding. Encodes everything. In 32 bits.
We can choose a type of encoding when saving the file. Currently default encoding is usually UTF-8.
In the head we have to add information for the browser about the encoding used. To do this we use tag with attribute charset:
Item lists and enumeration
To create a bullet list use tag , and enclose each item between opening and closing tag. Add the following list:
To create an enumeration use tag instead of . e.g.:
Headers of the web page and of sections
To create a header of the whole web page use tag . Add at the beginning:
Subsequent headers: , , etc. are used to create headers of sections, subsections, etc. respectively. Add in the appropriate place the following four headers:
To create links we use tag . Between opening and closing tags put the text that should be displayed as a link Pomiędzy tagami umieszczmy tekst będący linkiem, a w atrybucie o nazwie href umieszczamy adres. Dodajmy link do tej strony:
We can add some images using opening-closing tag . This tag takes two attributes: src, which defines a name of a file with the image we would like to add (if it is in the same directory as the web page) or an URL of the image and attribute alt, which contains information which should be displayed if it is not possible to display the image. Download this image to your public_html directory. Add it to your web page and also add a second image by its URL:
Finally we add a table, with descriptions of tags we have learned. We put its content between tags . Every row we put in between tag , and every cell in , except for the cells in the first row, for which we use . We add the following table:
One can check validity of your web page automatically, but first we need to add the following first line to the web page, which defines what is to be checked:
Next check your web page using this site.
Cascading style sheets
It is time to add styles to your web page. I hope you remember the idea from text editor. Instead of formatting everything directly we will create an additional document, which will define the look of the web page. So we will be able to modify this look easily. This file is called cascading style sheets, .css and link this file to the .html file.
This is an example of the same web (.html files are identical, but they have different styles linked to them) displayed with two nice and one bad style sheet:
To create a style sheet, open new file in Notepad and save it as styl.css in your public_html directory.
The structure of a .css file is following: first we type what element we refer to and then in brackets in lines ending with semicolons we type in details in form category: value. E.g. let us add 2cm margin to the whole web page. So we would like to change body, and we type:
Next we have to link our style sheet to the web page. In .html in the head part we add the following part:
In style sheets you can use a colour name to use it. There are many aviable colours.
It may not be the most useful method. It is more convenient to choose your colours with a special tool. In such a tool you will find a description of a chosen colour is RGB format, meaning the intensity of red, green and blue and we can insert such a colour into style sheet in the form rgb(157,67,67) (this, for example, is a hue of red). You will notice also codes consisting of 6 digits or letters. This is also a notation of rgb, subsequent pairs of digits/letters refer to intensity of red, green and blue respectively. It is their notation in hexadecimal system — you should only now, that the letters are greater then numbers, so a i greater then 9, and so on up to f. Such a code can be inserted into .css in the form #c8a719 — this is a yellow hue.
Adding colours start with choosing a scheme of colours and writing down few codes or rgb values of them. Remember to choose some colours of different hues or brightness, to make elements of your web page clearly visible.
Next, let us add to our web page a background colour. Moreover we will put the header in a frame and choose a colour for this frame and for the text:
Assume that we would like to make all the elements of lists to be shown in cursive but only those elements which are in bullet lists. So we would like to define style of li, but only those inside ul. It is possible:
Classes and ids
We can even more precisely choose the element we refer to. To do so we use classes ad ids. E.g. we would like to use bold font in all important elements of lists. We choose those elements adding them an attribute class, e.g.:
And in .css we use dot to denote classes, so:
To choose an individual element rather then a class of elements, we use an id. Let us add style to the image with a computer:
In css file we use # to refer to an id, so to set the width of this image to 100 pixels we write:
We can use few selectors (structure, classes and ids) in one style definition. E.g. change colur of every important item in enumeration to red:
Div tag and images
There is also a special tag div, which we can use especially to define a class or an id for some piece of the web page.
For example let us put the whole introduction in div id=”wstep” and let us add a frame around it and outer margin on the left and right of 10% of the web page and inner margins top and bottom of 15mm.
Both divs, and images can float. To see the effect move your images to the beginning of your page and add the following to .css:
There are much more possibilities in the aspect of css. Take some time and try to achieve a desired look of your web page.
A style sheet can also be automatically validated.
Create a web page about yourself. The page has to:
- Be placed in the file omnie.html and put in your public_html directory,
- Your index.html has to contain a visible link to omnie.html,
- Have appropriate entries in its head, including information about encoding and a title,
- Contain at least:
- a header of the whole web page
- some headers of sections/subsections
- a list or an enumeration
- a table
- an image
- Be a validated HTML file
- Be formatted with the attached style list in the following way:
- the whole web page is nice-looking and readable,
- at least 5 different formatable features are used (e.g. color, border, etc.)
- a class or an id is used at least once
- at least to different selectors are used together (e.g. a class and structure)
- the .css file is a validated .css file
- When your web page is finished, send me an e-mail.