Scribd
Upload
77 views

HTML Css Book

Uploaded by

trachhimanshu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
77 views

HTML Css Book

Uploaded by

trachhimanshu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 73

HTML & CSS Notes

Topics
HTML
CSS
HTML
Hypertext Markup Language
Describes structure of a web page
Contains elements
Elements describe how to render content
Elements are enclosed in Tags
Tags surround and describe content
Start tag – Text in angle brackets (i.e. <body>)
End tag – Text with leading slash in angle brackets (i.e. </body>)
Tags must be properly nested!
Attributes contained inside tags refine the operation of the tag
Format is: <tagname attr1=value, attr2=value…>
A brief history of HTML
In 1989,Tim Berner’s Lee wrote a memo proposing
an Internet-based hypertext system
Berners-Lee specified HTML and wrote the browser and server
software in late 1990 and released it in 1991
(it had 18 elements/tags)
HTML – Simple HTML Tags
<!DOCTYPE HTML>
<html>
<head>
<title>My Page Title!</title>
</head>
<body>

<h1>Introduction</h1>
<p>This is a simple HTML web page. The content here is part of a
‘paragraph’. Web browser will lay out this text and introduce line breaks
so the text fits nicely in the browser window.</p>

</body>
</html>
HTML – Basic Tags
<html></html> - Surround entire document
<head></head> - Surround header material (titles, css info,
etc.)
<body></body> - Contains the main content of the page
<p></p> - Hold a single paragraph that the browser will
typeset.
HTML – Heading Tags
There are 6 types of heading tags that is used to mark sections of a
document for the reader

<h1>hello</h1>
<h2>hello</h2>
<h3>hello</h3>
<h4>hello</h4>
<h5>hello</h5>
<h6>hello</h6>
HTML – Favicon Tag
A Favicon is a small image displayed next to the page title in the browser
tab.
<html>
<head><title>Favicon Tag</title>
<link rel="icon" href="bing.ico" type="image/x-icon">
</head>
<body bgcolor="yellow" text="red">
this is favicon icon in html
</body>
</html>
HTML – Fieldset Legend
The <fieldset> tag is used to group related elements in a form.
The <fieldset> tag draws a box around the related elements.
The <legend> tag is used to define a caption for the <fieldset> element.

<html>
<head><title>FieldSet Legend</title></head>
<body>
<fieldset>
<legend>MyBlog</legend>
hello there i am here.......<br>
hi sir/mam<br>
how r u?
</fieldset>
</body>
</html>
HTML – Special character
Symbols or letters that are not present on your keyboard can be added to HTML
using entities.
<html>

<head><title>special character</title></head>

<body>

i am&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;gaurav

<br>

copyright&copy;2023

<br>

Microsoft&reg;

<br>

Orange&trade;

<br>

r<sup>2</sup>
<br>

r<sub>2</sub>

<br>

&larr;&rarr;&uarr;&darr;

<br>

&dollar;

<br>

&#8377;

</body>

</html>
HTML – Horizontal Rule
The <hr> tag in HTML stands for horizontal rule and is used to insert a
horizontal rule or a thematic break in an HTML page to divide or separate document
sections. The <hr> tag is an empty tag, and it does not require an end tag.

<html>
<head><title>Horizontal Rule</title></head>
<body bgcolor="yellow" text="red">
hello
<hr>
sir
<hr size="10" color="green">
mam
<hr width="100" align="left">
</body>
</html>
HTML – Pre Tag
Text in a <pre> element is displayed in a fixed-width font, and the text preserves both spaces and
line breaks. The text will be displayed exactly as written in the HTML source code.

<html>
<head><title>Pre tag</title></head>
<body bgcolor="yellow" text="red">
<pre>
hello
sir
how
are
you
</pre>
</body>
</html>
HTML – Marquee Tag
The Marquee HTML tag is a non-standard HTML element which is used to scroll a image or text
horizontally or vertically.
In simple words, you can say that it scrolls the image or text up, down, left or right automatically.
<html>

<head><title>marquee tag</title></head>

<body>

<marquee>gaurav</marquee>

<marquee direction="right">gaurav</marquee>

<marquee><img src="1.jpg" height="100" width="100"></marquee>

<marquee scrollamount="100" behavior="alternate">

<img src="img\1.jpg" height="100" width="100"></marquee>

<marquee scrolldelay="500"><img src="img\1.jpg" height="100" width="100"></marquee>

</body></html>
HTML – Link tags
Links – These mark a hyperlink around link text.When click by user, browser loads the
page in the HREF attribute.
Format <A HREF=“url target”>Text for link</A>
Only ‘Text for link’ will show up on page.
Target attribute, indicates which window/tab should be used for the linked page
target=“_self ” – Default. Place the content in the current tab
target=“_blank” – Place the content in a newly created tab
HTML – Image tags
<IMG> - Will display an image
Image file must be in a popular graphics format (.gif, .jpg, .png, etc.)
src contains the url of image and alt contains alternate text
Format :
<IMG src=“1.jpg” width=”100”, height=”100”,
alt=“Text to display”>
HTML – More on Links
href attribute
This can be any URI or local file
URI should include protocol, server, and path
Local file can be specified with an absolute or relative path
Content can be text OR an image. Ex:
<a href="1.html" target="_self">Gaurav</a>
<a href="2.html" target="_blank"><img src="1.jpg" height="100"
width="100"></a>
title attribute
Used to provide descriptive text.
Text is displayed when cursor is hovered over link
HTML - Lists
HTML lists allow web developers to group a set of related items in lists. There are
three types of list:

<UL></UL> - Unordered List


<LI></LI> - Encloses a single list item
<OL></OL> - Ordered List
<LI></LI> - Encloses a single list item
<DL></DL> - Definition List
<DT></DT> - Definition Term
<DD></DD> - Definition Description
(Order/Unorder) - List
<html>
<body>
<h2>Unordered List</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<h2>Ordered List</h2>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
UL takes a style attribute to customize the list
list-style-type
circle
square
none
OL takes a style attribute to customize the list
list-style-type
type=”1”
type=”A”
type=”i”
none
HTML – Nested List
<!DOCTYPE html>
<html>
<body>
<ul>
<li>Recipes</li>
<ol>
<li>Rolled Sugar Cookies</li>
<li>Sweet Potato Casserole</li>
<li>Apple Pie</li>
</ol>
<li>Ingredients</li>
<li>Kitchen Tips</li>
</ul>
</body>
</html>
HTML – Formatting Tags
 <b></b> - Bold text
 <strong></strong> - Important text (similar to bold)
 <i></i> - Italic text
 <em></em> - Emphasized text (similar to Italic)
 <mark></mark> - Marked text
 <small><small> - Small text
 <del></del> - Deleted text (stroked text)
 <ins></ins> - Inserted text
 <sub></sub> - Subscript text
 <sup></sup> - Superscript text
HTML –Formatting Tags
<!DOCTYPE html>
<html>
<body>

<p>This text is normal.</p>


<p><b>This text is bold.</b></p>
<p><i>This text is italic.</i></p>
<p><em>This text is emphasized.</em></p>
<p><strong>This text is strong.</strong></p>
<p><mark>This text is marked.</mark></p>
<p><small>This text is small.</small></p>
<p><del>This text is deleted.</del></p>
<p><ins>This text is inserted.</ins></p>
<p>This text is <sup>superscripted.</sup></p>
<p>This text is <sub>subscripted.</sub></p>

</body>
</html>
HTML - Comments
Comments are contained in ‘<!-- -->’
Example:
<!– This is a comment and does not affect rendering
of the page at all and also not visible to the output
screen -->
HTML – Audio Video Tags
<audio> and <video> tags make it simple to add
media to a website. You need to set src attribute to
identify the media source and include a controls
attribute so the user can play and pause the media.
<html>
<head><title>Audio and Video Tag</title>
</head>
<body>
<!--this is audio and video tag example-->
<embed src="1.mp3" height="200" width="200"
autoplay="false"></embed>
<embed src="1.mp4" height="200" width="200"
autoplay="false"></embed>
</body>
</html>
HTML – Table
HTML tables allow web developers to arrange
data into rows and columns.
Tags:
<table></table> - Encloses the entire contents of the table
<tr></tr> - These bracket a ‘row’ of data cells
<th></th> - These tags support a row used specifically for column headings
<td></td> - These tags go around data for a specific cell
<caption> - This defines a table caption
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
Rowspan – one row contain multiple rows
Colspan – one column contain multiple columns
HTML – Table
<html>
<head><title>Table</title></head>
<body>
<center>
<caption>MyTable</caption>
<table border="2" bordercolor="red" cellspacing="5" cellpadding="5" bgcolor="yellow">
<tr>
<th>Id</th>
<th>Name</th>
<th>Fees</th>
</tr>
<tr bgcolor="cyan">
<td>001</td>
<td>Salman</td>
<td>5000</td>
</tr>
<tr>
<td>002</td>
<td bgcolor="pink">Sharukh</td>
<td>25000</td>
</tr>
</table>
</center>
</body>
</html
HTML – Table Rowspan
<html>
<head><title>Table Rowspan</title></head>
<body>
<center>
<caption>MyTable</caption>
<table border="2" bordercolor="blue" cellspacing="5" cellpadding="5" bgcolor="cyan">
<tr>
<th rowspan="4">Id
Name
Fees</th>
</tr>
<tr>
<td>001</td>
<td>Rustom</td>
<td>5000</td>
</tr>
<tr>
<td>002</td>
<td bgcolor="pink">Katrina</td>
<td>25000</td>
</tr>
<tr>
<td>003</td>
<td>Salman</td>
<td>15000</td>
</tr>
</table>
</center>
</body>
</html>
HTML – Table Colspan
<html>
<head><title>Table Colspan</title></head>
<body>
<center>
<caption>MyTable</caption>
<table border="3" bordercolor="purple" cellspacing="5" cellpadding="5" bgcolor="lightgray">
<tr>
<th colspan="3">Id
Name
Fees</th>
</tr>
<tr>
<td>001</td>
<td>Rustom</td>
<td>5000</td>
</tr>
<tr>
<td>002</td>
<td bgcolor="green">Katrina</td>
<td>25000</td>
</tr>
<tr>
<td>003</td>
<td>Salman</td>
<td>15000</td>
</tr>
</table>
</center>
</body>
</html>
HTML – Forms
Forms can be used to collect data and respond to queries
Tags:
<form></form> - This encases the entire form
Forms contain a number of input elements as well as text fields
There is at least one input to indicate when to submit a form to the back end.
Form tag attributes
action= - This indicates the script on the server to run when the submit action
is selected
method= - This indicates what ‘HTTP method’ to use (i.e. “GET”,
“POST”)
Input Tags within a form:
<input></input> This encloses input fields of various types based on
attributes in the tag
HTML – Forms
<html>
<head><title>Form</title></head>
<body>
<center>
<form method="post">
<caption><u>Registration Form:</u></caption>
<table border="0" cellspacing="5" cellpadding="5" bgcolor="yellow">
<tr>
<td>FullName:</td>
<td><input type="text" name="fname"></td>
</tr>
<tr>
<td>UserName:</td>
<td><input type="text" name="uname"></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" name="pass"></td>
</tr>
<tr>
<td>Gender:</td>
<td><input type="radio" name="f1">male
<input type="radio" name="f1">female
</td>
</tr>
<tr>
<td>Hobby:</td>
<td><input type="checkbox" name="ck1">chess
<input type="checkbox" name="ck2">carrom
<input type="checkbox" name="ck3">cricket
</td>
</tr>
<tr>
<td>DOB</td>
<td><input type="date" name="mydate">
</td>
</tr>
<tr>
<td>Address:</td>
<td><textarea cols="20" rows="3" name="addr"></textarea></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="submit">
<input type="reset" value="clear">
</td>
</tr>
</table>
</form></center></body></html>
HTML – Frames
HTML frames:
It is used to divide your browser window into multiple sections where each section can load a
separate HTML document. A collection of frames in the browser window is known as a
frameset. The window is divided into frames in a similar way the tables are organized: into
rows and columns.

Creating frames:
To use frames on a page we use <frameset> tag instead of <body> tag. The <frameset> tag
defines, how to divide the window into frames. The rows attribute of <frameset> tag defines
horizontal frames and cols attribute defines vertical frames. Each frame is indicated by
<frame> tag and it defines which HTML document shall open into the frame.
HTML – Frameset Rows
<html>
<head><title>Frame Rows</title></head>
<frameset rows="50%,50%">
<frame src="ol.html" noresize="noresize">
<frame src="ul.html">
</frameset>
</html>
HTML – Frameset Cols
<html>
<head><title>Frame Cols</title></head>
<frameset cols="50%,50%">
<frame src="ol.html" noresize="noresize">
<frame src="ul.html">
</frameset>
</html>
HTML – Nested Frame
<html>
<head><title>Nested Frame</title></head>
<frameset cols="25%,75%">
<frame src="ol.html" noresize="noresize">
<frameset rows="30%,30%,40%">
<frame src="ul.html" noresize="noresize">
<frame src="login.html" noresize="noresize">
<frame src="marquee.html" noresize="noresize">
</frameset>
</frameset>
</html>
HTML – IFrame
HTML IFrame: HTML Iframe is used to display a nested webpage (a webpage
within a webpage). The HTML <iframe> tag defines an inline frame, hence it is also
called as an Inline frame.
An HTML iframe embeds another document within the current HTML document in the
rectangular region. syntax : <iframe src="URL" title="description"></iframe>
<html>

<head><title> HTML Iframe example</title></head>

<body>

<iframe src="https://www.wikipedia.org/"

height="300" width="300"></iframe>

</body>

</html>
CSS
CSS = Cascading Style Sheets
Greatly simplifies styling HTML
Easy to keep consistent styling
Instructions are written as a rule-set
A brief history of CSS
CSS was first proposed by HakonWium Lie on October 10,
1994, and W3C CSS Recommendation (CSS1) was released in
1996.
CSS level 2 specification was developed by the W3C and
published as a recommendation in May 1998.
CSS2.1 as finally published as a W3C Recommendation on 7
June 2011.
CSS rule-sets
CSS rule-sets have the following format:

Selectors indicate the tag or other element


Property/value pairs give the attribute to define and
the value of the attribute
Property/value pairs are separated with a semicolon ;
CSS - Selectors
Selectors can be
A tag name (i.e. <p>) – This will apply to all tags of that
type in the document
An id (<h2 id=“foo”>) – The style will apply to ANY tag
with the named id.
A class (<p class=“LargeRed”>) The style will apply to ANY
element with the named class)
CSS – Examples: Selectors
p{ Applies to all
text-align: center; paragraphs in the
color: blue; document
}

#C4 {
text-align: left; Applies to any tag
color: red; marked with
} id=“C4”

.center {
text-align: center;
color: green; Applies to any tag
} marked with
class=“center”
CSS – Selector Grouping
Selectors for elements with the same style can be grouped and use
a common style description

h1, h2, p {
text-align: center;
color: red;
}
CSS – Placement of CSS Information
CSS style information can be put in one of three
places:
External sheet
Can be used for an entire website
Each .html file must reference same sheet
Internal sheet
Can be used to consistently style 1 html page
Inline styles
Can be used to put style in each line
CSS – External Style Sheets

my_site_style.css: a_web_page.html:

body { <html>
background-color: lightblue; <head>
} <link rel="stylesheet" type="text/css" href="my_site_style.css">
</head>
h1 { <body>
color: navy; …
margin-left: 20px; </body>
} </html>

Separate file References the file


holding style with style
information information
CSS – Internal Style Sheets
<html>
<head>
<style>
body {
background-color: linen;
}
All style information
h1 { enclosed in <style> tag within
color: maroon;
margin-left: 40px; the <head> of an html
} document
</style>
</head>
<body>
…
</body>
</html>
CSS – Local Inline styles
Style info can be placed inside any tag (as has been seen earlier)
Ex: <body style=“color:red; background-color:yellow;”>
<h1 style=“color:blue;border-style:dashed;">
<p style="text-transform:uppercase;text-decoration:underline; font-size:20px;
border-style:dashed;font-family:verdana; font-weight:bold;”>
CSS – Cascading Order
With a mix of internal, external, and inline style
information, the styles will be applied by building a ‘virtual’ style
sheet considering each style specification in the following priority
order:
Inline style (inside an HTML element)
External and internal style sheets (in the head section using order
of links/style sections in the head)
More specific selectors are selected
For example, if we have a style for <p> and a style for id1,
then the style of <p id=id1> will be the style of id1
CSS – Style Attributes
Colors
Backgrounds
Borders
Margins
Padding
Height/Width
CSS - Colors
Colors can be specified as:
A color name like ‘red’,‘lightblue’, etc
HTML supports 140 standard color names
A hex value : #ff0000, #000066, etc.
Rgb values
2 hex ‘nibbles’ per color giving ranges of 0-255 for each
An RGB value like: rgb(255,0,0)
Same as hex values but with decimal numbers
Example:
h1 {color:green;}
p {color: red;}
CSS – Backgrounds
Elements can have different backgrounds
Colors
Images
CSS – Background Color
Attribute: background-color
Value: description of colors
h1 {background-color: green;}
div {background-color: #777700;}
div is just used to divide the page into
subsections - no other structural effect on the
page
CSS – Background Images
Attribute: background-image
Value is usually a URL of a graphic file
Example:
body {background-image: URL(“mountain.jpg”)}
Images can be positioned within an element
Attribute: background-position:
Value: (horizontal and vertical positioning (left, center, right, bottom,
center, top))
Example:
<!—place image starting in the upper right corner of the page’s body -
->
body {background-image: URL(“mountain.jpg”);
background-position: right top}
CSS – Background Images
Images can be repeated if two small to cover an area
Attribute: background-repeat
Values:
repeat-x – repeat horizontally across area
repeat-y – repeat vertically down area
no-repeat – do not repeat image
Images can scroll with page:
Background-attachment:scroll
Can specify all attributes using ‘background:’
Values for background must be in this order:
background-color
background-image
background-repeat
background-attachment
background-position
CSS - Borders
CSS allows specification of the style, width and color of borders
Attributes:
border-style : style keyword – includes dotted, dashed, solid, double,
groove, ridge, inset, outset, none, hidden}
One value – Applies to all 4 sides
T wo values – 1st applies to top and bottom, 2nd applies to left and right
Three values – 1st applies to top, 2nd applies to left and right, 3rd applies to bottom
Four values – Values applied as top, right, bottom, left
border-width :
Value can be specified in pt, px, cm, em
Value can use one of 3 keywords: thin, medium, thick
border-color:
Value can be specified in red, #ff00ff, rgb(50,50,50)
CSS - Borders
Shorthands:
border-left-style, border-right-style, border-
top-style, border-bottom-style
Same for border-x-width and border-x-color
border: handles all 3 attributes in order:
width
style (required)
color
Example:
h1 {border: 5px solid orange}
CSS - Borders
<!DOCTYPE html>
<html>
<head>
<style>
h2 { border: 10px dashed green;}
p { border: 5px solid red;}
</style>
</head>
<body>
<h2>The border Property</h2>
<p>This property is a shorthand property for border-width, border-style, and
border-color.</p>
</body>
</html>
CSS - Margins
Attribute: margin
Margin gives spacing outside the ‘border’ of an element
Similar to border, margin has separate attributes for left, top,
bottom, and right sides
Values:
auto – browser calculates margin
A length in px, pt, cm, etc
% - margin is a percentage of the width of the containing element
Inherit – Margin is inherited from parent element
margin can also have 4, 3, 2, or 1 value(s). Application pattern
similar to border.
CSS – Example: Margin
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
margin: 25px 50px;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>The margin shorthand property - 2 values</h2>
<div>This div element has a top and bottom margin of 25px, and a right and left margin of 50px.</div>
<hr>
</body>
</html>
CSS - Padding
Padding generates space around an element but within
its border
Attributes: padding, padding-left, padding-top, padding-
bottom, padding-right
Values:
Length – A length value in pt, px, cm, em, etc
% - A percentage of the width of the element
inherit – The padding is inherited from parent
element
CSS – Example: Padding
<!DOCTYPE html>
<html>
<head>
<style>
div { border: 1px solid black;
padding: 25px;
background-color: lightblue; }
</style>
</head>
<body>
<h2>The padding shorthand property - 1 value</h2>
<div>This div element has a top, bottom, left, and right padding of 25px.</div>
</body>
</html>
CSS – Height/Width
These attributes give the height and width of an
element
Default value is auto which lets the browser
figure out the best size
Values can be specified as:
A length – in pt, px, cm, etc.
A percentage of the containing block
CSS – Example: Height/Width
<!DOCTYPE html>
<html>
<head>
<style>
div { height: 200px;
width: 50%;
background-color: powderblue; }
</style>
</head>
<body>
<h2>Set the height and width of an element</h2>
<p>This div element has a height of 200px and a width of 50%:</p>
<div></div>
</body>
</html>

54
CSS – The Box Model
CSS Box Model refers to the layout of an element
including margin, borders, padding, and content
Content: The content of the element
Padding: area around the content and within the
border. Padding is transparent
Border: A border that surrounds the element and
padding
Margin: Area outside the border. Margin is
transparent.
CSS – Box Model
CSS – Example: Box Model
<!DOCTYPE html>
<html>
<head>
<style>
div { background-color: lightgrey;
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px; }
</style>
</head>
<body>
<h2>Demonstrating the Box Model</h2>
<p>The CSS box model is essentially a box that wraps around every HTML element.
It consists of: borders, padding, margins, and the actual content.</p>
<div>This text is in a box and has a 50px padding, 20px margin and a 15px green border.
The rest of this doesn't much matter!</div>
</body>
</html>

57
CSS – Styles for Links
Links can be styled using any CSS attributes (color, background-color,
text-decoration, font-family, font-size, background, etc)
Links can have different styling based on their ‘state’. 4 states are:
:link – An unvisited link
:visited – A link that has been visited
:hover – A link when the cursor os hovering over it
:active – A link when the left mouse button is depressed over it
Ordering is important! If all 4 states have styles
hover must be after link and visited
active must follow hover
CSS – Example: Link Styles
<!DOCTYPE html>
<html>
<head> When left button depressed on link
<style>
a:link { text-decoration: none; }
a:visited { text-decoration: none; color: green; }
a:hover { text-decoration: underline; color: red; }
a:active { text-decoration: underline; color: hotpink; }
</style>
</head>
<body>
<p><b><a href="index.html" target="_blank">This is a link</a></b></p>
<p>Misc other text</p>
</body> After visiting link
</html>

59
CSS – Styles for Lists
Unordered list: list-style-type
Circle
Square
Disc
Ordered list: list-style-type
Upper-roman
Lower-roman
Upper-alpha
Lower-alpha

60
CSS – Styles for Lists
Attribute: list-style-position (shorthand attribute: list-style)
Inside – bullet or marker is pulled in with text (so
inside border)
Outside – bullet or marker is left outside element’s
border (out-hanging)
CSS – Example: Styles for Lists
<!DOCTYPE html>
<html>
<head>
<style>
li {border: solid;}
ul.a { list-style-position: outside; background: #ff9999; }
ul.b { list-style-position: inside; background: #9999ff; }
</style>
</head>
<body>
<h1>The list-style-position Property</h1>
<h2>list-style-position: outside (default):</h2>
<ul class="a">
<li>Coffee - A brewed drink</li>
<li>Tea - An aromatic beverage </li>
<li>Coca Cola - A carbonated soft drink</li>
</ul>
<h2>list-style-position: inside:</h2>
<ul class="b">
<li>Coffee - A brewed drink</li>
<li>Tea - An aromatic beverage </li>
<li>Coca Cola - A carbonated soft drink</li>
</ul>
</body>
</html>
CSS – Styles for Tables
Various table elements can take on properties like border, padding,
text-align, width, height and others
border
width
text-align
border-collapse
Summary
HTML – Hyper Text Markup Language
Used to describe most web page content
Static – no ‘execution’ semantics
CSS – Cascading Style Sheets
Help customize look and feel of web pages
Numerous ways to address elements and groups of
elements
Varied properties to produce rich styling

You might also like