Diploma in Coding and Technology
HTML elements
2
Contents
3 Source code
CODING & TECHNOLOGY
3
Lesson outcomes
In this lesson we review the important and common HTML elements used in web development. Here
we will focus on text level elements, grouping elements and provide our website with a more coherent
structure and flow by implementing very basic navigation. We will also explore the importance of
making comments in our code.
Source code
Index page
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>My new website</title>
</head>
<header>
<h1>Hello World</h1>
</header>
<body>
<div>
<!--- THIS IS MY NAVIGATION SYSTEM WITH 4 LINKS-->
<nav>
<ul>
<li> <a href="index.html">Home</a> </li>
<li><a href="learn_code.html">Learn Code</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact_us.html">Contact Us</a></li>
</ul>
</nav>
</div>
<hr width="1800">
<section>
<p>Welcome to Coding and Technology. In this course, you will learn the basics of
front-end web development. Don't forget to grab a cup of coffee!</p>
</section>
<br>
<section>
<h2>What is HTML?</h2>
<p>Hypertext Markup Language (HTML) is the standard markup language for
creating web pages and web applications. Web browsers receive HTML documents from
a web server or from local storage and render the documents into multimedia web
pages. HTML
describes the structure of a web page semantically and originally included cues
for the appearance of the document.
</p>
</section>
CODING & TECHNOLOGY
4
<section>
<h4>Characteristics of HTML</h4>
<ol>
<li>Uses elements/tags to build web page structure</li>
<li>Enables media files to be embedded in webpages i.e. audio and video
clips</li>
<li>Semantically defines web page for text i.e. paragraphs, headings etc.</li>
<li>Allows developers to embed JavaScript code</li>
<li>Elements/tags have attributes</li>
</ol>
</section>
</body>
<footer>My HTML website ©</footer>
</html>
Learn code page
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>My new website</title>
</head>
<header>
<h1>Learn Code</h1>
</header>
<body>
<div>
<nav>
<ul>
<li> <a href="index.html">Home</a> </li>
<li><a href="learn_code.html">Learn Code</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact_us.html">Contact Us</a></li>
</ul>
</nav>
</div>
</body>
</html>
CODING & TECHNOLOGY
5
About page
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>My new website</title>
</head>
<header>
<h1>About</h1>
</header>
<body>
<div>
<nav>
<ul>
<li> <a href="index.html">Home</a> </li>
<li><a href="learn_code.html">Learn Code</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact_us.html">Contact Us</a></li>
</ul>
</nav>
</div>
</body>
</html>
Contact Us page
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>My new website</title>
</head>
<header>
<h1>Contact Us</h1>
</header>
<body>
<div>
<nav>
<ul>
<li> <a href="index.html">Home</a> </li>
<li><a href="learn_code.html">Learn Code</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact_us.html">Contact Us</a></li>
</ul>
</nav>
</div>
</body>
</html>
CODING & TECHNOLOGY
