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 Lists
• 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:

Faculty Name: Arvind Panwar 2

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

HTML Lists
• The CSS list-style-type property is used to define the style of the list
item marker.
• disc
• circle
• square
• none

Faculty Name: Arvind Panwar 3

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

HTML Ordered Lists

• 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:

Faculty Name: Arvind Panwar 4

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

HTML Ordered Lists

Faculty Name: Arvind Panwar 5

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

HTML 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:

Faculty Name: Arvind Panwar 6

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

HTML Block and Inline Elements

• Every HTML element has a default display value, depending on what
type of element it is.

• The two most common display values are block and inline.

Faculty Name: Arvind Panwar 7

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

HTML Block Elements

• A block-level element always starts on a new line, and the browsers
automatically add some space (a margin) before and after the element.
• A block-level element always takes up the full width available
(stretches out to the left and right as far as it can).
• Two commonly used block elements are: <p> and <div>.
• The <p> element defines a paragraph in an HTML document.
• The <div> element defines a division or a section in an HTML
document.

Faculty Name: Arvind Panwar 8

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

HTML Block Elements

Here are the block-level elements in HTML:

Faculty Name: Arvind Panwar 9

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

HTML Inline Elements

• An inline element does not start on a new line.
• An inline element only takes up as much width as necessary.

• Here are the inline elements in HTML:

Faculty Name: Arvind Panwar 10

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

HTML Div Element

• The <div> element is used as a container for other HTML elements.
• The <div> element is by default a block element, meaning that it takes
all available width, and comes with line breaks before and after.

Faculty Name: Arvind Panwar 11

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

<div> as a container
• The <div> element is often used to group sections of a web page
together.

Faculty Name: Arvind Panwar 12

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

Center align a <div> element

• If you have a <div> element that is not 100% wide, and you want to
center-align it, set the CSS margin property to auto.

Faculty Name: Arvind Panwar 13

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

Multiple <div> elements

• you can have many <div> containers on the same page.

Faculty Name: Arvind Panwar 14

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

Aligning <div> elements side by side

Faculty Name: Arvind Panwar 15

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

HTML class Attribute

• The HTML class attribute is used to specify a class for an HTML
element.
• Multiple HTML elements can share the same class.
• The class attribute is often used to point to a class name in a style sheet.
It can also be used by a JavaScript to access and manipulate elements
with the specific class name.
• In the following example we have three <div> elements with a class
attribute with the value of "city". All of the three <div> elements will be
styled equally according to the .city style definition in the head section:

Faculty Name: Arvind Panwar 16

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

HTML class Attribute

Faculty Name: Arvind Panwar 17

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

HTML class Attribute

• In the following example we have two <span> elements with a class
attribute with the value of "note". Both <span> elements will be styled
equally according to the .note style definition in the head section:

Tip: The class attribute can be used on any HTML element.

Note: The class name is case sensitive!

Faculty Name: Arvind Panwar 18

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

Multiple Classes
• HTML elements can belong to more than one class.
• To define multiple classes, separate the class names with a space, e.g.
<div class="city main">. The element will be styled according to all the
classes specified.
• In the following example, the first <h2> element belongs to both the
city class and also to the main class, and will get the CSS styles from
both of the classes:

Faculty Name: Arvind Panwar 19

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

Multiple Classes

Faculty Name: Arvind Panwar 20

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

HTML id Attribute
• The HTML id attribute is used to specify a unique id for an HTML element.
• You cannot have more than one element with the same id in an HTML
document.
• The id attribute specifies a unique id for an HTML element. The value of
the id attribute must be unique within the HTML document.
• The id attribute is used to point to a specific style declaration in a style
sheet. It is also used by JavaScript to access and manipulate the element
with the specific id.
• The syntax for id is: write a hash character (#), followed by an id name.
Then, define the CSS properties within curly braces {}.
Faculty Name: Arvind Panwar 21
 School of Computer Science Engineering
Course Name: Web Technology Program Name: B.Tech.

HTML id Attribute
• In the following example we have an <h1> element that points to the id
name "myHeader". This <h1> element will be styled according to the
#myHeader style definition in the head section:

Faculty Name: Arvind Panwar 22

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

Difference Between Class and ID

• A class name can be used by multiple HTML elements, while an id
name must only be used by one HTML element within the page:

Faculty Name: Arvind Panwar 23

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

HTML Iframes
• An HTML iframe is used to display a web page within a web page.
• The HTML <iframe> tag specifies an inline frame.
• An inline frame is used to embed another document within the current
HTML document.

Faculty Name: Arvind Panwar 24

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

HTML - The Head Element

• The <head> element is a container for metadata (data about data) and is
placed between the <html> tag and the <body> tag.

• HTML metadata is data about the HTML document. Metadata is not

displayed.

• Metadata typically define the document title, character set, styles,

scripts, and other meta information.

Faculty Name: Arvind Panwar 25

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

HTML - The Head Element

• HTML <title> Element
• The <title> element defines the title of the document. The title must be
text-only, and it is shown in the browser's title bar or in the page's tab.
• The <title> element is required in HTML documents!
• The content of a page title is very important for search engine
optimization (SEO)! The page title is used by search engine algorithms
to decide the order when listing pages in search results.

Faculty Name: Arvind Panwar 26

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

HTML - The Head Element

• The HTML <style> Element
• The <style> element is used to define style information for a single
HTML page:

Faculty Name: Arvind Panwar 27

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

HTML - The Head Element

• HTML <link> Element
• The <link> element defines the relationship between the current
document and an external resource.
• The <link> tag is most often used to link to external style sheets:

Faculty Name: Arvind Panwar 28

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

HTML <meta> Element

• The <meta> element is typically used to specify the character set, page
description, keywords, author of the document, and viewport settings.

• The metadata will not be displayed on the page, but is used by browsers
(how to display content or reload page), by search engines (keywords),
and other web services.

Faculty Name: Arvind Panwar 29

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

HTML <meta> Element

Faculty Name: Arvind Panwar 30

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

HTML <meta> Element

Faculty Name: Arvind Panwar 31

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

HTML <meta> Element

• Example of meta

Faculty Name: Arvind Panwar 32

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

HTML Layout Elements

• <header> - Defines a header for a document or a section
• <nav> - Defines a set of navigation links
• <section> - Defines a section in a document
• <article> - Defines an independent, self-contained content
• <aside> - Defines content aside from the content (like a sidebar)
• <footer> - Defines a footer for a document or a section

Faculty Name: Arvind Panwar 33

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

HTML Layout Techniques

• There are four different techniques to create multicolumn layouts. Each
technique has its pros and cons:

• CSS framework
• CSS float property
• CSS flexbox
• CSS grid

Faculty Name: Arvind Panwar 34

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

HTML Responsive Web Design

• Responsive web design is about creating web pages that look good on
all devices!
• A responsive web design will automatically adjust for different screen
sizes and viewports.

Faculty Name: Arvind Panwar 35

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

HTML Entities
• HTML Character Entities
• Some characters are reserved in HTML.
• If you use the less than (<) or greater than (>) signs in your HTML text,
the browser might mix them with tags.
• Entity names or entity numbers can be used to display reserved HTML
characters.
• Entity names look like this:

Faculty Name: Arvind Panwar 36

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

HTML Entities

Faculty Name: Arvind Panwar 37