Scribd
Upload
6 views

HTML

HTML (Hyper Text Markup Language) is the standard markup language for creating web pages, consisting of elements represented by tags that define the structure and content of a page. A simple HTML document includes a doctype declaration, root element, head for metadata, and body for visible content, with various tags for headings, paragraphs, links, and images. HTML attributes provide additional information about elements, and the document structure is crucial for both user experience and search engine indexing.

Uploaded by

Luwiyz Killåh Xrd
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
6 views

HTML

HTML (Hyper Text Markup Language) is the standard markup language for creating web pages, consisting of elements represented by tags that define the structure and content of a page. A simple HTML document includes a doctype declaration, root element, head for metadata, and body for visible content, with various tags for headings, paragraphs, links, and images. HTML attributes provide additional information about elements, and the document structure is crucial for both user experience and search engine indexing.

Uploaded by

Luwiyz Killåh Xrd
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 61

HTML

Sehemu ya Kwanza

1
HTML Introduction
What is HTML?
HTML is the standard markup language for creating Web pages.

• HTML stands for Hyper Text Markup Language


• HTML describes the structure of a Web page
• HTML consists of a series of elements
• HTML elements tell the browser how to display the content
• HTML elements are represented by tags
• HTML tags label pieces of content such as "heading", "paragraph",
"table", and so on
• Browsers do not display the HTML tags, but use them to render the
content of the page

A Simple HTML Document


Example
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>

Example Explained
• The <!DOCTYPE html> declaration defines this document to be HTML5
• The <html> element is the root element of an HTML page
• The <head> element contains meta information about the document
• The <title> element specifies a title for the document
• The <body> element contains the visible page content
• The <h1> element defines a large heading
• The <p> element defines a paragraph

2
HTML Tags
HTML tags are element names surrounded by angle brackets:

<tagname>content goes here...</tagname>

• HTML tags normally come in pairs like <p> and </p>


• The first tag in a pair is the start tag, the second tag is the end tag
• The end tag is written like the start tag, but with a forward
slash inserted before the tag name

Tip: The start tag is also called the opening tag, and the end tag
the closing tag.

Web Browsers
The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read
HTML documents and display them.

The browser does not display the HTML tags, but uses them to determine
how to display the document:

3
HTML Page Structure
Below is a visualization of an HTML page structure:

Note: Only the content inside the <body> section (the white area above) is
displayed in a browser.

The <!DOCTYPE> Declaration


The <!DOCTYPE> declaration represents the document type, and helps browsers
to display web pages correctly.

It must only appear once, at the top of the page (before any HTML tags).

The <!DOCTYPE> declaration is not case sensitive.

The <!DOCTYPE> declaration for HTML5 is:

<!DOCTYPE html>

HTML Versions

4
Since the early days of the web, there have been many versions of HTML:

Version Year

HTML 1991

HTML 2.0 1995

HTML 3.2 1997

HTML 4.01 1999

XHTML 2000

HTML5 2014

HTML Editors
Write HTML Using Notepad or TextEdit
Web pages can be created and modified by using professional HTML editors.

However, for learning HTML we recommend a simple text editor like Notepad
(PC) or TextEdit (Mac).

We believe using a simple text editor is a good way to learn HTML.

Follow the steps below to create your first web page with Notepad or
TextEdit.

5
Step 1: Open Notepad (PC)
Windows 8 or later:

Open the Start Screen (the window symbol at the bottom left on your
screen). Type Notepad.

Windows 7 or earlier:

Open Start > Programs > Accessories > Notepad

Step 1: Open TextEdit (Mac)


Open Finder > Applications > TextEdit

Also change some preferences to get the application to save files


correctly. In Preferences > Format > choose "Plain Text"

Then under "Open and Save", check the box that says "Display HTML files as
HTML code instead of formatted text".

Then open a new document to place the code.

Step 2: Write Some HTML


Write or copy some HTML into Notepad.

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

6
Step 3: Save the HTML Page
Save the file on your computer. Select File > Save as in the Notepad menu.

Name the file "index.htm" and set the encoding to UTF-8 (which is the
preferred encoding for HTML files).

You can use either .htm or .html as file extension. There is no difference, it is
up to you.

Step 4: View the HTML Page in Your


Browser
Open the saved HTML file in your favorite browser (double click on the file, or
right-click - and choose "Open with").

The result will look much like this:

7
HTML Basic Examples
Don't worry if these examples use tags you have not learned.

You will learn about them in the next chapters.

HTML Documents

8
All HTML documents must start with a document type declaration: <!DOCTYPE
html>.

The HTML document itself begins with <html> and ends with </html>.

The visible part of the HTML document is between <body> and </body>.

Example
<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>

HTML Headings
HTML headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important
heading:

Example
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>

HTML Paragraphs
HTML paragraphs are defined with the <p> tag:

Example
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

HTML Links
HTML links are defined with the <a> tag:

9
Example
<a href="https://www.w3schools.com">This is a link</a>

The link's destination is specified in the href attribute.

Attributes are used to provide additional information about HTML elements.

You will learn more about attributes in a later chapter.

HTML Images
HTML images are defined with the <img> tag.

The source file (src), alternative text (alt), width, and height are provided as
attributes:

Example
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">

HTML Buttons
HTML buttons are defined with the <button> tag:

Example
<button>Click me</button>

HTML Lists
HTML lists are defined with the <ul> (unordered/bullet list) or
the <ol> (ordered/numbered list) tag, followed by <li> tags (list items):

Example
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

<ol>

10
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

HTML Elements
HTML Elements
An HTML element usually consists of a start tag and an end tag, with the
content inserted in between:

<tagname>Content goes here...</tagname>


The HTML element is everything from the start tag to the end tag:

<p>My first paragraph.</p>

11
Nested HTML Elements

Start tag Element content End tag

<h1> My First Heading </h1>

<p> My first paragraph. </p>

<br>

HTML elements can be nested (elements can contain elements).

All HTML documents consist of nested HTML elements.

This example contains four HTML elements:

Example
<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

12
</body>
</html>

Example Explained
The <html> element defines the whole document.

It has a start tag <html> and an end tag </html>.

Inside the <html> element is the <body> element.

The <body> element defines the document body.

It has a start tag <body> and an end tag </body>.

Inside the <body> element is two other HTML elements: <h1> and <p>.

The <h1> element defines a heading.

It has a start tag <h1> and an end tag </h1>.

The element content is: My First Heading.

The <p> element defines a paragraph.

It has a start tag <p> and an end tag </p>.

The element content is: My first paragraph.

Do Not Forget the End Tag


Some HTML elements will display correctly, even if you forget the end tag

Empty HTML Elements


HTML elements with no content are called empty elements.

<br> is an empty element without a closing tag (the <br> tag defines a line
break):

Example
<p>This is a <br> paragraph with a line break.</p>

13
Empty elements can be "closed" in the opening tag like this: <br />.

HTML5 does not require empty elements to be closed. But if you want stricter
validation, or if you need to make your document readable by XML parsers,
you must close all HTML elements properly.

HTML Is Not Case Sensitive


HTML tags are not case sensitive: <P> means the same as <p>.

The HTML5 standard does not require lowercase tags, but


W3C recommends lowercase in HTML, and demands lowercase for stricter
document types like XHTML.

HTML Attributes
Attributes provide additional information about HTML elements.

HTML Attributes
• All HTML elements can have attributes
• Attributes provide additional information about an element
• Attributes are always specified in the start tag
• Attributes usually come in name/value pairs like: name="value"

The href Attribute


HTML links are defined with the <a> tag. The link address is specified in
the href attribute:

Example
<a href="https://www.w3schools.com">This is a link</a>

You will learn more about links and the <a> tag later in this tutorial.

The src Attribute


HTML images are defined with the <img> tag.

The filename of the image source is specified in the src attribute:

14
Example
<img src="img_girl.jpg">

The width and height Attributes


HTML images also have width and height attributes, which specifies the width
and height of the image:

Example
<img src="img_girl.jpg" width="500" height="600">

The width and height are specified in pixels by default; so width="500"


means 500 pixels wide.

You will learn more about images in our HTML Images chapter.

The alt Attribute


The alt attribute specifies an alternative text to be used, if an image cannot
be displayed.

The value of the alt attribute can be read by screen readers. This way,
someone "listening" to the webpage, e.g. a vision impaired person, can
"hear" the element.

Example
<img src="img_girl.jpg" alt="Girl with a jacket">

The alt attribute is also useful if the image cannot be displayed (e.g. if it
does not exist):

The style Attribute


The style attribute is used to specify the styling of an element, like color,
font, size etc.

Example
<p style="color:red">This is a paragraph.</p>
Try it Yourself »

15
You will learn more about styling later in this tutorial, and in our CSS
Tutorial.

The lang Attribute


The language of the document can be declared in the <html> tag.

The language is declared with the lang attribute.

Declaring a language is important for accessibility applications (screen


readers) and search engines:

<!DOCTYPE html>
<html lang="en-US">
<body>

...

</body>
</html>

The first two letters specify the language (en). If there is a dialect, add two
more letters (US).

The title Attribute


Here, a title attribute is added to the <p> element. The value of the title
attribute will be displayed as a tooltip when you mouse over the paragraph:

Example
<p title="I'm a tooltip">
This is a paragraph.
</p>

We Suggest: Use Lowercase Attributes


The HTML5 standard does not require lowercase attribute names.

16
The title attribute can be written with uppercase or lowercase
like title or TITLE.

W3C recommends lowercase in HTML, and demands lowercase for stricter


document types like XHTML.

At W3Schools we always use lowercase attribute names.

We Suggest: Quote Attribute Values


The HTML5 standard does not require quotes around attribute values.

The href attribute, demonstrated above, can be written without quotes:

Bad
<a href=https://www.w3schools.com>

Good
<a href="https://www.w3schools.com">

W3C recommends quotes in HTML, and demands quotes for stricter


document types like XHTML.

Sometimes it is necessary to use quotes. This example will not display the
title attribute correctly, because it contains a space:

Example
<p title=About W3Schools>

Using quotes are the most common. Omitting quotes can produce errors.
At W3Schools we always use quotes around attribute values.

Single or Double Quotes?


Double quotes around attribute values are the most common in HTML, but
single quotes can also be used.

In some situations, when the attribute value itself contains double quotes, it
is necessary to use single quotes:

17
<p title='John "ShotGun" Nelson'>

Or vice versa:

<p title="John 'ShotGun' Nelson">

HTML Attributes
Below is an alphabetical list of some attributes often used in HTML, which
you will learn more about in this tutorial:

Attribute Description

alt Specifies an alternative text for an image, when the


image cannot be displayed

disabled Specifies that an input element should be disabled

href Specifies the URL (web address) for a link

id Specifies a unique id for an element

src Specifies the URL (web address) for an image

style Specifies an inline CSS style for an element

title Specifies extra information about an element (displayed as a


tool tip)

18
A complete list of all attributes for each HTML element, is listed in our: HTML
Attribute Reference.

Chapter Summary
• All HTML elements can have attributes
• The title attribute provides additional "tool-tip" information
• The href attribute provides address information for links
• The width and height attributes provide size information for images
• The alt attribute provides text for screen readers
• At W3Schools we always use lowercase attribute names
• At W3Schools we always quote attribute values

The HTML <head> Element


The HTML <head> element is a container for metadata. HTML metadata is data
about the HTML document. Metadata is not displayed.

The <head> element is placed between the <html> tag and the <body> tag:

Example
<!DOCTYPE html>
<html>

<head>
<title>My First HTML</title>
<meta charset="UTF-8">
</head>

19
<body>
.
.
.

HTML Headings
Headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important
heading.

Example
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Note: Browsers automatically add some white space (a margin) before and
after a heading.

Headings Are Important


Search engines use the headings to index the structure and content of your
web pages.

Users often skim a page by its headings. It is important to use headings to


show the document structure.

<h1> headings should be used for main headings, followed by <h2> headings,
then the less important <h3>, and so on.

Note: Use HTML headings for headings only. Don't use headings to make
text BIG or bold.

20
Bigger Headings
Each HTML heading has a default size. However, you can specify the size for
any heading with the style attribute, using the CSS font-size property:

Example
<h1 style="font-size:60px;">Heading 1</h1>

HTML Paragraphs
The HTML <p> element defines a paragraph:

Example
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

Note: Browsers automatically add some white space (a margin) before and
after a paragraph.

HTML Horizontal Rules


The <hr> tag defines a thematic break in an HTML page, and is most often
displayed as a horizontal rule.

The <hr> element is used to separate content (or define a change) in an HTML
page:

Example
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>

21
HTML Line Breaks
The HTML <br> element defines a line break.

Use <br> if you want a line break (a new line) without starting a new
paragraph:

Example
<p>This is<br>a paragraph<br>with line breaks.</p>

HTML Display
You cannot be sure how HTML will be displayed.

Large or small screens, and resized windows will create different results.

With HTML, you cannot change the output by adding extra spaces or extra
lines in your HTML code.

The browser will remove any extra spaces and extra lines when the page is
displayed:

Example
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>

<p>
This paragraph
contains a lot of spaces
in the source code,
but the browser
ignores it.
</p>

Jisomeeni vifuatavyo:

22
HTML Comments
HTML Formatting
HTML Quotations

How to View HTML Source?


Have you ever seen a Web page and wondered "Hey! How did they do that?"

View HTML Source Code:


Right-click in an HTML page and select "View Page Source" (in Chrome) or
"View Source" (in Edge), or similar in other browsers. This will open a
window containing the HTML source code of the page.

Inspect an HTML Element:


Right-click on an element (or a blank area), and choose "Inspect" or "Inspect
Element" to see what elements are made up of (you will see both the HTML
and the CSS). You can also edit the HTML or CSS on-the-fly in the Elements
or Styles panel that opens.

23
HTML

Sehemu ya Pili

24
HTML Colors
Angalizo: Kwa kuwa document hii itakuwa printed black and white, rangi
zinazoonyeshwa hapa hazitoonekana. Tembelea tovuti kwa uhalisia zaidi

HTML colors are specified using predefined color names, or RGB, HEX,
HSL, RGBA, HSLA values.

Color Names
In HTML, a color can be specified by using a color name:

Tomato

Orange

DodgerBlue, etc

HTML supports 140 standard color names.

Background Color
You can set the background color for HTML elements:

Hello World

Baba anakula ugali na bamia. Mama anakula ugali na dagaaa. Watoto


wanakula wali na kachumbari. Familia nzima ina furaha. Furaha ni muhimu
katika malezi ya Watoto. Wote tule vizuri na kushiba.

Example
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;"> Baba anakula ugali...</p>

25
Text Color
You can set the color of text:

Hello World
Baba anakula ugali na bamia. Mama anakula ugali na dagaaa. Watoto
wanakula wali na kachumbari..

Familia nzima ina furaha. Furaha ni muhimu katika malezi ya Watoto. Wote
tule vizuri na kushiba.

Example
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Baba anakula...</p>
<p style="color:MediumSeaGreen;">Familia nzima...</p>

Border Color
You can set the color of borders:

Hello World
Hello World
Hello World
Example
<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>

26
Color Values
In HTML, colors can also be specified using RGB values, HEX values, HSL
values, RGBA values, and HSLA values:

Same as color name "Tomato":

rgb(255, 99, 71)

#ff6347

hsl(9, 100%, 64%)


Same as color name "Tomato", but 50% transparent:

Example
<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>

<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>


<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>

RGB Value
In HTML, a color can be specified as an RGB value, using this formula:

rgb(red, green, blue)


Each parameter (red, green, and blue) defines the intensity of the color
between 0 and 255.

For example, rgb(255, 0, 0) is displayed as red, because red is set to its


highest value (255) and the others are set to 0.

To display black, set all color parameters to 0, like this: rgb(0, 0, 0).

27
To display white, set all color parameters to 255, like this: rgb(255, 255,
255).

Experiment by mixing the RGB values below:

rgb(255, 99, 71)

RED

255

GREEN

99

BLUE

71

HEX Value
In HTML, a color can be specified using a hexadecimal value in the form:

#rrggbb
Where rr (red), gg (green) and bb (blue) are hexadecimal values between 00
and ff (same as decimal 0-255).

For example, #ff0000 is displayed as red, because red is set to its highest
value (ff) and the others are set to the lowest value (00).

Example

#ff0000

#0000ff

28
#3cb371

HSL Value
In HTML, a color can be specified using hue, saturation, and lightness (HSL)
in the form:

hsl(hue, saturation, lightness)


Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and
240 is blue.

Saturation is a percentage value, 0% means a shade of gray, and 100% is


the full color.

Lightness is also a percentage, 0% is black, 50% is neither light or dark,


100% is white

Example

hsl(0, 100%, 50%)

hsl(240, 100%, 50%)

hsl(147, 50%, 47%)

RGBA Value
RGBA color values are an extension of RGB color values with an alpha
channel - which specifies the opacity for a color.

An RGBA color value is specified with:

29
rgba(red, green, blue, alpha)
The alpha parameter is a number between 0.0 (fully transparent) and 1.0
(not transparent at all):

Example

rgba(255, 99, 71, 0)

rgba(255, 99, 71, 0.2)

rgba(255, 99, 71, 1)

HSLA Value
HSLA color values are an extension of HSL color values with an alpha channel
- which specifies the opacity for a color.

An HSLA color value is specified with:

hsla(hue, saturation, lightness, alpha)


The alpha parameter is a number between 0.0 (fully transparent) and 1.0
(not transparent at all):

Example

hsla(9, 100%, 64%, 0)

hsla(9, 100%, 64%, 0.2)

30
hsla(9, 100%, 64%, 1)

HTML File Paths


Path Description

<img src="picture.jpg"> picture.jpg is located in the same


folder as the current page

<img src="images/picture.jpg"> picture.jpg is located in the images


folder in the current folder

<img src="/images/picture.jpg"> picture.jpg is located in the images


folder at the root of the current web

<img src="../picture.jpg"> picture.jpg is located in the folder


one level up from the current folder

HTML File Paths


A file path describes the location of a file in a web site's folder structure.

File paths are used when linking to external files like:

• Web pages
• Images
• Style sheets
• JavaScripts

31
Absolute File Paths
An absolute file path is the full URL to an internet file:

Example
<img src="https://www.w3schools.com/images/picture.jpg" alt="Mountain">

The <img> tag is explained in the chapter about HTML Images.

Relative File Paths


A relative file path points to a file relative to the current page.

In this example, the file path points to a file in the images folder located at
the root of the current web:

Example
<img src="/images/picture.jpg" alt="Mountain">

In this example, the file path points to a file in the images folder located in
the current folder:

Example
<img src="images/picture.jpg" alt="Mountain">

In this example, the file path points to a file in the images folder located in
the folder one level above the current folder:

Example
<img src="../images/picture.jpg" alt="Mountain">

32
HTML Links
Links are found in nearly all web pages. Links allow users to click their
way from page to page.

HTML Links - Hyperlinks


HTML links are hyperlinks.

You can click on a link and jump to another document.

When you move the mouse over a link, the mouse arrow will turn into a little
hand.

Note: A link does not have to be text. It can be an image or any other HTML
element.

HTML Links - Syntax


Hyperlinks are defined with the HTML <a> tag:

<a href="url">link text</a>

Example
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>

The href attribute specifies the destination address


(https://www.w3schools.com/html/) of the link.

The link text is the visible part (Visit our HTML tutorial).

Clicking on the link text will send you to the specified address.

Note: Without a forward slash at the end of subfolder addresses, you might
generate two requests to the server. Many servers will automatically add a
forward slash to the end of the address, and then create a new request.

Local Links
The example above used an absolute URL (a full web address).

33
A local link (link to the same web site) is specified with a relative URL
(without https://www....).

Example
<a href="html_images.asp">HTML Images</a>

HTML Links - The target Attribute


The target attribute specifies where to open the linked document.

The target attribute can have one of the following values:

• _blank - Opens the linked document in a new window or tab


• _self - Opens the linked document in the same window/tab as it was
clicked (this is default)
• _parent - Opens the linked document in the parent frame
• _top - Opens the linked document in the full body of the window
• framename - Opens the linked document in a named frame

This example will open the linked document in a new browser window/tab:

Example
<a href="https://www.w3schools.com/" target="_blank">Visit
W3Schools!</a>

Tip: If your webpage is locked in a frame, you can use target="_top" to


break out of the frame:

Example
<a href="https://www.w3schools.com/html/" target="_top">HTML5
tutorial!</a>

HTML Links - Image as Link


It is common to use images as links:

34
Example
<a href="default.asp">
<img src="smiley.gif" alt="HTML
tutorial" style="width:42px;height:42px;border:0;">
</a>

Note: border:0; is added to prevent IE9 (and earlier) from displaying a


border around the image (when the image is a link).

Link Titles
The title attribute specifies extra information about an element. The
information is most often shown as a tooltip text when the mouse moves
over the element.

Example
<a href="https://www.w3schools.com/html/" title="Go to W3Schools HTML
section">Visit our HTML Tutorial</a>

External Paths
External pages can be referenced with a full URL or with a path relative to
the current web page.

This example uses a full URL to link to a web page:

Example
<a href="https://www.w3schools.com/html/default.asp">HTML tutorial</a>

This example links to a page located in the html folder on the current web
site:

Example
<a href="/html/default.asp">HTML tutorial</a>

35
This example links to a page located in the same folder as the current page:

Example
<a href="default.asp">HTML tutorial</a>

Summary
• Use the <a> element to define a link
• Use the href attribute to define the link address
• Use the target attribute to define where to open the linked document
• Use the <img> element (inside <a>) to use an image as a link

HTML Images
Images can improve the design and the appearance of a web page.

Example
<img src="pic_trulli.jpg" alt="Italian Trulli">

Example
<img src="img_girl.jpg" alt="Girl in a jacket">

Example
<img src="img_chania.jpg" alt="Flowers in Chania">

36
HTML Images Syntax
In HTML, images are defined with the <img> tag.

The <img> tag is empty, it contains attributes only, and does not have a
closing tag.

The src attribute specifies the URL (web address) of the image:

<img src="url">

The alt Attribute


The alt attribute provides an alternate text for an image, if the user for some
reason cannot view it (because of slow connection, an error in the src
attribute, or if the user uses a screen reader).

The value of the alt attribute should describe the image:

Example
<img src="img_chania.jpg" alt="Flowers in Chania">

If a browser cannot find an image, it will display the value of


the alt attribute:

Example
<img src="wrongname.gif" alt="Flowers in Chania">

Note: The alt attribute is required. A web page will not validate correctly
without it.

Validation ni njia ya kuhakikisha kuwa web yako imeandikwa kwa kufuata


misingi yote ya HMTL 5. Tutaongea zaidi darasani

Image Size - Width and Height


You can use the style attribute to specify the width and height of an image.

37
Example
<img src="img_girl.jpg" alt="Girl in a
jacket" style="width:500px;height:600px;">

Alternatively, you can use the width and height attributes:

Example
<img src="img_girl.jpg" alt="Girl in a
jacket" width="500" height="600">

The width and height attributes always defines the width and height of the
image in pixels.

Note: Always specify the width and height of an image. If width and height
are not specified, the page might flicker while the image loads.

Width and Height, or Style?


The width, height, and style attributes are valid in HTML.

However, we suggest using the style attribute. It prevents styles sheets from
changing the size of images:

Example
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 100%;
}
</style>
</head>
<body>

<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">


<img src="html5.gif" alt="HTML5
Icon" style="width:128px;height:128px;">

</body>
</html>

38
Images in Another Folder
If not specified, the browser expects to find the image in the same folder as
the web page.

However, it is common to store images in a sub-folder. You must then


include the folder name in the src attribute:

Example
<img src="/images/html5.gif" alt="HTML5
Icon" style="width:128px;height:128px;">

Images on Another Server


Some web sites store their images on image servers.

Actually, you can access images from any web address in the world:

Example
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3
Schools.com">

Animated Images
HTML allows animated GIFs:

Example
<img src="programming.gif" alt="Computer
Man" style="width:48px;height:48px;">

Image as a Link
To use an image as a link, put the <img> tag inside the <a> tag:

39
Example
<a href="default.asp">
<img src="smiley.gif" alt="HTML
tutorial" style="width:42px;height:42px;border:0;">
</a>

Note: border:0; is added to prevent IE9 (and earlier) from displaying a


border around the image (when the image is a link).

Image Floating
Use the CSS float property to let the image float to the right or to the left of
a text:

Example
<p><img src="smiley.gif" alt="Smiley
face" style="float:right;width:42px;height:42px;">
The image will float to the right of the text.</p>

<p><img src="smiley.gif" alt="Smiley


face" style="float:left;width:42px;height:42px;">
The image will float to the left of the text.</p>

Tip: To learn more about CSS Float, read our CSS Float Tutorial.

HTML Screen Readers


A screen reader is a software program that reads the HTML code, converts
the text, and allows the user to "listen" to the content. Screen readers are
useful for people who are visually impaired or learning disabled.

Summary
• Use the HTML <img> element to define an image
• Use the HTML src attribute to define the URL of the image

40
• Use the HTML alt attribute to define an alternate text for an image, if it
cannot be displayed
• Use the HTML width and height attributes to define the size of the image
• Use the CSS width and height properties to define the size of the image
(alternatively)
• Use the CSS float property to let the image float

Loading images takes time. Large images can slow down your page. Use
images carefully.

41
HTML

Sehemu ya Tatu

42
HTML Styles - CSS
CSS = Styles and Colors
M a n i p u l a t e T e x t
C o l o r s , B o x e s

Styling HTML with CSS


CSS stands for Cascading Style Sheets.

CSS describes how HTML elements are to be displayed on screen,


paper, or in other media.

CSS saves a lot of work. It can control the layout of multiple web pages all
at once.

CSS can be added to HTML elements in 3 ways:

• Inline - by using the style attribute in HTML elements


• Internal - by using a <style> element in the <head> section
• External - by using an external CSS file

The most common way to add CSS, is to keep the styles in separate CSS
files. However, here we will use inline and internal styling, because this is
easier to demonstrate, and easier for you to try it yourself.

Inline CSS
An inline CSS is used to apply a unique style to a single HTML element.

An inline CSS uses the style attribute of an HTML element.

This example sets the text color of the <h1> element to blue:

Example
<h1 style="color:blue;">This is a Blue Heading</h1>

43
Internal CSS
An internal CSS is used to define a style for a single HTML page.

An internal CSS is defined in the <head> section of an HTML page, within


a <style> element:

Example
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

External CSS
An external style sheet is used to define the style for many HTML pages.

With an external style sheet, you can change the look of an entire
web site, by changing one file!

To use an external style sheet, add a link to it in the <head> section of the
HTML page:

Example
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>

44
<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

An external style sheet can be written in any text editor. The file must not
contain any HTML code, and must be saved with a .css extension.

Here is how the "styles.css" looks:

body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}

CSS Fonts
The CSS color property defines the text color to be used.

The CSS font-family property defines the font to be used.

The CSS font-size property defines the text size to be used.

Example
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>

45
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

CSS Border
The CSS border property defines a border around an HTML element:

Example
p {
border: 1px solid powderblue;
}

CSS Padding
The CSS padding property defines a padding (space) between the text and the
border:

Example
p {
border: 1px solid powderblue;
padding: 30px;
}

CSS Margin
The CSS margin property defines a margin (space) outside the border:

Example
p {
border: 1px solid powderblue;

46
margin: 50px;
}

The id Attribute
To define a specific style for one special element, add an id attribute to the
element:

<p id="p01">I am different</p>

then define a style for the element with the specific id:

Example
#p01 {
color: blue;
}

Note: The id of an element should be unique within a page, so the id selector


is used to select one unique element!

The class Attribute


To define a style for special types of elements, add a class attribute to the
element:

<p class="error">I am different</p>

then define a style for the elements with the specific class:

Example
p.error {
color: red;
}

47
External References
External style sheets can be referenced with a full URL or with a path relative
to the current web page.

This example uses a full URL to link to a style sheet:

Example
<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css"
>

This example links to a style sheet located in the html folder on the current
web site:

Example
<link rel="stylesheet" href="/html/styles.css">

This example links to a style sheet located in the same folder as the current
page:

Example
<link rel="stylesheet" href="styles.css">

Summary
• Use the HTML style attribute for inline styling
• Use the HTML <style> element to define internal CSS
• Use the HTML <link> element to refer to an external CSS file
• Use the HTML <head> element to store <style> and <link> elements
• Use the CSS color property for text colors
• Use the CSS font-family property for text fonts
• Use the CSS font-size property for text sizes
• Use the CSS border property for borders
• Use the CSS padding property for space inside the border
• Use the CSS margin property for space outside the border

48
HTML Tables
HTML Table Example

Company Contact Region

Virungu Kampani Asha Baraka Mbeya

Mbogamboga Vikoba Bangi Michael Mara

Mwenge Security Waisiko Ezekiel Mwanza

Mlima Trading Mwita Waitara Singida

Mvinyo Mtamu James Wilson Dodoma

Amazing School Giovanni Rovelli Arusha

Defining an HTML Table


An HTML table is defined with the <table> tag.

Each table row is defined with the <tr> tag. A table header is defined with
the <th> tag. By default, table headings are bold and centered. A table
data/cell is defined with the <td> tag.

Example
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>

49
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>

Note: The <td> elements are the data containers of the table.
They can contain all sorts of HTML elements; text, images, lists, other tables,
etc.

HTML Table - Adding a Border


If you do not specify a border for the table, it will be displayed without
borders.

A border is set using the CSS border property:

Example
table, th, td {
border: 1px solid black;
}

Remember to define borders for both the table and the table cells.

HTML Table - Collapsed Borders


If you want the borders to collapse into one border, add the CSS border-
collapse property:

Example
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}

50
HTML Table - Adding Cell Padding
Cell padding specifies the space between the cell content and its borders.

If you do not specify a padding, the table cells will be displayed without
padding.

To set the padding, use the CSS padding property:

Example
th, td {
padding: 15px;
}

HTML Table - Left-align Headings


By default, table headings are bold and centered.

To left-align the table headings, use the CSS text-align property:

Example
th {
text-align: left;
}

HTML Table - Adding Border Spacing


Border spacing specifies the space between the cells.

To set the border spacing for a table, use the CSS border-spacing property:

Example
table {
border-spacing: 5px;
}

Note: If the table has collapsed borders, border-spacing has no effect.

51
HTML Table - Cells that Span Many
Columns
To make a cell span more than one column, use the colspan attribute:

Example
<table style="width:100%">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>55577854</td>
<td>55577855</td>
</tr>
</table>

HTML Table - Cells that Span Many Rows


To make a cell span more than one row, use the rowspan attribute:

Example
<table style="width:100%">
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
</table>

52
HTML Table - Adding a Caption
To add a caption to a table, use the <caption> tag:

Example
<table style="width:100%">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>

Note: The <caption> tag must be inserted immediately after the <table> tag.

A Special Style for One Table


To define a special style for a special table, add an id attribute to the table:

Example
<table id="t01">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>

53
Now you can define a special style for this table:
table#t01 {
width: 100%;
background-color: #f1f1c1;
}

And add more styles:


table#t01 tr:nth-child(even) {
background-color: #eee;
}
table#t01 tr:nth-child(odd) {
background-color: #fff;
}
table#t01 th {
color: white;
background-color: black;
}

Summary
• Use the HTML <table> element to define a table
• Use the HTML <tr> element to define a table row
• Use the HTML <td> element to define a table data
• Use the HTML <th> element to define a table heading
• Use the HTML <caption> element to define a table caption
• Use the CSS border property to define a border
• Use the CSS border-collapse property to collapse cell borders
• Use the CSS padding property to add padding to cells
• Use the CSS text-align property to align cell text
• Use the CSS border-spacing property to set the spacing between cells
• Use the colspan attribute to make a cell span many columns
• Use the rowspan attribute to make a cell span many rows
• Use the id attribute to uniquely define one table

54
HTML Lists
HTML List Example
An Unordered List:
• Item
• Item
• Item
• Item

An Ordered List:
1. First item
2. Second item
3. Third item
4. Fourth item

Unordered HTML List


An unordered list starts with the <ul> tag. Each list item starts with
the <li> tag.

The list items will be marked with bullets (small black circles) by default:

Example
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Unordered HTML List - Choose List Item


Marker
The CSS list-style-type property is used to define the style of the list item
marker:

55
Value Description

disc Sets the list item marker to a bullet (default)

circle Sets the list item marker to a circle

square Sets the list item marker to a square

none The list items will not be marked

Example - Disc
<ul style="list-style-type:disc;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>

Example - Circle
<ul style="list-style-type:circle;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Example - Square
<ul style="list-style-type:square;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Example - None
<ul style="list-style-type:none;">
<li>Coffee</li>
<li>Tea</li>

56
<li>Milk</li>
</ul>

Ordered HTML List


An ordered list starts with the <ol> tag. Each list item starts with
the <li> tag.

The list items will be marked with numbers by default:

Example
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Try it Yourself »

Ordered HTML List - The Type Attribute


The type attribute of the <ol> tag, defines the type of the list item marker:

Type Description

type="1" The list items will be numbered with numbers (default)

type="A" The list items will be numbered with uppercase letters

type="a" The list items will be numbered with lowercase letters

57
type="I" The list items will be numbered with uppercase roman
numbers

type="i" The list items will be numbered with lowercase roman


numbers

Numbers:
<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

Uppercase Letters:
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

Lowercase Letters:
<ol type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

Uppercase Roman Numbers:


<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

Lowercase Roman Numbers:


<ol type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

58
HTML Description Lists
HTML also supports description lists.

A description list is a list of terms, with a description of each term.

The <dl> tag defines the description list, the <dt> tag defines the term
(name), and the <dd> tag describes each term:

Example
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

Nested HTML Lists


List can be nested (lists inside lists):

Example
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>

Note: List items can contain new list, and other HTML elements, like images
and links, etc.

Control List Counting


By default, an ordered list will start counting from 1. If you want to start
counting from a specified number, you can use the start attribute:

59
Example
<ol start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

Horizontal List with CSS


HTML lists can be styled in many different ways with CSS.

One popular way is to style a list horizontally, to create a navigation menu:

Example
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}

li {
float: left;
}

li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}

li a:hover {
background-color: #111111;
}
</style>
</head>
<body>

60
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

</body>
</html>

Summary
• Use the HTML <ul> element to define an unordered list
• Use the CSS list-style-type property to define the list item marker
• Use the HTML <ol> element to define an ordered list
• Use the HTML type attribute to define the numbering type
• Use the HTML <li> element to define a list item
• Use the HTML <dl> element to define a description list
• Use the HTML <dt> element to define the description term
• Use the HTML <dd> element to describe the term in a description list
• Lists can be nested inside lists
• List items can contain other HTML elements
• Use the CSS property float:left or display:inline to display a list
horizontally

61

You might also like