HTML Overview: Structuring an HTML Document
Introduction to HTML
HTML (HyperText Markup Language) is the standard language used to create and structure
content on the web. It provides the basic building blocks of a webpage and defines elements
such as headings, paragraphs, links, images, and more.
Basic Structure of an HTML Document
An HTML document is composed of various elements arranged in a nested hierarchy. The
fundamental structure includes:
• Document Type Declaration: <!DOCTYPE html> defines the document as HTML5.
• <html> tag: The root element of the HTML document.
• <head> section: Contains metadata, title, styles, and scripts.
• <body> section: Contains the visible content of the webpage.
The Head Section
The <head> section contains metadata about the document such as the title, character
encoding, linked CSS and JS files, and SEO-related tags.
The Body Section
The <body> section includes the main content displayed on the webpage. It can contain
headings (<h1> to <h6>), paragraphs (<p>), images (<img>), links (<a>), tables, forms, and
more.
Nesting and Indentation
HTML elements can be nested within each other to create structured layouts. Proper
indentation improves readability and maintainability.
Summary
A well-structured HTML document follows a clear hierarchy, beginning with a DOCTYPE
declaration, followed by the <html>, <head>, and <body> elements. Understanding and using
this structure properly is essential for developing accessible and maintainable web pages.
Validating and Debugging Your Code, Working with Fonts, Text Blocks, Lists and Tables
Validating and Debugging Your Code
What is validation?
• Checking your web pages to ensure they meet HTML and CSS standards.
• Prevents rendering problems and improves accessibility.
Key Tool – W3C Markup Validation Service
• Website: [Link]
• Options:
o Validate by URI (for online pages).
o Validate by File Upload (local files).
o Validate by Direct Input (paste code).
Debugging Beyond Validation
• Use browser Developer Tools (Chrome, Firefox, Edge).
• Inspect and edit elements live.
• Check the DOM, console, and network panels.
Example Issue
• Incorrect HTML tags: <ll> instead of <li> can break lists.
• Debugging steps:
o Open Developer Tools → Inspect.
o Locate and correct tag errors.
Debugging JavaScript
• Use Sources/Debugger panel.
• Features:
o Set breakpoints.
o Step Over, Step Into, Step Out to trace code execution.
2. Working with Special Characters
• Use HTML entities to display special characters:
o é or é = “é”.
• Ensures correct rendering across browsers.
3. Working with Fonts
Formatting Text in HTML
• Tags:
o <sup> (superscript), <sub> (subscript)
o <em> (emphasize/italic), <strong> (bold)
o <pre> (preformatted text)
Modern Font Control with CSS
• Properties:
o font-family – Typeface selection.
o font-size – Text size.
o color – Font color.
Example:
<p style="font-family: Arial, 'Times Roman', sans-serif; font-size: 14pt; color: green;">
This is styled text.
</p>
Aligning Text with Attributes
<p style="text-align:left;">Left aligned</p>
<p style="text-align:right;">Right aligned</p>
<p style="text-align:center;">Centered text</p>
You can also use class and id attributes to apply reusable styles.
4. Lists
Types of Lists in HTML
1. Ordered List (numbered):
2. <ol>
3. <li>First</li>
4. <li>Second</li>
5. </ol>
6. Unordered List (bulleted):
7. <ul>
8. <li>Item A</li>
9. <li>Item B</li>
10. </ul>
11. Definition List:
12. <dl>
13. <dt>Term</dt>
14. <dd>Definition</dd>
15. </dl>
5. Tables
Creating a Simple Table
<table>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
Styling Tables with CSS
table, tr, th, td {
border: 1px solid black;
border-collapse: collapse;
padding: 3px;
Sizing and Alignment
<td style="width:20%;">Narrow</td>
<td style="width:80%;">Wide</td>
Spanning Cells
<th colspan="2">Description</th>
<td rowspan="2">Merged cell</td>
1. Using External and Internal Links
• External Links
o Definition: Links that point to other websites.
o Syntax:
o <a href="[Link] target="_blank">Visit Example</a>
o Best Practices:
▪ Use descriptive anchor text.
▪ Add target="_blank" to open in a new tab.
▪ Validate URLs.
• Internal Links
o Definition: Links within the same website or page.
o Syntax:
o <a href="#section1">Go to Section 1</a>
o Use id attributes for navigation anchors:
o <h2 id="section1">Section 1</h2>
2. Working with Colors
• HTML uses CSS for color styling.
• Color Formats:
o Named colors: red, blue
o Hex: #FF0000
o RGB: rgb(255,0,0)
o HSL: hsl(0, 100%, 50%)
• Example:
• <p style="color:blue;">This is blue text</p>
• Ensure contrast for accessibility.
3. Working with Images
• Syntax:
• <img src="[Link]" alt="Description" width="400" height="300">
• Attributes:
o src: image source
o alt: alternative text for accessibility
o width and height
• Best Practices:
o Optimize file size.
o Use responsive images (max-width:100%).
• Image Formats:
o JPEG: Photos
o PNG: Transparency
o GIF: Animations
o SVG: Vector images
4. Multimedia Integration
• Audio:
• <audio controls>
• <source src="audio.mp3" type="audio/mpeg">
• </audio>
• Video:
• <video width="320" height="240" controls>
• <source src="video.mp4" type="video/mp4">
• </video>
• External Media:
<iframe width="560" height="315" src="[Link]
1. Introduction CSS (Cascading Style Sheets) is a language that describes how HTML elements
should be displayed. It allows developers to separate the content (HTML) from the
presentation (design and layout). CSS makes web pages more attractive and provides control
over layout, colors, fonts, and overall appearance. 2. Syntax CSS consists of a selector and a
declaration block.
2. The declaration block contains one or more declarations separated by semicolons, each
consisting of a property and a value. selector { property: value; }
3. Example: p { color: blue; font-size: 16px; } 3. Types of CSS Inline CSS: Applied directly to an
HTML element using the style attribute.
This is red text.
Internal CSS: Defined within the section of an HTML document.
External CSS: Written in a separate .css file and linked to the HTML file. /* [Link] */ h1 { color:
navy; }
4. Selectors Selectors are used to target HTML elements. Common selectors include: Element
Selector: Targets all instances of an element (e.g., p, h1).
5. Class Selector: Targets elements with a specific class (e.g., .classname).
6. ID Selector: Targets a unique element (e.g., #idname). Group Selector: Groups multiple
selectors (e.g., h1, h2, h3). Example: .intro { font-weight: bold; color: teal; } #main {
background-color: lightgray; }
7. 5. CSS Box Model The CSS box model describes the rectangular boxes generated for elements.
It consists of:
8. Content: The actual text or images. Padding: Space between content and border. Border:
Surrounds the padding.
9. Margin: Space between the element and others. Example: div { width: 300px; padding: 20px;
border: 5px solid black; margin: 10px; }
10. . Cascading and Specificity Cascading refers to the order in which styles are applied. Specificity
determines which rule takes precedence. Inline styles have higher specificity than internal and
external styles.
11. . Responsive Design CSS enables responsive design using media queries: @media (max-width:
600px) { body { background-color: lightblue; } } 8. Conclusion CSS is vital for modern web
design and development. Understanding its rules and practicing with examples is key to
creating attractive, user-friendly websites.
Working with Margins, Padding, Alignment, and Floating in CSS
1. Margins
• Definition: Margins are the outermost spacing around an element, creating space between
the element and surrounding elements.
• Properties:
o margin-top
o margin-right
o margin-bottom
o margin-left
o margin (shorthand)
• Values:
o Length units (px, em, rem)
o Percentage (% of containing block)
o auto (often used for centering)
• Example:
• .box {
• margin: 20px;
• }
2. Padding
• Definition: Padding is the space between the element’s content and its border.
• Properties:
o padding-top
o padding-right
o padding-bottom
o padding-left
o padding (shorthand)
• Values:
o Length units (px, em, rem)
o Percentage (% of containing block)
• Example:
• .box {
• padding: 15px 30px;
• }
3. Alignment
• Horizontal Alignment:
o Using text-align: left | right | center | justify
o Centering block elements with margin: 0 auto;
• Vertical Alignment:
o Using Flexbox:
o .container {
o display: flex;
o align-items: center;
o justify-content: center;
o }
o Using line-height for text
• Example:
• p{
• text-align: justify;
• }
4. Floating
• Definition: Float is used to position elements to the left or right of their container, allowing
text and inline elements to wrap around.
• Properties:
o float: left | right | none | inherit
o clear: left | right | both | none
• Example:
• img {
• float: right;
• margin: 10px;
• }
• Clearing Floats:
• .clearfix::after {
• content: "";
• display: table;
• clear: both;
}
Using CSS to Do More with Lists, Text, and Navigation
1. Enhancing Lists with CSS
Lists (ordered <ol>, unordered <ul>, and definition <dl>) can be customized significantly using CSS.
Key Properties:
• list-style-type – Changes bullet or number style.
• ul {
• list-style-type: square; /* options: disc, circle, square, none */
• }
• list-style-image – Uses a custom image as a bullet.
• ul {
• list-style-image: url('[Link]');
• }
• list-style-position – Controls bullet position.
• ul {
• list-style-position: inside; /* or outside */
• }
• list-style – Shorthand property.
• ul {
• list-style: circle inside;
• }
• Custom Styling with Pseudo-Elements:
• li::before {
• content: "★ ";
• color: gold;
• }
2. Styling Text with CSS
Key Text Properties:
• Font Control:
o font-family: Choose typeface.
o font-size: Set size using px, em, rem, etc.
o font-weight: Normal, bold, lighter, numeric (100–900).
• p{
• font-family: Arial, sans-serif;
• font-size: 16px;
• font-weight: bold;
• }
• Text Appearance:
o color: Sets text color.
o text-transform: uppercase, lowercase, capitalize.
o text-decoration: underline, line-through, none.
o letter-spacing, word-spacing, line-height.
• h1 {
• text-transform: uppercase;
• letter-spacing: 2px;
• }
• Text Alignment:
o text-align: left, right, center, justify.
o vertical-align: baseline, middle, top, bottom.
• Text Shadow:
• h2 {
• text-shadow: 2px 2px 5px gray;
• }
3. Creating Navigation with CSS
Navigation menus are essential for websites. CSS enhances them visually and functionally.
Basic Steps:
1. Use an unordered list <ul> for structure.
2. Style list items <li> to look like buttons or links.
3. Remove default bullets and spacing.
Example: Horizontal Navigation
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
CSS:
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
background-color: #333;
nav li {
margin: 0 10px;
nav a {
text-decoration: none;
color: white;
padding: 10px 15px;
display: block;
nav a:hover {
background-color: #555;
Vertical Navigation Example:
nav ul {
list-style: none;
width: 200px;
}
nav li {
margin-bottom: 5px;
nav a {
display: block;
background: #eee;
padding: 8px;
color: #000;
nav a:hover {
background: #ddd;
Advanced Navigation Enhancements:
• Dropdown Menus using :hover and position: absolute.
• Sticky Navigation using position: fixed.
• Responsive Menus with Flexbox or CSS Grid.
Creating Layouts Using Modern CSS Techniques
1. Introduction to CSS Layouts
Modern CSS offers powerful layout tools that go far beyond traditional floats and positioning. The
two most widely used layout systems today are:
• Flexbox (Flexible Box Layout)
• CSS Grid Layout
2. Flexbox (Flexible Box Layout)
Purpose: Best for one-dimensional layouts – arranging items in a row or a column.
Key Concepts:
• Container and items: A parent element becomes a flex container using display: flex;.
• Direction: flex-direction defines the main axis (row, row-reverse, column, column-reverse).
• Alignment:
o justify-content – Align items along the main axis.
o align-items – Align items along the cross axis.
o align-content – Align multiple lines.
• Wrapping: flex-wrap – Controls whether items wrap to the next line.
• Ordering: order – Changes the visual order of flex items.
Example:
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
.item {
flex: 1; /* items grow/shrink equally */
margin: 5px;
3. CSS Grid Layout
Purpose: Best for two-dimensional layouts – controlling rows and columns simultaneously.
Key Concepts:
• Container: Set display: grid;.
• Defining tracks: grid-template-columns and grid-template-rows.
• Gap: gap property for spacing between items.
• Positioning items: grid-column, grid-row.
• Auto-placement: Items are automatically placed unless explicitly positioned.
• Named areas: grid-template-areas allows semantic layouts.
Example:
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: auto;
gap: 20px;
.header {
grid-column: 1 / 4; /* spans across all columns */
4. Combining Flexbox and Grid
• Grid for overall page structure (header, sidebar, content, footer).
• Flexbox inside grid items for flexible arrangement of components.
• This hybrid approach is common in real-world responsive design.
5. Responsive Layout Techniques
• Media Queries: Adjust layouts based on screen size.
• @media (max-width: 768px) {
• .container {
• grid-template-columns: 1fr;
• }
• }
• Relative Units: Use %, em, rem, fr, minmax(), and auto-fit for flexibility.
• Flexbox + wrap for stacked layouts on smaller screens.
6. Modern Enhancements
• CSS Variables (var()) for consistent spacing and colors.
• Subgrid (emerging feature) for shared grid layouts inside items.
• Clamp and min(), max() functions for responsive sizing.
7. Older Techniques vs. Modern Methods
• Floats and positioning are now mostly for specific cases (images, small adjustments).
• Flexbox and Grid replace tables and floats for layout purposes.
1. Introduction to Backgrounds and Borders
• Backgrounds and borders enhance the design and aesthetics of a web page.
• They can be applied to most HTML elements.
• CSS provides multiple properties to control their appearance, including color, images,
gradients, sizes, and rounded corners.
2. Background Properties in CSS
2.1 Background Color
• Sets the background color of an element.
• Syntax:
• background-color: lightblue;
2.2 Background Image
• Allows adding an image as the background.
• Syntax:
• background-image: url('[Link]');
2.3 Background Repeat
• Controls how the background image is repeated.
• Values:
o repeat (default) – repeats both horizontally and vertically
o repeat-x – repeats horizontally
o repeat-y – repeats vertically
o no-repeat – no repetition
2.4 Background Position
• Specifies the starting position of a background image.
• Syntax:
• background-position: center top;
2.5 Background Size
• Defines how a background image is scaled.
• Values:
o auto (default)
o cover – scales to cover the entire element
o contain – scales to fit inside the element
2.6 Background Attachment
• Determines whether the background scrolls with the page or stays fixed.
• Values:
o scroll (default)
o fixed
o local
2.7 Multiple Backgrounds
• CSS supports multiple background layers separated by commas:
• background: url('[Link]') top left no-repeat,
• url('[Link]') bottom right repeat;
3. Border Properties in CSS
3.1 Basic Border
• Syntax:
• border: 2px solid black;
• Components:
o Width: thickness of the border (thin, medium, thick or px value)
o Style: solid, dashed, dotted, double, groove, ridge, inset, outset, none
o Color: border color
3.2 Individual Border Sides
• You can style each side separately:
• border-top: 5px solid red;
• border-right: 3px dashed blue;
3.3 Border Radius (Rounded Corners)
• Used to create rounded corners or circles.
• Syntax:
• border-radius: 10px;
• For circular images:
• border-radius: 50%;
3.4 Border Image
• Allows an image to be used as a border.
• Example:
• border: 10px solid transparent;
• border-image: url([Link]) 30 round;
4. Shorthand Property for Backgrounds
• You can combine all background properties into one line:
background: #f0f0f0 url('[Link]') no-repeat center/cover fixed;
1. Introduction to CSS Transformations and Transitions
Transformations and transitions in CSS are powerful techniques used to animate, rotate, scale,
skew, and move elements smoothly without requiring JavaScript.
2. CSS Transformations
Definition
The transform property allows you to modify an element's shape, size, and position in 2D or 3D
space.
Common Transform Functions
1. translate(x, y) – Moves an element along the X and Y axes.
2. transform: translate(50px, 20px);
3. rotate(angle) – Rotates an element clockwise or counterclockwise.
4. transform: rotate(45deg);
5. scale(x, y) – Changes the size of an element.
6. transform: scale(1.5, 1.5);
7. skew(x, y) – Skews an element along the X and Y axes.
8. transform: skew(20deg, 10deg);
9. matrix(a, b, c, d, e, f) – Applies multiple transformations in one function.
3D Transformations
• rotateX(), rotateY(), rotateZ()
• translateZ()
• perspective – Creates a sense of depth.
Example:
.box {
transform: rotateY(45deg) translateX(50px);
3. CSS Transitions
Definition
CSS transitions allow elements to change property values smoothly over a specified duration.
Properties of Transitions
1. transition-property – Specifies the CSS property to animate.
2. transition-duration – Time taken for the transition.
3. transition-timing-function – Speed curve (ease, linear, ease-in, ease-out).
4. transition-delay – Delay before starting the transition.
Shorthand Syntax
transition: property duration timing-function delay;
Example:
.button {
background-color: blue;
transition: background-color 0.5s ease-in-out;
.button:hover {
background-color: red;
4. Combining Transformations and Transitions
You can animate transformations using transitions:
.box {
transform: scale(1);
transition: transform 0.3s ease-in-out;
.box:hover {
transform: scale(1.2) rotate(10deg);
5. Best Practices
• Use hardware-accelerated transforms (translate, scale) for smoother animations.
• Avoid animating properties like width or top; prefer transform for performance.
• Use will-change: transform; to hint at animations.
6. Applications
• Buttons with hover effects
• Interactive menus
• Image galleries with zoom and rotation
• Cards flipping (3D)
