FRONT -END :
HTML:
HTML (HyperText Markup Language) is the standard language for creating and
structuring web pages using tags and elements. It defines how content like text,
images, and links appear in a browser.
It is a markup language, not a programming language.
This means it annotates text to define how it is structured and displayed by web
browsers.
It is a static language, meaning it does not inherently provide interactive
features but can be combined with CSS for styling and JavaScript for
interactivity.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title of the document</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph</p>
</body>
</html>
HTML Elements and HTML Tags
HTML Elements and HTML Tags are related but distinct. An HTML element is
the complete structure, including the opening tag, content (if any), and the closing
tag (if applicable).
On the other hand, a tag is the actual keyword or name enclosed in angle brackets
(< >) that tells the browser what kind of content to expect.
How HTML Works: Understanding Step-by-Step
In this topic, we’ll learn how a simple HTML file is written, saved, opened in a
browser, rendered, and finally displayed on the screen along with how CSS and
JavaScript enhance it.
HTML Structure
HTML is used to create the structure of a webpage.
Every HTML file starts with <!DOCTYPE html> to tell the browser it’s an
HTML5 document.
The <html> tag contains all other elements of the page.
The <head> section stores information like the page title and metadata.
The <body> section contains all the visible content such as text, images, and
links.
After writing the code, save the file with a .html extension so browsers can
recognize it.
Open the file in any browser like Chrome or Firefox to see it displayed.
The browser reads and interprets the HTML code, converting it into a visual
webpage.
Each HTML tag is processed so elements like headings, paragraphs, and
images appear correctly.
The final webpage shows all the content on the screen, and any HTML errors
may affect how it looks.
The output shows how the HTML content (heading and paragraph) is displayed in
the browser:
Interaction of HTML, CSS, and JavaScript
HTML, CSS, and JavaScript work together to create modern web pages. Each
plays a unique role - HTML gives structure, CSS adds style, and JavaScript brings
interactivity.
HTML structures the webpage and defines content elements.
CSS enhances visual appearance like colors, fonts, and layout.
JavaScript adds interactivity and dynamic features.
Together, they make web pages functional, attractive, and user-friendly.
<!DOCTYPE html>
<html>
<head>
<title>HTML, CSS and JS Example</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<h2>Welcome to My Webpage</h2>
<p>This structure is built using HTML, styled with CSS, and made interactive
with JS.</p>
<button onclick="showMessage()">Click Me</button>
<script src="[Link]"></script>
</body>
</html>
Here, This project includes three files: [Link], [Link], and [Link], which
are linked together to manage the webpage structure, styling, and functionality.
HTML Attributes
Attributes provide additional information about an element. They are placed inside
the opening tag and are written as name="value". Common attributes include class,
id, href, and src.
Attributes are written inside the opening tag of an element.
They are written as name="value" pairs.
Most HTML elements can have one or more attributes.
Attributes help in customizing how elements behave or display in a browser.
Attribute values are usually enclosed in double quotes (").
Example:
<a href="[Link] Example</a>
href is an attribute of the <a> tag that defines the URL of the link.
HTML TAGS
HTML <!--...--> Tag:
The comment tag is used to insert comments in the source code. Comments
are not displayed in the browsers.
You can use comments to explain your code, which can help you when you
edit the source code at a later date. This is especially useful if you have a lot
of code.
HTML <!DOCTYPE> Declaration:
All HTML documents must start with a <!DOCTYPE> declaration.
The declaration is not an HTML tag. It is an "information" to the browser
about what document type to expect.
Ex:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>
HTML <a> Tag:
The <a> tag defines a hyperlink, which is used to link from one page to
another.
The most important attribute of the <a> element is the href attribute, which
indicates the link's destination.
Ex:
<a href="[Link]
<img border="0" alt="W3Schools" src="logo_w3s.gif" width="100" height="100"
>
</a>
HTML <abbr> Tag:
The <abbr> tag defines an abbreviation or an acronym, like "HTML",
"CSS", "Mr.", "Dr.", "ASAP", "ATM".
Ex: <p><dfn><abbr title="Cascading Style Sheets">CSS</abbr>
</dfn> is a language that describes the style of an HTML document.</p>
HTML <address> Tag:
The <address> tag defines the contact information for the author/owner of a
document or an article.
The contact information can be an email address, URL, physical address,
phone number, social media handle, etc.
The text in the <address> element usually renders in italic, and browsers
will always add a line break before and after the <address> element.
Ex:
<address>
Written by <a href="[Link] Doe</a>.<br>
Visit us at:<br>
[Link]<br>
Box 564, Disneyland<br>
USA
</address>
HTML <audio> Tag:
The <audio> tag is used to embed sound content in a document, such as
music or other audio streams.
The <audio> tag contains one or more <source> tags with different audio
sources. The browser will choose the first source it supports.
The text between the <audio> and </audio> tags will only be displayed in
browsers that do not support the <audio> element.
Ex:
<audio controls>
<source src="[Link]" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
HTML <b> Tag:
The <b> tag specifies bold text without any extra importance.
Ex:
<p>This is normal text - <b>and this is bold text</b>.</p>
HTML <base> Tag:
The <base> tag specifies the base URL and/or target for all relative URLs in
a document.
The <base> tag must have either an href or a target attribute present, or both.
There can only be one single <base> element in a document, and it must be
inside the <head> element.
Ex:
<head>
<base href="[Link] target="_blank">
</head>
<body>
<img src="images/[Link]" width="24" height="39" alt="Stickman">
<a href="tags/tag_base.asp">HTML base Tag</a>
</body>
HTML <body> Tag:
The <body> tag defines the document's body.
The <body> element contains all the contents of an HTML document, such
as headings, paragraphs, images, hyperlinks, tables, lists, etc.
Ex:
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
HTML <br> Tag:
The <br> tag inserts a single line break.
The <br> tag is useful for writing addresses or poems.
The <br> tag is an empty tag which means that it has no end tag.
Ex:
<p>To force<br> line breaks<br> in a text,<br> use the br<br> element.</p>
HTML <button> Tag:
The <button> tag defines a clickable button.
Inside a <button> element you can put text (and tags
like <i>, <b>, <strong>, <br>, <img>, etc.). That is not possible with a
button created with the <input> element!
Ex:
<button type="button">Click Me!</button>
HTML <center> Tag:
The <center> tag was used in HTML4 to center-align text.
Ex:
<html>
<head>
<style>
h1 {text-align: center;}
p {text-align: center;}
div {text-align: center;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<div>This is a div.</div>
</body>
</html>
HTML <div> Tag:
The <div> tag defines a division or a section in an HTML document.
The <div> tag is used as a container for HTML elements - which is then
styled with CSS or manipulated with JavaScript.
The <div> tag is easily styled by using the class or id attribute.
Any sort of content can be put inside the <div> tag!
Ex:
<html>
<head>
<style>
.myDiv {
border: 5px outset red;
background-color: lightblue;
text-align: center;
}
</style>
</head>
<body>
<div class="myDiv">
<h2>This is a heading in a div element</h2>
<p>This is some text in a div element.</p>
</div>
</body>
</html>
HTML <dl> Tag:
The <dl> tag defines a description list.
The <dl> tag is used in conjunction with <dt> (defines terms/names)
and <dd> (describes each term/name).
Ex:
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
HTML <dt> Tag:
The <dt> tag defines a term/name in a description list.
The <dt> tag is used in conjunction with <dl> (defines a description list)
and <dd> (describes each term/name).
Ex:
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
HTML <em> Tag:
The <em> tag is used to define emphasized text. The content inside is
typically displayed in italic.
A screen reader will pronounce the words in <em> with an emphasis, using
verbal stress.
Ex:
<p>You <em>have</em> to hurry up!</p>
<p>We <em>cannot</em> live like this.</p>
HTML <embed> Tag:
The <embed> tag defines a container for an external resource, such as a web
page, a picture, a media player, or a plug-in application.
Ex:
<embed type="video/webm" src="video.mp4" width="400" height="300">
HTML <fieldset> Tag:
The <fieldset> tag is used to group related elements in a form.
The <fieldset> tag draws a box around the related elements.
Ex:
<form action="/action_page.php">
<fieldset>
<legend>Personalia:</legend>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
HTML <footer> Tag:
The <footer> tag defines a footer for a document or section.
A <footer> element typically contains:
authorship information
copyright information
contact information
sitemap
back to top links
related documents
Ex:
<footer>
<p>Author: Hege Refsnes</p>
<p><a href="[Link]
</footer>
HTML <form> Tag:
The <form> tag is used to create an HTML form for user input.
The <form> element can contain one or more of the following form
elements:
<input>
<textarea>
<button>
<select>
<option>
<optgroup>
<fieldset>
<label>
<output>
EX:
<form action="/action_page.php" method="get">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
</form>
HTML <frame> Tag:
The <frame> tag was used in HTML 4 to define one particular window
(frame) within a <frameset>.
Ex:
<iframe src="[Link]
HTML <frameset> Tag:
The <frameset> tag was used in HTML 4 to define a frameset.
Ex:
<iframe src="[Link]
HTML <h1> to <h6> Tags:
The <h1> to <h6> tags are used to define HTML headings.
<h1> defines the most important heading. <h6> defines the least important
heading.
Ex:
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
HTML <head> Tag:
The <head> element is a container for metadata (data about data) and is
placed between the <html> tag and the <body> tag.
Metadata is data about the HTML document. Metadata is not displayed.
Metadata typically define the document title, character set, styles, scripts,
and other meta information.
The following elements can go inside the <head> element:
<title> (required in every HTML document)
<style>
<base>
<link>
<meta>
<script>
<noscript>
Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title of the document</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
HTML <header> Tag:
The <header> element represents a container for introductory content or a
set of navigational links.
A <header> element typically contains:
one or more heading elements (<h1> - <h6>)
logo or icon
authorship information
Ex:
<article>
<header>
<h1>A heading here</h1>
<p>Posted by John Doe</p>
<p>Some additional information here</p>
</header>
<p>Lorem Ipsum dolor set amet....</p>
</article>
HTML <hr> Tag:
The <hr> tag defines a thematic break in an HTML page (e.g. a shift of
topic).
The <hr> element is most often displayed as a horizontal rule that is used to
separate content (or define a change) in an HTML page.
Ex:
<hr style="width:50%;text-align:left;margin-left:0">
HTML <html> Tag:
The <html> tag represents the root of an HTML document.
The <html> tag is the container for all other HTML elements (except for
the <!DOCTYPE> tag).
Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title of the document</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
HTML <iframe> Tag:
The <iframe> tag specifies an inline frame.
An inline frame is used to embed another document within the current
HTML document.
Ex:
<iframe src="[Link] title="W3Schools Free Online
Web Tutorials"></iframe>
HTML <img> Tag:
The <img> tag is used to embed an image in an HTML page.
Images are not technically inserted into a web page; images are linked
to web pages. The <img> tag creates a holding space for the referenced
image.
The <img> tag has two required attributes:
src - Specifies the path to the image
alt - Specifies an alternate text for the image, if the image for some
reason cannot be displayed
HTML <input> Tag:
The <input> tag specifies an input field where the user can enter data.
The <input> element is the most important form element.
The <input> element can be displayed in several ways, depending on
the type attribute.
The different input types are as follows:
<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text"> (default value)
<input type="time">
<input type="url">
<input type="week">
Ex:
<form action="/action_page.php">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
</form>
HTML <label> Tag:
The <label> tag defines a label for several elements:
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="search">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">
<meter>
<progress>
<select>
<textarea>
Ex:
<form action="/action_page.php">
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="Ja
vaScript">
<label for="javascript">JavaScript</label><br><br>
<input type="submit" value="Submit">
</form>
HTML <li> Tag:
The <li> tag defines a list item.
The <li> tag is used inside ordered lists(<ol>), unordered lists (<ul>),
and in menu lists (<menu>).
In <ul> and <menu>, the list items will usually be displayed with bullet
points.
In <ol>, the list items will usually be displayed with numbers or letters.
Ex:
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
HTML <link> Tag:
The <link> tag defines the relationship between the current document
and an external resource.
The <link> tag is most often used to link to external style sheets or to
add a favicon to your website.
The <link> element is an empty element, it contains attributes only.
Ex:
<head>
<link rel="stylesheet" href="[Link]">
</head>
HTML <main> Tag:
The <main> tag specifies the main content of a document.
The content inside the <main> element should be unique to the
document. It should not contain any content that is repeated across
documents such as sidebars, navigation links, copyright information, site
logos, and search forms.
Ex:
<main>
<h1>Most Popular Browsers</h1>
<p>Chrome, Firefox, and Edge are the most used browsers today.</p>
<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google, released
in 2008. Chrome is the world's most popular web browser today!</p>
</article>
<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed by
Mozilla. Firefox has been the second most popular web browser since
January, 2018.</p>
</article>
<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft,
released in 2015. Microsoft Edge replaced Internet Explorer.</p>
</article>
</main>
HTML <nav> Tag:
The <nav> tag defines a set of navigation links.
Notice that NOT all links of a document should be inside
a <nav> element. The <nav> element is intended only for major blocks
of navigation links.
Ex:
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/python/">Python</a>
</nav>
HTML <ol> Tag:
The <ol> tag defines an ordered list. An ordered list can be numerical or
alphabetical.
The <li> tag is used to define each list item.
Ex:
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
HTML <p> Tag:
The <p> tag defines a paragraph.
Browsers automatically add a single blank line before and after
each <p> element.
Ex:
<p>This is some text in a paragraph.</p>
HTML <script> Tag:
The <script> tag is used to embed a client-side script (JavaScript).
The <script> element either contains scripting statements, or it points to an
external script file through the src attribute.
Ex:
<script>
[Link]("demo").innerHTML = "Hello JavaScript!";
</script>
HTML <section> Tag:
The <section> tag defines a section in a document.
Ex:
<section>
<h2>WWF History</h2>
<p>The World Wide Fund for Nature (WWF) is an international
organization working on issues regarding the conservation, research
and restoration of the environment, formerly named the World
Wildlife Fund. WWF was founded in 1961.</p>
</section>
<section>
<h2>WWF's Symbol</h2>
<p>The Panda has become the symbol of WWF. The well-known panda logo
of WWF originated from a panda named Chi Chi that was transferred
from the Beijing Zoo to the London Zoo in the same year of the
establishment of WWF.</p>
</section>
HTML <select> Tag:
The <select> element is used to create a drop-down list.
The <select> element is most often used in a form, to collect user input.
The name attribute is needed to reference the form data after the form is
submitted (if you omit the name attribute, no data from the drop-down list will
be submitted).
The id attribute is needed to associate the drop-down list with a label.
The <option> tags inside the <select> element define the available options
in the drop-down list.
Ex:
<label for="cars">Choose a car:</label>
<select name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
HTML <source> Tag:
The <source> tag is used to specify multiple media resources for media
elements, such as <video>, <audio>, and <picture>.
The <source> tag allows you to specify alternative video/audio/image files
which the browser may choose from, based on browser support or viewport
width. The browser will choose the first <source> it supports.
Ex:
<audio controls>
<source src="[Link]" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
HTML <style> Tag:
The <style> tag is used to define style information (CSS) for a document.
Inside the <style> element you specify how HTML elements should render in
a browser.
The <style> element must be included inside the <head> section of the
document
Ex:
<html>
<head>
<style>
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body>
<h1>A heading</h1>
<p>A paragraph.</p>
</body>
</html>
HTML <table> Tag:
The <table> tag defines an HTML table.
An HTML table consists of one <table> element and one or more <tr>, <th>,
and <td> elements.
The <tr> element defines a table row, the <th> element defines a table
header, and the <td> element defines a table cell.
Ex:
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
HTML <td> Tag:
The <td> tag defines a standard data cell in an HTML table.
An HTML table has two kinds of cells:
Header cells - contains header information (created with
the <th> element)
Data cells - contains data (created with the <td> element)
The text in <td> elements are regular and left-aligned by default.
The text in <th> elements are bold and centered by default.
Ex:
<table>
<tr>
<td>Cell A</td>
<td>Cell B</td>
</tr>
<tr>
<td>Cell C</td>
<td>Cell D</td>
</tr>
</table>
HTML <th> Tag:
The <th> tag defines a header cell in an HTML table.
An HTML table has two kinds of cells:
Header cells - contains header information (created with
the <th> element)
Data cells - contains data (created with the <td> element)
The text in <th> elements are bold and centered by default.
The text in <td> elements are regular and left-aligned by default.
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
HTML <title> Tag:
The <title> tag defines the title of the document. The title must be text-only,
and it is shown in the browser's title bar or in the page's tab.
The <title> tag is required in HTML documents!
The contents of a page title is very important for search engine optimization
(SEO)! The page title is used by search engine algorithms to decide the order
when listing pages in search results.
The <title> element:
defines a title in the browser toolbar
provides a title for the page when it is added to favorites
displays a title for the page in search-engine results
Here are some tips for creating good titles:
Go for a longer, descriptive title (avoid one- or two-word titles)
Search engines will display about 50-60 characters of the title, so try not
to have titles longer than that
Do not use just a list of words as the title (this may reduce the page's
position in search results)
Ex:
<!DOCTYPE html>
<html>
<head>
<title>HTML Elements Reference</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
HTML <tr> Tag:
The <tr> tag defines a row in an HTML table.
A <tr> element contains one or more <th> or <td> elements.
Ex:
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
HTML <u> Tag:
The <u> tag represents some text that is unarticulated and styled differently
from normal text, such as misspelled words or proper names in Chinese text.
The content inside is typically displayed with an underline.
Ex:
<p>This is some <u>mispeled</u> text.</p>
HTML <ul> Tag:
The <ul> tag defines an unordered (bulleted) list.
Use the <ul> tag together with the <li> tag to create unordered lists.
Ex:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
HTML <video> Tag:
The <video> tag is used to embed video content in a document, such as a
movie clip or other video streams.
The <video> tag contains one or more <source> tags with different video
sources. The browser will choose the first source it supports.
The text between the <video> and </video> tags will only be displayed in
browsers that do not support the <video> element.
Ex:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="[Link]" type="video/ogg">
Your browser does not support the video tag.
</video>