8/8/2019 Learn HTML

1/13

1

SIM TI : Learn HTML

HTML Quick List from W3Schools

HTML Basic Document

Document name goes here

Visible text goes here

Heading Elements

Largest Heading

. . .

. . .

. . .

. . .

Smallest Heading

Text Elements

This is a paragraph

(line break)

(horizontal rule)

This text is preformatted

Logical Styles

This text is emphasized

This text is strong

This is some computer code

Physical Styles

This text is bold

This text is italic

Links, Anchors, and Image Elements

This is a Link

Send e-mail

8/8/2019 Learn HTML

2/13

2

A named anchor:

Useful Tips Section

Jump to the Useful Tips Section

Unordered list

First itemNext item

Ordered list

First item

Next item

Definition list

First term

Definition

Next term

Definition

Tables

someheader

someheader

sometext

sometext

Frames

Forms

8/8/2019 Learn HTML

3/13

3

ApplesBananas

Cherries

Entities

< is the same as is the same as >

is the same as

Other Elements

Text quoted from some source.

Address 1

Address 2

City

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 HTMLtables to format the layout of an HTML page.

A part of this page is formatted with two

columns, like a newspaper page.

As you can see on this page, there is a left

column and a right column.

This text is displayed in the left column.

An HTML is used to divide a part of this Web pageinto two columns.

The trick is to use a table without borders, and

maybe a little extra cell-padding.

No matter how much text you add to this page, it

will stay inside its column borders.

8/8/2019 Learn HTML

4/13

4

Same Layout - Color Added

One very common practice with HTML, is to use HTMLtables to format the layout of an HTML page.

A part of this page is formatted with two

columns, like a newspaper page.

As you can see at this page, there is a left

column and a right column.

An HTML is used to divide a part of this Web pageinto two columns.

This text is displayed in the right column.

The trick is to use a table without borders, and

maybe a little extra cell-padding.

No matter how much text you add to this page, it

will stay inside its column borders.

The HTML Tag

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

This is a paragraph.

This is another paragraph.

Font AttributesAttribute Example Purposesize="number" size="2" Defines the font sizesize="+number" size="+1" Increases the font sizesize="-number" size="-1" Decreases the font sizeface="face-name" face="Times" Defines the font-namecolor="color-value" color="#eeff00" Defines the font colorcolor="color-name" color="red" Defines the font color

The Tag Should NOT be Used

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

The World Wide Web Consortium (W3C) has removed the 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 Defines the document type

8/8/2019 Learn HTML

5/13

5

Defines an html document Defines the body element to Defines header 1 to header 6

Defines a paragraph
Inserts a single line break Defines a horizontal rule Defines a comment

Char Format Defines bold text Deprecated. Defines text font, size, and color Defines italic text Defines emphasized text Defines big text Defines strong text Defines small text Defines superscripted text Defines subscripted text Defines the direction of text display Deprecated. Defines underlined text

Output Defines preformatted text Defines computer code text Defines teletype text Defines keyboard text Defines a variable Defines a definition term Defines sample computer code Deprecated. Defines preformatted text

Blocks Defines an acronym Defines an abbreviation Defines an address element Defines a long quotation Deprecated. Defines centered text Defines a short quotation Defines a citation Defines inserted text Defines deleted text Deprecated. Defines strikethrough text Deprecated. Defines strikethrough text

Links Defines an anchor Defines a resource reference

Frames Defines a sub window (a frame) Defines a set of frames Defines a noframe section

Defines an inline sub window (frame)

Input Defines a form

8/8/2019 Learn HTML

6/13

6

Defines an input field Defines a text area Defines a push button Defines a selectable list Defines an option group Defines an item in a list box Defines a label for a form control

Defines a fieldset

Defines a title in a fieldset Deprecated. Defines a single-line input field

Lists Defines an unordered list Defines an ordered list Defines a list item Deprecated. Defines a directory list Defines a definition list Defines a definition term Defines a definition description Deprecated. Defines a menu list

Images Defines an image Defines an image map Defines an area inside an image map

Tables Defines a table Defines a table caption Defines a table header Defines a table row Defines a table cell Defines a table header Defines a table body Defines a table footer Defines attributes for table columns Defines groups of table columns

Styles Defines a style definition Defines a section in a document Defines a section in a document

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

Programming Defines a script

Defines a noscript section Deprecated. Defines an applet Defines an embedded object Defines a parameter for an object

8/8/2019 Learn HTML

7/13

7

Basic

...

...

...

The content of the document......

Source Output

This is header 1This is header 2This is header 3This is header 4This is header 5This is header 6

This is header 1

This is header 2

This is header 3

This is header 4

This is header 5

This is header 6

Source Output

This is some text in a very short

paragraph

This is some text in a very short paragraph

Source Output

This text contains
a line break This text contains

a line break

Source Output

8/8/2019 Learn HTML

8/13

8

This is some text This is some text This is some text

This is some text

Source Output

This is a regular paragraph

This is a regular paragraph

Char Format

Source Output

Teletype text

Italic text

Bold text

Big text

Small text

Teletype text

Italic text

Bold text

Big textSmall text

Source Output

Emphasized text

Strong text

Definition term

Computer code text

Sample computer code text

Keyboard text
Variable

Citation

Emphasized text

Strong textDefinition termComputer code textSample computer code textKeyboard text

VariableCitation

Source Output

This text contains

subscript

This text contains

superscript

This text contains subscript

This text containssuperscript

Source Output

Here is some Hebrew

text

Here is some Hebrew text

List

Source Output

CoffeeTea

Coffee

Tea

Source Output

8/8/2019 Learn HTML

9/13

9

CoffeeBlack hot drinkMilkWhite cold drink

CoffeeBlack hot drink

MilkWhite cold drink

Source Output

Coffee

Tea

1. Coffee2. Tea

Source Output

Coffee

Tea

Coffee

Tea

1. Coffee2. Tea

Coffee

Tea

Source Output

Coffee

Black hot drink

MilkWhite cold drink

Coffee

Black hot drink

Milk

White cold drink

Source Output

Coffee

Black hot drink

Milk

White cold drink

Coffee

Black hot drink

Milk

White cold drink

Source Output

Coffee

Black hot drink

Milk

White cold drink

Coffee

Black hot drink

Milk

White cold drink

Image

8/8/2019 Learn HTML

10/13

10

Source Output

Source Output

Click on one of the planets:

Click on one of the planets:

Table

Source Output

Cell A

Cell B

Cell A Cell B

Source Output

This is a caption

Cell 1

Cell 2

This is a captionCell 1 Cell 2

Source Output

Header 1Header 2

Header 1 Header 2

Cell A Cell B

8/8/2019 Learn HTML

11/13

11

Cell A

Cell B

Source Output

This text is in the THEAD

This text is in the TFOOT

This text is in the TBODY

This text is in the THEAD

This text is in the TFOOT

This text is in the TBODY

Source Output

This example shows a colgroup that has three

columns of different widths:

1

2

3

4

This example shows a colgroup that has three

columns of different widths:1 2 3 4

Source Output

12

3

1 2 3 4

8/8/2019 Learn HTML

12/13

12

4

Link

Source Output

Linking to W3Schools:

W3Schools

Opening W3Schools a new browser window:

W3Schools

Linking to W3Schools: W3Schools

Opening W3Schools a new browser

window: W3Schools

Meta info

Source

Title of the document

...

...

...

XHTML Tag Reference

The content of the document......

Define keywords for search engines:

Define a description of your web page:

8/8/2019 Learn HTML

13/13

13

Define the last revision of your page:

Refresh page every 5 seconds:

Assume that the absolute address for an image is:

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

section of a page:

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