Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
46 views

HTML Basic

The document contains examples of various HTML elements for text formatting, inserting images and links, and styling text. Key elements demonstrated include tags for bold, italic, superscript, subscript text, blockquotes, preformatted text, inserting images, creating links within pages and to other pages or emails, and using basic styling for fonts, colors, sizes and alignment.

Uploaded by

anon_116484471
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
46 views

HTML Basic

The document contains examples of various HTML elements for text formatting, inserting images and links, and styling text. Key elements demonstrated include tags for bold, italic, superscript, subscript text, blockquotes, preformatted text, inserting images, creating links within pages and to other pages or emails, and using basic styling for fonts, colors, sizes and alignment.

Uploaded by

anon_116484471
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 8

<!

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 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>
BackGround color
<!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>
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>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>

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


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

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

You might also like