Lecture 8 Introduction to Web Programming

Announcement  First In-class exam will be on Oct. 10 (Wednesday)  2.50pm – 4.05pm  Exam will cover all materials till Oct. 3  Open-book, open note exam. Lecture 8

What we have learned so far:  1 Basic HTML page development  2 Tags… (example?)  3 Lists… (example?)  4 Single Tag… (example?)  Some useful resources:   Lecture 8

Today, we will cover 1. Attributes of tags 2. Image handling in HTML 3. Hyperlinks Lecture 8

What if I decide to change the style of the texts inside the Tags? Attributes in Tags

Lecture 8 Attributesin tags  Attribute - a property of an HTML element (tag)  Control appearance of elements in the document  consists of  attribute_name and  attribute_value  used with opening tag  General syntax content

The Attributes  Example: ALIGN attribute  Used for aligning text in a web browser attribute_name: ALIGN atribute_value: LEFT | CENTER | RIGHT  Example usage: Earlier we used: Welcome to MAT 279 Now: Welcome to MAT 279  There are many attributes we will learn in this class  Some of them can be readily used with most of the tags  Some are tag-specific Lecture 8

The Attributes (contd.) Lecture 8

More recent: style attribute  controls how the browser displays an element  used with opening tag  syntax content  rules  a set of style rules  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

More about Style Later when we study CSS

Image Handling  So far, we have covered only texts  Now, we will learn how to do image handling  What is the tag for image element? Lecture 8

Image tag  tag: place images on Web Pages  One sided tag  Necessary attributes for :  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:  Lecture 8

Image tag (contd.)  How to specify size of the image file to be displayed?  Use attributes  attribute_name: width, height  attribute_value: define the width or the height of image  example: Lecture 8

Image tag (contd.)  Width and height attribute  attribute_value: define the width or the height of image  Two types of units  Pixels: number of pixels (eg, “100px” or just “100”)  Percent: (eg, “20%”)  example: Lecture 8

Image tag (contd.)  place an image in center of a browser  Use, … tag  example  Alternatively, Lecture 8

An interesting attribute – “title”  title can also be used as an attribute  Shows a pop-up title for your element  Mostly used with images for description  General syntax  title=“value” Lecture 8

Few things to 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 tag  Example  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! Lecture 8

How to link multiple pages?

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

Hyperlinks Lecture 8  What is the tag?  …,  Necessary attribute is href  href = “a link destination”  example Tutorial link label, visible on a Web page, where you will click link destination

Hyperlinks  Three type of Hyperlinks  Absolute URL links to a Web page on a different Web server a complete URL should be used e.g.,  Relative URL links to a Web page on the same Web server only need relative directory for the linked file  Name id links to a different location on the same Web page links to a different location on the different Web page Lecture 8

Absolute URL Lecture 8 Instructor’s website link label, visible on a Web page, where you will click link destination

Relative URL Lecture 8 My Page 2 link label, visible on a Web page, where you will click link destination My Page 3 link label, visible on a Web page, where you will click link destination

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

Working with Linked Images  A standard practice on the Web is to turn the Web site’s logo into a hypertext link pointing to the home page Image Lecture 8

Hands-on Practice Lecture 8 Link the JJ streetsign image to JJ homepage

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 content e.g., Welcome to MAT 279  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 content e.g., Go to the top of the page. 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 content  filename is the file name of destination HTML file  id is the id name of an element in the destination file  e.g Go to the second paragraph of the tutorial 31 Lecture 9