pl2235 2009 1 html

Hypertext Markup Language

Hypertext Markup Language

PL 2235ICT in English Language Teaching

10 May 2009

PL 2235ICT in English Language Teaching

10 May 2009

Happy Mother’s Day

2PL 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.


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>

Most HTML tags come in pairs.

All tags are enclosed by < >.

The closing tag has to begin with /.

These tags are structured as they are so that your web browser can read the document.


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” …>

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/


<IMG SRC=“PATH”>

• 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.


<IMG SRC=“frog.jpg”>

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

1 2 3

4 5 626PL 2235 ICT in EL Teaching

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

Education