Beruflich Dokumente
Kultur Dokumente
Microsoft WebMatrix
Sublime Text
<tagname>content</tagname>
The HTML element is everything from the start tag to the end tag:
<a href=http://www.w3schools.com>
HTML Headings
Note: Browsers automatically add some empty space (a margin) before and
after each heading.
Use HTML headings for headings only. Don't use headings to make
text BIG or bold.
Search engines use your headings to index the structure and content of your
web pages.
The HTML <head> element is placed between the <html> tag and the
<body> tag:
<!DOCTYPE html>
<html>
<head>
<title>My First HTML</title>
<meta charset="UTF-8">
</head>
<body>
.
Meta data means data about data. HTML meta data is data about the HTML
document.
The HTML <style> element is used to define internal CSS style sheets.
The HTML <link> element is used to define external CSS style sheets.
Browsers automatically add an empty line before and after a paragraph.
HTML Display
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>
<p>
This paragraph
contains
a lot of spaces
in the source
code,
but the
browser
ignores it.
</p>
Example
<p>This is<br>a para<br>graph with line breaks</p>
Example
<pre>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</pre>
HTML Styling
Every HTML element has a default style (background color is white and text
color is black).
Changing the default style of an HTML element, can be done with the style
attribute.
This example changes the default background color from white to lightgrey:
Example
<body style="background-color:lightgrey">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
style="property:value"
The <center> tag, supported in older versions of HTML, is not valid in
HTML5.
The HTML <strong> element defines strong text, with added semantic
"strong" importance.
Example
<p>This text is normal.</p>
<p><strong>This text is strong</strong>.</p>
The HTML <em> element defines emphasized text, with added semantic
importance.
Example
<p>This text is normal.</p>
<p><em>This text is emphasized</em>.</p>
Example
<h2>HTML <mark>Marked</mark> Formatting</h2>
Example
<p>My favorite color is <del>blue</del> red.</p>
Example
<p>My favorite <ins>color</ins> is red.</p>
Example
<p>My favorite <ins>color</ins> is red.</p>
Example
<p>This is <sub>subscripted</sub> text.</p>
Example
<p>This is <sup>superscripted</sup> text.</p>
Example
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in
1948.</p>
Example
<address>
Written by Jon Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
Example
<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>
Example
<bdo dir="rtl">This text will be written from right to left</bdo>
Example
<code>
var x = 5;
var y = 6;
document.getElementById("demo").innerHTML = x + y;
</code>
Result:
var x = 5; var y = 6; document.getElementById("demo").innerHTML = x + y;
Try it Yourself
Notice that the <code> element does not preserve extra whitespace and
line-breaks.
To fix this, you can put the <code> element inside a <pre> element:
<pre>
<code>
var x = 5;
var y = 6;
document.getElementById("demo").innerHTML = x + y;
</code>
</pre>
Result:
var x = 5;
var y = 6;
document.getElementById("demo").innerHTML = x + y;
Example
Einstein wrote: <var>E</var> = <var>m</var><var>c</var><sup>2</sup>.
Result:
Einstein wrote: E = mc2.
Comments are not displayed by the browser, but they can help document
your HTML.
With comments you can place notifications and reminders in your HTML:
Example
<!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- Remember to add more information here -->
There is an exclamation point (!) in the opening tag, but not in the closing ta
omments are also great for debugging HTML, because you can comment out
HTML lines of code, one at a time, to search for errors:
Example
<!-- Do not display this at the moment
<img border="0" src="pic_mountain.jpg" alt="Mountain">
-->
Conditional Comments
You might stumble upon conditional comments in HTML:
<!--[if IE 8]>
.... some HTML here ....
<![endif]-->
Conditional comments defines HTML tags to be executed by Internet Explorer
only.
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:lightgrey}
h1 {color:blue}
p {color:green}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Example
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
CSS Fonts
The CSS color property defines the text color to be used for the HTML
element.
The CSS font-family property defines the font to be used for the HTML
element.
The CSS font-size property defines the text size to be used for the HTML
element.
Example
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color:blue;
font-family:verdana;
font-size:300%;
}
p {
color:red;
font-family:courier;
font-size:160%;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Example
p{
border:1px solid black;
}
Try it Yourself
The CSS padding property defines a padding (space) inside the border:
Example
p{
border:1px solid black;
padding:10px;
}
Try it Yourself
The CSS margin property defines a margin (space) outside the border:
Example
p{
border:1px solid black;
padding:10px;
margin:30px;
}
Try it Yourself
Local Links
The example above used an absolute URL (A full web address).
A local link (link to the same web site) is specified with a relative URL
(without http://www....).
Example
<a href="html_images.asp">HTML Images</a>
Example
<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}
Example
<a href="http://www.w3schools.com/" target="_blank">Visit W3Schools!</a>
Try it yourself
Target Value
Description
_blank
_self
Opens the linked document in the same frame as it was clicked (this
_parent
_top
framename
If your webpage is locked in a frame, you can use target="_top" to break out
of the frame:
Example
<a href="default.asp">
<img src="smiley.gif" alt="HTML
tutorial" style="width:42px;height:42px;border:0">
</a>
<!DOCTYPE html>
<html>
<body>
<h2>Spectacular Mountain</h2>
<img src="pic_mountain.jpg" alt="Mountain
View" style="width:304px;height:228px;">
</body>
</html>
Try it Yourself
Always specify the width and height of an image. If width and height are not specifi
flicker while the image loads.
The <img> tag is empty, it contains attributes only, and does not have a
closing tag.
The src attribute specifies the URL (web address) of the image:
Example
<img src="wrongname.gif" alt="HTML5
Icon" style="width:128px;height:128px;">
Example
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
Try it Yourself
Alternatively, you can use width and height attributes. Here, the values are
specified in pixels by default:
Example
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
Both the width, height, and style attributes are valid in the latest HTML5
standard.
We suggest you use the style attribute. It prevents styles sheets from
changing the original size of images:
Example
<!DOCTYPE html>
<html>
<head>
<style>
img {
width:100%;
}
</style>
</head>
<body>
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
</body>
</html>
Example
<img src="/images/html5.gif" alt="HTML5
Icon" style="width:128px;height:128px;">
Example
<img src="http://www.w3schools.com/images/w3schools_green.jpg" alt="W3Sch
ools.com">
Example
<img src="programming.gif" alt="Computer
Man" style="width:48px;height:48px;">
Note that the syntax of inserting animated images is no different from nonanimated images.
Example
<a href="default.asp">
<img src="smiley.gif" alt="HTML
tutorial" style="width:42px;height:42px;border:0;">
</a>
Try it Yourself
Add "border:0;" to prevent IE9 (and earlier) from displaying a border around the im
Image Floating
Use the CSS float property to let the image float.
The image can float to the right or to the left of a text:
Example
<p>
<img src="smiley.gif" alt="Smiley
face" style="float:right;width:42px;height:42px;">
The image will float to the right of the text.
</p>
<p>
Image Maps
Use the <map> tag to define an image-map. An image-map is an image with
clickable areas.
The name attribute of the <map> tag is associated with the <img>'s
usemap attribute and creates a relationship between the image and the map.
The <map> tag contains a number of <area> tags, that defines the clickable
areas in the image-map:
Example
<img src="planets.gif" alt="Planets" usemap="#planetmap"style="width:145px
;height:126px;">
<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>
Example explained:
Tables are defined with the <table> tag.
Tables are divided into table rows with the <tr> tag.
Table rows are divided into table data with the <td> tag.
A table row can also be divided into table headings with the <th> tag.
If you do not specify a border for the table, it will be displayed without
borders.
A border can be added using the border attribute:
Example
<table border="1" style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
The border attribute is on its way out of the HTML standard! It is better to use CSS.
To add borders, use the CSS border property:
Example
table, th, td {
border: 1px solid black;
}
Try it Yourself
Example
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 15px;
}
Example
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Points</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Example
th {
text-align: left;
}
Example
table {
border-spacing: 5px;
}
To make a cell span more than one column, use the colspan attribute:
Example
<table style="width:100%">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
Example
<table style="width:100%">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
Try it Yourself
The <caption> tag must be inserted immediately after the <table> tag.