Introduction to Web Development
HTML Basics and Code Tutorial
Welcome to the next part of the "Introduction to Web Development" course by
Konstant EduTech. In this comprehensive lesson, we'll dive deep into HTML
fundamentals, explore key elements, and walk through practical examples of writing
HTML code. By the end of this lesson, you'll have a solid grasp of HTML basics and be
ready to create your own simple web pages.
Part 1: HTML Basics
HTML, which stands for HyperText Markup Language, is the backbone of web
development. It's not a programming language, but rather a markup language used to
structure content on web pages. Think of HTML as the skeleton of a webpage,
defining its structure and organization.
The current version of HTML is 5, so you're going to be writing HTML5.
Understanding HTML Syntax
HTML uses tags to format and structure content. These tags act like containers, telling
the browser how to display the information within them.
There are two main types of tags:
1. Paired Tags
2. Self-Closing Tags
Let's explore each type in detail:
1. Paired Tags
Paired tags consist of an opening tag and a closing tag that wrap around content.
They're used for elements that have content between them.
Syntax:
<tagname>content</tagname>
Example:
<p>This is a paragraph.</p>
In this example:
<p> is the opening tag.
</p> is the closing tag.
"This is a paragraph." is the content.
The browser interprets this code to display a paragraph of text. You can think of
paired tags as containers that hold and define the content within them.
Konstant EduTech
Introduction to Web Development
2. Self-Closing Tags
Self-closing tags (also known as void elements) do not wrap around content. They
consist of a single tag that closes itself.
Syntax:
<tagname />
Example:
<br />
In this example, <br /> represents a line break. It doesn't need to wrap around any
content; it simply inserts a break at that point in the document.
Other common self-closing tags include:
<img /> for images
<meta /> for metadata in the document head
HTML Attributes
Attributes provide additional information about HTML elements. They are always
specified in the opening tag and follow a name-value pair format.
Syntax:
<tagname attribute="value">content</tagname>
Example:
<a href="[Link] here</a>
In this example:
<a> is the anchor tag used for creating links.
href is the attribute that specifies the link destination.
"[Link] is the value of the href attribute.
"Click here" is the visible, clickable text.
Attributes can modify the behavior or appearance of an element. For instance:
The class attribute is used for styling.
The id attribute provides a unique identifier for manipulation.
The src attribute specifies the source of an image in an <img> tag.
Part 2: Common HTML Tags
Let's explore some essential HTML tags you'll use frequently in web development:
1. Headings
Headings are used to structure your content hierarchically. HTML provides six levels
of headings, from <h1> (most important) to <h6> (least important).
Example:
Konstant EduTech
Introduction to Web Development
<h1>Welcome to My Site</h1>
<h2>About Us</h2>
<h3>Our Team</h3>
Explanation:
<h1> is typically used for the main title of the page.
<h2> is used for section headings.
<h3> and below are used for subsections.
Using headings properly is crucial for both readability and SEO (Search Engine
Optimization).
2. Paragraphs
The <p> tag is used to create paragraphs of text.
Example:
<p>This is the first paragraph. It contains multiple sentences and can
be quite long.</p>
<p>This is another paragraph. Notice how it's separated from the first
one.</p>
Explanation:
Each <p> tag creates a new paragraph.
Browsers typically add some space before and after each paragraph for
readability.
3. Links
The <a> tag is used to create hyperlinks, allowing users to navigate to other pages or
websites.
Example:
<a href="[Link] Example</a>
Explanation:
The href attribute specifies the URL of the page the link goes to.
"Visit Example" is the text that users will click on to follow the link.
At times, links are underlined, or are in color blue.
4. Simple Example of a Webpage Structure
Let's break down a basic example of a webpage that includes various HTML elements
we've discussed:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>My First Webpage</title>
</head>
<body>
<h1>Welcome to My Webpage</h1>
Konstant EduTech
Introduction to Web Development
<p>This is a paragraph explaining the site. It provides an
overview of what visitors can expect to find here.</p>
<h2>About Me</h2>
<p>Here's some information about me and my interests.</p>
<h3>My Hobbies</h3>
<p>Reading, Coding, Hiking</p>
<p>To learn more, <a href="[Link] this
link</a>.</p>
</body>
</html>
Let's break this down:
1. The <!DOCTYPE html> declaration and <html> tag start the document.
2. The <head> section contains metadata about the document:
<meta charset="UTF-8"> specifies the character encoding.
<meta name="viewport"> ensures proper rendering on mobile devices.
<title> sets the page title shown in the browser tab.
3. The <body> contains the visible content of the page:
An <h1> main heading welcomes visitors.
A <p> paragraph provides an introduction.
An <h2> subheading introduces the "About Me" section.
Another <p> gives information about the author.
An <h3> introduces a brief mention of hobbies.
An additional <p> includes a hyperlink to another site.
This structure creates a simple yet informative webpage with static content and links.
Summary
HTML uses tags to structure content, including paired tags (like <p> ) and self-
closing tags (like <br /> ).
Attributes provide extra details about elements and are defined inside the
opening tag.
Konstant EduTech
Introduction to Web Development
Common elements include headings ( <h1> to <h6> ), paragraphs ( <p> ), and
links ( <a> ).
Next Lesson Preview
In our next lesson, we'll explore how to enhance your webpages with:
Ordered and unordered lists
Inputs and Forms
Images and alt text for accessibility
We'll also introduce basic CSS to start styling your HTML elements, making your
webpages more visually appealing.
Happy coding, and don't hesitate to ask questions if you need clarification on any part
of this lesson!
Konstant EduTech
