School of Computer Science Engineering

Course Name: Web Technology Program Name: B.Tech.

HTML

Faculty Name: Arvind Panwar

 School of Computer Science Engineering
Course Name: Web Technology Program Name: B.Tech.

HTML Quotation and Citation

• Blockquote- The HTML <blockquote> element defines a section
that is quoted from another source.

Faculty Name: Arvind Panwar 2

 School of Computer Science Engineering
Course Name: Web Technology Program Name: B.Tech.

HTML Quotation and Citation

• The HTML <q> tag defines a short quotation.

Faculty Name: Arvind Panwar 3

 School of Computer Science Engineering
Course Name: Web Technology Program Name: B.Tech.

HTML Quotation and Citation

• The HTML <abbr> tag defines an abbreviation or an acronym, like
"HTML", "CSS", "Mr.", "Dr.", "ASAP", "ATM".

• The HTML <address> tag defines the contact information for the
author/owner of a document or an article.

Faculty Name: Arvind Panwar 4

 School of Computer Science Engineering
Course Name: Web Technology Program Name: B.Tech.

HTML Quotation and Citation

• The HTML <cite> tag defines the title of a creative work (e.g. a
book, a poem, a song, a movie, a painting, a sculpture, etc.).

• The HTML <bdo> tag is used to override the current text direction:

Faculty Name: Arvind Panwar 5

 School of Computer Science Engineering
Course Name: Web Technology Program Name: B.Tech.

HTML Comments
• With comments you can place notifications and reminders in your
HTML code:
• Comments can be used to hide content.

Faculty Name: Arvind Panwar 6

 School of Computer Science Engineering
Course Name: Web Technology Program Name: B.Tech.

HTML Colors
• HTML colors are specified with predefined color names, or with RGB,
HEX, HSL, RGBA.
• RGB Color Values
• 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
with a value between 0 and 255.
• This means that there are 256 x 256 x 256 = 16777216 possible colors!
Faculty Name: Arvind Panwar 7
 School of Computer Science Engineering
Course Name: Web Technology Program Name: B.Tech.

HTML Colors
HEX Color Values
• 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 other two (green and blue) are set to 00.
• Another example, #00ff00 is displayed as green, because green is set to its highest
value (ff), and the other two (red and blue) are set to 00.
• To display black, set all color parameters to 00, like this: #000000.
• To display white, set all color parameters to ff, like this: #ffffff.
Faculty Name: Arvind Panwar 8
 School of Computer Science Engineering
Course Name: Web Technology Program Name: B.Tech.

HTML Colors
HSL Color Values
• 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 value. 0% is black, and 100% is white.
Faculty Name: Arvind Panwar 9
 School of Computer Science Engineering
Course Name: Web Technology Program Name: B.Tech.

HTML Colors
Background Color

Text Color

Border Color

Faculty Name: Arvind Panwar 10

 School of Computer Science Engineering
Course Name: Web Technology Program Name: B.Tech.

Color Values
• Color Values

Faculty Name: Arvind Panwar 11

 School of Computer Science Engineering
Course Name: Web Technology Program Name: B.Tech.

HTML Links
• 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.

Faculty Name: Arvind Panwar 12

 School of Computer Science Engineering
Course Name: Web Technology Program Name: B.Tech.

HTML Links
• HTML Links - The target Attribute
• By default, the linked page will be displayed in the current browser
window. To change this, you must specify another target for the link.
• The target attribute specifies where to open the linked document.
• The target attribute can have one of the following values:
• _self - Default. Opens the document in the same window/tab as it was
clicked
• _blank - Opens the document in a new window or tab
• _parent - Opens the document in the parent frame
Faculty Name: Arvind Panwar 13
 School of Computer Science Engineering
Course Name: Web Technology Program Name: B.Tech.

HTML Links
• HTML Links - Use an Image as a Link

• Link to an Email Address

• Button as a Link
• Link Titles

Faculty Name: Arvind Panwar 14

 School of Computer Science Engineering
Course Name: Web Technology Program Name: B.Tech.

HTML Images
• The HTML <img> tag is used to embed an image in a web page.
• Images are not technically inserted into a web page; images are linked to web
pages. The <img> tag creates a holding space for the referenced image.
• The <img> tag is empty, it contains attributes only, and does not have a closing
tag.
• The <img> tag has two required attributes:
• src - Specifies the path to the image
• alt - Specifies an alternate text for the image

Faculty Name: Arvind Panwar 15

 School of Computer Science Engineering
Course Name: Web Technology Program Name: B.Tech.

HTML Favicon
• A favicon image is displayed to the left of the page title in the browser
tab.
• To add a favicon to your website, either save your favicon image to the
root directory of your webserver, or create a folder in the root directory
called images, and save your favicon image in this folder. A common
name for a favicon image is "favicon.ico".
• Next, add a <link> element to your "index.html" file, after the <title>
element

Faculty Name: Arvind Panwar 16

 School of Computer Science Engineering
Course Name: Web Technology Program Name: B.Tech.

HTML Page Title

• Every web page should have a page title to describe the meaning of the
page.

Faculty Name: Arvind Panwar 17

 School of Computer Science Engineering
Course Name: Web Technology Program Name: B.Tech.

HTML Tables
• A table in HTML consists of table cells inside rows and columns.
• Table Cells: Each table cell is defined by a <td> and a </td> tag.
• Table Rows: Each table row starts with a <tr> and ends with a </tr> tag.

Faculty Name: Arvind Panwar 18

 School of Computer Science Engineering
Course Name: Web Technology Program Name: B.Tech.

HTML Table Borders

• To add a border, use the CSS border property on table, th, and td
elements.

Faculty Name: Arvind Panwar 19

 School of Computer Science Engineering
Course Name: Web Technology Program Name: B.Tech.

HTML Table Sizes

Faculty Name: Arvind Panwar 20

 School of Computer Science Engineering
Course Name: Web Technology Program Name: B.Tech.

HTML Table Headers

Faculty Name: Arvind Panwar 21

 School of Computer Science Engineering
Course Name: Web Technology Program Name: B.Tech.

HTML Table Padding & Spacing

• Cell Padding: Cell padding is the space between the cell edges and the
cell content.
• Cell Spacing: Cell spacing is the space between each cell. By default
the space is set to 2 pixels.

Faculty Name: Arvind Panwar 22

 School of Computer Science Engineering
Course Name: Web Technology Program Name: B.Tech.

HTML Table Padding & Spacing

• Cell Padding

Faculty Name: Arvind Panwar 23

 School of Computer Science Engineering
Course Name: Web Technology Program Name: B.Tech.

HTML Table Colspan & Rowspan

• HTML tables can have cells that span over multiple rows and/or
columns.

Faculty Name: Arvind Panwar 24

 School of Computer Science Engineering
Course Name: Web Technology Program Name: B.Tech.

HTML Table Colspan & Rowspan

Faculty Name: Arvind Panwar 25

 School of Computer Science Engineering
Course Name: Web Technology Program Name: B.Tech.

HTML Table Colspan & Rowspan

Faculty Name: Arvind Panwar 26