Coding Bootcamp (HTML & CSS)

HTML: step 2

At this workshop we continue to work with the W3Schools tutorial as a base.
Go to w3schools (www.w3schools.com) and click on Learn HTML and go through the remaining chapters of their tutorial. Some chapters can be skipped at the moment, these chapters are marked in the list below. Not worried, We will return to these chapters later on at our CSS labs.

Continue to develop your own page: "Vikens Kennel"

Regarding chapter: "HTML Links"

Add a link at the bottom of Pelle's introductory paragraph. The link should refer to "The Swedish Kennel Club" and it should be open in a new window or tab. You can also try to change properties for the link (visited, hover, active etc) Below you will see how to design and where to place your link at index.html:

Regarding chapter: "HTML Images"

Make sure you use the: alt, width and height attributes for all your images if you didn't use them during Lab 1.

Use the CSS float property to let the image at your "Contact"-page float to the right of your text. When you are done, the page should look like the following image:

Regarding chapter: "HTML Tables"

Use the CSS float property to let the image at "my dog"-page float to the right of your text (same as you did on your contact page!). You should also create a pedigree for Diva. Your pedigree should be created in a table. When you are done, the page should look like the following image:

Text to use

Stenänga Ghali Batuuli
INTUCH VDHCH Lionhunt Dayimane Umvuma
Glenaholm Brigandman
Namandla Khebha Of Lionhill
Glenaholm Banna
Ishara Tuli Yankee Of Lionhunt
Lionhill Tristan
Calico Ridge Buisa Of Ishara
Madahiro´s Good Enough
FINUCH GBCH INTUCH NORDUCH NORDV-99 VDHCH Aakemba King Astor Gi'fumo
AUCH Marsabit Mfumo
INTUCH NORDUCH Simbashana's Givenchy Madahiro's R' Zafaco Millie
Ridgehunter's Argo Tiko
NUCH SUCH Aithea Lionsmaragd Zafaco

Regarding chapter: "HTML File Paths"

Create a single map for your pictures only and place all the images used on your site in this folder.

Regarding chapter: "HTML Head"

The <meta> element is used to specify which character set is used, page description, keywords, author, and other metadata. Use appropriate <meta> elements to specify your site (haracter set, page description, keywords, author etc).

Regarding chapter: "HTML Responsive"

HTML5 introduced a method to let web designers take control over the viewport, through the <meta> tag. Use this <meta> tag on your site. Also, the images on your site should be responsive, use the max-width Property! When you are done, for example, your landing page should look like the picture below:

Regarding chapter: "HTML Entities"

Read through this chapter and keep it in mind for the future.

Regarding chapter: "HTML Symbols"

Read through this chapter and keep it in mind for the future.

Regarding chapter: "HTML Charset"

Read through this chapter and keep it in mind for the future. Promise me that you always use the standard: UTF-8 (Unicode), then you will avoid many problems in the future.