Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
53 views

HTML Notes by IronCoding

The document provides information about HTML including basic tags like headings, paragraphs, links and images. It also covers HTML page structure, lists, tables, forms, and other common elements.

Uploaded by

chetandhapola44
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
53 views

HTML Notes by IronCoding

The document provides information about HTML including basic tags like headings, paragraphs, links and images. It also covers HTML page structure, lists, tables, forms, and other common elements.

Uploaded by

chetandhapola44
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

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

You might also like