TechRoots - Web Development Lesson 2 Part 1
<!DOCTYPE html>
/* CSS */
// JavaScript

Lesson 2 Part 1

We will add a navigation bar to our website!

Before we start let’s see if we remember a few things:

HTML- (Materials needed to construct TIM)

CSS- (Decorating TIM)

JavaScript- (Making TIM interactive)

Before we begin coding, let’s learn some new Tags

<ul> Defines an unordered list (bulleted list)
<li> Defines a list item
<a href> </a> (Hypertext reference) Tells the computer what page to go to when the link is clicked on
<p> Defines a paragraph
<center> Centers all information within the tag
<b> Bolds text

We’re going to add a navigation bar to our websites

To start constructing that let’s add some CSS into our <style> tag

ul {
    list-style-type: none;
    overflow: hidden;
    background-color: #dddddd;
}
li {
    float: left;
}
li a {
    display: block;
    padding: 8px;
}

Explanation of code:

ul {  /* Styling <ul> */
    /* No style to list */
    list-style-type: none;
    /* Hides overflow */
    overflow: hidden;
    /* Background color of navigation bar will be hex-code
    (color code) for gray */
    background-color: #dddddd;
}
li {	/* Styling <li>y */
    /* Words will be on the left side of the screen */
    float: left;
}
li a {	/* Styling <li> */
    /* Navigation bar will be in a rectangle */
    display: block;
    /* Puts 8 pixels of padding between words in navigation bar */
    padding: 8px;
}



Lesson 2 Part 2

We Just decorated our navigation bar *It’s going to be gray*

Now let’s add some HTML to the body

<ul>
<li><a href="#home">Home</a></li>
<li><a href="#foodl">Food</a></li>
<li><a href="#friend">Friend</a></li>
<li><a href="#school">School</a></li>
</ul>
<center><p>Hi My Name is TIM</p>
<p><b>Question</b>
 Can you guys make me a navigation bar?</p></center>

Explanation of code:

<ul> <!--Unordered list (bulleted list)-->
<!--List item (gives order to unordered list)-->
<!--<a href> Creates a link that will bring you to another
page on your website or another website-->
<li><a href="#home">Home</a></li>
<li><a href="#food">Food</a></li>
<li><a href="#friend">Friend</a></li>
<li><a href="#school">School</a></li>
</ul>
<!--<center> Centers words within the line; <p> - Paragraph tag-->
<center><p>Hi My Name is TIM</p>
<!--<b> Bolds word AKA makes text thicker-->
<p><b>Question</b>
 Can you guys make me a navigation bar?</p></center>

You should finally have 4 different pages

Final Code for this Lesson

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  overflow: hidden;
 background-color: #dddddd;
}
li {
  float: left;
}
li a {
  display: block;
  padding: 8px;
}
body {
  background-color:#d0e4fe;
}
h1 {
  color: red;
  text-align: center;
}
p {
  font-family:"Times New Roman";
  font-size: 20px;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#food">Food</a></li>
<li><a href="#friend">Friend</a></li>
<li><a href="#school">School</a></li>
</ul>
<center><p>Hi My Name is TIM</p>
<p><b>Question</b> Can you guys make me a
navigation bar?</p></center>
<h1>My First CSS Example</h1>
<center><p>This is a paragraph.</p></center>
</body>
</html>

*End of lesson 2*