Introduction to

HTML
By: Mohmmad Rahim

01/26/2025
HTML & CSS CONTENT, COLLECTED BY MOHAMMAD RAHIM TAHIR
Agenda
What is HTML?
What are Tags and Attributes?
HTML Editors
Creating Your First HTML Webpage
Demo program 22

01/26/2025
HTML & CSS CONTENT, COLLECTED BY MOHAMMAD RAHIM TAHIR
What is HTML?
HTML is the language in which most websites are written. HTML is used to
create pages and make them functional.
HTML was first created by Tim Berners-Lee, Robert Cailliau, and others
starting in 1989. It stands for Hyper Text Markup Language.
Hypertext means that the document contains links that allow the reader to
jump to other places in the document or to another document altogether.
The latest version is known as HTML5.
A Markup Language is a way that computers speak to each other to control
how text is processed and presented. To do this HTML uses two things: tags
and attributes.
Markup = tags + attributes
01/26/2025
HTML & CSS CONTENT, COLLECTED BY MOHAMMAD RAHIM TAHIR
What are Tags and
Attributes?
What Are HTML Tags
Tags and attributes are the basis of HTML, they work together but
perform different functions.
Tags are used to mark up the start of an HTML element and they are
usually enclosed in angle brackets. An example of a tag is: <h1>.
Most tags must be opened <h1> and closed </h1> in order to function.
What are HTML Attributes
Attributes contain additional pieces of information. Attributes take the
form of an opening tag and additional info is placed inside.

01/26/2025
HTML & CSS CONTENT, COLLECTED BY MOHAMMAD RAHIM TAHIR
Golden Rules To Remember
1. The vast majority of tags must be opened (<tag>) and closed
(</tag>) with the element information such as a title or text
resting between the tags.
2. When using multiple tags, the tags must be closed in the order in
which they were opened. For example:

<strong><em>This is really important!</em></strong>

01/26/2025
HTML & CSS CONTENT, COLLECTED BY MOHAMMAD RAHIM TAHIR
HTML Editors
First off, we must ensure that we have the right tools. Most
important, we need an HTML editor.
There are many choices on the market. Here are a handful of the
most popular:
Sublime Text 3
Notepad ++
Komodo Edit
And many more

01/26/2025
HTML & CSS CONTENT, COLLECTED BY MOHAMMAD RAHIM TAHIR
Sublime Text 3
However, for this subject, we will use the Sublime Text 3 as it is free and
also offers cross-platform support for Windows, Mac, and Linux users.
Sublime Text 3 has a mini-preview window on the right.
Pros Cons
Can’t print documents or code
Easily customizable
No toolbar or dashboard available.
Beginner-friendly
Pleasant color schemes to choose from.

Download link: https://www.sublimetext.com

01/26/2025
HTML & CSS CONTENT, COLLECTED BY MOHAMMAD RAHIM TAHIR
01/26/2025
HTML & CSS CONTENT, COLLECTED BY MOHAMMAD RAHIM TAHIR
Notepad ++
Another common choice for HTML and other language coders is Notepad +
+. It is a tiny program to download and perform the functions you need for
writing clean code.
This is Notepad ++. Far from glamorous but does the job.

Cons
Pros Can be difficult to get used to for beginners
Distraction-free interface No support for Mac.

Auto-completion feature
Plugin options for extended functionalities.
Download link: https://notepad-plus-plus.org

01/26/2025
HTML & CSS CONTENT, COLLECTED BY MOHAMMAD RAHIM TAHIR
01/26/2025
HTML & CSS CONTENT, COLLECTED BY MOHAMMAD RAHIM TAHIR
Komodo Edit
Komodo Edit is one of two editors released by the same label. They offer a
simple, open-source editor with a variety of extensions and language
support.
Komodo isn’t one for a flash interface either but is simple to use.
Cons
Pros No autocompletion by default
Easy-to-grasp coding interface Visual settings are difficult to find and change.

Available for Mac, Windows, and Linux

Impressive language support.
Download link:
https://www.activestate.com/products/komodo-ide/downloads/edit

01/26/2025
HTML & CSS CONTENT, COLLECTED BY MOHAMMAD RAHIM TAHIR
01/26/2025
HTML & CSS CONTENT, COLLECTED BY MOHAMMAD RAHIM TAHIR
Creating Your First HTML
Webpage
Basic Construction of an HTML Page
These tags should be placed underneath each other at the top of
every HTML page that you create.
<!DOCTYPE html> — This tag specifies the language you will write
on the page. In this case, the language is HTML 5.
<html> — This tag signals that from here on we are going to write in
HTML code.
<head> — This is where all the metadata for the page goes — stuff
mostly meant for search engines and other computer programs.
<body> — This is where the content of the page goes.

01/26/2025
HTML & CSS CONTENT, COLLECTED BY MOHAMMAD RAHIM TAHIR
 This is how your average HTML page is
structured visually.

01/26/2025
HTML & CSS CONTENT, COLLECTED BY MOHAMMAD RAHIM TAHIR
Further Tags
Inside the <head> tag, there is one tag that is always included:
<title>, but there are others that are just as important:
<title>
This is where we insert the page name as it will appear at the top of
the browser window or tab.
<meta>
This is where information about the document is stored: character
encoding, name (page context), description

01/26/2025
HTML & CSS CONTENT, COLLECTED BY MOHAMMAD RAHIM TAHIR
basic <head> section
<head>
<title> My First Webpage </title>
<meta charset="UTF-8">
<meta name="description" content="This field contains information about
your page. It is usually around two sentences long.">
<meta name="author" content=“Kateb University">
</head>

01/26/2025
HTML & CSS CONTENT, COLLECTED BY MOHAMMAD RAHIM TAHIR
Body tag
Adding Content
Next, we will make <body> tag.
The HTML <body> is where we add the content which is designed
for viewing by human eyes.

This includes text, images, tables, forms and everything else

that we see on the internet each day.

01/26/2025
HTML & CSS CONTENT, COLLECTED BY MOHAMMAD RAHIM TAHIR
HTML Headings
In HTML, headings are written in the following elements:

<h1> As you might have guessed <h1> and <h2>

should be used for the most important titles,
while the remaining tags should be used for
<h2> sub-headings and less important text.
<h3> Search engine bots use this order when
<h4> deciphering which information is most
important on a page.
<h5>
<h6>

01/26/2025
HTML & CSS CONTENT, COLLECTED BY MOHAMMAD RAHIM TAHIR
How To Add Text In HTML
Adding text to our HTML page is simple using an element opened
with the tag <p> which creates a new paragraph. We place all of
our regular text inside the element <p>.

When we write text in HTML, we also have a number of other

elements we can use to control the text or make it appear in a
certain way.

01/26/2025
HTML & CSS CONTENT, COLLECTED BY MOHAMMAD RAHIM TAHIR
01/26/2025
HTML & CSS CONTENT, COLLECTED BY MOHAMMAD RAHIM TAHIR
01/26/2025
HTML & CSS CONTENT, COLLECTED BY MOHAMMAD RAHIM TAHIR