Issues to be covered

Websites - HTML and CSS languages

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

Activities

  1. Introduction to the topic of classes, providing teaching materials.
  2. A brief discussion of the history of HTTP, HTML (and its version) and CSS.
  3. Getting to know the sample website.
  4. Implementing your own website in HTML.
  5. Enrich the site with CSS elements.
  6. Validation of implemented HTML and CSS documents.

Materials for classes

Introduction tasks

Task 1 - Sample website

  1. 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>
  2. In any web browser, open the previously created file. What do the individual tags mean?

  3. Change the tags to any other and check the effect of their operation (refreshing the page in the browser).

  4. Comment on the page code so that only “Hello!” Is displayed and page title.

  5. How do you view the page code in your browser?

Task 2 - Simple home page (1 p.)

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

  2. Let’s check whether the constructed website opens and looks the same in all available in the system web browsers.

  3. Should the home page contain the tag (i) div?

Task 3 - More complex home page (1 p.)

  1. 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?
  2. Are the CSS styles equally supported in each of the available browsers?

  3. What is the relationship between CSS styles and div tags?

Assessment tasks

Mandatory & Extra (10 p.)

This time the mandatory task is also an extra task.

Your client, Spirit Dunkin, has hired you to build the website for her flower shop. She has provided a mockup, in addition to all the images she wants to include. Your jobs is to update the HTML and CSS in the starter code to match her design as closely as possible.

The starter code is avaiable in Git repository: https://git.wmi.amu.edu.pl/bikol/DTIN-HTML-and-CSS-template.

The task is to reproduce the appearance of the provided in the screenshot mockup, not its functionality. A solution (complete webpage, that contain multiple files, including images, CSS and HTML) should be submitted to student’s Git repository.

How to solve this task:

  1. Fork the DTIN-HTML-and-CSS-template https://git.wmi.amu.edu.pl/bikol/DTIN-HTML-and-CSS-template repository using your own student account. Fork name must be DTIN-HTML-and-CSS-solution and it must be private. Moreover remember to add bikol account to collabolators with read permission.

  2. Modify the source HTML and CSS files in order to meet customer requirements.

The following mechanism may be used to assess the degree of similarity:

$ chromium-browser --headless --disable-gpu --screenshot --deterministic-fetch --window-size=1340,770 index.html
$ magick compare -metric AE -fuzz 15% orig.png screenshot.png diff-map.png

Depending on your operating system you may need to use google-chrome instead of chromium-browser. magick command is a part of ImageMagick https://imagemagick.org.

This means that the submitted page will be opened in the Chrome browser in 1340x770 resolution, and then compared to the original screenshot in the same resolution. If possible, the execution of JavaScript code will be blocked on the submitted page. The similarity is measures as a number of differing pixels (diff) with 15% tolerance threshold.

Submitting simple webpage that presents screenshot image as its content is forbiden. The page should be constructed using HTML tags and CSS formating.

  1. Commit and push your changes to your private forked repository.

    Live results (with max 15min delay) are presented on https://kino.vm.wmi.amu.edu.pl/results/html.txt.

    You can access .png files with your webpage rendered and diff file on grading infrastructure using following links (replace XXXXXX with your student index number):

  2. After analyzing all solutions by teacher, a score will be prepared, where the highest number of points (10) will be given to the most faithful copies, while the lowest number of points (1) will be given to copies, whose similarity to the original is negligible. All proper submissions will score at least one point.