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.

Lesson1 Intro to HTML

2,009 views

Published on

Published in: Technology, Design
  • Be the first to comment

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

×