HTML Introduction Lecture 8

What we have learned so far: 2.1 Basic HTML page development 2.2 Tags… (example?) 2.3 Lists… (example?) 2.4 Attributes… (example?) 2.5 Single Tag… (example?) So far, we have learned text handling. How about Image? Image handling in HTML Lecture 8 Lecture 8

Image tag <IMG> tag: place images on Web Pages src attribute: specifies name of image file attribute_name: src attribute_value: source file name alt attribute, give your image a hidden name attribute_value: a hidden name of your image example: <IMG src=“dave_logo.jpg” alt=“Dave’s logo”> Lecture 8

<IMG src=“logo.jpg” width=“100” height=“200” alt=“Dave’s logo”> Image tag (contd.) Specify size of image file to be displayed attribute_name: width, height attribute_value: define the width or the height of image example: <IMG src=“logo.jpg” width=“100” height=“200” alt=“Dave’s logo”> Lecture 8

Image tag (contd.) place an image in center of a browser Use <CENTER>, … </CENTER> tag example <CENTER> <IMG src=“logo.jpg” width=“100” height=“200” alt=“Dave’s logo”> </CENTER> Alternatively, <h1 style=“text-align:center”> <IMG src=“logo.jpg” width=“100” height=“200” alt=“Dave’s logo”> </h1> Lecture 8

Remember: Use image files in .gif, .jpg, .png format Do NOT use .bmp, .tiff, .pict Use images with small size Lecture 8

NOTE When inserting an image, make sure that the image file is located at the same disk directory as shown in your src attribute in <IMG> tag Example if <IMG src=“logo.jpg” …> 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! Lecture 8

Next Level: Developing a Web Site Lecture 8

Web Site Structures A well-designed structure ensures users navigate the site with ease not get lost not miss important information Lecture 8

Web Site Structures Storyboard is a diagram of a Web site’s structure shows all pages in a site indicates how the pages are linked together defines a structure that works best for the type of information of the site Very important for the websites projects! Lecture 8

Different types of Website Structures Lecture 8

(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 8

Linear Structures Lecture 8

Advantages & Disadvantages? Lecture 8

(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 8

Hierarchical Structures Lecture 8

Advantages & Disadvantages? Lecture 8

(3) Mixed Structures hierarchical allows the user to move from general to specific linear allows users to move through the site in a linear fashion How about mixing the both??? Lecture 8

Mixed Structures Lecture 8

(4) Protected Structures Lecture 8

Linking pages…Hyperlinks “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.” Lecture 8

Hyperlinks Use tags <a>…</a>, and href attribute example href = “a link destination” example <a href = “tutorial.html”> Tutorial </a> link destination link label, visible on a Web page, where you will click Lecture 8

Specifying a Folder Path Lecture 8

Specifying a Folder Path To create a link to a file located in a different folder than the current document, you must specify the file’s location, or path An absolute path specifies a file’s precise location within a computer’s entire folder structure A relative path specifies a file’s location in relation to the location of the current document If the file is in the same location as the current document, you do not have to specify the folder name If the file is in a subfolder of the current document, you have to include the name of the subfolder Lecture 8

Specifying a Folder Path If you want to go one level up the folder tree, you start the relative path with a double period (..), a forward slash, and then provide the name of the file To specify a different folder on the same level, known as a sibling folder, you move up the folder tree using the double period (..) and then down the tree using the name of the sibling folder Lecture 8

Hyperlinks Three type of Hyperlinks Relative URL Absolute URL Name id links to a Web page on the same Web server only need relative directory for the linked file 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/ Name id links to a different location on the same Web page links to a different location on the different Web page Lecture 8

Relative URL link destination <a href = “page2.html”> My Page 2 </a> link label, visible on a Web page, where you will click link destination <a href = “../page3.html”> My Page 3 </a> link label, visible on a Web page, where you will click Lecture 8

Absolute URL link destination <a href=“http://jjcweb.jjay.cuny.edu/ssengupta/”> Instructor’s website </a> link destination link label, visible on a Web page, where you will click Lecture 8

Hyperlink to a certain location id attribute assigns a name (or an ID) to an element with the ID, an element can be referred to easily syntax <tag id=“name”> content </tag> e.g., <h1 id=“welcome”> Welcome to MAT 279 </h1> Note: id names must be unique id names are NOT case sensitive Lecture 8

Creating hyperlinks to locations in same document use id attribute to identify the destination of the hyperlinks syntax <a href=“#id_name ”> content </a> e.g., <a href=“#welcome”> Go to the top of the page. </a> Lecture 8

Creating hyperlinks between documents use id attribute to identify the destination of the hyperlinks create a hyperlink specific location in another file with syntax <a href=“filename.html#id">content</a> filename is the file name of destination HTML file id is the id name of an element in the destination file e.g <a href=“tutorial.html#para2”>Go to the second paragraph of the tutorial </a> Lecture 8

Working with Hypertext Attribute (target) You can force a document to appear in a secondary window or tab by adding the target attribute to the tag <a> tag Lecture 8