HTML5 Tutorial for beginners
HTML stands for Hypertext markup language it is used to display data over the internet or it is used to develop web pages, In this HTML5 tutorial for beginners learn all the concepts of html from basic to advanced with all the possible examples.
Network of networks
What is called the internet?
Internet is simply called network of networks, it is connection of computers around the world.
Sharing resources
The internet started in the 1960s as the project for government researchers to share information. the computers in the 60s were large and immobile, till the innovation of internet, information shared using magnetic computer tapes.
Another reason for the innovation of internet was the heating up of the cold war, the soviet union's launched the sputnik satellite and it forces the U.S defence department to consider the development of the system that can share information even after the nuclear attack.
It was the ARPANET(Advanced Research Projects Agency Network), currently known as the Internet.
In that time it had limited membership to certain academic and research organization who had contracts with the defence department.
January 1, 1983 is considered as the official birthday of the internet.
Before the internet, computer networks did not have a standard way to communicate with each other, a new communications protocol was established that is called TCP/IP (Transfer control protocol/Internet protocol).
it allowed different kinds of computers on the difference network to talk to each other.
Types of internet protocol
There are different ways to retrieve information from the networks, www is one of the way, other connections are called protocol.
In other word, protocol is also called rules and regulation to share information.
File sharing protocol
FTP (File transfer protocol)
It was the first service of the internet to share file from one computer to other.
Nowadays putty is one the software that uses FTP to access files from one computer to other computer.
Communication protocol
This method of internet communication protocol allow users to communicate with each other.
Multimedia information protocol
Hypertext transfer protocol
- It become the most popular protocol among peoples when it was developed in the late 1980s by the european lab for the particle physics in switzerland.
- it is most popular way to access information from the internet.
- it does not offer to download the file, also allow to jump from one site to other site through hyperlinks.
- the most sparkling feature of web is formated text.
Browsers and navigation
In the web files are access through the software that is called browser, it is an application software to run or view the web page,
Some of the popular browsers are
- Google chrome
- Mozilla firefox
- Edge
- Opera
Navigation
Uniform resource location(URL) is an address of the resource over the internet, when the user surfing the internet, there is the location at the top of the browser that is also called the address bar, here user type the address of computer for that the user required to access information.
Example
- https://www.capscom-technology.com
- http://www.capscom-technology.com(Turned into https)
HTTP
Hypertext transfer protocol that tells the browser to look for the included web address over the internet.
- capscom-technology - domain name
- .com - domain
HTML5 tutorial for beginners
HTML stands for HyperText Markup Language, which is used to create web pages.
HTML defines the structure of the web page, HTML was created by Tim Berner Lee, also known as the inventor of WWW (World Wide Web).
Software required to develop web pages?
- Code Editor
- Web Browser
Code editor
This software is used to write the code of programming languages like HTML, PHP, Python, etc.
Some of the most popular code editors are Notepad, Notepad++, Sublime Text 3, Visual Code Studio, atom
Web browsers
This software is used to run web pages.
Structure of web page
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Structure of web page</title>
</head>
<body>
<p>
Structure of web page.
</p>
</body>
</html>
Note:
Save the file as First_page.html
Where
<!DOCTYPE html> tells to browser about the standard of the web page and ensures to support all HTML5 tags.
<html lang=”en”> define web page language to english, it is also root of web page.
<head>
it is called meta section of web page which contain all meta tags and resource file links like <title>, <link>, <script>, etc.
<title>
define the title of the web page that displays at the title bar of the browser.
<body>
it is the main part of the web page where actual data of application displayed and <body> tag define sectioning root of the application.
Content sectioning tags in HTML
- <address>
- <aside>
- <article>
- <header>
- <footer>
- <h1> to <h6> all heading tags
- <main>
- <nav>
- <section>
<address> tag
This tag indicates about enclosing tag contain contact informatioin, address about person, people’s, and organisation.
Example
<address>
24 Floor, Gandhi Road Delhi.
</address>
<aside> tag
This tag indicates the enclosing tag contains information that is indirect to the main content.
Example
<aside>
Find best resource at https://www.freecodepoint.com
</aside>
<article> tag
This tag can be used to show forum posts, blog posts, and stories.
Example
<article>
…. here can write story, post
</article>
<header> tag
This tag contains introductory information about the web page and company logo, search form, etc.
Example
<header>
<h1>FreeCodePoint.com</h1>
</header>
<footer> tag
This tag contains website copyright data, about the author, links to related documents.
Example
<footer>
2020 All rights are reserved.
</footer>
<h1> to <h6> heading tags
Heading tags are used to writing the heading of web pages. <h1> is top-level heading and <h6> is lower-level heading.
Example
<h1>Heading1</h1>
<h2>Heading2</h2>
<h3>Heading3</h3>
<h4>Heading4</h4>
<h5>Heading5</h5>
<h6>Heading6</h6>
<main> tag
This tag contains the dominant content of the body of a document.
<nav> tag
This tag represent a section that contains navigation links.
Example
<nav>
<a href=’/login’>Login</a>
<a href=’/register’>Register</a>
</nav>
<section> tag
Represents a section of the web page.
Example
<section>
A part of section
</section>
Text tags
These text tags define data.
- <blockquote>
- <div>
- <dl>, <dt>, <dd>
- <ol>,<li>
- <ul>,<li>
- <p>
- <hr>
- <pre>
- <figure>
- <figcaption>
<blockquote> tag
used to quote a message or passage.
Example
<blockquote>
<p>
I am not handsome but I can give my hand to someone who need help.. Because beauty is required in heart not in face!
</p>
<footer>
– A. P. J. Abdul Kalam
</footer>
</blockquote>
<div> tag
It is called a division tag, also called a container tag, that has no effect on content like <p> tag.
Example:
<div>
Dream is not that which you see while sleeping it is something that does not let you sleep
</div>
<dl>,<dt>, <dd> tag
<dl> create description list
<dt> create data terms
<dd> describe data or terms.
Example:
<dl>
<dt>Dream, Dream Dream. Dreams transform into thoughts and thoughts result in action.</dt>
<dd>- A. P. J. Abdul Kalam</dd>
<dt>My Lord,
Never let me climb so high
That I am unable to embrace another stranger,
Deliver me ever from such arrogance</dt>
<dd>- Atal bihari vajpayee</dd>
</dl>
<ol>,<li> tag
<ol> tag stands for ordered list, that is display an ordered list, and <li> stands for list.
Note: <ol> tags has attributes type, start
the type attribute has value one of the given value [1, a, A, i, I]
Example
<h2>Popular Web Browsers</h2>
<ol type=”A” start=”3″>
<li>Google Chrome</li>
<li>Microsoft Edge</li>
<li>Opera</li>
<li>Mozilla Firefox</li>
</ol>
<ul>,<li> tag
<ul> tag stands for unordered list, that is display unordered list, and <li> stands for list.
Note: <ul> tag has attributes type
The type attribute has value of the given value [“disk”, “circle”, “square”]
Example
<h2>List of application softwares</h2>
<ul>
<li>MS Word</li>
<li>MS Excel</li>
<li>MS Power point</li>
</ul>
<p> tag
This is called paragraph tag, mainly used to write paragraphs, posts, articles, it is also called a container tag.
Example
<p>
All physical components which are attached to the computer are called Hardware.
</p>
<hr> tag
<hr> tag stands for Horizontal tag, this tag insert an horizontal tag.
<pre> tag
This tag display data as write within this tag, it can be used to display formatted text on the web page.
Example
<pre>
*
***
*****
</pre>
<figure> tag
This tag represents self-contained content, with optional <figcaption> tag.
<figcaption> tag
Describe the rest of the content of its parent tag, also represents caption or legend for content.
Example
<figure>
<img src=”yoga.jpg” alt=”Yoga”>
<figcaption>Yoga</figcaption>
</figure>
Inline semantic tags
Inline tags mean a tag that has an effect in a line and has no 100% width is called inline tags.
and those tags that describe its meaning to both browser and developer are called semantics tags.
Popular semantics tags are:
- <small>
- <strong>
- <a>
- <span>
- <code>
- <time>
- <mark>
- <em>
- <br>
- <abbr>
- <cite>
<small> tag
use to write small text line print, copyright content in small format.
Example:
<small>
© All rights are reserved.
</small>
<strong> tag
<strong> tag create the importance of text and makes text some bold, it is also used to display a text for seriousness, urgency, and important text.
Example
<p>
Welcome to <strong>FreeCodePoint.com</strong>
</p>
<a> tag
It is called an anchor tag, which is used to create an internal, external link.
<a> tag has three main attributes.
- href [ used to create a link ]
- name [used to create bookmark ]
- target [used to open a page in same, new tab ], has two value _blank (open a link in a new tab), _self (open a link in the same tab)
Example
<a href=”https://freecodepoint.com” target=”_blank”>Freecodepoint.com</a>
where href is hypertext reference which specifies an address of source where the user will visit after clicking on this link and target=”_blank” specify where a link will open, as you can see we have write _blank, it means this link file will open in new tab.
<span> tag
This tag is an inline tag, has an effect in a current line, can be used to format some text within a line, and it has no special effect like italic, underline, and bold tags.
Example
<span>Category: News</span>
<code> tag
This tag format a text and display content as computer code, it is used to write any computer code within it.
Example
<code>
var a,b,c;
a=10;
b=20;
c=a+b;
document.write(“sum:”+c);
</code>
<time> tag
This tag used to display time content.
Example
<time>11:09:23 AM</time>
<mark> tag
This is also called a highlighter tag, it highlights contained text.
Example
<mark>H<sub>2</sub>O</mark>
<em> tag
Display emphasizes text like italic or screw text.
Example
<em>Welcome to freecodepoint.com</em>
<br> tag
This tag breaks a line.
<abbr> tag
Abbreviation element used to write acronym and abbreviation of words.
<abbr>Central Processing Unit</abbr>
<cite> tag
Used to describe creative work
Example:
Inventor of WWW was <cite>Tim Berners LEE</cite>
Demarcating tags
- <del> tag
- <ins> tag
<del> tag
Pass a line through a text
Example
JeansRs. 3,000Rs. 2,000
<span>Jeans <del>Jeans Rs. 3,000</del> Rs. 2,000</span>
<ins> tag
Insert an underline line for selected text.
Example
A computer is an electronic machine.
<p>A computer is an <ins>electronic machine</ins></p>
Table tags
Table has number of tags to define table structure on the web page.
- <table>
- <thead> – Table head
- <tbody> – Table body
- <tr> – Table row
- <th> – Table heading
- <td> – Table data
- <caption> – Table caption, contain text or title about table data.
- <tfoot> – Table footer
Example
<table border=”1″ width=”100%”>
<caption>Product prices</caption>
<thead>
<tr>
<th>Sr no</th>
<th>Product</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mouse</td>
<td>Rs. 300</td>
</tr>
<tr>
<td>2</td>
<td>Monitor</td>
<td>Rs. 3000</td>
</tr>
<tr>
<td>1</td>
<td>Keyboard</td>
<td>Rs. 800</td>
</tr>
</tbody>
<tfoot>3 Rows</tfoot>
</table>
Interactive elements tags
- <details>
- <summary>
Interactive tags provide tools collapse show hide content.
Example
<details>
<summary>Computer</summary>
A Computer is an electronic machine.
</details>
It will provide output as when the user will click on the summary text that is Computer, then the definition of the computer will show to the user.
HTML form
Form tag
tag:
<form>
Attributes
| name | Define name of form |
| action | Define where form data will submit |
| method | Submit method it can be either GET OR POST |
| enctype | has value "multipart/form-data", it is need when form contain file input field. |
Input tag
This tag is used to get data from user.
<input />
Attributes
| Attribute name | Used for | Values | ||||||||||||||||
| type | Define type of input field |
|
||||||||||||||||
| name | To get data from form input field | name of input field (user defined) | ||||||||||||||||
| value | To set default data in the input field | predefined value of input field(user defined) |
Special input attributes
| placeholder | Display ghosted text |
| required | Make input field value required |
| disabled | Make input field not editable/accessible |
| min | Define input field minimum value |
| max | Define input field maximum value |
| step | Define step value |
| multiple | Define number of items can be selected |
| maxlength | Define maximum no of characters can be input in input field |
| minlength | Define minimum no of characters can be input in input field |
| checked | Make checkbox in checked state |
| selected | Make option selected |
| accept |
audio/* |
| readonly |
Make input field value to be read only. |
Audio/Video
<audio>
<source src="" type="audio/mp3"/>
Your browser does not support audio tag, please update browser or install another one
</audio>
<video>
<source src="" type="audio/mp4"/>
Your browser does not support video tag, please update browser or install another one
</video>
Audio Attributes
| controls | |
| autoplay | |
| loop | |
| muted | |
| src | |
| preload |
Video Attributes
| width | |
| height | |
| controls | |
| autoplay | |
| loop | |
| muted | |
| src | |
| preload | |
| poster |
iframe tag
Embed other document within current document.
<iframe src="other document source" width="100%" height="500">