INTRODUCTION TO WEB DESIGN

AND HTML

KS UNIT-3
Client/Server Architecture

Server
 Web Client/ Web Server

Web Server
 Web server receives a client request, process the

request and give response to the client.

 Allows to host the web sites

Web Client
 A web client is an application that communicates with a
web server, using Hypertext Transfer Protocol (HTTP)
 Web browser is a software that acts as a web client.
Clients & Servers Example
Clients (Browser) Servers
 Internet Explorer  Apache
 Firefox  IIS Web Server.
 Mozilla  Litespeed server
 Netscape  Google Web
 Opera server(GWS)
 Amaya  Oracle iplanet
 AOL WebServer
 MSN
4
Web Essentials
 “Web”- short for “World Wide Web”
 A web page is a simple text file written in a markup language
(called HTML)
 A website is a group of HTML files that are stored on a
hosting computer which is permanently connected to the
internet
 URL - Uniform Resource Locator - used to indicate a
resource on the Internet
 Home page -The main page on a particular Web site or index
page
How the browser interacts with the
servers ?
 User enters the URL(Uniform Resource Locator) of the
website or file. The Browser then requests the DNS(DOMAIN
NAME SYSTEM) Server.
 DNS Server lookup for the address of the WEB Server.
 DNS Server responds with the IP address of the WEB Server.
 Browser sends over an HTTP/HTTPS request to WEB
Server’s IP (provided by DNS server).
 Server sends over the necessary files of the website.
 Browser then renders the files and the website is displayed.
This rendering is done with the help of DOM (Document
Object Model) interpreter, CSS interpreter and JS
Engine collectively known as the JIT or (Just in Time)
Compilers.
Domain Name, URL’s and IPs
 Uniform Resource Locator (URL):
 http://www.microsoft.com/faqs.html

 Domain name: The specific address of a computer

on the Internet
 microsoft.com

 Internet protocol (IP) address

 192.168.1.1
Structure of a Uniform Resource Locators

protocol pathname

http://www.chicagosymphony.org/civicconcerts/index.html

Domain name
filename

http => Hypertext Transfer Protocol

Mapping IP to Domain Name
Domain Name System – a mapping between the human-
readable name (domain name) of a host and its IP
address

http://www.kongu.edu/department/CSE/index.html

• http: – specifies the protocol

• www.kongu.edu – specifies the host name / domain name
• /department/CSE/index.html– specifies the path of the
document on the host
Internet Use
 Send e-mail messages.
 Send (upload) or receive (down load) files between
computers.
 Participate in discussion groups, such as mailing
lists and newsgroups.
 Surfing the web.
 Social media etc..
 Web Page - The Making of a Good Design

Content is important, but content alone

will not make your site work.

Good Design is:

 Understandable
 Interesting
 Easy to use
 Uniform in look and feel
 Done from a visitor’s point of view:
WYSIWYW (What You See Is What You
WANT)
Technologies & Tools

 Markup Languages
 HTML, XHTML, XML, XSLT, etc....
 Cascading Style Sheets (CSS)
 Scripting languages
 Client-side: javascript, VBScript
 Server-side: perl, NodeJS, php, JSP, Servlet etc....
 Web creation and editing software
 Notepad, FrontPage, Flash, Site Builder etc..
 Frameworks
 Angular JS
 React JS
Web Page Vs Website
 A Web page is a  A collection of related
document in the World web pages located
Wide Web that is under a single domain
identified uniquely by name.
a uniform resource  Called as Web Sites
locator (URL) and is
displayed in a web
browser

 Called as Pages
HTML-Hyper Text Markup Language

 To Create Web pages.

 Uses tags, to tell the Web browser software how to
display the text contained in the document
 HTML tags are not case sensitive
 HTML documents are described by HTML tags
 File Extension: .html, .htm, .xhtml
 Tools:
 Notepad, Notepad++[any text editor]
 Web Browsers (Internet Explorer, Firefox, Chrome,
etc..)
 HTML – Fundamentals
Document Structure

< HTML >

<Head> <!- optional tag - - >

<Body>

< / HTML>
HTML – Basic Structure
<html>

<head> <! - - optional tag- ->

<title> The title of your html page </title>
</head>

<body>
<! - - your web page content and markup - ->
</body>

</html>
Example

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>
Description
 The <!DOCTYPE html> declaration defines this
document to be HTML5
 The text between <html> and </html> describes an
HTML document
 The text between <head> and </head> provides
information about the document
 The text between <title> and </title> provides a title for
the document
 The text between <body> and </body> describes the
visible page content
 The text between <h1> and </h1> describes a heading
 The text between <p> and </p> describes a paragraph
HTML - Comment lines
 Comments are not displayed in the browser
 Starts with <!--
 Ends with -->
 Example:
<!--This is a comment. -->
HTML Tags
 HTML tags are keywords (tag names) surrounded
by angle brackets:
 Syntax: <tagname>content goes here...</tagname>
 HTML tags normally come in pairs like <p> and
</p>
 The first tag in a pair is the start tag, the second
tag is the end tag
 The end tag is written like the start tag, but with a
forward slash inserted before the tag name
HTML Heading Tag
 HTML headings are defined with the <h1> to <h6>
tags
 <h1> defines the most important heading
 <h6> defines the least important heading
 Example:
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
 HTML ATTRIBUTES

 Attributes provide additional information about HTML

elements
 All HTML elements can have attributes

 Attributes are always specified in the start tag

 Attributes usually come in name/value pairs like:

name="value“
 Example

<body bgcolor=“green” >

<p> hai </p>
</body>
HTML colors- Attribute Values

 color_name: It sets the background color by using the color

name. For example “red”.
 hex_number: It sets the background color by using the color
hex code. For example “#0000ff”.
 rgb_number: It sets the background color by using the RGB
code. For example: “RGB(0, 153, 0)” .

<BODY bgcolor=“blue”>
<BODY bgcolor=“rgb(255,0,0)” >
<BODY bgcolor=“#0000FF”>

https://htmlcolorcodes.com/

24
 HTML -Colors
Color is the combination of red, green and blue
color = “red” (Browser compatibility issues)
color=“rgb(122,255,0)”
color = “#FF0000”

values vary from 00 to FF (hexadecimal)

0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f
#FF FF FF

Red Blue

Green
25
HTML Links- anchor tag
 HTML links are defined with the anchor tag<a>
Example
Test.html
<a href="http://www.kongu.ac.in"> kongu</a>

 The link's destination is specified in the href attribute

Example output

 Test.html
 HTML Links

Test.html
<body>
<a href=“bio.html”> Read my BIO </a>
<body>

bio.html
<body>
Welcome to web Page
</body>
 <anchor > - Target attribute value

Target=“value”
Value can be
 Hypertext links
<a href=“bio.html” target=“_blank” > BiO DATA </a>
 Creates new window for the page

<a href=“bio.html” target=“_self” >Bio Data</a>

 Opens page in the same tab

30
HTML Images
 HTML images are defined with the <img> tag
 The source file (src), alternative text (alt), and size

(width and height) are provided as attributes

 alt: Alternate text is used when the image cannot

be displayed
 Example:

<img src=“ group.jpg" alt="Tour" width="600"

height="300“/>
 HTML Element-<img>
 Images from local folder
 <img src=“image1.jpg" alt=“Image here" width=“100"
height=“150">
(OR)
 Images from different folder
 <img src="/images/html5.gif" alt=“HTML5 Icon” width=“28px”
height=“128px”>
 Images from other servers
 <img src="https://www.kongu.ac.in/images/logo.jpg" alt=“KEC
LOGO">
Image as hyper link
The title Attribute
 title attribute is added to the <p> element
 The value of the title attribute will be displayed as

a tooltip when you move the mouse over the

paragraph
<!DOCTYPE html>
 Ex: <html>
<head> Paragraph</head>
<p title=“KEC"> <body>
Kongu Engineering College <p title="WWW“ >
The World Wide Web (WWW),
</p> commonly known as the Web</p>
</body>
</html>
Nested HTML Elements
 HTML elements can be nested (elements can contain
elements)
 <p><h2>My first paragraph</h2></p>
HTML Empty Tags
 <br> --- line break
 <hr> --- horizontal rule
 Horizontal Rule and break tag
 The <hr> tag defines a thematic break in an HTML
page
 It is most often displayed as a horizontal rule
 <br> tag:
 Todisplay in next line in web page
 No ending tag

<html>
<body>
<p title="Web"> The three primary colors, <hr> red, green and blue, <br> are made </p>
</body>
</html>
HTML Display
 With HTML, we cannot change the output by adding
extra spaces or extra lines in your HTML code.
 The browser will remove any extra spaces and extra
lines when the page is displayed
 Ex:

<p>
This paragraph
contains a lot of spaces
in the source code,
but the browser
ignores it.
</p>
HTML <pre> Element
 The HTML <pre> element defines preformatted
text.
 The text inside a <pre> element is displayed in a
fixed-width font (usually Courier), and it preserves
both spaces and line breaks
 <pre> </pre>
 Ex: Poem – line by line
HTML Formatting Elements
 HTML also defines special elements for defining text with a special
meaning.
 HTML uses elements like <b> and <i> for formatting output, like
bold or italic text
 <b> - Bold text
 <strong> - Important text
 <i> - Italic text
 <em> - Emphasized text
 <mark> - Marked text
 <small> - Small text
 <del> - Deleted text
 <ins> - Inserted text
 <sub> - Subscript text
 <sup> - Superscript text
Output of Formatting tags
HTML Lists
 Unordered List
 Item
 Item
 Item
 Item

 Ordered List
1. Item
2. Item
3. Item
4. Item
HTML Lists

Unordered list Ordered list

<ul type=“square”> <ol type=‘i’ start=‘2’>

<li>apples</li> <li>apples</li>
<li>bananas</li> <li>bananas</li>
<li>grapes</li> <li>grapes</li>
<li>strawberries</li> <li>strawberries</li>
</ul> </ol>
Copyright 2005 - The Small Business
43
Depot
HTML Lists

Unordered list Ordered list

 apples II. apples

 bananas III. bananas
 grapes IV. grapes
 strawberries V. strawberries

44
Unordered HTML List- type attributes
 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

Value Description
Sets the list item marker to a
disc
bullet (default)
Sets the list item marker to a
circle
circle
Sets the list item marker to a
square
square
The list items will not be
none
marked
 Ordered HTML List type attributes
 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

Type Description

type="1" The list items will be numbered with numbers (default)

type="A" The list items will be numbered with uppercase letters

type="a" The list items will be numbered with lowercase letters

type="I" The list items will be numbered with uppercase roman numbers

type="i" The list items will be numbered with lowercase roman numbers
HTML Elements-Ordered List
How to design a nested list?
1. Coffee
2. Tea
o Black tea
o Green tea
3. Milk
Nested HTML Lists
 List can be nested - lists inside lists
 Example:
<ol>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ol>
HTML Tables
 An 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 Table tags
HTML TABLES
 <table>
 Style, border….
 <tr> --- Table row
 <td> --- Table data
 Attribute— rowspan, colspan
 text, images, lists, other tables, etc.

 <th> --- Table header

 Attribute— colspan ,rowspan
 <thead>, <tbody>, <tfoot>

<table border = "2"> <tbody>

<tr>
<caption><strong>Tabl <td>Apple</td>
e of Fruits and Their <td>100</td>
Prices </tr>
</strong></caption> <tr>
<td>Orange</td>
<td>50</td>
<thead> </tr>
</tbody>
<tr> <tfoot>
<th>Fruit</th> <tr>
<th>Total</th>
<th>Price</th> <th>150</th>
</tr> </tr>
</tfoot>
</thead </table>
 ROWSPAN
 Cell that spans two rows (Merged tow rows)
<tbody>
<tr>
<td>Apple</td>
<td>100</td>
<td rowspan="2">Total:150</td>
</tr>

<tr>
<td>Orange</td>
<td>50</td>
</tr>
</tbody>
COLSPAN
Cell that spans two columns (Merged tow columns)
<tfoot>
<tr>
<th colspan="3">Total:150</th>
</tr>
</tfoot
Colgroup

 Set the background color of particular columns with the <colgroup> and <col> tags
<table border="1">
<colgroup>
<col span="2" style="background-color:red">
<col style="background-color:yellow">
</colgroup>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
</table>
56
CELL PADING vs CELL SPACING

 CELL PADING: Spacing between text and cell

 CELL SPACING: Spacing between two cells

Question

Design a table like this

58
 HTML-Internal Linking[bookmarking]
Used to create linking or book marking within a page
Page should exceed more than one page
Example:
<body>
<h1 id = "books">my favourite books</h1>
<p><a href = "#languages">Go to Favorite languages</a></p>
<ul>
……………..

<h1 id = "languages">My Favorite languages</h1>

<p><a href = "#books">Go to Favorite books</a></p>
<ol>
………..
 Media Tags
 Multimedia on the web is sound, music, videos, movies,
and animations.
 Multimedia comes in many different formats. It can be
almost anything you can hear or see, like images, music,
sound, videos, records, films, animations, and more.
 Multimedia Formats :Multimedia files have formats and
different extensions like: .wav, .mp3, .mp4, .mpg, .wmv,
and .avi.
 Common Video Formats – MP4, WebM, and Ogg
Media Tags
Media Tags - <audio>
 The HTML <audio> element is used to play an audio file
on a web page.
 The controls attribute adds audio controls, like play,
pause, and volume.

<audio controls>
<source src=“sample.mp3" type="audio/mp3">
</audio>
 Media Tags - <video>
 The HTML <video> element is used to play an
video file on a web page.
 The controls attribute adds video controls, like
play, pause, and volume.
 Autoplay – (does not supported in all browser)

<video width="320" height="240" controls>

<source src="movie.mp4" type="video/mp4">
</video>
Video Tag- example
Special characters in HTML
Special characters in HTML
HTML Quotations and Citation
Elements
 <q></q>
 Inserts quotation marks “….”
 <abbr></abbr>
 Abbreviation title can be given - gives useful information to
browsers.
 <address></ address>
 Contact information - displayed italic, adds line break
 <cite></ cite>
 To define the title of creative work- usually italics
 <bdo></bdo>
 Bi-directional override.
 Used to override the current direction.
Form
 The <form> tag is used to create an HTML form for
user input.
 The <form> element can contain one or more of the
following form elements:
 <input>

 <label>

 <textarea>

 <button>

 <select>

Syntax:
<form> Form Content... </form>
label
 The <label> tag defines a label for all elements
 The for attribute of <label> must be equal to the id
attribute of the related element to bind them
together. A label can also be bound to an element
by placing the element inside the <label> element.
 Input tag
 The <input> tag specifies an input field where the user
can enter data
Syntax
<input type = "value" .... />
Attributes:
Value :The initial value of the control used for all input tag
Type:Type of form control
Name:Name of the form control. Submitted with the form as part of
a name/value pair
Minlength:Minimum length (number of characters) of value. Used in
text, search, email, password
Size:Size of the control -Used in text, search, email, password
Checked:Whether the command or control is checked -Used in
checkbox, radio
 Input tag types
Type Description Basic Examples

The default value. A single-line text field. Line-breaks

text
are automatically removed from the input value.

A control for entering a number. Displays a spinner

number and adds default validation. Displays a numeric keypad
in some devices with dynamic keypads.

A field for editing an email address. Looks like

a text input, but has validation parameters and
email
relevant keyboard in supporting browsers and devices
with dynamic keyboards.

A single-line text field whose value is obscured. Will

password
alert user if site is not secure.
 Input tag types
Type Description Basic Examples

A radio button, allowing a single value to be selected

radio
out of multiple choices with the same name value.

A check box allowing single values to be

checkbox
selected/deselected.

A control for entering a date (year, month, and day, with

date no time). Opens a date picker or numeric wheels for
year, month, day when active in supporting browsers.

A single-line text field for entering search strings. Line-

breaks are automatically removed from the input value.
May include a delete icon in supporting browsers that
search
can be used to clear the field. Displays a search icon
instead of enter key on some devices with dynamic
keypads.
 Input tag types
Type Description Basic Examples
A control that lets the user select a file. Use
file the accept attribute to define the types of files that the
control can select.

submit A button that submits the form.

A button that resets the contents of the form to default

reset
values. Not recommended.

A push button with no default behavior displaying the

button
value of the value attribute, empty by default.
Form example
output
Text area

 The <textarea> tag defines a multi-line text input control.

 The <textarea> element is often used in a form, to collect user
inputs like comments or reviews.
 The size of a text area is specified by
the cols and rows attributes
 The name attribute is needed to reference the form data after
the form is submitted
select
 The <select> element is used to create a drop-down list.
 The <select> element is most often used in a form, to collect
user input.
 The name attribute is needed to reference the form data after
the form is submitted
 The <option> tags inside the <select> element define the
available options in the drop-down list.
button
 The <button> tag defines a clickable button.
 Inside a <button> element you can put text (and tags
like <i>, <b>, <strong>, <br>, <img>, etc.). That is not
possible with a button created with the <input> element!
 Always specify the type attribute for a <button> element, to
tell browsers what type of button it is.
 Example
<button type="button">Click Me!</button>
 Container <Div> & <Span> tag
◻ HTML Block (DIV) and Inline (SPAN) Elements
◻ <DIV>
◻ defines a division or a section in an HTML document

◻ used as a container for HTML elements - which is then styled

with CSS or manipulated with JavaScript
◻ easily styled by using the class or id attribute

◻ example
<div>
<p>Hello! This is a paragraph.</p>
</div>
<Span>
◻ an inline container used to mark up a part of a text, or a
part of a document
◻ easily styled by CSS or manipulated with JavaScript using
the class or id attribute
◻ much like the <div> element, but <div> is a block-level
element and <span> is an inline element.
Example
<p>this is a <span>span tag span></p>
Semantic elements
 Semantic elements have meaningful names which
tells about type of content. For example header,
footer, table, … etc.
 Examples of non-semantic elements:

<div> and <span> - Tells nothing

about its content.
 Examples of semantic elements:

<form>, <table>, and <article>

- Clearly defines its content.
Semantic tags
<header>
 The <header> element represents a container for
introductory content or a set of navigational links. It may
contain heading or topic of the page
<nav>
 The <nav> element defines a set of navigation links.

<section>
 It represents the section of the document.

<article>
The <article> element specifies independent, self-contained
content. It may contain User comments, Product cards,
Newspaper articles
Semantic tags
<main>
 This specifies the main page content and should be
unique.
<aside>
 The <aside> element defines some content aside from
the content it is placed in (like a sidebar).
<footer>
The <footer> element defines a footer for a document or
section. It may contain authorship information
copyright information, contact information, sitemap etc
CASCADING STYLE SHEET
CSS

 Html
Used for marking up information to be rendered in a
browser.
 CSS- Cascading Style Sheet
1. Specifies the presentation of elements on a web
page (e.g., fonts, spacing, sizes, colors, positioning)
separately from the document’s structure and content
2. CSS can be added to HTML documents in 3 ways
a) Inline b)Embedded or internal c) External
 Introduction

 CSS stands for Cascading Style Sheets

 Style sheet language used to describe the presentation of

a document written in HTML or XML

 how HTML elements are to be displayed on screen, paper,

or in other media
 Colors, fonts, alignment, borders, backgrounds, spacing,
margins, etc…
 It can control the layout of multiple web pages all at once

 Advantage

◻ Reusability
◻ Separate the content and presentation
 CSS vs. just HTML
88

◻ What can we do with CSS that we can’t do with

HTML?
 Control of backgrounds.
 Set font size to the exact height you want.
 Highlight words, entire paragraphs, headings or
even individual letters with background colors.
 Overlap words and make logo-type headers
without making images.
 Precise positioning.
 Linked style sheets to control the look of a whole
website from one single location.
 HTML & CSS Code

◻ To set red color as the background color of a

webpage

HTML
<body bgcolor="#FF0000">

CSS
body {background-color: #FF0000;}
 How to write CSS?
90

◻ CSS rule-set consists of a selector and a declaration block

◻ Selector
⦁ HTML element tags
(examples: p, h2, body, img, table)
⦁ class and ID names
◻ Property (examples: color, font-size)
◻ Value (examples: red, 14pt)
Basic Structure of a Style
◻ Each definition contains:
⦁ A property
⦁ A colon
⦁ A value
⦁ A semicolon to separate two or more
values
⦁ Can include one or more values

◻ h1 {font-size:12pt; color:red}
Example:

p{
color: red;
text-align: center;
}

body {
background-color: lightblue;
}
Type of CSS

 Inline - by using the style attribute inside HTML

elements
 Internal - by using a <style> element in the <head>

section
 External - by using a <link> element to link to an

external CSS file

The most common way of using CSS is using external
style sheet.
Inline Style sheet

Used to apply a unique style to a single HTML element

 Embedded/ Internal Style sheet

•Used to define a style for a single HTML page

•Defined in the <head> section of an HTML page, within a
<style> element.
Embedded/ Internal Style sheet
External Style Sheet

• Used to define the style for entire website

• The style sheet is written in separate file stored with
.css extension
• To use an external style sheet, add a link to it in the
<head> section of each HTML page
Style.css
External Style Sheet
External.html
External Style Sheet
<link> rel Attribute
Specifies the relationship between the current document
and the linked document
<link rel =“style sheet”>
Refers the imported document is CSS style sheet
<link> type Attribute
•Specifies the Internet media type of <style> tag
•It identifies the content between the <style> and
</style> tags.
•The default value is "text/css", which indicates that the
content is CSS.
Applying a single style sheet to multiple
documents
 Advantages of External Style Sheet

 Saves Time
◻ can change the look of an entire website by changing
just one file
CSS Inheritance: - which style prevails when
several are present?

◻ Inline (local) overrides internal & external styles

◻ Internal style sheet overrides external styles

CSS Selectors
◻ CSS selectors are used to "find" (or select) HTML
elements based on their element name, id, class,
attribute, and more
◻ Types
◻ Simple selectors (select elements based on name, id, class)
◻ Element name selector
◻ Element id selector
◻ Element class selector
◻ Universal selector
◻ Grouping Selectors
◻ Pseudo-class selectors (select elements based on a certain
state)
◻ :hover
CSS Simple Selectors
CSS Universal Selector - Example
CSS Selectors - Example
Text properties

Color
 The color property is used to set the color of a text. The color
is specified by:
Example:
 a color name - "red"
h1 {
 a HEX value - "#ff0000"

 an RGB value - "rgb(255,0,0)“

color: green;
}
text-align :Specifies the horizontal alignment of text
 text-align : left|center|right|justify
Example: h1 {
text-align: center;
}
Text properties

text-transform:
This property controls the capitalization of text Specifies the
kind of text decoration to be used (underline, overline,
etc.)
text-transform: capitalize|uppercase|lowercase
Example: h2 { text-transform: lowercase;
}
font
font-family:
.p1 {
font-family: "Times New Roman”;
font-size: 30px;
}
Backgrounds

background-color:applies background color

Example: background-color: lightblue;
background-image: set the background image
background-image: “images/css.jpg”
background-postion:Sets the starting position of a
background image
Value:
 left top |left center|left bottom|right top

 (xpos ypos)

background-position: 10% 40%;

background-position: 10px 40px;
 Background-shorthand Property
 It does not matter if one of the property values is
missing, as long as the other ones are in this order

or
 <Div> & <Span> tag
◻ HTML Block (DIV) and Inline (SPAN) Elements
◻ <DIV>
◻ defines a division or a section in an HTML document
◻ used as a container for HTML elements - which is then styled with CSS or
manipulated with JavaScript
◻ easily styled by using the class or id attribute

◻ <Span>
◻ an inline container used to mark up a part of a text, or a part of a
document
◻ easily styled by CSS or manipulated with JavaScript using the class or id
attribute
◻ much like the <div> element, but <div> is a block-level element
and <span> is an inline element.
 HTML Block and Inline Elements
 Block Elements Inline Elements
<a>
<address> <input>
<hr> <abbr>
<kbd>
<blockquote> <li> <acronym>
<label>
<div> <b> <map>
<nav> <bdo> <object>
<fieldset> <ol> <br> <output>
<figcaption> <p> <button> <q>
<cite> <script>
<figure> <pre>
<code> <select>
<footer> <section> <dfn> <small>
<form> <table> <em> <span>
<tfoot> <i> <strong>
<h1>-<h6> <img> <textarea>
<ul>
<header> <sub> <time>
<video> <sup>
HTML <div> Tag
HTML <span> Tag
CSS Box Model
❏ All HTML elements can be considered as boxes
❏ CSS box model is essentially a box that wraps around every
HTML element.
❏ It consists of
❏ Content - The content of the box, where text and images
appear
❏ Padding - Clears an area around the content. The padding
is transparent
❏ Border - A border that goes around the padding and
content
❏ Margin - Clears an area outside the border. The margin is
transparent
BOX MODEL
BOX- Margin and Padding
 MARGIN PROPERTY
CSS margin properties are used to create
space around elements, outside of any
defined borders.

margin:10px
margin-top:5px
margin-right:10px
margin-bottom:10px
margin-left:10px
 PADDING PROPERTY

Padding properties are used to generate space around

contents

Shorthand property
padding: 2px ;
padding-left::2px ;
padding-right:2px ;
padding-bottom:2px;
padding-top:2px ;
 BORDER PROPERTY

Shorthand property
border: 2px solid pink

border-left::2px solid pink

border-right:2px solid pink
border-bottom:2px solid pink border-width:2px
border-top:2px solid pink border-style:solid
border-color:pink
border-left border-right border-bottom: border-top
border-left-width border-right-width border-bottom-width border-top-width
border-left-color border-right-color border-bottom-color border-top-color
border-left-style border-right-style border-bottom-style border-top-style
CSS Border Style
CSS Border Style
Combined class of solid
and red
CSS Border Style
Height and width property

 The height and width properties are used to set the

height and width of an element.
 It sets the height/width of the area inside the
padding, border, and margin of the element.
 Value can be
 Length-Defines the height/width in px, cm, etc.
 % - Defines the height/width in percent of the
containing block
Example
Additional example-
Output