Web Development Lesson 3 - Lists
Objectives
In this exercise you will display lists as menus, create links to other pages and learn some basic layout properties.
Setup
In this activity, we're going to start building a web site.
Open Visual Studio and open your folder.
Click in the empty part of the Explorer pane (left side where you see the filenames) and click on the 'add folder' icon. Name it 'project'.
Select the new folder and use Ctrl-N and Ctrl-S to create a save a file as 'menu.html'.
Type 'html' and select 'html:5' to populate the file with the base code.
Enter a new line in
<head> and link to an external style sheet (type 'link' and select 'link:css').
Create and save a file called 'style.css'.
<ul>
<li>Funny Story</li>
<li>Who Am I?</li>
<li>Menu</li>
</ul>
We don't necessarily want the bullets or numbers in front though. Let's use
CSS to remove the bullets. Enter the following in 'style.css'.
ul {
list-style-type: none;
}
Rather than choosing a bullet type, we've simply said 'none'.
Add any other styling you'd like (size, color, font etc).
Links
For this sidebar menu to be any use, we need to be able to click on the items and be taken to the respective page / site. For this we need links.
You didn't save the link for your funny story, so we'll use the one I created.
<li><a href="https://jsfiddle.net/maganthro/cen6tj0L/12/">Funny Story</a></li>
The
HTML tag for a link is
<a>. You can place them inside the
<li> or outside, but remember that you can't interlink them.
<li><a></li></a> will cause problems.
-
Save the file, open it in Live Server and take a look at the first line. It should be coloured and underlined. The colour will depend on whether you've visited this page before in this browser on this PC.
Try clicking the link. It should take you straight to the Funny Story jsfiddle.
Notice that you are still using the same tab. If you want to go back to your menu, you need to use the 'back' button. We can change it so that the link opens a new tab.
<li><a href="https://jsfiddle.net/maganthro/cen6tj0L/12/" target="blank">Funny Story</a></li>
The target attribute specifies the destination tab. You can name your tabs so that you can choose which tab to overwrite, but '_blank' will always open a new tab. Try it.
The second link is on the same server, so we don't need to write everything out. We can use a 'relative' address like this.
<li><a href="../lists.html">Who Am I?</a></li>
The .. means 'the directory above the one this file is in.' The browser then works out the whole address and jumps to the correct page.
The first address, which includes 'http' is called an 'absolute' address. We normally use these to link to places outside our server.
The last link is to this page itself. There's not really much point in this, so we could leave it out, but it helps to have the code ready for each page to use. We could block it out with Javascript, but for now, let's just add it as is.
<li><a href="menu.html">Menu</a></li>
Block vs Inline
The other type of menu often used in web pages is across the page below the header.
We can keep the list we've been using, but edit the
CSS to make it look different.
The first thing we need to do is to make the list horizontal.
There are two basic modes for all
HTML elements.
Block elements stack vertically on top of each other.
<h1>,
<p> and
<li> are all examples of block elements.
Inline elements sit side by side horizontally. Examples include
<strong>,
<em> and
<span>.
These can be controlled, though, so you can make list items sit side by side.
Add the following code to your 'style.css'.
li {
display: inline;
}
display has many options that all present the element as either block or inline (or not shown) depending on the elements around them. By setting our list items inline we're telling them to display horizontally.
Open your 'menu.html' in Live Server and check the results.
If you're still seeing the bullets in your menu, it doesn't look as good, so let's remove them again.
ul {
list-style-type: none;
}
ul {
list-style-type: none;
background-color: darkgoldenrod;
padding-top: 10px;
padding-bottom: 10px;
}
li {
display: inline;
border-right: solid 1px yellow;
}
a {
text-decoration: none;
color: #ccc;
padding: 10px;
font-weight: 700;
font-family: arial;
}
You might not understand all these styles. We'll look at padding and borders in the next lesson on tables. Similarly, we'll look at different ways of specifying colours later in the course.
Feel free to adjust some of these values to see what they do.
Final Code