PL2235 2009 1 HTML

0 %
100 %
Information about PL2235 2009 1 HTML
Education

Published on May 29, 2009

Author: aliamat

Source: slideshare.net

Description

HTML lesson for PL2235 students

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

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? PL 2235 ICT in EL Teaching

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. PL 2235 ICT in EL Teaching

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:  = &copy; PL 2235 ICT in EL Teaching

HTML (version 4) > XML > XHTML.

Tags & entities:  = &copy;

Why HTML? Non-OS specific. Version? What version? Can be interactive and controlled easily. It just works! PL 2235 ICT in EL Teaching

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 . PL 2235 ICT in EL Teaching

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

<HTML>

<HEAD>

<TITLE>

</TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>

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 ). PL 2235 ICT in EL Teaching

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. PL 2235 ICT in EL Teaching

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 &quot;-//W3C//DTD HTML 4.01//EN&quot; &quot;http://www.w3.org/TR/html4/ strict .dtd&quot;> <!DOCTYPE html PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional //EN&quot; &quot;http://www.w3.org/TR/html4/ loose .dtd&quot;> <!DOCTYPE html PUBLIC &quot;-//W3C//DTD HTML 4.01 Frameset //EN&quot; &quot;http://www.w3.org/TR/html4/ frameset .dtd&quot;> http://www.w3.org/QA/2002/04/valid-dtd-list.html PL 2235 ICT in EL Teaching

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

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

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

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”> PL 2235 ICT in EL Teaching

<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. PL 2235 ICT in EL Teaching

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> . PL 2235 ICT in EL Teaching

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

<BODY BGCOLOR=“ green ” …>

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. PL 2235 ICT in EL Teaching

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:&nbsp; 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> . PL 2235 ICT in EL Teaching

and see what happen:

<H1> Unit 7:&nbsp; 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. PL 2235 ICT in EL Teaching

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/ PL 2235 ICT in EL Teaching

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. PL 2235 ICT in EL Teaching

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 ” PL 2235 ICT in EL Teaching

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” PL 2235 ICT in EL Teaching

.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. PL 2235 ICT in EL Teaching

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. PL 2235 ICT in EL Teaching

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

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:

Now <TABLE BORDER=“0” BGCOLOR=“blue” ALIGN=“center”> <TR> <TD><IMG SRC=“frog.jpg”> </TD> <TD>Frogs can live… </TD> </TR> </TABLE> PL 2235 ICT in EL Teaching

<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”> PL 2235 ICT in EL Teaching

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. PL 2235 ICT in EL Teaching

<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. PL 2235 ICT in EL Teaching

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 PL 2235 ICT in EL Teaching

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

Add a comment

Related presentations

Related pages

SPIEGEL WISSEN 1/2009 - Inhaltsverzeichnis

SPIEGEL WISSEN 1/2009. Dieses Heft kaufen. Abo-Angebote. SPIEGEL WISSEN lesen oder verschenken und Vorteile sichern! Jetzt Abo sichern. Ältere SPIEGEL ...
Read more

NBOG Documents - nbog.eu

NBOG Documents. In the light of NBOG’s terms of reference ... Mar 2009: NBOG BPG 2009-1: Guidance on Design-Dossier Examination and Report Content : Mar ...
Read more

Paranormal Activity – Wikipedia

November 2009 seine Kinopremiere. Handlung. Mittelpunkt des im Herbst 2006 spielenden Films ist das junge Pärchen Micah und Katie, das in einem Haus in ...
Read more

My sofa project - desire to inspire - desiretoinspire.net

My sofa project. Posted on Sun, 1 ... 1 Mar 2009 | mette/ungt blod that's great kim! which ikea product did you use? ... Some HTML allowed: ...
Read more

Bilder "Internationales Fest 2009 /2011" - Bilder ...

Bilder "Internationales Fest 2009 /2011" ... www.badische-zeitung.de/fotos-das-megawochenende-in-offenburg--19480019.html | 1 ...
Read more

Aktuelle Neuheitenprogramme - Märklin - Neuheiten

Sommer-Neuheiten 2009 (16 Seiten, 1,89 MB) Produkte anzeigen. PDF ... Spur 1 Gleisplakat 2008 (1 Seite Din A1, 1.1 MB) PDF Sommer-Neuheiten 2008
Read more

BNatSchG - Einzelnorm - juris BMJ - Startseite

§ 15 Abs. 2 Satz 1 idF d. G v. 29.7.2009 I 2542: Hessen - Abweichung durch § 7 Abs. 1 Satz 1 des Hessischen Ausführungsgesetzes zum ...
Read more

mlaiacker.de - Bilder/2009/2009_01_04-tempelhof/img_0832 ...

Exif Daten: Aufgenommen am: 04.01.2009 um 16:35: Kamera: Canon EOS 400D DIGITAL ... 13:43:07 up 9 days, 17:34, 0 users, load average: 1.32, 1.44, 1.46
Read more

Polizeiliche Kriminalstatistik 2009 - MissbrauchStatistik

KriminalStatistik 2009, Missbrauch Statistik 2009 ... /Missbrauch-Statistik-2009.1.0.html. ... Insgesamt fehlen allein schon 1.634 Kinder,
Read more