Introduction to Web Development
Introduction to HTML
What is HTML?
HTML stands for HyperText Markup Language. It's the standard language used to create and
design web pages. Think of HTML as the building blocks of a website, telling your computer or
browser how to display content like text, images, and links.
Tags
Tags are the fundamental components of HTML. They act like instructions that tell your browser
how to display different parts of a web page. Tags are enclosed in angle brackets, like <tag>.
Most tags come in pairs: an opening tag <tag> and a closing tag </tag>. For example, <p>
starts a paragraph, and </p> ends it.
Elements
An element consists of a start tag, content, and an end tag. For instance, <p>This is a
paragraph.</p> is a paragraph element. Elements can be text, images, links, or other types of
content. They are the building blocks that make up a web page.
Attributes
Attributes provide additional information about HTML elements. They are placed within the
opening tag and usually come in name/value pairs like name="value". For example, in <img
src="image.jpg" alt="Description of image">, src and alt are attributes that
specify the image source and alternative text
Structuring Content with HTML
Headings
HTML uses headings to organize content into sections. There are six levels of headings, from
<h1> to <h6>, with <h1> being the most important.
For example: <h1>Main Heading</h1> and <h2>Subheading</h2>
Headings help readers and search engines understand the structure of your content.
CSS
CSS stands for Cascading Style Sheets. While HTML structures the content, CSS styles it. With
CSS, you can change colors, fonts, spacing, and layout. For example, you can make text red or
center an image. CSS makes your web pages look attractive and user-friendly.
Links
Links connect different web pages or sections within a page. The <a> tag is used to create links,
and the href attribute specifies the destination URL. For example: <a
href="https://www.example.com">Visit Example</a>. Clicking this link takes you to
the specified website.
Forms
Forms allow users to input data, such as text, selections, or files. The <form> tag defines a form,
and inside it, you can have various input elements like text fields, checkboxes, and buttons.
Forms are used for surveys, registrations, and search functionalities.
What is the DOM?
The DOM stands for Document Object Model. It’s like a family tree of everything on a web
page.
Think of it this way:
• HTML is the code you write.
• The browser reads the HTML and builds a DOM.
• The DOM is a live structure that shows how all parts (tags, elements, text) relate to
each other.
DOM Structure Example:
Each tag becomes a node
in the DOM tree.
Developers can use
JavaScript to change or
update this structure,
like adding a new
element or changing text.
Organizing and Formatting with HTML
Lists
HTML provides two main types of lists: Ordered Lists (use <ol> tag for numbered lists) and
Unordered Lists (use <ul> tag for bulleted lists). Each item in the list is placed within an <li>
tag. For example:
<ul><li>Apples</li><li>Bananas</li><li>Cherries</li></ul>.
Basic Formatting Tags
HTML includes tags to format text: Bold <b> or <strong>, Italic <i> or <em>, Underline
<u>. These tags help emphasize important information in your content.
Website
A website is a collection of interconnected web pages. Using HTML, along with CSS and
JavaScript, you can create and design your own website to share information, showcase
projects, or provide services. Learning HTML is the first step toward building your online
presence.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="favicon.ico">
<title>My Portfolio | Summer Camp activity</title>
</head>
<body>
</body>
</html>
HTML Cheat sheet
Name:
TAG DESCRIPTION EXAMPLE
<html> Defines the root of an HTML document. <html> ... </html>
Wraps all other tags.
<head> Contains metadata, styles, and scripts for the <head> ... </head>
page, not visible to users.
<title> Sets the browser tab title; placed inside <title>My Page</title>
<head>.
<body> Contains all visible content on the page. <body> ... </body>
<h1> <h6> Headings from most important (<h1>) to <h1>Main</h1> to <h6>Small</h6>
least (<h6>). Used to structure text.
<p> Defines a paragraph of text. <p>This is a paragraph.</p>
<br> Inserts a line break; does not need a closing Line 1<br>Line 2
tag.
<hr> Inserts a horizontal rule to separate sections. <hr>
<b> Makes text bold; <strong> also emphasizes <b>Bold</b>, <strong>Important</strong>
<strong> importance semantically.
<i> Italicizes text; <em> adds semantic emphasis. <i>Italic</i>, <em>Emphasis</em>
<em>
<u> Underlines text (less commonly used in <u>Underlined</u>
modern HTML).
<a> Creates a hyperlink using the href attribute. <a href="https://example.com">Visit</a>
<img> Embeds an image using src and alt attributes. <img src="img.jpg" alt="Description">
<ul> Creates an unordered (bulleted) list. <ul><li>Item</li></ul>
<ol> Creates an ordered (numbered) list. <ol><li>First</li></ol>
<li> Represents an item in a list (<ul> or <ol>). <li>Item</li>
<table> Defines a table structure. <table> ... </table>
<tr> Defines a row in a table. <tr> ... </tr>
<th> Defines a header cell in a table (usually bold <th>Header</th>
and centered).
<td> Defines a standard data cell in a table. <td>Data</td>
<input> Defines an input field; varies by type (e.g., <input type="text" name="name">
text, checkbox).
<label> Labels form elements for accessibility. <label for="name">Name:</label>
<div> A block-level container used to group <div>Content</div>
elements for styling or layout.
<span> An inline container used to style or group <span>Text</span>
inline content.
<section> Represents a standalone section of content. <section><h2>Title</h2></section>
<header> Represents the top of a page or section (e.g., <header><h1>Logo</h1></header>
logo, nav).
<footer> Represents the bottom/footer of a page <footer>© 2025</footer>
(e.g., copyright, links).
<article> Defines self-contained content like blog posts <article>
or news items. <h2>News</h2><p>Details...</p>
</article>
<header> <div>
</header>
<section>
</div>
<div>
</div>
<h1>
</section> </h1>
<footer> <h1>
</footer> </h1>
