"Are you looking for the top web development training facility? The greatest place in Bangalore to study web development is Achievers IT. You will be able to create the most engaging and creative website after completing this class at our institution. We will give you interesting, high-caliber training materials with 100% placements. Students who desire to work in this profession have a lot of opportunities."
1. What is HTML?
HTML stands for Hyper Text Markup Language
HTML is the standard markup language for creating Web
pages
HTML describes the structure of a Web page
HTML consists of a series of elements
HTML elements tell the browser how to display the content
HTML elements label pieces of content such as "this is a heading",
"this is a paragraph", "this is a link", etc.
Difference between Html vs Html5
HTML
It didnt support audio and video without the use of flash
player support.
It does not allow drag and drop effects.
Elements like nav, header were not present.
2. Older version of HTML are less mobile-friendly.
HTML5
It supports audio and video controls with the use of <audio>
and <video> tags.
It allows drag and drop effects.
New element for web structure like nav, header, footer etc.
HTML5 language is more mobile-friendly.
Basic Structure of HTML page:
HTML Element:
An HTML element is defined by a start tag, some content, and an
end tag:
<tagname> Content goes here... </tagname>
The HTML element is everything from the start tag to the end tag:
<h1>My First Heading</h1>
3. <p>My first paragraph.</p>
HTML Attributes:
Attributes provide additional information about elements
Attributes are always specified in the start tag
Attributes usually come in name/value pairs like:
name="value"
Example:
The href Attribute:
<a href="https://www.w3schools.com">Visit W3Schools</a>
The src and alt Attribute:
<img src="img_girl.jpg" alt="Girl with a jacket">
4. HTML headings:
HTML headings are titles or subtitles that you want to display on a
webpage.
ex:
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
HTML paragraphs:
The HTML <p> element defines a paragraph.
A paragraph always starts on a new line, and browsers
automatically add some white space (a margin) before and after a
paragraph.
ex:
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
The Poem Problem
This poem will display on a single line:
Example
<p>
My Bonnie lies over the ocean.
5. My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</p>
Solution - The HTML <pre> Element
The HTML <pre> element defines preformatted text.
The text inside a <pre> element is displayed in a fixed-width font
(usually Courier), and it preserves both spaces and line breaks:
Example:
<pre>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</pre>
<hr> tag: It provides a horizontal line
Styles:
-> Inline <h1 style="font-size:300%;color:red">This is a
heading</h1>
-> Internal <style></style> we use it inside the head tag
-> External styles.css
Classes and id:
<h1>My <span class="note">Important</span> Heading</h1>
<h1>My <span id="note">Important</span> Heading</h1>
Formatting tags:
6. HTML Block and Inline Elements:
Block-level Elements:
A block-level element always starts on a new line, and the
browsers automatically add some space (a margin) before
and after the element.
A block-level element always takes up the full width available
(stretches out to the left and right as far as it can).
ex: <h1>-<h6>,<header>,<hr>, <nav>, <p>
Inline Elements:
An inline element does not start on a new line.
An inline element only takes up as much width as necessary.
This is a <span> element inside a paragraph.
Example
<span>Hello World</span>, <br>, <button>, <a>
HTML Iframes:
7. An HTML iframe is used to display a web page within a web page.
Syntax:
<iframe src="url" title="description"></iframe>
// we can set height and width as well
<iframe src="demo_iframe.htm" height="200" width="300"
title="Iframe Example"></iframe>
Iframe - Remove the Border
By default, an iframe has a border around it.
To remove the border, add the style attribute and use the CSS
border property:
Example
<iframe src="demo_iframe.htm" style="border:none;" title="Iframe
Example"></iframe>
HTML Semantic Elements:
A semantic element clearly describes its meaning to both the
browser and the developer.
Examples of semantic elements: <form>, <table>, and <article> -
Clearly defines its content.
HTML non-semantic Elements:
A non-semantic element which does not describes any meaningfull
information to the users.
Examples of non-semantic elements: <div> and <span> - Tells
nothing about its content.
HTML Lists:
Unordered HTML List:
8. An unordered list starts with the <ul> tag. Each list item
starts with the <li> tag.
The list items will be marked with bullets (small black circles) by
default:
Example
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
// we can change the bullets of unordered list
<ul style="list-style-type:disc;"> // circle, square, none
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Nested HTML Lists
Lists can be nested (list inside list):
Example
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
9. <li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
Ordered HTML List
An ordered list starts with the <ol> tag. Each list item starts with
the <li> tag.
The list items will be marked with numbers by default:
ex: <ol type='1'>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Ordered HTML List - The Type Attribute
type="1" The list items will be numbered with numbers (default)
type="A" The list items will be numbered with uppercase letters
type="a" The list items will be numbered with lowercase letters
type="I" The list items will be numbered with uppercase roman
numbers
type="i" The list items will be numbered with lowercase roman
numbers
Nested HTML Lists:
Lists can be nested (list inside list):
10. Example
<ol>
<li>Coffee</li>
<li>Tea
<ol>
<li>Black tea</li>
<li>Green tea</li>
</ol>
</li>
<li>Milk</li>
</ol>
HTML Other Lists
HTML Description Lists
A description list is a list of terms, with a description of each term.
The <dl> tag defines the description list, the <dt> tag defines the
term (name), and the <dd> tag describes each term:
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
HTML Tables:
HTML tables allow web developers to arrange data into rows and
columns.
13. <td>2</td>
<td rowspan="2">4</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
</table>
What is Multimedia?
Multimedia comes in many different formats. It can be almost
anything you can hear or see, like images, music, sound, videos,
records, films, animations, and more.
Web pages often contain multimedia elements of different types
and formats.
Note: Only MP4, WebM, and Ogg video are supported by the HTML
standard.
Video tag:
we have some properties for video tag such as :
controls, muted, autoplay
ex: <video width="320" height="240" autoplay muted></video>
HTML forms
An HTML form is used to collect user input. The user input is most
14. often sent to a server for processing.
The Action Attribute
The action attribute defines the action to be performed when the
form is submitted.
Action: 1) get 2) post
method="get" :
Here in the below example we not specified any action type such
as get or post, so initially the form submission is in get method.
Whenever the method is get then you can see the formdata in the
url once the form is submitted.
Example:
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>