Posted by: tonyteaching | August 3, 2008

HTML

Basically, HTML or “Hyper Text Markup Language” is syntaxes how we make our texts/writings can be presented in Web Browser (e.g. Internet Explorer, Mozilla Firefox, etc).

HTML is very easy, it is not Programming Language, just ‘PresentingLanguage …it is just about how to modifying (“Mark up”) our texts to have particular appearances in web browser.

NOTE: Here you can download the HTML tags: htmlcode.html (.html) or tony_htmlcode (.doc) to use it you have to open this file using any wordpad and save as html file, then open the html file using web browser.

How to make HTML page?

We can write HTML page using any simple Text Editor such as NotePad in windows, just Save As with extension html such as “filename.html“.

1. To let the web browser know that our texts is HTML codes, we have to start all of our texts with tag <HTML> and end the texts with </HTML>

so the structure must be like this:

<HTML>

….all of the texts….

</HTML>

2. Then, in the structure inside HTML codes actually is like Human Body: it has HEAD and BODY parts. so the more detail structure of HTML codes will be like this:

<HTML>

<HEAD>

…..

</HEAD>

<BODY>

…..

</BODY>

</HTML>

All texts between HEAD tags are information about the page,

All texts between BODY tags are content of the page,

Don’t worry HTML codes are not Case Sensitive so we can type using Capital or Lower case e.g. <BODY> or <body> or <BoDy>

———————————————————————————-

What Elements/Tags can we add in HEAD section (between HEAD tags)?

1. TITLE tags

<HEAD>

<title> This Text will appear in top bar of the browser. this text usually about the title of the page </title>

</HEAD>

2. META tags

<META> tag is a tag for in metadata (information about our page), so the attributes of META tags can be : name = the property

( it can be Author, Classification, Copyright, Description, Formatter, Generator, Keywords, Rating, Robots)

content = the property’s value

lang = the language used in the page

Remember META tag without closing tag

for example:

<HEAD>

<TITLE> Tony’s Website </TITLE>

<META name=”Keywords” content=”SMS, e-government, technology adoption” lang=”English”>

<META name=”description” content=”it is website about my PhD research”>

</HEAD>

——————————————————————————

What can we do with our content in BODY section (between BODY tags)?

0. The attributes of BODY tags can be:

BGCOLOR=”color for Background Color”

BACKGROUND=”URL if we want image background”

TEXT=”the text color”

LINK=”the hyperlinks color”

VLINK=”color for visited link”

ALINK=”color for active link when we click”

for example:

<body bg bgcolor=”white” link=”red” alink=”blue” vlink=”green”>

1. TEXT FORMATING

a. HEADING Tags :

<h1> the letter large size 1 (the largest h1) </h1>

<h2> the letter large size 1 (h2) </h2>

<h3> the letter large size 1 (h3) </h3>

<h4> the letter large size 1 (h4) </h4>

<h5> the letter large size 1 (h5) </h5>

b.If you want to make LARGE/SMALL FONT SIZE

<big> BIG tag</big>

<small> SMALL tag </small>

c. the ALIGN TEXT tag:

<p align=”left”> This is the sentence between ALIGN TEXT tag with LEFT alignment </p>

<p align=”center”> This is the sentence between ALIGN TEXT tag with CENTER alignment </p>

<p align=right> This is the sentence between ALIGN TEXT tag with RIGHT alignment </p>

<center> if just 1 sentence and we want to put on center page uses CENTER tag </center>

d.If you want to make BOLD text:

<strong> You can use STRONG tag </strong>

<b> You can use B tag </b>

e.If you want to make ITALIC text:

<cite> You can use CITE tag </cite>

<i> You can use I tag </i>

<EM> You can use EM tag </EM>

f.If you want to make UNDERLINE text, You can use U tag </u>

<u> underline text </u>

g.STRIKEOUT text, You can use STRIKE tag

<strike> the strikeout text </strike>

h.This is SUBSCRIPT text

<sub> You can use SUB tag </sub>

i.This is SUPERSCRIPT text

<sup> You can use SUP tag </sup>

j.If you want to show your text with same format/position in your html file:

<pre> uses PRE tag </pre>

<pre width=5> k.PRE tag with WIDTH=5</pre>

k.Making this take blinking by BLINK tag, but this is not blinking cause the browser

<Blink> this text is blink </Blink>

l. format text font with FONT tag and atribut SIZE= COLOR= FACE=

<FONT size=5 color=”red” face=”arial”> text … </FONT>

m. If we want to make the paragraph/texts indent –> by between BLOCKQUOTE

<BLOCKQUOTE>

hfisahfihsaifhsaihfishfishfisifsaifisafisfihsifsifisfisfisfisifsifisfisifsifsifisfis

<br> lojdopasjiosajdijsailfjdisaljfiosajfojsaofjo;sajfo;sajfo;jsao;fj;soajf;oj

<br> lojdopasjiosajdijsailfjdisaljfiosajfojsaofjo;sajfo;sajfo;jsao;fj;soajf;oj

</BLOCKQUOTE>

n. to make every text has exact same width, such as when we work with table –> use TT tag

<TT> text i will be the same width with text w, “i” “w” “k” “m” </TT>

2. DIVIDERS

a. Change line (break)

<br>

b. Double return space

<p> divider also can do with P tag; it means double return </p>

c. Horisontal Rule

<HR align=left size=2 width=100 noshade> a.This Horisontal rule with HR tag and atribut ALIGN=”..” SIZE=”..” WIDTH= NOSHADE (solid line,without shadow)

d. just space

&nbsp;

3. LIST

a. Bullet list …(Unordered List)

<ul> these are UNOREDERED LIST=BULLETS by UL tag and just LI for before each list

<li> list 1

<li> list 2

</ul>

or can be made by

<dir> these are DIRECTORY LIST=similar with Unordered List by DIR tag and just LI for before each list

<li> list 1

<li> list 2

</dir>

or

<dl> these are DEFINITION LISTby DL tag and just DT for term and DD for definition

<dt> this is the term or DT tag

<dd> this is the definition or DD tag

</dl>

b. Numbered list …(Ordered List)

<ol> these are OREDERED LIST=NUMBERING by OL tag and just LI for before each list

<li> list 1 with number

<li> list 2 with number

</ol>

4. HYPERLINKS

a. Hyperlink to other website

<a href=http://web address> teks </a>

b. Bookmark in the same page

<a href=”#heading“> b. This text if clicked will go to another part of this page,use text by A HREF=”#name” ,but previously give the target part name by A NAME=”name”<a>

c. Link to other webpage and specific bookmark

<a href=”http://www.tonydwisusanto.wordpress.com#target”>Link to Other Address and Specific Part,use text by A HREF=”http://address#name&#8221; ,but give the target part the name by A NAME=”name”</a>

d. an image as link

<A HREF=”web address> <IMG SRC=”images location” border=0> </A>

e. Email as Link

<A HREF=”mailto:tonydwisusanto@hotmail.com”> Click here if you want to email me </A>

Jika Ingin menampilkan fungsi suatu Hyperlink: Masukkan atribut TITLE=”..” ke dalam tag a href<br>

5. IMAGE

a. for displaying the image –> just use <IMG SRC=”URL”

with properties

ALT=”text appear while loading the image

WIDTH=inpixels

HEIGHT=inpixels

BORDER=inpixels (put atribute BORDER=0 in Image tag to delete the border)

HSPACE=inpixels (Horisontal Space between image and text) 

VSPACE=inpixels (Vertical Space between image and text) ISMA

b. we want for clickable maps image

<IMG SRC=”images/dog.bmp ALT=”dog picture” BORDER=2 HSPACE=4 VSPACE=4 ISMAP>

c. Align Image with texts/paragraph

use atribut align=”left/center/right and or valign=”top/center/bottom

for example:

<IMG src=”images/tony.jpg align =“right” valign=“center”>

d. Align Image in Web Page

Can be done by using paragraph tag P and attribute ALIGN=”left/center/right”

for example:

<P align=”center”>

<IMG SRC=”images/dog.bmp” ALT=”dog picture” BORDER=2 HSPACE=4 VSPACE=4 >

</p>

——-

e. Wraping Text around Image

Can be done by using attribute ‘align’

align=”left”
align=”right”
align=”top”
align=”middle”
align=”bottom”
align=”baseline”
align=”texttop”
align=”absmiddle”
align=”absbottom” // <![CDATA[//
// <![CDATA[//

———–

f. Defining the Path/Location of Image File

<IMG SRC=”dog.bmp”> means the image file “dog.bmp” is in the same directory with the html file

<IMG SRC=”images/dog.bmp”> means the image file “dog.bmp” is in directory “images” and the directory “image” resides (one directory) with the html file

<IMG SRC=”../dog.bmp” means the image file “dog.bmp” is in upper directory (parent directory) with the html file

<IMG SRC=”../../dog.bmp” means the image file “dog.bmp” is in 2 levels upper directory (parent of parent directory) with the html file

Commonly all images to be saved in “images” directory and this directory resides with other html files. But when we want to put/upload our website (all files) in certain Server, sometimes we don’t know exactly parent directory names or all directory names. So we can use relative address with “../images/dog.jpg”

<IMG SRC=“../images/dog.bmp”> means the image file “dog.bmp” is in directory “images” and the directory “images” is in parent directory of the html file

———————————-

6. SPECIAL CHARACTERS

&lt;

&gt;

&

&amp;

&quot;

&reg;

&copy;

——————————–

7. TABLE

Table is a matrix which holds othe objects like text, images, button, etc. Table is commonly useful for make our website lay out tidy.

First, we have to define the table by between tag <TABLE> </TABLE>

a. tag TABLE has properties:

BORDER=inpixels pr percent

WIDTH=inpixels or percent

CELLPADDING=inpixels its distance between Object inside the cell and its Border,

CELLSPACING=inpixels its distance between inside border of the cell and outside border of the table

b. Then we have to define the Row by between tag <TR> </TR> with attributes

ALIGN=LEFT/RIGHT/CENTER

VALIGN=TOP/MIDDLE/BOTTOM

c. Then we can define the Column by between tag <TR> </TR> with attributes: ALIGN=LEFT/RIGHT/CENTER

VALIGN=TOP/MIDDLE/BOTTOM

<TABLE BORDER=2 WIDTH=800 CELLPADDING=5 CELLSPACING=10>

<TR ALIGN=center VALIGN=middle>

<TD> First Row </TD>

</TR>

<TR ALIGN=left VALIGN=bottom>

<TD> Second Row </TD>

</TR>

</TABLE>

<TABLE BORDER=2 WIDTH=50%>

<TR ALIGN=center VALIGN=middle>

<TD> First Column of First Row </TD>

<TD> Second Column of First Row </TD>

</TR>

<TR ALIGN=middle VALIGN=bottom>

<TD> First Column of second Row </TD>

<TD> Second Column of second Row </TD>

</TR>

</TABLE>

d. ROW SPAN (to join 2 cells in a column) –> use TD ROWSPAN=number of row will be joined

when we write tag TR, it means there will be one ROW more. Between tag TR we have to define cells/column by TD /TD

when we combine two cells with TD ROWSPAN=2, we must have 2 rows table! then the cell in second row will be one less

<TABLE BORDER=2 WIDTH=500>

<TR ALIGN=center VALIGN=middle>

<TD> First Row, First Column </TD>

<TD ROWSPAN=2> Combination of 2 cells </TD>

<TD> First Row, Third Column </TD>

</TR>

<TR ALIGN=left VALIGN=bottom>

<TD> Second Row, First Column </TD>

<TD> Second Row, Third Column </TD>

</TR>

</TABLE>

e. COLUMN SPAN (to join 2 cells in a column) </b> –> use TD COLSPAN=number of column will be joined

when we combine two cells with TD COLSPAN=2, we must have 2 columns table! then the cell in second column in that row will be one less

<TABLE BORDER=2 WIDTH=500>

<TR ALIGN=center VALIGN=middle>

<TD> First Row, First Column </TD>

<TD COLSPAN=2> Combination of 2 cells </TD>

</TR>

<TR ALIGN=left VALIGN=bottom>

<TD> Second Row, First Column </TD>

<TD> Second Row, Second Column </TD>

<TD> Second Row, Third Column </TD>

</TR>

<TR>

<TD COLSPAN=3> Combination of 3 colomns </TD>

</TR>

</TABLE>

<br>

First Row, First Column Combination of 2 cells
Second Row, First Column Second Row, Second Column Second Row, Third Column
Combination of 3 colomns

f. TABLE BACKGROUND COLOR –> we can put tag BGCOLOR=”color” in tag TABLE (if we want appied in all table) or in tag TR (if we want applied in certain Row) or in TD (if just applied in one cell)

<TABLE BORDER=2 WIDTH=500 BGCOLOR=”green”>

<TR BGCOLOR=”red”>

<TD> First Row, First Column </TD>

<TD COLSPAN=2> Combination of 2 cells </TD>

</TR>

<TR ALIGN=left VALIGN=bottom>

<TD> Second Row, First Column </TD>

<TD> Second Row, Second Column </TD>

<TD BGCOLOR=”blue”> Second Row, Third Column </TD>

</TR>

</TABLE>

TIPS :

You can nest tables for getting a good design ( tables in a table)

Actually there are two tables ( one table in one cell of the other table)

We just want to show the second table by giving value to its BORDER

The First Table just for Lay Out design, so we don’t want to display the first table by giving BORDER=”0″

<TABLE border=”0″ width=”750″>

<TR>

<TD width=”25%”> </TD>

<TD width=”25%”>

<TABLE border=”2″ width=”100%”>

<TR>

<TD width=”20%”>1-</TD>

<TD width=”80%”>HTML</TD>

</TR>

<TR>

<TD width=”20%”>2-</TD>

<TD width=”80%”>C Prog</TD>

</TR>

<TR>

<TD width=”20%”>3-</TD>

<TD width=”80%”>JScript</TD>

</TR>

</TABLE>

</TD>

<TD width=”25%”> </TD>

</TR>

</TABLE>

8. FRAME

Frame is the way for dividing a web page into Multiple and Scrollable Regions (similar with TABLE, but TABLE is just 1 page).Every region can be given Individual/independent URL, Individual Name and Individual Size.

Frame is suitable for displaying Element that the user should always see (menu, copyright notices,title graphics,…)or

One frame pos/holding the query form and the other frame presenting the results.

FRAME SINTAX

<FRAME page is similar with HTML page, except the <BODY> </BODY>

is replaced by <FRAMESET> </FRAMESET>

FRAME document has no BODY and no tags normally placed in between BODY

FRAME document only has nested FRAMESET tags, FRAME tags, or NOFRAMES tag.

FRAMESET has attributes :

COLS=”..%,..%..%” or in pixels. (if we want to make 3 columns)

ROWS=”..%,..%” (if we want to make 2 rows)

we have to declare COLS= first then define ROWS= for every column; or declare ROWS= first then define COLS= for every row.

FRAME has attributes SRC=”URL” ; NAME=”window_name” ; SCROLLING=”yes/no/auto”; NORESIZE (if we want the frame can not be resize by user; MARGINWIDTH=”..” (left right margin); MARGINHEIGHT=”..” (upper and lower margin).


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

%d bloggers like this: