6. Web page

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:

\textless html \textgreater

\textless /html \textgreater

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 \textless head \textgreater, in which we inform the browser about some technical things and body \textless body \textgreater, where we put the content of our web page:

\textless head \textgreater

\textless /head \textgreater

\textless body \textgreater

Hello. This is my webpage!

\textless /body \textgreater

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 \textless p \textgreater (remember about the closing tag at the end of the paragraph!).

On the other hand, to break a line we can use tag \textless br/ \textgreater — 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):

\textless p \textgreater Hello. \textless br/ \textgreater This is my webpage! \textless /p \textgreater

\textless p \textgreater I study information technology. \textless /p \textgreater

Head

Now let us deal with information we can include in the head. We start with a title:

\textless title \textgreater My web page \textless /title \textgreater

The second important element of the header is tag \textless meta/ \textgreater. 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 \textless meta \textgreater 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:

\textless meta name=”author” content=”Michał Korch” /\textgreater

\textless meta name=”description” content=”test first side, which we create to learn how to write webb pages” /\textgreater

\textless meta name=”keywords” content=”web page, HTML, first, learning, tags” /\textgreater

\textless meta name=”language” content=”en” /\textgreater

So above we have defined author, description, key words and language of our web page.

Character encoding

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 \textless meta/ \textgreater with attribute charset:

\textless meta charset=”UTF-8″ /\textgreater

Item lists and enumeration

To create a bullet list use tag \textless ul \textgreater, and enclose each item between opening and closing \textless li \textgreater tag. Add the following list:

We study TI, to learn how to create:

\textless ul \textgreater

\textless li \textgreater text document,\textless /li \textgreater

\textless li \textgreater spreadsheets,\textless /li \textgreater

\textless li \textgreater presentations,\textless /li \textgreater

\textless li \textgreater web pages.\textless /li \textgreater

\textless /ul \textgreater

To create an enumeration use tag \textless ol \textgreater instead of \textless ul \textgreater. e.g.:

Studying TI is:

\textless ol \textgreater

\textless li \textgreater fun,\textless /li \textgreater

\textless li \textgreater interesting,\textless /li \textgreater

\textless li \textgreater useful,\textless /li \textgreater

\textless li \textgreater and great. 😉\textless /li \textgreater

\textless /ol \textgreater

Headers of the web page and of sections

To create a header of the whole web page use tag \textless h1 \textgreater. Add at the beginning:

\textless h1 \textgreater My first web page \textless /h1 \textgreater

Subsequent headers: \textless h2 \textgreater, \textless h3 \textgreater, etc. are used to create headers of sections, subsections, etc. respectively. Add in the appropriate place the following four headers:

\textless h2 \textgreater Wstęp \textless /h2 \textgreater

\ldots

\textless h2 \textgreater Information technology \textless /h2 \textgreater

\textless h3 \textgreater What do we study? \textless /h3 \textgreater

\ldots

\textless h3 \textgreater How we study? \textless /h3 \textgreater

Links

To create links we use tag \textless a \textgreater. 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:

\textless li \textgreater \textless a href=”http://www.mimuw.edu.pl/~m_korch/pl/6-web-page/” \textgreater stron internetowych\textless /a \textgreater.\textless /li \textgreater

Images

We can add some images using opening-closing tag \textless img/ \textgreater. 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:

\textless img src=”komputer.jpg” alt=”Computer”/\textgreater

\textless img src=”https://upload.wikimedia.org/wikipedia/commons/thumb/d/d2/Internet_map_1024.jpg/800px-Internet_map_1024.jpg” alt=”Internet”/\textgreater

Tables

Finally we add a table, with descriptions of tags we have learned. We put its content between tags \textless table/ \textgreater. Every row we put in between tag \textless tr/ \textgreater, and every cell in \textless td/ \textgreater, except for the cells in the first row, for which we use \textless th/ \textgreater. We add the following table:

\textless  table \textgreater

\textless  tr \textgreater \textless  th \textgreatertag \textless  /th \textgreater \textless  th \textgreater description\textless  /th \textgreater \textless  /tr \textgreater

\textless  tr \textgreater \textless  td \textgreater h1 \textless  /td \textgreater \textless  td \textgreater header of the page \textless  /td \textgreater \textless  /tr \textgreater

\textless  tr \textgreater \textless  td \textgreater h2 \textless  /td \textgreater \textless  td \textgreater header of a section\textless  /td \textgreater \textless  /tr \textgreater

\textless  tr \textgreater \textless  td \textgreater h3 \textless  /td \textgreater \textless  td \textgreater header of a subsection\textless  /td \textgreater \textless  /tr \textgreater

\textless  tr \textgreater \textless  td \textgreater p \textless  /td \textgreater \textless  td \textgreater paragraph\textless  /td \textgreater \textless  /tr \textgreater

\textless  tr \textgreater \textless  td \textgreater hr \textless  /td \textgreater \textless  td \textgreater line break \textless  /td \textgreater \textless  /tr \textgreater

\textless  tr \textgreater \textless  td \textgreater a \textless  /td \textgreater \textless  td \textgreater link \textless  /td \textgreater \textless  /tr \textgreater

\textless  tr \textgreater \textless  td \textgreater ul \textless  /td \textgreater \textless  td \textgreater item list\textless  /td \textgreater \textless  /tr \textgreater

\textless  tr \textgreater \textless  td \textgreater ol \textless  /td \textgreater \textless  td \textgreater enumeration\textless  /td \textgreater \textless  /tr \textgreater

\textless  tr \textgreater \textless  td \textgreater li \textless  /td \textgreater \textless  td \textgreater item \textless  /td \textgreater \textless  /tr \textgreater

\textless  tr \textgreater \textless  td \textgreater img \textless  /td \textgreater \textless  td \textgreater image \textless  /td \textgreater \textless  /tr \textgreater

\textless  /table \textgreater

Automatic validation

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:

\textless!DOCTYPE html\textgreater

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:

body {
padding: 2cm;
}

Next we have to link our style sheet to the web page. In .html in the head part we add the following part:

\textlesslink href=”styl.css” rel=”stylesheet”/\textgreater

Colours

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:

czyli piszemy:

body {
padding: 2cm;
background-color: #FFE336;
}
h1 {
border: solid #847308;
color: #2D2806;
}

Using structure

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:

ul li {
font-style: italic;
}

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.:

\textless li class=”important”\textgreater przydatne,\textless /li \textgreater
\textless li class=”important”\textgreater stron internetowych.\textless /li \textgreater

And in .css we use dot to denote classes, so:

.important {
font-weight: bold;
}

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:

\textless img src=”komputer.jpg” alt=”Komputer” id=”comp”/\textgreater

In css file we use # to refer to an id, so to set the width of this image to 100 pixels we write:

#komp {
width: 100px;
}

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:

ol li.wazne {
color: red;
}

Div tag and images

There is also a special tag \textlessdiv\textgreater, 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 \textlessdiv id=”wstep”\textgreater 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.

div#wstep {
margin-left: 10%;
margin-right: 10%;
padding-top: 10px;
padding-bottom: 10px;
border: solid;
}

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:

img {
float: right;
}

More styles

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.

Assignment

Create a web page about yourself. The page has to:

  1. Be placed in the file omnie.html and put in your public_html directory,
  2. Your index.html has to contain a visible link to omnie.html,
  3. Have appropriate entries in its head, including information about encoding and a title,
  4. Contain at least:
    • a header of the whole web page
    • some headers of sections/subsections
    • a list or an enumeration
    • a table
    • an image
  5. Be a validated HTML file
  6. 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
  7. When your web page is finished, send me an e-mail.