More HTML Standards Hyperlinks Images And more Basic

More HTML Standards Hyperlinks, Images And more…

Basic HTML Terminology Content – the parts of the HTML file that the user reads and sees – Usually limited to the ‘body’ section HTML Tags – Codes that describe document outline (not appearance!) – e. g. , <ol>, <img src="picture. jpg">, etc Attributes – properties associated with a tag – e. g. <img src="picture. jpg" width="50" height="50"> 2

Some Basic Tag Syntax Tags are enclosed in angle brackets – <html> All tags must be “closed”. For this reason, tags typically come in pairs – <title> </title> Tags usually enclose document content – … some text. . . Tags must be nested properly – some text. . . legal – some text. . . illegal 3

An invaluable HTML reference site: • W 3 Schools – http: //www. w 3 schools. com • • Reference for HTML, CSS, Javascript, etc Many examples Easy way to play around with tags Bookmark – HTML 5 reference section – CSS 3 reference section

World Wide Web Consortium (W 3 C) The World Wide Web Consortium, known as the “W 3 C” is the group that creates and defines the rules of the standards such as HTML 5. Their web page is at ww. w 3 c. org 5

HTML 5 and Standards • The WWW Consortium (W 3 C) is the group that establishes the “rules” of HTML and related standards. • HTML 5 is a fairly significant change but this standard has not yet been universally adopted/required among HTML developers and browsers. – However, it will be adopted—it’s only a matter of time! • For this reason, this course will be taught using the HTML 5 rules and standards. • Because HTML-5 is not universally implemented across all browsers, it is vital that you test your pages using a modern browser. As long as you have updated your browser within the last 3 -4 months, you will be fine. – I recommend using Firefox as that is what the grader will be using to grade your assignments!

Depre-what? • Deprecated. = “Phased Out” • As HTML evolved and became more widespread, both web designers and publishers of web browsers began to use tags in ways that were not always intended. They also began to add their own little tools for functionality and design. The problem was that now various browsers were frequently displaying pages very differently from other browsers. This violated the most basic tenets of the HTML principle, that pages should look essentially the same regardless of location. As a result, many tags that are now deprecated are those intended for styling effect. • Some deprecated tags: – , <center>, , type attribute for lists, etc, etc – Look up some of these tags on the w 3 schools website. • Key Point: In short, HTML tags that are considered “visual/presentational” should be avoided. Use styles instead. Again, this will be covered in CSS. 7

HTML Lists Chicago Sports Teams q Hawks q Cubs q Bears q Bulls q Fire NL Standings 1. Cubs 2. Brewers 3. Cardinals 4. Astros 5. Reds 6. Pirates 8

Two types of lists Link to W 3 Schools on lists…. Unordered list <ul> </ul> – Item 1 – Item 2 Ordered list: <ol> </ol> 1. Item 1 2. Item 2 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 do this when we discuss CSS (Cascading Style Sheets). 9

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 diamond) in front of each item. You can specify the character used for a bullet by using the (deprecated) type attribute: – <ul> – <ul type=“circle”> – We will shortly learn how to implement this appearance using CSS 10

Example <html> <head> <title>Example Title</title> </head> <body> <h 1>Here is an example of a list</h 1> <ul> <li>One item </li> <li>Another item </li> </ul> <ul style="square"> <li>Another item </li> </ul> • First item • Second item • Third item • Fourth item </body> </html> 11

Attributes e. g. <ol type= "A" > – – ol is the tag type is the attribute A is the attribute value Know this terminology! (type, attribute value) – Incidentally, 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. e. g. <img src="picture. jpg" width="50" height="75"> – ‘img’ is the tag – width and height are attributes – “picture. jpg”, “ 50”, and “ 75” are the attribute values Attribute values should always be placed in quotation marks – It is possible that you will encounter situations where they are not, but it is a good habit to observe. In this course, it is required. 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 <html> <head> <title> Example Title</title> </head> <body> <h 1>Here is an example of a ordered list </h 1> <ol> <li>First item </li> <li>Second item </li> 1. First item 2. Second item </ol> </body> </hmtl> 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><h 1>To do list</h 1> <ol> <li>Pick up dry cleaning </li> first item <li>Clean the house <ul> <li>Sweep the floors </li> second item <li>Take out garbage </li> <li>Clean kitchen </li> </ul> </li> <li>Go to post office <ul> <li>Buy stamps <ul> <li>International</li> <li>Domestic </li> third item </ul> </li> <li>Mail package</li> </ul> </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 (see course web page – weekly schedule links) The required attribute href indicates the destination of the link: <a href="address">clickable text</a> 17

Some Anchor Tags <a href="http: //www. nytimes. com">New York Times</a> The text ‘New York Times’ is hyperlinked. <a href="http: //chicagocubs. com"><img src="cubs_logo. jpg"></a> Note how 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

“URL” = Web Address • URL: Uniform Resource Locator. It is an address that specifies the location of a file on the Internet. • That is if someone says to you: “What is the URL of that page? ”, they are asking you for the web address. • E. g. http: //www. nytimes. com

Opening pages in a new window or tab • The tag <a href="http: //facweb. cs. depaul. edu"> 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="http: //www. cdm. depaul. edu" 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=http: //www. cdm. depaul. edu/ 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).

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 e-mail protocol: <a href= "mailto: xyz@depaul. edu" > name </a> For example: To make an appointment contact <a href = “mailto: Joseph. Mendelsohn@gmail. com”>Yosef 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 e-mail program (e. g. Outlook, Eudora, Web) In general, I’m not a big fan of using ‘mailto’, as many visitors use web-based e-mail sites. This link opens up a local e-mail utility such as Outlook, Eudora, or other. Better to simply write out your e-mail address. 21

Horizontal line The tag for creating a horizontal line 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 make use of them until we learn to get around them using CSS. W 3 Schools on the <hr> tag 22

Horizontal line styles - DEPRECATED size=12 width=100% size=6 width=50% size=3 width=25% size=1 width=10% <hr align=“center” size=“ 12” width=“ 100%” /> <hr align=“center” size=“ 6” width=“ 50%” /> <hr align=“center” size=“ 3” width=“ 25%” /> <hr align=“center” size=“ 1” width=“ 10%” /> Because these attributes are deprecated, you should not use them. I am showing you this slide only to give you a sense of the kinds of visual effects that can be achieved. You will see that the same effects can be achieved using CSS. 23

Inserting images – the ‘img’ tag An image is inserted using the img tag: <img src=“georges_st_pierre. jpg" /> Note the use of the end ‘/’ 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 more about orgnizing your site later. Help! My image isn’t displaying: 1. 2. 3. 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 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) 25

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 26

GIF 27

GIF Problem? 28

JPEG Solution 29

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 30

Images: the alt attribute The alt attribute allows you to provide a text description of the image. This description is used if the image is not displayed. This is useful in situations where a browser does not or can not display images. For example, some people with slow internet connections or small screens may disable images. The code: <img src="smiley_face. gif" width="336 px" height="400 px" alt="Smiley-face picture" /> 31

The alt attribute is useful for – browsers that do not display images – text readers for blind, color-blind, low-sighted For this course, you must always include the alt attribute with your images. 32

Images: Making them hyperlinks An image can be “clickable”. That is, images may be turned into hyperlinks. <a href="http: //www. chicagocubs. com"> <img src="cubbies. jpg" alt="Cho Cubs" /> </a> 33

Image borders – sneak peak of CSS By default, clickable images have blue borders. The most common but deprecated way to remove the border, is to set the border attribute inside the img tag to 0. <img src="photo. jpg“ alt="Pic" border= "0"/> Deprecated. Here is the proper way to do it, using CSS: <img src="photo. jpg" alt="Pic" style="border-style: hidden" /> Note how the above line of HTML code spans more than one line – this is perfectly fine! Remember that browsers ignore extra whitespace. 34

Borders – A design thought: Consider how we removed the border in the last slide. Do you think is a good idea or not? In my opinion, it would be a good idea to keep the border if the image is hyperlinked. Most users familiar with the web will realize, even if only subconsciously, that the image is ‘clickable’ if they see the box around it. 35

Images: Bandwidth limitations Image files consume more bandwidth than text files since they can be considerably larger. Users who access the Internet via slower connections such as telephone lines will have to wait for image files that are 100 KB or larger Try to avoid/minimize use of large images. 36

Images: Speeding up your page’s loading time If you specify the height and width attributes for your images, the browser will reserve space for those images, but will first load the text of the page. This way, the user can begin reading the text content of your page without having to first wait for the images to load. Therefore, always try to specify height and width attributes (in pixels) of your images. <img src="firetruck. jpg" alt=“fire truck" height="80" width="230" /> Most browsers will allow you to find an image’s dimensions by right-clicking on the image, and selecting ‘Properties’. 37

Images: Using thumbnails If you do want to make larger images available, use thumbnails, which are reduced versions of your images, and hyperlink the thumbnails to the larger versions. <a href="larger_photo. jpg"> <img src="smaller_photo. jpg" /> </a> In this example, the image ‘smaler_photo’ is initially displayed, but is also hyperlinked to the image ‘larger_photo’. If the user clicks on the initial image, the larger one will then display. Several freeware and shareware graphic programs save images in desired formats such as GIF or JPG. Many also can create thumbnails 38

Images: Rescaling images Rescale the image by changing its WIDTH and HEIGHT attributes. Preserve the aspect ratio (height-to-width ratio) otherwise the image gets distorted. Divide or multiple the dimensions by the same factor. Scaling down an image DOES NOT reduce its file size (bandwidth requirements). To reduce the file size, you need to compress the image. Try it at W 3 Schools 39

Reserved Characters aka “Entities” • Suppose you wanted to insert the copyright symbol – how would you do it? • Suppose you wanted display the ‘>’ symbol on a web page – how would you do it? – Recall that this symbol will make some browsers think you are about to create a tag. • Answer: There are special codes you can use to display characters that are either not available on conventional keyboards, or are reserved because they are used as HTML syntax. – Instead, you can use special symbols to display such characters. – Look up “HTML Entities” in an HTML reference to see a detailed list. • W 3 Schools: http: //www. w 3 schools. com/tags/ref_entities. asp – A few examples are provided on the next slide. 40

A Few Entity Codes Code name Code Symbol non-breaking space < <

Using an escape character to display a symbol: The Chicago Cubs© (Can you guess the purpose of the tag? )

Special Characters: The Non-breaking space HTML renders a sentence with one and only one space between words. A “word” can be as small as a single character. This can present a problem if you want to have more than one space between words is a special character, which HTML renders as a blank space. You can add spaces between words by adding but you need to be careful because itself is considered a word if it has blank spaces around it! 43

Example <html> <head> <title>Example</title> </head> <body> How many spaces are there between a and b? a b a b </body> </html> (1 (3 (4 (4 (5 space) /> /> 44

Non-breaking space So to get, say, exactly 6 spaces between two words, write Hi Bob 6 non-breaking space characters Note: I don’t particularly care about the escape character for the non-breaking space. I do care that you understand how to use escape characters in general. In addition to displaying atypical characters (e. g. the copyright symbol, non-breaking spaces, etc), they come in handy for other things as well. We’ll discuss these further at a later time. 45