1 / 17

HTML Introduction

Dive into the world of HTML attributes, understand their importance, control element appearance, align text, handle images, and more. Practice coding and enhance your web development skills effectively.

mboylan
Download Presentation

HTML Introduction

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML Introduction

  2. 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: http://htmlhelp.com/reference/wilbur/list.html http://www.w3schools.com/ A quick 10 min. in-class quiz Lecture 8

  3. Today, we will cover • Attributes of tags • Some more tags - Image handling in HTML • In-class webpage development Lecture 8

  4. What if I decide to change the style of the texts inside the Tags?Attributes in Tags Lecture 8

  5. 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

  6. 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

  7. The Attributes (contd.) Lecture 8

  8. More recent: style attribute • controls how the browser displays an element • used with opening tag • syntax <elementstyle=“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

  9. 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

  10. 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

  11. 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=“100” height=“200” alt=“Dave’s logo”> Lecture 8

  12. 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

  13. 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

  14. 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

  15. 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

  16. In-class Practice – design this webpage Lecture 8

  17. 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

More Related