Learn HTML Basics

To create a link to another web page, you need to specify the destination URL using the href attribute

<a href="https://google.com">Google</a> 
<<p>Click here to visit another page <a href="../dir1/page1.html">Page 1</a></p>
<<p>Click here to jump to specific section in same page <a href="#mysecton">Section 1</a></p>
<!-- Some content-->
<h2 id="mysection">Section 1</h2>

8. HTML Lists

In HTML, you can create lists using the <ul> (unordered list) and <ol> (ordered list) tags.

You can also use the <dd> (definition description) and <dl> (definition list) tags to create definition lists

An unordered list is a list of items that are not ordered in any specific way.

To create an unordered list, you can use the <ul> tag and nest individual list items within <li> (list item) tags.

 

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

This will create a list with bullet points next to each item

• Item 1
• Item 2
• Item 3

An ordered list is a list of items that are ordered in a specific way, such as numerically or alphabetically. To create an ordered list, you can use the <ol> tag and nest individual list items within <li> tags.

<ol>
<li>Item 1 </li>
<li>Item 2 </li>
<li>Item 3 </li>
</ol>

This will create a list with numbers next to each item

1. Item 1
2. Item 2
3. Item 3

You can also nest lists within lists to create multi-level lists (useful for dropdown menus)

<ul>
<li>Item 1</li>
<li>Item 2
<ul>
<li>Subitem 1</li>
<li>Subitem 2</li>
</ul>
</li>
<li>Item 3</li>
</ul>

A definition list is a list of terms and their corresponding definitions. To create a definition list, you can use the <dl> tag and nest the terms within <dt> (definition term) tags and the definitions within <dd> tags.

<dl>
<dt>Term 1</dt>
<dd>Definition 1</dd>
<dt>Term 2</dt>
<dd>Definition 2</dd>
<dt>Term 3</dt>
<dd>Definition 3</dd>
</dl>

This will create a definition list with the terms and definitions listed in separate columns:

Term 1

Definition 1

Term 2

Definition 2

Term 3

Definition 3

The <dd> tag is used to indicate the description or definition of the term that precedes it in the list. The <dl> tag is used to define the entire definition list.

9. HTML Forms

In HTML, you can use forms to collect user input. Forms are created using the <form> element, and contain various form elements such as text fields, buttons, and checkboxes.

<form>
<label for="name" >Name: </label><br>
<input type="text" id="name" name="name"><br>
<label for="email">Email :</label><br>
<input type="email" id="email" name="email"><br>
<input type="submit" value="Submit">
</form> 

Forms can also contain other elements such as radio buttons, checkboxes, and dropdown menus

<form>
<label for="name">Name:</label><br>
<input type="text" id="name" name="name"><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email"><br>
<label for="gender">Gender:</label><br>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
<label for="hobbies">Hobbies:</label><br>
<input type="checkbox" id="hobby1" name="hobby" value="reading">
<label for="hobby1">Reading</label><br>
<input type="checkbox" id="hobby2" name="hobby" value="music">
<label for="hobby2">Music</label><br>
<label for="country">Country:</label><br>
<select id="country" name="country">
<option value="usa">India</option>
<option value="canada">Canada</option>
<option value="mexico">Mexico</option>
</select><br>
<input type="submit" value="Submit">
</form> 

HTML Buttons:

In HTML, you can create buttons using the <button> element. A button can be used to trigger an action when clicked by the user, such as submitting a form or navigating to a different page.

To create a button in HTML, you can use the 'button' element or the 'input' element with the type attribute set to button.

<button>Click me</button>
<input type="button" value="Click me">

We can style this buttons as we want. Using Java Script, we can make this button to perform an action.

<style>
#myBtn{
padding:9px;
border-radius: 18px;
background-color: black;
color:white;
}

</style>
<button id="myBtn">Click me</button>
<script>
let button = document.getElementById("myBtn");
button.onclick = function(){
alert("Hi");
}
</script>

label:

In HTML, the 'label' element is used to create a label for an input element. The label element can be used to provide a description for the input element, or to group related elements together.

<label for="email">Email:</label>
<input type="email" id="email" name="email">

10. HTML Tables

HTML tables are used to present data in a tabular format on a web page. Tables are made up of rows and columns, and each cell in the table can contain text or other content.

To create a table in HTML, you can use the 'table' element, which consists of one or more 'tr' (table row) elements, each of which contains one or more 'td' (table cell) elements.

<table>
<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>

By applying some style on this we can make this more like an accurate table

<style>
table {
border-collapse: collapse;
border: 1px solid black;
}

td {
padding: 10px;
border: 1px solid black;
text-align: center;
}

th {
background-color: lightgray;
font-weight: bold;
}
</style>
<table>
<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>

11. HTML Images and Image Map

HTML images are used to display images on a web page. To add an image to an HTML page, you can use the img element.

<img src="image.jpg" alt="My image">

The 'src' attribute specifies the source of the image, and the 'alt' attribute provides a text alternative for the image in case it cannot be displayed in the browser.

You can also use the 'width' and 'height' attributes to specify the dimensions of the image in pixels.

<img src="image.jpg" alt="My image" width="200" height="100">

An image map is a way to create multiple clickable areas on an image. To create an image map in HTML, you can use the 'map' and 'area' elements.

<img src="image.jpg" alt="My image" usemap="#map1">

<map name="map1">
<area shape="rect" coords="0,0,100,100" href="area1.html" alt="Area 1">
<area shape="circle" coords="200,200,50" href="area2.html" alt="Area 2">
</map>

12. HTML Chatacter Entities

HTML character entities are used to display special characters on a web page that may not be easily entered using a keyboard or may not be supported by the character encoding of the page.

Here is a list of some common HTML character entities:

&lt;    : Less than sign <
&gt;   : Greater than sign >
&amp;   : Ampersand &
&quot;   : Double quotation mark "
&apos;   : Single quotation mark '
&copy;   : Copyright symbol ©
&reg;   : Registered trademark symbol ®

<p>Copyright &© 2021</p>
<p>
&lt;head> The head tag &lt;/head>
</p>

Copyright &© 2021

<head> The head tag </head>

13. HTML <br> and &nbsp;

The <br> element is used to insert a line break in an HTML document. It is an empty element, which means that it does not have a closing tag and does not contain any content.

<p>This is some text.<br>This is more text on a new line.</p>

This will display the text "This is some text." on one line, and "This is more text on a new line." on the next line.

The '& ' character entity is used to insert a non-breaking space in an HTML document. It is a special character that represents a space that will not be collapsed, even if it appears at the end of a line.

<p>This is some text.&nbsp;&nbsp;&nbsp;This is more text on the same line.</p>

This will display the text "This is some text. This is more text on the same line." on one line, with three non-breaking space between "text." and "This".

14. HTML Core Attributes

HTML elements have some attributes to provide additional information about the element.

These are useful for java script to get the specific element or css to style the element.

1. 'id': This attribute assigns a unique identifier to an element. The id attribute is used to identify an element and to create a link to that element from other elements on the page or in other documents.

2. 'class': This attribute assigns one or more class names to an element. The class attribute is used to apply styles to elements in CSS.

3. 'style': This attribute allows you to specify inline styles for an element. The style attribute is used to apply specific styles to an element, rather than using a separate stylesheet.

4. 'title': This attribute provides additional information about an element. The title attribute is usually displayed as a tooltip when the mouse pointer hovers over the element.

5. 'lang': This attribute specifies the language of the element's content. The lang attribute is used to specify the language of an element's content and to help search engines and screen readers understand the content.

6. 'accesskey': This attribute defines a shortcut key to activate or focus an element. The accesskey attribute is used to specify a shortcut key that can be used to activate or focus an element.

Note that these attributes are just a small subset of the attributes available in HTML.

15. HTML Language Attributes

HTML language attributes are used to specify the language of an element's content and to help search engines and screen readers understand the content.

the most commonly used HTML language attributes are

1. 'lang': This attribute specifies the language of the element's content.

2. 'xml:lang': This attribute is similar to the lang attribute, but is used specifically in XML documents.

3. 'hreflang': This attribute specifies the language of the linked document. The hreflang attribute is used in the a element to specify the language of the linked document.

16. HTML Semantic Elemets

These tags are most important for SEO(Search Engine Optimization). Consider this tags to use for your HTML document.

They provide additional meaning and structure to the content of a web page, making it easier for both humans and machines to understand the content and context of the page.

1. 'header': This element represents the header of a section or page. It typically contains the title or heading of the section or page, as well as other elements such as logos or navigation links.

2.' nav': This element represents a section of the page that contains navigation links. It is used to indicate the primary navigation links for a web page.

3. 'article': This element represents a self-contained piece of content, such as a blog post or news article. It is used to indicate that the content within the element is independent from the rest of the page.

4. 'footer': This element represents the footer of a section or page. It typically contains information such as copyright notices, links to related content, or contact information.

5. 'section': This element represents a generic section of a web page. It is used to group related content together and to provide a heading or title for the section.

6. 'aside': It is often used for sidebars or for content such as advertisements or related links.

<html>
<head>
<title>My Blog</title>
</head>
<body>

<header>

<h1>My Blog</h1>

<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>My First Blog Post</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dictum, odio non fringilla lobortis, turpis risus gravida lorem, nec tincidunt nibh mauris quis erat. Maecenas tincidunt ornare ligula, id vehicula ipsum ornare non. Praesent in nulla sed ligula congue dictum. Aliquam erat volutpat. Sed suscipit, urna vel iaculis scelerisque, diam purus convallis nibh, eget bibendum risus arcu id orci. Proin venenatis, diam in auctor gravida, lectus nibh dictum ipsum, a fringilla lacus enim non lectus.</p>
</article>

<article>
<h2>My Second Blog Post</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dictum, odio non fringilla lobortis, turpis risus gravida lorem, nec tincidunt nibh mauris quis erat. Maecenas tincidunt ornare ligula, id vehicula ipsum ornare non. Praesent in nulla sed ligula congue dictum. Aliquam erat volutpat. Sed suscipit, urna vel iaculis scelerisque, diam purus convallis nibh, eget bibendum risus arcu id orci. Proin venenatis, diam in auctor gravida, lectus nibh dictum ipsum, a fringilla lacus enim non lectus.</p>
</article>
<footer>
<p>Copyright 2021 My Blog</p>
</footer>

</body>
</html>

17. HTML Window Events

HTML window events allow you to execute JavaScript code in response to user actions such as clicking a button, loading a page, or resizing the window.

1. 'onload': This event is triggered when the browser finishes loading the page.

2. 'onunload': This event is triggered when the user leaves the page or closes the browser window.

3. 'onresize': This event is triggered when the user resizes the browser window.

4. 'onscroll': This event is triggered when the user scrolls the page. It can be used to execute code in response to scrolling, such as updating the position of fixed elements or loading new content as the user scrolls.

5. 'onfocus': This event is triggered when an element receives focus.

6. 'onblur': This event is triggered when an element loses focus

<html>
<head>
<title>My Page</title>
</head>

<body onload="init()">
<!-- Page content goes here -->
<script>
function init() {
// Code to be executed when the page is loaded goes here
alert("The page is fully loaded!");
}
</script>
</body>
</html>

18. HTML Form Events

HTML form events are events that are triggered by actions that occur in an HTML form.

1. 'onsubmit': This event is triggered when the user submits a form. It can be used to execute code when the form is submitted, such as validating the form data or sending the data to the server.

2. 'onreset': This event is triggered when the user resets a form.

3. 'onfocus': This event is triggered when an element within a form receives focus

4. 'onblur': This event is triggered when an element within a form loses focus.

5. 'onchange': This event is triggered when the value of an element within a form is changed.

<form onsubmit="return validateForm()" onreset="resetForm()">
<label for="name">Name:</label><br>
<input type="text" id="name" name="name"><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email"><br><br>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form> 

<script>
function validateForm() {
// Validate form input and return true if the form is valid, false if not
// For example, you could check that the name field is not empty and that the email field is a valid email address
// If the form is invalid, you can display an error message to the user
}

function resetForm() {
// Reset the form to its default state
// For example, you could clear any input fields or reset any selected options
}
</script>

19. HTML Mouse Events

HTML provides several mouse events that you can use to create interactive websites. For example:

1. 'onclick': Triggered when the user clicks on an element

2. 'onmousedown': Triggered when the user presses a mouse button over an element

3. 'onmouseenter': Triggered when the user moves the mouse pointer over an element

4. 'onmouseleave': Triggered when the user moves the mouse pointer out of an element

5. 'oncontextmenu': Triggered when the user right-clicks on an element

6. 'onmouseout': Triggered when the mouse pointer leaves an element

7. 'onmouseover': Triggered when the mouse pointer moves over an element

8. 'onmouseup': Triggered when the user releases a mouse button over an element

20. HTML Favicon

A favicon (short for "favorite icon") is a small icon that is displayed in the browser's address bar, bookmark menu, or on the page tab. It is used to represent a website and help users identify and locate it more easily.

<link rel="shortcut icon" type="image/x-icon" href="/path/to/favicon.ico">

Replace /path/to/favicon.ico with the path to your favicon file. The favicon file should be a small image in ICO or PNG format. You can also use a transparent PNG file for the favicon, which allows it to blend in with the background color of the browser's address bar.

It is a good idea to create a favicon that is at least 16x16 pixels in size, since it may be displayed at that size in some browsers.

21. HTML File Paths

In HTML, file paths are used to link external files such as stylesheets, images, and scripts to an HTML document.

There are two types of file paths:

1. 'Absolute file paths': An absolute file path is a complete URL that includes the domain name. For example:

<link rel="stylesheet" href="https://www.example.com/css/styles.css">

'2. Relative file paths': A relative file path points to a file relative to the current page. For example:

<img src="images/logo.png">
<a href="about.html">About</a>
<a href="about/about.html">About</a>

Thank You

Thank you for taking the time to read our HTML tutorial. We hope that it was helpful to you in your learning journey.