HTML Introduction

What we have learned so far:  2.1 Basic HTML page development  2.2 Tags… (example?)  2.3 Lists… (example?)  2.4 Single Tag… (example?)  Some useful resources:   A quick 10 min. in-class quiz Lecture 8

Today, we will cover 1. Attributes of tags 2. Some more tags - Image handling in HTML 3. In-class webpage development 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

Image Handling  So far, we have covered text handling  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

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

In-class Practice – design this webpage 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