1 / 13

HTML Basics: Writing Webpages Effectively

Learn to use heading and paragraph tags, create lists, input preformatted text, and more in HTML. Review WYSIWYG, empty tags, W3C, and HTML elements. Practice formatting and text effects. Master links, lists, preformatted text, and more.

elisa
Télécharger la présentation

HTML Basics: Writing Webpages Effectively

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. Lesson 2 : Writing the Webpage HS Computer Laboratory July 15, 2013

  2. OBJECTIVES • Use the heading and paragraph tags. • Create different kinds of list and nest one upon another. • Input a preformatted text and a horizontal into the page.

  3. REVIEW • WHAT IS WYSIWYG? • DEFINE AN EMPTY TAG? • WHO IS W3C? • WHAT ARE THE 4 ELEMENTS OF HTML?

  4. Follow the INSTRUCTIONS : • Prepare ¼ sheet of paper. (Write your name and section) • List down 10 types of information that you can access from the web. • Give an example website where we can get such info. • Example • Type of Info Example site • > Job listing > JobStreet.com • 20 minutes ONLY

  5. FORMAT TAGS • Heading ( h1, h2,h3, h4, h5 & h6) • Paragraph (p) • Try typing the example on your book. • Space ( &nbsp) • Line Break (br) type the example.

  6. More Text Tags Text Effects • Boldface <b> • Italics <i> • Strongly; same as boldface <strong> • Emphasized ; same as italics <em> • Nice to know • FILO – first IN last OUT

  7. TAGS FOR LISTS • Unordered List or Bulleted List example : • <ul> Voltage • <li> 100V</li> • </ul> Attributes : <ul type = “disc”> <ul type = “square”> <ul type = “circle”>

  8. Ordered List or Numbered List example: <ol> Pet hates: <li> waking up early</li> <li> drinking hot tea </li> </ol> Attributes : <ol type = “1”> -> Arabic numerals <ol type = “i”> -> Roman numerals <ol type = “a”> -> Alpha numerals

  9. Definition List • <dl> • <dt> </dt> • <dd> </dd> • </dl> • Type the example.

  10. Preformatted Text and Horizontal Rule • Preformatted text (<pre> ) • Horizontal Rule (<hr>) HTML Links • external link • Internal link • < a href=“”> </a>

  11. Link Target : New Window <a href =“” target = “_new”> • Linking to Other parts of the same page Naming the section : <a name =“bottom” id =“bottom”> TO access : <a href =“#bottom”> the text here </a>

  12. E-mail add as Link • <a href=“mailto:shaky_ann2yahoo.com”> e-mail me </a> Image as Link • <a href=“ second.htm”> <imgsrc=“a.jpg”></a>

  13. QUESTIONS? Answer Measure for Lesson 2. 30 minutes.

More Related