Scribd
Upload
8 views45 pages

HTML - 060216

Uploaded by

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

HTML - 060216

Uploaded by

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

HTML

Introduction
• HyperText Markup Language (HTML) is a
markup language used to display a text
document on the web.
• Markup language is a set of markup
tags.
• These documents are interpreted by web
browsers such as Internet Explorer,
Mozilla Firefox, Google Chrome, Safari,
Opera, etc.
© K.S. Mbise HTML Slide 2
HTML tags
• An HTML tag is a command placed
between angle brackets – a left
bracket (<) and a right bracket (>).
• Tags come in pairs, with text or a
graphic image located between the
opening and closing tags.
• Tags are what we use to structure an
HTML page.
© K.S. Mbise HTML Slide 3
HTML tags cont…
• E.g., the center tag is <center>.
• To stop centering something, we need
an ending or closing tag.
• Closing tags look exactly like opening
tags, except after the first < there is a
/.
• In other words, the closing tag for
center is </center>.
© K.S. Mbise HTML Slide 4
HTML tags cont…
• An HTML document has a definite
structure that must be specified to the
browser.
• The HTML's beginning and end must
be defined, as well as the document's
head and body.

© K.S. Mbise HTML Slide 5


HTML tags cont…
• head – contains information for the
browser for head elements such as
title, meta, etc.
• body – contains the text that will
appear in the browser's main window.
• The use and order of tags that define
the HTML structure are described on
next slide.
© K.S. Mbise HTML Slide 6
HTML tags cont…
• Syntax of HTML document:
<html>
<head>
<title> ... </title>
</head>
<body> ... </body>
</html>

© K.S. Mbise HTML Slide 7


HTML tags cont…
• The <head> element is a container for
all the head elements.
• The <head> element must include a
title for the document, and can include
scripts, styles, meta information, etc.
• The <meta> tag provides metadata
(not displayed on page) about the
HTML document.
© K.S. Mbise HTML Slide 8
HTML tags cont…
• <meta name="keywords" content="HTML,
CSS, XHTML, JavaScript"> - defines
keywords for search engines
• <meta name="description" content="IAA is
a higher learning …"> - defines a
description of your web page.
• <meta http-equiv="refresh" content="30">
- refreshes document every 30 seconds.

© K.S. Mbise HTML Slide 9


HTML tags cont…
• <title> ... </title> has the following
functions:
• gives an HTML document a title that
appears on the browser title bar,
• displays a title for the page in search-
engine results,
• provides a title for the page when it is
bookmarked.
© K.S. Mbise HTML Slide 10
HTML tags cont…
• <body> tag defines the body of an
HTML document.
• Text contained within the <body> …
</body> tags appears in the main
browser window.
• <body> can be used with "bgcolor",
"text", "link", and "vlink" attributes.
• E.g., <body text="blue">
© K.S. Mbise HTML Slide 11
HTML tags cont…
• <!-- ... --> delimiters are used for
comments - not visible on the web
page.
• <h1> ... </h1> heading tag, <h1>
through <h6> are valid.
• <p> ... </p> sets a paragraph apart
from other text.

© K.S. Mbise HTML Slide 12


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

© K.S. Mbise HTML Slide 13


HTML attributes cont…
• Examples of attributes
• <html lang="en-US">, the lang declares
the language for the document.
• <body bgcolor="green">, the bgcolor
sets the background colour of the web
page to green.
• <img src="logo.png">, the src locates
where the image is stored.

© K.S. Mbise HTML Slide 14


HTML attributes cont…
• Attribute values should always be
enclosed in quotes.
• Double style quotes are the most
common, but single style quotes are
also allowed.
• Attribute names and attribute values
are case-insensitive.

© K.S. Mbise HTML Slide 15


HTML formatting
• If you use a word processor, you must
be familiar with the ability to make text
bold, italicized, underlined,
superscripted, subscripted, etc.
• The following tags are used for
character formatting in the body of an
HTML document only.

© K.S. Mbise HTML Slide 16


HTML formatting cont…
• Bold <b> text </b>
• Italicized <i> text </i>
• Underlined text <u> text </u>
• superscript 29<sup>th </sup>
November, 2021
• subscript log<sub>2 </sub>
© K.S. Mbise HTML Slide 17
Fonts in HTML
• Fonts play a very important role in
making a website more user friendly
and increasing content readability.
• The font tag in HTML is a simple but
powerful tag with only three attributes.
• color – sets font color
• face – sets font face
• size – sets font size
© K.S. Mbise HTML Slide 18
Links
• The <a> tag defines a hyperlink, which
is used to link from one page to another.
• The most important attribute of the <a>
element is the href attribute, which
indicates the link's destination.
• <a href="https://www.iaa.ac.tz/"> link
label </a> creates a hypertext link to
IAA's homepage.
© K.S. Mbise HTML Slide 19
Inserting images
• The <img> tag defines an image in an
HTML page.
• <img src="filename.ext"> inserts a
graphic into the web page.
• src is a required attribute.
• "height", "width", "alt", "border" and
"align" are optional attributes.
© K.S. Mbise HTML Slide 20
HTML tables
• Tables are defined with the <table> tag.
• A table is divided into rows (with the
<tr> tag), and each row is divided into
data cells (with the <td> tag).
• td stands for "table data" and holds the
content of a data cell.
• A <td> tag can contain text, links,
images, lists, forms, other tables, etc.
© K.S. Mbise HTML Slide 21
HTML tables cont…
• Syntax of an HTML table:
• <table>
• <tr> Begining of first table row
• <td> .......</td> Table data
• </tr> End of first table row
• </table>
© K.S. Mbise HTML Slide 22
HTML tables cont…
• An example of HTML table
• <table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td></tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td> </tr>
</table>
© K.S. Mbise HTML Slide 23
HTML tables cont…
• <table> ... </table> creates table.
• Can be used with "border", "align",
and "width" attributes.
• <th> ... </th> table header.
• <th> can be used with "align",
"valign", "colspan", "rowspan", and
"width" attributes.
© K.S. Mbise HTML Slide 24
HTML tables cont…
• <td> ... </td> is used for table data.
• It can be used with "align", "valign",
"colspan", "rowspan", and "width"
attributes.
• E.g., the <colspan> attribute defines
the number of columns a cell should
span.

© K.S. Mbise HTML Slide 25


HTML forms
• HTML forms allow the user to supply
data to the web server.
• Forms are very important in supplying
data to database.
• The focus is on creating the form in
HTML so that it appears to the user
with input fields and descriptive text,
ready to be filled in.
© K.S. Mbise HTML Slide 26
Forms in HTML cont...
• When the form is submitted, the data
entered into the input fields is sent to
the web server.
• The web server processes the data and
takes appropriate action.
• The form provides the means for
processing the information entered in
form fields.
© K.S. Mbise HTML Slide 27
Forms in HTML cont...
• The form tag has two essential
attributes:
• action gives the name of the script
the data is to be sent to for
processing.
• method gives how data is to be
sent, which is the difficult
(programming) part of the form.
© K.S. Mbise HTML Slide 28
Forms in HTML cont...

This is the skeleton of the form
<form action ="login.php" method="post">
<input type= "text" name= "username"/>
<input type= "password" name= "password"/>
<input type="submit" name= "submit"/>
<input type="reset" name="reset"/>
</form>

© K.S. Mbise HTML Slide 29


Forms in HTML cont...
• The two specific input type statements use
the HTML keyword submit and reset both
of which create default buttons on the
screen.
• The reset button clears the form and starts
again at the top.
• The submit button wraps up the content
and sends it to a PHP script called
login.php
© K.S. Mbise HTML Slide 30
Forms in HTML cont...
• There are two options to the method
attribute.
i. get
ii. post

They can both be used to send data to
the web server, let us see how each of
them two works.

© K.S. Mbise HTML Slide 31


Forms in HTML cont...
• In method "get" – the input data are
appended to the URL of the processing
script and sent to the server when the
form is submitted.
• This method is primitive and suitable
only for very small amounts of form
data.
• It is deprecated nowadays.

© K.S. Mbise HTML Slide 32


Forms in HTML cont...

In method "post" – the input data are
sent to the server in a data body
following the HTTP request headers.

The server then passes the data to the
processing script through an input
mechanism.

This is the preferred method.

© K.S. Mbise HTML Slide 33


Input tag
• The input tag – creates boxes for
input.
• There are several types of INPUT tag:
1. type = "text" input – creates the
simple visible input text box.
• These boxes have a size.
• A set of name and value pairs are sent
to the script from each text box.

© K.S. Mbise HTML Slide 34


Input tag cont...
For example:
Name <input type="text" name="name"
size="40"/>
Address <input type="text"
name="address" size="40"/>
City, State, Zip <input type="text"
name="citystzip" size="40"/>
E-mail Address <input type="text"
name="username" size="40"/>
Telephone Number <input type="text"
name="phonenumber" size="12"/>
© K.S. Mbise HTML Slide 35
Input tag cont...
2. type="password" input – works the
same way as type=text; indicating
only dots to the user (but the script
sees all).
Example:
Password:<input type="password"
name="password"/>

© K.S. Mbise HTML Slide 36


Input tag cont...
3. type="radio" input – creates a bullet
selection. This has additional attribute
called checked and if present, this is
the radio button that starts out
selected.

The user can only pick one with the
same NAME, and that one will have
the VALUE assigned to the NAME and
sent.
© K.S. Mbise HTML Slide 37
Input tag cont...
For example:
• Credit card type
<input type="radio" name="creditcard" value
="visa" checked/> VISA
<input type="radio" name="creditcard"
value="mastercard"/>Mastercard
<input type="radio" name="creditcard"
value="amex"/> American Express

© K.S. Mbise HTML Slide 38


Input tag cont...
4. type= checkbox input – creates a little
box to check.
• In this case, the value represents the
data that will be sent if the box is
checked.

Unchecked boxes will not have a
name/value pairs.

© K.S. Mbise HTML Slide 39


Input tag cont...

Like the radio button, several check
boxes can have the same name, in
which case multiple pairs with the
same name will be sent.

If you don’t specify any value for the
box you will receive "on" as the
default.

© K.S. Mbise HTML Slide 40


Select tag

Creates a static or pull-down list of
multiple items from which the user can
select one or more.

This is a pair tag with starting and
ending elements.

The required attribute is name while
other attributes are optional.

© K.S. Mbise HTML Slide 41


Select tag cont...
• Example using <select> tag:
<select name="citytown" >
<option
value="Arusha">Arusha</option>
<option
value="Babati">Babati</option>
<option
value="Bukoba">Bukoba</option>
<option
© K.S. Mbise
value="Dodoma">Dodoma</option>
HTML Slide 42
HTML special characters
• Escapes sequences (character entities
or entity codes) are used to display
characters that have special meaning
in HTML as well as characters that
don't appear on your keyboard.
• Some characters that have special
uses or meanings for browsers may
not always appear as you intend in
your browser.
© K.S. Mbise HTML Slide 43
HTML special characters cont…
Character Description

&quot; Double quotation mark

&amp; Ampersand

&lt; Less than

&copy; Copyright (©)

&nbsp; Blank space

© K.S. Mbise HTML Slide 44


Thank you for listening!

© K.S. Mbise HTML Slide 45

You might also like