Download presentation
Presentation is loading. Please wait.
1
Understanding HTML Attributes
Intro to HTML – Part III Creating lists Creating hyperlinks Inserting Images Understanding HTML Attributes Use of a Reference Site
2
Learning Objectives By the end of this lecture, you should be able to:
Apply a few additional tags such as li, ol, ul, img Understand what is meant by an HTML ‘attribute’ Be comfortable applying HTML attributes by using a reference Know the difference between the three standard image formats used in web development Continue familiarization with an HTML reference such as W3Schools
3
HTML Terminology Content
the parts of the HTML file that the user reads and sees (text, images, videos, etc) Nearly all of a page’s content is placed inside the ‘body’ section Tags Codes that describe document outline (not appearance!) e.g. <p>, <ol>, <img src="picture.jpg">, etc Attributes properties within a tag that specify additional information In the tag below, img is the tag, while src, width, and height are all attributes <img src="picture.jpg" width= "100" height="50">
4
Some Basic Tag Syntax Most (though not all) tags must be “closed”. For this reason, tags typically come in pairs <title> </title> Some tags do not have to be closed as they do not ‘contain’ content <br> <hr> Sometimes these tags will be closed with a ‘/’ at the end: <br /> <hr /> Doing this is mostly a matter of personal preference. Tags usually enclose document content <p> … some text ... </p> Tags must be nested properly <strong> <em> some text... </em> </strong> legal <strong> <em> some text... </strong> </em> illegal
5
Two types of lists Unordered list <ul> </ul> Item 1 Item 2
Ordered list: <ol> </ol> There are various possible attributes we can use with lists to do things like changing the style of bullet. However, most of these attributes are deprecated. We’ll learn the proper way to style bullets when we discuss CSS (Cascading Style Sheets).
6
HTML Lists NL Standings (Fictional) Chicago Sports Teams Cubs Hawks
Cubs/Sox (or Sox/Cubs) Bears Bulls Fire NL Standings (Fictional) Cubs Brewers Cardinals Astros Reds Pirates Unordered List Ordered List
7
Unordered lists An unordered list (a.k.a. a bullet list) is created with the tag pair <ul> … </ul>. Each item in the list is created with the tag pair <li> … </li>. This produces an indented list with a default character (usually a small dot) in front of each item. One way to specify the character used for a bullet is by using the type attribute: <ul> <ul type=”square”> NOTE: The ‘type’ attribute may become deprecated. However, since we do not know how to use CSS yet, feel free to experiment with it for the time being. Of course, once we start CSS, we will learn the proper way to dictate the style of a bullet.
8
Note the use of whitespace in the HTML code for our list!
List Example <html> <head> <title>Example Title</title> </head> <body> <h2>Here is an example of a list</h2> <ul> <li>One item</li> <li>Another item </li> </ul> And Another List: </body> </html> Note the use of whitespace in the HTML code for our list!
9
Attributes - Terminology
<ol type="A"> ol is the tag type is the attribute A is the attribute value – note how the value is placed in quotes Know this terminology! Type Attribute Attribute Value
10
Attribute Terminology - Another Example
<img src="picture.jpg" width="50" height="75"> ‘img’ is the tag Width, height and src are attributes “picture.jpg”, “50”, and “75” are the attribute values Attribute values should always be placed in quotation marks Though not required by the HTML 5 standard, it is a good habit to get into and it used by many web developers. Therefore, placing attribute values inside quotation marks is required for this course!
11
Using an HTML reference
<ul type="A"> Let’s check out the ‘ol’ tag to see what other options besides ‘A’ may be used… Navigate to Find the link to the HTML Reference page Click on the ‘ul’ tag Search for the ‘type’ attribute Uh-oh… the ‘type’ attribute is deprecated! We will learn a “proper” way to change bullet types when we begin CSS. It is being shown here only to demonstrate what an attribute is. That being said, until we learn how to do this using CSS, we will experiment with this attribute. Go ahead and click on the ‘type’ attribute. Note other values that can be assigned to the attribute: disc – for a filled circle (a dot) circle – for an unfilled circle square – for a filled square Experiment with a few of these. Don’t forget to save your page and refresh the browser after each change.
12
Ordered lists An ordered list is created with the tag pair <ol>… </ol>. Each item in the list is created with the tag pair <li> … </li>. This also produces an indented list but the items are numbered. The default is to number with 1, 2, 3, 4, . . .
13
Example First item Second item <html> <head>
<title> Example Title</title> </head> <body> <h1>Here is an example of a ordered list </h1> <ol> <li>First item </li> <li>Second item</li> </ol> </body> </hmtl> First item Second item
14
Nested lists Both ordered and unordered lists can be nested, i.e., a list can go inside a list. This is done by starting a new list before the current list has ended. There is no limit to the number of levels of nesting. It’s good practice to use indenting in the source code to distinguish between each level of nesting.
15
<html> <head><title>Nested Lists Example</title></head> <body><h1>To do list</h1> <ol> <li>Pick up dry cleaning </li> <li>Clean the house <ul> <li>Sweep the floors </li> <li>Take out garbage </li> <li>Clean kitchen </li> </ul> </li> <li>Go to post office <li>Buy stamps <li>International</li> <li>Domestic </li> <li>Mail package</li> </ol> </body> </html> Note the appropriate use of indentation.
16
The Anchor Tag: Creating hyperlinks
One of the most important tags in HTML. <a> … </a> tags are used to create hyperlinks to to external web sites other documents in the same web site to different locations in the same document The required attribute href indicates the destination of the link: <a href="address">clickable text</a>
17
Some anchor tag examples
<a href=" New York Times </a> The text ‘New York Times’ is hyperlinked. <a href=" Gmail</a> A link to check Gmail. <a href=" <img src="cubs_logo.jpg"> In this case, the image of the Cubs logo is hyperlinked. You can do that! Don’t forget to close the hyperlink tag! What would happen if you forget?
18
Opening pages in a new window or tab
The tag <a href=" opens the page in the same window: CDM Webpage To open a page in a new window or tab, use the attribute named ‘target’: <a href=" target="_blank"> (Note the underscore) Recall that the value of an attribute must be placed inside quotes We can also give a name to this new window: The tag <a href= target=“_blank” name=“cdm_page"> Giving the new window a name can be helpful if we want to write code that affects the display of that window. This name can also be used to create a hyperlink within a page. (I.e. A link that not only takes the user to your new page, but to a specific location within the page).
19
Hyperlink to a non-http protocol:
The anchor tag and the href attribute can be used to reference the protocols other than http. A relatively common one is to link to the protocol: <a href= > name </a> For example: To make an appointment contact <a Mendelsohn</a>. Again, note how the href attribute is NOT telling the browser to use the http (i.e. web) protocol. Instead, the attribute is telling the browser to use a mail protocol. Most browser’s have a setting that connects this protocol to your program (e.g. Outlook, Eudora, Web) In general, I’m not a big fan of using ‘mailto’, as many visitors use web-based sites. This link opens up a local utility such as Outlook, Eudora, or other. Better to simply write out your address.
20
Horizontal line (‘hr’)
The tag for creating a horizontal line across the screen is: <hr> You can use horizontal lines to improve the appearance of your web page and to delineate sections. There are several available attributes most of which are deprecated. However, we’ll experiment with them for now, and will then stop using them once we begin talkinga bout CSS. URL to the ‘hr’ tag for HTML-4 (not HTML-5) at W3 Schools: The reason I have given you the link to HTML-4 is that if you looked under the HTML-5 section, you would not even see these attributes as they have been officially phased out in HTML-5.
21
<hr> at W3 Schools
This image is taken from the W3Schools reference page on the hr tag, in the ‘Optional Attributes’ section. URL: Note that all of the optional attributes previously accepted in HTML-4 are now deprecated. If you were to look up the HTML-5 reference, you would not even see these attributes listed. That is, in HTML-5, they are officially phased out!
22
Horizontal line attributes
Note that all of the attributes on this slide are deprecated. As you know, this means you should not use them! I am showing you this slide only to give you a sense of the kinds of looks that can be applied to hr’s. You will soon discover that the same effects can be achieved using CSS. <hr align=“center” size=“12” width=“100%” /> size=12 width=100% <hr align=“center” size=“6” width=“50%” /> size=6 width=50% <hr align=“center” size=“3” width=“25%” /> size=3 width=25% <hr align=“center” size=“1” width=“10%” /> size=1 width=10%
23
Inserting images (‘img’ tag)
An image is inserted using the img tag: <img src="georges_st_pierre.jpg"> Don’t forget that images (and any other accessory files) must be uploaded to the server along with your HTML documents! To reduce clutter within our directories, it is good form to put images in a separate folder. In fact, you should organize your website just as you would organize folders on your personal computer. While we won’t do this right away, we will talk about orgnizing your site later. Help! My image isn’t displaying: Be sure that you have spelled the file name correctly (including case!) Be sure your image has also been uploaded to the server Check your path (more on this later)
24
Image Types Three image file types are supported by pretty much all of today's browsers. GIF (a.k.a. Compuserve GIF) - Graphic Interchange Format (filename.gif) JPEG - Joint Photographic Experts Group (filename.jpg or filename.jpeg) PNG - Portable Network Graphics (filename.png) shows an example of raster graphics made of pixels. Vector graphics are another type of graphics that are handled differently.
25
GIF GIF files are best used for images that have broad areas of flat color and are highly defined. GIF supports transparency and animation. It allows a maximum of 256 colors. Guidelines to keep GIF files small: Reduce the number of colors Crop out extra space if possible The file extension for GIF files is .gif GIFs are not very high-quality images. Developers are using them less frequently in favor of PNGs.
26
GIF
27
JPEG JPEG files are best for images that use many colors and shading, such as photographs. JPEG has a higher compression ratio but it is a “lossy” compression. This means the compression sacrifices some image data to reduce the file size. The file extension for JPEG files is .jpg or .jpeg
28
PNG PNGs are a (relatively) newer image format that web developers are encouraged to use. They compress well and support transparency.
29
Images: the alt attribute
The alt attribute allows you to provide a text description of the image. This is useful in situations where a browser does not or can not display images. In this case, the text from the alt attribute will be displayed instead. For example, some people with slow internet connections or small screens may disable images. If the viewer has screen reader software installed, the reader will read the text of the alt attribute. The code: <img src="smiley_face.gif" width="336px" height="400px" alt= " Cartoon of a smiley face" /> For this course, you must always include the alt attribute with your images. I remind you of this (and other things) on the assignment checklist page. Be sure to refer to that page before submitting your assignments. It will probably save you from a few lost points along the way.
30
Take a moment to review…
To recap what we’ve discussed: Additional HTML tags to create headings (h1-6), new lines (br), paragraphs (p), images (img), lists (ul/ol with li), and hyperlinks (a). Definition of attribute and attribute values Avoidance of deprecated tags and attributes Image formats How to use a reference such as W3 Schools to find out about acceptable tags, attributes, styles, etc.
Similar presentations
