HTML Notes By Iron Coding
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>
<p> ---> This is a element.
This is a paragraph ---> This is a content.
Boiler plate code
We have to write our code in boiler plate code. write ! and click emmet abbreviation then a
code generated which is called boiler plate code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p> Hello world!</p>
</body>
</html>
We have to write our code between body (<body> <p> Hello world!</p> </body>) like this.
Comments in HTML
This is part of code that should not be parsed.
<!-- This is a comment --!>
Basic HTML Tags
1. Heading Tag : Used to display headings in HTML.
h1
h2
h3
h4
h5
h6
2. Paragraph Tag : Used to add paragraphs in HTML.
<p> this is paragraph tag </p>
3. Anchor Tag : Used to add links to your page.
<a href=”"https://google.com”>Google</a>
4. Image Tag : Used to add images to your page.
<img src="/image.png" alt="Random Image">
5. Br Tag : Used to add next line(line breaks) to your page.
<br>
6. Bold, Italic & Underline Tag : Used to highlight text in your page.
<b> Bold </b>
<i> Italic </i>
<u> Underline </u>
7. Big & Small Tags : Used to display big & small text on your page.
<big> Big </big>
<small> Small</small>
8. Hr Tag : Used to display a horizontal ruler, used to separate content.
<hr>
9. Subscript & Superscript Tag : Used to display a horizontal ruler, used to separate
content.
<sub> Subscript </sub> To write water formula ---> h<sub>2</sub>
<sup> Superscript</sup> To write 2 with power 4 is equal to 16---> 2<sup>4</sup>=16
10. Pre Tag : Used to display text as it is (without ignoring spaces & next line)
<pre> This is a sample text <pre>
11. Page Layout Techniques : using Semantic tags for layout
<header>
<main>
<footer>
12. 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> ---> for clickable pic
Revisiting Image Tag :
set height <img src="link" height=50px >
set width <img src="link" width=50px >
Div Tag : Div is a container used for other HTML elements. Block Element (takes full width)
Span Tag : Span is also a container used for other HTML elements. Inline Element (takes
width as per size).
Lists in HTML
Unordered HTML List : An unordered list starts with the <ul> tag. Each list item starts with the
<li> tag. The list items will be marked with bullets (small black circles) by default:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Ordered HTML List : An ordered list starts with the <ol> tag. Each list item starts with the <li>
tag. The list items will be marked with numbers by default:
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
HTML Tables
A table in HTML consists of table cells inside rows and columns.
A simple HTML table:
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
Table Cells
Each table cell is defined by a <td> and a </td> tag.
td stands for table data.
Everything between <td> and </td> are the content of the table cell.
Example
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
</table>
Table Rows
Each table row starts with a <tr> and ends with a </tr> tag.
tr stands for table row.
Example
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
Table Headers
Sometimes you want your cells to be table header cells. In those cases use the <th> tag instead of
the <td> tag:
th stands for table header.
Example
Let the first row be table header cells:
<table>
<tr>
<th>Person 1</th>
<th>Person 2</th>
<th>Person 3</th>
</tr>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
Table Headers
Sometimes you want your cells to be table header cells. In those cases use the <th> tag instead of
the <td> tag:
th stands for table header.
Example
Let the first row be table header cells:
<table>
<tr>
<th>Person 1</th>
<th>Person 2</th>
<th>Person 3</th>
</tr>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
Caption in Tables : <caption> Student Data </caption>
HTML Forms
An HTML form is used to collect user input. The user input is most often sent to a server for
processing.
a form is start with form tag <form> </form>.
<form action="/action.php" > Action attribute is used to define what action needs to be
performed when a form is submitted
Form Element : Input
<input type="text" placeholder="Enter Name">
Label
<input type="radio" value="class X" name="class" id="id1">
<label for="id1">
</label>
<input type="radio" value="class X" name="class" id="id2">
<label for="id2">
</label>
Class & Id
The class attribute is often used to point to a class name in a style sheet. It can also
be used by a JavaScript to access and manipulate elements with the specific class
name.
The id attribute specifies a unique id for an HTML element. The value of the id
attribute must be unique within the HTML document.
The id attribute is used to point to a specific style declaration in a style sheet. It is
also used by JavaScript to access and manipulate the element with the specific id.
The syntax for id is: write a hash character (#), followed by an id name. Then, define
the CSS properties within curly braces {}.
<div id="id1" class="group1">
</div>
<div id="id2"> class="group1">
</div>
Checkbox
<input type="checkbox" value="class X" name="class" id="id1">
<label for="id1">
</label>
<input type="checkbox" value="class X" name="class" id="id2">
<label for="id2">
</label>
Textarea
It is used for feedback boc, bio and comments etc.
<textarea name="feedback" id="feedback" placeholder="Please add Feedback">
</textarea>
Select
<option value="Delhi"> Delhi </option>
<select name="city" id="city">
</select>
<option value="Mumbai"> Delhi </option>
<option v
iframe Tag
It is used run a video or website in our web site for example we have to run a youtube
video in our website.
<iframe src="link"> Link </option>
Video Tag
<video src="myVid.mp4"> My Video </video>
Attributes
- controls
- height
- width
- loop
- autoplay
