Beruflich Dokumente
Kultur Dokumente
Introduction
What is HTML?
HTML
is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML uses markup tags to describe web pages HTML tags are keywords surrounded by angle brackets like <html> HTML tags normally come in pairs like <b> and </b> The first tag in a pair is the start tag, the second tag is the end tag
HTML Format
<html> <head> <title> </head> <body>
</title>
</body> </html
HTML Elements
HTML documents are defined by HTML elements. An HTML element is everything from the start tag to the end tag:
Start tag Element content This is a paragraph This is a link </p> </a> End tag
HTML Attributes
HTML elements can have attributes Attributes provide additional information about the element Attributes are always specified in the start tag Attributes come in name/value pairs like: name="value For example, HTML links are defined with the <a> tag. The link address is provided as an attribute:
<a
href="http://www.w3schools.com">This is a link</a>
Headings
<h1> to <h6> tags are used to define HTML headings.<h1> defines the largest heading and <h6> defines the smallest heading. Example
<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>
Horizontal line
<hr> tag creates a horizontal line in an HTML page.The hr element can be used to separate content in an HTML page.
Value
Left Center Right Pixels or % Pixels or %
Attribute
align
Description
Specifies the alignment of a hr element Specifies the height of a hr element Specifies the width of a hr element
size width
align="left" /> <hr size="30" /> <hr width="50%" /> <hr align="left" width="50%" />
Paragraphs
HTML Paragraphs
Paragraphs
are defined with the <p> tag. The p element automatically creates some space before and after itself.
Attribute align Value Left Center Right
<p>This
<sup>
<ins> <del>
HTML Styles
The style attribute is a new HTML attribute. It introduces CSS to HTML. The purpose of the style attribute is:
To
Style Examples
Background Color
<body
style="background-color:yellow">
Text Alignment
<h1
HTML Lists
Unordered Lists
An unordered list is a list of items. The list items are marked with bullets (typically small black circles). An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. <ul> <li>Coffee</li> <li>Milk</li> </ul>
HTML Lists
HTML Lists
HTML Lists
HTML Lists
Ordered Lists
An
ordered list is also a list of items. The list items are marked with numbers. An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
<ol> <li>Coffee</li> <li>Milk</li>
</ol>
HTML Lists
list:
HTML Lists
HTML Lists
HTML Lists
HTML Lists
Roman numbers list: <ol type="i"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol>
In HTML, images are defined with the <img> tag. The <img> tag is empty, which means that it contains attributes only and it has no closing tag. To display an image on a page, you need to use the src attribute. Src stands for "source". The value of the src attribute is the URL of the image you want to display on your page. The syntax of defining an image: <img src="url" />
Value
top bottom middle left right Pixels
Description
Specifies the alignment of an image according to surrounding elements
border
Specifies the width of the border around an image Specifies the height of an image
height
Pixels or %
width
Pixels or %
The HTML <a> tag defines a hyperlink. A hyperlink (or link) is a word, group of words, or image that you can click on to jump to another document. When you move the cursor over a link in a Web page, the arrow will turn into a little hand.
The most important attribute of the <a> element is the href attribute, which indicates the links destination. By default, links will appear as follows in all browsers:
An
unvisited link is underlined and blue A visited link is underlined and purple An active link is underlined and red
href="http://www.w3schools.com/">Visit W3Schools</a> Clicking on this hyperlink will send the user to W3Schools' homepage.
Tip: The "Link text" doesn't have to be text. It can be an image or any other HTML element.
The target attribute specifies where to open the linked document. The example below will open the linked document in a new browser window or a new tab:
<a
The id attribute can be used to create a bookmark inside an HTML document. Tip: Bookmarks are not displayed in any special way. They are invisible to the reader.
Create a link to the "Useful Tips Section" inside the same document:
<a
Or, create a link to the "Useful Tips Section" from another page:
<a
href="http://www.w3schools.com/html_links.htm#ti ps">
Tables
Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). The letters td stands for "table data," which is the content of a data cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc.
Sample Code
<table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>
Attributes
Attribute Value Description
align
bgcolor
border
Pixels
cellpadding
Pixels
cellspacing
width
Pixels
Pixels %
If you do not specify a border attribute the table will be displayed without any borders. Sometimes this can be useful, but most of the time, you want the borders to show.
<table
border=5> <tr> <td>Row 1, cell 1</td> <td>Row 1, cell 2</td> </tr> </table>
Headings in a Table
<table border="1"> <tr> <th>Heading</th> <th>Another Heading</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>
Table cells with no content are not displayed very well in most browsers. Note that the borders around the empty table cell are missing (NB! Mozilla Firefox displays the border). To avoid this, add a non-breaking space ( ) to empty data cells, to make the borders visible:
Frames
The <frame> tag defines one particular window (frame) within a <frameset>. Each <frame> in a <frameset> can have different attributes, such as border, scrolling, the ability to resize, etc.
Attributes
Attribute frameborder Value 0 1 Description Specifies whether or not to display a border around a frame
longdesc
marginheight marginwidth name noresize scrolling
URL
pixels pixels name noresize yes no auto URL
src
Frameset
The <frameset> tag defines a frameset. The <frameset> element holds one or more <frame> elements. Each <frame> element can hold a separate document. The <frameset> element specifies HOW MANY columns or rows there will be in the frameset, and HOW MUCH percentage/pixels of space will occupy each of them. Not supported in HTML 5
Attribute
Attribute Value cols pixels % * Description Specifies the number and size of columns in a frameset
rows
pixels % *
Using Frames
Example <frameset rows="25%,*,25%"> <frame src="frame_a.htm"> <frame src="frame_b.htm"> <frame src="frame_c.htm"> </frameset>
<frameset rows="50%,50%"> <frame src="frame_a.htm"> <frameset cols="25%,75%"> <frame src="frame_b.htm"> <frame src="frame_c.htm"> </frameset> </frameset>
<frameset cols="50%,*,25%"> <frame src="frame_a.htm" noresize="noresize"> <frame src="frame_b.htm"> <frame src="frame_c.htm"> </frameset>
Navigation Frame
This example demonstrates how to make a navigation frame. A navigation framecontains a list of links with the second frame as the target. The second frame willshow the linked document.
Main Page <html> <frameset cols="120,*"> <frame src="tryhtml_contents.htm"> <frame src="frame_a.htm" name="showframe"> </frameset> </html> Link frame <a href ="frame_a.htm" target ="showframe">Frame a</a><br> <a href ="frame_b.htm" target ="showframe">Frame b</a><br> <a href ="frame_c.htm" target ="showframe">Frame c</a>
iframe
The <iframe> tag specifies an inline frame. An inline frame is used to embed another document within the current HTML document. Supported by HTML5
Attributes
Attribute align frameborder height longdesc marginheight Value Left, right, top middle, bottom 1 0 Pixels URL Pixels Description Specifies the alignment of an <iframe> according to surrounding elements Specifies whether or not to display a border around an <iframe> Specifies the height of an <iframe> Specifies a page that contains a long description of the content of an <iframe> Specifies the top and bottom margins of the content of an <iframe> Specifies the left and right margins of the content of an <iframe> Specifies the name of an <iframe> Specifies whether or not to display scrollbars in an <iframe> Specifies that the <iframe> should look like it is a part of the containing document Specifies the address of the document to embed in the <iframe> Specifies the HTML content of the page to show in the <iframe> Specifies the width of an <iframe>
marginwidth
name scrolling seamlessNew src srcdocNew width
Pixels
Name Yes, no, auto seamless URL HTML_code pixels
Using iframe
Set Height and Width <iframe src="demo_iframe.htm" width="200" height="200"></iframe> Remove the Border <iframe src="demo_iframe.htm" frameborder="0"></iframe> Use iframe as a Target for a Link <iframe src="demo_iframe.htm" name="iframe_a"></iframe> <p><a href="http://www.w3schools.com"