π Web Designing with HTML & CSS
Web Design with HTML & CSS
Learn to build beautiful, responsive websites from the ground up
1. Introduction to HTML
What is HTML?
HTML (HyperText Markup Language) is the standard markup language for creating web pages and web applications. It provides the structural framework for content on the web.
Key Concept: HTML is not a programming language—it's a markup language that defines the structure and meaning of web content by using various elements and tags.
History of HTML
HTML was created by Tim Berners-Lee in 1991 while working at CERN (European Organization for Nuclear Research). His vision was to create a system that would allow researchers to share documents across different computers.
About Tim Berners-Lee
- Born June 8, 1955 in London, England
- Graduated from Oxford University with a degree in physics
- Invented the World Wide Web in 1989
- Founded the World Wide Web Consortium (W3C) in 1994
- Knighted by Queen Elizabeth II in 2004
- Awarded the Turing Award (often called "Nobel Prize of Computing") in 2016
How HTML Works
HTML documents are interpreted by web browsers which render them into visible or audible web pages. The browser doesn't display the HTML tags but uses them to interpret the content.
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
2. HTML Document Structure
Basic HTML Structure
Every HTML document follows a standard structure that web browsers expect:
<html lang="en"> <!-- Root element with language attribute -->
<head> <!-- Contains meta information -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document Title</title> <!-- Appears in browser tab -->
</head>
<body> <!-- Contains visible content -->
<!-- All visible content goes here -->
</body>
</html>
Essential HTML Elements
| Element | Description | Example |
|---|---|---|
| <html> | Root element of an HTML page | <html>...</html> |
| <head> | Contains meta information about the document | <head><title>Page</title></head> |
| <title> | Specifies a title for the document | <title>My Page</title> |
| <body> | Contains the visible page content | <body><h1>Hello</h1></body> |
| <h1> to <h6> | HTML headings (h1 is most important) | <h1>Main Heading</h1> |
| <p> | Defines a paragraph | <p>This is a paragraph.</p> |
Best Practice: Always include the <!DOCTYPE html> declaration, <html>, <head>, and <body> tags for proper document structure.
3. Essential HTML Tags
Text Formatting Tags
| Tag | Description | Example |
|---|---|---|
| <strong> | Important text (typically bold) | <strong>Important!</strong> |
| <em> | Emphasized text (typically italic) | <em>Emphasized</em> |
| <u> | Underlined text | <u>Underlined</u> |
| <br> | Line break (self-closing) | First line<br>Second line |
| <hr> | Horizontal rule (self-closing) | <hr> |
Link and Media Tags
| Tag | Description | Example |
|---|---|---|
| <a> | Creates hyperlinks | <a href="https://example.com">Link</a> |
| <img> | Embeds images (self-closing) | <img src="image.jpg" alt="Description"> |
| <video> | Embeds video content | <video src="video.mp4" controls></video> |
| <audio> | Embeds audio content | <audio src="audio.mp3" controls></audio> |
List Tags
| Tag | Description | Example |
|---|---|---|
| <ul> | Unordered (bulleted) list | <ul><li>Item</li></ul> |
| <ol> | Ordered (numbered) list | <ol><li>First</li></ol> |
| <li> | List item | <li>List item</li> |
Accessibility Tip: Always include alt attributes for images to make your content accessible to screen readers and when images fail to load.
4. Introduction to CSS
What is CSS?
CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of a document written in HTML. CSS describes how elements should be rendered on screen, on paper, in speech, or on other media.
Key Concept: HTML provides the structure of a webpage, while CSS controls the visual presentation (colors, layout, fonts, etc.). This separation of concerns makes websites easier to maintain and more flexible.
Basic CSS Syntax
CSS consists of style rules that are interpreted by the browser and applied to corresponding elements:
property: value;
}
Example:
color: blue;
font-size: 24px;
}
Ways to Add CSS to HTML
- Inline CSS: Using the style attribute inside HTML elements
<p style="color: red;">This is red text.</p>
- Internal CSS: Using <style> element in the <head> section
<head>
<style>
p { color: red; }
</style>
</head> - External CSS: Linking to an external .css file (most recommended)
<head>
<link rel="stylesheet" href="styles.css">
</head>
5. Hands-On Project: Personal Profile Page
Project Overview
Create a personal profile page using HTML and CSS to showcase your skills. This project will incorporate all the concepts we've learned.
Requirements
- Proper HTML5 document structure
- Headings and paragraphs
- At least one image
- A list of skills or interests
- Links to social media profiles
- CSS styling for colors, fonts, and layout
- Responsive design considerations
Sample Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Profile</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>John Doe</h1>
<img src="profile.jpg" alt="Profile Picture">
</header>
<section>
<h2>About Me</h2>
<p>Web designer passionate about creating beautiful websites.</p>
</section>
<section>
<h2>Skills</h2>
<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>Responsive Design</li>
</ul>
</section>
<footer>
<a href="https://twitter.com">Twitter</a>
<a href="https://linkedin.com">LinkedIn</a>
</footer>
</body>
</html>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
header {
text-align: center;
margin-bottom: 30px;
}
img {
border-radius: 50%;
width: 150px;
height: 150px;
object-fit: cover;
}
section {
margin-bottom: 20px;
}
footer {
text-align: center;
margin-top: 30px;
}
Project Extensions
Once you've completed the basic version, try these enhancements:
- Add a navigation menu
- Include a portfolio section with project samples
- Implement a contact form
- Add media queries for responsive design
- Use CSS Flexbox or Grid for layout
6. Additional Web Design Concepts
Responsive Web Design
Responsive design ensures your website looks good on all devices (desktops, tablets, phones) by using:
- Fluid layouts that adapt to screen size
- Flexible images and media
- CSS media queries to apply different styles based on device characteristics
@media (max-width: 600px) {
body {
font-size: 14px;
}
header {
padding: 10px;
}
}
CSS Layout Techniques
Flexbox
Flexbox provides efficient way to layout, align and distribute space among items in a container:
display: flex;
justify-content: space-between;
align-items: center;
}
CSS Grid
Grid layout divides page into major regions and defines relationship between parts:
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
}
Web Design Best Practices
- Keep it simple: Avoid clutter and unnecessary elements
- Consistency: Maintain uniform styling throughout
- Readability: Choose fonts and colors that are easy to read
- Navigation: Make sure users can easily find what they need
- Performance: Optimize images and code for fast loading
- Accessibility: Ensure your site is usable by everyone
Comments
Post a Comment