Internet Technology - Ćwiczenia 4

Temat: Websites - HTML and CSS languages.

Topics for today

WWW pages - what is it? History.
HTML language - history and reference to SGML.
CSS language - why do we need it?
Validation of the correctness of web page elements - is it necessary?
HTTP server - characteristics and general description of the operation.

Introduction tasks

Task 1 - Sample website

Create a file with the .html extension with the following content:

<!DOCTYPE html>
<html>
  <head>
    <title>My example web page!</title>
  </head>

  <body>
    Hello!
    <div id="content">
    <h1>Heading One</h1>
    <p>First paragraph.</p>
    <p>Second paragraph.</p>
    <ol>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ol>
    </div>
    <br/><br/><br/>
    <h3 style="text-align:center">To już koniec strony...</h3>
  </body>
</html>

In any web browser, open the previously created file. What do the individual tags mean?
Change the tags to any other and check the effect of their operation (refreshing the page in the browser).
Comment on the page code so that only “Hello!” Is displayed and page title.
How do you view the page code in your browser?

Task 2 - Simple home page

As part of the task, we will create our own homepage that will contain the following information:
- the title of the page containing the name, surname and index number of the author of the page.
- an unnumbered list of subjects for the semester the author of the page is attending.
- a table with the places that the author of the site visited in his life or wants to visit. The table must contain at least 5 elements. The individual columns mean:
  
  No. | City | State (Region) | Country
  - The table should contain the appropriate headings (column names), in bold.
  - Each city should be a link to the Wikipedia (or other) page that describes them.
- photo of the landscape, which after clicking opens a new page thematically related to the photo. I have to open the page in a new window (tab).
- at the bottom of the page there must be an element which after clicking will try to send an e-mail (eg via a default e-mail program) to the author of the page.
Let’s check whether the constructed website opens and looks the same in all available in the system web browsers.
Should the home page contain the tag (i) div?

Task 3 - More complex home page

We will extend the author’s homepage with the following elements using the CSS language:
- make the font in the first row of the table (ie the header) bold.
- the background color of the header should be one of your favorites (and not white) - remember that you should also change the font color
- let every second row be in a different color - thanks to this the table will be more expressive
- let the background color lines changes when you hover the mouse over the line
- let the texts in the tags h1 and p be in other fonts and colors
- develop two versions of the page: with an attached css file and with styles present in the content of the page - what differences do you notice?
Are the CSS styles equally supported in each of the available browsers?
What is the relationship between CSS styles and div tags?

Assessment tasks

Website

The mandatory task is also an extra task.

Make a faithful copy of the appearance of the following web page: http://min.wmi.amu.edu.pl/en/

The task is to reproduce the appearance of the page, not its functionality. A copy of the page’s appearance (a different web page) should be saved as single file: page.htm.

To the address rmiw@amu.edu.pl send a message with the title: “[DTIN] Z5.1 ######”, where ###### is a six-digit student index number. The previously constructed page.htm must be attached to the message (body of email may be empty). Results will be presented below after the deadline for this task.

The following mechanism will be used as an assessment of the degree of similarity:

$ chromium-browser --headless --disable-gpu --screenshot --window-size=1280,700 http://min.wmi.amu.edu.pl/en/

Depending on your operating system you may need to use google-chrome instead of chromium-browser

This means that the submitted page will be opened in the Chrome browser in 1280x700 resolution, and then compared to the original in the same resolution as image. If possible, the execution of JavaScript code will be blocked on the submitted page.

Task result

Index number

Points