1. Lecture 6, MAT 279, Fall 2009 1 HTML Introduction (cont.) 9/17/2009

2. Lecture 6, MAT 279, Fall 2009 First Example A Simple HTML Example Welcome to Math 279 Math 279 is fun! This is the first paragraph. And this is the second paragraph. 9/17/2009 2

3. Lecture 6, MAT 279, Fall 2009 First Example A Simple HTML Example Welcome to Math 279 Math 279 is fun! This is the first paragraph. And this is the second paragraph. You want to make the text bold 9/17/2009 3

4. Lecture 6, MAT 279, Fall 2009 Working with inline elements ,…, : boldface element, darkens any text inside  How about italicize? o,…, : italicizes any text inside  Inline element: marks a section of text within a block-level element 9/17/2009 4

5. Lecture 6, MAT 279, Fall 2009 5 Quick review  Four basic HTML tags…  Block-level elements o contain content viewed as distinct block within webpage o when rendered visually, start on a new line o example?  In-line elements o marks a section of text within a block-level element o example? 9/17/2009

6. Lecture 6, MAT 279, Fall 2009 6 What if I decide to change the style of the text inside the Tags? 9/17/2009

7. Lecture 6, MAT 279, Fall 2009 7 Attributes in Tags 9/17/2009

8. Lecture 6, MAT 279, Fall 2009 8 Attributesin tags  a property of an HTML element (tag)  consists of o attribute_name and o attribute_value  used with opening tag  Example: ALIGN attribute o attribute_name: ALIGN o atribute_value: LEFT | CENTER | RIGHT o Welcome to MAT 279 9/17/2009

9. Lecture 6, MAT 279, Fall 2009 9 The style attribute  controls how the browser displays an element  used with opening tag  syntax content  rules o a set of style rules o entered by specifying a style name followed by a colon and then a style value style=“name1:value1; name2:value2; …”  e.g. Welcome to MAT 279 9/17/2009

10. Lecture 6, MAT 279, Fall 2009 10 Empty element – single Tag  an empty element contains no contents  usually one-side elements  e.g. o line break: o horizontal line:  exercise o add line breaks between two sentences in a paragraph. o add horizontal lines after each list. 9/17/2009

11. Lecture 6, MAT 279, Fall 2009 11 Image tag  tag: place images on Web Pages  src attribute: specifies name of image file o attribute_name: src o attribute_value: source file name  alt attribute, give your image a hidden name o attribute_value: a hidden name of your image  example: o 9/17/2009

12. Lecture 6, MAT 279, Fall 2009 12 Image tag (cont.)  WIDTH, HEIGHT attribute: specifies size of image file o attribute_name: width, height o attribute_value: define the width or the height of a image  example: 9/17/2009

13. Lecture 6, MAT 279, Fall 2009 13 Image tag (cont.)  place an image in center of a browser o, … tag o example  Alternatively, 9/17/2009

14. Lecture 6, MAT 279, Fall 2009 14 Remember:  use image files in.gif,.jpg,.png format  do NOT use.bmp,.tiff,.pict  use images with small size 9/17/2009

15. Lecture 6, MAT 279, Fall 2009 15 NOTE  When insert an image, make sure that the image file is located at the same disk directory as shown in your src attribute in tag  Example o if is used in your html file, then the image file (logo.jpg) MUST be installed in the same disk and same file folder with your html file! 9/17/2009

16. Next Level: Developing a Web Site Lecture 6, MAT 279, Fall 2009 16 9/17/2009

17. Working with Web Site Structures  A well-designed structure ensures users o navigate the site o not get lost or miss important information  A storyboard is a diagram of a Web site’s structure o shows all pages in a site o indicates how the pages are linked together o defines a structure works best for the type of information of the site Lecture 6, MAT 279, Fall 2009 17 9/17/2009

18. (1) Linear Structures  each page is linked with the page follows and the page precedes it in a chain  works best for Web pages with a clearly defined order  commonly, each page contains an additional link back to an opening page Lecture 6, MAT 279, Fall 2009 18 9/17/2009

19. Linear Structures Lecture 6, MAT 279, Fall 2009 19 9/17/2009

20. (2) Hierarchical Structures  pages are linked going from the home page down to more specific pages  users easily move from general to specific and back  a user can move quickly to a specific page without moving through each page in order Lecture 6, MAT 279, Fall 2009 20 9/17/2009

21. Hierarchical Structures Lecture 6, MAT 279, Fall 2009 21 9/17/2009

22. (3) Mixed Structures  overall form hierarchical, allowing the user to move from general to specific  in the same time, links allow users to move through the site in a linear fashion Lecture 6, MAT 279, Fall 2009 22 9/17/2009

23. Mixed Structures Lecture 6, MAT 279, Fall 2009 23 9/17/2009

24. (4) Protected Structures Lecture 6, MAT 279, Fall 2009 24 9/17/2009

25. Creating a Hypertext Link Lecture 6, MAT 279, Fall 2009 25 9/17/2009

26. Lecture 6, MAT 279, Fall 2009 26 9/17/2009 Hyperlinks  Hyperlink “A clickable HTML element that will direct the web browser to display a different Web page or a different location on the current Web page.”  Three type of HTML links o Relative URL  links to a Web page on the same Web server  only need relative directory for the linked file o Absolute URL  links to a Web page on a different Web server  a complete URL should be used e.g., http://jjcweb.jjay.cuny.edu/ssengupta/ o Name id  links to a different location on the same Web page

27. Lecture 6, MAT 279, Fall 2009 27 9/17/2009  use anchor tags …, and href attribute o href = “a link destination”  link label o visible link on a Web page o can be text or image  link destination o the target destination o other web pages, or files (e.g., ppt, pdf files)  example Tips Hyperlink Components link destination link label, visible on a Web page

28. Exercise? Lecture 6, MAT 279, Fall 2009 28 9/17/2009