Scribd
Upload
4 views

HTML Notes + Examples

The document provides a comprehensive overview of HTML, explaining its structure, basic tags, and formatting options. It covers essential elements such as the <html>, <head>, and <body> tags, as well as text formatting, lists, hyperlinks, and images. Additionally, it highlights the importance of attributes in HTML tags and offers practical exercises for creating web pages.

Uploaded by

meronnkassaa25
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
4 views

HTML Notes + Examples

The document provides a comprehensive overview of HTML, explaining its structure, basic tags, and formatting options. It covers essential elements such as the <html>, <head>, and <body> tags, as well as text formatting, lists, hyperlinks, and images. Additionally, it highlights the importance of attributes in HTML tags and offers practical exercises for creating web pages.

Uploaded by

meronnkassaa25
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 49

HTML(Web design)

Gradi Mukwasa

PAGE 1
Document Structure

Text formatting and Font attributes

Main Topics Link

Image

Tables

PAGE 2
Introduction:
What is HTML?
As the name HyperText Markup Language indicates, HTML is a markup language, not a
programming language.

HTML allows a web author to organizeand define how content should be displayed,
which means it can do things like addtext formatting; make headings, lists, and tables;
and include images and links.You can think of an HTML file as an ordinary written
document that has been carefully annotated by the author.

The “HyperText” part of the HTML acronym refers to the way links on the Web allow
you to move from one document to another in a non-linear fashion.

Document Structure PAGE 3


Text formatting and Font attributes Links/Tables Tables
Document Structure
HTML consists of a series of elements also sometimes referred to as html tags. HTML
elements tell the browser how to display the content.
What is an html tag?

It is a code that describes how a webpage is formatted in html. Although HTML tags are
not visible to the end-user (i.e., the person viewing your website), they give the web
browser suggestions about how to format the content and how it should be displayed on
the page.

Document Structure PAGE 4


Text formatting and Font attributes Link/Images Tables
Rules of writing HTML tags
There are several HTML elements, and they are the building block of webpages. HTML
elements are used in the form of tags. The tags are angular brackets with HTML names
written inside them. Forexample, the HTML tag for image is <img/>. Most of these tags
have a closing tag like <p> and </p>. However, some tags, such as <img/> does not
require a closing tag.
1. HTML is not case sensitive
HTML tags are not case sensitive: <P> means the same as <p>.
You can either have your tag as lowercase or uppercase the order does not matter.

2. Never Skip the End Tag


Always close a tag with </> after an opening tag, however some tags do not have a
closing tag. These tags are referred to as empty tags or empty element (It will be
discussed more in detail later on).

Document structure PAGE 5


Text formatting and Font attributes Link/Images Tables
Basic HTML tags
Let's start with the most basic tag, i.e. <html> tag. Every HTML document starts with
<html> tag and ends with its corresponding closing tag, </html> tag. Other HTML tags
are nested inside this tag only.
Other two basic HTML tags are <head> and <body> tags. HTML files can render in a
browser. The visible part in the browser window is written inside the <body> tag. It can
contain several elements, such as paragraphs, headings, images, videos, sections,
divisions, etc.
Another basic tag is the <head> tag. All the information regarding the document is listed
in the <head> tag. It include HTML tags such as <link>, <title>, <meta>, <style>, etc. In
the early versions, the <head> tag was mandatory but in HTML 5 (HTML is the latest
version of HTML), It can be omitted.

Document structure PAGE 6


Text formatting and Font attributes Link/Images Tables
Document structure tags
As the name suggest, these are tags that are used for the structure of the document. This
can be categories into categories: Document Structure & Outline of document tags.
Outline of Document tags include:

Document tags:

Document structure PAGE 7


Text formatting and Font attributes Link/images Tables
Example of a basic HTML document

Figure 1.1 Figure 1.2

Document structure PAGE 8


Text formatting and Font attributes Link/Images Table
Document structure tags of the previous page explained:
You can run HTML documents in a browser. The <HTML> tag defines that, it is an
HTML document. But the browser needs to interpret the type of file. The <!DOCTYPE
html> is the declaration that informs the browser that it is an HTML document.
<!DOCTYPE html> is not an HTML tag. You must declare it at the top of every HTML
document. Also, to create an HTML file, you should save the file with the .html
extension.
The <html></html> it’s a tag which describes the root element of an HTML page.

The <head></head> it’s a tag which contains information about the HTML page.

The <title></title> it’s a tag which specifies a title for the HTML page (which is shown in
the browser's title bar or in the page's tab). It is always found in between the head tags.

Document Structure PAGE 9


Text formatting and Font attributes Link/Images Table
The <body></body> it’s a tag which defines the document's body, and is a container for
all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists,
etc.
The body is also where we make changes to the background, text color for the whole
document etc. Changes to the webpage’s background will be discussed more in detail
later.
The Heading tag (<h1, h2, h3,h4,h5,h6>) It is a tag that is used for formatting the
headings. A heading tag includes the heading together with the opening and closing tag to
show the size or level of the heading, for example 1 to 6.

Document Structure PAGE 10


Text formatting and Font attributes Link/Images Tables
Paragraph tag <p></p> this tag is used to create a new paragraph .
Horizontal line <HR /> this is a self closing tag (empty tag) used for adding an horizontal
line. Example:

Document Structure PAGE 11


Text formatting and Font attributes Link Conclusion
<u> tag is underling a text.
Lasltly, we have the <br/> just like the <hr/> tag it is also a self closing tag, meaning it has no
opening tag or closing tag. It is used to add a break to a sentence.
Exercise 1
Now you know about basic HTML tags. Go ahead and create your first HTML webpage. It
should look something like this:

Document Structure PAGE 12


Text formatting and Font attributes Link Tables
Text Formatting
While adding text in an HTML document, you may need to define special meaning
for some parts. By special meaning, I mean pointing out a part of the text that appears
different.

Text Formatting PAGE 13


Document structure Links/Images Tables
<b> and <strong> tags
The <b> tag defines bold text.

In the paragraph, one word, i.e. ‘Gradi' is enclosed within the <b>tag. The text enclosed
within the <b> tag is bold now. Similarly, there is another tag that behaves in the same. It
is called the <strong> tag.

Text formatting PAGE 14


Document Structure Links/Images Tables
The <strong> also makes the text bold.

You may not find any difference between <b> and <strong>, but the strong text has an extra
meaning while the bold don't.

Text Formatting PAGE 15


Document structure Links/Images Table
<i> and <em> tags
The <i> tag defines italic text.

In the paragraph above, The sentence ‘Football & Basketball' is enclosed within the <i> tag,
which makes the sentence Football & Basketball to be italic.
Similarly, there is another tag, <em>, which also define italic text, but with extra
importance. So, if we were to replace the <i> tag in the example above with <em> it would
look like:

Text formatting PAGE 16


Document Links/Images Tables
HTML Attributes

All the HTML tags are built for a specific purpose. For example, the <p> is used to for
paragraphs and <img/> is used for images. Most of the HTML tags have additional properties
or characteristicsthat are defined by attributes. A tag may or may not havemandatory
attributes. The <img/> tag, for example, must contain srcand alt attributes. Further, you can
place height and width attributes, but they are not mandatory. Have a look at the below
HTML code:

A <img> tag is defined with two attributes - src and alt. Value for an attribute is written inside
the double-quotes. As of now, these two attributes do not have any values.
Html attributes PAGE 17
Document structure Links/Images Tables
An attributes is used to add properties to a tag. It always goes inside the opening tag.

How to add an attribues:

<tag=“put the attribute here”> ………. </tag>

*The attribute given to a tag is always in “ ”quotetation marks and it always have an =
equal sign to go alone with it.

Examples of attributes are: BGCOLOR, TEXT, SRC, ALIGN, HEIGHT, WIDTH,


ALT, BORDER COLSPAN, ROWSPAN. These attributes will be discussed later. For
now, try to get the basic understanding of attributes.

Html attributes PAGE 18


Document structure Links/Image Table
Background-color (this is attributes not a tag)
Consider the example below let’s say we want to change the background
of the webpage below to light blue. How will we do that?

Html attributes PAGE 19


Document structure Links/Images Tables
* Note: every time you want make changes to the background it is done inside the body
tag.
<body bgcolor=“light blue">

* Notes sometimes bgcolor can be given it terms of the RGB codes. For example, the
RGB code for Light blue is #00ffff . However the process remains the same; <body
bgcolor=“#00ffff "> The result will be same. The RGB stands for Red, Green & Blue.
Color are originally made from Red, Green and Blue that’s why in coding it is refer to as
the RGB code.

Html attributes PAGE 20


Document structure Links/Images Tables
Font
By default, html comes with its own font type. I refer not to used the default font
type when creating a webpage, instead a use my own. How do I do that? Very
easy, I will apply the following tags:

<font color="red"> </font> For the font color

<font size="+8"> </font> For the font size (to increase the size)

<font face="arial"> </font> For the font type.

<!-- --> Comment tags allow you to place notes to yourself so that you can keep
track of elements embedded in your web pages. The web browser does not display
comments.
Html attributes PAGE 21
Document structure Links/Images Table
HTML Lists
There are two types of of HTML list:
• Unordered list (Bullet list)
• Ordered list e.g. a,b,c,d etc or i,ii,iii
Unordered (Bulleted list)

In order to create a bullet list you need to use <ul> tag. <ul> </ul>This tag is used to
specifie where the list will start. <ul> tag stands for Unordered List.

Html List PAGE 22


Document Structure Links/Images Tables
You can the format of the unordered list to either a circle or a square by adding the
following attritubes :

❑Type=“ Square” for a square ordered list.


o Type=“Circle” for a circle ordered list.

Html List PAGE 23


Document structure Links/Images Tables
Figure 2

In figurre 2 above I used the <ul> tag to specific where I want my list to start. Note that
in figure 2, there’s also the <li> tag.
<li> </li> tag is used to List item; you can specify at which number the list must start.
There Figure 2, will look like this on the webpage:
• Basketball
• Soceer
• Cricket

Html List PAGE 24


Document structure Links/Image Tables
Ordered list
<ol> </ol>
Ordered List works with different attributes. Those attributes are:
Type=“A” Upper-case or capital letters, for example A, B, C ...
Type=“a” Lower-case or small letters, for example a, b, c ...
Type=“I” Upper-case roman numerals, for example I, II,III ...
Type=“i" Lower-case roman numerals, for example i, ii, iii ...
Type=“1” Numbers, for example 1, 2, 3 ..

Html List PAGE 25


Document structure Links/Images Tables
Excerse 2:
You want to create list of my favourite sports in the following format:
i)
❑ Basketball
❑Soccer
❑Boxing
ii)
a) Basketball
b) Soccer
c) Boxing

Text formatting PAGE 26


Document structure Links/Images Tables
Solutions:
i)

ii)

Text formatting PAGE 27


Document structure Links/Images Tables
Hyperlink
There are multiple web pages on a website, right? We can navigate from one page to another.
The links in HTML allow a user to navigate from one web page to another. Such links in
HTML are called hyperlinks.

The <a> is used to create hyperlinks in HTML. In this chapter, we will discuss how to use
the <a> tag to move from one HTML document or web page to another. Its closing tag is
</a>.

<a> tag
The <a> tag has few attributes. One of these attributes - href, is a mandatory attribute that
holds the link of the document or web page that will open when clicked. Observe the syntax
of the <a> tag.

Links PAGE 28
Document structure Text formatting Tables
The URL should be written within the quotes. The text will appear on the screen and when
clicked on it, the URL specified for the href attribute will open. Observe the following
HTML code.

In the paragraph, the word - 'here' is a hyperlink. The href is 'https://google.com'. This means
the homepage of Google will open when clicked on the hyperlink.

Links PAGE 29
Document structure Text formatting Tables
You can also move locally from one HTML document to another. In the href attribute, you
have to provide the proper path for the document you want to navigate.

In the above <a> tag, the name of a document is specified that happens to be in the same
folder. Clicking on the hyperlink will open the demo.html document.

Links PAGE 30
Document structure Text formatting Tables
Target attribute (Not examinable by ieb)
The target attribute is an optional attribute of the <a> tag. It specifies where to open the
document or web page. It can have the following four values:
• _self : To open the document or web page in the same tab/window. The target is set to
_self by default.
• _blank : To open the document or web page in a new tab/window.
• _top : To open the document or web page in the full body of the window.
• _parent : To open the document or web page in the parent frame.

The hyperlink in the above paragraph will open in a new tab/window.

Links PAGE 31
Document structure Text formatting Tables
Images
Images are the most common part of a website after the text. Today, almost every
website you visit has images. Images improve the appearance of a website and attract
more audiences.

To simply add an image, use the <img> tag. Nonetheless, it is not always just about
adding an image. The image should have proper alignment, position, and size.
<img> tag
The <img> tag has the following syntax:

The <img> tag does not have a corresponding closing. (It does have a closing tag)
Image PAGE 32
Document structure Text formatting Links/Tables
The src attribute is mandatory because it holds the URL of the image. The image can be
present locally or it can be another server. Let's discuss how to add local images in an
HTML document.

Image PAGE 33
Document structure Text Formatting Links/Tables
Normally, in an exam situation are given an image that is found inside a sub folder
within the html document. In that case you will have to “mention” the name of that sub
folder in your html document. Let’s consider the following example:

Insert the image in the 5101-2pac-art.webp found in the Image sub folder.

Answer:

It is important to include the image file extension in your html document, otherwise it
won’t display in the web browser.
Image PAGE 34
Document structure Text Formatting Links/Tables
Image size
Have a look at the following image.

Let’s see how this image appears in the browser

Image PAGE 35
Document Structure Text Formatting Links/Tables
This is not how it should appear, right? So what do you think is wrong here? By
default, the size of the image appearing on the screen is the same as its actual size. This
image is huge in size and that is why only a portion of it is appearing on the screen. The
whole image can be seen by scrolling up and down.

To encounter such situations, the <img> tag has two attributes to set the width and height of
an image. They are simply called width and height.

Image PAGE 36
Document structure Text formatting Links/Table
The height and width are set to 30% and 50%, respectively.
Now, it looks much better.

Image PAGE 37
First Skill Text Formatting Links/Tables
alt attribute
The alt attribute is optional but it is recommended to use alt in every <img> tag.
Suppose, an image fails to load for some reason. Then what? Let's see

I added a few characters in the URL of the image to make it invalid

This does not look nice, right?

Image PAGE 38
First Skill Text Formatting Third Skill
Now, the user will know if there is a problem with image loading.

Image PAGE 39
First Skill Text Formatting Third Skill
Tables
Data on a web page should be represented in a proper manner. There are various ways of
representing data. We already discussed some of these ways, such as the <p> and <h1>
tags. But sometimes, we may need a better way to display data more accurately and clearly.
Tables are considered one of the best ways to represent data.

Tables arrange data in rows and columns. In HTML, the <table> tag is used to create a
table. There are few other tags and attributes that are necessary to create a proper table in
HTML. So, in this chapter we will discuss how to create a simple table in HTML.

Tables PAGE 40
Document structure Text formatting Links/Images
The <table> tag
The <table> tag alone does not display anything.

It only defines a table. We need to create rows and columns manually.

HTML has the <tr> tag and <td> tag to create a row and column, respectively.

Tables PAGE 41
Document structure Text formatting Links/Images
The <tr> and <td> tags
As mentioned, the <tr> tag creates a row. It is placed inside the <table> tag.

The above table has one row. Let's add two columns in this row using the <td> tag.

Tables PAGE 42
Document structure Text formatting Links/Images
So, this is how rows and columns are created in HTML. Let's add some content in each
column and see how the tables appear in the browser.

This does not look like a table, right? By default, a table in HTML does not have any border.
To add a border in the table we need to use the border attributes in the <table> tag:
< table border= “1” >, you chance the size to whatever number you want.

Tables PAGE 43
Document structure Text formatting Links/Images
Now it looks like a table. A second row is also added.

colspan and rowspan attributes


HTML also provides some nice attributes that could be used with tables. One of these
attributes is the colspan attribute.

The colspan attribute increases the span of a cell according to the value specified.

Tables PAGE 44
Document structure Text formatting Links/Images
The first cell of the first row has colspan of 2.

Tables PAGE 45
Document structure Text formatting Links/Images
You can see that the cell now covers the area of two columns. The colspan attribute
can have any value but it should be used carefully or the result can be an unpleasant
table. Similarly, the rowspan is used to increase the span of a row.

Tables PAGE 46
Document structure Text formatting Links/Images
The <th> tag
The <th> tag is used to create a header . It behaves like the <td> tag but the content
is bold.

Tables PAGE 47
Document structure Text formatting Links/Images
The <thead> and <tbody>
The <thead> and <tbody> tags are used to group the head part and the body of the
table.
The table created has three rows - first one has headers while the other two have
columns. So the first one can be written inside the <thead> tag and others can be
written inside the <tbody> tag.

Tables PAGE 48
Document structure Text formatting Links/Images
THE END

Tables PAGE 49
Document structure Text formatting Links/Images

You might also like