Website Design &
Development
LESSON [4] – HTML - HYPER TEXT MARKUP LANGUAGE
HTML WEBSITE DESIGN & DEVELOPMENT 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 Web pages using markup
HTML elements are the building blocks of HTML pages
HTML elements are represented by tags
HTML tags label pieces of content such as "heading", "paragraph", "table", and so on
HTML WEBSITE DESIGN & DEVELOPMENT 2
A Simple HTML Document
HTML WEBSITE DESIGN & DEVELOPMENT 3
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 data (information about the html page
itself. Metadata is not displayed) 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
HTML WEBSITE DESIGN & DEVELOPMENT 4
HTML Page Structure
HTML WEBSITE DESIGN & DEVELOPMENT 5
Headings are defined with the <h1> to <h6> tags.
<h1> (biggest) defines the most important heading. <h6> defines the least
important heading.
HTML WEBSITE DESIGN & DEVELOPMENT 6
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:
HTML WEBSITE DESIGN & DEVELOPMENT 7
The HTML <p> element defines a paragraph:
The HTML <br> element defines a line break.
Setting the style of an HTML element, can be done with the style attribute.
The background-color property defines the background color for an HTML
element.
HTML WEBSITE DESIGN & DEVELOPMENT 8
The color property defines the text color for an HTML element:
HTML WEBSITE DESIGN & DEVELOPMENT 9
The font-family property defines the font to be used for an HTML element:
HTML WEBSITE DESIGN & DEVELOPMENT 10
The font-size property defines the text size for an HTML
element:
HTML WEBSITE DESIGN & DEVELOPMENT 11
The text-align property defines the horizontal text alignment for an HTML
element:
Code
HTML WEBSITE DESIGN & DEVELOPMENT 12
HTML Formatting Elements
Formatting elements were designed to display special types of text:
▪ <b> - Bold text
▪ <strong> - Important text
▪ <i> - Italic text <em> - Emphasized text
▪ <mark> - highlight the text
▪ <small> - Small text
▪ <del> - Deleted text
▪ <ins> - Inserted text
▪ <sub> - Subscript text
▪ <sup> - Superscript text
HTML WEBSITE DESIGN & DEVELOPMENT 13
HTML comment Tags
You can add comments to your HTML source by using the following syntax:
<!-- Write your comments here -->
Notice that there is an exclamation point (!) in the opening tag, but not in the closing tag.
HTML WEBSITE DESIGN & DEVELOPMENT 14
Note: Comments are not displayed by the browser, but they can help document your HTML
source code.
<!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- Remember to add more information here -->
<!-- This is not displayed on the page
<p> Hello </p>
-->
HTML WEBSITE DESIGN & DEVELOPMENT 15
HTML Links
Links are found in nearly all web pages. Links allow users to click their way
from page to page.
HTML links are hyperlinks.
➢ You can click on a link and jump to another document or a web page.
In HTML, links are defined with the <a> tag:
HTML WEBSITE DESIGN & DEVELOPMENT 16
Syntax
<a href="url">link text</a>
Example
<a href="https://www.imdb.com/">Visit our HTML tutorial</a>
The href attribute specifies the destination address (https://www.imdb.com) of the link.
The link text is the visible part.
HTML WEBSITE DESIGN & DEVELOPMENT 17
Access the local files
<a href="file:///c:\program files">2. Access the local
computer files.</a>
HTML WEBSITE DESIGN & DEVELOPMENT 18
HTML Images
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 location of the image:
Syntax
<img src="url">
HTML WEBSITE DESIGN & DEVELOPMENT 19
Image example
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
e, or if the user uses a screen reader).
Example :
<img src="img_chania.jpg" alt="Flowers in Chania">
HTML WEBSITE DESIGN & DEVELOPMENT 20
Image Size - Width and Height
You can use the style attribute to specify the width and height of an image.
<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">
HTML WEBSITE DESIGN & DEVELOPMENT 21
Image Size - Width and Height
Alternatively, you can also use the width and height.
<img src="img_china.jpg" alt="Girl in a jacket" width="500" height="600">
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.
HTML WEBSITE DESIGN & DEVELOPMENT 22
Width and Height, or Style?
Use the style attribute. It prevents other styles sheets from changing/overriding
the size of images:
HTML WEBSITE DESIGN & DEVELOPMENT 23
Background image
To add a background image on an HTML element, use the CSS property background-image:
By default the background image will repeat itself if it is smaller than the element where it is specified,
in this case the BODY element.
HTML WEBSITE DESIGN & DEVELOPMENT 24
HTML Lists (n^)
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:
HTML WEBSITE DESIGN & DEVELOPMENT 25
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:
HTML WEBSITE DESIGN & DEVELOPMENT 26
HTML Colors
Color names Code
HTML WEBSITE DESIGN & DEVELOPMENT 27
RGB Value
◦ In HTML, a color can also 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.
HTML Color Code Builder :
http://html-color-codes.info/
HTML WEBSITE DESIGN & DEVELOPMENT 28
Color Values
In HTML, colors can also be specified using RGB values, HEX values, HSL values, RGBA values,
and HSLA values:
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.
HTML WEBSITE DESIGN & DEVELOPMENT 29
rgb(255, 99, 71)
HTML WEBSITE DESIGN & DEVELOPMENT 30
CSS - 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
HTML WEBSITE DESIGN & DEVELOPMENT 31
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:
HTML WEBSITE DESIGN & DEVELOPMENT 32
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:
HTML WEBSITE DESIGN & DEVELOPMENT 33
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:
HTML WEBSITE DESIGN & DEVELOPMENT 34
Styles.css
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.
Styles.css
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
HTML WEBSITE DESIGN & DEVELOPMENT 35
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.
HTML WEBSITE DESIGN & DEVELOPMENT 36
CSS Border
◦ The CSS border property defines a border around an HTML element:
HTML WEBSITE DESIGN & DEVELOPMENT 37
HTML Link Colors
◦ An unvisited link is underlined and blue
◦ A visited link is underlined and purple
◦ An active(hover) link is underlined and red
◦ You can change the default colors, by using styles:
HTML WEBSITE DESIGN & DEVELOPMENT 38
HTML WEBSITE DESIGN & DEVELOPMENT 39
HTML Images (D)
◦ 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.
HTML WEBSITE DESIGN & DEVELOPMENT 40
Images in Another Folder
Images on Another Server
HTML WEBSITE DESIGN & DEVELOPMENT 41
Using an Image as a Link
◦ To use an image as a link, simply nest the <img> tag inside the <a> tag:
HTML WEBSITE DESIGN & DEVELOPMENT 42
Image Floating
HTML WEBSITE DESIGN & DEVELOPMENT 43
HTML Table
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.
HTML WEBSITE DESIGN & DEVELOPMENT 44
HTML WEBSITE DESIGN & DEVELOPMENT 45
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 WEBSITE DESIGN & DEVELOPMENT 46
HTML Table - Adding a Border
HTML WEBSITE DESIGN & DEVELOPMENT 47
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.
HTML WEBSITE DESIGN & DEVELOPMENT 48
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:
HTML WEBSITE DESIGN & DEVELOPMENT 49
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:
Note: If the table has collapsed borders, border-spacing has no effect.
HTML WEBSITE DESIGN & DEVELOPMENT 50
Table Background colour
CSS
HTML
HTML WEBSITE DESIGN & DEVELOPMENT 51
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>
HTML WEBSITE DESIGN & DEVELOPMENT 52
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;
}
HTML WEBSITE DESIGN & DEVELOPMENT 53
To add a caption to a table, use the <caption> tag:
HTML WEBSITE DESIGN & DEVELOPMENT 54
Create the following table
HTML WEBSITE DESIGN & DEVELOPMENT 55
HTML Block and Inline Elements
Block-level Elements
◦ A block-level element always starts on a new line and takes up the full width available (stretches out to
the left and right as far as it can).
◦ Examples of block-level elements:
◦ <div>
◦ <h1> - <h6>
◦ <p>
◦ <form>
HTML WEBSITE DESIGN & DEVELOPMENT 56
The <div> element is a block-level element. And will start on a new line.
HTML WEBSITE DESIGN & DEVELOPMENT 57
Inline Elements
An inline element does not start on a new line and only takes up as much width as necessary.
Examples of inline elements:
◦ <span>
◦ <a>
◦ <img>
HTML WEBSITE DESIGN & DEVELOPMENT 58
The SPAN element is an inline element, and will not start on a
new line.
HTML WEBSITE DESIGN & DEVELOPMENT 59
The <div> Element
◦ The <div> element is often used as a container for other HTML elements.
◦ The <div> element has no required attributes, but both style and class are common.
◦ When used together with CSS, the <div> element can be used to style blocks of
content:
HTML WEBSITE DESIGN & DEVELOPMENT 60
The <span> Element
◦ The <span> element is often used as a container for some text.
◦ The <span> element has no required attributes, but both style and class are
common.
HTML WEBSITE DESIGN & DEVELOPMENT 61
HTML The class Attribute
The HTML class attribute makes it possible to define equal styles for elements
with the same class name.
Here we have three <div> elements that point to the same class name:
HTML WEBSITE DESIGN & DEVELOPMENT 62
HTML WEBSITE DESIGN & DEVELOPMENT 63
HTML Iframes
An iframe is used to display a web page within a web page.
HTML WEBSITE DESIGN & DEVELOPMENT 64
HTML Layouts
Websites often display content in multiple columns (like a magazine or
newspaper).HTML5 offers new semantic elements that define the different parts
of a web page:
•<header> - Defines a header for a document or a section
•<nav> - Defines a container for navigation links
•<section> - Defines a section in a document
•<article> - Defines an independent self-contained article
•<aside> - Defines content aside from the content (like a sidebar)
•<footer> - Defines a footer for a document or a section
•<details> - Defines additional details
•<summary> - Defines a heading for the <details> element
HTML WEBSITE DESIGN & DEVELOPMENT 65
HTML Computer Code Elements
HTML WEBSITE DESIGN & DEVELOPMENT 66
HTML Symbols
HTML entities were described in the previous chapter.
Many mathematical, technical, and currency symbols, are not present on a
normal keyboard.
To add such symbols to an HTML page, you can use an HTML entity name.
HTML WEBSITE DESIGN & DEVELOPMENT 67
HTML WEBSITE DESIGN & DEVELOPMENT 68
HTML Forms
The HTML <form> element defines a form that is used
to collect user input:
HTML Forms are required when you want to collect
some data from the site visitor. For example during user
registration you would like to collect information such
as name, email address, credit card, etc.
HTML WEBSITE DESIGN & DEVELOPMENT 69
HTML WEBSITE DESIGN & DEVELOPMENT 70
HTML Form Controls
There are different types of form controls that you can use to collect data using HTML form:
◦ Text Input Controls
◦ Checkboxes Controls
◦ Radio Box Controls
◦ Select Box Controls
◦ File Select boxes
◦ Hidden Controls
◦ Clickable Buttons
◦ Submit and Reset Button
HTML WEBSITE DESIGN & DEVELOPMENT 71
Text Input Controls
There are three types of text input used on forms:
◦ Single-line text input controls -
◦ Password input controls -
◦ Multi-line text input controls -
HTML WEBSITE DESIGN & DEVELOPMENT 72
Checkbox Control
◦ Checkboxes are used when more than one option is required to be selected. They
are also created using HTML <input> tag but type attribute is set to checkbox.
HTML WEBSITE DESIGN & DEVELOPMENT 73
Radio Button Control
◦ Radio buttons are used when out of many options, just one option is required to
be selected. They are also created using HTML <input> tag but type attribute is set
to radio.
HTML WEBSITE DESIGN & DEVELOPMENT 74
Select Box Control
◦ A select box, also called drop down box which provides option to list down various
options in the form of drop down list, from where a user can select one or more
options.
HTML WEBSITE DESIGN & DEVELOPMENT 75
File Upload Box
◦ If you want to allow a user to upload a file to your web site, you will need to use a
file upload box, also known as a file select box. This is also created using the <input>
element but type attribute is set to file.
HTML WEBSITE DESIGN & DEVELOPMENT 76
HTML WEBSITE DESIGN & DEVELOPMENT 77
HTML WEBSITE DESIGN & DEVELOPMENT 78
Create the following form
HTML WEBSITE DESIGN & DEVELOPMENT 79
HTML Embed Multimedia
Sometimes you need to add music or video into your web page.
The easiest way to add video or sound to your web site is to include the special
HTML tag called <embed>.
This tag causes the browser itself to include controls for the multimedia
automatically provided browser supports <embed> tag and given media type.
You can also include a <noembed> tag for the browsers which don't recognize
the <embed> tag.
You could, for example, use <embed> to display a movie of your choice, and
<noembed> to display a single JPG image if browser does not support <embed>
tag.
HTML WEBSITE DESIGN & DEVELOPMENT 80
HTML WEBSITE DESIGN & DEVELOPMENT 81
Supported Video Types
◦ You can use various media types like Flash movies (.swf), AVI's (.avi), and
MOV's (.mov) file types inside embed tag.
◦ .swf files - are the file types created by Macromedia's Flash program.
◦ .wmv files - are Microsoft's Window's Media Video file types.
◦ .mov files - are Apple's Quick Time Movie format.
◦ .mpeg files - are movie files created by the Moving Pictures Expert Group.
HTML WEBSITE DESIGN & DEVELOPMENT 82
Background Audio
HTML WEBSITE DESIGN & DEVELOPMENT 83
HTML Marquees
An HTML marquee is a scrolling piece of text displayed either horizontally
across or vertically down your webpage depending on the settings. This is
created by using HTML <marquees> tag.
HTML WEBSITE DESIGN & DEVELOPMENT 84
Any Questions ?
The End..!!
HTML WEBSITE DESIGN & DEVELOPMENT 85
