Web Design Notes: HTML
& CSS Essentials for
Students
This presentation covers the fundamentals of HTML and CSS.
You'll learn how these languages structure and style web
content. We'll explore essential tags and best practices for
creating engaging websites.
MB
by Musinguzi Benard
What is HTML?
The Language of the Web
HTML, or HyperText Markup Language, is the core
technology for building web pages. It defines the
structure of your content.
It's a markup language, not a programming
language. It tells browsers how to display elements
like text, images, and links.
Basic HTML Document Structure
<!DOCTYPE html><html> <head> <title>My First
Website</title> </head> <body> <h1>Welcome!</h1>
<p>This is my first webpage.</p> </body></html>
Every HTML document starts with <!DOCTYPE html> and is
enclosed in <html> tags. The <head> contains metadata, while the
<body> holds visible content. This simple structure forms the
foundation of any web page.
Common HTML Tags
<h1> - Headings
Organize content with different heading levels.
<p> - Paragraph
Create blocks of text for main content.
<a> - Link
Hyperlinks connect pages and resources.
<img> - Image
Embed images to enhance visual appeal.
These tags are essential building blocks for creating engaging web
pages. They provide structure and meaning to your content.
HTML Head Section Example
Metadata
The <head> section contains metadata about the page. This information is not
directly visible to users.
Character Set
<meta charset="UTF-8"> defines the character encoding. It ensures proper display
of various characters.
Page Title
<title>Student Website</title> sets the title shown in the browser tab. It aids in user navigat
External CSS Link
<link rel="stylesheet" href="style.css"> connects an external CSS file for styling.
This separates content from presentation.
The <head> section is crucial for search engine optimization and browser rendering. It
manages how your page is interpreted.
Embedding Media in HTML
Images Videos Audio Files
Use the <img> The <video> tag Embed sound
tag to embed allows embedding using the
pictures. Always video files. Add <audio> tag. This
include an alt controls for user is useful for
attribute for interaction and podcasts or
accessibility and autoplay for background music.
SEO. immediate Include controls
playback. for playback
Embedding media enriches web content, making it more
options.
dynamic and engaging for users. Ensure proper formatting and
accessibility attributes.
HTML Comments
Code Explanation
Comments explain complex code sections. They help
collaborators understand your logic.
Browser Ignored
Browsers completely ignore comments. They are not
displayed on the web page.
Developer Notes
Use comments for reminders or future improvements.
They are crucial for project management.
HTML comments are written as <!-- This is a comment -->. They
are essential for clean, maintainable code.
Simple HTML Practice Page
<!DOCTYPE html><html> <head> <title>Student Profile</title>
</head> <body> <h1>Jane Doe</h1> <p>Hello! I'm a web design
student.</p> <h2>My Interests</h2> <ul> <li>Coding</li>
<li>Art</li> <li>Reading</li> </ul> <p>Visit my <a
href="https://example.com">portfolio</a>.</p> <img
src="jane.jpg" alt="Photo of Jane" width="150"> </body></html>
This example combines headings, paragraphs, lists, links, and images. It creates a
simple personal profile page, showcasing basic HTML elements.
What is CSS?
Styling
CSS defines how HTML elements look. It controls colors, fonts, and backgrounds.
Layout
It manages element positioning. CSS allows responsive and flexible designs.
Visual Appeal
CSS transforms plain HTML into attractive web
pages. It provides a rich user experience.
CSS, or Cascading Style Sheets, is the language for styling web pages. It separates presentation from
structure, offering design flexibility.
Ways to Apply CSS
Internal
Embed CSS rules inside the
Inline <style> tag within the HTML
<head>. This applies styles to
Add styling directly within a single page.
HTML tags using the style
attribute. This method is for External
specific, unique elements.
Link a separate .css file to the
HTML document. This is the best
practice for large projects and
reusability.
Each method has its specific use cases. External stylesheets are generally preferred for maintainability and
separation of concerns.
