The above code is a basic web page template. Note how it's divided into two main pieces (the screenshot
below doesn't refer to our file example):
1. The `head` where all **configuration** information about your page will go.
2. The `body` where the **content** of your page will go.
With your file set up, you're ready to start writing some HTML. With each edit you make below, save your changes and refresh the browser to see the results.
**Tip: Re-opening HTML files:** If you close your `top5.html` file in Canopy and try to re-open it, Canopy will display it as a web page, rather than showing you the HTML code.
To get around this, right click `top5.html` in the File Browser and choose `Open With > Code Editor`.
## Tag basics
HTML is a tag based language.
Tags are used to surround content, for example, here's a Heading 1 (`h1`) tag:
```
## Tag teamwork
Some tags work together with other tags.
For example, an `- Apples
- Oranges
- Pears
- Grapes
`, add a list of the current top 5 artists on Last.fm (listed at ).
(The artists in the above screenshot may not reflect the current top 5 artists you see when you build your page)
## Links
Some start tags have **attributes** to describe information about that element.
Example, the `` element ([anchors](https://www.w3schools.com/TAgs/tag_a.asp) i.e., links) has the `href` attribute which dictates where a link should go.
```
Ed Sheeran
```
### Task 1d: Add links
Edit your unordered list so that each artist name links to their artist page on Last.fm. For example, Ed Sheeran should link to `http://last.fm/music/Ed+Sheeran`.
Note that in order to accomplish this, you will be nesting `` elements inside of your existing `- ` elements.
## Images
Images have a `src` attribute to specify the image's location.
For example, here's an `img` tag that would display the Last.fm logo:
```
```
The displayed image has a default width that may be too large for your tastes. You can change it using the `style` attribute to specify a different width:
```
```
The `alt` attribute is required for non-decorative images and is used to describe what the image is of. The alt attribute is important for search engines, and individuals who use screen readers:
```
```
### Task 1e: Add image
Right before the `` element, add the Last.fm logo.
### Task 1f: Spotlight artist
Pick one of the top 5 artists (or any other artist you like) to spotlight on your page.
Below your unordered list, add a heading like:
```
Artist Spotlight: Rihanna
```
Below that heading, add an image of that artist.
```
```
Every artist page on Last.fm also has a page of images you can browse to find an image. For example: .
When you find an image you want to use, right-click/control-click on that image and select the to copy the image URL.
- Chrome: _Copy Image Address_
- Firefox: _Copy Image Location_
- Safari: _Copy Image Address_
Depending on which browser you use, you should get a URL that looks like one of the following:
```
https://lastfm-img2.akamaized.net/i/u/avatar170s/ed53efb3820d059b2e6d62efa35d0918
```
or
```
https://lastfm-img2.akamaized.net/i/u/770x0/ed53efb3820d059b2e6d62efa35d0918.jpg
```
If the image you choose is very large, you can shrink it down by setting a width attribute on your image (you don't have to set the height because it will shrink proportionally to the height).
```
```
_Side Note: Shrinking the image like this is not ideal, because while the image might display smaller, the browser still has to load the larger image, which will slow the loading of the page. When building real web pages that will be loaded on the internet, it's better to save the image and actually shrink it in a program like Photoshop. For our purposes, though, this technique is okay for now._
## Aside: Indentation in HTML
We've learned that correct indentation is essential in Python— if your code isn't properly indented, your script won't run.
HTML, however, is forgiving regarding spaces/indentation and your browser will ignore any white space in your code beyond a single space.
You can try it out: all of the following examples will produce the same results, despite their various spacing.
```
Hello World
```
```
Hello
World
```
```
Hello World
```
While code indentation/spacing is not important for the browser, it's still important for you the programmer (and other programmers that will read your code).
In HTML, indentation shows hierarchy. For example, if you have a series of list items (`- `) nested inside an unordered list (`
`), those list items should be indented to show they are child elements of the parent list element.
```
- Apples
- Oranges
- Pears
- Grapes
Compare the above, correct, example to the following incorrect example:
```
- Apples
- Oranges
- Pears
- Grapes
Notice how the child relationship is visually harder to spot in this latter example.
### Variations
Nesting child elements is common for structural elements with several child components. Smaller examples, however, may be written on one line.
For example, instead of this:
```
Wellesley
```
You could write this:
```
Wellesley
```
This comes down to personal preference. While styles may vary, the big picture goal of indentation is to write code that is organized and legible.
@include('/labs/htmlCSSLab/_toc')
@stop
(The artists in the above screenshot may not reflect the current top 5 artists you see when you build your page)
## Links
Some start tags have **attributes** to describe information about that element.
Example, the `` element ([anchors](https://www.w3schools.com/TAgs/tag_a.asp) i.e., links) has the `href` attribute which dictates where a link should go.
```
Ed Sheeran
```
### Task 1d: Add links
Edit your unordered list so that each artist name links to their artist page on Last.fm. For example, Ed Sheeran should link to `http://last.fm/music/Ed+Sheeran`.
Note that in order to accomplish this, you will be nesting `` elements inside of your existing `
```
The displayed image has a default width that may be too large for your tastes. You can change it using the `style` attribute to specify a different width:
```
```
The `alt` attribute is required for non-decorative images and is used to describe what the image is of. The alt attribute is important for search engines, and individuals who use screen readers:
```
```
### Task 1e: Add image
Right before the `` element, add the Last.fm logo.
### Task 1f: Spotlight artist
Pick one of the top 5 artists (or any other artist you like) to spotlight on your page.
Below your unordered list, add a heading like:
```
Artist Spotlight: Rihanna
```
Below that heading, add an image of that artist.
```
```
Every artist page on Last.fm also has a page of images you can browse to find an image. For example: .
When you find an image you want to use, right-click/control-click on that image and select the to copy the image URL.
- Chrome: _Copy Image Address_
- Firefox: _Copy Image Location_
- Safari: _Copy Image Address_
Depending on which browser you use, you should get a URL that looks like one of the following:
```
https://lastfm-img2.akamaized.net/i/u/avatar170s/ed53efb3820d059b2e6d62efa35d0918
```
or
```
https://lastfm-img2.akamaized.net/i/u/770x0/ed53efb3820d059b2e6d62efa35d0918.jpg
```
If the image you choose is very large, you can shrink it down by setting a width attribute on your image (you don't have to set the height because it will shrink proportionally to the height).
```
```
_Side Note: Shrinking the image like this is not ideal, because while the image might display smaller, the browser still has to load the larger image, which will slow the loading of the page. When building real web pages that will be loaded on the internet, it's better to save the image and actually shrink it in a program like Photoshop. For our purposes, though, this technique is okay for now._
## Aside: Indentation in HTML
We've learned that correct indentation is essential in Python— if your code isn't properly indented, your script won't run.
HTML, however, is forgiving regarding spaces/indentation and your browser will ignore any white space in your code beyond a single space.
You can try it out: all of the following examples will produce the same results, despite their various spacing.
```
Hello World
```
```
Hello
World
```
```
Hello World
```
While code indentation/spacing is not important for the browser, it's still important for you the programmer (and other programmers that will read your code).
In HTML, indentation shows hierarchy. For example, if you have a series of list items (`- `) nested inside an unordered list (`
`), those list items should be indented to show they are child elements of the parent list element.
```
- Apples
- Oranges
- Pears
- Grapes
Compare the above, correct, example to the following incorrect example:
```
- Apples
- Oranges
- Pears
- Grapes
Notice how the child relationship is visually harder to spot in this latter example.
### Variations
Nesting child elements is common for structural elements with several child components. Smaller examples, however, may be written on one line.
For example, instead of this:
```
Wellesley
```
You could write this:
```
Wellesley
```
This comes down to personal preference. While styles may vary, the big picture goal of indentation is to write code that is organized and legible.
@include('/labs/htmlCSSLab/_toc')
@stop
```
_Side Note: Shrinking the image like this is not ideal, because while the image might display smaller, the browser still has to load the larger image, which will slow the loading of the page. When building real web pages that will be loaded on the internet, it's better to save the image and actually shrink it in a program like Photoshop. For our purposes, though, this technique is okay for now._
## Aside: Indentation in HTML
We've learned that correct indentation is essential in Python— if your code isn't properly indented, your script won't run.
HTML, however, is forgiving regarding spaces/indentation and your browser will ignore any white space in your code beyond a single space.
You can try it out: all of the following examples will produce the same results, despite their various spacing.
```
Hello World
``` ```Hello World
``` ```Hello World
``` While code indentation/spacing is not important for the browser, it's still important for you the programmer (and other programmers that will read your code). In HTML, indentation shows hierarchy. For example, if you have a series of list items (`- `), those list items should be indented to show they are child elements of the parent list element.
```
- Apples
- Oranges
- Pears
- Grapes
- Apples
- Oranges
- Pears
- Grapes