< Back to Course

INF-250: Web Design and Development — Attributes, Links, & Images

Working locally with VSCode

To practice our attributes, links, and images, we're going to work locally in a folder on our computer and edit the files with VScode.

  • Create a folder somewhere on your computer that you can easily access (I'd recommend your Desktop or User folder.)
  • Name the new folder "Week3"
  • Open VSCode, and drag the folder into the editor window to create your workspace. You should now see a sidebar on the left titled "Week3."
  • Right/CMD click in the sidebar and select "New File." Or click the New File icon at the top of the sidebar.
  • Name the file exactly index.html.

Add your HTML scaffolding

Now we have a folder open in VScode and have created our index file. Remember that a web server always looks for the index file to display when a user visits a certain folder.

With index.html selected in VScode, add your basic HTML outline (doctype, html, head, title, body.)

Add an <h1> also so you can see something when testing the page in the browser. 

<!doctype html>
<html>
	<head>
		<title>Week 3</title>
	</head>
	<body>
		<h1>Week 3</h1>
	</body>
</html>

Find the index.html file on your computer and double-click to open it in your browser. Verify you see your heading displayed and the title in the browser tab.

Attributes

HTML attributes are extra bits of information that we want the browser to know about an element.

They are set in the opening tag only.

Some common attributes we'll use are:
  • id: a unique identifier for an element. Used for CSS and JavaScript.
  • class: a way to group elements together. Also used for CSS and JavaScript.
  • src: specifies the source of an image, script, or iframe.
  • href: specifies the destination URL of a link.

In your index file, add a class and ID to your <h1> element. 

<h1 id="main-heading" class="title">Week 3</h1>

Then add some <p> elements with text inside. Give one a class attribute. 

<p class="large">
	This is a paragraph with a class attribute.
	The value of the attribute is "large".
</p>
<p>This is a paragraph without any attributes.</p>

Use CSS to style attributes

We haven't learned CSS yet, but you can get an idea of classes and IDs work with this simple example. Put this <style> block inside the <head> of your index.html file, just below the <title>. 

<style>
	#main-heading {
		color: blue;
	}

	.title {
		text-transform: uppercase;
	}

	.large {
		font-size: 20px;
	}
</style>
ID vs Class
Use a hash (#) to target an ID.
Use a period (.) to target a class.

Attributes in <head>

Some attributes are used in the head of the document to provide metadata about the page.

  • <meta charset=...> sets the character encoding.
  • <meta name=... content=...> is used for descriptions and other metadata.
  • <html lang=...> helps browsers and screen readers.

What is “charset”? Your page is stored as bytes, and the browser needs to know which character set (encoding) to use when turning those bytes into letters, punctuation, and symbols.

Most sites use UTF-8 because it supports basically every language and symbol you’ll ever need (including accented characters like é and smart quotes). Without the correct charset, text can show up as weird boxes or garbage characters.

Add the following meta tags to the <head> section, and add the "lang" attribute to the <html> tag: 

<!doctype html>
<html lang="en">
	<head>
		<title>Week 3</title>
		<meta charset="UTF-8" />
		<meta name="description" content="Week 3 HTML Basics" />

Links

Before we add links, let's add another page to our site.

  • In VScode, right/CMD click in the sidebar and select "New File."
  • Name the new file exactly about.html.
  • Copy over the HTML from your index.html file into about.html.
  • Set the title to "About" and add an <h1> with "About" text inside the body.

Linking our pages (relative links)

Now we can add a link from index.html to about.html using the <a> element with the href attribute. Put it inside a <div> so it falls on its own line. You can put this above the <h1> in the body. 

<div>
	<a href="about.html">About Us</a>
</div>

Then do the same on about.html, but link to index.html.

These links are called relative links because they point to other files relative to the current file's location. They don't need to start with http or www because the browser knows to look in the same folder as the current file.

Linking to other pages (absolute links)

An absolute link points to a full web address (a complete URL), like https://example.com.

Use absolute links when you want to send the user to a different website (or any page that isn't a file sitting next to your current HTML file).

Add an absolute link to your index.html file (you can place it below your relative link): 

<div>
	<a href="https://www.msj.edu/" target="_blank">MSJ (opens in a new tab)</a>
</div>
New tab tip
Use target="_blank" to open a link in a new tab.

Images

Inside your Week3 folder, create a new folder named images.

Download this image: Roar Store Logo

Move the downloaded images into the images folder you just created.

Now we can add the image to our index.html file using the <img> element with the src attribute. 

<img src="images/msj.jpg" alt="Roar Store Logo" />
The alt attribute provides alternative text for the image if it cannot be displayed. It is also used by screen readers for accessibility.

Now add a width attribute to control the image size.

<img src="images/msj.jpg" alt="Roar Store Logo" width="200" />

If you set only the width or height, the browser will automatically adjust the other dimension to maintain the image's aspect ratio. If you set both, make sure to keep the aspect ratio correct or it will appear distorted.

Design Break: Concert Venues