Professional Diploma in Coding and
Technology
Introduction to
HTML
Module 1 Lesson 2
Summary Notes
2
Contents
3 What is HTML?
4 Installing the IDE
8 Creating our first web page
Professional Diploma in Coding and Technology
3
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.
Professional Diploma in Coding and Technology
4
Defining an HTML document
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.
Professional Diploma in Coding and Technology
5
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
<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
Professional Diploma in Coding and Technology
6
Downloading and installing ATOM
1. Visit https://www.techspot.com/downloads/6540-atom-text-editor.html and download the
ATOM IDE for your operating system.
2. Once ATOM has been downloaded, double click and on the executable file and wait for ATOM
to install.
Professional Diploma in Coding and Technology
7
Installing packages (optional)
In order to install the atom beautify and atom live server packages. Ensure that you have watched the
lesson. The installation process is demonstrated at roughly 19:35 minutes into the lesson. Below are
the URL links used to install the packages as well as a sample of the commands used in the .
Software links
https://git-scm.com/downloads
https://nodejs.org/en/
GitHub links
https://github.com/jas-chen/atom-live-server
https://github.com/Glavin001/atom-beautify
CMD commands for atom live server
cd [your path to the atom packages folder here]
git clone https://github.com/jas-chen/atom-live-server
cd atom-live-server
npm install
CMD commands for atom beautify
cd [your path to the atom packages folder here]
git clone https://github.com/Glavin001/atom-beautify
cd atom-beautify
npm install
Professional Diploma in Coding and Technology
8
Creating our first web page
Creating an HTML document
3. To create you first script, navigate to the file tab and select New file.
Professional Diploma in Coding and Technology
9
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
Professional Diploma in Coding and Technology
10
5. Save the file in your desired location with the name as index.html
Professional Diploma in Coding and Technology
11
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">
<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.
Professional Diploma in Coding and Technology
