Last class was a lot of set up! In this class we will set up the framework for our HTML 5 web page and do a little styling with CSS 3.
- Log into Cloud 9 and open up index.html Your file should look something like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=" utf-8=">
<title>Web Site Name</title>
<link href="styles.css" rel="stylesheet">
</head>
<body>
Hello World!
</body>
</html>
- Lets add some HTML5 tags! We are going to add these tags today:
- <head></head> The start or top of our web page
- <nav></nav> Add navigation links to three pages
- <section></section> Create the main section of our web page
- <article></article> Create a sub section of the main section
- <footer></footer> Add a bottom or footer to our web page
- Here is our new HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=" utf-8=">
<title>Web Site Name</title>
<link href="styles.css" rel="stylesheet">
</head>
<body>
<header>
<nav>
</nav>
</header>
<section>
<article>
<h1>Home</h1>
</article>
</section>
<footer>
</footer
</body>
</html>
- If you click on the run button and then click on the link in the lower console this will allow you to open a new tab in your web browser. There weren't very many changes were there? Only it now says Home in bold!
- Now lets add some links with a special tag called the anchor tag <a></a>
- The anchor tag has a special attribute called the hypertext reference or href for short
- Creating the type of link we will use involves two things
- Setting the href equal to a value which in our case is a URL
- Setting the anchor or as some call it the link text. Here are two examples:
- <href="http://some-web-site">Link Text</a>
- <href="index.html>Home</a>
- Another tag we will use is the <ul></ul> tag. This creates an Unordered List meaning it will create a bulleted list
- An <ol></ol> Ordered List will create a list of numbers or letters:
- this
- that
- The last tag involved in making our list is a <li></li> List Item tag. This is the information that is next to the bullet or number.
- We will now make an <ul></ul> of three <li></li> items!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=" utf-8=">
<title>Web Site Name</title>
<link href="styles.css" rel="stylesheet">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="index.html>Home</a></li>
<li><a href="gallery.html>Home</a></li>
<li><a href="works-cited.html>Home</a></li>
</ul>
</nav>
</header>
<section>
<article>
<h1>Home</h1>
</article>
</section>
<footer>
</footer
</body>
</html>
- Now press Ctrl + S to save or go to File > Save
- Go to the tab of your web page refresh your page and you should see three links!
- Next we will create our other two pages.
- Go to File > Save As... and save the page as gallery.html
- Finally we will do the same thing File Save As... works-cited.html
- In each of these new pages you will need to change the <h1>Home</h1> tag to be Gallery and Works Cited!
<article>
<h1>Home</h1>
</article>
In Day 2 Part 2 we will begin to style our web page using CSS!!!
