HTML and Web Creation
What is HTML?
HTML (HyperText Markup Language) is
the standard language used to create
and structure webpages. It provides the
basic structure of a webpage by using a
series of elements or tags. These
elements define content such as
headings, paragraphs, images, links, and
forms. HTML is the foundation of web
development, and learning it is the first
step to creating a website.
When creating a website, HTML is used
alongside other languages such as CSS
(Cascading Style Sheets) for styling and
JavaScript for interactivity. However, for
the purpose of this guide, we will focus
on the basic principles of HTML.
Basic Structure of an HTML Document
An HTML document consists of several
key elements that make up the structure
of a webpage. Below is the skeleton of a
simple HTML page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-
scale=1.0">
<title>My First Website</title>
</head>
<body>
<h1>Welcome to My First
Website</h1>
<p>This is a paragraph of text.</p>
</body>
</html>
• <!DOCTYPE html>: This declaration
tells the browser that this is an
HTML5 document.
• <html lang="en">: The root element
of the document, specifying the
language as English.
• <head>: Contains meta-information
about the webpage (such as the
character set and viewport).
• <meta charset="UTF-8">: Specifies
the character encoding for the
webpage (UTF-8 is the most
commonly used).
• <title>: The title of the webpage that
appears in the browser’s title bar or
tab.
• <body>: Contains the visible content
of the webpage, such as headings,
paragraphs, and images.
Basic HTML Tags
• Headings: HTML has six levels of
headings (<h1> through <h6>). <h1>
represents the most important
heading, and <h6> represents the
least important.
• <h1>Main Heading</h1>
• <h2>Subheading</h2>
• Paragraphs: The <p> tag is used for
paragraphs of text.
• <p>This is a paragraph of text.</p>
• Links: Links are created using the
<a> tag. You specify the link’s
destination using the href attribute.
• <a
href="https://www.example.com">Visi
t Example</a>
• Images: Images are added using the
<img> tag, with the src attribute
specifying the image location.
• <img src="image.jpg"
alt="Description of image">
Page 2: Structuring Content and Using
Forms
Lists in HTML
HTML supports both ordered (numbered)
and unordered (bulleted) lists.
• Unordered List: The <ul> tag is used
for unordered lists, with each item
inside the list represented by the <li>
tag.
• <ul>
• <li>Item 1</li>
• <li>Item 2</li>
• </ul>
• Ordered List: The <ol> tag is used for
ordered lists.
• <ol>
• <li>First item</li>
• <li>Second item</li>
• </ol>
HTML Forms
Forms are used to collect user input,
such as names, emails, and messages.
The <form> tag is used to create a form,
and it includes various input types like
text fields, radio buttons, and submit
buttons.
<form action="/submit" method="POST">
<label for="name">Name:</label>
<input type="text" id="name"
name="name">
<label for="email">Email:</label>
<input type="email" id="email"
name="email">
<label
for="message">Message:</label>
<textarea id="message"
name="message"></textarea>
<button
type="submit">Submit</button>
</form>
• The action attribute specifies where
to send the form data when it is
submitted.
• The method attribute determines
whether to send the data via GET or
POST.
Forms Input Types
• Text Input: <input type="text"> for a
single-line text field.
• Email Input: <input type="email">
validates email format.
• Textarea: <textarea> is used for
multi-line text fields.
• Radio Buttons: <input type="radio">
for selecting a single option from
multiple choices.
• Checkboxes: <input
type="checkbox"> for selecting one
or more options.
Page 3: Styling with CSS and Improving
Layout
What is CSS?
CSS (Cascading Style Sheets) is used to
style and layout HTML elements. While
HTML provides the structure, CSS allows
you to control the look and feel of the
webpage. CSS can be written in three
ways:
1. Inline CSS: Inside an HTML
element using the style attribute.
2. <p style="color: blue;">This is a
blue paragraph.</p>
3. Internal CSS: Within a <style> tag
in the <head> section.
4. <style>
5. body {
6. font-family: Arial, sans-serif;
7. }
8. h1 {
9. color: red;
10. }
11. </style>
12. External CSS: Linked in a
separate .css file.
13. <link rel="stylesheet"
href="styles.css">
CSS Selectors
• Element Selector: Targets all
elements of a specific type, such as
p for paragraphs.
• p{
• color: blue;
• }
• Class Selector: Targets elements
with a specific class.
• .my-class {
• font-size: 16px;
• }
• ID Selector: Targets an element with
a specific ID.
• #my-id {
• background-color: yellow;
• }
Layout with CSS
CSS can control the layout of the
webpage, including positioning and
alignment.
• Box Model: Every HTML element is a
rectangular box, with margins,
borders, padding, and the content
area.
• div {
• margin: 20px;
• padding: 10px;
• border: 1px solid black;
• }
• Flexbox: A modern layout model that
allows easy alignment and
distribution of space among items in
a container.
• .container {
• display: flex;
• justify-content: center;
• align-items: center;
• }
• Grid Layout: A powerful layout
system for creating complex designs.
• .container {
• display: grid;
• grid-template-columns: 1fr 1fr;
• }
Page 4: Advanced HTML and Final Steps
Advanced HTML Elements
• Tables: HTML tables are used to
display data in a structured grid
format.
• <table>
• <tr>
• <th>Header 1</th>
• <th>Header 2</th>
• </tr>
• <tr>
• <td>Data 1</td>
• <td>Data 2</td>
• </tr>
• </table>
• Embedded Media: You can embed
videos and audio in your webpage.
• <video src="video.mp4"
controls></video>
• <audio src="audio.mp3"
controls></audio>
• iframes: An inline frame used to
embed external content, such as
another webpage.
• <iframe
src="https://www.example.com"></ifr
ame>
Debugging and Testing
Once you've created a website, it's
essential to test it in various browsers
(Chrome, Firefox, Safari, etc.) to ensure
compatibility. Most browsers come with
developer tools that allow you to inspect
and debug HTML and CSS.
• Validation: Use online validators such
as W3C Validator to check for errors
in your HTML.
• Responsive Design: Test your website
on different screen sizes (mobile,
tablet, desktop) to ensure it's mobile-
friendly.
Conclusion
Building a website using HTML is a
rewarding process, and learning the
basics is the first step toward becoming
a web developer. HTML gives you the
power to structure content, CSS lets you
style it, and with JavaScript, you can
add interactivity. As you gain more
experience, you can dive deeper into
advanced topics like SEO (Search Engine
Optimization), accessibility, and backend
development.
This guide has covered the fundamentals
from beginner to intermediate HTML
website creation, and now you’re ready
to start building your own.
