Your SlideShare is downloading. ×
Html 101
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Html 101

1,097
views

Published on

Published in: Technology

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,097
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
55
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×