130 likes | 226 Views
Lesson 2 : Writing the Webpage. HS Computer Laboratory July 15, 2013. 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. REVIEW. WHAT IS WYSIWYG?
E N D
Lesson 2 : Writing the Webpage HS Computer Laboratory July 15, 2013
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.
REVIEW • WHAT IS WYSIWYG? • DEFINE AN EMPTY TAG? • WHO IS W3C? • WHAT ARE THE 4 ELEMENTS OF HTML?
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
FORMAT TAGS • Heading ( h1, h2,h3, h4, h5 & h6) • Paragraph (p) • Try typing the example on your book. • Space (  ) • Line Break (br) type the example.
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
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”>
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
Definition List • <dl> • <dt> </dt> • <dd> </dd> • </dl> • Type the example.
Preformatted Text and Horizontal Rule • Preformatted text (<pre> ) • Horizontal Rule (<hr>) HTML Links • external link • Internal link • < a href=“”> </a>
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>
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>
QUESTIONS? Answer Measure for Lesson 2. 30 minutes.