Website
Moodle
type what you see below into the HTML editor, then look at the preview windw:
The <!DOCTYPE> declaration must be the very first thing in your HTML document, before the tag.
The <!DOCTYPE> declaration is not an HTML tag; it is an instruction to the web browser about what version of HTML the page is written in.
exmample of Doctype:
<!DOCTYPE html>
<html>
<head>
<title>Your first website</title>
</head>
<body> <nav>
<ul>
<li><a href="http://ercstudentwebserver.co.uk"></li>
<li><a href="http://ercstudentwebserver.co.uk/tutorials/playground.html">Playground</li>
<li><a href="http://ercstudentwebserver.co.uk/tutorials/htmlindex.php">HTML tutorials</li>
<li><a href="http://ercstudentwebserver.co.uk/tutorials/cssindex.php">HTML tutorials</li>
</ul>
<div style="background-color: #00f; color:red" >
<h1> This is a heading </ h1>
this is a p tag it stands for paragraph
<p> this is a paragraph </p>
</div>
<body>
<html>
The <!DOCTYPE> declaration is not an HTML tag; it is an instruction to the web browser about what version of HTML the page is written in.
exmample of Doctype:
<!DOCTYPE html>
<html>
<head>
<title>Your first website</title>
</head>
<body> <nav>
<ul>
<li><a href="http://ercstudentwebserver.co.uk"></li>
<li><a href="http://ercstudentwebserver.co.uk/tutorials/playground.html">Playground</li>
<li><a href="http://ercstudentwebserver.co.uk/tutorials/htmlindex.php">HTML tutorials</li>
<li><a href="http://ercstudentwebserver.co.uk/tutorials/cssindex.php">HTML tutorials</li>
</ul>
<div style="background-color: #00f; color:red" >
<h1> This is a heading </ h1>
this is a p tag it stands for paragraph
<p> this is a paragraph </p>
</div>
<body>
<html>
HTML editor
Please type the code below into the CSS window
body {
background-color: #d0e4fe;
}
h1 {
color: orange;
text-align: center;
}
p {
font-family: "Times New Roman";
font-size: 20px;
}
div{
background-color: blue;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
border-right:1px solid #bbb;
}
li:last-child {
border-right: none;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
background-color: #d0e4fe;
}
h1 {
color: orange;
text-align: center;
}
p {
font-family: "Times New Roman";
font-size: 20px;
}
div{
background-color: blue;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
border-right:1px solid #bbb;
}
li:last-child {
border-right: none;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}