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

HTML Basic Document: HTML Quick List From W3Schools

HTML is used to divide a part of this Web page into two columns. HTML tables are used to format the layout of An HTML page.

Uploaded by

Nidya Silvia Irfana
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
218 views

HTML Basic Document: HTML Quick List From W3Schools

HTML is used to divide a part of this Web page into two columns. HTML tables are used to format the layout of An HTML page.

Uploaded by

Nidya Silvia Irfana
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 13

SIM – TI : Learn HTML

HTML Quick List from W3Schools

HTML Basic Document

<html>
<head>
<title>Document name goes here</title>
</head>

<body>
Visible text goes here
</body>

</html>

Heading Elements

<h1>Largest Heading</h1>

<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>

<h6>Smallest Heading</h6>

Text Elements

<p>This is a paragraph</p>
<br> (line break)
<hr> (horizontal rule)
<pre>This text is preformatted</pre>

Logical Styles

<em>This text is emphasized</em>


<strong>This text is strong</strong>
<code>This is some computer code</code>

Physical Styles

<b>This text is bold</b>


<i>This text is italic</i>

Links, Anchors, and Image Elements

<a href="http://www.example.com/">This is a Link</a>


<a href="http://www.example.com/"><img src="URL" alt="Alternate Text"></a>
<a href="mailto:webmaster@example.com">Send e-mail</a>

1
A named anchor:
<a name="tips">Useful Tips Section</a>
<a href="#tips">Jump to the Useful Tips Section</a>

Unordered list

<ul>
<li>First item</li>
<li>Next item</li>
</ul>

Ordered list

<ol>
<li>First item</li>
<li>Next item</li>
</ol>

Definition list

<dl>
<dt>First term</dt>
<dd>Definition</dd>
<dt>Next term</dt>
<dd>Definition</dd>
</dl>

Tables

<table border="1">
<tr>
<th>someheader</th>
<th>someheader</th>
</tr>
<tr>
<td>sometext</td>
<td>sometext</td>
</tr>
</table>

Frames

<frameset cols="25%,75%">
<frame src="page1.htm">
<frame src="page2.htm">
</frameset>

Forms

<form action="http://www.example.com/test.asp" method="post/get">

<input type="text" name="lastname" value="Nixon" size="30" maxlength="50">


<input type="password">
2
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit">
<input type="reset">
<input type="hidden">

<select>
<option>Apples
<option selected>Bananas
<option>Cherries
</select>

<textarea name="Comment" rows="60" cols="20"></textarea>

</form>

Entities

&lt; is the same as <


&gt; is the same as >
&#169; is the same as ©

Other Elements

<!-- This is a comment -->

<blockquote>
Text quoted from some source.
</blockquote>

<address>
Address 1<br>
Address 2<br>
City<br>
</address>

Source : http://www.w3schools.com/html/html_quick.asp

Everywhere on the Web you will find pages that are formatted like newspaper pages using HTML
columns.

HTML Layout - Using Tables


One very common practice with HTML, is to use HTML An HTML <table> is used to divide a part of this Web page
tables to format the layout of an HTML page. into two columns.

A part of this page is formatted with two The trick is to use a table without borders, and
columns, like a newspaper page. maybe a little extra cell-padding.

As you can see on this page, there is a left No matter how much text you add to this page, it
column and a right column. will stay inside its column borders.

This text is displayed in the left column.

3
Same Layout - Color Added
One very common practice with HTML, is to use HTML An HTML <table> is used to divide a part of this Web page
tables to format the layout of an HTML page. into two columns.

A part of this page is formatted with two This text is displayed in the right column.
columns, like a newspaper page.
The trick is to use a table without borders, and
As you can see at this page, there is a left maybe a little extra cell-padding.
column and a right column.
No matter how much text you add to this page, it
will stay inside its column borders.

The HTML <font> Tag

With HTML code like this, you can specify both the size and the type of the browser output :

<p>
<font size="2" face="Verdana">
This is a paragraph.
</font>
</p>
<p>
<font size="3" face="Times">
This is another paragraph.
</font>
</p>

Font Attributes
Attribute Example Purpose
size="number" size="2" Defines the font size
size="+number" size="+1" Increases the font size
size="-number" size="-1" Decreases the font size
face="face-name" face="Times" Defines the font-name
color="color-value" color="#eeff00" Defines the font color
color="color-name" color="red" Defines the font color

The <font> Tag Should NOT be Used

The <font> tag is deprecated in the latest versions of HTML (HTML 4 and XHTML).

The World Wide Web Consortium (W3C) has removed the <font> tag from its recommendations.
In future versions of HTML, style sheets (CSS) will be used to define the layout and display
properties of HTML elements.

Ordered by Function
http://www.w3schools.com/tags/ref_byfunc.asp
Start tag Purpose

Basic Tags
<!DOCTYPE> Defines the document type

4
<html> Defines an html document
<body> Defines the body element
<h1> to <h6> Defines header 1 to header 6
<p> Defines a paragraph
<br> Inserts a single line break
<hr> Defines a horizontal rule
<!--...--> Defines a comment

Char Format
<b> Defines bold text
<font> Deprecated. Defines text font, size, and color
<i> Defines italic text
<em> Defines emphasized text
<big> Defines big text
<strong> Defines strong text
<small> Defines small text
<sup> Defines superscripted text
<sub> Defines subscripted text
<bdo> Defines the direction of text display
<u> Deprecated. Defines underlined text

Output
<pre> Defines preformatted text
<code> Defines computer code text
<tt> Defines teletype text
<kbd> Defines keyboard text
<var> Defines a variable
<dfn> Defines a definition term
<samp> Defines sample computer code
<xmp> Deprecated. Defines preformatted text

Blocks
<acronym> Defines an acronym
<abbr> Defines an abbreviation
<address> Defines an address element
<blockquote> Defines a long quotation
<center> Deprecated. Defines centered text
<q> Defines a short quotation
<cite> Defines a citation
<ins> Defines inserted text
<del> Defines deleted text
<s> Deprecated. Defines strikethrough text
<strike> Deprecated. Defines strikethrough text

Links
<a> Defines an anchor
<link> Defines a resource reference

Frames
<frame> Defines a sub window (a frame)
<frameset> Defines a set of frames
<noframes> Defines a noframe section
<iframe> Defines an inline sub window (frame)

Input
<form> Defines a form
5
<input> Defines an input field
<textarea> Defines a text area
<button> Defines a push button
<select> Defines a selectable list
<optgroup> Defines an option group
<option> Defines an item in a list box
<label> Defines a label for a form control
<fieldset> Defines a fieldset
<legend> Defines a title in a fieldset
<isindex> Deprecated. Defines a single-line input field

Lists
<ul> Defines an unordered list
<ol> Defines an ordered list
<li> Defines a list item
<dir> Deprecated. Defines a directory list
<dl> Defines a definition list
<dt> Defines a definition term
<dd> Defines a definition description
<menu> Deprecated. Defines a menu list

Images
<img> Defines an image
<map> Defines an image map
<area> Defines an area inside an image map

Tables
<table> Defines a table
<caption> Defines a table caption
<th> Defines a table header
<tr> Defines a table row
<td> Defines a table cell
<thead> Defines a table header
<tbody> Defines a table body
<tfoot> Defines a table footer
<col> Defines attributes for table columns
<colgroup> Defines groups of table columns

Styles
<style> Defines a style definition
<div> Defines a section in a document
<span> Defines a section in a document

Meta Info
<head> Defines information about the document
<title> Defines the document title
<meta> Defines meta information
<base> Defines a base URL for all the links in a page
<basefont> Deprecated. Defines a base font

Programming
<script> Defines a script
<noscript> Defines a noscript section
<applet> Deprecated. Defines an applet
<object> Defines an embedded object
<param> Defines a parameter for an object
6
Basic
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
</head>

<body>
...
...
...
</body>

</html>

<html>
<head>
</head>

<body>
The content of the document......
</body>

</html>

Source Output
<h1>This is header 1</h1>
<h2>This is header 2</h2>
<h3>This is header 3</h3> This is header 1
<h4>This is header 4</h4>
<h5>This is header 5</h5>
<h6>This is header 6</h6>
This is header 2

This is header 3

This is header 4
This is header 5
This is header 6

Source Output
<p>This is some text in a very short This is some text in a very short paragraph
paragraph</p>

Source Output
This text contains<br />a line break This text contains
a line break

Source Output

7
This is some text <hr /> This is some text This is some text

This is some text

Source Output
<!--This text is a comment--> This is a regular paragraph

<p>This is a regular paragraph</p>

Char Format

Source Output
<tt>Teletype text</tt><br /> Teletype text
<i>Italic text</i><br /> Italic text
<b>Bold text</b><br /> Bold text
<big>Big text</big><br /> Big text
<small>Small text</small><br /> Small text

Source Output
<em>Emphasized text</em><br /> Emphasized text
<strong>Strong text</strong><br /> Strong text
<dfn>Definition term</dfn><br /> Definition term
<code>Computer code text</code><br /> Computer code text
<samp>Sample computer code text</samp><br /> Sample computer code text
Keyboard text
<kbd>Keyboard text</kbd><br />
<var>Variable</var><br /> Variable
<cite>Citation</cite> Citation

Source Output
This text contains This text contains subscript
<sub>subscript</sub>
This text contains superscript
This text contains
<sup>superscript</sup>

Source Output
<bdo dir="rtl">Here is some Hebrew Here is some Hebrew text
text</bdo>

List

Source Output
<ul> • Coffee
<li>Coffee</li> • Tea
<li>Tea</li>
</ul>

Source Output
8
<dl> Coffee
<dt>Coffee</dt> Black hot drink
<dd>Black hot drink</dd> Milk
<dt>Milk</dt> White cold drink
<dd>White cold drink</dd>
</dl>

Source Output
<ol> 1. Coffee
<li>Coffee</li> 2. Tea
<li>Tea</li>
</ol>

Source Output
<ol> 1. Coffee
<li>Coffee</li> 2. Tea
<li>Tea</li>
</ol> • Coffee
• Tea
<ul>
<li>Coffee</li>
<li>Tea</li>
</ul>

Source Output
<dl> Coffee
<dt>Coffee</dt> Black hot drink
<dd>Black hot drink</dd> Milk
<dt>Milk</dt> White cold drink
<dd>White cold drink</dd>
</dl>

Source Output
<dl> Coffee
<dt>Coffee</dt> Black hot drink
<dd>Black hot drink</dd> Milk
<dt>Milk</dt> White cold drink
<dd>White cold drink</dd>
</dl>

Source Output
<dl> Coffee
<dt>Coffee</dt> Black hot drink
<dd>Black hot drink</dd> Milk
<dt>Milk</dt> White cold drink
<dd>White cold drink</dd>
</dl>

Image

9
Source Output
<img src="angry.gif" alt="Angry" />

Source Output
<p>Click on one of the planets:</p> Click on one of the planets:

<img src ="planets.gif"


width ="145" height ="126"
alt="Planets"
usemap ="#planetmap" />

<map id ="planetmap"
name="planetmap">
<area shape ="rect" coords ="0,0,82,126"
href ="sun.htm" target ="_blank"
alt="Sun" />
<area shape ="circle" coords ="90,58,3"
href ="mercur.htm" target ="_blank"
alt="Mercury" />
<area shape ="circle" coords ="124,58,8"
href ="venus.htm" target ="_blank"
alt="Venus" />
</map>

Table

Source Output
<table border = "1"> Cell A Cell B
<tr>
<td>Cell A</td>
<td>Cell B</td>
</tr>
</table>

Source Output
<table border="1"> This is a caption
<caption>This is a caption</caption>
Cell 1 Cell 2
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</table>

Source Output
<table border = "1"> Header 1 Header 2
<tr>
<th>Header 1</th> Cell A Cell B
<th>Header 2</th>
</tr>

10
<tr>
<td>Cell A</td>
<td>Cell B</td>
</tr>
</table>

Source Output
<table border = "1"> This text is in the THEAD
<thead>
<tr> This text is in the TFOOT
<td>This text is in the THEAD</td> This text is in the TBODY
</tr>
</thead>
<tfoot>
<tr>
<td>This text is in the TFOOT</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>This text is in the TBODY</td>
</tr>
</tbody>
</table>

Source Output
This example shows a colgroup that has three This example shows a colgroup that has three
columns of different widths: columns of different widths:
<table border="1"> 1234
<colgroup span="3">
<col width="20"></col>
<col width="50"></col>
<col width="80"></col>
</colgroup>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</table>

Source Output
<table border="1"> 1234
<colgroup span="3"
style="color:#FF0000;">
</colgroup>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>

11
<td>4</td>
</tr>
</table>

Link
Source Output
<p>Linking to W3Schools: Linking to W3Schools: W3Schools
<a href="http://www.w3schools.com">
W3Schools</a> Opening W3Schools a new browser
</p> window: W3Schools

<p>
Opening W3Schools a new browser window:
<a href="http://www.w3schools.com"
target="_blank">W3Schools</a>
</p>

Meta info
Source
<html>

<head>
<title>Title of the document</title>
</head>

<body>
...
...
...
</body>

</html>

<html>

<head>
<title>XHTML Tag Reference</title>
</head>

<body>
The content of the document......
</body>

</html>

Define keywords for search engines:


<meta name="keywords" content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript" />

Define a description of your web page:


<meta name="description" content="Free Web tutorials on HTML, CSS, XML, and XHTML" />

12
Define the last revision of your page:
<meta name="revised" content="Hege Refsnes, 6/10/99" />

Refresh page every 5 seconds:


<meta http-equiv="refresh" content="5" />

Assume that the absolute address for an image is:

<img src="http://www.w3schools.com/images/smile.gif" />

Now we insert the <base> tag, which specifies a base URL for all of the links in a page, in the head
section of a page:

<head>
<base href="http://www.w3schools.com/images/" />
</head>

When inserting images on the page in the example above, we just have to specify the relative
address, and the browser will look for that file using the full URL,
"http://www.w3schools.com/images/smile.gif":

<img src="smile.gif" />

13

You might also like