Scribd
Upload
2 views24 pages

HTML

HTML is a versatile language used for creating web pages and applications, following a basic structure that includes tags and elements. Key concepts include nesting tags, using comments, formatting text with headings and paragraphs, and creating lists. Additionally, HTML supports links, images, divisions, and semantic tags to enhance content organization and accessibility.

Uploaded by

juniorgadje4
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2 views24 pages

HTML

HTML is a versatile language used for creating web pages and applications, following a basic structure that includes tags and elements. Key concepts include nesting tags, using comments, formatting text with headings and paragraphs, and creating lists. Additionally, HTML supports links, images, divisions, and semantic tags to enhance content organization and accessibility.

Uploaded by

juniorgadje4
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

HTML

What is HTML?
HTML is an incredibly powerful and versatile language that lets you create everything from simple web pages
to complex web applications, with the amazing ability to structure content on the web.

Basic Structure of an HTML


Every HTML document follows a simple structure.
It starts with <!DOCTYPE html>, which tells the version of HTML we are using.
This is followed by the <html> tag, which contains all the HTML content.
Inside the <html> tag, we add the <body> tag, which holds all the visible content of the webpage.
Here’s a simple example:

<!DOCTYPE html>
<html>
<body>
This is some text.
</body>
</html>
In this example, the text inside the <body> tag will be displayed as text on the webpage.

Tags and Elements


In HTML, tags are keywords enclosed in angle brackets, like <html>. They tell the browser how to display the
content.
Elements are the components of an HTML document, consisting of a start tag, content, and an end tag.
Here's a simple breakdown:
 Tags: Keywords in angle brackets that define how content is displayed.
 Elements: Components made up of a start tag, content, and an end tag.
For example:
<p>This is a paragraph.</p>
In this example,
<p> is the start tag, "This is a paragraph." is the content, and </p> is the end tag. Together, they form a
paragraph element.

EASTER 1 | P a g e
HTML

Nesting and Closing Tags


In HTML, nesting means placing one element inside another. For example, you can put a <strong> tag inside
a <p> tag to make text bold within a paragraph.
Here's how it looks:
<p>This is <strong>bold</strong> text.</p>
Closing tags are crucial. Every start tag must have a corresponding end tag. The end tag is the same as the
start tag but with a forward slash (/) before the tag name. For example, <p> starts a paragraph, and </p> ends
it.
Incorrect nesting can lead to rendering issues. Always make sure to close tags in the correct order. The inner
tag should be closed before the outer tag.
Correct nesting:
<p>This is <strong>bold</strong> text.</p>
Incorrect nesting:
<p>This is <strong>bold text.</p></strong>

Comments in HTML
Comments are notes in the code that don't appear on the web page. They are useful for:
 Explaining complex code
 Leaving notes for yourself or others
 Temporarily disabling code
In HTML, comments are written between <!-- and -->.
Here's an example:
<!-- This is a comment -->
<p>This is a paragraph.</p>

Headings
You're probably not going to use only plain text on your website, right? If you want to add a title or section
name, the best way is to use headings. There are six levels of headings, from <h1> (the most important)
to <h6> (the least important).
<h1>This is a main heading</h1>
<h2>This is a subheading</h2>
<h3>This is a sub-subheading</h3>
EASTER 2 | P a g e
HTML

"Headings organize your content and make it easier for people and search engines to understand your page.
Start with <h1> for the main title and use <h2> to <h6> for other sections."

Paragraphs
In HTML, paragraphs are used to show blocks of text. You define them with the <p> tag.
When you put text between <p> and </p>, the browser will display it as a separate paragraph with some space
above and below.
Here’s how you can add a paragraph in HTML:
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
For example, if you're creating an article, the title would be a heading, and the actual text would be a
paragraph.

Line Breaks
In HTML, the <br> tag is used to create a line break. This tag is useful when you want to start text on a new
line without creating a new paragraph. Unlike the <p> tag, which adds a blank line before and after the text,
the <br> tag simply moves the text to the next line.
Here's how you can use the <br> tag in HTML:
<p>This is a line.<br>This is another line.</p>
In this example, "This is a line." and "This is another line." will be displayed on separate lines within the same
paragraph. The <br> tag is an empty element, which means it doesn't have a closing tag. You just
write <br> where you want the line break to occur.

Bold and Italic Text


In HTML, you can style text easily!
 Make it bold with <strong>
 Make it italic with <em>
These tags help emphasize important words and make them stand out!
<p>This is normal text</p>
<p>This is <strong>bold</strong> text</p>
<p>This is <em>italic</em> text</p>
In this example, the word “bold” will be displayed bold. There is even another way to make bold and italic text
using the <b> tag and <i> tag (accordingly).

EASTER 3 | P a g e
HTML

<p>This is normal text. <b>This is bold text</b>. <i>This is italic text</i>.</p>

Recap - Formatting
Now that we have learned the basics of text formatting in HTML, let's recap what we've covered:
 Headings: Use <h1> to <h6> tags to create headings of different levels. <h1> is the most important,
and <h6> is the least.
 Paragraphs: Use <p> tags to create paragraphs. Browsers automatically add space above and below
each paragraph.
 Line Breaks: Use the <br> tag to create a line break within a paragraph without starting a new one.
 Bold and Italic Text: Use <strong> tags to make text bold and <em> tags to make text italic.
Here's an example that combines these elements:
<h1>Main Heading</h1>
<p>This is a <strong>bold</strong> paragraph. Here is a line break:<br>This is <em>italic</em> text.</p>
In this example, we have a main heading, a paragraph with bold and italic text, and a line break within the
paragraph. This demonstrates how to use different formatting tags together to create well-structured and
styled content.

Unordered List
In HTML, an unordered list is a list of items that are not ordered by numbers or letters. Instead, each item is
marked with a bullet point. To create an unordered list, you use the <ul> tag. Each item in the list is defined
using the <li> tag.
Here's how you can create an unordered list in HTML:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
In this example, the <ul> tag defines the unordered list, and each <li> tag represents a list item. When
displayed in a browser, this code will create a list with bullet points:
 Item 1
 Item 2
 Item 3

EASTER 4 | P a g e
HTML

Unordered lists are useful for presenting items where the order doesn't matter, such as a list of ingredients or
features.

Working with Lists


Ordered List
In HTML, an ordered list is a list of items that are ordered by numbers or letters. To create an ordered list, you
use the <ol> tag. Each item in the list is defined using the <li> tag.
Here's how you can create an ordered list in HTML:
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
In this example, the <ol> tag defines the ordered list, and each <li> tag represents a list item. When displayed
in a browser, this code will create a numbered list:
1. First item
2. Second item
3. Third item
Ordered lists are useful for presenting items where the order matters, such as steps in a procedure or a list of
ranked items.

Nested Lists
You can place one list inside another—this is called a nested list. This is useful for creating hierarchical
structures, such as outlines or multi-level menus.
To create a nested list, you simply place an <ul> or <ol> element inside an <li> element of another list.
Here's an example of a nested unordered list:
<ul>
<li>Item 1</li>
<li>Item 2
<ul>
<li>Subitem 2.1</li>
<li>Subitem 2.2</li>
</ul>
</li>

EASTER 5 | P a g e
HTML

<li>Item 3</li>
</ul>
The second item contains a nested list with two subitems. In the browser, it will display like this:
 Item 1
 Item 2
o Subitem 2.1
o Subitem 2.2
 Item 3
You can also nest ordered lists or mix both.

Recap - Lists
Let's recap what we've learned about lists in HTML:
 Unordered Lists: Use <ul> to create a list with bullet points. Each item is defined using <li>.
 Ordered Lists: Use <ol> to create a numbered list. Each item is defined using <li>.
 Nested Lists: Place one list inside another by putting an <ul> or <ol> element inside an <li> element of
another list.
HTML Attributes
In HTML, attributes provide additional information about elements. They are used to define properties of an
element, such as its size, color, or behavior. Attributes are always specified in the start tag and usually come in
name/value pairs like name="value".
Here's the general syntax for adding attributes to an HTML element:
<tagname attribute1="value1" attribute2="value2">Content</tagname>
In this example, tagname is the name of the HTML element (e.g., <p>, <strong>, <h3>), attribute1 and
attribute2 are the names of the attributes, and "value1" and "value2" are the values assigned to those
attributes.

Links
In HTML, a link (or hyperlink) is an element that connects one web page to another.
You can create links to other web pages, files, locations within the same page or any other URL. Links are
created using the <a> tag, which stands for anchor.
Here's the basic syntax for creating a link in HTML:

EASTER 6 | P a g e
HTML

<a href="url">Link text</a>


 <a>: The opening anchor tag.
 href: The destination URL of the link.
 Link text: The visible text that users will see and click on.
 </a>: The closing anchor tag.
Here's an example of how to create a link to Google's homepage:
<a href="[Link] Google</a>
In this example, when a user clicks on the text "Visit Google", they will be taken to [Link]

New Page Links


You can also create links that open in a new tab or window by using the target attribute with the value _blank:
<a href="[Link] target="_blank">Visit Example</a>
This will open the link in a new tab or window, depending on the user's browser settings.

Images
Images can make your webpage more engaging, and adding them in HTML is simple using the <img> tag.
The <img> tag is self-closing, meaning it doesn’t need an ending tag.
To display an image, you need to use the src attribute. This attribute specifies the image's location (URL or file
path). Here's an example:
<img src="[Link] />
In this example, the browser will load and display the image from the URL [Link]

Self-closing tags, like <img>, don’t need a closing tag. They end with /> and are used for elements that
don’t have content inside.

Image Attributes
Let’s explore some additional attributes to improve your images:
1. alt: Provides alternative text if the image doesn’t load .
2. width and height: Control the size of the image in pixels.

EASTER 7 | P a g e
HTML

Here’s an example:
<img src="[Link]" alt="A scenic view of mountains" width="600" height="400" />
This sets the image source, provides a description, and sizes it to 600x400 pixels. Always include alt for
accessibility and use dimensions to maintain design consistency.

Divisions
Imagine you want to break your webpage into blocks to organize your content. In HTML, you can use a div to
group elements together.
div tags are great for creating layouts and separating sections.
Here's the basic syntax:
<div>
<!-- Content goes here -->
</div>
You can add other HTML elements inside a div, such as paragraphs, headings, images, and even
other div elements.
Here's an example of how to use div tags to create a simple layout with a header, main content area, and
footer:
<div>
<h1>Header</h1>
</div>
<div>
<p>Main content goes here.</p>
</div>
<div>
<p>Footer</p>
</div>

Inline Spans
What if we have a sentence and need to highlight just one word or a small part of it? We can use
the <span> tag! It helps us apply styles or make changes to only a specific part of the text without affecting the
rest.
Here's the basic syntax for using a span in HTML:
<span>This is some text.</span>
Here's an example of how to use span tags to highlight a portion of text within a paragraph:

EASTER 8 | P a g e
HTML

<p>This is a <span style="color: blue;">blue</span> word.</p>


In this example, the word "blue" will be displayed in blue color.
We will learn about the style attribute later on!

Semantic Tags
Semantic tags in HTML help define the meaning of content, making the code clearer for both developers and
browsers. Unlike <div> and <span>, they give context to the enclosed content.
Common Semantic Tags:
 <header> – Introductory content, usually at the top.
 <nav> – Contains navigation links.
 <main> – Main content of the page.
 <article> – A self-contained piece like a blog post.
 <section> – Groups related content, often with a heading.
 <footer> – Bottom section with info like copyright or contact details.
<header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Article Title</h2>
<p>Article content goes here.</p>
</article>
</main>
<footer>
<p>Copyright 2023</p>
</footer>
This structure provides a clear and meaningful layout for the content.

EASTER 9 | P a g e
HTML

Sections and Articles


In HTML, <section> and <article> tags are used to organize content into logical parts.
The <section> tag defines a section in a document, such as chapters, headers, footers, or any other sections of
the document. It's a way to group related content together. For example, you might use <section> to divide a
page into an introduction, content, and contact information.
Here's how you can use the <section> tag:
<section>
<h2>Section Heading</h2>
<p>Section content goes here.</p>
</section>
The <article> tag specifies independent, self-contained content. It should make sense on its own, and it should
be possible to read it independently from the rest of the web site. Examples of where an <article> element can
be used: a forum post, a blog entry, a news story, or a comment.
Here's how you can use the <article> tag:
<article>
<h2>Article Title</h2>
<p>Article content goes here.</p>
</article>

Recap - Layout
Let's recap what we've learned about page layout in HTML:
 Divisions: Use <div> tags to create containers that group other elements together. They are block-level
elements, taking up the full width available.
 Inline Spans: Use <span> tags to create inline containers for text or inline elements. They only take up
as much width as necessary.
 Semantic Tags: Use tags like <header>, <nav>, <main>, <article>, <section>, and <footer> to structure
your content meaningfully.

Challenge
Easy
EASTER 10 | P a g e
HTML

Create an HTML document that includes all the layout elements we've learned so far:
1. A <header> with a main heading (<h1>) that says "My Website" and a navigation (<nav>) with links to
"Home", "About", and “Contact”. (in an unordered list)
2. A <main> section with a <div> that contains a paragraph (<p>) with the text "This is the main content
area.". Inside the paragraph, use a <span> tag to wrap the word "main".
3. Inside the main section, a <section> with a heading (<h2>) that says "About Us" and an <article> with a
heading (<h3>) that says "Our Mission" and a paragraph (<p>) with some dummy text.
4. A <footer> with a paragraph (<p>) that says "Copyright 2024 My Website".
Project Overview

In this project, you will create a basic personal profile page using HTML. The page will include a header with
your name and tagline, a profile picture, an about me section, and links to your social media profiles. Using
<div>, <img>, and <a> tags, you will structure the page to showcase your creativity while reinforcing your
understanding of HTML layout and elements

Challenge

Easy
Create an empty HTML document from zero, don't forget the html and body tags.

Header Section
Challenge
Easy
Create a header for your profile page using a <div> that includes your name inside an <h1> tag and a tagline
inside a <p> tag.
For example:
 John Doe
 Web Developer | Creative Thinker

Profile Picture

EASTER 11 | P a g e
HTML

Challenge
Easy
Alright, it’s time to add the profile picture! You can use any image you like. Feel free to use the link from the
example below.
1. Below the header, create a <div>. Inside it, add an <img> tag.
2. Set the src to link to your image, and use the width and height attributes to control its size.
For example:
 src - [Link]
 width - 200
 height - 200"

About Me Section
Challenge
Easy
This is your profile—let people know who you are!
1. After adding your profile picture, create a <div>.
2. Inside it, add a heading with <h2> that says 'About Me'. Add short paragraph <p> to share a little about
yourself.
For example:
 Hello! I'm a passionate web developer learning HTML basics. I enjoy coding and building creative
projects.

Social Links
Challenge
Easy
Let’s share your social media—people will want to connect!
1. After the 'About Me' section, add another <div>.
2. Inside it, create a heading with an <h2> tag that says 'Connect with Me'.
3. Add clickable links to your social media profiles using <a> tags. Remember to make the links open in a
new tab by adding target="_blank"
EASTER 12 | P a g e
HTML

For example:
 LinkedIn | Twitter | Instagram | Facebook
Form Basics

In HTML, forms are used to collect user input. A form is a section of a document that contains controls such as
text fields, buttons, checkboxes, and more. Users can interact with these controls to provide data, which can
then be sent to a server for processing. Forms are essential for creating interactive web pages that allow users
to submit information, such as login credentials, search queries, or feedback.
Here's the basic structure of an HTML form:
<form>
<!-- Form elements go here -->
</form>

Text Inputs
In HTML, text inputs are used to create form fields where users can enter text. There are various types of text
inputs, each designed for different kinds of text-based data. The most common type is the single-line text
input, created using the <input> tag with the type attribute set to "text".
Here's the basic syntax for creating a text input in HTML:
<input type="text" name="fieldname">
 <input>: The tag that defines the input field.
 type="text": An attribute that specifies the input type as text.
 name: An attribute that gives the input field a name, which is used to identify the data when the form
is submitted.
Note: input is a special tag, it does not require a closing tag!

Input Attributes
Here are some other useful attributes for text inputs:
 placeholder: Provides a short hint that describes the expected value of the input field (e.g., "Enter your
name").
 value: Sets the initial value of the input field.
 maxlength: Specifies the maximum number of characters allowed in the input field.

EASTER 13 | P a g e
HTML

Here's an example of how to create a text input with a placeholder:


<input type="text" name="username" placeholder="Enter username">
In this example, we have a text input with the name "username" and a placeholder that says "Enter
username". When the input field is empty, the placeholder text will be displayed inside the field. Once the
user starts typing, the placeholder text will disappear.

Password Field
In HTML, a password field is a type of input field used to collect passwords from users. It is similar to a regular
text input field, but the characters typed into a password field are masked, usually displayed as asterisks or
dots. This is to prevent others from seeing the password as it is being typed. To create a password field, you
use the <input> tag with the type attribute set to "password".
Here's the basic syntax for creating a password field in HTML:
<input type="password" name="passwordfield">

Labels for Inputs


It’s not always very clear what an input is about without a label. A label gives users a clear visual cue on what
type of input is expected in that field. Labels are created using the <label> tag.
Here’s the basic syntax:
<label for="field">Label text</label>
<input type="text" id="field">
 <label>: The tag that creates the label.
 for: A link between the label and a form field. The value of for should match the id of the form field.
 Label text: The text that describes what the form field is for.
 <input>: The form field that the label refers to.
 id: The unique identifier for the form field, which matches the for attribute in the label.

Recap - Basic Form


Let's recap what we've learned about creating basic forms in HTML:
Forms: Use <form> tags to create forms.

EASTER 14 | P a g e
HTML

Text Inputs: Use <input type="text"> to create single-line text input fields. Use attributes like placeholder,
name , value and maxlength to customize the input field.
Password Fields: Use <input type="password"> to create password fields where the characters are masked.
Labels: Use <label> tags to add descriptions to form fields. Use the for attribute to associate the label with a
specific form field by matching its id attribute.
Challenge
Easy
Create an HTML document as shown in the picture below:
It should include three label-input pairs:
A label with the text "Full Name:" associated with a text input field. The input field should have the name
"fullname" and a placeholder that says "Enter your full name".
A label with the text "Email:" associated with a text input field. The input field should have the name "email"
and a placeholder that says "Enter your email".
A label with the text "Password:" associated with a password input field. The input field should have the name
"userpassword" and a placeholder that says "Enter your password". Set the maximum length of this field to 20
characters.

Radio Buttons
In HTML, radio buttons are used to create a set of mutually exclusive options, where the user can select only
one option from the group. Radio buttons are created using the <input> tag with the type attribute set to
"radio".
Here's the basic syntax for creating a radio button in HTML:
<input type="radio" id="option1" name="radiogroup" value="option1">
<label for="option1">Option 1</label>
 <input>: The tag that defines the input field.
 type="radio": An attribute that specifies the input type as a radio button.
 id: An attribute that gives the radio button a unique identifier.
 name: An attribute that groups radio buttons together. All radio buttons with the same name belong
to the same group, and only one option within a group can be selected at a time.
 value: An attribute that specifies the value associated with the radio button. This value is sent to the
server when the form is submitted.

EASTER 15 | P a g e
HTML

 <label>: A tag that provides a clickable label for the radio button. The for attribute of the label should
match the id attribute of the radio button.
Here's an example of how to create a group of radio buttons:
<form>
<input type="radio" id="option1" name="mygroup" value="option1">
<label for="option1">Option 1</label>
<br>

<input type="radio" id="option2" name="mygroup" value="option2">


<label for="option2">Option 2</label>
<br>

<input type="radio" id="option3" name="mygroup" value="option3">


<label for="option3">Option 3</label>
<br>
</form>
In this example, we have a form with three radio buttons, all belonging to the same group because they share
the same name attribute ("mygroup"). Each radio button has a unique id and value, and a corresponding label.
When the user selects one of these options and submits the form, the value of the selected radio button will
be sent to the server. Checkboxes

In HTML, checkboxes are used to create a set of options where the user can select multiple options from the
group. Checkboxes are created using the <input> tag with the type attribute set to "checkbox".
Here's the basic syntax for creating a checkbox in HTML:
<input type="checkbox" id="option1" name="checkboxgroup" value="option1">
<label for="option1">Option 1</label>
 <input>: The tag that defines the input field.
 type="checkbox": An attribute that specifies the input type as a checkbox.
 id: An attribute that gives the checkbox a unique identifier.
 name: An attribute that groups checkboxes together. Unlike radio buttons, multiple checkboxes with
the same name can be selected at the same time.
 value: An attribute that specifies the value associated with the checkbox. This value is sent to the
server when the form is submitted.
 <label>: A tag that provides a clickable label for the checkbox. The for attribute of the label should
match the id attribute of the checkbox.

EASTER 16 | P a g e
HTML

Here's an example of how to create a group of checkboxes:


<form>
<input type="checkbox" id="option1" name="mygroup" value="option1">
<label for="option1">Option 1</label><br>

<input type="checkbox" id="option2" name="mygroup" value="option2">


<label for="option2">Option 2</label><br>

<input type="checkbox" id="option3" name="mygroup" value="option3">


<label for="option3">Option 3</label><br>
</form>
In this example, we have a form with three checkboxes, all belonging to the same group because they share
the same name attribute ("mygroup"). Each checkbox has a unique id and value, and a corresponding label.
When the user selects one or more of these options and submits the form, the values of the selected
checkboxes will be sent to the server.

Dropdowns
In HTML, a dropdown menu is a list of items that appears when a user clicks on or hovers over an element.
Dropdowns are commonly used to present a list of choices in a compact way. To create a dropdown, you use
the <select> tag along with <option> tags for the individual items.
Here's the basic syntax for creating a dropdown in HTML:
<select name="dropdown">
<option value="value1">Option 1</option>
<option value="value2">Option 2</option>
<option value="value3">Option 3</option>
</select>
 <select>: The tag that defines the dropdown menu.
 name: An attribute that gives the dropdown a name, which is used to identify the selected value when
the form is submitted.
 <option>: A tag that defines an item in the dropdown list.
 value: An attribute that specifies the value associated with the option. This value is sent to the server
when the form is submitted.
 Option text: The visible text that appears in the dropdown list for each option.
Here's an example of how to create a dropdown with three options:

EASTER 17 | P a g e
HTML

<select name="colors">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
In this example, we have a dropdown with the name "colors" and three options: Red, Green, and Blue.

Buttons
Buttons are interactive elements in HTML used to trigger actions when clicked. To create a button, you use
the <button> tag.
Here’s the basic syntax:
<button>Click Me</button>

Buttons in Forms
Buttons play a key role in forms, where they help submit data or reset fields. Let’s see how they work:

Submit Button:
<form>
<input type="text" name="username" placeholder="Enter username">
<button type="submit">Submit</button>
</form>

 type="submit": Sends the form data to the server.

Reset Button:
<form>
<input type="text" name="name" value="John Doe">
<button type="reset">Reset</button>
</form>

 type="reset": Clears all fields and resets them to their default values.

Table Basics
 In HTML, a table is a way to organize data into rows and columns. Tables are commonly used to display
data in a structured format, such as schedules, statistics, or any other type of information that can be
presented in a grid. To create a table, you use the <table> tag along with other tags like <tr> for table
rows, <td> for table data (cells), and <th> for table headers.

EASTER 18 | P a g e
HTML

 Here's the basic structure of an HTML table:


 <table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</table>
 <table>: The tag that defines the table.
 <tr>: The tag that defines a table row.
 <th>: The tag that defines a header cell. Header cells are typically used for column or row titles and are
displayed in bold by default.
 <td>: The tag that defines a standard cell in the table.
 Here's how this table would be rendered in a browser:

 Header 1  Header 2

 Row 1, Cell 1  Row 1, Cell 2

 Row 2, Cell 1  Row 2, Cell 2

 In this example, we have a table with two rows and two columns. The first row contains header cells,
and the subsequent rows contain regular data cells. This structure creates a simple grid layout that is
easy to read and understand.

Adding Captions
In HTML tables, a caption is a title or explanation for the table. It provides a brief description of the table's
content, making it easier for users to understand the purpose of the table. Captions are created using the
<caption> tag, which should be placed immediately after the <table> tag.

EASTER 19 | P a g e
HTML

Here's the basic syntax for adding a caption to a table in HTML:


<table>
<caption>Table Caption</caption>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>

</table>

Spanning Rows and Columns


In HTML, you can make table cells span multiple rows or columns using the rowspan and colspan attributes.
These attributes allow you to create more complex table layouts by merging cells together.
The colspan attribute is used to specify the number of columns a cell should span. It is added to
the <td> or <th> tag of the cell that you want to expand.
Here's an example of how to use colspan:
<table border="1">
<tr>
<th colspan="2">Name</th>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
</table>
In this example, the header cell with the text "Name" spans two columns. This is useful for creating a header
that covers multiple columns.
The rowspan attribute is used to specify the number of rows a cell should span. It is also added to
the <td> or <th> tag of the cell that you want to expand.
EASTER 20 | P a g e
HTML

Here's an example of how to use rowspan:


<table border="1">
<tr>
<th>Name</th>
<td rowspan="2">John</td>
</tr>
<tr>
<th>Age</th>
</tr>
<tr>
<td>Jane</td>
<td>25</td>
</tr>
</table>
In this example, the cell with the text "John" spans two rows. This can be useful for grouping related data in a
table.
You can use both colspan and rowspan in the same table to create complex layouts. Just remember to adjust
the number of cells in each row accordingly to accommodate the spanned cells.

Project Overview
In this project, you will create an event registration page using HTML. The page will include a header with the
event name, a schedule displayed in a table, a registration form with various input fields, and a footer with
social media links. This project combines all the concepts you've learned to build a complete webpage.
Challenge
Easy
Create an empty HTML document from zero, don't forget the html and body tags.
<!DOCTYPE html>
<html>
<body>
<div>
<h1>FSY CAMP 2026</h1>
<p>strenthening every youth</p>
<img src="[Link] width="200" height="100">

EASTER 21 | P a g e
HTML

</div>
<div>
<h2>Event Schedule</h2>
<table border="1">
<caption>Activity Schedule</caption>
<tr>
<th>Time</th>
<th>Activity</th>
<th>Location</th>
</tr>
<tr>
<td>6:00am-7:300am</td>
<td>Arrival</td>
<td>Main Hall</td>
</tr>
<tr>
<td>7:30am-9:00am</td>
<td>Breakfast</td>
<td>Dinning</td>
</tr>
<tr>
<td>9:00am-12:30pm</td>
<td>Getting to know your company</td>
<td>Room Appointed</td>
</tr>
<tr>
<td>12:30pm-2:00pm</td>

EASTER 22 | P a g e
HTML

<td>Lunch</td>
<td>Lunch</td>
</tr>
<tr>
<td>2:00pm-2:30pm</td>
<td>Depature</td>
<td>Depature</td>
</tr>
</table><br>
</div>
<div>
<h2>Register Now</h2>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name" ><br><br>
<label for="email">Email</label>
<input type="email" id="email" name="email"><br><br>
<label for="session">Choose a session:</label>
<select id="session" name="session">
<option value="morning">Morning</option>
<option value="afternoon">Afternoon</option>
</select><br><br>
<input type="checkbox" id="terms" name="terms">
<label for="terms">I agree to the terms and conditions</label><br><br>
<button type="submit">Submit</button>
</form>
</div>

EASTER 23 | P a g e
HTML

<div>
<h2>Follow Us</h2>
<a href="[Link] target="_blank">Twitter</a><br>
<a href="[Link] target="_blank">Facebook</a>
</div>
</body>
</html>

EASTER 24 | P a g e

You might also like