1. DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 2-1 LESSON 2 HTML TAGS G H E F

2. DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 2-2 HTML Tag An HTML tag specifies the formatting and presentation of information on a Web site.

3. DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 2-3 Basic Text Formatting Tags Bold Bold text Italic Italic text Underline Underline text Strong Compare this with bold. Emphasize Compare this with italic.

4. DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 2-4 Horizontal Rules  are used to separate sections of a Web page.  has no closing tag in HTML  has no text associated with it  or  using its attributes, you can set the size, width and alignment

5. DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 2-5 Heading Tags  bold information and adjust its size according to the number  sizes can be from 1 to 6, with 1 being the largest and 6 being the smallest  remember to end each heading tag

6. DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 2-6 Heading Tags Heading Tags h1 Style: Burma h2 Style: Burma h3 Style: Burma h4 Style: Burma This is normal. h5 Style: Burma h6 Style: Burma HeadingTags.html

7. DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 2-7 Building A Website  What content you want on your Web site  How you want it formatted Base on Outcomes of Analysing End Uers’s Expectations, Need To Determine:

8. DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 2-8 Simply Start Writing Your HTML Document  Type in your content, along with the necessary structure tags  Save your HTML document  Review it (content to be correct)  Apply the necessary formatting tags  Review periodically your Web site

9. DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 2-9 Adjusting Text To adjust the colour of your text, use the tag format: Text Colour And Size To adjust the size of your text, use the tag format: Text

10. DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 2-10 Adjusting Text Colour Adjust Font Color I like the colour blue. AdjustFontColor.html

11. DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 2-11 Adjusting Text Size Adjust Font Size M athematics is interesting. AdjustFontSize.html

12. DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 2-12 The Background Colour Use the tag Format: You should carefully consider why you need to change the background colour before doing so.

13. DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 2-13 The Background Colour Background Colour h1 Style: Burma h2 Style: Burma h3 Style: Burma h4 Style: Burma This is normal. h5 Style: Burma h6 Style: Burma

14. DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 2-14 Adding Links To A Web Site There are three types of commonly used links:  Links to other Web sites or pages  Links to downloadable files  Links to e-mail

15. DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 2-15 Links To Other Web Sites Or Pages Format: text to appear on screen Example: Click here Online Web Tutorial

16. DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 2-16 Links To Downloadable Files Format: text to appear on screen Example: Download A document to learn HTML

17. DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 2-17 Links To E-MAIL Format: text to appear on screen Example: E-mail us with your thoughts and questions.

18. DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 2-18 Cautions In Linking  Make sure that the links are still active.  Links to dead Web sites are bad.  If you place links in your Web site to other Web sites you have created, you will need to store those Web sites in your Web space.  If you provide a link in your Web site for e-mail, be prepared to receive a lot of e-mail.

19. DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 2-19 Inserting Images And Photos Format: Your image or photo file must also be captured and stored in a certain format, usually either jpg or gif. JPEG images (.JPG):  Images with a large number of colours,  have been heavily compressed so as to be smaller in size,  requiring less time to download. PNG images:  With a smaller file size when the image has a few solid colours.  allows for interlaced images (which are displayed piece by piece) with 24-bit colours and images for which one of the colours has been set as being transparent.. GIF image:  have most of the same advantages as PNG images,  although the GIF format is limited to 256 colours and the format is not completely open.

20. DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 2-20 SRC  Shows the path where the image is located (mandatory) ALT  Displays an alternate text if the image isn't displayed. TITLE  Displays information when the cursor rolls over the image. ALIGN  Specifies how the image is aligned in relation to the adjacent text. The possible values are TOP, MIDDLE, and BOTTOM. WIDTH  Specifies the width of the image. HEIGHT  Specifies the height of the image. The Main Attributes Of The “img” Tag

21. DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 2-21 The “alt” Attribute Format:  The alt attribute is used to define an "alternate text or a short description to replace " for an image.  The value of the alt attribute is an author-defined text. Example:

22. DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 2-22 The “alt” Attribute  The "alt" attribute tells the reader what he or she is missing on a page if the browser cannot load images.  The browser will then display the alternate text instead of the image.  Should include the "alt" attribute for each image on a page, to improve the display and usefulness of your document for people who have text-only browsers.

23. DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 2-23 SIZING IMAGES Format:  Pixels are the smallest display elements on a screen.  Size an image according to the number of pixels.  Depend on the size of the viewable screen, you can see the image.  Can provide different values for the height and width parameters that might skew the image. Example:

24. DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 2-24 Positioning Images 1 align=left The image will be at the left and text will appear immediately after the image. align=right The image will be at the right and text will appear immediately after the image. align=center There is no align=center option. If you want to center an image, you must surround the image tag with and. Left align is the default alignment.

25. DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 2-25 Positioning Images 2 align=bottom An image in the text align=middle An image in the text align=top An image in the text Bottom alignment is the default alignment.

26. DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 2-26 NOTICE  Loading images take time.  Use images carefully.

27. DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 2-27 Caution: When adding images Images take a long time to transfer from a Web server to the person viewing your Web site. If you have large images or numerous smaller images, your Web site will take a long time to load, and the person viewing your Web site may become impatient and move on to another Web site.

28. DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 2-28 Textured Background Use of an image The image might not have to be big enough to cover the entire background of your Web site Replicate the image as many times as it needs to both across and down To use an image and create a textured background, use the tag Format:

29. DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 2-29 Lists  Numbered Lists  Unnumbered Lists

30. DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 2-30 Numbered Lists/ Ordered Lists Numbered Lists Apple Banana Coconut Durian

31. DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 2-31  The default numbering for numbered lists is Arabic. can  Change that as well by adding the type parameter to the tag. Examples - lowercase letters - uppercase letters - lowercase Roman numerals - uppercase Roman numerals Numbered Lists/ Ordered List

32. DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 2-32 Unnumbered List/ Unordered List Numbered Lists Apple Banana Coconut Durian

33. DHTML AND JAVASCRIPT Copyright @ Genetic Computer School 2008 2-33 Paragraph Text......Text  Adds an extra blank line before and after a paragraph. Line Break or  Used when you want to break a line, but do not want to start a new paragraph.  It is an empty tag.  It has no end tag.