Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Html 101

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to comment

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 )

    Be the first to comment

    Login to see the comments

  • siddhantdubey

    Aug. 9, 2013
  • MorrisBankston

    Feb. 4, 2016

Views

Total views

1,368

On Slideshare

0

From embeds

0

Number of embeds

4

Actions

Downloads

60

Shares

0

Comments

0

Likes

2

×