HTML, CSS and Web Design - Class Notes
Introduction to HTML
HTML (HyperText Markup Language) is used to create web pages and
structure content.
Developed by Tim Berners-Lee in 1991.
Objective: Structure content, link pages, display multimedia.
Basic Structure of HTML
<!DOCTYPE html>
<html>
<head><title>Title</title></head>
<body>Content</body>
</html>
Header, Body and Paragraph Tags
<h1>Heading</h1> to <h6>Heading</h6>
<body>Visible content</body>
<p>Paragraph</p>
Forms and Input Tags
<form>, <input>, <textarea>, <select>, <fieldset>
Used to collect user data.
Table Tag
<table>, <tr>, <th>, <td> used to create tables.
Other Tags
<img> for images
<a> for links
<iframe> to embed pages
Lists
<ol> Ordered list
<ul> Unordered list
<li> List item
DIV Tag
<div> is a block-level container used for layout and grouping elements.
Navbar Design
Navigation bar used for links between pages. Designed using <div> and
CSS.
Introduction to CSS
CSS (Cascading Style Sheets) styles HTML elements.
Types of CSS
Inline, Internal, External CSS
CSS Selectors
Element, Class, ID selectors
Responsiveness
Media queries help adapt layout for mobile, tablet, desktop.
HTML Form Output - Class Notes
Form Output (Visual Explanation)
When the HTML form code is executed in a browser, the following layout is displayed:
Text-Based Layout
Student Registration Form
Full Name: [______________]
Email: [______________]
Password: [______________]
Gender: ( ) Male ( ) Female
Hobbies: [ ] Reading [ ] Sports [ ] Music
City: [Mumbai ▼]
Feedback:
[________________________]
[________________________]
[ Register ]
Explanation
- Text fields for name, email, password
- Radio buttons for gender
- Checkboxes for hobbies
- Dropdown for city
- Textarea for feedback
- Submit button to send data
Form Creation in HTML - Class Notes
Introduction
HTML forms are used to collect user input such as name, email, password, etc. Data is sent
to a server for processing.
Basic Syntax
<form action='[Link]' method='post'>
<!-- form elements -->
</form>
Input Tag
<input type='text'>
<input type='password'>
<input type='email'>
<input type='submit'>
Label Tag
<label>Name:</label>
<input type='text'>
Textarea
<textarea rows='4' cols='30'></textarea>
Select (Dropdown)
<select>
<option>Option 1</option>
<option>Option 2</option>
</select>
Form Methods
GET: Data visible in URL, less secure
POST: Data hidden, more secure
Complete Example
<form>
Name: <input type='text'><br>
Password: <input type='password'><br>
<input type='submit'>
</form>
DIV Tag and Navbar Design - Class
Notes
1. Introduction to DIV Tag
The <div> tag stands for division and is a block-level container used to group HTML
elements for styling and layout.
Features of DIV
- Block-level element
- Used for layout design
- Can contain text, images, and other elements
- Works with CSS
Example of DIV
<div class="box">This is a DIV box</div>
Uses of DIV
- Page layout
- Sections like header, footer
- Styling groups
2. Navbar Design
A navigation bar is used to move between pages of a website.
Types of Navbar
- Horizontal
- Vertical
- Responsive
Basic Navbar Example
<div class="navbar">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</div>
Features of Navbar
- Easy navigation
- Improves user experience
- Can include hover effects and dropdowns