PL2235 2009 1 HTML

Hypertext Markup Language PL 2235 ICT in English Language Teaching 10 May 2009

Happy Mother’s Day PL 2235 ICT in EL Teaching

What is HTML?

Picture this:

“ There is a very tall tree on an island which is located in the middle of Tasek Merimbun”.

“ The sun is setting and there is a very tall coconut tree on a very small island which is located in the middle of South China Sea ”.

Every time a word is either added, taken away or replaced, the picture changed .

PL 2235 ICT in EL Teaching

What is HTML?

Now try to IMAGINE this:

“ Middle a my on there tall is over building located school an is Gadong the very ”.

What happen?

Impossible to picture.

Syntax error .

What can be learned from this?

What is HTML?

HTML is a language read by browsers as an instruction on what and how to ‘behave’ or show contents.

HTML coding consists of <tags>.

When writing tags, you can use upper or lowercase letters.

HTML standards: set by W3C.

More about HTML

HTML (version 4) > XML > XHTML.

Tags & entities:  = ©

Why HTML?

Non-OS specific.

Version? What version?

Can be interactive and controlled easily.

It just works!

How do I create a HTML document?

Using WYSIWYG editor or

Using Notepad , Wordpad or other SIMPLE text editors.

Notepad: handcoding, thorough proofreading, patience = REQUIRED .

Notepad

<HTML>

<HEAD>

<TITLE>

</TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>

All tags are enclosed by < >. These tags are structured as they are so that your web browser can read the document. PL 2235 ICT in EL Teaching Most HTML tags come in pairs. The closing tag has to begin with /.

Next?

Click File > Save as .

Create New folder on your Desktop .

New folder = My_HTML.

Save as: myfirsthtmlpage.html .

Note: It is important to end the name with .html ; otherwise it will be saved as .txt and this makes your page unreadable by your web browser.

Next : view your webpage by double-clicking the file (after you locate it on your Desktop ).

DOCTYPE declaration

You can add a DOCTYPE declaration to specify the version of HTML upon which the page is based.

How? Just type one of three given next page depending on which DOCTYPE you use.

Declaration: before <HTML>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/ strict .dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional //EN" "http://www.w3.org/TR/html4/ loose .dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset //EN" "http://www.w3.org/TR/html4/ frameset .dtd">

http://www.w3.org/QA/2002/04/valid-dtd-list.html

Webpage metadata

<META NAME=“author” CONTENT=“Aliamat Omar Ali”>

<META NAME=“description” CONTENT=“HTML exercise”>

<META NAME=“copyright” CONTENT=“Aliamat_07022009_1”>

<META NAME=“keywords” CONTENT=“HTML exercise, text formating, HTML tags, PL 0122”>

<title>

Type: My first webpage in between <title> and </title>.

“ Ctrl + S” to save.

“ Alt + Tab” to switch application.

“ Ctrl + R” to refresh you webpage and see the changes you have made.

VIN : always “Ctrl + S” your work.

<body>

To customised the attributes of your webpage, try this:

<BODY BGCOLOR=“green” FONT=“black” TOPMARGIN=“40” BOTTOMMARGIN=“40” LEFTMARGIN=“80” RIGHTMARGIN=“80” link=“black”>

However, no changes are to made to </BODY> .

Anatomy of the HTML codes

<BODY BGCOLOR=“ green ” …>

PL 2235 ICT in EL Teaching tag attribute Only at the opening tag. value It can also be in form of #1234

Text formating

Choose 3 paragraphs from p. 21, and type them (including the unit title and instructions) to a new blank document.

You are going to copy them to your myfirstwebpage.html for formating.

Now Ctrl + C the unit title and instruction.

Alt + Tab , then Ctrl + V it to the .html document.

Try this out

and see what happen:

<H1> Unit 7:  In the jungle. </H1>

You may want to press Enter .

<H2> Look at the pictures and read about the animals. </H2>

View changes in your web browser .

Other heading tags: <H3> , <H4> , <H5> , or <H6> .

Other tags

You may also want to try <I> , <B> , <U> , <BIG> , <SMALL> , <SUP> , <STRIKE> , < CENTER > or <SUB> .

Other useful tags:

<BR> = break (single tag); and

<P> = paragraph.

Now, Ctrl + C one of your paragraphs below the instruction.

<FONT>

To customise font face, size and colour, add attributes and their value:

<FONT FACE=“Comic Sans MS” SIZE=“5” COLOR =“#3300ff”> Frogs can live on land or in water. </FONT>

Search for and image (frog) on the internet.

One online clipart library which you may want to use is Hot Potatoes’ http://web.uvic.ca/hcmc/clipart/

Just imagine this : In order to get to my office, you have to follow this path:

SHBIE > CLT > Library > Flyover > HEP > Cafeteria 1st floor > Green Room > Room 6.

What if: SHBIE > CLT > Library > Flyover > HEP > Cafeteria 1st floor > Green Room > Room 99.

Now, imagine Room 6 is a folder.

Make sure you know which image to use.

VIN : get the path.

If the image is in the same folder with you’re my_HTML folder (recommended), just type the file name in value.

If it is in a sub-folder, make sure the path is correct: “ images/frog.jpg ”

<IMG>

.jpg or .gif.

Other attributes :

BORDER=“2”

ALIGN=right

ALT=“This is a frog”

WIDTH=“50px”

HEIGHT=“30px”

Table

This is not easy; but this tag will make your webpage looks better.

Just like <BODY> and </BODY>, <TABLE> and </TABLE> are also needed to tell the web browsers what to show.

Vocabulary in <TABLE>

Attributes:

<TABLE BORDER=“2” BGCOLOR=“yellow” ALIGN=“center” CELLSPACING=“10” CELLPADDING=“10”>

<TH> = table heading.

<TR> = table row.

<TD> = table column.

<TABLE> FYI

Tables are constructed sideways (left to right).

It means if you want to make one table with 2 rows and 3 columns, the order is as illustrated:

PL 2235 ICT in EL Teaching 1 2 3 4 5 6

Now

<TABLE BORDER=“0” BGCOLOR=“blue” ALIGN=“center”>

<TR>

<TD><IMG SRC=“frog.jpg”>

</TD>

<TD>Frogs can live…

</TD>

</TR>

</TABLE>

Then

Customise your cell.

<TD HEIGHT=“50” VALIGN=“bottom”>

<TR WIDTH=“150” BGCOLOR=“EEF113”>

Try this:

<TD COLSPAN=“2”>

<TR ROWSPAN=“2”>

Other useful tags

<EMBED SRC=“”>

Value “Frog.wav”

Value “Frog.mov”

Plugins required.

<A HREF=“PATH”> Click here to go to p.22 </A>

Path: Internal or external.

Activity

Convert the page to multimedia webpage.

The webpage should contain:

text;

still photos;

videos;

Sound files;

external links.

Conclusion

HTML is just another language with its own system.

Like other language, you may need to practise it regularly:

Competence.

Performance.

Useful websites:

www.htmlcodetutorial.com

http://www.w3.org/TR/html4/struct/global.html

PL2235 2009 1 HTML

0 comments

Notes on slide 1

Favorites, Groups & Events