LEARNING
THE HTML
Markup Language Contents
1.Introduction to HTML
2.Tags
3.What’s in the HTML
website?
4.How to add a text
5.Indentation and more
tags
6. Lists
7.Hyperlinks
8.Images
9.Basic page structure
10.DIV and SPAN
03
06
09
13
17
19
21
24
27
31 1.Introduction to HTML
HTML is an abbreviation for Hypertext
Markup Language. It may sound
daunting but don’t worry. It’s simply
the language used for building
websites. We use a HTML to define the
content and structure of the website.
We use HTML to describe every
element on a website. The browser
will know how to interpret these
elements and how to display them.
Take a look at the following examples.
Think for a moment about code and
how it’s interpreted by the browser:
Learning the HTML 03 First example:
Header
Header
Second example:
The text in the paragraph
Paragraph
Last example:
Submit
We write and publish the HTML code
in a document with an ".Atm|"
extension. The browser knows that
such a document contains HTML code
and knows how to deal with its
content.
Learning the HTML 04 For example: We want to create an
HTML document named "index". So
we create a document named
"index.html" - with an ".AtmI"
extension.
HTML will allow you to add to your
website any element imaginable. You
can build:
* headings,
* paragraphs,
¢ forms,
¢ data tables,
¢ video and audio player,
¢ hyperlinks,
¢ graphics,
* and much more...
Learning the HTML 05 2. Tags
We already used some tags in the
previous lessons. Now we will take a
closer look at them. Here is an
example of a simple tag:
Header
What's important:
* - this an opening tag. The
browser will know that it should
interpret the following code as a
level 1 heading.
¢ Welcome - this is the text that will
be displayed as a level 1 heading
¢ - this is the closing tag. This is
the end of our heading
Everything we put between and
tags will be displayed as a level 1
heading.
Learning the HTML 06 There are some of different tags:
e - level 1 heading
- paragraph
e - hyperlink
- table
- section
- footer
¢ - important/bold text
¢ - navigation
These tags above are selected
examples of vast possibilities offered
by HTML.
Note that we write tag names in
lowercase - it’s for a convenience and
readability reasons.
Learning the HTML 07 Majority of HTML elements include
both opening and closing tags. That’s
because they usually include some
content inside e.g. text. There are also
special elements that use only an
opening tag. We sometimes call them
"self-closing elements".
Elements using both opening and
closing tags:
¢
- paragraph
e - heading h1
e This is the content.
Elements using only opening tags
(self-closing elements):
¢ tag. Take a
look at the code:
HTML Course
The title will be visible at the top of
the browser window. It is also visible in
the Google search results:
J G learn HTML - Google Search x ]
€ > C @ google.com/searc
The title is a very important element
for both the users of our website and
the search engines bots.
Learning the HTML N In the previous exercise you may have
noticed this declaration:
This is a paragraph
It’s simply a block of text surrounded
with tags. Usually it will include a
few sentences of text.
Here is the output of the above code:
This is a paragraph
Learning the HTML 13 In most cases you will also need some
headings. You can use them to declare
a title of the article or a section.
Here is an example of level 1 heading
(h1):
This is a level 1 heading
Headings usually are much shorter
than paragraphs - in most cases they
will contain a few words.
There six levels of headings available
in the HTML:
e Heading level 1
e Heading level 2
e Heading level 3
e Heading level 4
Heading level 5
Heading level 6
Learning the HTML 4 is the most important heading.
is the least important heading.
Heading level 1
Heading level 2
Heading level 3
Heading level 4
Heading level 5
Heading level 6
Some parts of the text need to be
emphasised:
DUES eae aa P RE MEn Lr aa Mae eae: Be
This text has been emphasised
Learning the HTML 15 You can emphasise the text by
wrapping it with or
tags.
This text is important.
This text has been emphasised.
Sometimes a piece of text needs to be
marked as a quotation or citation.
Take a look at the code:
"This is a great introduction to HTML"
That’s how it looks in the browser:
Here is the quote:
"This is a great introduction to HTML"
In most cases the text of the quotation
will be indented but in practice it’s
browser dependent.
Learning the HTML 16 5. Indentation and more
tags
You may have already noticed that we
indent tags that are placed inside
another tag. Take a look at the
example:
This is a paragraph
"It's a citation!"
<
p>This is another paragraph
What's the purpose of this
indentation?
We use the indentations to make our
code more readable. The browser will
ignore them anyway.
Learning the HTML 17 But developers are another matter.
They need a clean code that is easy to
read. That’s why you should always
properly indent every line of code.
In practice we use Spaces or Tabs to
add indentation.
We use the below tag to visually
separate two distinct sections. Take a
look:
bread
butter
False ee
go straight ahead
turn right
then turn left
Note that some elements are common
for both kinds of lists - namely the <\i>
tag.
Learning the HTML 20 7. Hyperlinks
Let’s a hyperlink to Google webpage.
Here is the code:
Google
The hyperlink usually looks like this:
Google
If we click on this link we will be
redirected to the Google homepage.
Let’s take a closer look at the hyperlink
code:
Google
Learning the HTML 21 ¢ Hyperlink text is alway wrapped
with tags.
¢ We always add a "href" attribute to
the opening tag ( ).
¢ We use the href attribute to
declare a URL - the address of the
webpage/document we will be
redirected to after clicking the link.
There are two basic kinds of
hyperlinks:
Google
Absolute hyperlink -
links to the external webpage e.g. We
need to provide the full domain name
e.g. http://google.com
Learning the HTML 22 Contact Page
Relative hyperlink -
links to the internal page or
document. We need to provide the
path to the document e.g.
contact.html
Learning the HTML 23 8. Images
Take a look at the code:
PER te Mepcoeee ttc pele eS
¢ img tag is self-closing. So we use
only an opening tag.
* src attribute is using to declare a
path to the image file.
So using this simple code we can
easily add the image to our webpage.
There is an additional, very important
attribute that you should always add
to every image:
- we use this tag to define
The Header
* - we use this tag to define
The Main Content
«
