learn html
TRANSCRIPT
-
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 commentChar 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 containsa 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
VariableCitation
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":