Basic HTML Page
<!DOCTYPE html><html>
<body>
</body>
</html>
HTML Headings
<h1>This is heading 1</h1><h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
HTML Paragraphs
<p>This is a paragraph.</p><p>This is a paragraph.</p>
<p>This is a paragraph.</p>
HTML Links
<a href="http://www.w3schools.com">This is a link</a><p>
<a href="default.asp">HTML Tutorial</a> This is a link to a page on this website.
</p>
<p>
<a href="http://www.w3.org/">W3C</a> This is a link to a website on the World Wide Web.
</p>
<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>
An Image as a Link:
<p>Create a link of an image:
<a href="default.asp"><img src="smiley.gif" alt="HTML tutorial" width="42" height="42"></a></p>
<p><b>Note:</b> For IE 9 and earlier versions, the image-link above will show a border around the image. To remove the border around the image, add style="border:0;" to the img element.</p>
<p>Image-link: Still a link, but with no borders:
<a href="default.asp"><img style="border:0;" src="smiley.gif" alt="HTML tutorial" width="42" height="42"></a></p>
Link to a location on the same page:
<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 id="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>
Break out of a frame:
<p>Locked in a frame?</p>
<a href="http://www.w3schools.com/" target="_top">Click here!</a>
Create a mailto Link:
<p>
This is an email link:
<a href="mailto:someone@example.com?Subject=Hello%20again" target="_top">
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>
Create a mailto Link 2:
<p>
This is another mailto link:
<a href="mailto:someone@example.com?cc=someoneelse@example.com&bcc=andsomeoneelse@example.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!" target="_top">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>
HTML Images
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
Empty HTML Elements/ Line Breaks
<br></br>
HTML Lines
<hr>
HTML Comments
<!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- Comments are not displayed in the browser -->
<!-- Do not display this at the moment
<img border="0" src="/images/pulpit.jpg" alt="Pulpit rock" width="304" height="228">
-->
HTML Formatting: Text Formatting
<p><b>This text is bold</b></p><p><strong>This text is strong</strong></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>
HTML Formatting: Preformatted Text
<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>
HTML Formatting: Computer Output Tag
<code>Computer code</code><br>
<kbd>Keyboard input</kbd>
<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>
HTML Formatting: Address
<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>
HTML Formatting: Abbreviations and Acronyms
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p><p>Can I get this <abbr title="as soon as possible">ASAP</abbr>?</p>
<p>The title attribute is used to show the spelled-out version when holding the mouse pointer over the acronym or abbreviation.</p>
HTML Formatting: Text Direction
<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>
HTML Formatting: Quotations
<h2>The blockquote Element</h2>
<p>The blockquote element specifies a section that is quoted from another source.</p>
<p>Here is a quote from WWF's website:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature. The world’s leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
</blockquote>
<p><b>Note:</b> Browsers usually indent blockquote elements.</p>
<h2>The q Element</h2>
<p>The q element defines a short quotation.</p>
<p>WWF's goal is to:
<q>Build a future where people live in harmony with nature.</q>
We hope they succeed.</p>
<p><b>Note:</b> Browsers insert quotation marks around the q element.</p>
HTML Formatting: Deleted and Inserted Text
<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>
HTML Formatting: Marked/Highlighted Text
<p>Do not forget to buy <mark>milk</mark> today.</p>
HTML <head> and <title> Tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>
HTML <base> Tag
<!DOCTYPE html>
<html>
<head>
<base href="http://www.w3schools.com/images/" target="_blank">
</head>
<body>
<p><img src="stickman.gif" width="24" height="39" alt="Stickman"> - Notice that we have only specified a relative address for the image. Since we have specified a base URL in the head section, the browser will look for the image at "http://www.w3schools.com/images/stickman.gif".</p>
<p><a href="http://www.w3schools.com">W3Schools</a> - Notice that the link opens in a new window, even if it has no target="_blank" attribute. This is because the target attribute of the base element is set to "_blank".</p>
</body>
</html>
<base target="_blank|_self|_parent|_top|framename">
_blank : Opens the link in a new window or tab
_self : Default. Opens the link in the same frame as it was clicked
_parent : Opens the link in the parent frame
_top : Opens the link in the full body of the window
framename : Opens the link in a named frame
HTML <link> Tag
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>I am formatted with a linked style sheet</h1>
<p>Me too!</p>
</body>
</html>
Check Link tag attributes from "http://www.w3schools.com/tags/tag_link.asp"
HTML <style> Tag
<!DOCTYPE html>
<html>
<head>
<style>
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
HTML styles CSS
<!DOCTYPE html>
<html>
<body>
<div style="opacity:0.5;position:absolute;left:50px;width:300px;height:150px;background-color:#40B3DF;"></div>
<div style="font-family:verdana;padding:20px;border-radius:10px;border:10px solid #EE872A;">
<div style="opacity:0.3;position:absolute;left:120px;width:100px;height:200px;background-color:#8AC007;"></div>
<h3>Look! Styles and colors</h3>
<div style="letter-spacing:12px;">Manipulate Text</div>
<div style="color:#40B3DF;">Colors <span style="background-color:#B4009E;color:#ffffff;">Boxes</span></div>
<div style="color:#000000;">and more...</div>
</div>
</body>
</html>
