Html 101


Published on

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Html 101

  1. 1. Multimedia Lab Web Design Course Prepared by: Mr.Aldrin C. Go
  2. 2. Contents <ul><li>What is HTML? </li></ul><ul><li>What are HTML tags? </li></ul><ul><li>Basics of HTML Language </li></ul><ul><li>Text formatting </li></ul><ul><li>Paragraphs </li></ul><ul><li>Embedding media objects </li></ul><ul><li>Exercise </li></ul>
  3. 3. What Is HTML? <ul><li>HTML: </li></ul><ul><ul><li>Stands for H yper T ext M arkup L anguage </li></ul></ul><ul><ul><li>Interpreted language (no compiler) </li></ul></ul><ul><ul><li>Defines a Web document’s design and layout </li></ul></ul><ul><ul><li>Uses a variety of tags and attributes </li></ul></ul><ul><ul><li>Consists of straight text (not case sensitive) </li></ul></ul><ul><li>Use text editors to create HTML documents </li></ul><ul><li>for example (notepad) </li></ul>
  4. 4. What Are HTML Tags? <ul><li>HTML tags are essentially commands that instruct Web browsers how to display a document. </li></ul><ul><li>HTML tags are enclosed in brackets and look like this: </li></ul><ul><li><HTML Tag> </li></ul>
  5. 5. HTML Tags <ul><li>HTML tags typically appear in pairs, or sets. </li></ul><ul><li>Each set includes a beginning and closing tag. </li></ul><ul><li>The closing tag is preceded by a forward slash. </li></ul><ul><li>For example, to set the word “TechRepublic” as bold, the HTML code would look like this: </li></ul><ul><li><b>TechRepublic</b> </li></ul>
  6. 6. Basics of HTML language <ul><li><html> (tells a browser that this is an HTML document.) </li></ul><ul><li><head> (contain information about the document ,does not appear to user) </li></ul><ul><li><title> New Page 1 </title> </li></ul><ul><li></head> </li></ul><ul><li><body> (contains all the contents of the document) </li></ul><ul><li>This is my first web page </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  7. 7. Basics of HTML language <ul><li><HTML> </li></ul><ul><li><HEAD> </li></ul><ul><li><TITLE>Page with background image </li></ul><ul><li></TITLE> </li></ul><ul><li></HEAD> </li></ul><ul><li><BODY BACKGROUND=&quot;pics/Blue hills.jpg&quot;> </li></ul><ul><li><B>Page with background image.</B> </li></ul><ul><li></BODY> </li></ul><ul><li></HTML> </li></ul>
  8. 8. Basics of HTML language
  9. 9. Basics of HTML language <ul><li><HTML> </li></ul><ul><li><HEAD> </li></ul><ul><li><TITLE>Page with background image </li></ul><ul><li></TITLE> </li></ul><ul><li></HEAD> </li></ul><ul><li><BODY BGCOLOR=“#CCFFFF&quot;> </li></ul><ul><li>Page with Back Color </li></ul><ul><li></BODY> </li></ul><ul><li></HTML> </li></ul>
  10. 10. Basics of HTML language
  11. 11. Editing in HTML pages (Text formatting) <ul><li><HTML> </li></ul><ul><li>< BODY BGCOLOR =&quot;#FFFF0F&quot; TEXT =&quot;#F000F0&quot; LINK =&quot;#0000FF “ VLINK =&quot;#00FF00 “ ALINK =&quot;#FF0000&quot;> </li></ul><ul><li>Some Text </li></ul><ul><li><B><I><U> </li></ul><ul><li>< FONT SIZE =&quot;5&quot; FACE =&quot;IMPACT&quot; COLOR =&quot;#00FF00&quot;> </li></ul><ul><li><P>How is this </li></ul><ul><li></ FONT > </li></ul><ul><li></U></I></B> </li></ul><ul><li></ BODY > </li></ul><ul><li></HTML> </li></ul>
  12. 12. Editing in HTML pages (Text formatting)
  13. 13. Editing in HTML pages (Text formatting) <ul><li><HTML> </li></ul><ul><li><BODY BGCOLOR=&quot;#AF3F0F&quot; TEXT=&quot;#FFFFF0&quot; LINK=&quot;#0000FF&quot; </li></ul><ul><li>VLINK=&quot;#00FF00&quot; ALINK=&quot;#FF0000&quot;> </li></ul><ul><li>< H1 > This is largest header</ H1 ><Br> </li></ul><ul><li>< H6 > This is smallest Header</ H6 ><Br> </li></ul><ul><li>< S > This is Strike by S tag </S ><Br> </li></ul><ul><li>< STRIKE > This is Strike</ STRIKE ><Br> </li></ul><ul><li>< BIG > Big text </ BIG ><Br> </li></ul><ul><li>< SMALL > Small text </ SMALL ><Br> </li></ul><ul><li>< STRONG > Text strong and emphasized </ STRONG ><Br> </li></ul><ul><li>Normal < SUB > Sub text </ SUB ><Br> </li></ul><ul><li>Normal < SUP > Super text </ SUP ><Br> </li></ul><ul><li>< KBD > KBD text</ KBD > Also SAMP, TT, and CODE tags have the same effect <Br> </li></ul><ul><li><!-- comment </li></ul><ul><li>This text will not appeare </li></ul><ul><li>--> </li></ul><ul><li>New Text </li></ul><ul><li></BODY> </li></ul><ul><li></HTML> </li></ul>
  14. 14. Editing in HTML pages (Text formatting)
  15. 15. Editing in HTML pages (Paragraphs) <ul><li><HTML> </li></ul><ul><li><BODY BGCOLOR=&quot;gray&quot; TEXT=&quot;white&quot; LINK=&quot;#0000FF&quot; </li></ul><ul><li>VLINK=&quot;#00FF00&quot; ALINK=&quot;#FF0000&quot;> </li></ul><ul><li>< P ALIGN =&quot;left&quot;>You can align text in left.</P> </li></ul><ul><li>< PRE > Pre formatted paragraph </li></ul><ul><li>you can see the new line .. (preformatted paragraph has fixed font and preserve line after it (line appear without br tag) ) </ PRE > </li></ul><ul><li>< BLOCKQUOTE > </li></ul><ul><li>In cases that you want to emphasis on a paragraph in your </li></ul><ul><li>text you can use this tag. It will indent your text from both </li></ul><ul><li>sides. </li></ul><ul><li></ BLOCKQUOTE > </li></ul><ul><li>< DIV align = &quot;right&quot;>Right Aligned DIV</ DIV > (tag defines a division/section in a document) </li></ul><ul><li>Horizontal Bars :< BR > </li></ul><ul><li>width in percent </li></ul><ul><li>< HR WIDTH =&quot;50%&quot; color =&quot;#FF0000&quot; align =&quot;left“ ></HR> </li></ul><ul><li>width in pixels </li></ul><ul><li>< HR WIDTH =&quot;100&quot; color =&quot;#00FFFF&quot; align =&quot;center“ > < /HR> </li></ul><ul><li></BODY> </li></ul><ul><li></HTML> </li></ul>
  16. 16. Editing in HTML pages (Paragraphs)
  17. 17. Editing in HTML pages (Embedding Media Objects) <ul><li>Images: </li></ul><ul><li>< IMG src = &quot;pics/CAR1.JPG&quot; alt =&quot;car1&quot; border =2 width =100 height =100 hspace =50 vspace =10 align =left> </li></ul><ul><li>This is an example of </li></ul><ul><li>how image can be embedded </li></ul><ul><li>< BR clear = left> </li></ul><ul><li>Delete left align </li></ul><ul><li>Note : </li></ul><ul><li>1: align={top,bottom, right, left, middle} </li></ul><ul><li>2: To delete align: <BR clear= ..> </li></ul>
  18. 18. Editing in HTML pages (Embedding Media Objects)
  19. 19. Editing in HTML pages (Embedding Media Objects) <ul><li>Marques : </li></ul><ul><ul><li>< MARQUEE direction =&quot;left&quot; bgcolor =&quot;fuchsia&quot; width =&quot;500&quot; </li></ul></ul><ul><ul><li>loop =&quot;infinite&quot; vspace =20 hspace =20 scrolldelay =10 </li></ul></ul><ul><ul><li>scrollamount = 3 behavior = “scroll” > </li></ul></ul><ul><ul><li>This is Marquee example </li></ul></ul><ul><ul><li></ MARQUEE > </li></ul></ul><ul><ul><li>Notes: </li></ul></ul><ul><ul><li>behavior= {scroll, alternate, slide} </li></ul></ul><ul><ul><li>Scrollamount means : how many pixels to jump </li></ul></ul><ul><ul><li>Scrolldelay means : how many milliseconds to wait after each jump </li></ul></ul>
  20. 20. Editing in HTML pages (Embedding Media Objects)
  21. 21. Editing in HTML pages (Embedding Media Objects) <ul><li>Videos: </li></ul><ul><ul><li>< IMG dynsrc = &quot;video file&quot; border = {0,n} start = {&quot;mouseover&quot;, &quot;fileopen&quot;} loop = {infinite, m} loopdelay = &quot;time&quot;> </li></ul></ul><ul><ul><li>< embed src =&quot;file . wav,avi&quot; width = … hight = … loop = {true , false}> </li></ul></ul><ul><ul><li>Example : </li></ul></ul><ul><ul><li>< IMG dynsrc = &quot;video/match.avi&quot; border = 2 start =&quot;fileopen&quot; </li></ul></ul><ul><ul><li>loop =2 loopdelay = &quot;2&quot;> </li></ul></ul><ul><ul><li><p>< embed src =&quot;sounds/blow1.wav&quot; width =200 hight =200 </li></ul></ul><ul><ul><li>loop = false> </li></ul></ul><ul><ul><li>Note : You can open any media type file. </li></ul></ul>
  22. 22. Editing in HTML pages (Embedding Media Objects)
  23. 23. Editing in HTML pages (Embedding Media Objects) <ul><li>Sounds: </li></ul><ul><ul><li>Background sound : </li></ul></ul><ul><ul><li>< head > </li></ul></ul><ul><ul><li>< bgsound src =&quot; … &quot; loop = {#,-1}> </li></ul></ul><ul><ul><li></ head > </li></ul></ul>
  24. 24. Put all together (exercise )