-: HTML NOTES:-
HTML: Structure/layout
LEVEL 1:
HTML
Hyper Text Markup Language
HTML is the code that is used to structure a web page and its content.
The component used to design the structure of websites are called HTML tags.
First HTML File:
index.html
It is the default name for a website's homepage
HTML Tag:
A container for some content or other HTML tags
<p> This is a paragraph</P>
{ CONTENT }
< ELEMENT >
Basic HTML Page:
<!DOCTYPEhtml> tells browser you are using HTML5
<html> root of an html document
<head> container for metadata
<title>My First Page</title> page title
</head>
<body> contains all data rendered by the browser
<p>hello world</p> paragraph tag
</body>
</html>
Quick Points:
Html tag is parent of head & body tag
Most of html elements have opening & closing tags with content in between
Some tags have no content in between, eg - <br>
We can use inspect element/view page source to edit html.
Comments in HTML:
This is part of code that should not be parsed.
<!-- This is an HTML Comment -->
HTML is NOT case sensitive:
<html> = <HTML>
<p> = <P>
<head> = <HEAD>
<body> = <BODY>
LEVEL 2:
Basic HTML Tags
HTML Attributes:
Attributes are used to add more information to the tag
<html lang="en">
Heading Tag:
Used to display headings in HTML
h1 (most important)
h2
h3
h4
h5 (least important)
Paragraph Tag:
Used to add paragraphs in HTML
<p> This is a sample paragraph </p>
Anchor Tag:
Used to add links to your page
<a href="https://google.com"> Google </a>
Image Tag:
Used to add images to your page
<img src="/image.png" alt="Random Image">
relative url
Br Tag:
Used to add next line(line breaks) to your page
<br>
Bold, Italic & Underline Tags:
Used to highlight text in your page
<b> Bold </b>
<i> Italic </i>
<u> Underline </u>
Big & Small Tags:
Used to display big & small text on your page
<big> Big </big>
<small> Small </small>
Hr Tag:
Used to display a horizontal ruler, used to separate content
<hr>
Subscript & Superscript Tag:
Used to display a horizontal ruler, used to separate content
<sub> subscript </sub>
H2 O
<sup> superscript </sup>
A^n + B
Pre Tag:
Used to display text as it is (without ignoring spaces & next line)
<pre> This is a sample
text.
</pre>
LEVEL 3
Page Layout Techniques:
using Semantic tags for layout
using the Right Tags
<header>
<main>
<footer>
Inside Main Tag
Section Tag: For a section on your page
<section>
Article Tag: For an article on your page
<article>
Aside Tag: For content aside main content(ads)
<aside>
Revisiting Anchor Tag:
<a href="https://google.com" target="_main"> Google </a>
< for new tab>
<a href="https://google.com"> <img src="link"> </a>
{clickable pic}
Revisiting Image Tag:
<img src="link" height=50px >
{ set height}
<img src="link" width=50px >
{ set width}
Div Tag:
Div is a container used for other HTML elements
Block Element (takes full width)
List : Div Tags
<address> <fieldset> <nav>
<article> <figcaption> <noscript>
<aside> <figure> <ol>
<blockquote> <footer> <p>
<canvas> <form> <pre>
<dd> <h1>-<h6> <section>
<div> <header> <table>
<dl> <hr> <tfoot>
<dt> <li> <ul>
<main> <video>
Span Tag:
Span is also a container used for other HTML elements
Inline Element (takes width as per size)
List : Span Tags
<a> <dfn> <output>
<abbr> <em> <q>
<script> <acronym> <i>
<b> <img> <samp>
<bdo> <input> <map>
<big> <kbd> <object>
<br> <select> <label>
<button > <small> <span>
<tt> <sup> <textarea>
<strong> <sub> <cite>
<var> <time>
Level Pro:
List in HTML
Lists are used to represent real life list data.
Unordered ordered
<ul> <ol>
<li> Apple </li> <li> Apple </li>
<li> Mango </li> <li> Mango </li>
</ul> </ol>
Tables in HTML
Tables are used to represent real life table data.
<tr> used to display table row
<td> used to display table data
<th> used to display table header
Tables in HTML
Name Roll No
