Scribd
Upload
15 views

HTML& CSS (Eng)

This book is for html and some hand written notes.

Uploaded by

Shubham Kumar
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
15 views

HTML& CSS (Eng)

This book is for html and some hand written notes.

Uploaded by

Shubham Kumar
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 24

Module 1: Introduction to HTML

What is HTML?

HTML stands for HyperText Markup Language. It is the standard language for creating web
pages and web applications. It defines the structure of a webpage using tags.

Definition and Importance of HTML

● HTML is the backbone of web pages. It allows developers to create structured


documents by denoting structural elements like headings, paragraphs, links, images,
and more.
● It is crucial because it ensures that content on the web is properly formatted and
readable by both browsers and search engines.

HTML vs. Other Web Technologies (CSS, JavaScript)

● HTML: Defines the structure of the content.


● CSS (Cascading Style Sheets): Styles the content (e.g., colors, fonts, layouts).
● JavaScript: Adds interactivity to the content (e.g., animations, dynamic features).

Basic Structure of an HTML Document

An HTML document is made up of various tags. Here's the basic structure:

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Page Title</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a paragraph.</p>
</body>
</html>

● <!DOCTYPE html>: Declares the document type as HTML5.


● <html>: The root element of the page.
● <head>: Contains metadata, title, and links to stylesheets or scripts.
● <body>: Contains the content that displays on the webpage.

Module 2: HTML Text Formatting

Headings and Paragraphs

● Headings: Use <h1> to <h6> for different levels of headings.


● Paragraphs: Use <p> to create paragraphs of text.

Example:

html

<h1>Main Heading</h1>
<h2>Subheading</h2>
<p>This is a paragraph explaining some content.</p>

Text Formatting Tags

● Bold: <b> for bold text, <strong> for important text.


● Italic: <i> for italic text, <em> for emphasized text.
● Underline: <u> for underlined text.
● Line Break: <br> for a new line without starting a new paragraph.

Example:

html

<p>This is <b>bold</b>, <i>italic</i>, and <u>underlined</u> text.</p>


<p>This text contains a line break.<br>See, it starts on a new
line.</p>

Module 3: HTML Elements and Attributes

What are HTML Elements?

An HTML element consists of a start tag, content, and an end tag. Example:
html

<p>This is a paragraph element.</p>

Opening and Closing Tags

Most HTML elements have opening and closing tags. Example: <h1></h1>. Some, like <img>,
are self-closing.

Attributes in HTML

Attributes provide additional information about elements. They are always in the opening tag,
like class, id, and title.

Example:

html

<p id="intro" class="main-text" title="Introduction">This is a


paragraph with attributes.</p>

Understanding href, src, alt Attributes

● href: Specifies the URL of a link.


● src: Specifies the source of an image.
● alt: Provides alternative text for an image.

Module 4: Lists

Ordered Lists

Use <ol> for numbered lists.

Example:

html

<ol>
<li>First item</li>
<li>Second item</li>
</ol>

Unordered Lists

Use <ul> for bulleted lists.

Example:

html

<ul>
<li>Item one</li>
<li>Item two</li>
</ul>

Description Lists

Use <dl> for description lists, <dt> for terms, and <dd> for descriptions.

Example:

html

<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
</dl>

Module 5: Links and Images

Creating Hyperlinks

Use the <a> tag to create hyperlinks.

Example:

html
<a href="https://www.example.com">Visit Example</a>

Opening Links in New Tabs

Use the target="_blank" attribute to open links in a new tab.

Example:

html

<a href="https://www.example.com" target="_blank">Open in New Tab</a>

Inserting Images

Use the <img> tag to insert images. Always include the alt attribute for accessibility.

Example:

html

<img src="image.jpg" alt="Description of image" width="300"


height="200">

Module 6: Tables

Basic Table Structure

Tables use the following tags: <table>, <tr> (table row), <th> (table header), and <td>
(table data).

Example:

html

<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
</tr>
</table>

Adding Borders, Captions, and Spacing

Use the border, cellpadding, and cellspacing attributes to control table appearance.

Module 7: Forms and Inputs

Basic Form Elements

Forms allow users to submit data to the server. Basic form elements include <form>, <input>,
<textarea>, and <button>.

Example:

html

<form action="submit.php" method="post">


<label for="name">Name:</label>
<input type="text" id="name" name="name">
<button type="submit">Submit</button>
</form>

Input Types

● Text: <input type="text">


● Password: <input type="password">
● Email: <input type="email">
● Number: <input type="number">
● Checkbox: <input type="checkbox">
● Radio: <input type="radio">

Form Attributes

● action: The URL to submit the form data to.


● method: Specifies how to send the data (GET/POST).
Labels and Grouping Elements

● <label>: Associates a text label with a form element.


● <fieldset>: Groups related elements in a form.
● <legend>: Provides a caption for a <fieldset>.

Module 8: HTML Semantic Elements

Semantic HTML introduces meaning to elements. It is important for accessibility and SEO.
Common semantic tags include:

● <header>, <nav>, <section>, <article>, <aside>, <footer>

Example:

html

<header>
<h1>Website Title</h1>
</header>

Module 9: Multimedia Elements

Adding Audio
html

<audio src="song.mp3" controls>Your browser doesn't support


audio</audio>

Embedding Videos
html

<video src="video.mp4" controls>Your browser doesn't support


video</video>

Embedding YouTube Videos Using <iframe>


html
<iframe width="560" height="315"
src="https://www.youtube.com/embed/VIDEO_ID" allowfullscreen></iframe>

Module 10: HTML Forms Advanced

Form Validation
html

<input type="email" required>


<input type="password" pattern="[a-zA-Z0-9]{8,}">

Dropdowns and Multiple Selections


html

<select multiple>
<option>Option 1</option>
<option>Option 2</option>
</select>

Module 11: HTML5 New Features

HTML5 introduces new input types like date, time, color, and range, along with semantic
elements like <article>, <figure>, <progress>, and <meter>.

Module 12: Basic Page Layout

Here’s an example combining all the learned elements:

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Simple Webpage</title>
</head>
<body>
<header>
<h1>My Website</h1>
</header>

<nav>
<a href="#home">Home</a> |
<a href="#about">About</a> |
<a href="#contact">Contact</a>
</nav>

<section id="home">
<h2>Welcome to My Website</h2>
<p>This is a simple webpage layout.</p>
</section>

<footer>
<p>&copy; 2024 My Website</p>
</footer>
</body>
</html>

DHTML (Dynamic HTML)


Dynamic HTML (DHTML) refers to a combination of technologies used to create interactive and
dynamic websites without the need for server-side programming or refreshing the webpage.
DHTML involves the integration of HTML, CSS, JavaScript, and the Document Object Model
(DOM) to make web pages more interactive and responsive.

Key Components of DHTML

DHTML is not a new language on its own but rather a combination of:

1. HTML (HyperText Markup Language): Provides the basic structure of the web page.
2. CSS (Cascading Style Sheets): Styles and visually formats HTML elements.
3. JavaScript: Adds interactivity and dynamic behavior to HTML elements.
4. DOM (Document Object Model): A programming interface for HTML documents. It
represents the page so JavaScript can interact with the structure, style, and content
dynamically.

Features of DHTML
Content Manipulation: With DHTML, you can modify the content of HTML elements without
refreshing the page. For example, you can change text, images, or entire sections dynamically.
Example: Changing the text of a paragraph on a button click.
html

<p id="content">This is static text.</p>


<button onclick="changeText()">Click to change text</button>

<script>
function changeText() {
document.getElementById("content").innerHTML = "This is dynamic
text.";
}
</script>

1.

Dynamic Style Changes: You can dynamically change the styles of elements (e.g., color, size,
position) on the page without reloading it.
Example: Changing the background color of a <div> when the user clicks a button.
html

<div id="box" style="width: 100px; height: 100px; background-color:


red;"></div>
<button onclick="changeColor()">Change Color</button>

<script>
function changeColor() {
document.getElementById("box").style.backgroundColor = "blue";
}
</script>

2.
Dynamic Positioning of Elements: Using DHTML, you can change the position of elements on
the page dynamically, enabling animations or interactive user interfaces.
Example: Moving an image across the screen.
html

<img id="movingImage" src="image.jpg" style="position:absolute;


left:0px; top:0px;" alt="Moving Image">
<button onclick="moveRight()">Move Right</button>

<script>
function moveRight() {
var img = document.getElementById("movingImage");
var currentLeft = parseInt(img.style.left);
img.style.left = currentLeft + 50 + "px";
}
</script>

3.

Event Handling: DHTML allows you to respond to various user events such as clicks, hovers,
or form submissions. This helps in making the page more interactive.
Example: Displaying a message when the user hovers over a text.
html

<p onmouseover="showMessage()" onmouseout="hideMessage()">Hover over


this text.</p>
<p id="message" style="display:none;">You are hovering over the
text!</p>

<script>
function showMessage() {
document.getElementById("message").style.display = "block";
}

function hideMessage() {
document.getElementById("message").style.display = "none";
}
</script>

4.
Form Validation: DHTML can be used to perform real-time form validation, ensuring users input
the correct data before submitting the form.
Example: Checking if an email input field is filled before allowing submission.
html

<form onsubmit="return validateForm()">


<label for="email">Email:</label>
<input type="email" id="email" name="email">
<button type="submit">Submit</button>
</form>
<p id="error" style="color: red;"></p>

<script>
function validateForm() {
var email = document.getElementById("email").value;
if (email == "") {
document.getElementById("error").innerHTML = "Email is
required!";
return false;
}
return true;
}
</script>

5.

Advantages of DHTML

1. Improved User Experience: Since DHTML allows changes to be made without


reloading the entire webpage, users experience faster and more interactive web pages.
2. Dynamic Content Updates: Content can be dynamically updated based on user
interactions or other events, providing a more responsive user interface.
3. Faster Page Loads: DHTML allows partial updates of the web page rather than
reloading the entire page, resulting in faster load times.
4. Rich Animations and Effects: You can create engaging animations and effects on web
elements using DHTML, making websites visually appealing.

Examples of DHTML in Use


Interactive Menus: Navigation bars that change colors, expand, or collapse when the user
hovers over them or clicks on menu items.
Example: Expanding/collapsing a menu when clicked.
html

<div id="menu" style="display:none;">


<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<button onclick="toggleMenu()">Toggle Menu</button>

<script>
function toggleMenu() {
var menu = document.getElementById("menu");
if (menu.style.display === "none") {
menu.style.display = "block";
} else {
menu.style.display = "none";
}
}
</script>

1.

Image Slideshows: Websites often use DHTML to create dynamic image galleries or
slideshows that change images after a set period or based on user interaction.
Example: Simple image slideshow.
html

<img id="slideshow" src="image1.jpg" alt="Slideshow Image"


width="300">

<script>
var images = ["image1.jpg", "image2.jpg", "image3.jpg"];
var currentIndex = 0;

function showNextImage() {
currentIndex = (currentIndex + 1) % images.length;
document.getElementById("slideshow").src = images[currentIndex];
}

setInterval(showNextImage, 2000);
</script>

2.
3. Form Validation Feedback: Provide real-time feedback while the user fills out a form,
such as checking if a username is already taken or if a password meets security
requirements.

Common Methods and Properties in DHTML (Using JavaScript and DOM)


getElementById(): Fetches an HTML element by its ID.
javascript

document.getElementById("elementID").innerHTML = "New Content";

1.

getElementsByClassName(): Fetches all HTML elements with a given class name.


javascript

var elements = document.getElementsByClassName("className");

2.

querySelector(): Fetches the first element that matches a CSS selector.


javascript

var element = document.querySelector(".className");

3.

innerHTML: Used to get or set the HTML content of an element.


javascript

document.getElementById("elementID").innerHTML = "New Text";

4.
style: Used to dynamically change the CSS properties of an element.
javascript

document.getElementById("elementID").style.color = "red";

5.

addEventListener(): Adds an event listener to an element to respond to events like clicks,


hovers, or keystrokes.
javascript

document.getElementById("buttonID").addEventListener("click",
function() {
alert("Button clicked!");
});

6.

Limitations of DHTML

1. Browser Compatibility Issues: Older browsers may not support all DHTML features,
leading to inconsistent behavior across different browsers.
2. Client-Side Dependency: Since DHTML relies on client-side technologies (HTML, CSS,
JavaScript), it can be affected by users disabling JavaScript or having incompatible
browsers.
3. Complexity: Large DHTML applications can become difficult to maintain and debug,
especially if not properly organized.

Conclusion

DHTML enables developers to create more dynamic, engaging, and interactive web pages by
combining HTML, CSS, JavaScript, and the DOM. It plays a crucial role in modern web
development by enhancing user experience and allowing for real-time updates and interactivity
without the need to reload web pages.

CSS (Cascading Style Sheets) Overview

What is CSS?
CSS is a stylesheet language used to control the presentation of HTML documents. It helps
define the layout, colors, fonts, spacing, and overall appearance of a webpage.

Importance of CSS

● Presentation Control: CSS allows you to control the look and feel of a website.
● Separation of Content and Style: CSS separates content (HTML) from style (CSS),
making the code easier to maintain.

CSS Syntax and Selectors

CSS Syntax

The basic syntax of CSS consists of a selector, property, and value:

css

selector {
property: value;
}

Example:
css

h1 {
color: blue;
font-size: 24px;
}

CSS Selectors

● Element Selector: Selects all elements of a specific type.


● Class Selector: Selects elements with a specific class (denoted by a dot .).
● ID Selector: Selects a specific element with an ID (denoted by a hash #).

Example:

css

/* Element Selector */
p {
color: green;
}

/* Class Selector */
.text-class {
font-weight: bold;
}

/* ID Selector */
#myParagraph {
font-style: italic;
}

CSS Box Model

What is the Box Model?

The CSS box model treats elements as a box. Each element has content, padding, border, and
margin.

● Content: The actual content (text, images).


● Padding: The space between the content and the border.
● Border: The line surrounding the padding and margin.
● Margin: The space outside the box.

Example:

css

.box {
width: 300px;
height: 150px;
padding: 20px;
border: 5px solid black;
margin: 15px;
}
CSS Backgrounds and Colors

Background Properties

You can set background colors, images, and gradients in CSS.

Example:

css

body {
background-color: lightblue; /* Solid color */
}

.header {
background-image: url('header.jpg'); /* Image */
background-repeat: no-repeat;
background-size: cover; /* Cover the entire area */
}

Text Color

To set the color of text, you use the color property.

Example:

css

h1 {
color: navy;
}

p {
color: darkgreen;
}

CSS Fonts and Text Styling

Font Properties
CSS allows you to set fonts, sizes, and styles.

Example:

css

body {
font-family: Arial, sans-serif; /* Font family */
font-size: 16px; /* Font size */
}

h2 {
font-weight: bold; /* Bold font */
font-style: italic; /* Italic font */
}

Text Alignment and Decoration

You can align and decorate text using various properties.

Example:

css

h1 {
text-align: center; /* Center alignment */
}

a {
text-decoration: none; /* Remove underline */
color: blue; /* Link color */
}

a:hover {
text-decoration: underline; /* Underline on hover */
}

CSS Layouts
Flexbox Layout

Flexbox is a powerful layout model that helps align elements within a flex container.

Example:

css

.container {
display: flex;
justify-content: space-between; /* Space between items */
align-items: center; /* Center items vertically */
}

.item {
flex: 1; /* Flex property */
margin: 10px; /* Margin between items */
}

Grid Layout

CSS Grid is a two-dimensional layout system.

Example:

css

.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 columns */
gap: 10px; /* Gap between grid items */
}

.grid-item {
background-color: lightcoral;
padding: 20px; /* Padding within items */
}

CSS Positioning
Positioning Types

● Static: Default positioning.


● Relative: Positioned relative to its original position.
● Absolute: Positioned relative to its closest positioned ancestor.
● Fixed: Positioned relative to the viewport.
● Sticky: Sticky position based on scroll position.

Example:

css

.relative {
position: relative;
top: 20px; /* Moves down */
}

.absolute {
position: absolute;
right: 0; /* Positioned to the right */
}

.fixed {
position: fixed;
bottom: 0; /* Sticks to the bottom */
}

CSS Transitions and Animations

Transitions

Transitions allow you to animate property changes.

Example:

css

.button {
background-color: blue;
transition: background-color 0.3s ease; /* Transition effect */
}
.button:hover {
background-color: green; /* Change on hover */
}

Animations

CSS animations allow for more complex animations.

Example:

css

@keyframes slide {
from {
transform: translateX(0);
}
to {
transform: translateX(100px);
}
}

.animated {
animation: slide 2s infinite; /* Animation name and duration */
}

CSS Media Queries

Responsive Design

Media queries are used to create responsive designs, allowing you to apply different styles for
different devices.

Example:

css

/* For screens smaller than 600px */


@media (max-width: 600px) {
body {
background-color: lightgreen;
}

h1 {
font-size: 24px; /* Smaller heading */
}
}

/* For screens larger than 600px */


@media (min-width: 601px) {
body {
background-color: lightblue;
}

h1 {
font-size: 36px; /* Larger heading */
}
}

CSS Pseudo-classes and Pseudo-elements

Pseudo-classes

Pseudo-classes are used to style elements based on their specific states.

Example:

css

a:hover {
color: red; /* Change color on hover */
}

input:focus {
border-color: blue; /* Change border color when focused */
}

Pseudo-elements
Pseudo-elements are used to style specific parts of elements.

Example:

css
p::first-line {
font-weight: bold; /* Style first line */
}

h1::before {
content: "Important: "; /* Add content before h1 */
color: red;
}

CSS Conclusion

CSS is essential for styling web pages. It allows you to create visually appealing and
user-friendly websites. Understanding CSS helps you design responsive and attractive
websites.

You might also like