Workshop Plan
#Create a Simple Website in CSS/HTML and deploy to Amazon S3
HTML - HyperText Markup Language is the standard language used to create web pages. Web browsers can read HTML files and render them into visible web pages.
HTML documents are described by **HTML tags, **these are enclosed in angular brackets <>.
HTML tags can be considered to be "keywords" that the browser can understand and render/draw in the browser appropriately when viewing the page.
Each browser has default ways of interpreting each element, these can later be "styled" to look how you prefer with the help of CSS, which will be explained a little further on.
We will create a very basic HTML page that will load and simply display "Hello World". It will look like this:
-
The DOCTYPE is a declaration and tells the browser which 'language' we are talking in so it knows how to render it.
-
The text between <html> and ≶/html> describes an HTML document
-
The text between <head> and </head> provides information about the document
-
The text between <title> and </title> provides a title for the document
-
The text between <body> and </body> describes the visible page content
-
The text between <h1> and </h1> describes a heading
-
The text between <p> and </p> describes a paragraph
-
Install Sublime http://www.sublimetext.com/ or use your preferred text editor
-
Create a new folder in your "Documents" folder for this workshop, let’s call it “website”.
-
Now open the text editor and type out the example code from earlier:
-
Save this file as index.html , you can press _Cmd+S _(Mac) **or Ctrl+S (WIndows)
-
**index.html **is a special name and this is a file that the server will look for by default when a certain url is requested (link e.g. http://website.com).
-
Each simple website is basically a "directory" of files, the** index.html **is the first file the web browser will access and from here you can specify how to reach other files via writing hyperlinks.
-
The default file can be configured to be called something else if required, but for the purpose of this workshop we will only concentrate on simple defaults.
-
-
Open your web browser, then press Ctrl + O (Windows) or Cmd + O (Mac) to open the file we have just created. You should see "Hello World" and the text you added as the paragraph.
HTML5 is simply a newer version that is supported by most modern browsers. HTML5 introduced some more awesome elements/tags we can use: such as ,
and many more to bring the HTML language more in-line with modern times.We can add more to the page at this stage or later, here is a list of html and new html5 tags you can use: http://www.htmldog.com/references/html/tags/
Exercises:
-
Add an image
:
- Type out the following and modify the src to point to an image you like:
2. width="100" height="90" are optional, play around with the numbers.
3. More info - [http://www.htmldog.com/references/html/tags/img/](http://www.htmldog.com/references/html/tags/img/)
-
Add a **link <a> **to your favourite website:
- Type out the following and modify it to link to point your favourite website:
5. More info - [http://www.w3schools.com/html/html_links.asp](http://www.w3schools.com/html/html_links.asp)
-
Add a **footer <footer> **(these usually sit at the bottom of the page, but sometimes have to be styled to stay at the bottom if there is not enough content to fill the page):
- Type out the following and modify it to say anything you want:
7. Now try to add a link within the footer to [http://www.lyst.com](http://www.lyst.com)
8. More info - [http://www.htmldog.com/references/html/tags/footer/](http://www.htmldog.com/references/html/tags/footer/)
-
Add a comment, which says "This is my first website!":
- Type out the following and modify it to say anything you want:
10. More info - [http://www.tutorialspoint.com/html/html_comments.htm](http://www.tutorialspoint.com/html/html_comments.htm)
-
Add an unordered list of 3 things you love (use previous examples to get the format right):
-
Unordered list is started using the tag **<ul> and **closed using </ul>
-
Within the list declaration mentioned above you can add in list items, these are defined by: <li> </li>
-
You can have as many list items in the unordered list as you want
-
Within each item you can add other elements, such as: paragraph, link, images, another list.
-
Play around with this one, it is very useful especially for menus
-
More info - http://www.htmldog.com/references/html/tags/ul/
-
Further reading:
Cascading Style Sheets (CSS) is a style sheet language used for describing what the html elements should "look like". It is used to describe whether an html element should be of certain height, width, if the text should be bold, text colour etc. We will try this shortly.
CSS allows us to separate the document structure from document appearance, it also allows certain styles to be re-used. For example if all buttons should look the same, it allows us to style them once and not repeat ourselves
This is a rule:
-
This rule starts with h1, which is a selector.
-
The part inside the curly braces is the declaration.
-
color is a property
-
red is a value.
-
color: red; is a property-value** **pair
-
The semicolon after the property-value** **pair separates it from other property-value pairs in the same declaration, example:
We will refer to those definitions throughout this class.
When the browser reads the CSS file, it finds each selector and works out if it applies to any elements in the HTML.
If it does, it uses the properties within the matching rule.
A style sheet consists of a list of rules.
Each rule or rule-set consists of one or more _selectors. _
Selectors allow you to SELECT all elements that match:
-
a certain tag name e.g.
-
In addition to tag names, you can use **attribute values **in selectors and for example select all items that are h1 but have a class .red (More info on classes later)
-
Create a new file in the same folder as the index.html and name it style.css
-
Type out the code below and save in in your style.css file:
Here you created a rule that says: All h1 elements have these properties:
-
- text alignment is center *
-
*the text colour is *red.
Now use the example above to do the same for p element. (clue: create a new rule and replace h1 with p)
Now that we have our first stylesheet, we can tell the html document we created to use that stylesheet to tell the browser what the page should look like.
- Add the following line in your index.html file underneath the title tag:
- Reload the file in the browser or open it again: Open your web browser, then press Ctrl + O (Windows) or Cmd + O (Mac) to open the file we have just updated. You should see "Hello World" and the text you added in the paragraph with the added style.
color
Description:* *this is the text colour, this is used to style elements that have text e.g. h1, p, h2
Example**: color: white;**
background-color
Description: this is used to define the background color of a particular element.
Example: background-color: blue;
font-size
Description: this is used to set the size of a font in px or other units
Example: font-size: 16px;
More info: Css font size units
background-image
** Description: **this is used to set an image as a background of an element.
*Example*: **background-image: url(http://examplelink.com);**
text-align
Description:** **this is used to align text.
*Example*: **text-align: left;**
padding
Description:** **sets the padding of the element. See the Box Model Picture below for
an explanation of what padding is and how it will affect the look of the element.
*Example*: **padding: 10px 10px 10px 10px;**
padding: 10px;
margin
Description:** **this is used to set the margin of the element. See the Box Model
Picture below for an explanation of what padding is and how it will affect the
look of the element.
*Example*: **margin: 10px;**
In a document, each element is represented as a rectangular box
This model describes the content of the space taken by an element. Each box has four edges:
-
the margin edge
-
border edge
-
padding edge
-
content edge (in blue)
References:
-
Try out all the properties from the Basic Properties section and see what they all do.
-
You can also style the element, try setting a background image on the element and see what that does.
-
Make an image to also be a link, ie make the image clickable that will take you to a different website.* Tip: you can add some elements inside of other elements,try and add an image within the link.*
-
Align Left or Center all the text on the page
-
Click on "Try Amazon S3 for Free":
- Enter your email address or Phone Number and select "I am New User" and click “Sign in using our secure server”
- Fill Out required info
-
Fill out credit card info
-
Confirm your identity via a call
-
Sign in to the amazon console on https://aws.amazon.com/s3/
-
Click on S3
- Click "Create a new Bucket"
- Fill out the bucket name (example yourname.com)
-
Click into the bucket
-
Select "Actions" → “Upload”
-
Click "Set Details" → “Set permissions”
-
Tick "Make everything Public"
-
Click "Start Upload"
-
Select the file index.html and click "Properties"
-
Click on the Link
-
This is now your first website LIVE on the internet! It is now accessible via this link at any time.
-
http://caniuse.com/ - find out if the tag you would like to use is supported on a particuar browser and which versions.
-
Sign in to the amazon console on https://console.aws.amazon.com/console/home?nc2=h_m_mc
-
Click on Identity & Access Management
-
Click on User on the left hand-side menu
-
Click Create New User
-
Enter username **testuser **
-
Click **Create **
-
Download the credentials. These will include User Name, Access Key Id, Secret Access Key.* Keep these secret as they are tied to your account and can be used for malicious purposes if not kept safely. Remember that your account is tied to your credit card.
-
You should now see your user created in the user dashboard
-
Click your newly created user **testuser **
-
Click on Permissions → Attach Policy
-
Select AmazonS3FullAccess → Attach Policy
-
Done
-
Grunt and Grunt plugins are installed and managed via npm, the Node.js package manager. → https://nodejs.org/en/
-
Open your preferred terminal or install https://www.iterm2.com/
If you have not used command line terminal before here is a few basic commands:
ls
Description: Lists the names of the files in the working directory.
For more complete information use ls –alF
cd directoryname
Description: Changes the working directory to the one you named.
cd ..
Description: Brings you up one directory level.
cd
Description: Returns you to your home directory.
pwd
Description: Displays the pathname of the current directory.
mkdir newdirectoryname
Description: Makes a new directory
-
Install Grunt, instructions below will install grunt client globally on your machine, if you already have Grunt installed skip this step. For a more detailed explanation see the official website:
-
Now we will install Grunt locally specifically for this project. Go to your project folder workshop: in the terminal type out the below command to get to the project folder (if you have saved the workshop folder elsewhere adjust the path):
**
** -
In your terminal type out npm init and follow the instructions
Grunt uses different plugins to perform certain tasks, in order to deploy to Amazon S3 we will use the following plugin: https://github.com/MathieuLoutre/grunt-aws-s3
-
In your workshop folder we can install this task using the command below:
-
We now have the plugin installed and we can configure grunt to use this task to deploy our project without having to manually upload the files every time.
-
In order for us to use this plugin and deploy to S3 in the command line we need to create a file called s3settings.json, here we will keep all the login details and bucket information. This file MUST be kept secret, do not commit it to github or any other version control. It should be excluded in .gitignore file if you are using git. It is important to take care as if these details are made public your account may be accessed and used by someone else, leaving you with a bill to pay:
The key and secret are available in the user credentials file you downloaded earlier when creating an IAM testuser. Bucket must be exactly what you called the bucket on Amazon S3 and the same for region.
-
The second file we need to create is** Gruntfile.js** this is a default file Grunt will look for locally within the project folder. Here is where we configure the
-
Using your text editor or command line, create a new file within the workshop folder called **Gruntfile.js, **the content of it should be the following:
Full code to copy is here.
Here we have configured the plugin to upload to Amazon S3 all files in the folder **deploy, **so we would now have to create this folder within the project and copy any files we want uploaded.
We have also created a task called deploy which can be run in command line within the project folder to upload all files within deploy folder to Amazon S3, to the bucket specified in the s3settings.json file.
-
Go to the project folder in the terminal
-
you can now run the deploy command by typing:
-
Use Command Prompt as command line
-
Grunt install → http://www.codebelt.com/javascript/install-grunt-js-on-windows/
-
Windows command line commands → http://ss64.com/nt/
-
Install Grunt, more instructions → http://foundation.zurb.com/forum/posts/11597-how-to-install-grunt-and-libsass-on-windows