Scribd
Upload
6 views

HTMLNotes

Uploaded by

shivanshjajs
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
6 views

HTMLNotes

Uploaded by

shivanshjajs
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 29

HTML: Hyper Text Markup Language

It used for Designing Web Page


This can be seen on Internet
Hyper-Link
Text-Normal Text
Language-English Language
Markup-Tag
Web page: It collection of text, Images, video, Audio
Website: Collection of Web Pages
Web Browser: It used to run your web sites
Web Servers: It host your website
HTML file save using .html or .htm extension
To refresh Bowser press F5

Tools/Software
1. Notepad
2. Browser/ Mozial, Chrome, Opera, Internet Explorer
Tags:
<h1>--<h6> Heading Tags
<p> Paragraph Tag
<pre> pre-formatted Tag
<u> Underline Tag
<b> Bold
<i> Italic
<br> break line/New Line
<title> Title of the Web Page
<hr> horizontal Line
<img> image tag
<details> expansion menu
<summary> label of expansion menu
<marquee>
<a>-Anchor Tag
Attribute
href= hyper link ,References
<ul> Unordered List
<ol> Ordered List
<li> List of value
<font> Changing format of text
Table Tag
<table>
<tbody> Table Body
<thead> Table Heading
<th> Table Heading
<caption> Title of Table
<tr> Table row
<td> Table column
Table Attributes
Colspan Merging columns
Rowspan Merging Row
Cellpadding space between cell and content
Cellspacing space between cell
Bgcolor,border,width,height
Form Tag:
<form>
<input>
Type: text, number, date, email, password, radio, checkbox,file
<select>
<option>
<Ledgend>
<fieldset>
<label>
<textarea rows=”5” cols=”5”></textarea>

Example 1:
<html>
<head>
<title>
Web page
</title>
</head>
<body bgcolor="yellow">
IT Team Work
</body>
</html>

Example 2: Heading Tag with alignments


There are three alignments: left, right, centre, justify
Justify only for paragraph tag
<html>
<head>
<title>
Web page
</title>
</head>
<body bgcolor="yellow">
<h1 align="center">This is Headling 1</h1>
<h2 align="right">This is Headling 2</h2>
<h3>This is Headling 1</h3>
<h4>This is Headling 1</h4>
<h5>This is Headling 1</h5>
<h6>This is Headling 1</h6>
</body>
</html>

Example 3: With Paragraph and Pre tag


<html>
<head>
<title>
Web page
</title>
</head>
<body bgcolor="yellow">
<p align="justify">
On the Insert tab, the galleries include items that are designed to coordinate with the
overall look of your document. You can use these galleries to insert tables, headers, footers,
lists, cover pages, and other document building blocks. When you create pictures, charts, or
diagrams, they also coordinate with your current document look.
You can easily change the formatting of selected text in the document text by choosing a
look for the selected text from the Quick Styles gallery on the Home tab. You can also
format text directly by using the other controls on the Home tab. Most controls offer a
choice of using the look from the current theme or using a format that you specify directly.
</p>
<pre>
N O T I E S
</pre>

<p>
N O T I E S
</p>
</body>
</html>

Example 4: Formatted Tag


<html>
<head>
<title>
Web page
</title>
</head>
<body bgcolor="yellow">
<h2>Formatted Tag</h2>
<b>Bold</b><br>
<u>Underline</u><br>
<i>Italic</i>
<b><i><u><h1>IT Team Work</h1></u></i></b>
</body>
</html>

Example 5: Horizontal Line and Marquee Tag


<html>
<head>
<title>
Web page
</title>
</head>
<body bgcolor="yellow">
<h2>Horizonal Line Tag</h2>
<hr>
<h3>HR tag with Arributes</h3>
<hr color="red" size="10px"/>
<hr color="blue" size="10px" width="50%"/>
<marquee direction="left">Copyright of the website</marquee>
</body>
</html>

Example 6: Image and Background Image


<html>
<head>
<title>
Web page
</title>
</head>
<body background="back.jpeg">
<h2>Horizonal Line Tag</h2>
<hr>
<h3>Image Tag</h3>
<img src="D:\Images\flower1.jpg" widht="200" height="200" alt="Image 1"></body>
</html>

Example 7: Image Alignment, Middle, bottom and left


<html>
<head>
<title>
Web page
</title>
</head>
<body bgcolor="yellow">
<h2>Horizonal Line Tag</h2>
<hr>
<h3>Image Tag Left Alignment</h3>
<img src="b2.jpg" width="50" height="50" align="left">
<p>On the Insert tab, the galleries include items that are designed to coordinate with the
overall look of your document. You can use these galleries to insert tables, headers, footers,
lists, cover pages, and other document building blocks. When you create pictures, charts, or
diagrams, they also coordinate with your current document look.</p><br><br>

<h3>Image Tag bottom Alignment</h3>


<p>On the Insert tab, the galleries include items that are designed to coordinate with the
overall look of your document. <img src="b2.jpg" widht="50" height="50"
align="bottom">You can use these galleries to insert tables, headers, footers, lists, cover
pages, and other document building blocks. When you create pictures, charts, or diagrams,
they also coordinate with your current document look.</p>

<h3>Image Tag middle Alignment</h3>


<p>On the Insert tab, the galleries include items that are designed to coordinate with the
overall look of your document. <img src="b2.jpg" widht="50" height="50"
align="middle">You can use these galleries to insert tables, headers, footers, lists, cover
pages, and other document building blocks. When you create pictures, charts, or diagrams,
they also coordinate with your current document look.</p>
</body>
</html>

Example 8: using Hyperlink


Page 1.html
<html>
<head>
<title>Web Page</title>
</head>
<body>
<h2>Weclome to My Website</h2>
<a href ="Page 2.html">Visit /Click Page2</a>
</body>
</html>
Page 2.html
<html>
<head>
<title>Web Page</title>
</head>
<body bgcolor="yellow">
<h1>Welcome to Page 2</h2>
</body>
</html>

List: It means display number list as well as bullet list

Types of list
1. Ordered List : It called as numbered List
2. Type in ordered list: A, a i,I
Example 9:
<html>
<head>
<title>Web Page</title>
</head>
<body>
<h2>Ordered List</h2>
<ol>
<li>Apple</li>
<li>Banana</li>
<li>Grapes</li>
<li>Pear</li>
<li>Manago</li>
</ol>
<h3>ABC Type</h3>
<ol type="A">
<li>Apple</li>
<li>Banana</li>
<li>Grapes</li>
<li>Pear</li>
<li>Manago</li>
</ol>

<h3>abc Type</h3>
<ol type="a">
<li>Apple</li>
<li>Banana</li>
<li>Grapes</li>
<li>Pear</li>
<li>Manago</li>
</ol>

<h3>I Roman Type</h3>


<ol type="I">
<li>Apple</li>
<li>Banana</li>
<li>Grapes</li>
<li>Pear</li>
<li>Manago</li>
</ol>
<h3>i Roman Type</h3>
<ol type="i">
<li>Apple</li>
<li>Banana</li>
<li>Grapes</li>
<li>Pear</li>
<li>Manago</li>
</ol>
</body>
</html>

3. Unordered list: It called as Symbolic list


Type: square, circle, by default dise
Example: 10
<html>
<head>
<title>Web Page</title>
</head>
<body>
<h2>Unordered List</h2>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Grapes</li>
<li>Pear</li>
<li>Manago</li>
</ul>

<h3>Circle Type</h3>
<ul type="circle">
<li>Apple</li>
<li>Banana</li>
<li>Grapes</li>
<li>Pear</li>
<li>Manago</li>
</ul>

<h3>Sqaure Type</h3>
<ul type="square">
<li>Apple</li>
<li>Banana</li>
<li>Grapes</li>
<li>Pear</li>
<li>Manago</li>
</ul>
</body>
</html>

Example: 11 Designing Table


<html>
<head>
<title>
Web page
</title>
</head>
<body>
<table border=3 cellpadding="10px" cellspacing="20px" width="50%"
bgcolor="yellow">
<thead>
<caption>
Marksheet of the Student
</caption>
</thead>
<tr bgcolor="pink">
<th >Roll No</th>
<th>Student Name</th>
<th>Marathi</th>
<th>English</th>
<th>Maths</th>
</tr>
<tr>
<td>1</td>
<td>Nikhil</td>
<td>60</td>
<td>80</td>
<td>86</td>
</tr>
<tr>
<td>2</td>
<td>Kiran</td>
<td>60</td>
<td>80</td>
<td>86</td>
</tr>
<tr>
<td>3</td>
<td>Shruti</td>
<td>60</td>
<td>80</td>
<td>86</td>
</tr>
<tr>

<td colspan="4" bgcolor="#44ff66">


Total </td>
<td bgcolor="#44ff66">300</td>
</tr>
</table>
</body>
</html>
Example 12: Changing Font Color
<html>
<head>
</head>
<body>
<font color="red" size="5" >
<h1 align="center">IT Team Work</h1>
</font>
</body>
</html>

Example 13: Online Form

<html>
<body bgcolor="Aqua">
<h1 align="center"><font size="5" color="purple" face="Algerian"><u> ONLINE
ADMMISSION FOMR</u></font></h1>
<hr color="yellow">
<center>
<form method="POST" action="success.html">
<font face="Times New Roman" size="3" color="red">
<label>FRIST NAME:-</label><input type="text" name="T1" maxlength="10"
placeholder="enter name" required><br><BR>

LAST NAME:-<input type="text" name="T2" maxlength="10"><br><BR>

PASSWORD:-<input type="password" name="T2" maxlength="10"><br><BR>

EMAIL:-<input type="email" name="T2"><br><BR>

ADDRESS:-<textarea rows="2" cols="15"></textarea><br><BR>

DATE OF BRITH:-<input type="date" maxlength="10"><br><BR>

CONTACT NO:-<input type="text" name="C2" maxlength="10"><br><BR>

AGE:-<input type="number" name="C3"><br><BR>

PHOTO :<input type="file"><br><br>

GENDER:-<input type="radio" name="V1" checked="true">


MALE:-<input type="radio" name="V1" >FEMALE<BR><BR>

COURCES:-<input type="checkbox" name="C1">OFFICE AUTOMATION


<input type="checkbox" name="C2" >D.T.P
<input type="checkbox" name="C1" >WEB DESINING
<input type="checkbox" name="C2" >TALLY ERP 9.0
<input type="checkbox" name="C3">PROGRAMMING<BR>

<p>QUALIFICATION:-<select size="1" name="qualification">


<option selected>Select</option>
<option>S.S.C.</option>
<option>H.S.C.</option>
<option>B.COM</option>
<option>M.COM</option>
</select></p><br>
<fieldset>
<legend>Your Main Objective</legend>
<textarea rows="10" cols="50"></textarea>
</fieldset>

<p><input type="submit" value="Submit"


name="B1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="reset" value="Reset" name="B2"></p></b><hr color="yellow">
</font>
<center>
</form>
</body>
</html>

Style Sheet in HTML


Cascading Style Sheets (CSS) is used to format the layout of a webpage.
Save: CSS file save with .css extension
Property
Syntax:
Value
Selector Declaration

h1 {color:red;font-size:10px}

Example 1 :( Simple HTML Selector)


<html>
<head>
<style>
h1
{color:red; font-style:italic;}
h2
{color:#11ff55; text-decoration:underline;}
</style>
</head>
<body>
<h1>Welcome to BookYourHotel Website.</h1>
<h2>This site is very user Friendly.</h2>
<h1>You can book your hotel while sitting at home.</h1>
</body>
</html>

Example 2:(Body Selector)


<html>
<head>
<style>
body
{
font-family:Calibri,Comic Sans MS;
font-weight:bold;
color:yellow;
font-style:italic;
background-color: #ff33ff;
}
</style>
</head>
<body>
<p>Welcome to BookYourHotel Website.</p>
<p>This site is very user Friendly.</p>
<h1>You can book your hotel while sitting at home.</h1>
</body>
</html>

Use of CSS color, font-family and font-size properties:


Example:
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p{
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
CSS Border
The CSS border property defines a border around an HTML element.
p{
border: 2px solid powderblue;
}
Types of line
Dashed, dotted, solid, inset, outset
Example:
<html>
<head>
<style>
p
{
border:5px outset red;
color:blue;
font-family:Airal;
text-size:20px;
}
</style>
</head>
<body>
<p>This is paragraph first</p>
<p>This is paragraph second</p>
</body>
</html>
CSS Padding
The CSS padding property defines a padding (space) between the text and the border.
p{
border: 2px solid powderblue;
padding: 30px;
}
Example:
<html>
<head>
<style>
p
{
border:5px outset red;
color:blue;
font-family:Airal;
text-size:20px;
padding:30px;
}
</style>
</head>
<body>
<p>This is paragraph first</p>
<p>This is paragraph second</p>
</body>
</html>

CSS Margin
The CSS margin property defines a margin (space) outside the border.
p{
border: 2px solid powderblue;
margin: 50px; //left, top, right and bottom
}
margin-left,margin-right,margin-top,margin-bottom
Example:
<html>
<head>
<style>
p
{
border:5px outset red;
color:blue;
font-family:Airal;
text-size:20px;
margin-left:50px;
margin-top:50px;
}
</style>
</head>
<body>
<p>This is paragraph first</p>
<p>This is paragraph second</p>
</body>
</html>

HTML Link Colors


By default, a link will appear like this (in all browsers):

An unvisited link is underlined and blue


A visited link is underlined and purple
An active link is underlined and red
Example:
<html>
<head>
<style>
<style>
a:link{
color: #ff1133;
text-decoration: none;
}
a:visited {
color: pink;
text-decoration: none;
}

a:hover {
color: red;
background-color: transparent;
text-decoration: none;
}

a:active {
color: yellow;
background-color: transparent;
text-decoration: underline;
}
</style>
</head>
<body>
<h1>Link Style</h1>
<a href="democss.html">Visit this link</a>
</body>
</html></style>

Link Buttons
a:link, a:visited {
background-color: #f44AA6;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
}

a:hover, a:active {
background-color: red;
}

Image Floating
<p><img src="facebook.png" alt="Smiley face" style="float:right;width:50px;height:42px;">
The image will float to the right of the text.</p>

<p><img src="facebook.png" alt="Smiley face" style="float:left;width:50px;height:42px;">


The image will float to the left of the text.</p>

Background Cover/Repeat
<style>
body {
background-image: url('back1.jfif');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}</style>

Horizontal List with CSS


<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}

li {
float: left;
}

li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: #111111;
}
</style>
</head>
<body>

<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

</body>
</html>
The <div> and <span>Element
<div style="background-color:black;color:white;padding:20px;width:800px;height:200px;">
<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.</p>
</div>

The <span> Element


<p >My mother has <span style="color:blue;font-weight:bold">blue</span> eyes and my father has
<span style="color:darkolivegreen;font-weight:bold">dark green</span> eyes.</p>

Example 3: (Inline Style)


An inline CSS is used to apply a unique style to a single HTML element.
<html>
<body>
<h3>Inline Style Sheet</h3>
<p style="font-size:24pt; color:red;">Hotel booking from the comfort of your room.</p>
<p> Compare and book form more than 5000 hotels.</p>
</body>
</html>

Example 4: (Internal Style)


An internal CSS is used to define a style for a single HTML page.
<html>
<head>
<style>
p
{
font-size:24pt;
color:red;
font-style:italic;
}
</style>
</head>
<body>
<h3>Internal Style Sheet</h3>
<p>Hotel booking from the comfort of your room.</p>
<p> Compare and book form more that 5000 hotels.</p>
</body>
</html>

Example 5: (External Style Sheet)


An external style sheet is used to define the style for many HTML pages.
To use an external style sheet, add a link to it in the <head> section of each HTML page
<html>
<head>
<title>An Extenal Style Sheet</title>
<link type="text/css" rel="stylesheet" href="External Style.css">
</head>
<body>
<h3>External Style Sheet</h3>

<h1>Hotel booking from the comfort of your room.</h1>


<p> Compare and book form more that 5000 hotels.</p>
</body>
</html>

Example 6: (Multiple Style Sheet)


<html>
<head>
<title>An External Style Sheet</title>
<link type="text/css" rel="stylesheet" href="External Style.css">
<style>
h1
{
color:green;
font-size:12pt;
font-style:italic;
}
</style>
</head>
<body>
<h3>External Style Sheet</h3>
<p>Welcome to Book Your Hotel WebSite.</p>
<h1 style="font-size:24pt; color:red">Hotel booking from the comfort of your room.</h1>
<h1> Compare and book form more that 5000 hotels.</h1>
</body>
</html>

Example 7: (ID Selector)


<html>
<head>
<title>An Extenal Style Sheet</title>
<link type="text/css" rel="stylesheet" href="External Style.css">
<style>
p
{
color:red;
}
#pname
{
color:green;
font-size:20;
font-weight:bold;
}
</style>
</head>
<body>
<h3>ID Selector</h3>
<p id="pname">Welcome to Book Your Hotel WebSite.</p>
<p> Hotel booking facility at your doorstep</p>
</body>
</html>

Example 8: (Class Selector)


<html>
<head>
<style>
.first
{
color:green;
font-size:20;
font-weight:bold;
}
</style>
</head>
<body>
<h3>Class Selector</h3>
<h1 class="first">Welcome to Book Your Hotel WebSite.</h1>
<h2 class="first">This site is very user friendly</h2>
<p class="first">This site gives information of all the hotels in USA</p>
<p class="first">You can book your hotel while sitting at your room.</p>
</body>
</html>

Example 9: (Output Derived After Using Class Selector)

<html>
<head>
<style>
.color1
{
color:blue;
}
p.color2
{
color:red;
}
</style>
</head>
<body>
<h3>Class Selector</h3>
<h4 class="color1">Welcome to Book Your Hotel WebSite.</h4>
<p class="color1">Provides online booking of domestic and international hotels</p>
<p class="color2">Avail great discount and offers</p>
</body>
</html>

Example 10.(Nested Style Sheet)


<html>
<head>
<style>
div>p // It means inside the div section\\ div+p the first para of div section div~p mean after div
section all p tag will be color by yellow
{
background-color:yellow;
}
</style>
</head>
<body>
<h1>WELCOME TO THE PAGE</h1>
<div>
<p>This is Paragraph 1 in Div Tag</p>
<p>This is Paragraph 2 in Div Tag</p>
</div>
<p>This is Paragraph 3 outside Div Tag</p>
<p>This is Paragraph 4 outside Div Tag</p>
</body>
</html>

Example 11: (Grouping Style)

<html>
<head>
<style>
body
{
background-image:url('1.jpg');
background-repeat:repeat;
}
p,h1,h2
{
font-variant:small-caps;
font-family:Helvetica;
color:red;
text-align:center;
}
a:link
{
color:#ff0000; //red
}

a:visited
{
color:#00ff00; //green
}
a:hover
{
color:#0000ff; //blue
}
a:active
{
color:#ff00ff; //pink
}
ul
{
list-style-type:square;
list-style-position:inside;
}
</style>
</head>
<body>
<h1>About Us</h1>
<p>Book Your Hotel is the most trusted name in the destination management industry. We are one
of the pioneers for hotel booking. Currently we are operating out of our head office in Chicago. In
addition we have our presence across all the major cities in the US and Europ. Our primary focus is
on customer satisfaction and comfort.</p>

<p>With a manpower strength of over 400 employees spread across the US, we ensure a quick and
customized reponse to all your travel related queries.</p>

<p>Our regional offices are situated at the following locations:</p>

<ul>
<li>Alabama</li>
<li>Florida</li>
<li>California</li>
<li>Colorado</li>
<li>Texas</li>
<li>New York</li>
</ul>

<p>We are also planning to expand our serives to other satates.


Regarding any further queries or feedback. click at the following link:</p>

<a href="Simple Style.html">Book Your Hotel</a>


</body>

</html>

Example 12:(Display & Visibility & Position & Float,Clear)

<html>
<head>
<style>
li
{
display:inline;
list-style-type:none;
}
h2
{
visibility:hidden;
}
h3
{
position:absolute;
top:5px;
}
</style>
</head>
<body>
<h2>Book Your Hotel</h2>
<h3>Welcome to the Home page</h3>
<ul>
<li> About us</li>
<li> Rooms</li>
<li> Facilities</li>
<li> Services</li>
<li> Contact us</li>
</ul>
</body>
</html>

Example 13: (Display & Visibility)

<html>
<head>
<style>
li
{
display:inline;
list-style-type:none;
}
h2
{
visibility:hidden;
}
h3
{
position:absolute;
top:10px;
}
img
{
float:right;
}
.auto
{
clear:both;
}
</style>
</head>
<body>

<h2>Book Your Hotel</h2>

<h3>Welcome to the Home page</h3>


<img src="Hotel.png" width="150" height="150"/>
<ul>
<li> About us</li>
<li> Rooms</li>
<li> Facilities</li>
<li> Services</li>
<li> Contact us</li>
</ul>
<p class="auto">Book your hotel welcomes yo with warmth and a feeing that wach guest is truly
special</p>
</body>
</html>

Example 14: (Transition Effect)


<html>
<head>
<style>
div
{
width:200px;
height:200px;
background:red;
-webkit- transition-property:width, height;
transition-duration:2s; /*Chrome*/

-o-transition:width 4s; /*opera*/

}
div:hover
{
width:400px;
height:400px;
background:blue;
}
</style>

</head>
<body>
<Div></Div>
</body>
</html>
Example 15: (Animation Effect)

<html>
<head>
<style>
div
{
width:200px;
height:200px;
background:red;
positin:relative;
-webkit-animation-name:myfirst;
-webkit-animation-duration:5s;
animation-iteration-count: infinite;
}
@-webkit-keyframes myfirst
{
0%{background:red;}
20%{background:green;}
40%{background:yellow;}
80%{background:red;}
}
</style>
</head>
<body>
<div>
</div>
</body>
<html>

------------------------------------------------ HAPPY LEARNING----------------------------------------------


Layout:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
*{
box-sizing: border-box;
}

body {
font-family: Arial, Helvetica, sans-serif;
}

/* Style the header */


header {
background-color: #666;
padding: 30px;
text-align: center;
font-size: 35px;
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: #ccc;
padding: 20px;
}

/* Style the list inside the menu */


nav ul {
list-style-type: none;
padding: 0;
}

article {
float: left;
padding: 20px;
width: 70%;
background-color: #f1f1f1;
height: 300px; /* only for demonstration, should be removed */
}
/* Clear floats after the columns */
section::after {
content: "";
display: table;
clear: both;
}

/* Style the footer */


footer {
background-color: #777;
padding: 10px;
text-align: center;
color: white;
}

/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to
each other, on small screens */
@media (max-width: 600px) {
nav, article {
width: 100%;
height: auto;
}
}
</style>
</head>
<body>

<h2>CSS Layout Float</h2>


<p>In this example, we have created a header, two columns/boxes and a footer. On smaller screens,
the columns will stack on top of each other.</p>
<p>Resize the browser window to see the responsive effect (you will learn more about this in our
next chapter - HTML Responsive.)</p>

<header>
<h2>Cities</h2>
</header>

<section>
<nav>
<ul>
<li><a href="#">London</a></li>
<li><a href="#">Paris</a></li>
<li><a href="#">Tokyo</a></li>
</ul>
</nav>
<article>
<h1>London</h1>
<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.</p>
<p>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>
</article>
</section>

<footer>
<p>Footer</p>
</footer>

</body>
</html>

Assignments:

You might also like