Unit 2

Warm up:

Create a webpage that will feature the following:

a heading that will say "How I feel today..."
text (at least 3 sentences) about how you feel today and why
a horizontal line at the bottom (use the <hr /> tag for this)

Preview your page in a web browser.

The structure of a web page

Every webpage consists of two main parts - the head and the body.

The HEAD serves for including supplementary information about the page itself, e.g. the language it is written in, search engine keywords, the title (shown on the tab), character encoding, style sheets associated with the page, JavaScript programs, etc.
The BODY section serves to input all content you would wish to display on the page - headings, text, pictures, tables, hyperlinks, lists, etc.

A sample webpage with proper structure

<html>

    <head>

        <title>This will show on the tab in the browser</title>

    </head>

    <body>

    This is where you put the actual content of the webpage, including text, graphics, tables, etc.

    </body>

</html>

Task 2.1

Redo the page you did in the warm-up activity, so that it has proper structure; include the page title.

Paragraphing

For starting and ending a paragraph you use the <p> and </p> tag. You enclose the paragraph text within these two tags.

<html>

    <head>

        <title>Lorem Ipsum

        </title>

    </head>

    <body>

<p>Lorem ipsum dolor sit amet consectetuer orci fermentum Nunc volutpat justo. Lorem fermentum ac ac congue dapibus ipsum Nulla ullamcorper urna ligula. Ut Morbi augue ornare vitae justo wisi consequat libero Aliquam venenatis. Vitae elit laoreet sit ut ligula libero auctor faucibus nunc lacus. Est dui neque Nulla malesuada adipiscing tempus nulla vel et.

</p>

<p>Vestibulum dui consequat cursus euismod tellus feugiat ipsum mi eu wisi. Tristique ante parturient sodales Quisque congue Phasellus Suspendisse quis elit velit. Suscipit malesuada nibh eget consequat dictumst interdum ac In lacus convallis. Urna Curabitur penatibus enim sed tempor vitae libero Sed facilisi leo. Ut dui nunc Lorem a nisl euismod sociis gravida.

</p>

    </body>

</html>

Task 2.2

Create a document that will feature 3 paragraphs of text. You can copy text from elsewhere for this, or you can use the text above.

Pictures

To insert a picture, you use the <img> tag. An example follows:

<img src="http://www.qsi.org/wp-content/themes/qsi-theme/assets/img/small_logo_wsh.png" alt="QSI logo" />

Notice that the <img /> tag is also an orphan tag. It comes with several attributes (properties).
- src tells the browser what picture to display; for this you can insert the image URL
- alt tells the browser what text to display in case the picture cannot be found or the user has turned off the displaying of pictures
- There are many more attributes, but 2 is enough for the start

Remember, web browsers can display only the following types of images:

This is how you locate the URL of a picture on a web page:

Open the web page that has the picture you'd like to display on your page.
Right-click the picture and choose "Copy image location" (in Firefox) or "Copy image address" (in Google Chrome) or "Copy image link" (in Edge)
Now you can paste the URL into your <IMG /> tag.

Remember: don't right-click on the thumbnail of the picture (like in a Google image search) but right-click on the full-sized picture.

Task 2.3

Insert the QSI logo at the top of the page you created in Task 2.2.

Task 2.4

Find a picture of your favorite actor/actress, save it in the folder where you have your web page and then insert this picture at the bottom of the page you did in Task 2.3.

Task 2.5

Create a new page, give it the following title: "Bratislava", the first heading should say "Bratislava", then another heading (size 2) should say coat of arms; underneath it, insert 2 images of the coat of arms of Bratislava side by side - one bitmap and the other one vector. Then preview the page in the web browser and zoom in. Notice the file formats of the two files. What is the file format for the bitmap image? Is it the best fit?

Remember: Make sure you are getting the URL of the actual SVG file, not its PNG rendition. The URL of the picture must end in .svg, not .png.

Task 2.6

Create a new page that will feature two pictures - an animated GIF file and a PNG file with transparent background. Insert a heading above each.

An example of such page follows:

<!DOCTYPE html>

<html>

<head>

  <title>Animated pic</title>

 <style>

  body

   {background-color:teal;}

 </style>

</head>

<body>

    <h1>Animated GIF:</h1>

    <img src="https://i.imgur.com/KOXOBiN.gif" />

    <h1>PNG with transparency:</h1>

    <img src="https://sites.google.com/site/matejkubesgalileoschool/_/rsrc/1472779960294/home-1/MKphotosmall.png" />

</body>

</html>

We will talk about the <style> tag later; for now, just copy the code and try to change the color from "teal" to some other named color (see the list here).

Page updated

Google Sites

Report abuse