Scribd
Upload
42 views

WDD - Hyper Text Markup Language

The document provides an overview of HTML (Hypertext Markup Language) which is the standard markup language used to create web pages. It describes HTML elements as the building blocks of web pages, and provides examples of basic HTML page structure using elements like <html>, <head>, <title>, and <body>. It also covers other common HTML elements and tags for text formatting, links, images, and lists. The document introduces CSS (Cascading Style Sheets) which is used to define styles and layout for HTML elements.

Uploaded by

Duminda
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
42 views

WDD - Hyper Text Markup Language

The document provides an overview of HTML (Hypertext Markup Language) which is the standard markup language used to create web pages. It describes HTML elements as the building blocks of web pages, and provides examples of basic HTML page structure using elements like <html>, <head>, <title>, and <body>. It also covers other common HTML elements and tags for text formatting, links, images, and lists. The document introduces CSS (Cascading Style Sheets) which is used to define styles and layout for HTML elements.

Uploaded by

Duminda
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 85

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

You might also like