HTML Notes
Documents Type Syntax <!DOCTYPE html>
Meta <!DOCTYPE html>
<html>
Describe metadata <head>
within an HTML <meta charset="UTF-8">
document: <meta name="description" content="Free Web
tutorials">
<meta name="keywords"
content="HTML,CSS,XML,JavaScript">
<meta name="author" content="John Doe">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
</head><body>
<p>All meta information goes in the head
section...</p>
</body></html>
Define keywords for search engines:
<meta name="keywords" content="HTML, CSS,
JavaScript">
Define a description of your web page:
<meta name="description" content="Free Web tutorials
for HTML and CSS">
Define the author of a page:
<meta name="author" content="John Doe">
Refresh document every 30 seconds:
<meta http-equiv="refresh" content="30">
Setting the viewport to make your website look good
on all devices:
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
Language <html lang="en">
<html lang="en-US">
Comments <!-- Write your comments here -->
<!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- Remember to add more information here -->
Head <Head> ----------- </Head>
Title <Title> ----------- </Title>
Body <Body> ----------- </Body>
Underline <u>---</u>
Heading <h1> to <h6> ------- </h1> to </h6>
<h1 style="font-size:60px;">Heading 1</h1>
Break Row <br> ------- </br>
Paragraph <p> ------- </p>
<p title=My-Web of W3Schools> If you move the mouse over the paragraph
above, your browser will only display the first word from the title written
inside <p> .
<p title="Description of W3Schools"> when you add Quotation all the text inside
quotation will be displayed
Under line <u> ------- </u>
These all elements presents <i> ------- </i> <var> ---- </var <em> ------- </em>
Italic impact cite> The Scream </cite> <dfn> --- </dfn>
<dfn title="HyperText Markup Language">
<address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
Bold <b> ------- </b>
<strong> This text is important! </strong>
Colors <!DOCTYPE html><html><body>
<h1 style="background-color:Tomato;">Tomato</h1>
<h1 style="background-color:Orange;">Orange</h1>
<h1 style="background-color:DodgerBlue;">DodgerBlue</h1>
<h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1>
<h1 style="background-color:Gray;">Gray</h1>
<h1 style="background-color:SlateBlue;">SlateBlue</h1>
<h1 style="background-color:Violet;">Violet</h1>
<h1 style="background-color:LightGray;">LightGray</h1>
</body> </html>
Exp. 2 Backgrond Color
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat. </p>
Exp.3 Text Color
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>
Exp.4 Border Color
<h1 style="border:2px solid Tomato;">Hello
World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello
World</h1>
<h1 style="border:2px solid Violet;">Hello
World</h1>
BDO stands for Bi- <bdo dir="rtl">This line will be written from right to left</bdo>
Directional Override.
<bdo> tag is used to
override the current
text direction
Subscript <sub> subscript</sub>
This is subscript
superscript <sup>superscript</sup></p>
This is superscript
smaller text: <small>This is some smaller text.</small>
<small -- </small <p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy text (Windows).</p>
<kbd> -- </kbd>
<code> -- </code> The CSS <code>background-color</code> property defines the background color
<samp> -- </samp> of an element.
<samp>File not </samp>found.<br>Press F1 to continue>
Abbreviation <abbr title="HyperText Markup Language">HTML</abbr></dfn> is the standard
markup language for creating web pages.</p>
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in
1948.</p
The <p>My favorite color is <del>blue</del>
HTML <del> element My favorite color is blue red.
defines text that has
been deleted from a
document. Browsers
will usually strike a
line through deleted
text:
A text with a deleted <p>My favorite color is <del>blue</del> <ins>red</ins>!
part, and a new,
inserted part:
The <mark> tag <mark> milk </mark
defines text that CSS
should be marked or mark {
highlighted. background-color: green;
color: orange;
}
The <pre>
HTML <pre> element My Bonnie lies over the ocean.
defines preformatted
text. My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</pre>
Header Row <hr> this element show a page line
<hr style="width:50%;text-align:left;margin-left:0">
<hr style="height:2px;border-
width:0;color:gray;background-color:gray">
<hr style="height:30px">
<hr style="width:50%">
<dialog open>This is an open dialog window</dialog>
The <dialog> tag
defines a dialog box
or subwindow.
The <dialog> eleme
nt makes it easy to
create popup dialogs
and modals on a web
page
<!DOCTYPE html>
Style <html>
<body>
<p>I am normal</p>
<p style="color:red;">I am red</p>
<p style="color:blue;">I am blue</p>
<p style="font-size:50px;">I am big</p>
</body>
</html>
<p>Here is a quote from WWF's website:</p>
<blockquote> --
</blockquote> <blockquote
cite="http://www.worldwildlife.org/who/index.html">
element defines a For 60 years, WWF has worked to help people and
section that is quoted nature thrive. As the world's leading conservation
from another source. organization, WWF works in nearly 100 countries. At
every level, we collaborate with people around the
world to develop and deliver innovative solutions
that protect communities, wildlife, and the places
in which they live.
</blockquote>
<p>WWF's goal is to: <q>My Page.</q></p>
quotation marks
around the <q>
element.
“ My Page ”
<h1 style="background-color:powderblue;">This is a
Set background color heading</h1>
for two different
elements:
<p style="background-color:tomato;">This is a
Use paragraph.</p>
the style attribut
e for styling HTML
elements <h1 style="font-size:300%;">This is a heading</h1>
Use background- <p style="font-size:160%;">This is a paragraph.</p>
color for
background color <h1 style="text-align:center;">Centered Heading</h1>
Use color for text <p style="text-align:center;">Centered
colors paragraph.</p>
Use font-family for
text fonts
Use font-size for
text sizes
Use text-align for
text alignment
Link <a href="url">link text</a>
The target attribute <a href="https://www.w3schools.com/" targe
specifies where to t="_blank">Visit W3Schools!</a>
open the linked
document. <a href="default.asp">
<img src="smiley.gif" alt="HTML
The target attribute tutorial" style="width:42px;height:42px;">
can have one of the </a>
following values:
<a href="mailto:someone@example.com">Send email</a>
_self - Default.
Opens the document
in the same Button as a Link
window/tab as it was
clicked To use an HTML button as a link, you have to add some
JavaScript code.
_blank - Opens the
document in a new JavaScript allows you to specify what happens at certain
window or tab events, such as a click of a button:
_parent - Opens the <!DOCTYPE html><html><body>
document in the
parent frame <h2>Button as a Links</h2>
_top - Opens the <p>Click the button to go to the HTML tutorial.</p>
document in the full
body of the window <button
onclick="document.location='default.asp'">HTML
Tutorial</button>
</body></html>
Link Titles
<a href="https://www.w3schools.com/html/" title="Go
to W3Schools HTML section">Visit our HTML
Tutorial</a>
Link Colors
<!DOCTYPE html>
<html>
<head>
<style>
a:link {
color: green;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: pink;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: red;
background-color: transparent;
text-decoration: underline;
}
a:active {
color: yellow;
background-color: transparent;
text-decoration: underline;
}
</style>
</head>
<body>
<h2>Link Colors</h2>
<p>You can change the default colors of links</p>
<a href="html_images.asp" target="_blank">HTML
Images</a>
</body></html>
Link Button
<!DOCTYPE html>
<html>
<head>
<style>
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 15px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: red;
}
</style>
</head>
<body>
<h2>Link Button</h2>
<p>A link styled as a button:</p>
<a href="default.asp" target="_blank">This is a
link</a>
</body>
</html>
<!DOCTYPE html>
Create a <html>
<body>
Bookmark <p><a href="#C4">Jump to Chapter 4</a></p>
When the link is <p><a href="#C10">Jump to Chapter 10</a></p>
clicked, the page will
scroll down or up to <h2>Chapter 1</h2>
the location with the <p>This chapter explains ba bla bla</p>
bookmark.
<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>
Example <h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>
First, use
the id attribute to <h2 id="C4">Chapter 4</h2>
create a bookmark: <p>This chapter explains ba bla bla</p>
<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 9</h2>
<p>This chapter explains ba bla bla</p>
<h2 id="C10">Chapter 10</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 11</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 12</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 13</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 14</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 15</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 16</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 17</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 18</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 19</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 20</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 21</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 22</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 23</h2>
<p>This chapter explains ba bla bla</p>
</body></html>
<img src="pic_trulli.jpg" alt="Italian Trulli">
Image <img src="img_girl.jpg" alt="Girl in a jacket"
style="width:500px;height:600px;">
<img src="img_girl.jpg" alt="Girl in a
jacket" width="500" height="600">
Exp1.
<!DOCTYPE html><html><body>
<h1>The map and area elements</h1>
<p>Click on the computer, the phone, or the cup of
coffee to go to a new page and read more about the
topic:</p>
<img src="workplace.jpg" alt="Workplace"
usemap="#workmap" width="400" height="379">
<map name="workmap">
<area shape="rect" coords="34,44,270,350"
alt="Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250"
alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Cup
of coffee" href="coffee.htm">
</map></body></html>
<!DOCTYPE html>
<html>
<body>
<h1>The map and area elements</h1>
<p>Click on the sun or on one of the planets to
watch it closer:</p>
<img src="planets.gif" width="145" height="126"
alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun"
href="sun.htm">
<area shape="circle" coords="90,58,3"
alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus"
href="venus.htm">
</map></body></html>
<!DOCTYPE html>
Menu <html>
<body>
<h1>The menu element</h1>
<menu>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</menu>
</body>
</html>
<!DOCTYPE html>
The meter <html><body>
element <h1>The meter element</h1>
The meter element is <p>The meter element is used to display a gauge:</p>
used to display a
gauge: <label for="disk_c">Disk usage C:</label>
<meter id="disk_c" value="2" min="0" max="10">2 out
Disk usage C: of 10</meter><br>
Disk usage D: <label for="disk_d">Disk usage D:</label>
<meter id="disk_d" value="0.6">60%</meter>
Note: The meter tag is
not supported in Edge <p><strong>Note:</strong> The meter tag is not
12 (or earlier). supported in Edge 12 (or earlier).</p>
</body></html>
<!DOCTYPE html><html><body>
The nav
<h1>The nav element</h1>
element
<p>The nav element defines a set of navigation
The nav element links:</p>
defines a set of
navigation links: <nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/python/">Python</a>
</nav>
</body></html>
Start from here https://www.w3schools.com/tags/tag_noframes.asp
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/header
https://developer.mozilla.org/en-US/docs/Web/HTML
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro
a Web browser. HTML markup includes special "elements" such
as <head>, <title>, <body>, <header>, <footer>, <article>, <section>, <p>, <div>, <s
pan>, <img>, <aside>, <audio>, <canvas>, <datalist>, <details>, <embed>, <nav>, <
search>, <output>, <progress>, <video>, <ul>, <ol>, <li> and many others.
