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? <ul><li>Picture this: </li></ul><ul><ul><li>“ There is a very tall tree on an island which is located in the...
What is HTML? <ul><li>Now try to IMAGINE this: </li></ul><ul><ul><li>“ Middle a my on there tall is over building located ...
What is HTML? <ul><li>HTML is a language read by browsers as an instruction on what and how to ‘behave’ or show contents. ...
More about HTML <ul><li>HTML (version 4) > XML > XHTML. </li></ul><ul><li>Tags & entities:    =  &copy; </li></ul>PL 2235...
Why HTML? <ul><li>Non-OS specific. </li></ul><ul><li>Version? What version? </li></ul><ul><li>Can be interactive and contr...
How do I create a HTML document? <ul><li>Using WYSIWYG editor or </li></ul><ul><li>Using  Notepad , Wordpad or other  SIMP...
Notepad <ul><li><HTML> </li></ul><ul><li><HEAD> </li></ul><ul><li><TITLE> </li></ul><ul><li></TITLE> </li></ul><ul><li></H...
Next? <ul><li>Click File >  Save as . </li></ul><ul><li>Create  New folder  on your  Desktop . </li></ul><ul><li>New folde...
DOCTYPE declaration <ul><li>You can add a DOCTYPE declaration to specify the version of HTML upon which the page is based....
Declaration: before <HTML> <ul><li><!DOCTYPE html PUBLIC &quot;-//W3C//DTD HTML 4.01//EN&quot;  &quot;http://www.w3.org/TR...
Webpage metadata <ul><li><META NAME=“author” CONTENT=“Aliamat Omar Ali”> </li></ul><ul><li><META NAME=“description” CONTEN...
<title> <ul><li>Type:  My first webpage  in between <title> and </title>. </li></ul><ul><li>“ Ctrl + S” to save. </li></ul...
<body> <ul><li>To customised the attributes of your webpage, try this: </li></ul><ul><ul><li><BODY BGCOLOR=“green” FONT=“b...
Anatomy of the HTML codes <ul><li><BODY BGCOLOR=“ green ” …> </li></ul>PL 2235 ICT in EL Teaching tag attribute Only at th...
Text formating <ul><li>Choose  3 paragraphs  from p. 21, and type them (including the unit title and instructions) to a ne...
Try this out <ul><li>and see what happen: </li></ul><ul><ul><li><H1> Unit 7:&nbsp;   In the jungle. </H1> </li></ul></ul><...
Other tags <ul><li>You may also want to try  <I> ,  <B> ,  <U> ,  <BIG> , <SMALL> ,  <SUP> ,  <STRIKE> ,  < CENTER >  or  ...
<FONT> <ul><li>To customise font face, size and colour, add attributes and their value: </li></ul><ul><ul><li><FONT FACE=“...
<IMG SRC=“ PATH ”> <ul><li>Just imagine this : In order to get to my office, you have to follow this path: </li></ul><ul><...
<IMG SRC=“frog.jpg”> <ul><li>Make sure you know which image to use. </li></ul><ul><li>VIN : get the path. </li></ul><ul><u...
<IMG> <ul><li>.jpg or .gif. </li></ul><ul><li>Other attributes : </li></ul><ul><ul><li>BORDER=“2” </li></ul></ul><ul><ul><...
Table <ul><li>This is not easy; but this tag will make your webpage looks better. </li></ul><ul><li>Just like <BODY> and <...
Vocabulary in <TABLE> <ul><li>Attributes: </li></ul><ul><ul><li><TABLE BORDER=“2” BGCOLOR=“yellow” ALIGN=“center” CELLSPAC...
<TABLE> FYI <ul><li>Tables are constructed sideways (left to right). </li></ul><ul><li>It means if you want to make one ta...
Now <ul><li><TABLE BORDER=“0” BGCOLOR=“blue” ALIGN=“center”> </li></ul><ul><li><TR> </li></ul><ul><li><TD><IMG SRC=“frog.j...
Then <ul><li>Customise your cell. </li></ul><ul><ul><li><TD HEIGHT=“50” VALIGN=“bottom”> </li></ul></ul><ul><ul><li><TR WI...
Other useful tags <ul><li><EMBED SRC=“”> </li></ul><ul><ul><li>Value “Frog.wav” </li></ul></ul><ul><ul><li>Value “Frog.mov...
Activity <ul><li>Convert the page to multimedia webpage. </li></ul><ul><li>The webpage should contain: </li></ul><ul><ul><...
Conclusion <ul><li>HTML is just another language with its own system. </li></ul><ul><li>Like other language, you may need ...
Upcoming SlideShare
Loading in …5
×

PL2235 2009 1 HTML

683 views

Published on

HTML lesson for PL2235 students

Published in: Education, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
683
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

PL2235 2009 1 HTML

  1. 1. Hypertext Markup Language PL 2235 ICT in English Language Teaching 10 May 2009
  2. 2. Happy Mother’s Day PL 2235 ICT in EL Teaching
  3. 3. What is HTML? <ul><li>Picture this: </li></ul><ul><ul><li>“ There is a very tall tree on an island which is located in the middle of Tasek Merimbun”. </li></ul></ul><ul><ul><li>“ 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 ”. </li></ul></ul><ul><li>Every time a word is either added, taken away or replaced, the picture changed . </li></ul>PL 2235 ICT in EL Teaching
  4. 4. What is HTML? <ul><li>Now try to IMAGINE this: </li></ul><ul><ul><li>“ Middle a my on there tall is over building located school an is Gadong the very ”. </li></ul></ul><ul><ul><li>What happen? </li></ul></ul><ul><ul><ul><li>Impossible to picture. </li></ul></ul></ul><ul><ul><ul><li>Syntax error . </li></ul></ul></ul><ul><ul><li>What can be learned from this? </li></ul></ul>PL 2235 ICT in EL Teaching
  5. 5. What is HTML? <ul><li>HTML is a language read by browsers as an instruction on what and how to ‘behave’ or show contents. </li></ul><ul><li>HTML coding consists of <tags>. </li></ul><ul><li>When writing tags, you can use upper or lowercase letters. </li></ul><ul><li>HTML standards: set by W3C. </li></ul>PL 2235 ICT in EL Teaching
  6. 6. More about HTML <ul><li>HTML (version 4) > XML > XHTML. </li></ul><ul><li>Tags & entities:  = &copy; </li></ul>PL 2235 ICT in EL Teaching
  7. 7. Why HTML? <ul><li>Non-OS specific. </li></ul><ul><li>Version? What version? </li></ul><ul><li>Can be interactive and controlled easily. </li></ul><ul><li>It just works! </li></ul>PL 2235 ICT in EL Teaching
  8. 8. How do I create a HTML document? <ul><li>Using WYSIWYG editor or </li></ul><ul><li>Using Notepad , Wordpad or other SIMPLE text editors. </li></ul><ul><li>Notepad: handcoding, thorough proofreading, patience = REQUIRED . </li></ul>PL 2235 ICT in EL Teaching
  9. 9. Notepad <ul><li><HTML> </li></ul><ul><li><HEAD> </li></ul><ul><li><TITLE> </li></ul><ul><li></TITLE> </li></ul><ul><li></HEAD> </li></ul><ul><li><BODY> </li></ul><ul><li></BODY> </li></ul><ul><li></HTML> </li></ul>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 /.
  10. 10. Next? <ul><li>Click File > Save as . </li></ul><ul><li>Create New folder on your Desktop . </li></ul><ul><li>New folder = My_HTML. </li></ul><ul><li>Save as: myfirsthtmlpage.html . </li></ul><ul><li>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. </li></ul><ul><li>Next : view your webpage by double-clicking the file (after you locate it on your Desktop ). </li></ul>PL 2235 ICT in EL Teaching
  11. 11. DOCTYPE declaration <ul><li>You can add a DOCTYPE declaration to specify the version of HTML upon which the page is based. </li></ul><ul><li>How? Just type one of three given next page depending on which DOCTYPE you use. </li></ul>PL 2235 ICT in EL Teaching
  12. 12. Declaration: before <HTML> <ul><li><!DOCTYPE html PUBLIC &quot;-//W3C//DTD HTML 4.01//EN&quot; &quot;http://www.w3.org/TR/html4/ strict .dtd&quot;> </li></ul><ul><li><!DOCTYPE html PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional //EN&quot; &quot;http://www.w3.org/TR/html4/ loose .dtd&quot;> </li></ul><ul><li><!DOCTYPE html PUBLIC &quot;-//W3C//DTD HTML 4.01 Frameset //EN&quot; &quot;http://www.w3.org/TR/html4/ frameset .dtd&quot;> </li></ul><ul><li>http://www.w3.org/QA/2002/04/valid-dtd-list.html </li></ul>PL 2235 ICT in EL Teaching
  13. 13. Webpage metadata <ul><li><META NAME=“author” CONTENT=“Aliamat Omar Ali”> </li></ul><ul><li><META NAME=“description” CONTENT=“HTML exercise”> </li></ul><ul><li><META NAME=“copyright” CONTENT=“Aliamat_07022009_1”> </li></ul><ul><li><META NAME=“keywords” CONTENT=“HTML exercise, text formating, HTML tags, PL 0122”> </li></ul>PL 2235 ICT in EL Teaching
  14. 14. <title> <ul><li>Type: My first webpage in between <title> and </title>. </li></ul><ul><li>“ Ctrl + S” to save. </li></ul><ul><li>“ Alt + Tab” to switch application. </li></ul><ul><li>“ Ctrl + R” to refresh you webpage and see the changes you have made. </li></ul><ul><li>VIN : always “Ctrl + S” your work. </li></ul>PL 2235 ICT in EL Teaching
  15. 15. <body> <ul><li>To customised the attributes of your webpage, try this: </li></ul><ul><ul><li><BODY BGCOLOR=“green” FONT=“black” TOPMARGIN=“40” BOTTOMMARGIN=“40” LEFTMARGIN=“80” RIGHTMARGIN=“80” link=“black”> </li></ul></ul><ul><li>However, no changes are to made to </BODY> . </li></ul>PL 2235 ICT in EL Teaching
  16. 16. Anatomy of the HTML codes <ul><li><BODY BGCOLOR=“ green ” …> </li></ul>PL 2235 ICT in EL Teaching tag attribute Only at the opening tag. value It can also be in form of #1234
  17. 17. Text formating <ul><li>Choose 3 paragraphs from p. 21, and type them (including the unit title and instructions) to a new blank document. </li></ul><ul><ul><li>You are going to copy them to your myfirstwebpage.html for formating. </li></ul></ul><ul><ul><li>Now Ctrl + C the unit title and instruction. </li></ul></ul><ul><ul><li>Alt + Tab , then Ctrl + V it to the .html document. </li></ul></ul>PL 2235 ICT in EL Teaching
  18. 18. Try this out <ul><li>and see what happen: </li></ul><ul><ul><li><H1> Unit 7:&nbsp; In the jungle. </H1> </li></ul></ul><ul><ul><li>You may want to press Enter . </li></ul></ul><ul><ul><li><H2> Look at the pictures and read about the animals. </H2> </li></ul></ul><ul><ul><li>View changes in your web browser . </li></ul></ul><ul><ul><li>Other heading tags: <H3> , <H4> , <H5> , or <H6> . </li></ul></ul>PL 2235 ICT in EL Teaching
  19. 19. Other tags <ul><li>You may also want to try <I> , <B> , <U> , <BIG> , <SMALL> , <SUP> , <STRIKE> , < CENTER > or <SUB> . </li></ul><ul><li>Other useful tags: </li></ul><ul><ul><li><BR> = break (single tag); and </li></ul></ul><ul><ul><li><P> = paragraph. </li></ul></ul><ul><li>Now, Ctrl + C one of your paragraphs below the instruction. </li></ul>PL 2235 ICT in EL Teaching
  20. 20. <FONT> <ul><li>To customise font face, size and colour, add attributes and their value: </li></ul><ul><ul><li><FONT FACE=“Comic Sans MS” SIZE=“5” COLOR =“#3300ff”> Frogs can live on land or in water. </FONT> </li></ul></ul><ul><ul><li>Search for and image (frog) on the internet. </li></ul></ul><ul><ul><li>One online clipart library which you may want to use is Hot Potatoes’ http://web.uvic.ca/hcmc/clipart/ </li></ul></ul>PL 2235 ICT in EL Teaching
  21. 21. <IMG SRC=“ PATH ”> <ul><li>Just imagine this : In order to get to my office, you have to follow this path: </li></ul><ul><ul><li>SHBIE > CLT > Library > Flyover > HEP > Cafeteria 1st floor > Green Room > Room 6. </li></ul></ul><ul><ul><li>What if: SHBIE > CLT > Library > Flyover > HEP > Cafeteria 1st floor > Green Room > Room 99. </li></ul></ul><ul><ul><li>Now, imagine Room 6 is a folder. </li></ul></ul>PL 2235 ICT in EL Teaching
  22. 22. <IMG SRC=“frog.jpg”> <ul><li>Make sure you know which image to use. </li></ul><ul><li>VIN : get the path. </li></ul><ul><ul><li>If the image is in the same folder with you’re my_HTML folder (recommended), just type the file name in value. </li></ul></ul><ul><ul><li>If it is in a sub-folder, make sure the path is correct: “ images/frog.jpg ” </li></ul></ul>PL 2235 ICT in EL Teaching
  23. 23. <IMG> <ul><li>.jpg or .gif. </li></ul><ul><li>Other attributes : </li></ul><ul><ul><li>BORDER=“2” </li></ul></ul><ul><ul><li>ALIGN=right </li></ul></ul><ul><ul><li>ALT=“This is a frog” </li></ul></ul><ul><ul><li>WIDTH=“50px” </li></ul></ul><ul><ul><li>HEIGHT=“30px” </li></ul></ul>PL 2235 ICT in EL Teaching
  24. 24. Table <ul><li>This is not easy; but this tag will make your webpage looks better. </li></ul><ul><li>Just like <BODY> and </BODY>, <TABLE> and </TABLE> are also needed to tell the web browsers what to show. </li></ul>PL 2235 ICT in EL Teaching
  25. 25. Vocabulary in <TABLE> <ul><li>Attributes: </li></ul><ul><ul><li><TABLE BORDER=“2” BGCOLOR=“yellow” ALIGN=“center” CELLSPACING=“10” CELLPADDING=“10”> </li></ul></ul><ul><li><TH> = table heading. </li></ul><ul><li><TR> = table row. </li></ul><ul><li><TD> = table column. </li></ul>PL 2235 ICT in EL Teaching
  26. 26. <TABLE> FYI <ul><li>Tables are constructed sideways (left to right). </li></ul><ul><li>It means if you want to make one table with 2 rows and 3 columns, the order is as illustrated: </li></ul>PL 2235 ICT in EL Teaching 1 2 3 4 5 6
  27. 27. Now <ul><li><TABLE BORDER=“0” BGCOLOR=“blue” ALIGN=“center”> </li></ul><ul><li><TR> </li></ul><ul><li><TD><IMG SRC=“frog.jpg”> </li></ul><ul><li></TD> </li></ul><ul><li><TD>Frogs can live… </li></ul><ul><li></TD> </li></ul><ul><li></TR> </li></ul><ul><li></TABLE> </li></ul>PL 2235 ICT in EL Teaching
  28. 28. Then <ul><li>Customise your cell. </li></ul><ul><ul><li><TD HEIGHT=“50” VALIGN=“bottom”> </li></ul></ul><ul><ul><li><TR WIDTH=“150” BGCOLOR=“EEF113”> </li></ul></ul><ul><li>Try this: </li></ul><ul><ul><li><TD COLSPAN=“2”> </li></ul></ul><ul><ul><li><TR ROWSPAN=“2”> </li></ul></ul>PL 2235 ICT in EL Teaching
  29. 29. Other useful tags <ul><li><EMBED SRC=“”> </li></ul><ul><ul><li>Value “Frog.wav” </li></ul></ul><ul><ul><li>Value “Frog.mov” </li></ul></ul><ul><ul><ul><li>Plugins required. </li></ul></ul></ul><ul><li><A HREF=“PATH”> Click here to go to p.22 </A> </li></ul><ul><ul><li>Path: Internal or external. </li></ul></ul>PL 2235 ICT in EL Teaching
  30. 30. Activity <ul><li>Convert the page to multimedia webpage. </li></ul><ul><li>The webpage should contain: </li></ul><ul><ul><li>text; </li></ul></ul><ul><ul><li>still photos; </li></ul></ul><ul><ul><li>videos; </li></ul></ul><ul><ul><li>Sound files; </li></ul></ul><ul><ul><li>external links. </li></ul></ul>PL 2235 ICT in EL Teaching
  31. 31. Conclusion <ul><li>HTML is just another language with its own system. </li></ul><ul><li>Like other language, you may need to practise it regularly: </li></ul><ul><ul><li>Competence. </li></ul></ul><ul><ul><li>Performance. </li></ul></ul><ul><li>Useful websites: </li></ul><ul><ul><li>www.htmlcodetutorial.com </li></ul></ul><ul><ul><li>http://www.w3.org/TR/html4/struct/global.html </li></ul></ul>PL 2235 ICT in EL Teaching

×