What is HTML?
- HTML is
a language that helps you to create websites
- HTML stands
for Hyper Text Markup Language
- HTML is
the predominant markup language for web pages
- The
language uses TAGS to describe web pages
And now a few things to start
learning the HTML:
- Daily
allocation of at least 30 minutes;
- The
desire to learn a language that stands for basics of all web pages;
- To
follow and repeat yourself every example that you'll meet here
Using HTML you can develop not very demanding web pages but this can be the beginning for achieving professional sites. There are many programs with which writing HTML is no longer necessary, these programs write it for you. But these programs do not offer complete control on designing your web pages and to build a web page requires at least some basic knowledge of HTML.
HTML tags
TAGS are nothing but some
marks or labels that you use in HTML in order to help your
internet browser to display web page content properly.
These TAGS may be:
- pair of tags (a start tag and one closing). Examples: <HTML> and </HTML>; <TITLE> and </TITLE>;<HEAD> and </HEAD>;
or
- single tags (no closing tag) Examples: <HR>, <BR>.
These TAGS may be:
- pair of tags (a start tag and one closing). Examples: <HTML> and </HTML>; <TITLE> and </TITLE>;<HEAD> and </HEAD>;
or
- single tags (no closing tag) Examples: <HR>, <BR>.
What these TAGS means:
- <HTML> this is the beginning tag
of each html document. With this tag you will tell the browser that it is
a html file. <HTML/> is
the closing tag of <HTML>.
- <HEAD> between these tags are
listed, along with the title page, various useful information to web
browser. <HEAD/> is
the closing tag of <HEAD>.
- <TITLE> with this tag you can
give a title to your document. What is wrote between these tags will be
displayed in the title bar of the document. <TITLE/> is the closing tag
of <TITLE>.
- <BODY> this tag marks the
beginning of web page content. Everything you write between these tags
will be displayed by the browser. <BODY/> is
the closing tag of <BODY>.
Creating the first HTML document
<HTML>
<HEAD>
<TITLE>My web page</TITLE>
</HEAD>
<BODY>
Hello!<BR>
This is my first web page!<BR>
</BODY>
</HTML>
<HEAD>
<TITLE>My web page</TITLE>
</HEAD>
<BODY>
Hello!<BR>
This is my first web page!<BR>
</BODY>
</HTML>
Click here to see
the result!
HTML attributes
ATTRIBUTES are available only in the starting tag
and can be defined as properties of tags. If a tag has no attributes, then the
browser will take into account the default value.
Here
we have some examples of tag attributes:
- Tag <BODY> with BGCOLOR attribute - will indicate the
background color of the web page;
<BODY
BGCOLOR="#A8A8A8" > - will give gray color to the background
Click here to see the result!
- Tag <FONT> with COLOR attribute - will indicate the
text color;
<FONT
COLOR="#FF0000" > - will color the text in
red
Click here to see the result!
- Tag <FONT> with SIZE attribute - will indicate the
text size;
<FONT SIZE="6"
> - will scale the text with the largest size
Click here to see the result!
Here is a list of the most used attributes:
Tag Name
|
Attribute name
|
Attribute value
|
Details
|
<A>
|
Anchor
|
||
href
|
URL
|
Address to which we want to be connected
|
|
target
|
<blank
_self _parent _top</blank |
Display window
|
|
<B>
|
Text bold
|
||
<BODY>
|
Document summary
|
||
background
|
address path
|
Background image
|
|
bgcolor
|
color code
color name |
Background color
|
|
leftmargin
|
percentage from
page width in pixels |
The distance between the left margin of
window browser and the left edge of the page |
|
topmargin
|
percent from page height in pixels
|
The distance between the top edge of window browser and
top of page
|
|
text
|
color code
color name |
Text color
|
|
alink
|
color code
color name |
Color of active link when cross over the mouse
|
|
link
|
color code
color name |
Unvisited link color
|
|
vlink
|
color code
color name |
Visited link color
|
|
<BR>
|
Row end
|
||
<CENTER>
|
Display in the center of the page
|
||
<FONT>
|
Text font
|
||
color
|
color code
color name |
Font color
|
|
face
|
Font name
|
Font type
|
|
size
|
number from
1 to 7 |
Font size
|
|
<FORM>
|
Interactive form
|
||
action
|
URL
|
Script adress
|
|
method
|
GET/POST
|
Processing data method
|
|
<FRAME>
|
Frame
|
||
frameborder
|
1 or 0
|
Frame has/not border
|
|
marginheight
|
number of pixels
|
Space above/under a frame
|
|
marginwidth
|
number of pixels
|
Space to the left/right of a frame
|
|
src
|
URL
|
Frame path
|
|
<FRAMESET>
|
Frames
|
||
cols
|
percentage of page width in pixels
|
number and size of the columns
|
|
rows
|
percentage of page height in pixels
|
number and size of the rows
|
|
H1, H2, H3,
H4, H5, H6 |
Titles in document
|
||
align
|
left
center right justify |
Title alignment
|
|
<HEAD>
|
Document header
|
||
<HR>
|
Horizontal rule
|
||
align
|
left
center right |
Horizontal alignment of the line
|
|
color
|
color code
color name |
Line color
|
|
size
|
number of pixels
|
Line height
|
|
width
|
percentage from
page width in pixels |
Line width
|
|
<HTML>
|
HTML document
|
||
<I>
|
Italic text
|
||
<IMG>
|
Adding an image
|
||
align
|
left
right top middle bottom |
Aligning the image in page: left
or right Aligning the elements around the image top, middle, bottom |
|
alt
|
text
|
Text to be displayed instead of image that is not
displayed
|
|
border
|
number of pixels
|
Frame size around image
|
|
height
|
percentage in pixels
|
Image height
|
|
hspace
|
number of pixels
|
Horizontal space around image
|
|
src
|
URL
|
Image path
|
|
vspace
|
number of pixels
|
Vertical space around image
|
|
width
|
percentage in pixels
|
Image width
|
|
<INPUT>
|
Form element
|
||
maxlength
|
number
|
Maximum number of characters
|
|
name
|
data type character
|
Form element name
|
|
size
|
number
|
Form element size
|
|
src
|
URL
|
Image path
|
|
type
|
text
password checkbox radio submit reset file hidden image button |
Input type
|
|
value
|
character data type
|
Input value
|
|
<LI>
|
Element of a list
|
||
<META>
|
Meta information
|
||
content
|
text
|
Describe the name attribute value
|
|
name
|
author
|
Author
|
|
description
|
Description
|
||
keywords
|
Keywords
|
||
<OL>
|
Ordered list
|
||
start
|
number
|
The start value numbering
|
|
type
|
A, a, I, i, 1
|
Numbering type: A, a, I, i, 1
|
|
<P>
|
Paragraph
|
||
align
|
left
center right justify |
Paragraph alignment
|
|
<SELECT>
|
Selection list
|
||
multiple
|
Allows selection of more items
|
||
name
|
character data type
|
Name of the selection list
|
|
size
|
number
|
Number of list items
|
|
<STRONG>
|
Highlighted text
|
||
<SUB>
|
Text index
|
||
<SUP>
|
Text exponent
|
||
<TABLE>
|
Table
|
||
align
|
left
center right |
Table alignment
|
|
background
|
URL
|
Table background image
|
|
bgcolor
|
color code
color name |
Table background color
|
|
border
|
percentage in pixels
|
Table box
|
|
bordercolor
|
color code
color name |
Box color
|
|
cellpadding
|
number of pixels
|
Spacing between content of table cells and their edges
|
|
cellspacing
|
number of pixels
|
Spacing between table cells
|
|
cols
|
number
|
Number of columns
|
|
hspace
|
number of pixels
|
Horizontal space around the table
|
|
vspace
|
number of pixels
|
Vertical space around the table
|
|
width
|
percentage in pixels
|
Table width
|
|
<TD>
|
Table cell
|
||
align
|
left
center right |
Horizontal text alignment
|
|
background
|
URL
|
Cell background
|
|
bgcolor
|
color code
color name |
Cell background color
|
|
colspan
|
number
|
Number of columns that spans the cell
|
|
height
|
number of pixels
|
Cell height
|
|
rowspan
|
number
|
Number of lines that spans the cell
|
|
valign
|
top
middle bottom |
Cell content vertical alignment
|
|
width
|
number of pixels
|
Cell width
|
|
<TEXTAREA>
|
Editing field
|
||
cols
|
number
|
Number of columns
|
|
name
|
Character data type
|
Editing field name
|
|
rows
|
number
|
Number of rows
|
|
<TITLE>
|
Document title
|
||
<TR>
|
Table row
|
||
align
|
left
center right |
Cell content horizontal alignment
|
|
bgcolor
|
color code
color name |
Background color for entire row
|
|
valign
|
top
middle bottom |
Cell content vertical alignment
|
|
<U>
|
Underlined text
|
||
<UL>
|
Unordered list
|
||
type
|
<circle
disc square</circle |
Mark type
|
HTML colors
We can define the HTML colors by using hexadecimal notation (HEX)
or the RGB notation that means a combination of Red, Green and Blue color.
Background color
In order to set the background color will be use the BGCOLOR attribute of the <BODY> tag. Example:
Background color
In order to set the background color will be use the BGCOLOR attribute of the <BODY> tag. Example:
<BODY
BGCOLOR="#A8A8A8" >
Font color
Text color in a HTML page can be changed using the COLOR attribute of the <FONT> tag. Example:
<FONT
COLOR="#000000" >Your text here</FONT>
Here we have a list of the most important colors that are recognized by most browsers:
Color
|
Color name
|
Color code
|
AliceBlue
|
#F0F8FF
|
|
AntiqueWhite
|
#FAEBD7
|
|
Aqua
|
#00FFFF
|
|
Aquamarine
|
#7FFFD4
|
|
Azure
|
#F0FFFF
|
|
Beige
|
#F5F5DC
|
|
Bisque
|
#FFE4C4
|
|
Black
|
#000000
|
|
BlanchedAlmond
|
#FFEBCD
|
|
Blue
|
#0000FF
|
|
BlueViolet
|
#8A2BE2
|
|
Brown
|
#A52A2A
|
|
BurlyWood
|
#DEB887
|
|
CadetBlue
|
#5F9EA0
|
|
Chartreuse
|
#7FFF00
|
|
Chocolate
|
#D2691E
|
|
Coral
|
#FF7F50
|
|
CornflowerBlue
|
#6495ED
|
|
Cornsilk
|
#FFF8DC
|
|
Crimson
|
#DC143C
|
|
Cyan
|
#00FFFF
|
|
DarkBlue
|
#00008B
|
|
DarkCyan
|
#008B8B
|
|
DarkGoldenRod
|
#B8860B
|
|
DarkGray
|
#A9A9A9
|
|
DarkGreen
|
#006400
|
|
DarkKhaki
|
#BDB76B
|
|
DarkMagenta
|
#8B008B
|
|
DarkOliveGreen
|
#556B2F
|
|
Darkorange
|
#FF8C00
|
|
DarkOrchid
|
#9932CC
|
|
DarkRed
|
#8B0000
|
|
DarkSalmon
|
#E9967A
|
|
DarkSeaGreen
|
#8FBC8F
|
|
DarkSlateBlue
|
#483D8B
|
|
DarkSlateGray
|
#2F4F4F
|
|
DarkTurquoise
|
#00CED1
|
|
DarkViolet
|
#9400D3
|
|
DeepPink
|
#FF1493
|
|
DeepSkyBlue
|
#00BFFF
|
|
DimGray
|
#696969
|
|
DodgerBlue
|
#1E90FF
|
|
Feldspar
|
#D19275
|
|
FireBrick
|
#B22222
|
|
FloralWhite
|
#FFFAF0
|
|
ForestGreen
|
#228B22
|
|
Fuchsia
|
#FF00FF
|
|
Gainsboro
|
#DCDCDC
|
|
GhostWhite
|
#F8F8FF
|
|
Gold
|
#FFD700
|
|
GoldenRod
|
#DAA520
|
|
Gray
|
#808080
|
|
Green
|
#008000
|
|
GreenYellow
|
#ADFF2F
|
|
HoneyDew
|
#F0FFF0
|
|
HotPink
|
#FF69B4
|
|
IndianRed
|
#CD5C5C
|
|
Indigo
|
#4B0082
|
|
Ivory
|
#FFFFF0
|
|
Khaki
|
#F0E68C
|
|
Lavender
|
#E6E6FA
|
|
LavenderBlush
|
#FFF0F5
|
|
LawnGreen
|
#7CFC00
|
|
LemonChiffon
|
#FFFACD
|
|
LightBlue
|
#ADD8E6
|
|
LightCoral
|
#F08080
|
|
LightCyan
|
#E0FFFF
|
|
LightGoldenRodYellow
|
#FAFAD2
|
|
LightGrey
|
#D3D3D3
|
|
LightGreen
|
#90EE90
|
|
LightPink
|
#FFB6C1
|
|
LightSalmon
|
#FFA07A
|
|
LightSeaGreen
|
#20B2AA
|
|
LightSkyBlue
|
#87CEFA
|
|
LightSlateBlue
|
#8470FF
|
|
LightSlateGray
|
#778899
|
|
LightSteelBlue
|
#B0C4DE
|
|
LightYellow
|
#FFFFE0
|
|
Lime
|
#00FF00
|
|
LimeGreen
|
#32CD32
|
|
Linen
|
#FAF0E6
|
|
Magenta
|
#FF00FF
|
|
Maroon
|
#800000
|
|
MediumAquaMarine
|
#66CDAA
|
|
MediumBlue
|
#0000CD
|
|
MediumOrchid
|
#BA55D3
|
|
MediumPurple
|
#9370D8
|
|
MediumSeaGreen
|
#3CB371
|
|
MediumSlateBlue
|
#7B68EE
|
|
MediumSpringGreen
|
#00FA9A
|
|
MediumTurquoise
|
#48D1CC
|
|
MediumVioletRed
|
#C71585
|
|
MidnightBlue
|
#191970
|
|
MintCream
|
#F5FFFA
|
|
MistyRose
|
#FFE4E1
|
|
Moccasin
|
#FFE4B5
|
|
NavajoWhite
|
#FFDEAD
|
|
Navy
|
#000080
|
|
OldLace
|
#FDF5E6
|
|
Olive
|
#808000
|
|
OliveDrab
|
#6B8E23
|
|
Orange
|
#FFA500
|
|
OrangeRed
|
#FF4500
|
|
Orchid
|
#DA70D6
|
|
PaleGoldenRod
|
#EEE8AA
|
|
PaleGreen
|
#98FB98
|
|
PaleTurquoise
|
#AFEEEE
|
|
PaleVioletRed
|
#D87093
|
|
PapayaWhip
|
#FFEFD5
|
|
PeachPuff
|
#FFDAB9
|
|
Peru
|
#CD853F
|
|
Pink
|
#FFC0CB
|
|
Plum
|
#DDA0DD
|
|
PowderBlue
|
#B0E0E6
|
|
Purple
|
#800080
|
|
Red
|
#FF0000
|
|
RosyBrown
|
#BC8F8F
|
|
RoyalBlue
|
#4169E1
|
|
SaddleBrown
|
#8B4513
|
|
Salmon
|
#FA8072
|
|
SandyBrown
|
#F4A460
|
|
SeaGreen
|
#2E8B57
|
|
SeaShell
|
#FFF5EE
|
|
Sienna
|
#A0522D
|
|
Silver
|
#C0C0C0
|
|
SkyBlue
|
#87CEEB
|
|
SlateBlue
|
#6A5ACD
|
|
SlateGray
|
#708090
|
|
Snow
|
#FFFAFA
|
|
SpringGreen
|
#00FF7F
|
|
SteelBlue
|
#4682B4
|
|
Tan
|
#D2B48C
|
|
Teal
|
#008080
|
|
Thistle
|
#D8BFD8
|
|
Tomato
|
#FF6347
|
|
Turquoise
|
#40E0D0
|
|
Violet
|
#EE82EE
|
|
VioletRed
|
#D02090
|
|
Wheat
|
#F5DEB3
|
|
White
|
#FFFFFF
|
|
WhiteSmoke
|
#F5F5F5
|
|
Yellow
|
#FFFF00
|
|
YellowGreen
|
#9ACD32
|
HTML text formatting
HTML uses tags for text formatting. Examples
of tags are: <B> for bold text or <I> for italic text. In order to choose the characteristics of a
text we use <FONT> tag. This tag has several attributes like color, face, size.
Color attribute refers to color of the text that will be surrounded by
tags <FONT> and</FONT>, <FACE> attribute shows
the font type and <SIZE> attribute shows the font size. Example:
<FONT
SIZE="4" FACE="ARIAL" COLOR="BLUE">
Your text here
</FONT>
Your text here
</FONT>
Click here to see
the result!
Or
Or
<FONT
SIZE="3" FACE="VERANDA" COLOR="RED">
Your text here
</FONT>
Your text here
</FONT>
Click here to see
the result!
Text written with "arial".
Text written with "courier new".
Text written with "veranda".
Text written with "verdana".
Text written with "cambria".
In order to change the default font size, we use one of the size attribute values that goes from 1 to 7 (1 for the smallest size and 7 for the largest). Example:
Text written with size 1.
Text written with size 2.
Text written with size 3.
Text written with size 4.
Text written with size 5.
Text written with size 6.
Text written with size 7.
Another examples of text formatting:
Text written with "arial".
Text written with "courier new".
Text written with "veranda".
Text written with "verdana".
Text written with "cambria".
In order to change the default font size, we use one of the size attribute values that goes from 1 to 7 (1 for the smallest size and 7 for the largest). Example:
Text written with size 1.
Text written with size 2.
Text written with size 3.
Text written with size 4.
Text written with size 5.
Text written with size 6.
Text written with size 7.
Another examples of text formatting:
<B>Your text is bold</B>
Yout text is bold
<I>Your text is italic</I>
Yout text is italic
<U>Your text is underlined</U>
Yout text is underlined
<CENTER>Your text is centered</CENTER>
Yout text is centered
When we want our text to be displayed on several lines we will use <BR> or <P> tags. <BR> comes from break rule and has no closing tag, while <P> comes from paragraph and the closing tag is not required.
HTML links
A HTML link is a sequence of commands that
perform links to a new document, an image or another HTML page. The link is
made between <A> tag. The name of these tag comes from anchor and the tag
will be use with HREF attribute. The line of code to insert a link in a web page
will have the following form:
<A
HREF="url">Link text</A>
Now let's see together how we can add a link to the "images.html" page:
<HTML>
<HEAD>
<TITLE>Links</TITLE>
</HEAD>
<BODY>
<CENTER><B>Links</B> <BR>
<A HREF="images.html">Text link</A></CENTER>
</BODY>
</HTML>
<HEAD>
<TITLE>Links</TITLE>
</HEAD>
<BODY>
<CENTER><B>Links</B> <BR>
<A HREF="images.html">Text link</A></CENTER>
</BODY>
</HTML>
Click here to see the
result!
The target attribute
Specifies where to open the linked document. It can be opened in a new browser window or in the same window. The example bellow will open the linked document in a new tab. Example:
The target attribute
Specifies where to open the linked document. It can be opened in a new browser window or in the same window. The example bellow will open the linked document in a new tab. Example:
<A
HREF="url" target="_blank">Link text</A>
Link types
Links can be of three
types:
- Internal
- to specific places on the page. Example:
href="#anchorname"
- Local
- to the other pages but on the same field. Example:
href="../images/html.png"
- Global
- to other domains. Example:
href="http://www.htmlbasic.com"
Link to an e-mail address
If we want to get some opinions from users, then the page should have a link to an e-mail address. The general form of a link to an e-mail address is:
<A
HREF="mailto: e-mail address">Send
me an e-mail</A>
Link colors
Each link of a web page has three colors:
- a
color for unvisited links
- a
color for visited links
- a
color for active links (when the mouse is over them)
For each color, of the
links above, is one attribute of the tag <BODY> with which we can change the default color:
- <LINK> for unvisited links
- <VLINK> for visited links
- <ALINK> for active connections
If we want that links in our page to be red when they aren't visited, black when they are visited and yellow when the mouse passes over them, we must use the following line code:
<BODY
LINK="#FF0000" VLINK="#000000" ALINK="#FFFF00">
HTML images
Images are defined with the <IMG> tag, accompanied
by SRC (source)
indicating the address or path to the image you want to use. The general form
of this tag will be:
<IMG
SRC="imagename.extension">
Let's write the code of a web page that contain an image:
<HTML>
<HEAD>
<TITLE>Images</TITLE>
</HEAD>
<BODY>
<CENTER><B>Images</B> <BR>
<IMG SRC="html.png"></CENTER>
</BODY>
</HTML>
<HEAD>
<TITLE>Images</TITLE>
</HEAD>
<BODY>
<CENTER><B>Images</B> <BR>
<IMG SRC="html.png"></CENTER>
</BODY>
</HTML>
Click here to see the
result!
The target attribute
Specifies an alternate text for an image, if the image cannot be displayed. The value of the ALT attribute is given by the author. It also provides information for an image if the user cannot view it from diffrent reasons. If you move the mouse cursor over the image, will apear the text written in the ALT attribute like in the following example:
The target attribute
Specifies an alternate text for an image, if the image cannot be displayed. The value of the ALT attribute is given by the author. It also provides information for an image if the user cannot view it from diffrent reasons. If you move the mouse cursor over the image, will apear the text written in the ALT attribute like in the following example:
<IMG
SRC="html.png" alt="logohtml">
Click here to see the
result!
Setting the image size
To specify the dimension of an image we use the height and width attributes. The attribute values are specified in pixels by default but they also can be represented as a percentage. Example:
Setting the image size
To specify the dimension of an image we use the height and width attributes. The attribute values are specified in pixels by default but they also can be represented as a percentage. Example:
<IMG
SRC="html.png" alt="logohtml" width="320"
height="240">
Alignment of an image
For align an image we are using ALIGN and VALIGN attributes. Functionality of these attributes are:
Align (horizontal alignment):
- right
- left
- center
Valign (vertical alignment):
- top
- bottom
- center
HTML lists
HTML lists can be ordered
or unordered:
Unordered list
Unordered list
- List
element 1
- List
element 2
- List
element 3
To create an unordered list we should use
tags like <UL> and </UL> (names of these
tags comes from "unordered list"). Each list item should be inserted
by the tag <LI> (list item). For a better understanding let's see how HTML
code for the list above looks like:
<HTML>
<HEAD>
<TITLE>Lists</TITLE>
</HEAD>
<BODY>
<UL>Unordered list
<LI>List element 1
<LI>List element 2
<LI>List element 3
</UL>
</HTML>
<HEAD>
<TITLE>Lists</TITLE>
</HEAD>
<BODY>
<UL>Unordered list
<LI>List element 1
<LI>List element 2
<LI>List element 3
</UL>
</HTML>
Using the <TYPE> attribute we can change the symbol in front of each item. The full circle is used by default when using an unordered list but we can change this symbol in square or empty circle.
-empty circle symbol:
<UL TYPE=circle>Unordered list
Click here to see
the result!
-full square symbol:
-full square symbol:
<UL TYPE=square>Unordered list
- List
element 1
- List
element 2
- List
element 3
To create an ordered list we should use tags
like <OL> and </OL>. Instead of numbers you
can replace them with Roman numbers or letters, both capital and lower-case.
Use the TYPE attribute to change the numbering like in the following example:
<OL
TYPE="a">
<OL TYPE="A">
<OL TYPE="i">
<OL TYPE="I">
<OL TYPE="A">
<OL TYPE="i">
<OL TYPE="I">
START is another attribute of the ordered lists and this specifies the number or letter with which the list would start.
<OL
TYPE="1" START="3">
<LI>List element 1
<LI>List element 2
<LI>List element 3
</OL>
<LI>List element 1
<LI>List element 2
<LI>List element 3
</OL>
Click here to see
the result!
<OL
TYPE="a" START="5">
<LI>List element 1
<LI>List element 2
<LI>List element 3
</OL>
<LI>List element 1
<LI>List element 2
<LI>List element 3
</OL>
Click here to see
the result!
HTML tables
HTML tables can be defined by using <TABLE> tag. A table in
HTML contains rows, defined by the<TR> tag, and cells, defined by the <TD> tag. <TR> tag comes from
"table row" while <TD> comes from "table data". A <TD> tag can contain
text, images, links, lists, forms and other tables. Let's see an example for a
simple table:
<TABLE
BORDER="1">
<TR>
<TD>Cell 1</TD>
<TD>Cell 2</TD>
</TR>
</TABLE>
<TR>
<TD>Cell 1</TD>
<TD>Cell 2</TD>
</TR>
</TABLE>
Click here to see
the result!
The BORDER attribute will specify how thick the border will be. If we don't specify a border attribute, the table will be displayed without borders. The color border can be set by using BORDERCOLORattribute.
Table dimensions
The BORDER attribute will specify how thick the border will be. If we don't specify a border attribute, the table will be displayed without borders. The color border can be set by using BORDERCOLORattribute.
Table dimensions
Can be defined by:
- Table HEIGHT - is a table attribute
that defines the height of the table. The value of this attribute can be
expressed in pixels or percentage of the page;
<TABLE HEIGHT="50">
- Table WIDTH - is a table attribute
that defines the width of the table. The value of this attribute can be
expressed in pixels or percentage of the page;
<TABLE WIDTH="100">
Other TABLE attributes:
CELLPADDING - offers opportunities of adjusting the white space of the table, that means the distance between cell borders and the content within;
Cell 1
|
Cell 2
|
CELLSPACING - defines the width of the border;
Cell 1
|
Cell 2
|
ROWSPAN - it is used to span multiple rows;
<TABLE
BORDER="1">
<TR><TD ROWSPAN="2">Cell 1</TD> <TD>Cell 2</TD></TR>
<TR><TD>Cell 3</TD></TR>
</TABLE>
<TR><TD ROWSPAN="2">Cell 1</TD> <TD>Cell 2</TD></TR>
<TR><TD>Cell 3</TD></TR>
</TABLE>
And the result:
Cell 1
|
Cell 2
|
Cell 3
|
COLSPAN - it is used to span multiple columns;
<TABLE
BORDER="1">
<TR><TD>Cell 1</TD> <TD>Cell 2</TD></TR>
<TR><TD COLSPAN="2">Cell 3</TD></TR>
</TABLE>
<TR><TD>Cell 1</TD> <TD>Cell 2</TD></TR>
<TR><TD COLSPAN="2">Cell 3</TD></TR>
</TABLE>
And the result:
Cell 1
|
Cell 2
|
Cell 3
|
|
HTML frames
HTML frames help us to display multiple html
documents in a web page. This frames are independent one of the other.
A frameset is a file that specifies how the screen is divided into frames or specifies the webpages to display in each frame of the main web page. Here we have an example that divides the page into two horizontal frames, one having 30% of the page and other 70%.
A frameset is a file that specifies how the screen is divided into frames or specifies the webpages to display in each frame of the main web page. Here we have an example that divides the page into two horizontal frames, one having 30% of the page and other 70%.
<FRAMESET
ROWS="30%,*"> </FRAMESET>
FRAMESET ROWS - defines the height that each frame will have;
FRAMESET COLS - defines the width that each frame will have;
FRAME SRC - defines the location of the web page that will be loaded into the frame;
Let's see an example of how to use all these attributes:
FRAMESET COLS - defines the width that each frame will have;
FRAME SRC - defines the location of the web page that will be loaded into the frame;
Let's see an example of how to use all these attributes:
<FRAMESET
ROWS="30%,*">
<FRAME SRC="title.php">
<FRAMESET COLS="20%,*">
<FRAME SRC="menu.php">
<FRAME SRC="pagecontent.php">
</FRAMESET>
<FRAME SRC="title.php">
<FRAMESET COLS="20%,*">
<FRAME SRC="menu.php">
<FRAME SRC="pagecontent.php">
</FRAMESET>
Other FRAME attributes
FRAMEBORDER - shows the frame border. A zero value hides the border;
BORDER - gives the border width;
FRAMESPACING - modifies the border width (attribute used on Internet Explorer);
Now let's see an example of how to build a web page that contains frames:
<HTML>
<HEAD>
<TITLE> HTML frames
</TITLE>
</HEAD>
<FRAMESET ROWS="30%,*" FRAMEBORDER="2" BORDER="2">
<FRAME SRC="title.php">
<FRAMESET COLS="20%,*" FRAMEBORDER="2" BORDER="2">
<FRAME SRC="menu.php">
<FRAME SRC="pagecontent.php">
</FRAMESET>
</HTML>
<HEAD>
<TITLE> HTML frames
</TITLE>
</HEAD>
<FRAMESET ROWS="30%,*" FRAMEBORDER="2" BORDER="2">
<FRAME SRC="title.php">
<FRAMESET COLS="20%,*" FRAMEBORDER="2" BORDER="2">
<FRAME SRC="menu.php">
<FRAME SRC="pagecontent.php">
</FRAMESET>
</HTML>
Click here to see the result!
HTML forms
HTML forms are used to obtain
useful information about users such as name, address, e-mail or phone. By these
forms users are transfering information to the server. This information is
entered by elements like text fields, checkboxes, submit buttons, radio
buttons, lists, textarea.
To create a form we will use <FORM> tag like in the following example:
To create a form we will use <FORM> tag like in the following example:
<FORM>
form elements
</FORM>
form elements
</FORM>
One of the most important form element is TYPE attribute of the <INPUT> tag. The attributes of this tag are:
- TYPE - determine the type of text
field. Example: text, textarea or password field;
- NAME - assign a name field to
refer to it later;
- SIZE - set the field size;
- MAXLENGHT - maximum number of
characters that can be introduced.
Text fields
Defined by: TYPE="text". Example:
<FORM>
Full name: <INPUT TYPE="text" NAME="fullname">
Address: <INPUT TYPE="text" NAME="address">
</FORM>
Full name: <INPUT TYPE="text" NAME="fullname">
Address: <INPUT TYPE="text" NAME="address">
</FORM>
Let's see the result:
Full name:
Adress:
Adress:
Password field
Defined by: TYPE="password". Example:
<FORM>
Password: <INPUT TYPE="password" NAME="password">
</FORM>
Password: <INPUT TYPE="password" NAME="password">
</FORM>
Let's see the result:
Password:
Radio buttons
Defined by: TYPE="radio". Example:
<FORM>
<INPUT TYPE="radio" NAME="choice" VALUE="yes"> Yes
<INPUT TYPE="radio" NAME="choice" VALUE="no">No
</FORM>
<INPUT TYPE="radio" NAME="choice" VALUE="yes"> Yes
<INPUT TYPE="radio" NAME="choice" VALUE="no">No
</FORM>
Let's see the result:
Yes
No
No
Check boxes
Defined by: TYPE="checkbox". Example:
<FORM>
<INPUT TYPE="checkbox" NAME="colors" VALUE="black"> Black
<INPUT TYPE="checkbox" NAME="colors" VALUE="white">White
</FORM>
<INPUT TYPE="checkbox" NAME="colors" VALUE="black"> Black
<INPUT TYPE="checkbox" NAME="colors" VALUE="white">White
</FORM>
Let's see the result:
Black
White
White
Submit button
Defined by: TYPE="submit". Example:
<FORM
NAME="input" ACTION="mailto:youremail@email.com"
METHOD="get">
NAME: <INPUT TYPE="text" NAME="username">
<INPUT TYPE="submit" VALUE="submit">
</FORM>
NAME: <INPUT TYPE="text" NAME="username">
<INPUT TYPE="submit" VALUE="submit">
</FORM>
Let's see the result:
Name:
Text area
Text area is used as a text edit field where the user can enter comments that will be sent later to the server.
The attributes that has to be specified of text area are <ROWS> and <COLUMNS>. Let's see an example:
<FORM
ACTION="mailto:youremail@email.com" METHOD="get">
<TEXTAREA ROWS="5" COLS="10" NAME="textarea">
Your text here
</TEXTAREA>
</FORM>
<TEXTAREA ROWS="5" COLS="10" NAME="textarea">
Your text here
</TEXTAREA>
</FORM>
Let's see the result:
Drop down lists
To create a drop down list we will use SELECT tag followed by OPTION tags. The OPTION tags represents the available choices for the user. Let's see how to do it:
<FORM
ACTION="mailto:youremail@email.com" METHOD="get">
Which continent you belong?
<SELECT NAME="continent">
<OPTION> Select continent </OPTION>
<OPTION> Asia </OPTION>
<OPTION> Africa </OPTION>
<OPTION> North America </OPTION>
<OPTION> South America </OPTION>
<OPTION> Antartica </OPTION>
<OPTION> Europe </OPTION>
<OPTION> Australia </OPTION>
</SELECT>
</FORM>
Which continent you belong?
<SELECT NAME="continent">
<OPTION> Select continent </OPTION>
<OPTION> Asia </OPTION>
<OPTION> Africa </OPTION>
<OPTION> North America </OPTION>
<OPTION> South America </OPTION>
<OPTION> Antartica </OPTION>
<OPTION> Europe </OPTION>
<OPTION> Australia </OPTION>
</SELECT>
</FORM>
Let's see the result:
Which continent you
belong?
Upload forms
This tag allows the user to choose one or several items from a list. The SELECT tag has the SIZEattribute that shows how many options will be shown at once before scrolling and it is followed byOPTION tags.
<FORM
ACTION="mailto:youremail@email.com" METHOD="get">
Continents you have visited
<SELECT MULTIPLE NAME="continent" SIZE="4">
<OPTION VALUE="asia"> Asia </OPTION>
<OPTION VALUE="africa"> Africa </OPTION>
<OPTION VALUE="namerica"> North America </OPTION>
<OPTION VALUE="samerica"> South America </OPTION>
<OPTION VALUE="antarctica"> Antartica </OPTION>
<OPTION VALUE="europe"> Europe </OPTION>
<OPTION VALUE="australia"> Australia </OPTION>
</SELECT>
</FORM>
Continents you have visited
<SELECT MULTIPLE NAME="continent" SIZE="4">
<OPTION VALUE="asia"> Asia </OPTION>
<OPTION VALUE="africa"> Africa </OPTION>
<OPTION VALUE="namerica"> North America </OPTION>
<OPTION VALUE="samerica"> South America </OPTION>
<OPTION VALUE="antarctica"> Antartica </OPTION>
<OPTION VALUE="europe"> Europe </OPTION>
<OPTION VALUE="australia"> Australia </OPTION>
</SELECT>
</FORM>
Let's see the result:
Selection forms
An uploading form creates an interface for the user that allows him to upload files.
An uploading form contains three major parts
- The
hidden field that limits the file size for uploading;
- The
input field where the user can upload the file by typing the URL or by
clicking the BROWSEbutton;
- The TYPE attribute which must
have FILE value.
<INPUT
TYPE="hidden" NAME="MAX_FILE_SIZE" VALUE="50">
<INPUT NAME="file" TYPE="file">
<INPUT NAME="file" TYPE="file">
Let's see the result:
Emailing form
Emailing form
The emailing form has the following attributes:
- method
- there are two ways of sending information GET or POST. GET is basically for
retrieving data while POST may
involve emailing data without displaying any of the information to the
visitor.
- action
- specifies the URL to send the data to.
<FORM
METHOD="post" ACTION="mailto:youremail@email.com">
Your data here
</FORM>
Your data here
</FORM>
Click here to see the result!
Cambodian Riel Converter
No comments:
Post a Comment