A Bare Bones HTML Document. (index.html)

 


 

<!DOCTYPE html>

<head>

<title> the title </title>

<link rel="stylesheet" type="text/css" href'=''css/style.css">

</head>

<body>

<div class = "header"> Header Content </div>

<div class ="main">Main Content</div>

<div class="footer">footer content</div>

</body>

</html>


The HTML doccument consists of elements such as <head>...</head> , <body>...</body>, and <div>. Elements cna be nested indside each other. The elements content (if it has any) is what is between the opening (eg <div>) and closing (</div>) tags. Each element can have one or more attributes. For instacne the <div> elements in our bare bones HTML each have a class attribute. The class attributes value is header, main and footer respectively. These divs can be styled by using a class selector in the documents style sheet.

A Bare Bones Style Sheet (style.css)

.header{background-color: red;}

.main {background-color: blue;}

.footer {background-color: green;}


 Adding Bootstrap

Bootstrap is a collection of CSS and Javascript files that add layout, styling and browser and screen size compatibility features. Without Bootstrap, or a similar library, adding styling features that will appear consistent across a range of browsers and screen sizes is difficult. 

In our demonstration site Bootstrap loads via two files, jquery.js and bootstrap.js  

The Bootstrap CSS file is loaded from the head.

<link rel="stylesheet" type="text/css" href="/introwd/css/bootstrap.css">

Bootstrap also requires two java script files. these are loaded from the bottom of the body element.

<script src="/introwd/js/jquery.js"></script>
<script src="/introwd/js/bootstrap.js"></script>

Placing Elements on the Page

Bootstrap has a number of built in classes that allow you to place elemets in a grid. The Bootstrap grid has 12 columns and these columns can be seperately divided into rows. In our demonstration this is the code for the header in the index.html file:

 

<div class="row">
     <div class="col-12 text-center header">
           <h3>Header</h3>
            <p>HTML CSS, Bootstrap, Demonstration</p>
      </div>
</div>

This is creating a div of the bootstrap class 'row'. The div nested inside the row div has three classes: col-12, text-center and header. The first two are bootstrap classes telling the browser to use all 12 collumns (ie the full browser width) of the enclosing row and to center the text. The third is a class that is defined in the style.css file. The <h3> tag denotes header 3 and by default is styled in a larger font Tthe <p> tag denotes paragraph.

The following code places a main content area and a sidebar into a row. The main class takes up 8 columns of the row and the sidebar 4.

 

<div class="row ">
     <div class="col-md-8  main">
             <h3>Main Content</h3>
             <p>...</p>
      </div>
      <div class="col-md-4 sidebar">
               <h3>Sidebar</h3>
               <p>....</p>
       </div>
</div>

 

Common HTML tags

Heading tags  

<h1>Heading one</h1>

<h2>Heading two</h2>

<h3>Heading 3</h3>

Anchor tag indicates a link

<a href="http://www.somelink.com"> A Link </a>

Lists and list items

<ol>

<li>listitem 1</li>

<li>List item 2</li>

</ol>

Image

<img src=''path to image">

 

 

 

 

            

            

With the script we installed on the server in the last session we also installed a program that allows us to transfer files between the host and our local machine. To make this work we need to install a client FTP program on our local machine. Filzilla is a popular choice.

Once this is installed open it (press Run at the warning).

filezillaset

In the Host  field enter the IP address of your VPS instance (your 'Droplet').

The Username is the Linux user (the one we created using the adduser command at the prompt). The password is the password you created for this user.

Leave the Port field empty and press Quick Connect. The commands indicating that filezilla is connecting to the remote server. If it is succussfull you should see the directory structure similar to the one below appear in the remote site pane. 

filz1

By default filesiler will open in your users home directory. However the server stores its web files in a different directory: Namely: /var/www/html

To access directory we need to click on the top question mark. This represents the root of your server and clicking on it will display the folders contained with in it. In the remote site pane scroll down until you see the var folder.

filz2 

In the bottom pane scroll down until you see the www folder. 

 

Double click on the www folder and finally on the html folder. You should see the index.html. This is the Apache welcome page.

Now lets upload a test site to the server.

Download and extract this zip file into your working directory on your local machine. Ensure your home directory (nested inside another home directory if that is where you extracted it to) looks like this:

homeDir

 

In the left pane of Filezilla navigate to your working directory and drag the extracted home directory (not the zip file and not the top level home directory) into the /var/www/html directory on the server.

 

filezhome

 

Finally we need to change the permissions of the folder so that it will be viewabel in a web browser. we do this by right clicking on the home folder on the server and changing the directroy permissions to 755. Also we need to tick the box recurse into subdirectories. Click ok.

filePerms

 

Now you should be able to navigate to the page by typing your IP address followed by /home into your browser address bar.

Important Security Notes.

Because this is only a test server, not a live production environment I have taken some security short cuts, for the sake of expediancy. To secure a production server:

  • Change the FTP port number on the server 
  • Use minimum file permissions for each folder and file under your web root directroy.
  • Use secure, hard to guess usernames and passwords
  • Install and configure a firewall

See the Linux shell section of the Usefull Links page

 

For the Linux installation on your VPS to be able to host and serve web pages it needs to be configured with various sets of software. This is the called the server environment. One of the most common server environments is the so called 'LAMP' stack. (Linux, Apache, MySQL, PHP)

It consists of:

  1. An operating system..in this case a Ubuntu flavor of Linux. all ready installed with your Droplet
  2. A web server (Apache).  
  3. MYSQL a database engine
  4. PHP. A programming language.

Firstly we need to log in to our VPS via the SSH terminal (Putty). Open Putty (Click Run) and Enter the IP address you received with your email. Click Open. Ignore this warning (click Yes). this is simply telling you that Putty has not connected to this server before.

A terminal window will open. At the prompt 'Login as' type root then press Enter

Enter the password you received with your welcome email. (you can copy it from the email and use the right click to paste it at the prompt. It will not display anything just right click once in the terminal window then press enter).

You will then be prompted to re enter the password (right click and press enter again and then enter a new password). The new password must include letters and digits. This is your VPS root password. 

You should see the 'Welcome to Ubuntu message' and some information about the system. At the bottom is the command prompt. Something like: 

root@host:~#

As a security precaution it is common practice, and highly recommended to create another user (other than the root) and assign that user the privileges we need. To add a user we type the command (The square brackets are Linux speak for a user variable.):

adduser [username]

Replace [username] with a username.  It can be (almost) any letter or number combination, but for practice purposes keep it simple.

You will be prompted for a password, enter then re- enter a password of your choice. This is your VPS User password it. Once again for practice sake keep it simple. (this, of course would not be true if this was a production environment).

You will then be prompted for a bunch of stuff. Just keep pressing enter until you get back to the command prompt:

root@host:~# 

Now we need to assign this user the priveleges we need. To do this enter

adduser [user name] sudo

Now we need to log in as that user. Enter:

su [username]

The command prompt now changes to 

username@host:/root$

The final thing we need to do before we instale the necessary software is go to our home directory.

cd #

You will notice the command prompt changes to

username@host:~$

Indicating that you are now in home directory. 

Now we need to install Apache, MySQL and PHP. We are also going to install a program that allows us to transfer our files between our local machine and the server. 

To make things a little easier I have prepared a script that install all this software in one hit. First you will need to copy the script into your server home directory. We need to use the 'sudo prefix' to ensure the command runs with super user privleges. 

sudo wget http://107.170.169.145/assets/lampin.sh

You should see the saving file mesage then the comand prompt when it is finished.

Now we can run this file.

sudo rbash lampin.sh

A bunch of text will scroll past indicating the software is being installed. As each step completes you will be prompted to enter yes or no. Simply press enter, indicating the default 'Yes', at each of these stages. Eventully a screen will appear asking for a MySQL password. For practice purposes just enter a generic password. (once a gain in a production environment you would ensure that you used a complex password) Re enter it at the prompt.

Then you will be prompted to 'enter the current pasword for root'. This is the MySQL root password you entered in the previous step. Simply type it again.

When asked to change the pasword type n and press Enter. 

Press Enter for all subsequenty steps until you are returned to the command prompt.

The LAMP stack and FTP have now been installed.

You can checked that the server is running pointing your browser to your IP address. You should see the default Apache welcome page.

To learn more about the linux shell ad setting up LAMP see the Linux Shell section of the Usefull Links page

 

 

 

 

 

 

What you will need

Putty, an SSH client that is installed on your local machine. It gives you command line access to the server.

An FTP client such as Filezilla

A VPS account. I recomend Digital Ocean but any server, real or virtual running Ubuntu 14 should work.

Create a VPS Instance (Droplet)

Once you have signed up for your VPS account follow the directions in your welcome email to log in to your control panel. In Digital Ocean select Create. Enter a Hostname (this can be anything). For size select the 512 MB 20 GB option. For distribution Select Ubuntu 14.** x64. Finally select Create Droplet. Check your email for your droplets ip address and root password

Login Via SSH

Open Putty. (Click Run at the publisher could not be verified warning). Copy the IP address of your droplet into the Hostname field of Putty. Click Open.  A command console should open. At the Login As prompt type root . Enter your root password. (you can copy it from your email and paste it into the terminal by right clicking at the at the password prompt. The password field is hidden, you will not see anything, just right click once then press enter.)