Scribd
Upload
58 views

Website Instruction 2

Uploaded by

api-636521197
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
58 views

Website Instruction 2

Uploaded by

api-636521197
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

Step 1: Copy and paste the index.html code below and save it as index.

html in a folder named First


Website. Be sure to save as type “all files”!
Copy the path of index.html file. Open a web browser and paste the path. You should have a very simple
website display. Now you can adjust “Name” to your be your name. Each time you update your HTML
code be sure to save, or the changes will not be displayed. You can also adjust the initials in the footer to
match your initials. Congratulations! You just created your first webpage.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>My First Website</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
<h1>Name</h1>
<nav>
<a href="index.html"><strong><em>Home</em></strong></a>
<a href="about.html">About</a>
<a href="hobbies.html">Hobbies</a>
<a href="favorites.html">Favorites</a>
</nav>
</header>
<footer>
<hr>
A.B. 2023&copy
</footer>
</body>
</html>

Step2: In order for the links (About, Hobbies, Favorites) to work, we need to create an html file for each
link and save it to the First Website. Copy and paste the about.html code below and save it as about.html
in the First Website folder. You should be able to go to the “About” webpage from the home page now.
The about paragraph can also be adjust to your own personal paragraph.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>About</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
<h1>Name</h1>
<nav>
<a href="index.html">Home</a>
<a href="about.html"><strong><em>About</em></strong></a>
<a href="hobbies.html">Hobbies</a>
<a href="favorites.html">Favorites</a>
</nav>
</header>
<main>
<p> My name is Stacy K. I am a student and am learning about Web Development. I am practicing my
HTML and CSS skills by building this website. </p>
</main>
<footer>
<hr>
A.B. 2023&copy
</footer>
</body>
</html>

Step 3: Copy and paste the hobbies.html code below and save it as hobbies.html in the First Website
folder. You should be able to go to the hobbies webpage now as well. You can also update the hobbies
to be your personal hobbies.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Hobbies</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
<h1>Name</h1>
<nav>
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="hobbies.html"><strong><em>Hobbies</em></strong></a>
<a href="favorites.html">Favorites</a>
</nav>
</header>
<br>
<main>
My Hobbies are:
<ul>
<li>Hiking</li>
<li>Cooking</li>
<li>Programming</li>
<li>Reading</li>
</ul>
</main>
<footer>
<hr>
A.B. 2023&copy
</footer>
</body>
</html>

Step 4: Copy and paste the favorites.html code below and save it as favorites.html in the First Website
folder. You should be able to go to all webpages now. You can also update the table data to your
personal favorites.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Favorites</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
<h1>Name</h1>
<nav>
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="hobbies.html">Hobbies</a>
<a href="favorites.html"><strong><em>Favorites</em></strong></a>
</nav>
</header>
<br>
<main>
<table>
<tr>
<td><strong>Category</strong></td>
<td><strong>My Favorite</strong></td>
<tr>
<td>Color:</td>
<td>Pink</td>
</tr>
<tr>
<td>Movie:</td>
<td>Grease</td>
</tr>
<tr>
<td>Song:</td>
<td>Don't Stop Believing</td>
</tr>
</table>
</main>
<footer>
<hr>
A.B. 2023&copy
</footer>
</body>
</html>

Step 5: Let’s add a picture to our home page. In order to add a picture, we need to save a picture as a jpg
to our First Website folder. We are going to add the below code to our index.html file in between the
header and footer. Copy the path of your image and paste the path in the “ ” where it says “path to
picture”. You may also need to adjust the width and length so your picture is a good size. Your image
should be displayed on the home page. If it does not you will see the alternative text “Picture of myself”.
If you are not using a picture of yourself update the alt attribute to have a description of your image.

<main>
<figure>
<img src="path to picture" alt = "Picture of myself" width="200px" length = "200px"/>
</figure>
</main>

Step 6: Let’s change the background color. Create another file and copy and paste the CSS code below
into a new CSS file. Save the file as style.css and be sure to save as type “All files”. This will allow your CSS
file to be connected to your HTML file. After your new CSS file is saved, refresh your favorites page. The
background color should have changed. You can adjust the color to your favorite color.
html {
height: 100%;
width: 100%;
}
body {
background-color: pink;
}

Step 7: Let’s change the navigation menu. Add the following lines as to your CSS file, save, and refresh.
You should notice the navigation menu now looks different. You can adjust the color to another color if
you want. The color will need to be adjusted if your background is red, since it will be red text on a red
background.

nav a { /* links within "nav" container */


padding:15px;
padding-bottom:4px;
font-size: 1.8em;
text-decoration: none; /* removes underline */
color: Red; /* by default, links are blue but this allows us to change the color */
}

Step 8: Let change the color and font to the about paragraph. Add the following lines to your CSS file,
save, and refresh.

p{
color: white;
font-family: 'Pacifico', cursive;
}

Step 9: Let’s make our bullet points more creative. Copy and add the following lines to your CSS file,
save, and refresh. You will notice there are boxes with shadows around each line item now.

li {
font-family: 'Arial', sans-serif;
margin-bottom: 10px;
background-color: #f2f2f2;
padding: 8px;
border-radius: 5px;
box-shadow: 2px 2px 5px;
text-align:left;
}
Step 10: Let’s add lines to our table. Add the following lines to your CSS file, save, and refresh.

table{
border: 4px dotted goldenrod;
}
th{
border: 1px solid black;
}

td{
border: 1px solid black;
}

Step 11: Let’s change the heading on all the pages. Add the following lines to your CSS file, save, and
refresh.

h1{
text-align: center;
font-family: cursive;
}

Step 12: Let’s use a class to change the color of “My Hobbies are” on the Hobbies page. On the
hobbies.html page locate where it is typed. We are going to add a divider tag <div>, which will help us
only update this line. Update the line to match the code: <div class = "hobbies"> My Hobbies are: </div>
We have given it the class name hobbies. In the CSS file, add the lines, save, and refresh. You will noticed
there is period (.) before the name because we are using a class.

.hobbies{
color:white;
}

Step 13: Let’s center our body. Copy and add the following lines to your CSS file, save, and refresh. Notice
what moved to the center of the page.

body{
text-align:center;
}

You should be able to look at your website and notice all the changes we have made since Step 1. There
is an endless amount that can be added, but I hope this helps gain an idea of how a website is
constructed. Congratulations on making your first website!!

You might also like