HTML Basic

<!
DOCTYPE html>
<html>
<body style="background-color:PowderBlue;">
<h1>Look! Styles and colors</h1>
<p style="font-family:verdana;color:red;">
This text is in Verdana and red</p>
<p style="font-family:times;color:green;">
This text is in Times and green</p>
<p style="font-size:30px;">This text is 30 pixels high</p>
</body>
</html>
Text formatting
<!DOCTYPE html>
<html>
<body>
<p><b>This text is bold</b></p>

<p><strong>This text is strong</strong></p>
<p><big>This text is big</big></p>
<p><em>This text is emphasized</em></p>
<p><i>This text is italic</i></p>
<p><small>This text is small</small></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>
</body>
</html>
preformatted text
<!DOCTYPE html>
<html>
<body>
<pre>
This is
preformatted text.
It preserves both spaces
and line breaks.
</pre>
<p>The pre tag is good for displaying computer code:</p>
<pre>
for i = 1 to 10
print i
next i
</pre>
</body>
</html>
Computer code
<!DOCTYPE html>
<html>
<body>
<code>Computer code</code>
<br />
<kbd>Keyboard input</kbd>
<br />
<tt>Teletype text</tt>
<br />
<samp>Sample text</samp>
<br />
<var>Computer variable</var>
<br />
<p><b>Note:</b> These tags are often used to display computer/programming

code.</p>
</body>
</html>
Insert contact information
<!DOCTYPE html>
<html>
<body>
<address>
Written by W3Schools.com<br />
<a href="mailto:us@example.org">Email us</a><br />
Address: Box 564, Disneyland<br />
Phone: +12 34 56 78
</address>
</body>
</html>
Abbreviations and acronyms
<!DOCTYPE html>
<html>
<body>
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
<p>Can I get this <acronym title="as soon as possible">ASAP</acronym>?</p>
<p>The title attribute is used to show the spelled-out version when holding the mouse pointer over the
acronym or abbreviation.</p>
</body>
</html>
Text direction
<!DOCTYPE html>
<html>
<body>
<p>
If your browser supports bi-directional override (bdo), the next line will be written from the right to the
left (rtl):
</p>
<bdo dir="rtl">
Here is some Hebrew text
</bdo>
</body>
</html>
Long and Short Question
<!DOCTYPE html>
<html>
<body>
A long quotation:
<blockquote>
This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is
a long quotation.
</blockquote>
<p><b>Note:</b> The browser inserts white space before and after a blockquote element. It also inserts
margins.</p>
A short quotation:
<q>This is a short quotation</q>
<p><b>Note:</b> The browser inserts quotation marks around the short quotation.</p>
</body>
</html>
Deleted Text
<!DOCTYPE html>
<html>
<body>
<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
<p>Notice that browsers will strikethrough deleted text and underline inserted text.</p>
</body></html>
Style HTML elements
<!DOCTYPE html>
<html>
</body>
</html>
BackGround color
<!DOCTYPE html>
<html>
</body>
</html>
Style font, color, and size
<!DOCTYPE html>
<html>
<body>
<h1 style="font-family:verdana;">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>
</html>
Style alignment of text
<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center;">Center-aligned heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Set the font,size of text

<!DOCTYPE html>
<html>
<body>
<p style="font-family:verdana;font-size:110%;color:green">
This is a paragraph with some text in it. This is a paragraph with some text in it. This is a paragraph with
some text in it. This is a paragraph with some text in it.
</p>
</body>
</html>
Create link to an image
<!DOCTYPE html>
<html>
<body>
<p>Create a link of an image:

<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" width="32" height="32" />
</a></p>
<p>No border around the image, but still a link:

<a href="default.asp">
<img border="0" src="smiley.gif" alt="HTML tutorial" width="32" height="32" />
</a></p>
</body>
</html>
Open web page in new window
<!DOCTYPE html>
<html>
<body>
<a href="http://www.w3schools.com" target="_blank">Visit W3Schools.com!</a>
<p>If you set the target attribute to "_blank", the link will open in a new browser window/tab.</p>
</body>
</html>
Link in same page
<!DOCTYPE html>
<html>
<body>
<p>
<a href="#C4">See also Chapter 4.</a>
</p>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 2</h2>
<h2>Chapter 3</h2>
<h2><a name="C4">Chapter 4</a></h2>

<h2>Chapter 5</h2>
<h2>Chapter 6</h2>
<h2>Chapter 7</h2>
<h2>Chapter 8</h2>
<h2>Chapter 9</h2>
<h2>Chapter 10</h2>
<h2>Chapter 11</h2>
<h2>Chapter 12</h2>
<h2>Chapter 13</h2>
<h2>Chapter 14</h2>
<h2>Chapter 15</h2>
<h2>Chapter 16</h2>
<h2>Chapter 17</h2>
</body>
</html>
Mail Link
<!DOCTYPE html>
<html>
<body>
<p>
This is an email link:
<a href="mailto:someone@example.com?Subject=Hello%20again">
Send Mail</a>
</p>
<p>
<b>Note:</b> Spaces between words should be replaced by %20 to ensure that the browser will display
the text properly.
</p>
</body>
</html>
Image
<!DOCTYPE html>
<html>
<body>
<p>
An image:
<img src="smiley.gif" alt="Smiley face" width="32" height="32" />
</p>
<p>
A moving image:
<img src="hackanm.gif" alt="Computer man" width="48" height="48" />
</p>
<p>
Note that the syntax of inserting a moving image is no different from a non-moving image.
</p>
</body>
</html>
Insert images from another folder or another server

<!DOCTYPE html>
<html>
<body>
<p>An image from another folder:</p>
<img src="/images/chrome.gif" alt="Google Chrome" width="33" height="32" />
<p>An image from W3Schools:</p>

<img src="http://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com"
width="104" height="142" />
</body>
</html>
Aligning images
Let the image float to the left/right of a paragraph

Make a hyperlink of an image
Create an image-map, with clickable regions
<!DOCTYPE html>
<html>
<body>
<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 Basic

Caricato da

Informazioni sul documento

Descrizione originale:

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

HTML Basic

Caricato da

Copyright:

Formati disponibili

<!

<h1>Look! Styles and colors</h1>

<p style="font-size:30px;">This text is 30 pixels high</p>

<p><b>This text is bold</b></p>

<p>The pre tag is good for displaying computer code:</p>

<p><b>Note:</b> These tags are often used to display computer/programming

<p>Can I get this <acronym title="as soon as possible">ASAP</acronym>?</p>

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

<h1>Look! Styles and colors</h1>

<p style="font-size:30px;">This text is 30 pixels high</p>

<h1>Look! Styles and colors</h1>

<p style="font-size:30px;">This text is 30 pixels high</p>

Set the font,size of text

<p>Create a link of an image:

<p>No border around the image, but still a link:

<a href="http://www.w3schools.com" target="_blank">Visit W3Schools.com!</a>

<h2><a name="C4">Chapter 4</a></h2>

Insert images from another folder or another server

<p>An image from W3Schools:</p>

Let the image float to the left/right of a paragraph

<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" />

Potrebbero piacerti anche