Create A Webpage

Today you need to create your own web page

Remote into the web server

Remember, when using SSH to connect to another server/computer we are creating a "secure shell" so our communications are safe over the internet, like this:

Open a terminal window.

Use SSH to connect to the web server at my house:

ssh pi@100.11.81.217

password is "openup"

Go to the web server directory:

cd /var/www/html

Create your HTML page using Nano:

sudo nano your_name.html

"your_name" should be your name so I know who created the webpage...

Now copy and paste in the following code:

<!DOCTYPE html>

<html>

<head>

<style>

body {

background-color: lightblue;

}

h1 {

color: white;

text-align: center;

}

p {

font-family: verdana;

font-size: 20px;

}

</style>

</head>

<body>

<h1>My First CSS Example</h1>

<p>This is a paragraph.</p>

</body>

</html>

Exit out of nano by pressing control + x. Be sure to press "y" to save your work!!!

Open a web browser like Google Chrome.

Type the following in the address bar:

http://100.11.81.217/mr_cool.html

Replace "mr_cool" above with the name of your file.

You should see your webpage in the browser.

Congratulations!!!

Customize your web page

Read & study this webpage: https://www.w3schools.com/html/html_basic.asp

Edit your webpage with Nano and add the following:

A new Heading --> https://www.w3schools.com/html/html_headings.asp
A new Paragraph --> https://www.w3schools.com/html/html_paragraphs.asp
An HTML link to a site you like --> https://www.w3schools.com/html/html_links.asp
An image from this page (or any image you like!): https://giphy.com/search/eating --> https://www.w3schools.com/html/html_images.asp

Read & study this webpage: https://www.w3schools.com/css/

Edit your webpage with Nano and change/add the following:

Change the background --> https://www.w3schools.com/css/css_background.asp
Change the text color --> https://www.w3schools.com/css/css_text.asp
Change the font --> https://www.w3schools.com/css/css_font.asp
Change the font size --> https://www.w3schools.com/css/css_font_size.asp

Report abuse