Diploma in Coding and Technology
Introduction to
HTML
Contents
3 What is HTML?
4 Installing the IDE
6 Creating our first web page
CODING & TECHNOLOGY
Lesson outcomes
In this lesson, we jump right into web development we learn more about the HTML markup language.
We will install the required software so that we can begin developing our first web page using HTML.
What is HTML?
HTML defined
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.
Characteristics of HTML
• Cornerstone technology used by most websites.
• Enables media files to be embedded.
• Semantically defines web page.
• Allows developers to embed JavaScript.
• Elements/tags have attributes.
HTML 5
• The 5th iteration of the HTML standard.
• Adds support for embedded multimedia content, relying less on JavaScript.
• Introduces markup and application programming interfaces (APIs).
• Enables cross-platform implementation for low-powered devices.
• Enriches the semantic content of documents by introducing new page structure elements.
• Accommodates the use of multiple and outdated browsers.
Defining an HTML document
CODING & TECHNOLOGY
HTML tags and elements
Elements/Types Description
Tags Tags are the starting and ending parts of an HTML element. Below is an
example of the paragraph tag.
<p> </p>
Elements Elements enclose the contents in between the tags. Below is an example of
the paragraph element.
<p>This is some text</p>
Common HTML tags
Element/Tag Description
<a> </a> An anchor element with an HREF attribute. The value of the HREF attribute
is a URI (i.e., an Internet address).
<div> </div> A dummy element which contains block-level elements. It is used with style
sheets.
<h1></h1> Headings (levels 1-6, i.e. H3 is a subheading within a H2 subheading).
...
<h6> </h6>
<img> Image. Attributes: must have SRC and ALT.
<li> </li> List item. Used within an ordered (<ol>) or unordered (<ul>) list
<span> </span> A dummy element which contains in-line content.
Element/Tag Details
<header> Specifies a header for a document or section i.e. used for large texts and headings
<nav> Defines navigation links i.e. used with list items
<section> Defines a section in a document
<article> Defines an article
<aside> Defines content aside from the page content i.e. Sidebars
<footer> Defines a footer for a document or section usually found below the webpage or
post
CODING & TECHNOLOGY
<main> Specifies the main content of a document
<figure> Specifies self-contained content, like illustrations, diagrams, photos, code listings,
etc.
Installing the IDE
Integrated development environment (IDE)
An IDE is a software tool that provides developers to write programming code. An IDE normally
consists of at least a source code editor. Transferring files and scripts to the web client (browser).
Examples of popular IDEs
• Visual Studio Code - https://code.visualstudio.com/download
• ATOM – https://atom.io
• Sublime Text - https://www.sublimetext.com
• Brackets - http://brackets.io
• Notepad++ - https://notepad-plus-plus.org/downloads
Downloading and installing ATOM
1. Visit www.atom.io and click the download button.
CODING & TECHNOLOGY
2. Once ATOM has been downloaded, double click and on the executable file and wait for ATOM
to install.
Creating our first web page
CODING & TECHNOLOGY
Creating an HTML document
3. To create you first script, navigate to the file tab and select New file.
4. Once you have created a new file you should see a new pane appear with an untitled heading.
Navigate to the file tab and click Save As
CODING & TECHNOLOGY
5. Save the file in your desired location with the name as index.html
CODING & TECHNOLOGY
6. Copy and paste the following source code into the script you just saved and save the file again.
<!DOCTYPE html>
<html lang="en" dir="ltr">
CODING & TECHNOLOGY
<head>
<meta charset="utf-8">
<title>My first website</title>
</head>
<header>
<h1>Hello World</h1>
</header>
<body>
<p>Welcome to my first website! Yay!</p>
</body>
</html>
7. Navigate to the folder where you saved your index.html file and open the file. The file should
open in your default internet browser and you should see the following output.
CODING & TECHNOLOGY
