Scribd
Upload
42 views

Tutorial II

The document provides instructions for creating a web page with embedded CSS. It describes how to configure headings, links, and columns using CSS properties like font, background color, padding, float, and width. The page includes code for the HTML structure with a nav column, article column, and footer. It links various city names to pages for London, Paris, Tokyo, and Singapore.

Uploaded by

saw monmyatoo
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
42 views

Tutorial II

The document provides instructions for creating a web page with embedded CSS. It describes how to configure headings, links, and columns using CSS properties like font, background color, padding, float, and width. The page includes code for the HTML structure with a nav column, article column, and footer. It links various city names to pages for London, Paris, Tokyo, and Singapore.

Uploaded by

saw monmyatoo
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

Tutorial II

(24.2.2023)
1. Create a web page with embedded style sheet that about configures Arial,
Helvetica, and sans-serif font. The heading level 1 is “Cities” that configures
background-color is green, 5 pixels of padding and center align and 35 pixels of
font. The class name is nav that configures 30% of the width,300 pixels of height,
the background color is grey, 20 pixels of padding and float left.; Place the
following links that London links to london.html, Paris links to paris.html. Tokyo
links to tokyo.html and Singapore links to singapore.html. The id name is article is
that configures the float left,20 pixels of padding , 70% of padding , the
background color is #FFFF33 and 300 pixels of the height in the heading level 2 is
“London” that configures background-color is green, 5 pixels of padding and
center align and 20 pixels of font and the text “London is the capital city of
England. It is the most populous city in the United Kingdom, with a
metropolitan area of over 13 million inhabitants.

Standing on the River Thames, London has been a major settlement for two
millennia, its history going back to its founding by the Romans, who named it
Londinium.” is the paragraph. And the text “Tokyo” of heading level2. And then
the text “All you need to know about Tokyo's tourist attractions, events, hotels,
transportations & more from the official travel guide of Tokyo for visitors.” is
the paragraph. For all elements of box sizing is border box.

The footer id name is footer that configures background color is grey, 10 pixels of
padding, align center and color is white and the footer text is “Footer”.
<!DOCTYPE html>

<html lang="en">

<head>

<title>CSS Template</title>

<meta charset="utf-8">
<style>* {

box-sizing: border-box;

body {

font-family: Arial, Helvetica, sans-serif;

/* Style the header */

h1 {

background-color: green;

padding: 5px;

text-align: center;

font-size: 35px;

color: white;

h2 {

background-color: green;

padding: 5px;

text-align: center;

font-size: 20px;

color: white;

/* Create two columns/boxes that floats next to each other */

#nav {

float: left;
width: 30%;

height: 300px; /* only for demonstration, should be removed */

background-color:grey;

padding: 20px;

#article {

float: left;

padding: 20px;

width: 70%;

background-color: #FFFF33;

height: 300px; /* only for demonstration, should be removed */

footer {

background-color: gray;

padding: 10px;

text-align: center;

color: white;

</style>

</head>

<body>

<h1>Cities</h1>

<div id="nav">
<ul>

<li><a href="#">London</a></li>

<li><a href="#">Paris</a></li>

<li><a href="#">Tokyo</a></li>

<li><a href="#">Singapore</a></li>

</ul>

</div>

<div id="article">

<h2>London</h2>

<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a
metropolitan area of over 13 million inhabitants.

Standing on the River Thames,

London has been a major settlement for two millennia,

its history going back to its founding by the Romans, who named it

Londinium.</p>

<h2>Tokyo</h2>

<p>All you need to know about Tokyo's tourist attractions, events, hotels, transportations & more from
the official travel guide of Tokyo for visitors.</p>

</div>

<footer>

<p>Footer</p>

</footer>

</div>

</body>

</html>

You might also like