HTML
HTML (HyperText Markup Language) is formally defined by the
WHATWG Living Standard (formerly HTML5).
HTML is the foundational runtime environment for modern web applications, integrating
declarative semantics with JavaScript-accessible APIs to enable a rich, interactive, and
platform-agnostic user experience.
1) Basic HTML
</p> paragraph <p>
Heading <h1> <h2> ....... <h6> </h6>
Unordered list <ul> <li>...........<li> </li></ul>
Ordered list <ol type = "a"> </ol>
2) Linking Items
<!--Linking a Link -->
<a href = "[Link]
<!--Linking a Image-->
<img src= "assets/[Link]" alt="image" height = "300px" width = "200px">
3) Embedding a Video
<a href="path/to/your/video.mp4" download>Download Video</a>
<a href="path/to/your/video.mp4" target="_blank">Open Video in New Tab</a>
<!-- With Controls -->
<video width="640" height="360" controls>
<source src="path/to/your/video.mp4" type="video/mp4">
<source src="path/to/your/[Link]" type="video/webm">
Your browser does not support the video tag.
</video>
4) Div's
<!-- used for separate elements i.e block elements -->
<div> </div>
<!-- used for separate elements i.e inline elements -->
<span> </span>
<!-- used for break between paras -->
<br/>
<!-- used for break hortizonal line -->
<hr/>
5) SubScripts & SuperScripts
<sub> used for subscript </sub>
<sup> used for superscript </sup>
6) Famous Semantic tags
<header>.........</header>
<footer>.........</footer>
<main>...........</main>
<nav>............</nav>
<article>........</article>
<section>........</section>
<aside>..........</aside>
7) Famous Emmets
! for html boiler code
> used for child parent relation
+ used for siblings
* no of times it is written
8) Tables in HTML
<table border="black">
<caption> Food Menu </caption>
<tr>
<th>Item</th>
<th>Price</th>
</tr>
<tr>
<td>Chips</td>
<td>10</td>
</tr>
</table>
<!-- Semantics in tables -->
<thead> for header
<tbody> for body
<tfoot> for footer
rowspan = "2" used to spread into two rows
colspan = "2" used to spread into two columns
9) Forms in HTML
<form action = "/action">
<label>
Username:
<input type = "text" placeholder="Type your name" name="name"/> <br/>
</label>
<label>
Password:
<input type = "password" placeholder="Type password" name="pass" />
<br/>
</label>
<hr/>
<div>
<label for="Username">Enter Your Username</label>
<input type="text" placeholder="Type your name" id ="Username"/>
</div>
<button type = "submit">Sumbit</button>
<button type="button">Hello</button>
<button type = "reset">Reset</button>
</form>
<form action="[Link]
<input type = "text" placeholder="search in youtube" name="search_query"/>
<button>search</button>
<button type="reset">reset</button>
</form>
<!-- Dropdown -->
<form>
<select name="profession" id="profession">
<option value="stu">Student</option>
<option value="dev">Developer</option>
</select>
<button type="submit">Sumbit</button>
</form>
<!-- Range -->
<form>
<label for="vol">Select Volume</label>
<input type="range" id="vol" min="0" max="100" name="vol" step="10" />
<button>Sumbit</button>
</form>