Scribd
Upload
3 views8 pages

HTML Notes by Ankit

This document provides an overview of HTML, including its structure, basic tags, and attributes. It explains the purpose of various HTML elements such as headings, paragraphs, links, and images, as well as layout techniques using semantic tags. Additionally, it covers lists and tables in HTML, highlighting their usage for organizing data.

Uploaded by

swamyankit61
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
3 views8 pages

HTML Notes by Ankit

This document provides an overview of HTML, including its structure, basic tags, and attributes. It explains the purpose of various HTML elements such as headings, paragraphs, links, and images, as well as layout techniques using semantic tags. Additionally, it covers lists and tables in HTML, highlighting their usage for organizing data.

Uploaded by

swamyankit61
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 8

-: 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

You might also like