Download Attributes in Tags

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:
 http://htmlhelp.com/reference/wilbur/list.html
 http://www.w3schools.com/
Lecture 8
Today, we will cover
Attributes of tags
2. Image handling in HTML
3. Hyperlinks
1.
Lecture 8
What if I decide to change the style of
the texts inside the Tags?
Attributes in Tags
Lecture 8
Attributes in 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
<tagname attribute_name=“value1”>content</tagname>
Lecture 8
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: <H1>Welcome to MAT 279</H1>
Now: <H1 ALIGN = “CENTER”>Welcome to MAT 279</H1>
 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
<element style=“rules” … > content </element>
 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.
<h1 style=“text-align:center”>Welcome to MAT 279</h1>
<h1 style=“color: blue”>Welcome to MAT 279</h1>
<h1 style=“text-align:center; color:blue”>Welcome to MAT 279</h1>
Lecture 8
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
 <IMG> tag: place images on Web Pages
 One sided tag
 Necessary attributes for <img>:
 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=“JJ_logo.jpg” alt=“JJ logo” />
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:
<IMG src=“logo.jpg” width=“200” height=“100” alt=“Dave’s logo”>
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:
<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
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”
<IMG src="streetsign.jpg" width="75" height="75" alt="JJ logo" title="JJ logo">
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 <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
How to link multiple pages?
Linking pages…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.”
Lecture 8
Hyperlinks
 What is the tag?
 <a>…</a>,
 Necessary attribute is href

href = “a link destination”
link destination
 example
<a href = “tutorial.html”> Tutorial </a>
link label, visible on a Web page, where you will click
Lecture 8
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., http://jjcweb.jjay.cuny.edu/ssengupta/

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
link destination
<a href=“http://jjcweb.jjay.cuny.edu/ssengupta/”>
Instructor’s website </a>
link label, visible on a Web page, where you will click
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
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
<a href = “destination”> Image </a>
Lecture 8
Hands-on Practice
Link the JJ streetsign image to JJ
homepage
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.htm#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.htm#para2”>Go to the second
paragraph of the tutorial </a>
Lecture 9
31