Lesson1 Intro to HTML

1,907 views
1,808 views

Published on

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

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

No notes for slide

Lesson1 Intro to HTML

  1. 1. Introduction to HTML H ype r T ext M arkup L anguage Dr. David Asirvatham Multimedia University Intro to HTML David Asirvatham
  2. 2. Basics of HTML <ul><li>HTML documents are divided into elements , which are marked by tags of the form: </li></ul><ul><ul><li><Tag Name> …..some text….. </Tag Name> </li></ul></ul><ul><li>The placement of the elements must obey the HTML rules of nesting </li></ul><ul><li>HTML documents will have a file extension .htm or .html </li></ul><ul><li> </li></ul>Intro to HTML David Asirvatham
  3. 3. Introduction <ul><li>In HTML, you can have bold and italicized , Larger and Smaller, or it could look type-written, just like a word processor. HTML code uses tags for BOLD, ITALIC, etc Example: <b>bold</b> <i>italicized</i> <font size=+2>Larger</font> <font size=-2>Smaller</font> </li></ul>Intro to HTML David Asirvatham
  4. 4. Structure of HTML Document <ul><li>HTML files are just normal text files... they usually have the extension of .htm, .html, or .shtml. HTML documents have two parts: head and body </li></ul><ul><li>Example <html> <head> <title> Title goes here </title> </head> <body> Body text goes here </body> </html> </li></ul>Intro to HTML David Asirvatham
  5. 5. Header <ul><li>Headings are used within the BODY of your HTML document. You will usually use a heading to tell what the following section of your page is about. The opening tag for a heading is <h y > and the closing tag is </h y > with y being the size of the heading... from 1 to 6. </li></ul><ul><li>Example </li></ul><ul><li><h2> Introduction to HTML.[H2] </h2> Introduction to HTML. [H2] </li></ul><ul><li><h3> Lesson 3 </h3> Lesson 3 </li></ul>Intro to HTML David Asirvatham
  6. 6. Paragraphs <ul><li>Example: </li></ul><ul><li><p> We are the music makers, and we are the dreamers of dreams </p> </li></ul>Intro to HTML David Asirvatham We are the music makers, and we are the dreamers of dreams
  7. 7. Text Formatting <ul><li><b> text </b> for bold <i> text </i> for italics <u> text </u> for underlined <tt> text </tt> for typewriter </li></ul>Intro to HTML David Asirvatham
  8. 8. Fonts <ul><li>Font Size </li></ul><ul><li><font size=#> adjusts font size </font> </li></ul><ul><li>Font Color </li></ul><ul><li><font color=?> changes font color </font> </li></ul><ul><li><font color=#ff0000>T</font> <font color=#ff7f00>E</font> </li></ul>Intro to HTML David Asirvatham
  9. 9. Preformatted Text <ul><li>Preformatted text </li></ul><ul><li><pre>Dear Auntie Monkey, I'd gladly borrow some carriage returns and s p a c e s today if you let me repay you ... tomorrow.</pre> </li></ul><ul><li>And the display will look strikingly similar: </li></ul><ul><li>Dear Auntie Monkey, I'd gladly borrow some carriage returns and s p a c e s today if you let me repay you ... tomorrow. </li></ul>Intro to HTML David Asirvatham
  10. 10. Aligning Text <ul><li>Aligning Text </li></ul><ul><li><p align=left> aligns a paragraph to the left </li></ul><ul><li><p align=right> aligns a paragraph to the right </li></ul><ul><li><p align=center> centers a paragraph </li></ul>Intro to HTML David Asirvatham
  11. 11. Link <ul><li>HTML Link </li></ul><ul><li>Example: </li></ul><ul><li><a href=&quot;http://www.mmu.edu.my/&quot;> click here</a> </li></ul><ul><li>And would appear in a browser like this: </li></ul><ul><li>Click here </li></ul>Intro to HTML David Asirvatham
  12. 12. Image <ul><li>Adding/Aligning Images </li></ul><ul><li><img src=&quot;?&quot;> </li></ul><ul><li><img align=?> </li></ul><ul><li>Example: </li></ul><ul><li><img align=left src=&quot;stuff/apple.gif&quot;> </li></ul><ul><li>Image Borders </li></ul><ul><li><img border=#> </li></ul><ul><li>Example </li></ul><ul><li><img border=5 src=&quot;stuff/apple.gif&quot;> </li></ul>Intro to HTML David Asirvatham
  13. 13. E-mail Link <ul><li>E-mail Link </li></ul><ul><li><a href=&quot;mailto: test@mmu.edu.my&quot;> David</a> </li></ul><ul><li>And the page would appear like this: </li></ul><ul><li>David </li></ul>Intro to HTML David Asirvatham
  14. 14. Background <ul><li>Background Images </li></ul><ul><li><body background= =&quot;stuff/apple.gif “> </li></ul><ul><li>Background Color </li></ul><ul><li><body bgcolor=green> </li></ul>Intro to HTML David Asirvatham
  15. 15. Lists <ul><li>Ordered Lists </li></ul><ul><li><ol> creates a numbered list </li></ul><ul><li><li> precedes each list item </li></ul><ul><li> <li> next item </li></ul><ul><li></ol> </li></ul><ul><li>Unordered Lists </li></ul><ul><li><ul> begins an unordered list </li></ul><ul><li><li> precedes each list item </li></ul><ul><li> <li> Next item </li></ul><ul><li></ul> </li></ul>Intro to HTML David Asirvatham
  16. 16. Blockquote <ul><li>Blockquote </li></ul><ul><li><blockquote> indents text on both sides </blockquote> </li></ul><ul><li>Blockquotes are dead easy. The HTML looks like this: </li></ul><ul><li><blockquote> You want the truth, huh? Last time someone asked me for the truth, I ended up on a Greyhound for Buffalo. </blockquote> </li></ul><ul><li>And the paragraph appears like this: </li></ul><ul><li>You want the truth, huh? Last time someone asked me for the truth, I ended up on a Greyhound for Buffalo. </li></ul>Intro to HTML David Asirvatham
  17. 17. Wrapping Text <ul><li>Wrapping text around an image </li></ul><ul><li><img align=left> aligns an image to the left side of the page </li></ul><ul><li><img align=right> aligns an image to the right side of the page </li></ul><ul><li><img align=top> aligns text along the top of an image </li></ul><ul><li><img align=bottom> aligns text along the bottom of an image </li></ul><ul><li><img align=middle> aligns text to the middle of an image </li></ul>Intro to HTML David Asirvatham

×