1 / 20

Basic HTML Tutorial

Basic HTML Tutorial . Amber Brady. BASIC HTML + EXAMPLES. HTML tags are keywords surrounded by angle brackets like <html> HTML tags normally come in pairs like <b> and </b> The first tag in a pair is the opening tag, the second tag is the closing tag. BASIC HTML + EXAMPLES.

helena
Download Presentation

Basic HTML Tutorial

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Basic HTML Tutorial Amber Brady

  2. BASIC HTML + EXAMPLES HTML tags are keywords surrounded by angle brackets like <html> HTML tags normally come in pairs like <b> and </b> The first tag in a pair is the opening tag, the second tag is the closing tag

  3. BASIC HTML + EXAMPLES HTML headings are defined with the <h1> to <h6> tags. H1 being the largest, H6 smallest. HTML paragraphs are defined with the <p> tag. <p>This is a paragraph.</p> <p>This is another paragraph.</p> HTML links are defined with the <a> tag. <a href="http://www.w3schools.com">This is a link</a> HTML images are defined with the <img> tag. <imgsrc=“image.jpg" width="104" height="142" />

  4. BASIC HTML + EXAMPLES A text with a span element that can be styled with CSS. <p>My dog has <span class=“black">black</span> eyes.</p> An unordered HTML list: <ul>  <li>Coffee</li>  <li>Tea</li>  <li>Milk</li> </ul>

  5. BASIC HTML + EXAMPLES Example Explanation <html><body><h1>My Web Page</h1><p>My first paragraph.</p></body></html> • The text between <html> and </html> describes the web page • The text between <body> and </body> is the visible page content • The text between <h1> and </h1> is displayed as a heading • The text between <p> and </p> is displayed as a paragraph

  6. WEB PAGE SAMPLE

  7. WEB PAGE SAMPLE

  8. WEB PAGE SAMPLE

  9. WEB PAGE SAMPLE

  10. WEB PAGE SAMPLE

  11. WEB PAGE SAMPLE

  12. WEB PAGE SAMPLE

  13. WEB PAGE SAMPLE

  14. Web Graphic Formats Three main types: - GIF - JPG - PNG

  15. Web Graphic Formats • GIF – Graphic Information Format • (Best for charts, graphics: ads, logos etc.) • can contain up to 256 colors • support transparency. If you don’t want a background for your graphic or don’t want it in a box. • can be animated • not good for photographs. Lose quality & files won’t be compact

  16. Web Graphic Formats • JPG – Joint Photographic Experts Group • (Best for images w/ many colors. Scanned artwork or photos) • can contain up to 16 million colors • you can set the compression for each image to reduce the file size. The more compressed however the lower the quality. • not good for images w/ few colors, such as graphics or images w/ few colors. Will leave them looking blotchy.

  17. Web Graphic Formats • PNG - Progressive Network Graphics • (Newest web graphics format) • Compact and versatile. Can combine features of GIF & JPG. (have transparent backgrounds & contain millions of colors) • supported by all modern browsers. May not appear in older browsers.

  18. What web graphic format should this image be saved as? QUESTION JPG!

  19. Short Quiz Take a few minutes to fill in your answers.

  20. SOURCES http://www.w3schools.com http://www.buildwebsite4u.com/building/web-graphics-formats.shtml

More Related