Basics:
- Use stack overflow for doubts and all other queries, most of the codes will be found there
only.
HTML Tags:
- Paragraph: <p> Content </p>
- Heading: <h1> Heading </h1>
- Bold: <b> bold word </b>
- Nesting: Using one tag in another tag like bold between a paragraph of a few words
- Nested Tags: tags used to do nesting
- We have headings from <h1> to <h6> where in h6 will be the most smallest subheading.
- H1 tag can only be one and from h2 you canhave multiple ones.
same default sizes these have.
Example:
<h1> Avengers </h1>
<h2> Iron Man </h2>
<p> Also goes by the name <b>Tony Stark</b></p>
<h2> Captain America </h2>
<p> Also goes by the name <b>Steve Rogers</b> </p>
<h2> Hulk </h2>
<p> Also goes by the name <b>Bruce Banner</b> </p>
HTML Boilerplate:
<!DOCTYPE html>
<html> //root
<head> //metadata stored means data under data
<title>My First Page</title> //title name should be relevant does not display on website it shows
on tab name
</head>
<body> //actually shown on website
<p>Hello World</p>
</body>
</html>
By using ! emet is used to obtain the main body of html
Lang means language
HTML Lists:
Lists are of 2 types ordered and unordered lists <li> </li>
Bullets form: unordered lists
<ul>
<li> Content </li>
</ul>
Example:
<body>
<ul>
<li><h2> Want to buy: <h2/></li>
<li>Bread</li>
<li>Jam</li>
<li>Knife</li>
<li>Butter</li>
</ul>
</body>
numbering form or alphabetical: ordered list
<ol>
<li> Content </li>
</ol>
Example:
<ol>
<li>Bread</li>
<li>Jam</li>
<li>Knife</li>
<li>Butter</li>
</ol>
</body>
For types in alphabetical order
<ol type= "A"> // (or type “a”)
<li>Bread</li>
HTML Attributes:
Attributes are used to add more info to the tag.
<html lang="en"> //here lang is attribute and value is en
<meta charset=”UTF-8” //charset is attribute and UTF8 is value
Double quites(“ “) and single quotes(‘ ‘) have similar working.
Anchor Element:
Used to add links to your page.
<a href= “https://google.com”> Google</a>
//attribute hyper text reference: href meaning
// here a href is the attribute
We can add two types of links
1. Absolute Link: for main websites like we used google and netflix
2. Relative Link: used in projects during multiple files in the same system
Image Element:
Used to add image to your page. //single tag no closing tag
<img src=”image.png alt=”Random Image”> //here image.png is relative link
Relative url:
Example:
<img src="girly.jpeg" alt=" Girly Image" height="100px" width="100px">
<body>
//alt k baad vala is used in case image is not showing so it will reflect as words there
//The image should be in the same folder as the code
Absolute URL: (Google URL)
<img src="https://toppng.com/uploads/preview/cartoon-network-characters-
11550712078mi7hhwp3zn.png" alt=" In my Era" height="300px" width="300px">
</body>
</html>
