Member

Home

Public Education

Schools

Community

Notifications

Announcement & Updates

Features

We published our Copyright, Terms of Services and Privacy Policy in our website to secure our rights. Please access them and read them from the footer.

Bugs & Fixes

WhatsApp Community

Features

Make sure to enter our WhatsApp community for unpublished resources and updates!

Bugs & Fixes

HTML Coding Language

Chapter 1: Introduction to HTML Chapter 2: Common HTML Elements Chapter 3: Attributes and Styling Chapter 4: Tables Chapter 5: Divs and Sections Chapter 6: Iframes

Chapter 1: Introduction to HTML

What is HTML?

HTML (HyperText Markup Language) is the standard language for creating websites. It structures the content you see in web browsers.

Basic Structure of an HTML Document

Here’s the basic structure of an HTML document:

1<!DOCTYPE html>
2<html>
3<head>
4    <title>My First HTML Page</title>
5</head>
6<body>
7    <h1>Welcome to HTML</h1>
8    <p>This is my first HTML page!</p>
9</body>
10</html>

Breakdown of the Structure

<!DOCTYPE html>: This tells the browser we’re using HTML5.
<html>: This starts the HTML document.

The Head Section

<head>: Contains information about the page that isn’t displayed directly.
<title>: Sets the title of the page, which appears in the browser tab.

The Body Section

<body>: This contains everything that will be shown on the web page.
<h1>: This makes the text inside it a heading, which is bigger than regular text. It’s used for main titles.
<p>: This defines a paragraph, creating a block of text.

Closing Tags

When you see something like </h1>, it’s called a closing tag. It tells the browser that the heading section has ended. Every opening tag (like <h1>) needs a closing tag (like </h1>) to show where the element finishes. This helps keep everything organized and allows the browser to understand how to display the content.

How to Execute HTML Code

Create an HTML File:
- Open a text editor (like Notepad).
- Copy the code above.
- Save it with a .html extension (e.g., index.html).
Open in a Web Browser:
- Double-click the saved file.
- It will display in your browser.

Chapter 2: Common HTML Elements

Headings

Headings are important for organizing content on your web page. HTML provides six levels of headings, from <h1> (largest) to <h6> (smallest).

Here’s an example:

1<h1>Main Title</h1>
2<h2>Subheading</h2>
3<h3>Section Title</h3>
4<p>This is a paragraph under a section.</p>

Each heading tag creates a different size, helping readers understand the structure of your content.

Paragraphs

As mentioned before, paragraphs are created using the <p> tag.

Example:

1<p>This is a paragraph. It can contain text that is grouped together.</p>

Use paragraphs to break up your text into manageable chunks.

Links

You can create clickable links using the <a> tag.

Example:

1<a href="https://www.example.com">Visit Example</a>

The href attribute specifies the URL you want to link to. When clicked, it takes the user to that page.

Images

To add images, use the <img> tag. Here’s how to use the src attribute:

1<img src="image.jpg" alt="Description of image">

src Attribute: This tells the browser where to find the image file.
- The file path can be a local file or a URL.
- If your HTML file and image are in the same folder, just use the image name (e.g., image.jpg).
- If the image is in a different folder, include the folder name (e.g., images/image.jpg).
- For images hosted online, use the full URL (e.g., https://www.example.com/image.jpg).

Where to Place Images

File Organization:
- Keep images in a separate folder (like images) for better organization.
- Ensure the file path in the src attribute matches the location of your image.
Example of File Structure:

my_website/
├── index.html
└── images/
    └── image.jpg

In your HTML file, you would reference the image like this:

1<img src="images/image.jpg" alt="Description of image">

Lists

You can create ordered (numbered) or unordered (bulleted) lists.

Unordered List Example:

1<ul>
2    <li>Item 1</li>
3    <li>Item 2</li>
4    <li>Item 3</li>
5</ul>

Ordered List Example:

1<ol>
2    <li>First Item</li>
3    <li>Second Item</li>
4    <li>Third Item</li>
5</ol>

How to Execute the Code

Add the Code:
- Open your existing HTML file.
- Insert the examples in the <body> section.
Open in a Web Browser:
- Save the file.
- Refresh the browser to see the changes.

Chapter 3: Attributes and Styling

Understanding Attributes

Attributes provide additional information about HTML elements. They are included in the opening tag as name/value pairs.

Example:

1<a href="https://www.example.com" target="_blank">Visit Example</a>

href: The URL the link points to.
target: Specifies where to open the linked document. _blank opens it in a new tab.

Using the `alt` Attribute

The alt attribute is crucial for images. It provides a text description that appears if the image fails to load and is read by screen readers for accessibility.

Example:

1<img src="image.jpg" alt="A beautiful landscape">

Inline Styles

You can apply styles directly to an element using the style attribute, which changes how the element looks.

Example:

1<p style="color: blue; font-size: 20px;">This is a blue paragraph with a larger font size.</p>

color: Changes the text color.
font-size: Changes the size of the text.

‍

While HTML allows you to add basic styling with the style attribute, using CSS (Cascading Style Sheets) is a much more efficient way to handle design across your entire website. CSS helps you apply consistent styles to multiple elements and manage changes easily. If you're interested, we also have a dedicated course on CSS for more advanced styling techniques!

Chapter 4: Tables

Tables help organize data into rows and columns. In HTML, the <table> tag creates a table, and you can define the content with rows and cells.

Basic Table Structure

Here’s how you create a simple table with headers and rows:

1<table>
2    <tr>
3        <th>Header 1</th>
4        <th>Header 2</th>
5    </tr>
6    <tr>
7        <td>Row 1, Column 1</td>
8        <td>Row 1, Column 2</td>
9    </tr>
10    <tr>
11        <td>Row 2, Column 1</td>
12        <td>Row 2, Column 2</td>
13    </tr>
14</table>

<table>: Defines the table.
<tr>: Creates a row.
<th>: Creates a header cell.
<td>: Creates a standard data cell.

Adding More Rows

You can add as many rows and columns as needed by simply adding more <tr> and <td> tags. Here's an example with more rows:

1<table>
2    <tr>
3        <th>Name</th>
4        <th>Age</th>
5    </tr>
6    <tr>
7        <td>Alice</td>
8        <td>25</td>
9    </tr>
10    <tr>
11        <td>Bob</td>
12        <td>30</td>
13    </tr>
14</table>

Table Borders

By default, tables don't have visible borders. You can add a basic border by using the border attribute.

1<table border="1">
2    <tr>
3        <th>Name</th>
4        <th>Age</th>
5    </tr>
6    <tr>
7        <td>Alice</td>
8        <td>25</td>
9    </tr>
10    <tr>
11        <td>Bob</td>
12        <td>30</td>
13    </tr>
14</table>

This will create borders around the cells.

Chapter 5: Divs and Sections

Divs and sections are essential for structuring your HTML document and organizing content visually.

Using `<div>` Elements

The <div> tag is a generic container for grouping content. It doesn’t have any specific meaning but is useful for styling and layout purposes.

Example:

1<div>
2    <h2>Welcome</h2>
3    <p>This is a section of content within a div.</p>
4</div>

You can apply CSS styles to divs to control layout and presentation. (We have a separate course for CSS to design your very own modern website).

Using `<section>` Elements

The <section> tag is used to define sections of related content. Each section should ideally have a heading (<h1> to <h6>), which makes it more semantic.

Example:

1<section>
2    <h2>About Us</h2>
3    <p>We are a technology company focused on innovation.</p>
4</section>

Differences Between `<div>` and `<section>`

Semantic Meaning: <section> has semantic meaning, indicating a thematic grouping of content, while <div> is purely a styling container.
Accessibility: Screen readers can better navigate sections compared to generic divs.

When to Use Them

Use <div> for generic grouping of elements when there’s no specific meaning to the group.
Use <section> when you want to define a related block of content, particularly when it includes a heading.

Chapter 6: Iframes

An iframe (inline frame) allows you to embed another webpage within your current webpage. It’s like inserting one website into another.

Basic Iframe Example

Here’s how you can embed another page or website using an iframe:

1<iframe src="https://www.example.com" width="600" height="400"></iframe>

src: The URL of the page you want to embed.
width and height: These specify the size of the iframe.

Using Iframes for Embedding Content

Iframes are often used to embed videos, maps, or other external resources. For example, you can embed a Google map:

1<iframe src="https://maps.google.com/maps..." width="600" 
2height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>

Security Considerations

When embedding iframes from external sources, it’s important to be cautious since iframes can sometimes be used for malicious purposes. Make sure the source you are embedding is trusted.

HTML Coding Language

Chapter 1: Introduction to HTML

What is HTML?

Basic Structure of an HTML Document

Breakdown of the Structure

How to Execute HTML Code

Chapter 2: Common HTML Elements

Headings

Paragraphs

Links

Images

Lists

Ordered List Example:

How to Execute the Code

Chapter 3: Attributes and Styling

Understanding Attributes

Using the alt Attribute

Inline Styles

Chapter 4: Tables

Basic Table Structure

Adding More Rows

Table Borders

Chapter 5: Divs and Sections

Using <div> Elements

Using <section> Elements

Differences Between <div> and <section>

When to Use Them

Chapter 6: Iframes

Basic Iframe Example

Using Iframes for Embedding Content

Security Considerations

Using the `alt` Attribute

Using `<div>` Elements

Using `<section>` Elements

Differences Between `<div>` and `<section>`