Scribd
Upload
8 views19 pages

DOCTYPE html

Uploaded by

komputeramanah5
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
8 views19 pages

DOCTYPE html

Uploaded by

komputeramanah5
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/ 19

<!

DOCTYPE html> This is heading 4


<html>
<body> This is heading 5

This is heading 6
<h1>My First Heading</h1>

<p>My first paragraph.</p> <!DOCTYPE html>


<html>
</body> <body>
</html>
<p>This is a paragraph.</p>
My First Heading <p>This is another paragraph.</p>
My first paragraph.
</body>
<!DOCTYPE html> </html>
<html>
<body> This is a paragraph.
This is another paragraph.
<h1>This is heading 1</h1>
<h2>This is heading 2</h2> <!DOCTYPE html>
<h3>This is heading 3</h3> <html>
<h4>This is heading 4</h4> <body>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6> <h2>HTML Links</h2>
<p>HTML links are defined with the a
</body> tag:</p>
</html>
<a
href="https://www.w3schools.com">This
is a link</a>
This is heading 1
</body>
This is heading 2 </html>

HTML Links
This is heading 3
HTML links are defined with the a tag:
This is a link
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<body> <body>

<h2>HTML Images</h2> <h2>An Unordered HTML List</h2>


<p>HTML images are defined with the
img tag:</p> <ul>
<li>Coffee</li>
<img src="w3schools.jpg" <li>Tea</li>
alt="W3Schools.com" width="104" <li>Milk</li>
height="142"> </ul>

</body> <h2>An Ordered HTML List</h2>


</html>
HTML Images <ol>
HTML images are defined with the img <li>Coffee</li>
tag: <li>Tea</li>
<li>Milk</li>
<!DOCTYPE html> </ol>
<html>
<body> </body>
</html>
<h2>HTML Buttons</h2>
<p>HTML buttons are defined with the An Unordered HTML List
button tag:</p>  Coffee
 Tea
<button>Click me</button>  Milk
An Ordered HTML List
</body> 1. Coffee
</html> 2. Tea
3. Milk
HTML Buttons
HTML buttons are defined with the
button tag:
Click me
<!DOCTYPE html> The href Attribute
<html> HTML links are defined with the a tag.
<body> The link address is specified in the href
attribute:
<h2 title="I'm a header">The title Visit W3Schools
Attribute</h2>
<!DOCTYPE html>
<p title="I'm a tooltip">Mouse over this <html>
paragraph, to display the title attribute as <body>
a tooltip.</p>
<h2>Width and Height Attributes</h2>
</body>
</html> <p>The width and height attributes of the
img tag, defines the width and height of
The title Attribute the image:</p>
Mouse over this paragraph, to display the
title attribute as a toolti <img src="img_girl.jpg" width="500"
height="600">
<!DOCTYPE html>
<html> </body>
<body> </html>

<h2>The href Attribute</h2> Width and Height Attributes


The width and height attributes of the
<p>HTML links are defined with the a tag. img tag, defines the width and height of
The link address is specified in the href the image:
attribute:</p>

<a
href="https://www.w3schools.com">Visit
W3Schools</a>

</body>
</html>
<!DOCTYPE html> You cannot omit quotes around an
<html> attribute value if the value contains
<body> spaces.
If you move the mouse over the
<a paragraph above, your browser will only
href=https://www.w3schools.com>This is display the first word from the title.
a link</a>
<!DOCTYPE html>
</body> <html>
</html> <body>

This is a link <h1>Heading 1</h1>


<h2>Heading 2</h2>
<!DOCTYPE html> <h3>Heading 3</h3>
<html> <h4>Heading 4</h4>
<body> <h5>Heading 5</h5>
<h6>Heading 6</h6>
<h1>About W3Schools</h1>
</body>
<p title=About W3Schools> </html>
You cannot omit quotes around an
attribute value
if the value contains spaces. Heading 1
</p>
Heading 2
<p><b>
If you move the mouse over the Heading 3
paragraph above,
your browser will only display the first
Heading 4
word from the title.
</b></p> Heading 5

</body> Heading 6

</html>

About W3Schools
<!DOCTYPE html> <p>Meta data is data about the HTML
<html> document.</p>
<body>
</body>
<h1>This is heading 1</h1> </html>
<p>This is some text.</p>
<hr> The HTML head element contains meta
data.
<h2>This is heading 2</h2> Meta data is data about the HTML
<p>This is some other text.</p> document.
<hr>
<!DOCTYPE html>
<h2>This is heading 2</h2> <html>
<p>This is some other text.</p> <body>

</body> <p>This is a paragraph.</p>


</html> <p>This is a paragraph.</p>
<p>This is a paragraph.</p>
This is heading 1
This is some text. </body>
</html>
This is heading 2
This is some other text. This is a paragraph.
This is a paragraph.
This is heading 2 This is a paragraph.
This is some other text.
<!DOCTYPE html>
<!DOCTYPE html> <html>
<html> <body>
<head>
<title>My First HTML</title> <p>
<meta charset="UTF-8"> This paragraph
</head> contains a lot of lines
<body> in the source code,
but the browser
<p>The HTML head element contains ignores it.
meta data.</p> </p>
<p>This is<br>a paragraph<br>with line
<p> breaks.</p>
This paragraph
contains a lot of spaces </body>
in the source code, </html>
but the browser This is
ignores it. a paragraph
</p> with line breaks.

<p> <!DOCTYPE html>


The number of lines in a paragraph <html>
depends on the size of the browser <body>
window. If you resize the browser
window, the number of lines in this <p>In HTML, spaces and new lines are
paragraph will change. ignored:</p>
</p>
<p>
</body>
</html> My Bonnie lies over the ocean.

This paragraph contains a lot of lines in My Bonnie lies over the sea.
the source code, but the browser ignores
it. My Bonnie lies over the ocean.
This paragraph contains a lot of spaces in
the source code, but the browser ignores Oh, bring back my Bonnie to me.
it.
The number of lines in a paragraph </p>
depends on the size of the browser
window. If you resize the browser </body>
window, the number of lines in this </html>
paragraph will change. In HTML, spaces and new lines are
ignored:
<!DOCTYPE html> My Bonnie lies over the ocean. My
<html> Bonnie lies over the sea. My Bonnie lies
<body> over the ocean. Oh, bring back my Bonnie
to me.
<p style="color:blue;">I am blue</p>
<p style="font-size:50px;">I am big</p>
<!DOCTYPE html>
<html> </body>
<body> </html>

<p>The pre tag preserves both spaces I am normal


and line breaks:</p>
I am red
<pre>
My Bonnie lies over the ocean. I am blue
My Bonnie lies over the sea.

My Bonnie lies over the ocean. I am big


Oh, bring back my Bonnie to me. <!DOCTYPE html>
</pre> <html>
<body style="background-
</body> color:powderblue;">
</html>
The pre tag preserves both spaces and <h1>This is a heading</h1>
line breaks: <p>This is a paragraph.</p>
My Bonnie lies over the ocean.
</body>
My Bonnie lies over the sea. </html>

My Bonnie lies over the ocean. This is a heading


This is a paragraph. Beground biru
Oh, bring back my Bonnie to me.
<!DOCTYPE html>
<!DOCTYPE html> <html>
<html> <body>
<body>
<h1 style="color:blue;">This is a
<p>I am normal</p> heading</h1>
<p style="color:red;">I am red</p>
<p style="color:red;">This is a <p style="font-size:160%;">This is a
paragraph.</p> paragraph.</p>

</body> </body>
</html> </html>

This is a heading This is a


This is a paragraph.

<!DOCTYPE html>
heading
<html>
<body> This is a paragraph
<h1 style="font-family:verdana;">This is a <!DOCTYPE html>
heading</h1> <html>
<p style="font-family:courier;">This is a <body>
paragraph.</p>
<h1 style="text-align:center;">Centered
</body> Heading</h1>
</html> <p style="text-align:center;">Centered
paragraph.</p>

This is a </body>
heading </html>

This is a paragraph. Centered Heading


<!DOCTYPE html>
Centered paragraph.
<html>
<body>

<h1 style="font-size:300%;">This is a
heading</h1>
<!DOCTYPE html> <p><i>This text is italic.</i></p>
<html>
<body> </body>
</html>
<p>This text is normal.</p>
This text is normal.
<p><b>This text is bold.</b></p>
This text is italic.
</body>
</html> <!DOCTYPE html>
<html>
This text is normal. <body>

This text is bold. <p>This text is normal.</p>

<!DOCTYPE html> <p><em>This text is


<html> emphasized.</em></p>
<body>
</body>
<p>This text is normal.</p> </html>

<p><strong>This text is This text is normal.


important!</strong></p>
This text is emphasized.
</body>
</html> <!DOCTYPE html>
<html>
This text is normal. <body>

This text is important! <p>This is some normal text.</p>


<p><small>This is some smaller
<!DOCTYPE html> text.</small></p>
<html>
<body> </body>
</html>
<p>This text is normal.</p>
This is some normal text.
This is some smaller text. <body>

<!DOCTYPE html> <p>Browsers usually insert quotation


<html> marks around the q element.</p>
<body>
<p>WWF's goal is to: <q>Build a future
<p>Do not forget to buy where people live in harmony with
<mark>milk</mark> today.</p> nature.</q></p>

</body> </body>
</html> </html>
Do not forget to buy milk today.

<!DOCTYPE html> Browsers usually insert quotation


<html> marks around the q element.
<body>
WWF's goal is to: “Build a future
<p>My favorite color is <del>blue</del> where people live in harmony
red.</p> with nature.”
</body> <!DOCTYPE html>
</html> <html>
My favorite color is blue red. <body>

<!DOCTYPE html> <p>Here is a quote from WWF's


<html> website:</p>
<body>
<blockquote
<p>This is <sub>subscripted</sub> cite="http://www.worldwildlife.org/who/i
text.</p> ndex.html">
For 60 years, WWF has worked to help
</body> people and nature thrive. As the world's
</html> leading conservation organization, WWF
This is subscripted text. works in nearly 100 countries. At every
level, we collaborate with people around
<!DOCTYPE html> the world to develop and deliver
<html>
innovative solutions that protect USA
communities, wildlife, and the places in </address>
which they live.
</blockquote> </body>
</html>
</body>
</html>
The HTML address element
defines contact information
Here is a quote from WWF's (author/owner) of a document or
website: article.

For 60 years, WWF has worked to Written by John Doe.


help people and nature thrive. As Visit us at:
the world's leading conservation Example.com
organization, WWF works in Box 564, Disneyland
nearly 100 countries. At every USA
level, we collaborate with people
around the world to develop and <!DOCTYPE html>
deliver innovative solutions that <html>
protect communities, wildlife, and <body>
the places in which they live.
<p>The <abbr title="World Health
Organization">WHO</abbr> was founded
<!DOCTYPE html>
in 1948.</p>
<html>
<body>
<p>Marking up abbreviations can give
useful information to browsers,
<p>The HTML address element defines
translation systems and search-
contact information (author/owner) of a
engines.</p>
document or article.</p>
</body>
<address>
</html>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
The WHO was founded in 1948.
Marking up abbreviations can
give useful information to
browsers, translation systems and
search-engines.

<!DOCTYPE html>
<html>
<body>

<p>The HTML cite element defines the


title of a work.</p>
<p>Browsers usually display cite elements
in italic.</p>

<img src="img_the_scream.jpg"
width="220" height="277" alt="The The Scream by Edvard Munch. Pa
Scream">
<p><cite>The Scream</cite> by Edvard <!DOCTYPE html>
Munch. Painted in 1893.</p> <html>
<body>
</body>
</html> <p>If your browser supports bi-
directional override (bdo), the next line
will be written from right to left (rtl):</p>
The HTML cite element defines
the title of a work. <bdo dir="rtl">This line will be written
from right to left</bdo>
Browsers usually display cite
elements in italic. </body>
</html>

If your browser supports bi-


directional override (bdo), the
next line will be written from right
to left (rtl):
This line will be written from <p>This is a paragraph.</p>
right to left <!--
<p>Look at this cool image:</p>
<!DOCTYPE html> <img border="0" src="pic_trulli.jpg"
<html> alt="Trulli">
<body> -->
<p>This is a paragraph too.</p>
<!-- This is a comment -->
<p>This is a paragraph.</p> </body>
<!-- Comments are not displayed in the </html>
browser -->
This is a paragraph.
</body> This is a paragraph too.
</html>
This is a paragraph. <!DOCTYPE html>
<html>
<body>
<!DOCTYPE html>
<html> <h1 style="color:blue;">A Blue
<body> Heading</h1>

<!--[if IE 5]>This is IE 5<br><![endif]--> <p style="color:red;">A red


<!--[if IE 6]>This is IE 6<br><![endif]--> paragraph.</p>
<!--[if IE 7]>This is IE 7<br><![endif]-->
<!--[if IE 8]>This is IE 8<br><![endif]--> </body>
<!--[if IE 9]>This is IE 9<br><![endif]--> </html>

</body>
</html>
A Blue Heading
Isi kosong
A red paragraph.
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<html>
<body>
<head>
<style>
body {background-color: powderblue;} color: blue;
h1 {color: blue;} font-family: verdana;
p {color: red;} font-size: 300%;
</style>
</head> }
<body> p {
color: red;
<h1>This is a heading</h1> font-family: courier;
<p>This is a paragraph.</p> font-size: 160%;
}
</body> </style>
</html> </head>
<body>

This is a heading <h1>This is a heading</h1>


<p>This is a paragraph.</p>
This is a paragraph.
</body>
<!DOCTYPE html> </html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body> This is a
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
heading
</body> This is a
</html>
Sama isinya paragraph.
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<style> <style>
h1 { #p01 {
color: blue; </html>
}
</style> This is a paragraph.
</head>
<body> This is a paragraph.

<p>This is a paragraph.</p> I am different.


<p>This is a paragraph.</p>
<p id="p01">I am different.</p> This is a paragraph.
</body> I am different too.
</html>
<!DOCTYPE html>
This is a paragraph. <html>
<head>
This is a paragraph. <style>
p{
I am different. border: 2px solid powderblue;
}
<!DOCTYPE html> </style>
<html> </head>
<head> <body>
<style>
p.error { <h1>This is a heading</h1>
color: red;
} <p>This is a paragraph.</p>
</style> <p>This is a paragraph.</p>
</head> <p>This is a paragraph.</p>
<body>
</body>
<p>This is a paragraph.</p> </html>
<p>This is a paragraph.</p>
<p class="error">I am different.</p>
<p>This is a paragraph.</p>
<p class="error">I am different too.</p> This is a heading
</body>
This is a paragraph.

This is a paragraph. This is a paragraph.

This is a paragraph. This is a paragraph.

<!DOCTYPE html>
<html> <!DOCTYPE html>
<head> <html>
<style> <head>
p{ <style>
border: 2px solid powderblue; p{
padding: 30px; border: 2px solid powderblue;
} margin: 50px;
</style> }
</head> </style>
<body> </head>
<body>
<h1>This is a heading</h1>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p> <p>This is a paragraph.</p>
<p>This is a paragraph.</p> <p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html> </body>
</html>

This is a heading
This is a heading
This is a paragraph.
This is a paragraph.
This is a paragraph. </div>
</div>

</body>
This is a paragraph. </html>

<!DOCTYPE html>
<html>
CSS = Styles and
<body> Colors
<div style="position:relative;"> M a n i p u l a t e
<div T e x t
style="opacity:0.5;position:absolute;left:5 C o l o r s , B o x e s
0px;top:-
30px;width:300px;height:150px;backgrou <!DOCTYPE html>
nd-color:#40B3DF"></div> <html>
<div <body>
style="opacity:0.3;position:absolute;left:1
20px;top:20px;width:100px;height:170px; <h1>HTML Links</h1>
background-color:#73AD21"></div>
<div style="margin- <p><a
top:30px;width:360px;height:130px;paddi href="https://www.w3schools.com/">Visi
ng:20px;border-radius:10px;border:10px t W3Schools.com!</a></p>
solid #EE872A;font-size:120%;">
<h1>CSS = Styles and Colors</h1> </body>
<div style="letter-spacing:12px;font- </html>
size:15px;position:relative;left:25px;top:2
5px;">Manipulate Text</div> HTML Links
<div style="color:#40B3DF;letter- Visit W3Schools.com!
spacing:12px;font-
size:15px;position:relative;left:25px;top:3 <!DOCTYPE html>
0px;">Colors, <html>
<span style="background- <body>
color:#B4009E;color:#ffffff;"> Boxes</spa
n></div> <h2>Absolute URLs</h2>
<p><a href="https://www.w3.org/" a:visited {
target="_blank">W3C</a></p> color: pink;
<p><a href="https://www.google.com/" background-color: transparent;
target="_blank">Google</a></p> text-decoration: none;
}
<h2>Relative URLs</h2> a:hover {
<p><a href="html_images.asp">HTML color: red;
Images</a></p> background-color: transparent;
<p><a href="/css/default.asp">CSS text-decoration: underline;
Tutorial</a></p> }
a:active {
</body> color: yellow;
</html> background-color: transparent;
text-decoration: underline;
}
</style>
Absolute URLs </head>
<body>
W3C
<h2>Link Colors</h2>
Google
<p>You can change the default colors of
Relative URLs links</p>

HTML Images <a href="html_images.asp"


target="_blank">HTML Images</a>
CSS Tutorial
</body>
<!DOCTYPE html> </html>
<html>
<head>
<style>
Link Colors
a:link {
color: green;
You can change the default colors
background-color: transparent; of links
text-decoration: none;
} HTML Images
If target="_blank", the link will
HTML Examples (w3schools.com) open in a new browser window or
tab.
<!DOCTYPE html>
<html> <!DOCTYPE html>
<body> <html>
<body>
<a href="html_images.asp" style="text-
decoration:none">HTML Images</a> <h2>Image as a Link</h2>

</body> <p>The image below is a link. Try to click


</html> on it.</p>
HTML Images
<a href="default.asp"><img
<!DOCTYPE html> src="smiley.gif" alt="HTML tutorial"
<html> style="width:42px;height:42px;"></a>
<body>
</body>
<h2>The target Attribute</h2> </html>

<a href="https://www.w3schools.com/"
target="_blank">Visit W3Schools!</a> Image as a Link
<p>If target="_blank", the link will open
The image below is a link. Try to
in a new browser window or tab.</p>
click on it.
</body>
</html>

The target Attribute


Visit W3Schools!

You might also like