The <!
DOCTYPE> Declaration
The <!DOCTYPE> declaration represents the document type, and helps browsers to display web pages
correctly.
It must only appear once, at the top of the page (before any HTML tags).
The <!DOCTYPE> declaration is not case sensitive.
HTML Elements
An HTML element is defined by a start tag, some content, and an end tag.<p>some texttttttt<\p>
Empty HTML Elements
HTML elements with no content are called empty elements. <br>
HTML is Not Case Sensitive but W3C recommends lower case.
HTML Attributes (Always Quote Attribute Values) https://www.w3schools.com/tags/ref_attributes.asp
All HTML elements can have attributes. Attributes provide additional information about elements.
Attributes are always specified in the start tag
Attributes usually come in name/value pairs like: name="value"
href, src, weight, height, alt, style, lang, title,
enctype, accept-charset(imp for form)
HTML Headings h1,h2,h3,h4,h5,h6
<h1 style="font-size:60px;">Heading 1</h1>
HTML Paragraphs
The HTML <p> element defines a paragraph.
The browser will automatically remove any extra spaces and lines when the page is
displayed
The pre tag preserves both spaces and line breaks.
<br>: Inserts a single line break.
<hr>: Defines a thematic change or a horizontal rule.
<strong>some ttttext<\strong>: Defines important or strongly emphasized text (visually bold).
<em> some ttttext<\em>: Defines emphasized text (visually italic).
<b> some ttttext<\b>: Defines bold text without conveying extra importance.
<i> some ttttext<\i>: Defines text in an alternate voice or mood (visually italic).
<blockquote> some ttttext<\blockquote>: Defines a section that is quoted from another source.
<q> some ttttext<\q>: Defines a short, inline quotation.
<cite> some ttttext<\cite>: Defines the title of a work.
<code> some ttttext<\code>: Defines a piece of computer code.
<pre> some ttttext<\pre>: Defines preformatted text.
<small> some ttttext<\small>: Defines smaller text.
<del> some ttttext<\del>: Defines text that has been deleted from a document.
<ins> some ttttext<\ins>: Defines text that has been inserted into a document.
<sub> some ttttext<\sub>: Defines subscripted text.
<sup> some ttttext<\sup>: Defines superscripted text.
<mark> some ttttext<\mark> element defines text that should be marked or highlighted
HTML Styles
Use background-color for background color, color for text colors, font-family for text fonts, font-size for
text sizes, text-align for text alignment
HTML Quotation and Citation Elements
<blockquote>,<q>, <abbr>, <address>, <cite>, and <bdo>
<abbr title="World Health Organization">WHO</abbr>
<address>
Written by John Doe.<br>Visit us at:<br>Example.com<br>Box
564,Disneyland<br>USA</address>
<bdo dir="rtl">This line will be written from right to left</bdo> <!-- ltr, or rtl-->
HTML Colors
Color, Background Color, text color, border color
Values: RGB values (0 and 255.This means that there are 256 x 256 x 256 =
16777216 possible colors. Shades of gray are often defined using equal values for
all three parameters), HEX values( #rrggbb)<!-- you change rggbb or even rrgbb
and many others but sometimes work only-->, HSL values, RGBA values, and HSLA
values.
rgba(255, 99, 71, 0.5), hsla(9, 100%, 64%, 0.5) <!-- a(alpha) for transparency value-->
Using CSS
CSS can be added to HTML documents in 3 ways:
Inline - by using the style attribute inside HTML elements (have highest priority)
Internal - by using a <style> element in the <head> section
External - by using a <link> element to link to an external CSS file
Padding, margin, text-color, color, background-color, border etc.
HTML Links
Hyperlinks: <a href="https://www.w3schools.com/" target= ”_blank”>
W3School</a>
An unvisited link is underlined and blue, A visited link is underlined and purple
An active link is underlined and red
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
_top - Opens the document in the full body of the window
Absolute URLs vs. Relative URLs
an absolute URL (a full web address) in the href attribute.(mostly an external website)
A local link (a link to a page within the same website) is specified with a relative URL (without the
"https://www" part):
Path Description
<img src="picture.jpg"> The "picture.jpg" file is located in the same folder as the current page
<img The "picture.jpg" file is located in the images folder in the current folder
src="images/picture.jpg">
<img The "picture.jpg" file is located in the images folder at the root of the current
src="/images/picture.jpg" web
>
<img src="../picture.jpg"> The "picture.jpg" file is located in the folder one level up from the current folder
It is best practice to use relative file paths (if possible). When using relative file paths, your web pages
will not be bound to your current base URL. All links will work on your own computer (localhost) as well
as on your current public domain and your future public domains.
<a href="/css/default.asp">CSS Tutorial</a>
<a href="https://www.w3schools.com/" > W3School</a>
<a href="mailto:[email protected]" title=”some text”>Send
email</a>(mailto is an attribute, title is tooltip text when the
mouse moves over the element. )
<h2 id="C4">Chapter 4</h2>
<a href="#C4">Jump to Chapter 4</a>
<a href="#C4">move to next webpage</a>
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 15px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: red;
}
HTML Images
<img src="img_g.jpg" alt=" jacket" width="500" height="600"
style="float:left;”>(float have right or left)
<a href="default.asp"> <img src="smiley.gif" alt="HTML
tutorial" style="width:42px;height:42px;"></a>(image as a link to a
webpage)
Common Image Formats:
Animated Portable Network Graphics .apng
Graphics Interchange Format .gif
Microsoft Icon .ico, .cur
Joint Photographic Expert Group image
.jpg, .jpeg, .jfif, .pjpeg, .pjp
Portable Network Graphics .png
Scalable Vector Graphics .svg
Image Map(The idea behind an image map is that you should be able
to perform different actions depending on where in the image you
click.)
rect - defines a rectangular region
circle - defines a circular region
poly - defines a polygonal region
default - defines the entire region
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="comp
uter.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone
.htm"> <area shape="circle" coords="337,300,44" alt="Coffee" href="
coffee.htm">
</map>
Background Image on an HTML element
<p style="background-image: url('img_girl.jpg'); background-
repeat: no-repeat; background-attachment: fixed; background-
size: cover; ">
(for whole screen size background-size: 100% 100%; )
The HTML <picture> element gives web developers more flexibility in
specifying image resources. 1. Bandwidth, 2. Format Support
<picture>
<source media="(min-width: 650px)" srcset="img_food.jpg">
<source media="(min-width: 465px)" srcset="img_car.jpg">
<img src="img_girl.jpg">
</picture>
<title>My Page Title</title> <link rel="icon" type="image/x-
icon" href="/images/favicon.ico"> (icon with title on tab)
<figure>
<img src="pic_trulli.jpg" alt="Trulli" style="width:100%">
<figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
</figure>
Responsive images for different sizes
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
</head>
<body>
<picture>
<source srcset="img_smallflower.jpg" media="(max-width: 400px)">
<source srcset="img_flowers.jpg">
<img src="img_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
<p>Resize the browser width and the background image will change at
400px.</p>
</body>
</html>
HTML Lists
These tags are used for creating different types of lists:
<ul>: Defines an unordered (bulleted) list.
<ol>: Defines an ordered (numbered) list.
<li>: Defines a list item.
<dl>: Defines a description list.
<dt>: Defines a term/name in a description list.
<dd>: Defines a description of a term/name.
<ul style="list-style-type: square; background:#eef2ff; padding:15px; border-radius:8px; width:250px;">
<li style="margin:6px 0; color:#333;">Apple</li>
<li style="margin:6px 0; color:#333;">Banana</li>
<li style="margin:6px 0; color:#333;">Mango</li>
</ul>
<ol style="list-style-type: upper-roman; background:#fff7ed; padding:15px; border-radius:8px;
width:250px;">
<li style="margin:6px 0; color:#444;">Step One</li>
<li style="margin:6px 0; color:#444;">Step Two</li>
<li style="margin:6px 0; color:#444;">Step Three</li>
</ol>
<!-- NESTED LIST -->
<h2>Nested List (UL inside OL)</h2>
<ol style="list-style-type:decimal; background:#f0fdf4; padding:15px; border-radius:8px;
width:280px;">
<li style="margin:6px 0;">Frontend
<ul style="list-style-type: circle; margin-top:6px; padding-left:20px;">
<li style="color:#0a58ca;">HTML</li>
<li style="color:#0a58ca;">CSS</li>
<li style="color:#0a58ca;">JavaScript</li>
</ul>
</li>
<li style="margin:6px 0;">Backend
<ul style="list-style-type: disc; margin-top:6px; padding-left:20px;">
<li style="color:#059669;">Python</li>
<li style="color:#059669;">Node.js</li>
</ul>
</li>
</ol>
<!-- DESCRIPTION LIST -->
<h2>Description List (DL)</h2>
<dl style="background:#fef9c3; padding:15px; border-radius:8px; width:300px;">
<dt style="font-weight:bold; color:#7c2d12;">HTML</dt>
<dd style="margin:0 0 10px 20px; color:#444;">The standard markup language for creating
webpages.</dd>
<dt style="font-weight:bold; color:#7c2d12;">CSS</dt>
<dd style="margin:0 0 10px 20px; color:#444;">Stylesheet language used to describe the look of a
webpage.</dd>
<dt style="font-weight:bold; color:#7c2d12;">JavaScript</dt>
<dd style="margin:0 0 10px 20px; color:#444; list-style-type: circle;">Programming language that
makes webpages interactive.</dd>
</dl>
• list-style-type - Specifies the type of list-item marker(circle, disc, square, upper-roman, lower-
roman, decimal, lower-alpha)
list-style-image - Specifies an image as the list-item marker, list-style-position - Specifies the position of
the list-item markers, list-style - A shorthand property for the properties above
list-style-image: url('sqpurple.gif');
list-style-type: square;
tables
<table>: Defines a table.
<tr>: Defines a table row.
<td>: Defines a table cell.
<th>: Defines a table header cell.
<caption>: Provides a title or caption for the table.
<thead>: Groups the header content of the table.
<tbody>: Groups the body content of the table.
<tfoot>: Groups the footer content of the table.
<colgroup> and <col>: Used for styling or applying attributes to entire columns.
border-width, border-style, border-color, text-align, padding, text-align, border-spacing, rowspan, col-
span, Responsive table(using div, Set the overflow-x property to auto for the <div> element)
div.tablecontainer { overflow-x: auto;},
, tr:nth-child(even) {background-color: #f2f2f2;}<!-- odd row different color, even row different.-->
Border values: Dotted, dashed ,solid,double ,groove, ridge, inset, outset, none, hidden
<colgroup>
<col span="3">
<col span="2" style="background-color: pink"></colgroup>
<col span="3" style="visibility: collapse">(another option. 3 cols will not displayed)
<div class="tablecontainer">
<table style=”border: 1px solid black; border-collapse: collapse;
border-radius: 10px;”>
<thead>
<tr>
<th colspan="2">Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alice</td>
<td>30</td>
<td>New York</td>
</tr>
<tr>
<td>Bob</td>
<td>25</td>
<td>London</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>55</td>
<td> </td>
</tfoot>
</table>
</div>
HTML Forms
Type Description
<input type="text"> Displays a single-line text input field
<input type="radio"> Displays a radio button (for selecting one of many choi
<input type="checkbox"> Displays a checkbox (for selecting zero or more of many
<input type="submit"> Displays a submit button (for submitting the form)
<input type="button"> Displays a clickable button
<!DOCTYPE html>
<html>
<head>
<title>Form Example</title>
<style>
body {
font-family: Arial, sans-serif;
background: #f2f2f2;
padding: 20px;
}
form {
background: #fff;
padding: 20px;
border-radius: 8px;
width: 350px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
label {
display: inline-block;
width: 100px;
margin-bottom: 8px;
}
input[type="text"],
input[type="date"] {
width: 200px;
padding: 6px;
margin-bottom: 12px;
border: 1px solid #ccc;
border-radius: 4px;
}
input[type="radio"],
input[type="checkbox"] {
margin-left: 5px;
}
.btn {
margin-top: 12px;
}
input[type="submit"],
button {
background-color: #4CAF50;
color: white;
padding: 8px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type="submit"]:hover,
button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<form>
<!-- Text Input -->
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br>
<!-- Date of Birth -->
<label for="dob">DOB:</label>
<input type="date" id="dob" name="dob" required><br>
<!-- Radio Buttons -->
<label>Gender:</label>
<input type="radio" id="male" name="gender" value="Male" required>
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="Female">
<label for="female">Female</label><br><br>
<!-- Checkbox -->
<label>Hobbies:</label><br>
<input type="checkbox" id="reading" name="hobby" value="Reading">
<label for="reading">Reading</label>
<input type="checkbox" id="sports" name="hobby" value="Sports">
<label for="sports">Sports</label><br><br>
<!-- Submit Button -->
<div class="btn">
<input type="submit" value="Submit">
<button type="button" onclick="alert('Button clicked!')">Click
Me</button>
</div>
</form>
</body>
</html>
Tooltip
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
cursor: pointer;
}
.tooltiptext {
visibility: hidden;
width: 130px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body>
<h2>Basic CSS Tooltip Code</h2>
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Some tooltip text</span>
</div>
<p>Note that the position of the tooltip text isn't very good. Go back to
the tutorial and continue reading on how to position the tooltip in a
desirable way.</p>
</body>
</html>
Block-level Elements(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{ default display value}.)
<p>,<div>,<address>,<article>,<aside><blockquote><canvas><dd><div><dl><dt><fieldset><figcaption><
figure><footer><form><h1><h6><header><hr><li><main><nav><noscript><ol><p><pre><section><table
><tfoot><ul><video>
Inline Elements
An inline element does not start on a new line. An inline element only takes up as much width as
necessary. An inline element cannot contain a block-level element
<a><abbr><acronym><b><bdo><big><br><button><cite><code><dfn><em><i><img><input><kbd><labe
l><map><object><output><q><samp><script><select><small><span><strong><sub><sup><textarea><ti
me><tt><var>
The <div> Element
The <div> element is often used as a container for other HTML elements. The <div> element has no
required attributes, but style, class and id are common. When used together with CSS, the <div>
element can be used to style blocks of content. When more than one type of tags in same div then its
called container. The class attribute can be used on any HTML element.
div {
width:300px;
margin:auto;
}
.city { /*if p.city used then only p tag will be applied, use* to
apply on all, if you want only two tags styled then p,h2 */
width:100%;
overflow:auto; float:left; display: inline-block;}
<div class="city">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>
<style>
.note {
font-size: 120%;
color: red;
}
</style>
</head>
<body>
<h1>My <span class="note">Important</span> Heading</h1>
<p>This is some <span class="note">important</span> text.</p>
Alignment (add some responsiveness)
<!-- display: flex; OR display: grid;
grid-template-columns: 33% 33% 33%;-->
The id Attribute
The id attribute specifies a unique id for an HTML element. The value of the id attribute must be unique
within the HTML document. 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:
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
<h1 id="myHeader">My Cities</h1>
An HTML iframe is used to display a web page within a web page.
<iframe src="demo_iframe.htm" height="200" width="300" title="Ifram
e Example"></iframe> or
<iframe src="demo_iframe.htm" style="height:200px;width:300px;" tit
le="Iframe Example"></iframe>
HTML Layout Elements and Techniques
<header> - Defines a header for a document or a section
<nav> - Defines a set of navigation links
<nav>
<a href="/html/">HTML</a>
<a href="/css/">CSS</a>
<a href="/js/">JavaScript</a>
<a href="/jquery/">jQuery</a>
</nav>
<section> - Defines a section in a document
Chapters, Introduction ,News items,Contact information
<article> - Defines independent, self-contained content
Forum posts, Blog posts, User comments, Product cards, Newspaper articles
<aside> - Defines content aside from the content (like a sidebar)
<footer> - Defines a footer for a document or a section
authorship information, copyright information, contact information, sitemap, back to top links, related
documents
<details> - Defines additional details that the user can open and close on demand
<summary> - Defines a heading for the <details> element
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Semantic HTML Example</title>
</head>
<body style="font-family:Arial, sans-serif; margin:20px;">
<!-- Header -->
<header style="background:#f4f4f4; padding:10px; text-align:center;">
<h1>My Semantic HTML Page</h1>
</header>
<!-- Navigation -->
<nav style="background:#ddd; padding:10px; margin:10px 0;">
<a href="#" style="margin-right:15px;">Home</a>
<a href="#" style="margin-right:15px;">About</a>
<a href="#">Contact</a>
</nav>
<!-- Main Content -->
<main style="display:flex; gap:20px;">
<!-- Article -->
<article style="flex:3; background:#f9f9f9; padding:15px;">
<h2>Learning Semantic HTML</h2>
<p>
Semantic HTML makes code more <mark>readable</mark> and accessible.
It improves SEO and helps screen readers.
</p>
<!-- Section inside Article -->
<section style="margin-top:15px;">
<h3>Benefits</h3>
<ul>
<li>Improved accessibility</li>
<li>Better structure</li>
<li>SEO friendly</li>
</ul>
</section>
<!-- Figure with Figcaption -->
<figure style="margin-top:15px; text-align:center;">
<img src="https://via.placeholder.com/200" alt="Placeholder image">
<figcaption>Figure 1: Example Image with Caption</figcaption>
</figure>
<!-- Details & Summary -->
<details style="margin-top:15px;">
<summary style="cursor:pointer;">Read More</summary>
<p>
Semantic elements like <code><header></code>,
<code><article></code>, and <code><footer></code>
describe meaning instead of presentation.
</p>
</details>
<!-- Time -->
<p style="margin-top:15px;">
Last updated on <time datetime="2025-09-28">September 28, 2025</time>.
</p>
</article>
<!-- Aside -->
<aside style="flex:1; background:#eef; padding:15px;">
<h3>Quick Links</h3>
<ul>
<li><a href="#">HTML Basics</a></li>
<li><a href="#">CSS Styling</a></li>
<li><a href="#">JavaScript Intro</a></li>
</ul>
</aside>
</main>
<!-- Footer -->
<footer style="background:#f4f4f4; padding:10px; text-align:center; margin-top:20px;">
<p>© 2025 My Semantic Page</p>
</footer>
</body>
</html>
HTML Layout Techniques
CSS frameworks, CSS float property, CSS grid
CSS flexbox(Use of flexbox ensures that elements behave predictably when the page layout must
accommodate different screen sizes and different display devices)
HTML Event Attributes
https://www.w3schools.com/tags/ref_eventattributes.asp
Google icons
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<i class="material-icons">cloud</i>
<i class="material-icons">favorite</i>
<i class="material-icons">attachment</i>
<i class="material-icons">computer</i>
<i class="material-icons">traffic</i>
</body>
</html>
Project responsiveness
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
*{
margin: 0;
box-sizing: border-box;
body {
font-family: "Lucida Sans", sans-serif;
video {
width: 100%;
height: auto;
.grid-container {
display: grid;
grid-template-areas:
'header header header header header header'
'menu main main main main right'
'footer footer footer footer footer footer';
gap: 10px;
background-color: white;
padding: 10px;
.grid-container > div {
padding: 10px;
font-size: 16px;
.item1 {
grid-area: header;
background-color: purple;
text-align: center;
color: #ffffff;
}
.item1 > h1 {
font-size: 40px;
.item2 {
grid-area: menu;
.item2 ul {
list-style-type: none;
margin: 0;
padding: 0;
.item2 li {
padding: 8px;
margin-bottom: 7px;
background-color: #33b5e5;
color: #ffffff;
.item2 li:hover {
background-color: #0099cc;
.item3 {
grid-area: main;
}
.item3 > h1 {
font-size: 30px;
margin-bottom: 7px;
.item3 > p {
margin-bottom: 7px;
.item4 {
grid-area: right;
border: 2px solid #0099cc;
background-color: white;
padding: 15px;
color: #000000;
.item4 > h2 {
font-size: 20px;
padding-bottom: 10px;
.item4 li {
padding: 5px;
margin-bottom: 5px;
.item5 {
grid-area: footer;
background-color: #0099cc;
color: #ffffff;
text-align: center;
@media only screen and (max-width: 600px) {
.item1 {grid-area: 1 / span 6;}
.item2 {grid-area: 2 / span 6;}
.item3 {grid-area: 3 / span 6;}
.item4 {grid-area: 4 / span 6;}
.item5 {grid-area: 5 / span 6;}
@media only screen and (min-width: 600px) {
.item1 {grid-area: 1 / span 6;}
.item2 {grid-area: 2 / span 1;}
.item3 {grid-area: 2 / span 4;}
.item4 {grid-area: 3 / span 6;}
.item5 {grid-area: 4 / span 6;}
@media only screen and (min-width: 768px) {
.item1 {grid-area: 1 / span 6;}
.item2 {grid-area: 2 / span 1;}
.item3 {grid-area: 2 / span 4;}
.item4 {grid-area: 2 / span 1;}
.item5 {grid-area: 3 / span 6;}
</style>
</head>
<body>
<div class="grid-container">
<div class="item1"><h1>Chania</h1></div>
<div class="item2">
<ul>
<li>The Flight</li>
<li>The City</li>
<li>The Island</li>
<li>The Food</li>
</ul>
</div>
<div class="item3">
<h1>The City</h1>
<p>Chania is the capital of the Chania region on the island of Crete.</p>
<p>The city can be divided in two parts, the old town and the modern city. The old town is situated
next to the old harbour and is the matrix around which the whole urban area was developed.</p>
<p>Chania lies along the north west coast of the island Crete.</p>
<video width="400" controls>
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
</div>
<div class="item4">
<h2>Facts:</h2>
<ul>
<li>Chania is a city on the island of Crete</li>
<li>Crete is a Greek island in the Mediterranean Sea</li>
</ul>
</div>
<div class="item5"><p>Resize the browser window to see how the content respond to the
resizing.</p></div>
</div>
</body>
</html>
Template
https://www.w3schools.com/css/css_rwd_templates.asp
