Skip to main content

1.3 html and web servers

Migration

Module 4: web server and web pages (html)

see also https://elab.hpa.edu/cs/TC/TC%205.0%20HTML.pdf

Background:

  • html stands for hypertext markup language
  • it is a markup language, not really programming like python or C
  • it manages how information is presented ("marked up") for viewers
  • others include xml and xhtml, both managing data as well as format (more on this soon)

Installing a web server:

  1. On the raspberry pi, run the following commands:
  2. sudo apt-get update (this updates your computer)
  3. sudo apt-get install apache2 -y (this installs apache web server on your computer, answering yes to all prompts)
  4. Go your browser and enter 127.0.0.1 (which means "me" on the internet)
  5. Now type ifconfig in progressyour terminal and look for Appleyour Wikiinternet address, which should start with 10.14.x.y
  6. Look at this address using your browser

Setup your web folder, edit a page:

  • changing the home page, which is always index.html on any web server:

  1. On the terminal, navigate to the following directory:
  2. cd /var/www/html/
  3. run the ls command, you should see a file called index.html
  4. You can edit this, either by using the nano command (cooler) or later using text editor (simpler)
  5. sudo nano /var/www/html/index.html
  6. This is a complex bit of html, so just look for something you recognize from the 127.0.0.1 test and change it, like the line "It works!"
  7. nano is a text editor, so ctrl-o means overwrite, then return to save, and ctrl-x means exit
  8. If you are using a GUI text editor, it might not let you save.
  • Next we have to fix the permissions:
  1. the directory where all of your web pages are stored is /var/www/html
  2. we need to "open" the directory so you can play in it, and not have to be sudo to change stuff (for now)
  3. to change the permissions on a file, we use chmod, short for "change the mode"
  4. permissions are in sets of three: read (4), write (2), execute (1) (to run a program)
  5. add them all up to get 7 to do everything
  6. so chmod 777 means read this file, write to this file and execute it
  7. you might also see these in ls -la as rwx for read, write, execute for owner, group, everyone
  8. so 777 would look like rwx, rwx, rwx (look with ls -la)
  9. type chmod 755 -R /var/www/html
  10. this makes everything in the html directory read and writable to you and anyone can read
  11. the index.html page M9n9_4y.is the default that every web browser looks for FIRST
  12. you can specify other names in your browser to look around
  13. listing the files in a directory is very useful, but also dangerous for hackers
More on permissions:
  • 755: Owner (rwx), Group (r-x), Others (r-x) - Standard for scripts/folders.
  • 644: Owner (rw-), Group (r--), Others (r--) - Standard for files.
  • 777: Owner (rwx), Group (rwx), Others (rwx) - Public
  • -R means recursive, or all folders and files below this point

HTML Challenge: Part 1: Making a new web page:

  1. cd to the /var/www/html directory and look around (ls -la)
  2. Using either nano create a new page:
  3. sudo nano test.html
  4. You'll notice this is blank.
  5. Add the following to your new web page:

<html>
<head>
test
</head>
<body>
Wow, this is really easy,I am now a true webmaster!Beware my awesome computer skills!
</body>
</html>

  1. remember to overwrite (ctrl-o), return to save,  and exit (ctrl-x)
  2. Now go to your browser and enter http://127.0.0.1/test.html
  3. What do you see?
  4. Create your own pages in your html folder and test
  5. checklist: test.html with your text in it seen from the browser at your web address: http://victim.hpa.edu for example
HTML Challenge: Part 2: Create folders so you can browse your files:
  1. cd to the /var/www/html directory and look around (ls -la)
  2. make a new folder using mkdir mystuff
  3. cd into that folder and use sudo nano to create a new file called secret.txt
  4. go back to your browser and go to http://127.0.0.1/mystuff/
  5. look for the secret.txt file and open it with your browser
  6. cool! you can now download photos, images, screenshots, any file you like into your web server!
  7. checklist: folder inside your website
HTML Challenge: Part 3: Using a text editor to edit and create pages: (may need permissions changed to 777 see above)
  1. use the folder browser to navigate to the /var/www/html folder
  2. open a text editor and create a page called test2.html
  3. add code as you did with the nano editor
  4. save and test
  5. create a new folder on your web server 
  6. create a document there with secret content
  7. challenge your friends to find this page
  8. checklist: show me the hidden folder in any browser
HTML Challenge: Part 4: Remote web page creation:
  1. ssh into 10.14.84.20 or victim.hpa.edu
  2. navigate to the /var/www/html folder
  3. create a folder with your name (short version all lowercase, no spaces)
  4. create a document in html inside the folder 
  5. browse from your station to verify your new web site!
  6. challenge your friends to read your secret message 
  7. checklist: a folder on the http://victim.hpa.edu website in your name, with an html document inside


HTML and w3schools challenge
  1. create some pages using the w3schools tutorials: must include:
    1. headings
    2. paragraphs
    3. links
    4. images
    5. list format
  2. copy this code into your local web server, test
  3. copy this code into the victim.hpa.edu server, test
  4. checklist: seeing your code on the http://victim.hpa.edu website
  5. external access: http://sensor.hpa.edu:8090
Examples: copy these html codes into your computer using nano and separate name and check the pages with your browser:
(to find your hard drive on the mac, click on the desktop, hold command-comma and select hard drive and connected servers)

From Leo: leo.html

<!DOCTYPE html>
<html>
<body>
<h1> Hello World </h1>
</body>
</html>

From Ana Sofia: ana.html

<!DOCTYPE html>
<html>
<head>
<title> This is my homework!! </title>
</head>
<body>
<h1>This is the first heading of my homework :p</h1>
<p>And this is the first paragraph, helloo Dr. Bill</p>
</body>
</html>

From Dominik: dominik.html

<!DOCTYPE html>
<html>
<head>
<title>Dominik's Page</title>
</head>
<body>
<h1>Welcome to my webpage</h1>
<p>Hey, I am Dominik, and I have a dachshund named Luna</p>
</body>
</html>

here's one that does not work: find out why and repair this cool page:
From Rella: rella.html

<!DOCTYPE html>
<html>
<head>
<title> Rella’s wed page/ title>
</head>
<body>
<h1>Welcome to Rella’s web page</h1>
<p>I am a student at Hawaii Preparatory Academy.</p>
<h2>About Me</h2>
<p>I like cheerleading and listening music.</p>
<h2>My Favorite Things</h2>
<ul>I’m
      <li>Cheerleading</li>
      <li>Music</li>
      <li> Spending time with my family</li>
</ul>
<p>This is my first HTML page!</p>
</body>
</html>



Migrated from Apple Server Wiki. Original page ID: M9n9_4y