Scribd
Upload
26 views

HTML Short Notes

Uploaded by

kausharbtt
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
26 views

HTML Short Notes

Uploaded by

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

HTML Short Notes

HTML tag & Attributes Description


HTML stands for Hyper Text Markup Language.
HTML was created by Berners-Lee in late 1991.
HTTP Hyper Text Transfer Protocol
HTML comments <!-- ... --> tags.
1 <!DOCTYPE...> This tag defines the document type and HTML version.
<html> This tag encloses the complete HTML document and mainly
comprises of document header which is represented by
<head>...</head> and document body which is represented by
<body>...</body> tags.
<head> This tag represents the document's header which can keep other
HTML tags like <title>, <link> etc.
<title> The <title> tag is used inside the <head> tag to mention the
document title.
<body> This tag represents the document's body which keeps other HTML
tags like <h1>, <div>, <p> etc.
<h1> This tag represents the heading.
<p> This tag represents a paragraph.
Heading Tags Any document starts with a heading. You can use different sizes for
your headings.
<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>
Paragraph Tag Each paragraph of text should go in between an opening <p> and a
closing </p> tag.

Line Break Tag anything following it starts from the next line.Empty/Single tag
<br>
Centering Content any content in the center of the page or any table cell.
Horizontal Lines The <hr> tag creates a line from the current position in the
document to the right margin and breaks the line accordingly.
Empty/Single tag.
Preserve Formatting Any text between the opening <pre> tag and the closing </pre>
tag will preserve the formatting of the source document.
Nonbreaking Spaces use a nonbreaking space entity &nbsp;
HTML element <p> This is paragraph </p>
content.
<h1> This is heading content. </h1>
<div This is division content. </div>
>
<br />
Nested HTML Elements allowed to keep one HTML element inside another HTML element:
Align Attributes three possible values of align attribute: left, center and right.

Core Attributes
Id,Title ,Class ,Style

The Id Attribute The id attribute of an HTML tag can be used to uniquely identify
any element within an HTML page.
<p id=”x..y..z">….</p>
The title Attribute The title attribute gives a suggested title for the element.
<h3 title="Hello HTML!">………</h3>
The class Attribute class="className1 className2 className3"
The style Attribute <p style="font-family:arial; color:#FF0000;">Some text...</p>

Internationalization
Attributes dir ,lang ,xml:lang

The dir Attribute The dir attribute allows you to indicate to the browser about the
direction in which the text should flow.
ltr Left to right
rtl Right to left
<html dir="rtl">

The lang Attribute The lang attribute allows you to indicate the main language used in
a document.
<html lang="en">

align Horizontally aligns tags


right, left, center
valign Vertically aligns tags within an HTML element.
top, middle, bottom
bgcolor Places a background color behind an element
numeric, hexidecimal, RGB
values
background Places a background image behind an element
URL
id Names an element for use with Cascading Style Sheets.
User Defined
class Classifies an element for use with Cascading Style Sheets.
User Defined
width=Numeric Value Specifies the width of tables, images, or table cells.
height=Numeric Value Specifies the height of tables, images, or table cells.
title=User Defined "Pop-up" title of the elements.
Bold Text Anything that appears within <b>...</b> element, is displayed in
bold.
Italic Text Anything that appears within <i>...</i> element is displayed in
italicized.
Underlined Text Anything that appears within <u>...</u> element, is displayed with
underline.
Strike Text Anything that appears within <strike>...</strike> element is
displayed with strikethrough, which is a thin line through the text.
Monospaced Font each letter has the same width.
<tt>...</tt>
Superscript Text displayed half a character's height above the other characters.
<sup>...</sup>
Subscript Text displayed half a character's height beneath the other characters.
<sub>...</sub>
Inserted Text Anything that appears within <ins>...</ins> element is displayed as
inserted text.
Deleted Text Anything that appears within <del>...</del> element, is displayed
as deleted text.
Larger Text The content of the <big>...</big> element is displayed one font
size larger than the rest of the text
Smaller Text The content of the <small>...</small> element is displayed one
font size smaller than the rest of the text surrounding it
Grouping Content The <div> and <span> elements allow you to group together
several elements to create sections or subsections of a page.
<div>…..</div> put all of the footnotes on a page within a <div> element to
indicate that all of the elements within that <div> element relate
to the footnotes.
using a special set of style rules
<span>……</span> can be used to group inline elements only,
Emphasized Text Anything that appears within <em>...</em> element is displayed
as emphasized text.
Marked Text Anything that appears with-in <mark>...</mark> element, is
displayed as marked with yellow ink
Strong Text Anything that appears within <strong>...</strong> element is
displayed as important text.
Text Abbreviation You can abbreviate a text by putting it inside opening <abbr> and
closing </abbr> tags.
<p>My best friend's name is <abbr
title="Abhishek">Abhy</abbr>.</p>
Acronym Element The <acronym> element allows you to indicate that the text
between <acronym> and </acronym> tags is an acronym.
Text Direction The <bdo>...</bdo> element stands for Bi-Directional Override
and it is used to override the current text direction.
Special Terms It's usage is similar to italic words in the midst of a paragraph.
<dfn>...</dfn>
Quoting Text When you want to quote a passage from another source, you
should put it in between<blockquote>...</blockquote> tags
Short Quotations The <q>...</q> element is used when you want to add a double
quote within a sentence.
Text Citations you can indicate the source placing it between an opening
<cite>tag and closing </cite> tag.
Computer Code Any programming code to appear on a Web page should be placed
inside <code>...</code>tags
Keyboard Text When you are talking about computers, if you want to tell a reader
to enter some text, you can use the <kbd>...</kbd> element to
indicate what should be typed in, as in this example
Programming Variables This element is usually used in conjunction with the <pre> and
<code> elements to indicate that the content of that element is a
variable.
Program Output <samp>...</samp> element indicates sample output from a
program,
Address Text The <address>...</address> element is used to contain any
address.
META TAGS You can use <meta> tag to specify important keywords related to
the document and later these keywords are used by the search
engines while indexing your webpage for searching purpose.

<meta name="keywords" content="HTML, Meta Tags,


Metadata" />
Name Name for the property. Can be anything. Examples include,
keywords, description, author, revised, generator etc.
content Specifies the property's value.
scheme Specifies a scheme to interpret the property's value (as declared in
the content attribute).
http-equiv Used for http response message headers. For example, http-equiv
can be used to refresh the page or to set a cookie. Values include
content-type, expires, refresh and set-cookie.
Document Description <meta name="description" content="Learning about Meta
Tags." />
You can use <meta> tag to give a short description about the
document.
Document Revision Date You can use <meta> tag to give information about when last time
the document was updated. This information can be used by
various web browsers while refreshing your webpage.
<meta name="revised" content="Tutorialspoint, 3/7/2014" />
Document Refreshing <meta http-equiv="refresh" content="5" />
Page Redirection You can use <meta> tag to redirect your page to any other
webpage.
<meta http-equiv="refresh" content="5;
url=http://www.tutorialspoint.com" />
Setting Cookies <meta http-equiv="cookie" content="userid=xyz;
expires=Wednesday, 08-Aug-15 23:59:59 GMT;" />
Setting Author Name <meta ame="author" content="Mahnaz Mohtashim" />
Specify Character Set <meta http-equiv="Content-Type" content="text/html;
charset=UTF-8" />
Insert Image <img src="Image URL" ... attributes-list/>
<img src="test.png" alt="Test Image" />
Set Image Width/Height <img src="test.png" alt="Test Image" width="150" height="100"/>
Set Image Border <img src="test.png" alt="Test Image" border="3"/>
Set Image Alignment <img src="test.png" alt="Test Image" border="3" align="right"/>
Table tag The HTML tables are created using the <table> tag in which the
<tr> tag is used to create table rows and <td> tag is used to create
data cells.
<table border=”1”>….</table>
<tr>…</tr> <tr> tag is used to create table rows
<td>…</td> <td> tag is used to create data cells
Table Heading Table heading can be defined using <th> tag,
This tag will be put to replace <td> tag,
<th>….</th>
Cellpadding cellpadding represents the distance between cell borders and the
content within a cell.
<table border="1" cellpadding="5" cellspacing="5">
Cellspacing The cellspacing attribute defines the width of the border
Colspan Attributes You will use colspan attribute if you want to merge two or more
columns into a single column.
Rowspan Attributes You will use colspan attribute if you want to merge two or more
columns into a single column.
Tables Backgrounds <table border="1" bordercolor="green" bgcolor="yellow">
Table Height and Width <table border="1" width="400" height="150">
Table Caption tag it shows up at the top of the table(Heading)
<caption>This is the caption</caption>
Table Header to create a separate table header
<thead>

Body to indicate the main body of the table.


<tbody>
Footer to create a separate table footer
<tfoot>

Nested Tables You can use one table inside another table
unordered list This will list items using plain bullets ,in which <li>…</li> tag used
<ul>…….</ul>
The type Attribute You can use type attribute for <ul> tag to specify the type of bullet
you like.
<ul type="square">
<ul type="disc">
<ul type="circle">
<ol type="1"> - Default-Case Numerals.
<ol type="I"> - Upper-Case Numerals.
<ol type="i"> - Lower-Case Numerals.
<ol type="a"> - Lower-Case Letters.
<ol type="A"> - Upper-Case Letters
ordered list If you are required to put your items in a numbered list instead of
bulleted,in which <li>….</li> tag is used.
<ol>………</ol>
The start Attribute <ol type="i" start="4" >
Definition Lists
A definition list. This arranges your items in the same way as they
are arranged in a dictionary

<dl> Defines the start of the list


<dt>…</dt> A term
<dd>…</dd> Term definition
</dl> Defines the end of the list
Anchor tag anything between the opening <a> tag and the closing </a> tag
becomes part of the link
<a href="Document URL" ... attributes-list>Link Text</a>
The target Attribute This attribute is used to specify the location where linked
document is opened.
<a href="http://www.tutorialspoint.com" target="_self">Tutorials
Point</a>
Option Description
_blank Opens the linked document in a new window or tab.
_self Opens the linked document in the same frame.
_parent Opens the linked document in the parent frame.
_top Opens the linked document in the full body of the window.
targetframe Opens the linked document in a named targetframe.
Use of Base Path used to give a base path for all the links
<base href="http://www.tutorialspoint.com/">
Linking to a Page Section You can create a link to a particular section of a given webpage by
using name attribute
<a href="/html/html_text_links.htm#top">Go to the Top</a>
Setting Link Colors You can set colors of your links, active links and visited links using
link, alink and vlink attributes of <body> tag.
<body alink="#54A250" link="#040404" vlink="#F40633">
Download Links <a href="http://www.tutorialspoint.com/page.pdf">Download PDF
File</a>
image as hyperlink <a href="http://www.tutorialspoint.com" target="_self">
<img src="/images/logo.png" alt="Tutorials Point" border="0"/>
</a>
Email Tag <a href= "mailto: [email protected]">Send Email</a>
Creating Frames To use frames on a page we use <frameset> tag instead of <body>
tag
<frameset rows="10%,80%,10%">
<frame name="top" src="/html/top_frame.htm" />
<frame name="main" src="/html/main_frame.htm" />
<frame name="bottom" src="/html/bottom_frame.htm" />
<noframes>
<body>
Your browser does not support frames.
</body>
</noframes>
</frameset>
The <frame>Tag Attributes Cols,rows,border,frameborder,framespacing
The <Iframe> Tag Attributes Src, name, frameborder, marginwidth, marginheight, noresize,
scrolling, ongdesc,
Block Elements Block elements appear on the screen as if they have a line break
before and after them.
For example, the <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>,
<ol>, <dl>,
<pre>, <hr />, <blockquote>, and <address> elements are all block
level elements. They
all start on their own new line, and anything that follows them
appears on its own new
line.
Inline Elements Inline elements, on the other hand, can appear within sentences
and do not have to appear
on a new line of their own. The <b>, <i>, <u>, <em>, <strong>,
<sup>, <sub>, <big>,
<small>, <li>, <ins>, <del>, <code>, <cite>, <dfn>, <kbd>, and <var>
elements are
all inline elements.
The<div> tag and The difference between the <span> tag and the <div> tag is that
The <span> tag the <span> tag is used
with inline elements whereas the <div> tag is used with block-level
elements.
Html Background with Colors <tagname bgcolor="color_value"...>

Html Background with <tagname background="Image URL"...>


Images

Set Font Size <font size="1">Font size="1"</font><br />


<font size="2">Font size="2"</font><br />
<font size="3">Font size="3"</font><br />
<font size="4">Font size="4"</font><br />
<font size="5">Font size="5"</font><br />
<font size="6">Font size="6"</font><br />
<font size="7">Font size="7"</font>

Relative Font Size <font size="-1">Font size="-1"</font><br />


<font size="+1">Font size="+1"</font><br />
<font size="+2">Font size="+2"</font><br />
<font size="+3">Font size="+3"</font><br />
<font size="+4">Font size="+4"</font>

Setting Font Color <font color="red">This text is red</font>

Single-line text input controls <form >


First name: <input type="text" name="first_name" />
<br>
Last name: <input type="text" name="last_name" />
</form>

The <marquee> Tag <marquee direction="right">This text will scroll from


Attributes left to right</marquee>

The HTML <link> Tag <link rel="stylesheet" type="text/css"


href="/css/style.css">

HTML <a> Tag <a href="http://www.amrood.com">AMROOD.com</a>


HTML <abbr> Tag <abbr title="International Cricket Council">ICC.</abbr>
promotes the global
game.<br />

HTML <address> Tag <address>


600 Wisdon Apartments<br />
Filmcity, Kondiura<br />
New Delhi - 50027
</address>

HTML <applet> Tag <applet code="newClass.class" width="300" height="200">


</applet>

HTML <area> Tag <area shape="poly"


coords="74,0,113,29,98,72,52,72,38,27"
href="/perl/index.htm"
alt="Perl Tutorial"
target="_blank" />

HTML <article> Tag <article>


<h2>PHP</h2>
<p>PHP is PHP Hypertext Preprocessor</p>
</article>

HTML <aside> Tag <aside>


<h3>Java History</h3>
<p>Java is a programming language developed by James
Gosling in 1994.</p>
</aside>

HTML <audio> Tag <audio controls>


<source src="/html/Kalimba.mp3" type="audio/mpeg">
</audio>

HTML <b> Tag <b>bold</b>

HTML <base> Tag <base href="http://www.tutorialspoint.com" />


HTML <basefont> Tag <basefont face="cursive,serif" color="#ff9900" size="4"/>

HTML <bdo> Tag <bdo dir="rtl">Here's some English embedded in text in


another language
requiring a right-to-left presentation.</bdo>
tag is used to override the default text direction.
HTML <bdi> Tag The HTML tag is Bi-directional isolation element which is used to embed text with a
different direction from another text.

HTML <bgsound> Tag <bgsound src="/html/yourfile.mdi"/>

HTML <big> Tag <p><big>Website: complieonline.com</big>(Online


Compiler)</p>

HTML blink Tag <blink>This text will blink in Netscape Version


5.0</blink>

HTML <blockquote> Tag


HTML <body> Tag
HTML <br> Tag <br> tag is used to give a line break
<p>This is before the line break<br />
and this after the line break.</p>

HTML Button Tag <button name="button" value="OK" type="button">Click


Me</button>

HTML <canvas> Tag <canvas> tag is for drawing graphics, animations etc using scripting.
<canvas id="newCanvas">Your browser does not support
canvas tag.</canvas>

HTML <caption> Tag <table width="100%">


<caption>Indian Cricketers</caption>
<th>Name</th>
<tr><td>Sachin Tendulkar</td></tr>
<tr><td>M S Dhoni</td></tr>
<tr><td>Suresh Raina</td></tr>
<tr><td>Virat Kohli</td></tr>
</table>

HTML <center> Tag <center>This text is centered</center>


HTML <cite> Tag <p>The learning content can be referred from <cite>Data
Structures & Algorithms in Java</cite><p></p>

HTML <code> Tag <p>The header file for C++ Program


is :<code>#include<iostream.h></code>.</p>

HTML <col> Tag


HTML <datalist> Tag <datalist id="tutorials">
<option value="Java">
<option value="ASP">
<option value="PHP">
<option value="Ruby">
<option value="jQuery">
</datalist>

HTML <dd> Tag <dl>


<dt>Definition List</dt>
<dd>A list of terms and their
definitions/descriptions.</dd>
<dt>HTML</dt>
<dd>An HTML tutorial.</dd>
<dt>PHP</dt>
<dd>An PHP tutorial.</dd>
</dl>

HTML <del> Tag <del> tag is used for markup of deleted text
<del>HTML del tag</del>

HTML <dfn> Tag <dl>


<dt>
<dfn>
<abbr title="Java Server Pages">JSP</abbr>
</dfn>
</dt>
<dd>JSP is used to create dynamically generated web
pages.</dd>
</dl>
HTML <dialog> tag <Start <dialog open>this will be shown in a dialog</dialog>
here>
HTML <dir> Tag
HTML div Tag <div id="contentinfo">
<p>Welcome to our website. We provide tutorials on
various subjects.</p>
</div>

HTML Tag
HTML <dt> Tag The HTML
tag is used to define the start of a term in a definition list.
HTML <em> Tag The HTML tag formats the text in a document. It specifies emphasized text.
<em>image</em>

HTML <embed> Tag tag represents a container for external application or interactive content.
<embed src="/html/yourfile.mdi" width="250" height="100"
/>

HTML <fieldset> Tag <fieldset>


<legend>Details</legend>
Student Name: <input type="text"><br />
MCA Subjects:<input type="text"><br />
Course Link:<input type="url" name="websitelink">
</fieldset>
tag is used for grouping related form elements
HTML Figcaption Tag tag specifies a caption for an element
<body>
<figure><img
src="http://www.tutorialspoint.com/scripts/img/logo.png"/
>
<figcaption>Tutorials Point Logo</figcaption>
</figure>

HTML Figure Tag tag specifies self-contained content.


<figure><img
src="http://www.tutorialspoint.com/scripts/img/logo.png"/
>
</figure>
HTML <font> Tag tag is used to specify the font of the text. It is deprecated in HTML as well as in
XHTML
HTML Footer Tag tag specifies a footer for a document or section.
<footer>
© Copyright 2014, All Rights Reserved
</footer>

HTML <form> Tag tag is used for creating a form for user input
<form action="/cgi-bin/hello_get.cgi" method="get">
First name:
<input type="text" name="first_name" value=""
maxlength="100" />
<br />
Last name:
<input type="text" name="last_name" value=""
maxlength="100" />
<input type="submit" value="Submit" />
</form>

HTML <frame> Tag, Not supported in html 5


HTML <frameset> Tag
HTML <h1> to <h6> Tag <h1>
defines largest heading and <h6> defines smallest heading.
HTML <head> Tag Tags included inside head tags are not displayed on browser window

HTML Header Tag <header>


<h1>Simply Easy Learning</h1>
<p>You're visiting tutorialspoint.com -
tutorial hub for simply easy
learning.</p>
</header>
tag specifies a header for a document or section.
HTML <hr> Tag
tag is used for creating a horizontal line

HTML <html> Tag tag is the container that contains all other HTML elements except
for the !doctype tag which is located before the opening tag. All
other HTML elements are nested between the and
tags.
HTML <i> Tag I tag is used to display the content in italic.
HTML <iframe> Tag tag is used to create an inline frame
<iframe src ="http://www.tutorialspoint.com/index.htm"
width="100%"></iframe>

HTML <ilayer> Tag The HTML <ilayer> tag is used to create a layer that
occupies space in the containing text
flow.

HTML <img> Tagx <img src="http://www.tutorialspoint.com/images/html.gif"


alt="HTML Tutorial"
height="150" width="140" />

HTML <input> Tag <input type="text" name="first_name" value=""


maxlength="100" />

HTML <ins> Tag The HTML <ins> tag is used to indicate newly inserted text.
<ins>HTML ins tag</ins>

HTML <isindex> tag <isindex> tag is used for querying a document through a text
field.
HTML <kbd> Tag <kbd> tag defines keyboard input. It is a phrase tag.

<kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>T</kbd>

HTML keygen Tag <keygen> tag is used to process Web forms with certificate
management
Systems

HTML <label> Tag The HTML <label> tag is used to add a label to a form control
like text, textarea etc.
HTML <layer> Tag The HTML <layer> tag is used to position and animate
(through scripting) elements in a
Page
<layer id="layer1" top="250" left="50" width="200"
height="200" bgcolor="red">
<p>layer 1</p>
</layer>

HTML <legend> Tag The HTML <legend> tag s used to define a caption for
<fieldset> tag.
<form>
<fieldset>
<legend>Details</legend>
Student Name: <input type="text"><br />
MCA Subjects:<input type="text"><br />
Course Link:<input type="url" name="websitelink">
</fieldset>
</form>

HTML <li>Tag The HTML <li> tag is used for specifying a list item in ordered,
unordered, directory, and
menu lists
<ul>
<li>ol - ordered list</li>
<li>ul - unordered list</li>
<li>dir - directory list</li>
<li>menu - menu list</li>
</ul>

HTML <link> Tag <link> tag is used for defining a link to an external document.
It is placed in
the <head> section of the document.

<link rel="stylesheet" href="stylenew.css">

HTML Main Tag <main> tag specifies main or important content in the
document

HTML <map> Tag The HTML <map> tag is used for defining an image map along
with <img> tag.
<img src="/images/html.gif" alt="HTML Map" border="0"
usemap="#html"/>
<!-- Create Mappings -->
<map name="html">
<area shape="circle"
coords="154,150,59" href="about/about_team.htm"
alt="Team"
target="_self" />
</map>

HTML Mark Tag <mark> tag specifies a text highlighted for reference
purposes,
HTML <marquee> Tag <marquee> tag is used for scrolling piece of text or image
displayed either
horizontally across or vertically down your web site page
depending on the settings
<marquee>This is basic example of marquee</marquee>
<marquee direction="up">The direction of text will be
from bottom to
top.</marquee>

HTML <menu> Tag <menu>


<li>ol - ordered list</li>
<li>ul - unordered list</li>
<li>dir - directory list</li>
<li>menu - menu list</li>
</menu>

HTML <menuitem> tag The HTML <menuitem> tag is used for defining a menu item
for a menu.
HTML <meta> tag The HTML <meta> tag is used for declaring metadata for the
HTML document.
Difference between HTML In HTML the <meta> tag has no end tag.
and XHTML In XHTML the <meta> tag must be properly closed.
HTML <meter> Tag The HTML <meter> tag specifies a scalar measurement within
a known range (a gauge).
<meter value="7" min="0" max="10">2 out of 10</meter><br
/>

HTML <multicol> tag <multicol> tag is used to create multiple columns of text and
lets you control
the size and number of the columns
HTML <nav> Tag The HTML <nav> tag specifies a section that contains only
navigation links.
<nav>
<a href="dbms/index.htm">DBMS</a> |
<a href="mongodb/index.htm">MongoDB</a> |
<a href="mysql/index.htm">MySQL</a> |
<a href="plsql/index.htm">PL/SQL</a> |
<a href="sql/index.htm">SQL</a>
</nav>

HTML <nobr> Tag The HTML <nobr> tag is used to instruct the browser
not to break the specified text (such as the usual line
wrap that occurs at the right edge of the browser
window).
HTML <noembed> Tag The HTML <noembed> tag is used to handle
browsers which do not support the <embed>
tag. The <noembed> tag makes it easy to supply
alternative content that tells users what
they are missing.
HTML <noframes> Tag
HTML <noscript> Tag
HTML <object> Tag
HTML <ol> Tag The HTML <ol> tag is used for creating an ordered list.
<ol>
<li>ol - ordered list</li>
<li>ul - unordered list</li>
<li>dir - directory list</li>
<li>menu - menu list</li>
</ol>

HTML <optgroup> Tag The HTML <optgroup> tag is used for grouping related options
within your select list.
HTML <option> Tag The HTML <option> tag is used within a form for defining
options in the drop-down list.
<form action="/cgi-bin/dropdown.cgi" method="post">
<select name="dropdown">
<option value="Java" selected>Maths</option>
<option value="Ruby">Physics</option>
</select>
<input type="submit" value="Submit" />
</form>

HTML <output> Tag


HTML <p> Tag The HTML <p> tag defines a paragraph of text.
HTML <param> Tag
HTML <plaintext> Tag
HTML <pre> Tag The HTML <pre> tag is used for indicating
preformatted text
HTML <q> Tag The HTML <q> tag is used for indicating short
quotations
HTML <strike> Tag The HTML <strike> tag specifies strikethrough text.
This tag is deprecated now, <del>
should be used instead.
HTML <script> Tag <script type="text/JavaScript">
document.write("You're visiting tutorialspoint!")
</script>

HTML Section Tag The HTML <section> tag specifies a section in a document.
HTML <select> Tag The HTML <select> tag is used within a form for defining a
select list.
HTML <spacer> Tag The HTML <spacer> tag specifies a whitespace.
HTML <small> Tag <p><small> Simply Easy Learning</small></p>

HTML <dialog> tag The HTML <source> tag is used for defining multimedia
resources for <audio> and <video> elements
<audio controls>
<source src = "yourfile.mp3">
<p>The browser doesnot support the file</p>
</audio>

HTML <span> Tag

HTML <strong> tag The HTML <strong> tag is used for emphasizing an important
text.
HTML <style> tag <style type="text/css">
h1 { color:#F1F1F1 }
</style>

HTML <sub> Tag The HTML <sub> tag is used for defining subscript text.
HTML <sup> Tag The HTML <sup> tag is used for defining superscript text.
HTML <table> Tag The HTML <table> tag is used for defining a table. The table
tag contains other tags that define the structure of the table.
HTML <tbody> Tag The HTML <tbody> tag is used in adding a body to a table
HTML <td> Tag The HTML <td> tag is used for specifying a cell or table data
within a table.
HTML textarea Tag The HTML <textarea> tag is used within a form to declare a
textarea element - a control that allows the user to input text
over multiple rows.

<textarea rows="5" cols="50" name="description">


Enter your name
</textarea>

HTML <tfoot> Tag The HTML <tfoot> tag is used in adding a footer to a table
HTML <th> Tag The HTML <th> tag is used for specifying a header cell or
table header within a table.
HTML <thead> Tag
HTML <time> tag The HTML <time> tag is used for displaying the human
readable date and time.
HTML <title> Tag The HTML <title> tag is used for indicating the title of the
HTML document
HTML <tr> Tag The HTML <tr> tag is used for specifying a table row within a
table.
HTML <track> tag <audio controls>
<source src = "yourfile.mp3">
<track src = "subtitles.vtt" kind="subtitles"
srclang="en" label="English">
<p>:The browser doesnot support the file</p>
</audio>

HTML <tt> Tag The HTML <tt> tag specifies teletype text. This is not
supported in HTML5.
HTML <u> Tag The HTML <u> tag is used to underline a text.
HTML <ul> Tag The HTML <ul> tag is used for creating an unordered list.
HTML <var> Tag <p> The equations: <var>3x</var> - <var>7z</var> =
<var>8y</var> + 2 and
<var>x</var> + <var>3z</var> = <var>4y</var> + 9 </p>

HTML <video> Tag <video width="500" height="300" controls>


<source src="/html/compileonline.mp4"
type="video/mp4">
This browser doesn't support video tag.
</video>

HTML <wbr> Tag The HTML <wbr> tag defines a potential line break point if
needed. This stands for Word Break Opportunity
HTML <xmp> Tag The HTML <xmp> tag specifies preformatted text.

CSS SHORT NOTES

include this file mystyle.css in <head>


any HTML document <link type="text/css" href="mystyle.css" media="all"
/>
</head>
Specifies the style sheet language as a content-type
Attribute=type,value=text/css (MIME type). This attribute is required.
Attribute=href ,value=URL Specifies the style sheet file having Style rules. This
attribute is a required.
Attribute=media ,value=scree Specifies the device the document will be displayed on. Default
n tty tv projection handheld value is all. This is an optional attribute.
print braille aural all

Selector A selector is an HTML tag at which a style will be applied. This


could be any tag like <h1> or <table> etc
Property A property is a type of attribute of HTML tag. Put simply, all the
HTML attributes are converted into CSS properties. They could
be color, border, etc.
Value Values are assigned to properties. For example, color property can
have the value either red or #F1F1F1 etc.
selector { property: value }
table{ border :1px solid #C00; }

The Type Selectors h1 {


color: #36CFFF;
}

The Universal Selectors * {


color: #000000;
}

The Descendant Selectors ul em {


color: #000000;
}

The Class Selectors .black {


color: #000000;
}
Or
h1.black {
color: #000000;
}
Or
<p class="center bold">
This para will be styled by the classes center and bold.
</p>

The ID Selectors #black {


color: #000000;
}
Or
h1#black {
color: #000000;
}
Or
#black h2 {
color: #000000;
}

The Child Selectors body > p {


color: #000000;
}

The Attribute Selectors input[type="text"]{


color: #000000;
}

Multiple Style Rules h1 {


color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}

Grouping Selectors h1, h2, h3 {


color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}
Or
#content, #footer, #supplement {
position: absolute;
left: 510px;
width: 200px;
}
INCLUSION
Embedded CSS -The <style> <head>
Element <style type="text/css" media="...">
Style Rules
............
</style>
</head>
0r
<head>
<style type="text/css" media="all">
h1{
color: rgb(51, 204, 191);
}
</style>
</head>

Inline CSS -The style Attribute <element style="...style rules....">


<h1 style ="color:#36C;"> This is inline CSS </h1>

External CSS -The <link> <head>


Element <link type="text/css" href="..." media="..." />
</head>
Or
h1, h2, h3 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}

Imported CSS -@import Rule <head>


@import url("URL");
</head>
Or
<head>
@import "mystyle.css";
</head>

CSS Rules Overriding 1- Any inline style sheet takes the highest priority. So, it will
override any rule defined in <style>...</style> tags or the rules
defined in any external style sheet file.
2-Any rule defined in <style>...</style> tags will override the rules
defined in any external style sheet file.
3- Any rule defined in the external style sheet file takes the lowest
priority,and the rules defined in this file will be applied only when
the above two rules are not applicable.
CSS Comments /*.....this is a comment in style sheet.....*/
Unit MEASUREMENT UNITS
%,cm,em,in,mm,….etc p {font-size: 16pt; line-height: 125%;}
div {margin-bottom: 2cm;}
p {letter-spacing: 7em;}
p {font-size: 24pt; line-height:3ex;}
p {word-spacing: .15in;}
p {word-spacing: 15mm;}

COLORS p{color:#FF0000;}
p{color:rgb(50%,50%,50%);}

Set the Background Color <p style="background-color:yellow;">


This text has a yellow background color.
</p>

Set the Background Image <table


style="background-image:url(/https/www.scribd.com/images/pattern1.gif);">
<tr><td>
This table has background image set.
</td></tr>
</table>

FONTS  The font-family property is used to change the face of a font.


 The font-style property is used to make a font italic or oblique.
 The font-variant property is used to create a small-caps effect
 The font-weight property is used to increase or decrease how
bold or light a font appears.
 The font-size property is used to increase or decrease the size of
a font.
 The font property is used as shorthand to specify a number of
other font properties.
Set the Font Style <p style="font-style:italic;"></p>
TEXT  The color property is used to set the color of a text.
 The direction property is used to set the text direction.
 The letter-spacing property is used to add or subtract space
between the letters that make up a word.
 The word-spacing property is used to add or subtract space
between the words of a sentence.
 The text-indent property is used to indent the text of a
paragraph.
 The text-align property is used to align the text of a document.
 The text-decoration property is used to underline, overline, and
strikethrough text.
 The text-transform property is used to capitalize text or convert
text to uppercase or lowercase letters.
 The white-space property is used to control the flow and
formatting of text.
 The text-shadow property is used to set the text shadow around
a text.
Set the Text Color <p style="color:red;">etc </p>

Set the Text Direction <p style="direction:rtl;"></p>

Set the Text Alignment <p style="text-align:right;"></p>


<p style="text-align:left;"></p>
<p style="text-align:center;"></p>

The Image Property <img style="border:0px;" src="/images/css.gif" />


<img style="border:1px solid red; height:100px;"
src="/images/css.gif" />
<img style="border:1px solid red; width:100px;"
src="/images/css.gif" />

LINKS  The :link signifies unvisited hyperlinks.


 The :visited signifies visited hyperlinks.
 The :hover signifies an element that currently has the user's
mouse pointer hovering over it.
 The :active signifies an element on which the user is currently
clicking.
<style type="text/css">
a:link {color: #000000}
a:visited {color: #006600}
a:hover {color: #FFCC00}
a:active {color: #FF00CC}
</style>

Set the Color of Links <style type="text/css">


a:link {color:#000000}
</style>
<a href="/html/index.htm">Black Link</a>

Set the Color of Visited Links <style type="text/css">


a:visited {color: #006600}
</style>
<a href="/html/index.htm">Click this link</a>

Change the Color of Links <style type="text/css">


when Mouse is Over a:hover {color: #FFCC00}
</style>
<a href="/html/index.htm">Bring Mouse Here</a>

Change the Color of Active <style type="text/css">


Links a:active {color: #FF00CC}
</style>
<a href="/html/index.htm">Click This Link</a>

The border-style Property  none: No border. (Equivalent of border-width:0;)


 solid: Border is a single solid line.
 dotted: Border is a series of dots.
 dashed: Border is a series of short lines.
 double: Border is two solid lines.
 groove: Border looks as though it is carved into the page.
 ridge: Border looks the opposite of groove.
 inset: Border makes the box look like it is embedded in the page.
 outset: Border makes the box look like it is coming out of the
canvas.
 hidden: Same as none, except in terms of border-conflict
resolution for table elements.
 border-bottom-style changes the style of bottom border.
 border-top-style changes the style of top border.
 border-left-style changes the style of left border.
 border-right-style changes the style of right border
<p style="border-width:4px;
border-top-style:solid;
border-bottom-style:dashed;
border-left-style:groove;
border-right-style:double;">
This is a a border with four different styles.
</p>

MARGINS  The margin specifies a shorthand property for setting the margin properties
in one declaration.
 The margin-bottom specifies the bottom margin of an element.
 The margin-top specifies the top margin of an element.
 The margin-left specifies the left margin of an element.
 The margin-right specifies the right margin of an element.
<p style="margin-bottom: 5%; border:1px solid
black;"></p>
<p style="margin-top: 15px; border:1px solid black;"></p>
<p style="margin-left: 15px; border:1px solid
black;"></p>
<p style="margin-right: 15px; border:1px solid
black;"></p>

LISTS <ul style="list-style-type:circle;"></ul>


<ul style="list-style-type:square;"></ul>
<ol style="list-style-type:decimal;"></ol>
<ol style="list-style-type:lower-alpha;"></ol>
<ol style="list-style-type:decimal;list-stlye-
position:outside;"></ol>

PADDINGS  The padding-bottom specifies the bottom padding of an element.


 The padding-top specifies the top padding of an element.
 The padding-left specifies the left padding of an element.
 The padding-right specifies the right padding of an element.
 The padding serves as shorthand for the preceding properties .
<p style="padding-top: 15px; border:1px solid
black;"></p>
<p style="padding-left: 15px; border:1px solid
black;"></p>

OUTLINES
DIMENSION  The height property is used to set the height of a box.
 The width property is used to set the width of a box.
 The line-height property is used to set the height of a line of text.
 The max-height property is used to set a maximum height that a box can be.
 The min-height property is used to set the minimum height that a box can
be.
 The max-width property is used to set the maximum width that a box can
be.
 The min-width property is used to set the minimum width that a box can be.
<p style="width:400px; max-height:10px;border:1px solid
red;
padding:5px; margin:10px;"></p>

SCROLLBARS <style type="text/css">


.scroll{
display:block;
border: 1px solid red;
padding:5px;
margin-top:5px;
width:300px;
height:50px;
overflow:scroll;
}
.auto{
display:block;
border: 1px solid red;
padding:5px;
margin-top:5px;
width:300px;
height:50px;
overflow:auto;
}</style>

LAYERS <div style="background-color:red;


width:300px;
height:100px;
position:relative;
top:10px;
left:80px;
z-index:2">
</div>
<div style="background-color:yellow;
width:300px;
height:100px;
position:relative;
top:-60px;
left:35px;
z-index:1;">
</div>
<div style="background-color:green;
width:300px;
height:100px;
position:relative;
top:-220px;
left:120px;
z-index:3;">
</div>

PSEUDO CLASSES selector:pseudo-class {property: value}

selector.class:pseudo-class {property: value}

The :hover pseudo-class <style type="text/css">


a:hover {color: #FFCC00}
</style>
<a href="/html/index.htm">Bring Mouse Here</a>

Shadow Filter <img src="/images/css.gif" alt="CSS Logo" style="FILTER:


Chroma(Color =
#000000) Shadow(Color=#00FF00, Direction=225)">

The @media rule <style tyle="text/css">


<!--
@media print {
body { font-size: 10pt }
}
@media screen {
body { font-size: 12pt }
}
@media screen, print {
body { line-height: 1.2 }
}
-->
</style>

PRINTING <style tyle="text/css">


<!--
@media screen
{
p.bodyText {font-family:verdana, arial, sans-serif;}
}
@media print
{
p.bodyText {font-family:georgia, times, serif;}
}
@media screen, print
{
p.bodyText {font-size:10pt}
}
-->
</style>
Bootstrap
Quick start
1. Create a new index.html file in your project root. Include the <meta name="viewport"> tag as well for proper
responsive behavior in mobile devices.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-
scale=1">
<title>Bootstrap demo</title>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>

2. Include Bootstrap’s CSS and JS. Place the <link> tag in the <head> for our CSS, and the <script> tag for our
JavaScript bundle (including Popper for positioning dropdowns, poppers, and tooltips) before the closing </body>.
Learn more about our CDN links.

<!doctype html>
<html lang="en">
<head>

<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]
alpha2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnu
TN7QbdgL+OapgHtvPp" crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>

</body>
</html>
3. HTML5 doctype

<!doctype html>
<html lang="en">
...
</html>

4. Viewport meta
Bootstrap is developed mobile first, a strategy in which we optimize code for mobile devices first and then scale up
components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices,
add the responsive viewport meta tag to your <head>.

<meta name="viewport" content="width=device-width, initial-


scale=1">

5. What is RFS?
Bootstrap’s side project RFS is a unit resizing engine which was initially developed to resize font sizes (hence its
abbreviation for Responsive Font Sizes). Nowadays RFS is capable of rescaling most CSS properties with unit values
like margin, padding, border-radius, or even box-shadow.
6. RTL

<html lang="ar" dir="rtl">

</html>

1-Layout
1. Breakpoints
Breakpoints are customizable widths that determine how your responsive layout behaves
across device or viewport sizes in Bootstrap .

Available breakpoints
Bootstrap includes six default breakpoints, sometimes referred to as grid tiers, for building
responsively. These breakpoints can be customized if you’re using our source Sass files.

Breakpoint Class infix Dimensions


Extra small None <576px
Breakpoint Class infix Dimensions
Small sm ≥576px
Medium md ≥768px
Large lg ≥992px
Extra large xl ≥1200px
Extra extra large xxl ≥1400px

2. Containers
Containers are a fundamental building block of Bootstrap that contain, pad, and align
your content within a given device or viewport.
How they work
Containers are the most basic layout element in Bootstrap and are required when using our
default grid system. Containers are used to contain, pad, and (sometimes) center the content
within them. While containers can be nested, most layouts do not require a nested container.

Bootstrap comes with three different containers:

 .container, which sets a max-width at each responsive breakpoint


 .container-{breakpoint}, which is width: 100% until the specified breakpoint
 .container-fluid, which is width: 100% at all breakpoints

The table below illustrates how each container’s max-width compares to the
original .container and .container-fluid across each breakpoint.

Extra small Small Medium Large X-Large XX-Large


<576px ≥576px ≥768px ≥992px ≥1200px ≥1400px
.container 100% 540px 720px 960px 1140px 1320px
.container-sm 100% 540px 720px 960px 1140px 1320px
.container-md 100% 100% 720px 960px 1140px 1320px
.container-lg 100% 100% 100% 960px 1140px 1320px
.container-xl 100% 100% 100% 100% 1140px 1320px
.container-xxl 100% 100% 100% 100% 100% 1320px
.container-fluid 100% 100% 100% 100% 100% 100%

Default container
Our default .container class is a responsive, fixed-width container, meaning its max-width changes at each
breakpoint.
<div class="container">
<!-- Content here -->
</div>

Responsive containers
Responsive containers allow you to specify a class that is 100% wide until the specified breakpoint is
reached, after which we apply max-widths for each of the higher breakpoints. For example, .container-
sm is 100% wide to start until the sm breakpoint is reached, where it will scale up with md, lg, xl,
and xxl.

<div class="container-sm">100% wide until small breakpoint</div>


<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>

Fluid containers
Use .container-fluid for a full width container, spanning the entire width of the viewport.

<div class="container-fluid">
...
</div>

3. Grid system
Example
Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content.
It’s built with flexbox and is fully responsive. Below is an example and an in-depth explanation for
how the grid system comes together.

<div class="container text-center">


<div class="row">
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
</div>
</div>

Grid options
Bootstrap’s grid system can adapt across all six default breakpoints, and any breakpoints you
customize. The six default grid tiers are as follows:

 Extra small (xs)


 Small (sm)
 Medium (md)
 Large (lg)
 Extra large (xl)
 Extra extra large (xxl)

4. Columns

How they work


 Columns build on the grid’s flexbox architecture. Flexbox means we have options for
changing individual columns and modifying groups of columns at the row level. You choose
how columns grow, shrink, or otherwise change.

 When building grid layouts, all content goes in columns. The hierarchy of Bootstrap’s grid
goes from container to row to column to your content. On rare occasions, you may combine
content and column, but be aware there can be unintended consequences.

 Bootstrap includes predefined classes for creating fast, responsive layouts. With six
breakpoints and a dozen columns at each grid tier, we have dozens of classes already built
for you to create your desired layouts. This can be disabled via Sass if you wish.

Alignment
Use flexbox alignment utilities to vertically and horizontally align columns.

Vertical alignment
Change the vertical alignment with any of the responsive align-items-* classes.

<div class="container text-center">


<div class="row align-items-start">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
</div>

5. Gutters
Gutters are the padding between your columns, used to responsively space and align content in the
Bootstrap grid system.

On this page

 How they workHorizontal guttersVertical guttersHorizontal & vertical guttersRow columns


guttersNo guttersChange the guttersHow they work
 Gutters are the gaps between column content, created by horizontal padding. We
set padding-right and padding-left on each column, and use negative margin to offset that at the
start and end of each row to align content.
 Gutters start at 1.5rem (24px) wide. This allows us to match our grid to the padding and
margin spacers scale.
 Gutters can be responsively adjusted. Use breakpoint-specific gutter classes to modify
horizontal gutters, vertical gutters, and all gutters.

Horizontal gutters
.gx-* classes can be used to control the horizontal gutter widths. The .container or .container-fluid parent
may need to be adjusted if larger gutters are used too to avoid unwanted overflow, using a
matching padding utility. For example, in the following example we’ve increased the padding
with .px-4:

6. A
7. a

You might also like