HTML Compiler



Elements, Tags, and Attributes

1. HTML Elements, Tags, and Attributes

An HTML element is a building block of a webpage that consists of a start tag, content, and an end tag. Elements form the structure of the content on the page.

Tags are the keywords that define the start and end of an element. Attributes provide additional information about the elements and are included within the opening tag.

Example: <a href="https://olevelcccexam.link">
Visit our site</a>
Here, <a> is the tag, href is an attribute, and "Visit our site" is the content.

2. Empty Tags and Container Tags

Tags in HTML can be divided into two types: empty tags and container tags.

Empty Tags: These tags do not have any content or closing tags. They are self-closing.

Example: <br>, <img src="image.jpg" alt="Sample Image">

Container Tags: These tags come in pairs (an opening and a closing tag) and enclose content between them.

Example: <p>This is a paragraph.</p>, <div>Content here</div>

3. <body> Tag and Its Attributes

The <body> tag contains all the main visible content of an HTML document. Every text, image, and multimedia content is enclosed within this tag.

Important attributes of the <body> tag:

  • bgcolor: Defines the background color of the webpage. (Example: <body bgcolor="#e0f7fa">)
  • background: Sets a background image for the page. (Example: <body background="background.jpg">)
  • text: Changes the default color of the text on the page. (Example: <body text="#333">)
  • margin: Adjusts the default spacing around the page content. (Example: <body margin="0">)
Example: <body bgcolor="#f0f0f0" text="#000">
This sets the background color to a light gray and the text color to black.

4. <p> Tag and Its Attributes

The <p> tag is used to define paragraphs in HTML. It automatically adds space above and below the content.

Attribute: The align attribute aligns the paragraph content. (Example: <p align="center">Centered text</p>)

5. <pre> Tag

The <pre> tag is used to define preformatted text. It preserves spaces and line breaks exactly as they appear in the code.

Example:
<pre>Line 1 Line 2 Line 3</pre>

6. <br> Tag

The <br> tag is an empty tag that inserts a line break. It is often used within paragraphs to separate lines of text.

Example: First Line<br>Second Line
Output:
First Line
Second Line

Student Task-1


7. HTML Formatting Elements

Formatting elements were designed to display special types of text:

  • <b> - Bold text
  • <strong> - Important text
  • <i> - Italic text
  • <em> - Emphasized text
  • <mark> - Marked text
  • <small> - Smaller text
  • <del> or <strike> - Deleted text
  • <big> - Big text
  • <sub> - Subscript text
  • <sup> - Superscript text

This text is bold.

This text is important.

This text is italic.

This text is emphasized.

This text is highlighted (marked).

This is smaller text.

This text is deleted.

This text is big.

H2O (subscript)

x2 + y2 = z2 (superscript)

8. <center> Tag

The <center> tag is used to align the content to the center of its containing element. It is deprecated in HTML5, and CSS should be used for centering instead.

Example: <center>This text is centered</center>
Output:
This text is centered

9. <hr> Tag and Its Attributes

The <hr> tag is used to create a horizontal rule (a line) across the page, usually for separating content.

Important attributes of the <hr> tag:

  • width: Sets the width of the line. (Example: <hr width="50%">)
  • size: Defines the thickness of the line. (Example: <hr size="3">)
  • noshade: Removes the shadow effect, displaying a solid line. (Example: <hr noshade>)
  • align: Aligns the line to the left, center, or right. (Example: <hr align="left">)
  • color: Sets the color of the line. (Example: <hr color="red">)
Example: <hr width="70%" size="5" noshade align="center" color="blue">
Output:

Student Task-2


10. <div> Tag and Its Attributes

The <div> tag is a block-level element used to group content together. It is often styled using CSS.

Important attribute of the <div> tag:

  • align: Sets the alignment of the content inside the <div>. (Example: <div align="center">Centered content</div>)
Example: <div align="center">This content is centered</div>
Output:
This content is centered

11. <font> Tag and Its Attributes

The <font> tag is used to change the font style of text. It is deprecated in HTML5, and CSS should be used instead for styling fonts.

Important attributes of the <font> tag:

  • color: Sets the color of the text. (Example: <font color="blue">Blue text</font>)
  • size: Defines the size of the text. (Example: <font size="5">Larger text</font>)
  • face: Sets the font type. (Example: <font face="Arial">Text in Arial</font>)
Example: <font color="red" size="4" face="Verdana">Stylized text</font>
Output: Stylized text

12. <img> Tag and Its Attributes

The <img> tag is used to insert images into a webpage. It is an inline element.

Important attributes of the <img> tag:

  • src: Specifies the path to the image file. (Example: <img src="image.jpg">)
  • alt: Provides alternative text for the image if it cannot be displayed. (Example: <img src="image.jpg" alt="Description of image">)
  • height: Sets the height of the image. (Example: <img src="image.jpg" height="100">)
  • width: Sets the width of the image. (Example: <img src="image.jpg" width="200">)
  • border: Defines the border width around the image. (Example: <img src="image.jpg" border="2">)
  • hspace: Sets horizontal space around the image. (Example: <img src="image.jpg" hspace="10">)
  • vspace: Sets vertical space around the image. (Example: <img src="image.jpg" vspace="10">)
  • align: Aligns the image relative to surrounding text. (Example: <img src="image.jpg" align="left">)
Example: <img src="example.jpg" alt="Example Image" width="200" height="100" border="1" hspace="5" vspace="5" align="right">
Output: Example Image

13. Heading Tags and Their Attributes

The <h1> to <h6> tags are used to define HTML headings. <h1> is the highest level heading and <h6> is the lowest.

Important attribute for these heading tags:

  • align: Sets the alignment of the heading. Can be "left", "right", "center", or "justify". (Example: <h2 align="right">Right Aligned Heading</h2>)
Example:
<h1 align="center">Centered Heading</h1>
<h2 align="left">Left Aligned Heading</h2>
<h3 align="right">Right Aligned Heading</h3>
<h4 align="justify">Justified Heading</h4>
Output:

Centered Heading

Left Aligned Heading

Right Aligned Heading

Justified Heading


Student Task-3


14. <marquee> Tag and Its Attributes

The <marquee> tag is used to create scrolling text or images. It is a non-standard HTML element and is not recommended for modern web design.

Important attributes of the <marquee> tag:

  • width: Sets the width of the marquee. (Example: <marquee width="300">)
  • height: Sets the height of the marquee. (Example: <marquee height="100">)
  • direction: Determines the direction of scrolling. Values can be "left", "right", "up", or "down". (Example: <marquee direction="left">)
  • scrollamount: Sets the speed of the scrolling. (Example: <marquee scrollamount="10">)
  • loop: Determines how many times the marquee will loop. (Example: <marquee loop="5">)
  • vspace: Adds vertical space around the marquee. (Example: <marquee vspace="10">)
  • hspace: Adds horizontal space around the marquee. (Example: <marquee hspace="10">)
  • behavior: Sets the behavior of the marquee. Values can be "scroll", "slide", or "alternate". (Example: <marquee behavior="alternate">)
Example: <marquee width="300" height="50" direction="right" scrollamount="5" loop="10" vspace="10" hspace="10" behavior="alternate">Scrolling Text</marquee>
Output: Scrolling Text

Student Task-4


15. <!-- Comment --> Tag

Comments in HTML are not displayed in the browser but can help you explain your code or leave notes for others. To add a comment, use:

Example: <!-- This is a comment -->
List Tags Explanation

16. Lists in HTML

Lists are used to group related items together. There are four main types of lists in HTML:

Ordered List

1. Ordered List (<ol>)

An ordered list displays items in a numbered format.

Attributes:

  • type: Specifies the type of numbering (e.g., "1", "a", "A", "i", "I").
  • start: Sets the starting number of the list.
Example: <ol type="A" start="3"><li>Item 1</li></ol>
Output:
  1. Item 1
  2. Item 2
Unordered List

2. Unordered List (<ul>)

An unordered list displays items with bullets.

Attributes:

  • type: Specifies the bullet style (e.g., "disc", "circle", "square").
Example: <ul type="circle"><li>Item 1</li></ul>
Output:
  • Item 1
  • Item 2
Definition List

3. Definition List (<dl>)

A definition list is used to display items in a glossary format.

Example: <dl><dt>HTML</dt><dd>A markup language for creating web pages.</dd></dl>
Output:
HTML
A markup language for creating web pages.
CSS
A stylesheet language used for describing the look and formatting of a document written in HTML.
Nested List

4. Nested List

Nesting lists allows you to create sub-lists within a list item.

Example: <ul> <li>Item 1<ul> <li>Subitem 1</li> </ul></li> </ul>
Output:
  • Item 1
    • Subitem 1
    • Subitem 2
  • Item 2

HTML List Tags

HTML provides different tags to create various types of lists:

  • <ul> - Defines an unordered list.
  • <ol> - Defines an ordered list.
  • <li> - Defines a list item.
  • <dl> - Defines a description (definition) list.
  • <dt> - Defines a term in a description list.
  • <dd> - Describes the term in a description list.

Student Task-5

17. <table> Tag and Its Attributes

The <table> tag is used to create a table in HTML. It can contain several child elements like <tr>, <th>, and <td> to define the structure and content of the table.

Subtags

  • <caption>: Adds a title to the table. (Example: <caption>Table Title</caption>)
  • <tr>: Defines a row in the table.
  • <th>: Defines a header cell. Header cells are bold and centered by default.
  • <td>: Defines a standard cell.

Important attributes of the <table> tag:

  • border: Defines the border width around the table. (Example: <table border="1">)
  • bordercolor: Sets the color of the border. (Example: <table bordercolor="blue">)
  • bgcolor: Sets the background color of the table. (Example: <table bgcolor="#f0f0f0">)
  • background: Adds an image as the background of the table. (Example: <table background="image.jpg">)
  • align: Aligns the table on the page (left, right, or center). (Example: <table align="center">)
  • width and height: Set the width and height of the table. (Example: <table width="80%" height="200">)
  • cellspacing: Sets the space between table cells. (Example: <table cellspacing="5">)
  • cellpadding: Sets the padding inside each table cell. (Example: <table cellpadding="10">)
  • colspan: Allows a cell to span multiple columns. (Example: <td colspan="2">)
  • rowspan: Allows a cell to span multiple rows. (Example: <td rowspan="2">)
Example: 

    <table border="1" bordercolor=
"black" bgcolor="#f9f9f9" align="
center" width="60%" cellspacing=
"2" cellpadding="5">
        <caption>Monthly Sales
</caption>
        <tr>
            <th>Product</th>
            <th>Price</th>
            <th>Quantity</th>
        </tr>
        <tr>
            <td>Laptop</td>
            <td>$1200</td>
            <td>5</td>
        </tr>
        <tr>
            <td>Tablet</td>
            <td colspan="2">$400
 (Special Offer)</td>
        </tr>
    </table>
Output:
Monthly Sales
Product Price Quantity
Laptop $1200 5
Tablet $400 (Special Offer)

Student Task-5.1

Student Task-5.2

Student Task-5.3

Student Task-5.4

18. <frameset> and <frame> Tags with Attributes

The <frameset> and <frame> tags were used to divide a web page into multiple sections or frames, which can load different HTML documents.

Important attributes of the <frameset> and <frame> tags:

  • rows: Specifies the height of rows in a frameset. (Example: <frameset rows="50%,50%">)
  • cols: Specifies the width of columns in a frameset. (Example: <frameset cols="30%,70%">)
  • border: Defines the border width between frames. (Example: <frameset border="2">)
  • noresize: Prevents the frame from being resized by the user.
  • scrolling: Controls scrolling within a frame. Values can be yes, no, or auto.
Example: <frameset rows="50%,50%" cols="50%,50%"> <frame src="top.html" scrolling="yes" noresize> <frame src="bottom.html" border="2"> </frameset>

Nested <frameset> Example

Using nested <frameset> tags allows you to create more complex layouts by placing one frameset inside another.

Example of Nested Frameset: <frameset rows="50%,50%" border="1">
  <frame src="top.html" scrolling="yes" noresize>
  <frameset cols="50%,50%">
    <frame src="left.html" >
    <frame src="right.html" scrolling="auto" >
  </frameset>
</frameset>

Student Task-6

19. <a> Tag (Anchor Tag) and Its Types

The anchor tag (<a>) is used to create hyperlinks in HTML. There are three main types of links you can create:

Internal Links

Links to sections within the same webpage using Name Attribute.

Example: <a href="#section1">Go to Section 1</a>
Target: <h2 name="section1">Section 1</h2>

External Links

Links to another webpage.

Example: <a href="name.html">Visit Example.com</a>

Global Links

Links that use complete URLs (including protocol and domain) to ensure they work from any location.

Example: <a href="https://www.example.com/
page.html"
>Global Link</a>

Important Attributes of the <a> Tag:

  • href: Specifies the URL or destination of the link
    Example: <a href="https://www.example.com">Visit Example</a>
  • name: Defines a named anchor (deprecated in HTML5, use id instead)
    Example: <a name="top">Top of page</a>
  • target: Specifies where to open the linked document
    • _blank: Opens in new window/tab
    • _self: Opens in same window (default)
    Example: <a href="page.html" target="_blank">Open in new tab</a>
  • title: Provides tooltip text when hovering over the link
    Example: <a href="page.html" title="Click to learn more">Learn More</a>
  • download: Specifies that the target will be downloaded when clicked
    Example: <a href="file.pdf" download>Download PDF</a>
Complete Example: <a href="https://www.example.com/
document.pdf" target="_blank" title="Download our brochure" download="brochure.pdf"> Download Brochure </a>
Student Task-7

20. <form> Tag and Its Attributes

The <form> tag is used to create an HTML form for user input. It is a block-level element.

Important attributes of the <form> tag:

  • name: Specifies a name for the form.
  • action: Defines the server-side script that will handle the form data.
  • method: Determines the HTTP method used to send the form data (GET or POST).
Example: <form name="myForm" action="/submit.php" method="post"></form>

1. <input> Tag and Its Attributes

The <input> tag is used to create form input fields. It is an inline element.

Important attributes of the <input> tag:

  • type: Specifies the type of input field. Common values are:
    • text: A single-line text input field.
    • password: A text input field that hides the characters as they are typed.
    • email: An email address input field.
    • date: A date input field.
    • time: A time input field.
    • tel: A telephone number input field.
    • checkbox: A checkbox that can be selected/deselected.
    • radio: A radio button that can be selected from a group.
    • range: A slider control for selecting a value within a range.
    • submit: A button that submits the form.
    • reset: A button that resets the form to its initial state.
  • size: Specifies the visible width of the input field (in characters).
  • maxlength: Limits the maximum number of characters that can be entered.
  • name: Specifies the name of the input field, which is used to identify the field when the form is submitted.
  • placeholder: Provides a hint about the expected content of the input field.

2. <button> Tag

button: A standard button that can be clicked.Button Tag allows developers to add clickable elements for various actions like submitting forms, executing scripts, or controlling page behaviour.

3. <textarea> Tag

The <textarea> tag is used to create a multi-line text input field, allowing users to enter longer pieces of text. It has the following important attributes:

  • rows: Specifies the visible number of lines in the text area.
  • cols: Specifies the visible width of the text area in average character widths.
  • name: Specifies the name of the text area, which is used to identify the field when the form is submitted.
  • placeholder: Provides a hint about the expected content of the text area.
Example: <form name="myForm" action="/submit.php" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" value="John Doe" size="20" maxlength="50"><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br>
<input type="checkbox" id="agree" name="agree" value="yes">
<label for="agree">I agree to the terms</label><br>
<input type="submit" value="Submit">
</form>

4. <fieldset> Tag and <legend> Tag

The <fieldset> tag is used to group related form controls together, such as a set of radio buttons or checkboxes.

The <legend> tag provides a caption for the <fieldset> element.

Example: <form name="myForm" action="/submit.php" method="post">
<fieldset>
<legend>Personal Information</legend>
<label for="name">Name:</label>
<input type="text" id="name" name="name" value="John Doe" size="20" maxlength="50"><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br>
</fieldset>
<fieldset>
<legend>Preferences</legend>
<input type="checkbox" id="agree" name="agree" value="yes">
<label for="agree">I agree to the terms</label><br>
<input type="submit" value="Submit">
</fieldset>
</form>

The <fieldset> tag groups the form controls, and the <legend> tag provides a caption for each fieldset, making the form more organized and easier to understand.

5. <select> Tag and <option> Tag

The <select> tag is used to create a dropdown list or a combo box. It is a block-level element.

Important attributes of the <select> tag:

  • name: Specifies the name of the select element, used to identify the field when the form is submitted.
  • size: Specifies the number of visible options in the dropdown list.

The <option> tag is used to create individual options within the <select> dropdown list.

Important attributes of the <option> tag:

  • value: Specifies the value that will be submitted when the form is submitted.
  • selected: Specifies that the option should be pre-selected when the page loads.
Example: <form name="myForm" action="/submit.php" method="post"> <label for="country">Select a country:</label> <select id="country" name="country"> <option value="">-- Select a country --</option> <option value="usa">United States</option> <option value="can">Canada</option> <option value="mex">Mexico</option> </select>
<input type="submit" value="Submit"> </form>
Student Task-8

Introduction to HTML5

HTML5 is the latest version of HyperText Markup Language, the standard language used to create web pages. It was designed to simplify web development, improve user experience, and support the latest multimedia formats. HTML5 introduces new tags, attributes, and APIs that enhance the functionality and structure of web pages.

Features of HTML5

  • Semantics: New tags like <header>, <footer>, <section>, <article>, etc., add meaning to the structure of a webpage, making it easier to understand and style.
  • Multimedia: HTML5 natively supports audio and video elements, allowing for easy media integration without plugins.
  • Graphics and 2D/3D Effects: HTML5 includes the `<canvas>` element for rendering graphics and 2D/3D shapes directly in the browser.
  • Form Enhancements: New input types (like `email`, `date`, and `number`) and attributes simplify form validation and input.
  • APIs: HTML5 introduces several new APIs, such as the Geolocation API, Web Storage API, and WebSocket API, to enable richer web applications.
  • Offline Support: The Application Cache and IndexedDB features allow web applications to function without an internet connection.
i>

New HTML5 Tags

  • <nav>: Defines a section of navigation links.
  • <article>: Represents self-contained content, like a blog post or news article.
  • <aside>: Used for content that is tangentially related to the main content, such as sidebars.
  • <audio>: Embeds audio content on the page. Important attributes:
    • controls: Displays audio playback controls for users.
    • autoplay: Starts the audio automatically when the page loads.
    • loop: Replays the audio continuously when it reaches the end.
    • src: Specifies the URL of the audio file.
    • type: Defines the MIME type of the audio file (e.g., "audio/mpeg" or "audio/ogg").
    Example: <audio src="audio-file.mp3" type="audio/mpeg" controls autoplay loop></audio>
  • <video>: Embeds video content on the page. Important attributes:
    • controls: Displays video playback controls for users.
    • autoplay: Starts the video automatically when the page loads.
    • loop: Replays the video continuously when it reaches the end.
    • src: Specifies the URL of the video file.
    • type: Defines the MIME type of the video file (e.g., "video/mp4" or "video/webm").
    • width: Specifies the width of the video player (in pixels).
    • height: Specifies the height of the video player (in pixels).
    Example: <video src="video-file.mp4" type="video/mp4" controls autoplay loop width="640" height="360"></video>
Student Task-9

Student Task-10

HTML Form Validations

Form Validations in HTML5

HTML5 introduced built-in form validations to ensure users provide valid input before submitting forms. These validations prevent form submission until fields meet specified criteria, like being filled in or matching a required format.

Example form with validation:







HTML Code:

<form>
    <label for="name">Name:</label>
    <input type="text" id="name"
 name="name" required>
    <br><br>
    <label for="email">Email:</label>
    <input type="email" id="email"
 name="email" required>
    <br><br>
    <label for="password">Password:</label>
    <input type="password" id="password"
 name="password" pattern=".{6,}" required>
    <br><br>
    <button type="submit">Submit</button>
</form>

1. The required Attribute

The required attribute ensures that a form field must be filled out before submitting the form. If a field with required is empty, the form won’t submit and displays a warning to the user.

Example:



HTML Code:

<form>
    <label for="username">Username:</label>
    <input type="text" id="username" 
name="username" required>
    <br><br>
    <button type="submit">Submit</button>
</form>

2. The pattern Attribute

The pattern attribute allows you to specify a regular expression that the input must match. If the input doesn’t match the pattern, the form won’t submit, and a validation message is displayed.

Example:

Only letters are allowed. Pattern: [A-Za-z]+

Letters and numbers only, no spaces. Pattern: [A-Za-z0-9]+

Must be a valid email format. Pattern is built-in for email.

10-digit number only. Pattern: \d{10}

Minimum 8 characters, with at least one uppercase, one lowercase, and one digit. Pattern: (?=.*[a-z])(?=.*[A-Z])(?=.*\d)[A-Za-z\d]{8,}

Format: YYYY-MM-DD. Pattern: \d{4}-\d{2}-\d{2}

Must be a valid URL. Pattern is built-in for URLs.

Format: 123.123.123.123. Pattern: (?:\d{1,3}\.){3}\d{1,3}

Format: #FFFFFF. Pattern: #[A-Fa-f0-9]{6}

5 or 6-digit postal code. Pattern: \d{5,6}

Allows letters, numbers, and !@#. Pattern: [A-Za-z0-9!@#]+

Fill Out the Form!

3. Autofocus: Start Typing Right Away!

The autofocus attribute makes it easy to start typing. When the page opens, the cursor will already be in this box!

Type only letters. No numbers or spaces!

5. Number: Pick a Number in the Box

The number box only lets you type numbers. You can set the smallest and biggest numbers allowed.

Pick a number between 1 and 100.

Iframe: See Another Website in a Box!

The iframe tag lets you see another webpage inside this webpage! Here’s a sample webpage inside a box:

<iframe src="https://www.olevelcccexam.link" width="600" height="400" title="Example Website"> Your browser doesn’t support iframes. </iframe>



Student Task-11