HTML: Hyper text markup language
Use VS code for development. As it comes with emmets. Or you can use any other editor with emmets.
In order to render the HTML page, we need html tag.
<html>
</html>
For using HTML5, we use document type to be html
<!DOCTYPE html>
Head & Body
We need head and body to properly render an HTML page.
In head tag, we keep metadata information.
In body tag, we keep actual page related information.
head tag also refers for CSS and JavaScript files.
Simple template
<!DOCTYPE html>
<html>
<head>
<title> Sample Title </title>
</head>
<body>
</body>
</html>
Attribute in html
<tagName attributeName="value of Attribute" > … </tagName>
Anchor element or hyperlinking
a stand for anchor
<a href="www.google.com"> Google Search Engine </a>
href could be a web address, email address, phone number, a document, another webpage in the browser.
URL: Uniform Resource Locator is a fancy name for a web address.
Absolute URL is a URL which always same regardless of content being supplied.
Example:
https://www.buzzfeed.com/mypath
Protocol: https
Domain: www.buzzfeed.com
path: mypath
Relative URL is path which is referring to files present locally example, suppose we have below directory structure:
index.html
about.html
articles
- article1.html
- article2.html
If we want to refer to index.html,
<a href="index.html"> Main Page <a>
When we are on index.html page, we can get article1 like following:
<a href="articles/article1.html"> Article 1 <a>
Once we are on Article 1, we can get back to index.html using
<a href="../index.html"> Main page <a>
Heading:
Heading should not be used for font increasing or decreasing.
Heading should be sequential. It means h2 should only come after h1 and so on.
Example:
<!DOCTYPE HTML>
<html>
<head>
<title>pracitce page</title>
</head>
<body>
<h1> h1 heading </h1>
<h2> h2 heading </h2>
<h3> h3 heading </h3>
<h4> h4 heading </h4>
<h5> h5 heading </h5>
<h6> h6 heading </h6>
</body>
</html>
Unordered and ordered lists:
If we want to just show items, we use unordered list.
If we want to sequentially show steps, we use ordered list.
unordered list can have type as disc, circle, square.
Ordered list can have type attribute as I, i, a, A or 1. Also, we can have start attribute to start from a specific number.
Example below:
<!DOCTYPE HTML>
<html>
<head>
<title>pracitce page for unordered list and ordered list </title>
</head>
<body>
<h1> Example of unordered list </h1>
<ul>
<li> point number 1 </li>
<li> point number 2 </li>
<li> point number 3 </li>
</ul>
<ul type="circle">
<li> point number 1 </li>
<li> point number 2 </li>
<li> point number 3 </li>
</ul>
<ul type="square">
<li> point number 1 </li>
<li> point number 2 </li>
<li> point number 3 </li>
</ul>
<ul type="disc">
<li> point number 1 </li>
<li> point number 2 </li>
<li> point number 3 </li>
</ul>
<h1> Example of ordered list </h1>
<ol>
<li> number 1 </li>
<li> number 2 </li>
<li> number 3 </li>
</ol>
<ol type="I" >
<li> number 1 </li>
<li> number 2 </li>
<li> number 3 </li>
</ol>
<ol type="i" >
<li> number 1 </li>
<li> number 2 </li>
<li> number 3 </li>
</ol>
<ol type="a" >
<li> number 1 </li>
<li> number 2 </li>
<li> number 3 </li>
</ol>
<ol type="A" >
<li> number 1 </li>
<li> number 2 </li>
<li> number 3 </li>
</ol>
<!---- start attribute >-->
<ol type="1" start="4" >
<li> number 1 </li>
<li> number 2 </li>
<li> number 3 </li>
</ol>
<ol type="i" start="4" >
<li> number 1 </li>
<li> number 2 </li>
<li> number 3 </li>
</ol>
</body>
</html>
Block elements: elements that take full width. They start from new line.
heading
paragraph
list element
Inline elements: element that are in the same line. They do not start from a new line.
<a href="https://www.google.com">google search engine</a>
<img src="tesla_image.webp" alt="a random image" height="100">
<strong> This is bold strong. </strong>
<em> This is em tag. </em>
Div section element: It is used to create content section.
<div>
<p> I am paragraph inside div element. div does not render anything but it is used to create a section. </p>
</div>
id attribute:
id attribute can be used in the later stage. There should be only one unique id. There should not be any whitespace.
class attribute:
class attribute is similar to id attribute and it is used to identify specific element. Class element can be used across multiple elements. An element can have multiple classes separated by white spaces.
image element:
It does not have closing tag.
<img src="./tesla_image.webp" alt="image of tesla car">
Example: id, class and ima
<body>
<!-- Write your HTML Here -->
<div id="recipeTitle">
<h1>My paneer recipe</h1>
<img src="https://images.immediate.co.uk/production/volatile/sites/30/2020/08/chorizo-mozarella-gnocchi-bake-cropped-9ab73a3.jpg?quality=90&webp=true&resize=700,636" alt="recipe of corn">
</div>
<div class = "recipeList" id = "ingredients">
<h2 >Ingredients</h2>
<ul type="square">
<li> first ingredeint </li>
<li> second ingredeint </li>
<li> third ingredeint </li>
</ul>
</div>
<div class = "recipeList" id = "instructions" >
<h2>Instructions</h2>
<ol type="i">
<li> first step </li>
<li> second step </li>
<li> third step </li>
</ol>
</div>
</body>
Semantic elements vs presentational elements:
Semantic elements were introduced in HTML5 and are used for meaningful structure of a webpage.
they are nav, section, header, hgroup, time etc.
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.js"></script>
</head>
<body>
<!-- Add semantic tags to this HTML -->
<header>
<hgroup>
<h1>Learning Web Development</h1>
<h2>A site dedicated to learning how to develop applications for the web.</h2>
</hgroup>
<nav>
<ul>
<li><a href="">Home</a></li>
<li><a href="">About This Site</a></li>
<li><a href="">Contact Information</a></li>
</ul>
</nav>
</header>
<article>
<hgroup>
<h1>Using Semantic HTML Elements</h1>
<h2>A complete guide on indicating meaning for your web page's content</h2>
<h3> <time datetime="2024-12-18">December 18, 2024</time></h3>
</hgroup>
<section>
<h4><code>header</code></h4>
<p>Use header elements for content that is consistent across your web page.</p>
<p>Headers may also contain your site's navigation components.</p>
</section>
<section>
<h4><code>footer</code></h4>
<p>Use footer elements to store "footer" content, like author/copyright info.</p>
</section>
<section>
<h4><code>nav</code></h4>
<p>Use nav elements to store elements associated with site navigation.</p>
<p>Navigational <code>anchor</code> tags are often wrapped in an unordered list element.</p>
</section>
</article>
<footer>
<p>© Educative.io 2024</p>
</footer>
</body>
</html>
HTML table
<table>
<tr>
<th> table_data_1 </th>
<th> table_data_2 </th>
<th> table_data_3 </td>
</tr>
<tr>
<td> one </td>
<td> two </td>
<td> three </td>
</tr>
</table>
HTML Form
<form>
<label for="username">
username:
<input type="text" id="firstTextInput" name="firstTextInput">
</label>
<label for="password">
password:
<input type="password" id="password" name="password">
</label>
<label for="email">
Email address:
<input type="email" id="email" name="email">
</label>
<label for="url">
url:
<input type="url" name="url" id="url">
</label>
<label for="multilineInput">
<p>This is an input element that can include new lines.</p>
<textarea name="multilineInput" id="multilineInput" rows="10" cols="100">sitendra</textarea>
</label>
</form>
apache2 webserver: For serving the web content.
vs code with following extensions:
Exercises:
Semantic Skeleton.
<!DOCTYPE html>
<html>
<head>
<title> Exercise 1 - Basic Semantic Struture</title>
</head>
<body>
<header>
<h1> Sitendra Nagesh </h1>
<nav>
<ul>
<li> <a href="index.html">Home</a> </li>
<li> <a href="about.html">About</a> </li>
<li> <a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2> About Me </h2>
<p> I was a mechanial engineer who transitioned to software development. Right now, I am an enthusiast to learn new technology.</p>
</section>
</main>
<footer>
© 2026 Sitendra Nagesh
</footer>
<!-- usage notes -->
<!--
order of semantic tags
header
main
footer
Under header, we have
h1 title
nav naviagation bar it contains the links
- nav bar links are put lists
Under main, we have multiple sections
- section 1
- section 2
Under footer, we have footer notes such as copy rights.
-->
</body>
</html>
Section -> article
<!DOCTYPE html>
<html>
<head>
<title> Exercise 1 - Basic Semantic Struture</title>
</head>
<body>
<header>
<h1> Sitendra Nagesh </h1>
<nav>
<ul>
<li> <a href="index.html">Home</a> </li>
<li> <a href="about.html">About</a> </li>
<li> <a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2> Latest Posts </h2>
<article>
<h3> Who is a mechanical engineer? </h3>
<p> A mechanial engineer is someone who knows the meachanics of physical objects. And based on his knowledge on real world knowledge, he engineers a new solution or resolve the existing problem. </p>
<footer>
<time datetime="2026-01"> Published on Jan 2026 </time>
</footer>
</article>
<article>
<h3> Who is a software engineer? </h3>
<p> A software engineer is somebody who knows fundamentals of computers, its hardware part, kernel, operating system and he knows languages to talk to computers.</p>
<footer>
<time datetime="2026-01"> Published on Jan 2026 </time>
</footer>
</article>
</section>
</main>
<footer>
© 2026 Sitendra Nagesh
</footer>
<!-- usage notes -->
<!--
order of semantic tags
header
main
footer
Under header, we have
h1 title
nav naviagation bar it contains the links
- nav bar links are put lists
Under main, we have multiple sections
- section 1
- section 2
Under section, we have article
- article 1
- article 2
- article 3
Under article, we have a
- h3
- a paragraph
- a footer
Under footer, we have footer notes such as copy rights.
-->
</body>
</html>
Form Exercises:
<!DOCTYPE html>
<html>
<head>
<title>
Login Form Exercise - 2
</title>
</head>
<body>
<header>
<h1> Sitendra </h1>
<nav>
<ul>
<li> <a href="index.htm,"> Home </a></li>
<li> <a href="about.html"> About Me </a></li>
<li> <a href="contact.hmtl">Contact </a></li>
</ul>
</nav>
</header>
<main>
<form>
<!-- Email field -->
<fieldset>
<legend> Login </legend>
<label for="email">Email</label>
<input type="email" name="email" id="email" required>
</fieldset>
<!-- password field -->
<fieldset>
<legend> Password </legend>
<label for="password">Password</label>
<input type="password" name="password" id="password" required>
</fieldset>
<!-- Submit button -->
<button type="submit"> Submit </button>
</form>
</main>
<footer> © 2026 Sitendra Nagesh </footer>
</body>
</html>
Radio button:
Here feildset is used a separate section.
input tag has
type = this is the type of inputs we need, it could be email, password, text, radio
id = this is the unique id specific to an HTML tag. This will be used in label so when we will click on label, we will get the the label selected.
name= This shows the group. This is used powerfully in radio button.
label tag has
for attribute: This must match with input id, it will help when will select the tag.
<fieldset>
<input type="radio" name="gender" id="male">
<label for="male"> Male </label>
<input type="radio" name="gender" id="female">
<label for="female">Female</label>
</fieldset>
Checkbox:
<fieldset>
<input type="checkbox" name="terms" id="checkbox_id_used_in_label">
<label for="checkbox_id_used_in_label">Terms and condition</label>
</fieldset>
Example of radio button and checkbox
<main>
<form>
<fieldset>
<legend> Gender </legend>
<input type="radio" name="gender_group" id="male">
<label for="male">Male</label>
<input type="radio" name="gender_group" id="female">
<label for="female">Female</label>
</fieldset>
<fieldset>
<input type="checkbox" name="terms" id="checkbox_id" required>
<label for="checkbox_id"> I agree to terms. </label>
</fieldset>
<button type="submit">Submit</button>
</form>
</main>
Example of dropdown and textarea:
<!DOCTYPE html>
<html>
<head>
<title> Feedback form </title>
</head>
<body>
<header>
<h1> Feed Form </h1>
<nav>
<ul>
<li> <a href="index.html">Home</a></li>
</ul>
</nav>
</header>
<main>
<form>
<fieldset>
<legend> Choose a request form </legend>
<label for="feedback_type"> Feedback Type </label>
<select name="feedback_type" id="feedback_type">
<option value="" disabled selected>Select One</option>
<option value="bug">Bug Report </option>
<option value="feature"> Feature Request </option>
<option value="general">General Feedback</option>
</select>
</fieldset>
<fieldset>
<legend> Share you feedback</legend>
<label for="message_form"> Message </label>
<textarea name="message" id="message_form" required></textarea>
</fieldset>
<button type="submit"> Submit</button>
</form>
</main>
</body>
</html>
index.html
This file was needed in the web servers such as apache2 in linux system. There are two files that it looks for making the server up.
- index.html
- default.html
What is apache2?
It is a software which is used to serve content of website to users. It is http web server which is used to serve content to users in the internet.
- Emmet is a tool for shortcuts, it speeds up our speed to write code.
- When we open file in a browser directly, it first loads to memory and then it gets served. So it does not show the changes on browsers.
- We can use extensions to view the updated content on the browser or on the IDE (Integrated development environment).
HTML is a structural language. Every tag has special meaning, using them appropriately will help search engine to find the content faster.
Difference between a tag/tagname and element. Example
<h1 title="heading 1"> Heading 1 </h1>
the complete line here is element
h1 is a tag here.
title is an attribute.
- The tag could be capitalised or small case.
- a tag without closing can also work but it will create issue. It is suggested not miss the closing tag or use self closing tag. Example
- Some tags do not have compulsory attribute such as h1, p
- While some tags need compulsory attribute such as image tag, anchor tag.
Emmets:
h:
Read the document in MDN
google search:
- anchor tag in html
Heading tag:
- <h1 title="heading one"> Heading </h1>
title can be used as tooltip using CSS.
<!DOCTYPE html> -> it says the document type is html, it could be other documents as well like xml, latex.
<html lang="en">
<head>
<meta> —> for using special character utilisation. https://developers.google.com/search/docs/crawling-indexing/special-tags
<title> </title>
</head>
<body>
</body>
</html>
Anchor tag:
- email
- download
<a href="google.com"> <img> </a>
figure with caption
<figure>
<img src="https://images.pexels.com/photos/35731150/pexels-photo-35731150.jpeg?cs=srgb&dl=pexels-deluar-hossain-2149119239-35731150.jpg&fm=jpg&w=4080&h=2296&_gl=1*12q3qpw*_ga*MTMzMjE1NjgxNi4xNzY5MzI3Njk1*_ga_8JE65Q40S6*czE3NjkzMjc2OTUkbzEkZzAkdDE3NjkzMjc2OTUkajYwJGwwJGgw" alt="random picture" height="200">
<figcaption> Example </figcaption>
</figure>
<picture>
<source srcset="https://thumbs.dreamstime.com/z/spring-flowers-blue-crocuses-drops-water-backgro-background-tracks-rain-113784722.jpg?ct=jpeg">
<source srcset="https://thumbs.dreamstime.com/z/purple-flower-2212075.jpg?ct=jpeg">
<img src="https://images.pexels.com/photos/35731150/pexels-photo-35731150.jpeg?cs=srgb&dl=pexels-deluar-hossain-2149119239-35731150.jpg&fm=jpg&w=4080&h=2296&_gl=1*12q3qpw*_ga*MTMzMjE1NjgxNi4xNzY5MzI3Njk1*_ga_8JE65Q40S6*czE3NjkzMjc2OTUkbzEkZzAkdDE3NjkzMjc2OTUkajYwJGwwJGgw" alt="image of flower" height="200">
</picture>
<a href="https://www.google.com"><img width="100" src="https://media.istockphoto.com/id/1455172237/photo/lavender-at-sunrise.jpg?s=1024x1024&w=is&k=20&c=2XumKw5y5WzB_j8XKdGmXA7dmJpE-khAmXK2EGoe-Po=" alt="google image"></a>
Sample form:
<!DOCTYPE html>
<html>
<head>
<title>Registration</title>
</head>
<body>
<h1> Course Registration</h1>
<!-- Create a comprehensive registration form -->
<!--
name
age
phone number
adhar card
course
comment
-->
<form action="" method="get">
<fieldset>
<legend>
Student data
</legend>
<label for="name"> Name </label>
<input id="name" type="text" required>
<br>
<label for="mobile"> Mobile </label>
<input id="mobile" type="number" size="10" required>
<br>
<label for="email"> email </label>
<input id="email" type="email" required>
<br>
<label for="age"> Age </label>
<input id="age" type="number" min="0" max="65" required>
<br>
<label for="gender"> Gender </label>
<br>
<label for="male"> male </label>
<input id="male" type="radio" name="gender" >
<label for="female"> female </label>
<input id="female" type="radio" name="gender">
<br>
</fieldset>
<fieldset>
<legend> Upload Aadhar </legend>
<label for="course"> Course </label>
<input id="course" type="file">
</fieldset>
<fieldset>
<legend> Nationality & languages </legend>
<label for="Nationality"> Nationality </label>
<select>
<option id="Indian"> Indian </option>
<option id="others"> Others </option>
</select>
<br>
<label for="languages"> languages </label>
<br>
<label for="hindi"> Hindi </label>
<input id="hindi" type="checkbox">
<label for="english"> English </label>
<input id="english" type="checkbox">
<label for="others"> Other </label>
<input id="others" type="checkbox">
</fieldset>
<fieldset>
<legend> Course data </legend>
<label for="course"> Course </label>
<input list="course" name="course" type="text">
<datalist id="course">
<option > Web Development </option>
<option> System Design </option>
<option> Python </option>
</datalist>
<br/><br/>
<label for="text-area"> Comment </label>
<textarea cols="50" rows="4" placeholder="enter text">
</textarea>
</fieldset>
<button type="submit" style="background-color: lightblue"> Submit </button>
</form>
</body>
</html>
Definition
<dl>
<dt>Chai</dt>
<dd>A chai without sugar is delicious. Try once!
</dd>
<dt>Coffee</dt>
<dd>A coffee without sugar is delicious. Try once!
</dd>
<dt>Milk share</dt>
<dd>A milkshake without sugar is delicious. Try once!
</dd>
</dl>
Autocomplete option:
<form>
<label for="name"> Names </label>
<input list="name-list" id="name" autocomplete="name">
<datalist id="name-list">
<option> Sitendra </option>
<option> Me </option>
<option> Someone </option>
<option> Nilesh </option>
</datalist>
<button type="submit"> Submit </button>
</form>
Rowspan in table
https://developer.mozilla.org/en-US/play?id=Do46F2wsfwF1KDkKS8DGdXgUvZfqu7Fd4yBaFfx59U6RHa3mmiHRlwpTlUcb%2BNkINcu5Fu77IGvaeMxm
tfoot example:
<table>
<thead>
<tr>
<th> Items </th>
<th> Prices </th>
</tr>
</thead>
<tbody>
<tr>
<td> Milk </td>
<td> 29 </td>
</tr>
<tr>
<td> Green peas </td>
<td> 9 </td>
</tr>
<tr>
<td> Potato </td>
<td> 0 </td>
</tr>
</tbody>
<tfoot>
<tr>
<td> Total </td>
<td> 38</td>
</tr>
</tfoot>
</table>
File upload
Table example:
<!DOCTYPE html>
<html>
<head>
<title>ChaiCode Dashboard</title>
</head>
<body>
<h1>ChaiCode Analytics Dashboard</h1>
<!-- Create a comprehensive table -->
<table>
<caption> Sitendra's stats </caption>
<colgroup>
<col span="1" class="skills">
<col span="2" class="effect">
</colgroup>
<thead>
<tr>
<th> Skills </th>
<th> Before </th>
<th> after </th>
</tr>
</thead>
<tbody>
<tr>
<td> HTML </td>
<td colspan="2"> same </td>
<tr>
<tr>
<td> CSS </td>
<td> 7 </td>
<td> 10 </td>
</tr>
<tr>
<td> JavaScript </td>
<td> 8 </td>
<td> 10 </td>
</tr>
</tbody>
<tfoot>
<tr>
<td> Total </td>
<td> 7.5 </td>
<td> 10 </td>
</tr>
</tfoot>
</table>
</body>
</html>
<form>
<label for="name"> Name </label>
<input id="name" type="text" minlength="3" maxlength="20" pattern="[a-zA-Z]+" >
<br />
<label for="mobile-number"> Mobile Number </label>
<input id="mobile-number" type="number" size="10">
<br />
<label for="age"> Age </label>
<input id="age" type="number" min="0" max="120">
<br />
<button type="submit"> Submit </button>
</form>
Comments
Post a Comment