Scribd
Upload
3 views14 pages

HTML Notes11

HTML, or Hyper Text Mark Up Language, is the foundational language for creating web pages, consisting of elements called tags that define the structure and meaning of web content. Various versions of HTML have been released since its inception in 1991, with HTML5 being the most recent major version. The document also details different HTML tags, their attributes, and their uses in web development.

Uploaded by

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

HTML Notes11

HTML, or Hyper Text Mark Up Language, is the foundational language for creating web pages, consisting of elements called tags that define the structure and meaning of web content. Various versions of HTML have been released since its inception in 1991, with HTML5 being the most recent major version. The document also details different HTML tags, their attributes, and their uses in web development.

Uploaded by

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

HTML NOTEs

(hyper text mark up language)


1. What is HTML ?
 HTML stands for Hyper Text Mark Up Language. It is the foundational
language used to create websites and web documents. HTML defines
the meaning and structure of web content.
 HTML is not a programming Language. It is a language for describing
web-pages using plain text.
 HTML describes the structure of a Web page.
 HTML consists of a series of elements {called Tags (HTML tags are like
keywords or hidden keywords that define how the web browser will
display the content.)}.
 HTML elements tell the browser how to display the content.
 HTML elements label pieces of content such as "this is a heading", "this
is a paragraph", "this is a link", etc.
 It was founded by Tim Berners Lee in 1991.
2. HTML Versions.
 HTML 1.0 – was released in 1993 for Web Developers. In this version
total 18 Tags were used.
 HTML 2.0 – was released in 1995.
 HTML 3.0 – was released in 1997.
 HTML 4.0 – was released in 1997.
 HTML 4.1 – was released in 1999.
 HTML 5.0 – was released in 2014.
 HTML 5.1 – was released in 2016.
 HTML 5.2 – was released in 2017.
3. Contains elements to display information and structure of a
website called – Tags.
4. What is a Tag in HTML?
 HTML tags are like keywords or hidden keywords that define how the
web browser will display the content.
 It defines a hyperlink which is used to link one page to another.
 Each HTML Tags have different properties.
5. There are Two types of Tags.
 Opening Tag.
 Closing Tag.

Tags

Opening Tag Content Closing Tag


< > My First Webpage </ >

 Eg.: - <title> My First Webpage </title>


6. File Extension of HTML is - .html and .htm .
 () – Bracket.
 {} – Curly Bracket.
 [] – Square Bracket.
 <> – Angular Bracket.
 ! – Exclamation Mark.
 “ ” – Double Inverted Comma.
 ‘ ’ – Single Inverted Comma.
 - – Hyphen.
 / – Slash .
 : – Colon.
 ; – Semicolon.
 \ – Backslash.
 | – Bar.
 _ – Underscore.
7. There are Two types of Editors.
 Text Editor.
 Code Editor.

Editors

Text Editor Code Editor

(A) Notepad. (A) Visual Studio Code


(B) Notepad++ (B) Sublime.

1. <!DOCTYPE Html> - Document type HTML tells its version which


version we are using.
2. <Head></Head> - Using title tag is the title of the HTML file which is
shown in the text bar above. In head tag we can link CSS(Cascading Style Sheet)
File, JS(Java Script) File and Meta files.
3. <Body></Body> - Body of HTML tag. All the tags over from HTML
come inside the body tag. Whatever you want to show in the window, put it in
the body tag.
Format of HTML Document
<!DOCTYPE Html>
<html>
<head>
<title> My first website </title>
</head>
<body>
</body>
</html>
4. <H1> to <H6> - It is called Heading Tag. It is used to give Heading in
webpage.

5. <P> - </P> - <p> tag is used to define paragraph. It is a container tag.


Eg.- <p>…………………………………………………</p>
6. <pre> - </pre> - The <pre> tag defines preformatted text.
Text in a <pre> element is displayed in a fixed-width font, and the text preserves
both spaces and line breaks. The text will be displayed exactly as written in the
HTML source code.
7. <hr> - For Horizontal ruler line.
8. <br> - For Line Break.
9. <u> - </u> - For Underline Text.
10. <i> - </i> - For Italic Text.
11. <b> - </b> - For Bold Text.
12. <em> - </em> - For Italic Text.
13. <strong> - </strong> - For Bold Text.
14. <big> - </big> - Text size increase in normal size.
15. <small> - </small> - Text size decrease in normal size.
16. <sub> - </sub> - H2O formate.
17. <sup> - </sup> - 10TH formate.
18. <del> - </del> - For delete Text.
19. <mark> - </mark> - For highlight text in colour form.
20. <s> - </s> - For delete Text.
21. Marquee tag - The <marquee> tag is a container tag of HTML is implemented for
creating scrollable text or images within a web page from either left to right or vice versa, or
top to bottom or vice versa.
The different attributes of <marquee> tag are:
1. Width - provides the width or breadth of a marquee. For
example width="10" or width="20%".
2. Height - provides the height or length of a marquee. For
example height="20" or height="30%".
3. Direcion - provides the direction or way in which your marquee will allow you to
scroll. The value of this attribute can be: left, right, up or down.
4. Scrolldelay - provides a feature whose value will be used for delaying among
each jump.
5. Scrollamount - provides value for speeding the marquee feature.
6. Behavior - provides the scrolling type in a marquee. That scrolling can be like
sliding, scrolling or alternate.
7. Loop - provides how many times the marquee will loop.
8. Vspace - provides a vertical space and its value can be
like: vspace="20" or vspace="30%".
9. Hspace - provides a horizontal space and its value can be
like: hspace="20" or hspace="30%".
10. Bgcolor - provides a background color where the value will be either the name
of the color or the hexadecimal color-code.

22. Comment Tag - HTML comment tags help the developer to insert comments in
between <!-- Text --> tags.

Eg:- <!-- Here writing a comment. The comment will not display in the
web browser. -->

23. Order list - HTML <ol> tag is abbreviated as an Ordered List, which is used for
numbering the lists on a web page. Each list item starts with the <li> tag.

Attributes –

 <ol type = "1"> - Numbers, which is the default type of Ordered List.
 <ol type = "i"> - Numerals (roman) with lower caps.
 <ol type = "I"> - Numerals (roman) with upper caps.
 <ol type = "a"> - Numbering will be done in the form of Lower-case
Letters.
 <ol type = "A"> - Numbering will be done in the form of upper-case
Letters.

Eg:- <ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

24. Un-order list - HTML UL tag is abbreviated as an Unordered List, used to list your
items via bullets and circles. Each list item starts with the <li> tag.

Attributes –

 <ul type = "square"> - Bulleting using a filled square.


 <ul type = "disc"> - Bulleting using a filled circle.
 <ul type = "circle"> - Bulleting using an empty circle.

Eg:- <ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

25. <dl>, <dt>, <dd> Tag - The <dl> tag defines the description list,
the <dt> tag defines the term (name), and the <dd> tag describes each term:

Eg:- <dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

26. Dropdown list - The <select> element is used to create a drop-down


list. The <option> tags inside the <select> element define the available
options in the drop-down list.

Attributes –
 Autofocus - Specifies that the drop-down list should automatically
get focus when the page loads.
 Disabled - Specifies that a drop-down list should be disabled.
 Form_id - Defines which form the drop-down list belongs to.
 Multiple - Specifies that multiple options can be selected at once.
 Name - Defines a name for the drop-down list.
 Required - Specifies that the user is required to select a value
before submitting the form.
 Size - Defines the number of visible options in a drop-down list.
<optgroup> - </optgroup> - The <optgroup> tag is used to
group related options in a <select> element. If you have a long list
of options, groups of related options are easier to handle for a user.

Use <select> with <optgroup> tags:


<label for="cars">Choose a car:</label>
<select name="cars" id="cars">
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>

27. Detail tag - The <details> tag specifies additional details that the
user can open and close on demand. The <summary> tag is used in
conjunction with <details> to specify a visible heading for the details.

Eg:- <details>
<summary>Epcot Center</summary>
<p>Epcot is a theme park at Walt Disney World
Resort featuring exciting attractions, international pavilions, award-
winning fireworks and seasonal special events.</p>

</details>

28. Abbreviation tag - The <abbr> tag defines an abbreviation or an acronym,


like "HTML", "CSS", "Mr.", "Dr.", "ASAP", "ATM". Use the global title attribute
to show the description for the abbreviation/acronym when you mouse over
the element. <abbr> can also be used with <dfn> to define an abbreviation.

Eg:-<p><dfn><abbr title="Cascading Style Sheets">CSS</abbr>


</dfn> is a language that describes the style of an HTML document.</p>

29. Acronym tag - The <acronym> tag was used in HTML 4 to define an
acronym.
Eg:- The <acronym title="World Health
Organization">WHO</acronym> was founded in 1948.

30. Base Tag - The <base> tag specifies the base URL and/or target for all
relative URLs in a document. The <base> tag must have either an href or a
target attribute present, or both. There can only be one single <base> element
in a document, and it must be inside the <head> element.

31. Bdo tag - BDO stands for Bi-Directional Override. The <bdo> tag is
used to override the current text direction.

Attributes –

 Dir - Required. Specifies the text direction of the text inside the
<bdo> element.
 Value – ltr & rtl.

Eg:- <bdo dir="rtl">


This text will go right-to-left.
</bdo>

32. Blockquote tag - The <blockquote> tag specifies a section that is quoted
from another source. Browsers usually indent <blockquote> elements (look
at example below to see how to remove the indentation).

Attributes –

 Cite - Specifies the source of the quotation.

Eg:-
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature. The world's
leading conservation organization, WWF works in 100 countries and is
supported by 1.2 million members in the United States and close to 5
million globally.
</blockquote>

33. Cite tag - The <cite> tag defines the title of a creative work (e.g. a
book, a poem, a song, a movie, a painting, a sculpture, etc.).

Note: A person's name is not the title of a work.

The text in the <cite> element usually renders in italic.

Eg:- <p><cite>The Scream</cite> by Edward Munch. Painted in


1893.</p>
34. Code tag - The <code> tag is used to define a piece of computer
code. The content inside is displayed in the browser's default monospace
font.

Eg:- <p>The CSS <code>background-color</code> property defines the


background color of an element.</p>.

35. Data tag - The <data> tag is used to add a machine-readable


translation of a given content.

This element provides both a machine-readable value for data processors,


and a human-readable value for rendering in a browser.

Eg:- <ul>
<li><data value="21053">Cherry Tomato</data></li>
<li><data value="21054">Beef Tomato</data></li>
<li><data value="21055">Snack Tomato</data></li>
</ul>

36. Datalist tag - The <datalist> tag specifies a list of pre-defined


options for an <input> element.

The <datalist> tag is used to provide an "autocomplete" feature for <input>


elements. Users will see a drop-down list of pre-defined options as they input
data.

The <datalist> element's id attribute must be equal to the <input>


element's list attribute (this binds them together).

Eg:- <input list="browsers" name="browser" id="browser">


<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>

37. Dialog tag - The <dialog> tag defines a dialog box or subwindow.

The <dialog> element makes it easy to create popup dialogs and modals on
a web page.

Attributes –

 Open - Specifies that the dialog element is active and that the
user can interact with it.

Eg:- <dialog open>This is an open dialog window</dialog>.


38. Division tag - The <div> tag defines a division or a section in an
HTML document.

The <div> tag is used as a container for HTML elements - which is then styled
with CSS or manipulated with JavaScript.

The <div> tag is easily styled by using the class or id attribute.

Any sort of content can be put inside the <div> tag!

Note: By default, browsers always place a line break before and after
the <div> element.

Eg:-
<head>
<style>
.myDiv {
border: 5px outset red;
background-color: lightblue;
text-align: center;
}
</style>
</head>
<body>
<div class="myDiv">
<h2>This is a heading in a div element</h2>
<p>This is some text in a div element.</p>
</div>
</body>
</html>

39. Embed tag - The <embed> tag is new in HTML5.The


<embed> tag defines a container for an external application or interactive
content.

Attributes –

 Src – Specifies the address of the external file to embed.


 Type – Specifies the media type of the embedded content.
 Width – Specifies the width of the embedded content.
 Height - Specifies the height of the embedded content.

Eg:-
<embed type="image/jpg" src="pic_trulli.jpg" width="300" height="200">

40. Figure & figcaption tag - The <figure> tag specifies self-contained
content, like illustrations, diagrams, photos, code listings, etc.
While the content of the <figure> element is related to the main flow, its
position is independent of the main flow, and if removed it should not affect
the flow of the document.

The <figcaption> tag defines a caption for a <figure> element.

The <figcaption> element can be placed as the first or last child of the
<figure> element.

Eg:- <figure>
<img src="pic_trulli.jpg" alt="Trulli" style="width:100%">
<figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
</figure>

41. Header tag - The <header> element represents a container for


introductory content or a set of navigational links.
A <header> element typically contains:

 one or more heading elements (<h1> - <h6>).


 logo or icon.
 authorship information.

Eg:- <header>
<h1>A heading here</h1>
<p>Posted by John Doe</p>
<p>Some additional information here</p>
</header>

42. Footer tag - The <footer> tag defines a footer for a document or
section.
A <footer> element typically contains:

 authorship information
 copyright information
 contact information
 sitemap
 back to top links
 related documents

You can have several <footer> elements in one document.

Eg:-
<footer>
<p>Author: Hege Refsnes</p>
<p><a href="mailto:hege@example.com">hege@example.com</a></p>
</footer>

43. Main tag - The <main> tag specifies the main content of a document.
The content inside the <main> element should be unique to the document. It
should not contain any content that is repeated across documents such as
sidebars, navigation links, copyright information, site logos, and search
forms.

Note: There must not be more than one <main> element in a document.
The <main> element must NOT be a descendant of an <article>, <aside>,
<footer>, <header>, or <nav> element.

Eg:-
<main>
<h1>Most Popular Browsers</h1>
<p>Chrome, Firefox, and Edge are the most used browsers today.</p>

<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google, released in
2008. Chrome is the world's most popular web browser today!</p>
</article>

<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed by
Mozilla. Firefox has been the second most popular web browser since
January, 2018.</p>
</article>

<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released
in 2015. Microsoft Edge replaced Internet Explorer.</p>
</article>
</main>

44. Meter tag & Progress tag - The <meter> tag defines a scalar
measurement within a known range, or a fractional value. This is also known
as a gauge.
Examples: Disk usage, the relevance of a query result, etc.

Note: The <meter> tag should not be used to indicate progress (as in a
progress bar). For progress bars, use the <progress> tag.

The <progress> tag represents the completion progress of a task.


Use the <progress> tag in conjunction with JavaScript to display the progress
of a task.

Note: The <progress> tag is not suitable for representing a gauge (e.g. disk
space usage or relevance of a query result). To represent a gauge, use
the <meter> tag instead.

Eg:-
<label for="disk_c">Disk usage C:</label>
<meter id="disk_c" value="2" min="0" max="10">2 out of 10</meter><br>
<label for="disk_d">Disk usage D:</label>
<meter id="disk_d" value="0.6">60%</meter>

<label for="file">Downloading progress:</label>


<progress id="file" value="32" max="100"> 32% </progress>

45. Navigation tag - The <nav> tag defines a set of navigation links.
Notice that NOT all links of a document should be inside a <nav> element.
The <nav> element is intended only for major blocks of navigation links.
Browsers, such as screen readers for disabled users, can use this element to
determine whether to omit the initial rendering of this content.

Eg:- <nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/python/">Python</a>
</nav>

46. Noscript tag - The <noscript> tag defines an alternate content to be


displayed to users that have disabled scripts in their browser or have a
browser that doesn't support script.

The <noscript> element can be used in both <head> and <body>. When
used inside <head>, the <noscript> element could only contain <link>,
<style>, and <meta> elements.

Eg:- <script>
document.write("Hello World!")
</script>
<noscript>Your browser does not support JavaScript!</noscript>

47. Script tag - The <script> tag is used to embed a client-side script
(JavaScript).

The <script> element either contains scripting statements, or it points to an


external script file through the src attribute.

Common uses for JavaScript are image manipulation, form validation, and
dynamic changes of content.

Attributes –

 Type - Specifies the media type of the script.

 Src - Specifies the URL of an external script file.


 Defer - Specifies that the script is downloaded in parallel to
parsing the page, and executed after the page has finished
parsing (only for external scripts).

 Async - Specifies that the script is downloaded in parallel to


parsing the page, and executed as soon as it is available
(before parsing completes) (only for external scripts).

Eg:- <script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>

48. Object tag - The <object> tag defines a container for an external
resource.

The external resource can be a web page, a picture, a media player, or a


plug-in application.

Attributes –

 Data - Specifies the URL of the resource to be used by the object.

 Width - Specifies the width of the object.

 Type - Specifies the media type of data specified in the data


attribute.

 Height - Specifies the height of the object.

Eg:- <object data="video.mp4" width="400" height="300"></object>

49. Ruby tag - The <ruby> tag specifies a ruby annotation.

A ruby annotation is a small extra text, attached to the main text to indicate
the pronunciation or meaning of the corresponding characters. This kind of
annotation is often used in Japanese publications.

Use <ruby> together with <rt> and <rb>: The <ruby> element consists of one
or more characters that needs an explanation/pronunciation, and an <rt>
element that gives that information, and an optional <rb> element that
defines what to show for browsers that do not support ruby annotations.

Eg:- <ruby>
<rb>HTML</rb>
<rt>Hyper Text Mark Up Language</rt>
</ruby>

50. Section tag - The <section> tag defines a section in a document.


Eg:-
<section>
<h2>WWF History</h2>
<p>The World Wide Fund for Nature (WWF) is an international
organization working on issues regarding the conservation, research and
restoration of the environment, formerly named the World Wildlife Fund.
WWF was founded in 1961.</p>
</section>

<section>
<h2>WWF's Symbol</h2>
<p>The Panda has become the symbol of WWF. The well-known panda logo of
WWF originated from a panda named Chi Chi that was transferred from the
Beijing Zoo to the London Zoo in the same year of the establishment of
WWF.</p>
</section>

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy