Table of Content:
- What is HTML?
- Features
- HTML Editor
- HTML Skeleton
- Comments
- HTML Tags
- List
- Table
- Image
- Video
- Formating
- I-frame
- Semantics
- Form
What is HTML?
- HTML is very popular and easy to learn language.
- HTML is stand for Hyper Text Markup Language.
- HTML defines how the web page looks and how to display content on web page.
- Mainly html provide structure to the web.
- Important to save your file with .html extension
Features Of HTML
- Easy to learn and easy to understabd
- use attributes in it.
- Add videos, graphics and audios making it more attractive.
- Case insensitive language
- Show links of audio, video, image .
HTML Editors
- Atom 2.Sandcode 3.Sublime 4.Visual Studio
HTML Skeleton
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
Providing Instruction to the browser about the HTML version
html
Act as a container to store all the code of program to store in it. and always write all code or head part as well as body part in it. Head and Body tag also declare in html tag.
head
Information write in head tag never show or display at web. head tag is only store information about the documentation ,title and store some metadata.
body
In body tag, all code write in body part and this coding ,content show on the web browser. it's contain like image, audio, video, links and etc.
Some Extensions
we love some extensions to use in our compiler and work start with professional. and done our work very easy and fast like:-
- Emmet Abbreviation 2.Live server 3.Priter
HTML Comment
- Html comment not display on the browser.
- It help to understand the code and easy to readable.
- Anyone understand the code part after reading the comment's about the code part.
- we can comment a particular part of code is ctrl+/
one-line comment
<!-- comment -->
Multi-line comment
<!-- <h1>This is a heading</h1>
<p>This is a paragraph</p>
<h2>This is heading two</h2> -->
HTML Tags
- HTML contains some tags to write the content in it.
<!-- this is heading tag's -->
<h1>This is a heading</h1>
<h2>This is heading two</h2>
<h3>This is heading three</h3>
<h4>This is heading four</h4>
<h5>This is heading five</h5>
<h6> This is heading six</h6>
<!-- this is paragraph tag -->
<p>This is paragraph tag</p>
- Mainly tag's contain opening tag or closing tag:-
- some tags in html are only closing tag or some are only open tag
:Closing tag
is also known as closing tags, means they have open tag or close tag. like:-<p></p> <div></div> <h1></h1> <ol></ol> <ul></ul>
###Open tag: In html ,have some tag are only open tag. like:-
<img>,<input>,<hr>,<br>
Entities
Entities in HTML is, have some reserved characters to show in output.
Like:
> , < , г
List
In HTML list are two type's.
Ordered List
In Ordered List ,list will show in numbering format.
<ol>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
</ol>
- Unodered List In Unordered List ,list will show with bullets or disc.
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
</ul>
Table
- Table tag used for creating a table.
- First row always for table heading's .
- Other row or column are create in table data tag.
Image
- In image tag we pass the image path and render in browser.
- We can pass the random image link address in image tag.
UseMap
- Image map is an image with clickable areas.
- Usemap create a relationship between image and map.
- Always show usemap name with hash(#) symbol.
click on flower or flower pot and see a message: %[codepen.io/Meghakhatri/pen/mdKpmRG]
Video
- In video tag ,we will show or pass any video link path address.
- Video tag support some attributes or controls like pause video, volume, mute, autoplay and etc.
Formatting
- Formatting elements were designed to display special types of text.
Iframe
- HTML iframe is used to display a web page within a web.
- In iframe Use the height and width attributes to specify the size of the iframe.
Semantic
- semantic element clearly describes its meaning to both the browser and the developer.
- non-semantic elements: and - Tells nothing about its content.
- semantic elements: ,
, and
- Clearly defines its content.
- All semantic tag's are as follow:-
<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>
Form
- HTML form is used to collect user input.
- HTML element is used to create an HTML form for user input.
- The element is a container for different types of input elements.
- such as: text fields, checkboxes, radio buttons, submit buttons, etc.
Thank's for reading Happy learning