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

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

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

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

Lecture 6, MAT 279, Fall 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

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

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

Lecture 6, MAT 279, Fall 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

Lecture 6, MAT 279, Fall 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

Lecture 6, MAT 279, Fall 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

Lecture 6, MAT 279, Fall 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

Lecture 6, MAT 279, Fall 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

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

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

Lecture 6, MAT 279, Fall 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

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

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 /17/2009

(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 /17/2009

Linear Structures Lecture 6, MAT 279, Fall /17/2009

(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 /17/2009

Hierarchical Structures Lecture 6, MAT 279, Fall /17/2009

(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 /17/2009

Mixed Structures Lecture 6, MAT 279, Fall /17/2009

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

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

Lecture 6, MAT 279, Fall /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., o Name id  links to a different location on the same Web page

Lecture 6, MAT 279, Fall /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

Exercise? Lecture 6, MAT 279, Fall /17/2009