0% found this document useful (0 votes)
2 views12 pages

HTML Css Js PHP Notes

This document provides comprehensive notes on HTML, including the syntax for document structure, metadata, and various HTML elements such as headings, paragraphs, links, and images. It also covers styling options using CSS, such as colors, fonts, and layout techniques. Additionally, it explains the use of comments, quotes, and interactive elements like buttons and dialogs.

Uploaded by

duaphoto360
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
0% found this document useful (0 votes)
2 views12 pages

HTML Css Js PHP Notes

This document provides comprehensive notes on HTML, including the syntax for document structure, metadata, and various HTML elements such as headings, paragraphs, links, and images. It also covers styling options using CSS, such as colors, fonts, and layout techniques. Additionally, it explains the use of comments, quotes, and interactive elements like buttons and dialogs.

Uploaded by

duaphoto360
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/ 12

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.

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