This is an old revision of the document!

Web Development Lesson 2 - Lists

Menus

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'.

Many web sites use a sidebar for navigation or links. It's essentially a list of links, so a list structure is most effective.
Let's create a list of the activities we've done so far. Add this code inside the <body> tags.

    <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;
}

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.
href is the hyperlink reference or the address of the page. Here, our hyperlink is 'https://jsfiddle.net/maganthro/cen6tj0L/12/'.
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>

Try these links to make sure they work as expected. Then we'll look at creating lists dynamically.