Adding an Image to a Web Page

When an image is ready for the web, you need to use the correct markup to add it to your page, but you also need to know where to store your image.

Image location

You can store images for your website in several places. Image storage works best if it uses relative URLs stored somewhere on the website with your other HTML files. You can store images in the same root as your HTML files, which gets confusing if you have a lot of files, or you can create a graphics or images directory in the root file for your website.

Relative links connect resources from the same website. You use absolute links between resources on two different websites. 

Here are three compelling reasons to store images on your own site:

• Control: When images reside on your site, you have complete control over them. You know your images aren’t going to disappear or change, and you can work to optimize them.
• Speed: If you link to images on another site, you never know when that site may go down or respond unbelievably slowly. Linking to images on someone else’s site also causes the other site’s owner to pay for bandwidth required to display it on your pages — on another site!
• Copyright: If you show images from another site on your pages, you may violate copyright laws. If you must do this, obtain permission from the copyright holder to store and display images on your website.

Using the <img> element

The image (<img>) element is an empty element (sometimes called a singleton tag) that enables you to specify the place on the page where you want your image to go.

An empty element uses only one tag, with neither a distinct opening nor a distinct closing tag.

The following markup places an image named leaf.jpg, which is saved in the same directory as the HTML file, between two paragraphs:

The output is displayed as follows in the browser:

A web browser replaces the img element with the image file provided as the value for the src attribute. The src attribute is like the href attribute that you use with an anchor (<a>) element. The src attribute specifies the location for the image you want to display on your page. The preceding example points to an image file in the same folder as the HTML file referencing it.

---

The role of images in a webpage

Web-page designers use images to deliver important information, direct site navigation, and contribute to overall look and feel on a web page. Images in websites may be logos or clickable navigation aids, or they may display content; they can also make a page look prettier or serve to unify or illustrate a page’s theme. A perfect example of the many different ways images can enhance and contribute to web pages is the Edupoly home page at https://edupoly.com, shown below, where the Edupoly logo, photos, and a nice header or navbar appear to good effect. When used well, images are a key element of page design. When used poorly, though, they can make a page unreadable, unintelligible, or frustrating.

---

Specifying locations in web pages

Locations within web pages can be marked for direct access by links on:

• The same page.
• The same website.

Keep these considerations in mind when adding links to web pages:

• Several short pages may present information more conveniently for readers than one long page with internal links.
• Links within large pages work nicely for quick access to directories, tables of contents, and glossaries.
• Intra document linking works best on your own website, where you can create and control the markup.

When you link to spots on someone else’s website, you’re at its manager’s mercy because that person controls linkable spots. Your links will break if a site designer removes or renames a spot to which you link. 

Naming link locations

To identify and create a location within a page for direct access from other links, use an empty anchor element with the name attribute, like this:

<a name="top"></a>

The id attribute also works as an anchor element. It’s often cleaner to use this method depending on your page design approach. (If you use id attributes for CSS, it may be easier to remember and more consistent overall). The anchor element that marks the spot doesn’t affect the appearance of any surrounding content. You can mark spots wherever you need them without worrying about how your pages look (or change) as a result.

Linking within the same page

Links can help users navigate a single web page. Intra document hyperlinks include such familiar features as:

• Back to Top links.
• Tables of contents.

An intra document hyperlink, also known as a named document link, uses a URL like this:

<a href="#top">Back to top</a>

The hash sign (#) indicates that you’re pointing to a spot on the same page, not on another page.

The following code shows how two anchor elements combine to link to a spot on the same page. (Documents that use intra document links are usually longer. This document is short so you can easily see how to use the top anchor element)

.https://stackblitz.com/edit/web-platform-qq2xjc?embed=1&file=index.html&hideDevTools=1&hideExplorer=1&hideNavigation=1

We can see how this HTML markup appears in a web browser. If the user clicks the Back to Top link, the browser jumps back to the top spot — marked by <a name=”top”></a>. The text for this example is short, but you can see how it works by resizing your browser window (making it tall and narrow) to display only two or three words per line of text.

Linking within the same website

You can combine intra document and inter document links to send visitors to a spot on a different web page on your site. Thus, to link to a spot named descriptions on a page named home.html on your site, use this markup:

<p>Review the <a href="home.html#descriptions">document descriptions</a>
to find the documentation for your particular product.</p>

Linking on other websites

If you know that a page on another site has spots marked, you can use an absolute URL to point to a particular spot on that page, like this:

<p>Find out how to
<a href="http://www.yourcompany.com/training/online.htm#register">
register</a> for upcoming training courses led by our instructors.</p>

Be sure to check all links regularly to catch and fix the broken ones.

---

Customizing Links

You can customize links to:

✓ Open linked documents in new windows

✓ Link to specific locations within a web page of your own

✓ Link to items other than HTML pages, such as

• Portable Document Format (PDF) files
• Compressed files
• Word processing documents

Opening new windows

The web works because you can link pages on your website to pages on other people’s websites by using a simple anchor element. When you link to someone else’s site, though, you send users away from your own site. To keep users on your site, HTML can open the linked page in a new window or in a new tab inside the same browser window. The simple addition of the target attribute to an anchor element opens that link in a new browser window (or tab) instead of opening it in the current window:

<p>The <a href="http://www.w3.org" target="_blank">World Wide Web Consortium</a> is the standards body that oversees the ongoing development of the XHTML specification.</p>

When you give a target attribute a _blank value, this tells the browser to do the following:

1. Keep the linking page open in the current window.

2. Open the linked page in a new window or tab.

---

Exploring link options

You can link to a variety of online resources:

• Other HTML pages (either on your website or on another website)
• Different locations on the same HTML page
• Resources that aren’t even HTML pages at all, such as e-mail addresses, pictures, and text files or downloads for visitors

Link locations, captions, and destinations exert a huge influence on how site visitors perceive links. The kind of link you create is determined by what you link to and how you formulate your link markup.

Absolute links

An absolute link uses a complete URL to connect browsers to a web page or online resource. Links that use a complete URL to point to a resource are called absolute because they provide a complete, stand-alone path to another web resource. When you link to a page on someone else’s website, the web browser needs every bit of information in the URL to find that page. The browser starts with the domain in the URL and works its way through the path to a specific file. When you link to files on someone else’s site, you must always use absolute URLs in the href attribute of the anchor element. 

Here’s an example:

http://www.website.com/directory/page.html

Relative links

A relative link uses a kind of shorthand to specify a URL for a resource you’re pointing to.

Use the following guidelines with relative links in your HTML pages:

• Create relative links between resources in the same domain.
• Because both resources are in the same domain, you may omit domain information from the URL.

A relative URL uses the location of the resource you link from to identify the location of the resource you link to (for example, page.html). If you use relative links on your site, your links still work if you change:

• Servers.
• Domain names.

Simple links

You can take advantage of relative URLs when you create a link between pages on the same website. If you want to make a link from http://www.mysite.com/home.html to http://www.mysite.com/about.html, you can use this simplified, relative URL in an anchor element on home.html:

<p>Learn more <a href=”about.html”>about</a> our company.</p>

When a browser sees a link without a domain name, the browser assumes that the link is relative and uses the domain and path from the linking page to find the linked page. The preceding example works only if home.html and about.html are in the same directory, though.

Site links

As your site grows more complex and you organize your files into various folders, you can still use relative links. However, you must provide additional information in the relative URL to help the browser find files that don’t reside in the same directory as the file from which you’re linking. Use ../ (two periods and a slash) before the filename to indicate that the browser should move up one level in the directory structure.

The markup for this directory navigation process looks like this:

<a href=”../docs/home.html>Documentation home</a>

The notation in this anchor element instructs the browser to take these steps:

1. Move up one folder from the folder the linking document is stored in.

2. Find a folder called docs.

3. Inside that folder, find a file called home.html.

When you create a relative link, the location of the file to which you link is always relative to the file from which you link. As you create a relative URL, trace the path a browser takes if it starts on the page you’re linking from to get to the page to which you’re linking. That path defines the URL you need.

---

Basic links

To create a link, you need

• A web address (called a Uniform Resource Locator; URL) for the website or file that’s your link target. This usually starts with http://.
• Some text in your web page to label or describe the link. Make sure that the text you use says something useful about the resource being linked.
• An anchor element (<a>) with an href attribute to bring it all together.

The element to create links is called an anchor element because you use it to anchor a URL to some text on your page. When users view your page in a browser, they can click the text to activate the link and visit the page whose URL you specified in that link. You insert the full URL in the href attribute to tell the link where to go.You can think of the structure of a basic link as a cheeseburger (or your preferred vegan substitute). The URL is the patty, the link text is the cheese, and the anchor tags are the buns. Tasty, yes?

For example, if you have a web page that describes HTML standards, you may want to refer web surfers to the World Wide Web Consortium (W3C) — the organization that governs all things related to HTML standards. 

A basic link to the W3C website, www.w3.org, looks like this:https://stackblitz.com/edit/web-platform-ti7mqs?embed=1&file=index.html&hideDevTools=1&hideExplorer=1&hideNavigation=1

You specify the link URL (http://www.w3.org) in the anchor element’s href attribute. The text (World Wide Web Consortium) between the anchor element’s opening and closing tags (<a> and </a>) describes the link.

---

Why links?

Hyperlinks, or simply links, connect HTML pages and other resources on the web. When you include a link on your page, you enable visitors to travel from your page to another website, another page on your site, or even another location on the same page. Without links, a page stands alone, disconnected from the rest of the web. With links, that page becomes part of the almost boundless collection of information that is the World Wide Web.

---

Submit and Reset buttons

Submit and Reset buttons help the user tell the browser what to do with the form. You can create buttons to either submit or reset your form, using the <input> element with the following type and value attributes:

1. Submit: Visitors have to tell a browser when they’re done with a form and want to send the contents. You create a button to submit the form to you by using the following markup:

<input type=”submit” value=”Submit”>

You don’t use the name attribute for the Submit and Reset buttons. Instead, you use the value attribute to specify how the browser labels the buttons for display.

2. Reset: Visitors need to clear the form if they want to start all over again or decide not to fill it out. You create a button to reset (clear) the form by using the following markup:

<input type=”reset” value=”Clear”>

You can set the value to anything you want to appear on the button. In our example, we set ours to Clear. Of course, you can use something that’s more appropriate to your website if you’d like.

The following is an example of markup to create Submit and Reset buttons named Send and Clear, respectively:

---

Multiline text boxes

If a single-line text field doesn’t offer enough room for a response, create a text box instead of a text field:

• The <textarea> element defines the box and its parameters.
• The rows attribute specifies the height of the box in rows based on the font in the text box.
• The cols attribute specifies the width of the box in columns based on the font in the text box.

The text that the user types into the box provides the value, so you need only give the box a name with the name attribute:https://stackblitz.com/edit/web-platform-unhenc?embed=1&file=index.html&hideDevTools=1&hideExplorer=1&hideNavigation=1

Any text you include between the <textarea> and </textarea> tags appears in the text box in the browser. The user then enters information in the text box and overwrites your text.

---

Drop-down list fields

Drop-down lists are a great way to give users lots of options in a small amount of screen space. 

You use two tags to create a drop-down list:

• <select> creates the list. Use a name attribute with the <select> element to name your list.
• A collection of <option> elements identifies individual list options. The value attribute assigns a unique value for each <option> element.

Here’s a markup example for a drop-down list:https://stackblitz.com/edit/web-platform-mhujpo?embed=1&file=index.html&hideDevTools=1&hideExplorer=1&hideNavigation=1

The browser turns this markup into a drop-down list with three items.

You can also enable users to select more than one item from a drop-down list by changing the default settings of your list:

• If you want your users to be able to choose more than one option (by holding down the Ctrl [Windows] or ⌘ [Mac] key while clicking options in the list), add the multiple attribute to the <select> tag. The value of multiple is multiple. If you give a stand-alone attribute a value, that value must be the same as the name for the attribute itself (that is, both multiple and multiple=”multiple” are legal).
• By default, the browser displays only one option until the user clicks the drop-down menu arrow to display the rest of the list. Use the size attribute with the <select> tag to specify how many options to show. If you specify fewer than the total number of options, the browser includes a scroll bar with the drop-down list. 

You can specify that one of the options in the drop-down list be already selected when the browser loads the page, just as you can specify a check box or radio button to be selected. Simply add the selected attribute for the <option> tag you want as the default. Use this when one choice is very likely, knowing that users can override your default selection quickly and easily.

---