Introduction to Web Development

These notes are for the Northern Beaches Community College "Introduction to Web Development". If you'd like to skip to a particular section you can enter the section number at the bottom of the page at any time.

1 - Introduction

What is Web Development?

Web Development is the process of constructing websites. As the internet evolves more and more approaches to web development emerge. For example services like WordPress, Shopify, Wix and Weebly make the contruction of websites easy. However, without any knowledge of web development, these websites are all limited to premade examples. To create and style websites to look exactly as you want them to, you need to know both HTML5 and CSS3.

How will we make a website?

We will use HTML5 and CSS3 to contruct websites from scratch. Towards the end of the class we will utilise premade templates to make the process quicker.

2 - HTML

HTML

HTML (HyperText Markup Language) is the language used to structure web pages. It includes a whole range of different types of elements, for example input boxes, buttons, tables, check boxes and so on. Basically everything you see on a web page is constructed using HTML.

To save the HTML attributes template right click here and click save as.

Basic HTML Tags

Tags Description

<h1> </h1>

<h2> </h2>

<h3> </h3>

<h4> </h4>

<h5> </h5>

<h6> </h6>

These are the heading tags. Each tag has a different font-size and margin.

<p> </p>

Creates a paragraph.

<b> </b>

Puts text in bold.

<i> </i>

Emphasizes text using italics.

<div> </div>

div stands for Division. div's are used to divide webpages into smaller peices.

<span> </span>

An element with no automatic styling.

Interactive HTML Tags

Tags Description

<a> </a>

This is the anchor tag. It is used to create clickable links.

<button> </button>

This is a button tag, it can be programmed to do something when clicked.

<textarea> </textarea>

This creates a resizeable text box. Similar to comment boxes on social media websites.

<select> </select>

This creates a drop down menu.

<option> </option>

This creates more options within the drop down menu. It must be placed within the select tags.

Self Closing HTML Tags

Tags Description

<input />

This creates text boxes, check boxes, radio buttons, password fields, number fields, date fields and more.

<img />

This puts an image onto the page.

<br />

This adds a line break.

Advanced HTML Tags

Tags Description

<ul> </ul>

This creates an unordered list (no numbers next to each list entry).

<ol> </ol>

This creates an ordered list.

<li> </li>

This adds an entry to a list. It must be placed within ul or ol tags.

<table> </table>

This creates a table.

<tr> </tr>

This adds a row to a table. It must be placed within table tags.

<td> </td>

This creates a column for the table row. It must be placed within the tr tags.

HTML Attributes

Each HTML element can have a unique set of "attributes". Attributes are kind of like properties for those elements. For example we can alternate between many different types of inputs by changing the type attribute to be "text", or "date" etc.

Below is a list of attributes which are often used with the listed HTML tags.

Tags Description

<a> </a>

The href tag refers the user to inserted website. For example <a href="http://danbardo.com"></a>

<img />

The src tag puts the picture in the inserted url into the img tag. For example <img src="http://danbardo.com/test.png"/>

<input />

The type sets the input to the inserted type. For example <input type="password"/>

<input />

The placeholder attribute puts grayed out text in the input. For example <input placeholder="Write here"/>

All Tags

The class attribute makes styling easier - we will see more later. For example <input class="myinput"/>

Examples with inputs:

3 - CSS

CSS

CSS (Cascading Style Sheet) is the language used to style web pages. There are a wide range of different visual properties we can edit using CSS. We can even create simple animations.

Including CSS on your Website

To include CSS in our website we must create two new tags. The first is the head tag, <head></head>. This tag contains all of the code which the browser will load before the website becomes visible to the user. We will put all of our styling inside of this tag, but before we do, we need to tell the browser we're going to switch from HTML to CSS. Within the head tag we must put <style></style>. Within these two tags we can write whatever CSS we want.

Example:

<head><style>body{font-size:20px;}</style></head>

This will set the font size to all text in the body element to 20 pixels.

Targeting HTML Elements with CSS

If we would like to apply a certain set of CSS properties to specific HTML elements we can target them by simply writting the elements name, followed by the css within curly brackets { }.

Example:

h1{color:red;}

This will turn all H1's to red.

Example:

div{font-size:20px;}

This make the font in all divs 20 pixels big.

Targeting Classes with CSS

If we would like to apply the same CSS to lots of different elements we can give those elements an attribute called class. For example if our HTML was, <h1 class="specialFont" ></h1><div class="specialFont"></div>, we could use the below CSS to control the styling of both elements.

Example:

.specialFont{color:red;font-size:30px;}

This will turn all elements with the class "specialFont" red and make their font 30 pixels big. Notice that a full stop (.) is required before the class name, this tells the browser we're talking about a class.

Targeting Nested Classes/Elements

If we would like to target an element which is within another element we can write CSS to look through the nesting. For example if we have the HTML <div class="myStuff" > <img /> </div> we could use the below CSS to control the style of the image.

Example:

.myStuff img{width:100px;}

This will set the width of all images inside of elements with "myStuff" as the class to 100 pixels.

Targeting Multiple Classes/Elements with CSS

If we want to target different classes or elements at the same time, we just have to separate them by a comma before we write the CSS.

Example:

h1,h2,.specialFont{color:red;font-size:30px;}

This will turn all H1's, H2's and elements with the class "specialFont" red and make their font 30 pixels big.

Targeting Individual Elements

If we want to target only one element, we can write our CSS within the style attribute of the element.

Example:

<div style="font-size:100px"></div>

This will make the font size of only that div 100 pixels.

Basic CSS Properties

Below is a list of some useful CSS properties. For a list of all properties click here.

Property Options

font-size

Sets the font-size of the HTML element and any elements inside of it. For example font-size:10px; will set the font size to 10 pixels.

color

Sets the colour of the text within the HTML element. For example color:red; will set the font colour to red. The colour can be entered as a name or as HEX.

background-color

Sets the background colour of the HTML element. For example background-color:red; will set the background colour to red. The colour can be entered as a name or as HEX.

border

Creates a border around the HTML element. For example border:solid 1px black; will create a solid, 1px thick, black border around the HTML element. Alternatives to "solid" include, dashed, dotted, etc. The colour can be entered as a name or as HEX.

text-align

Aligns the text within a HTML element. It can be set to, center, left, right or justify. For example text-align:left; will align all text to the left of the element.

width

Sets the width of a HTML element. For example width:100px; will force the HTML element to be 100 pixels wide.

height

Sets the height of a HTML element. For example height:100px; will force the HTML element to be 100 pixels high.

margin

Sets an outer spacing around a HTML element to separate it from other elements. For example margin:10px; puts a 10 pixel sized spacing around the element.

margin-left

Sets an outer spacing on the left of a HTML element. This also works with, margin-right, margin-top and margin-bottom. For example margin-left:10px; puts a 10 pixel sized spacing on the left of the element.

padding

Sets an inner spacing around the contents of a HTML element to separate them from the edge of the element. For example padding:10px; puts a 10 pixel sized inner spacing around the contents of the element.

padding-left

Sets an inner spacing on the left of the HTML elements contents to separate them from the edge of the element. For example padding-left:10px; puts a 10 pixel sized inner spacing on the left of the contents of the element.

display

This tells the browser how to display the element on the page. There are two main options:
block

  • This puts a large invisible box around the element to separate it from all other HTML elements. By default the width of this box is the width of the entire screen, or the width of the HTML element it is inside of.

inline

  • This makes the HTML element the size of whatever is inside of it and automatically lines it up with neighbouring inline elements.

Hover CSS Properties

You can customise the CSS of elements when the users mouse hovers over them. For example if we'd like a div's background to go red when the user hovers over it we'd write:

div:hover{
    background-color:red;
}

Relative Positioning

Using relative positioning we can position one element within another very easily.

Example:

Consider the below HTML code

<div class="parent"> <img src="https://lh6.googleusercontent.com/-X_np9lxCx10/VMdZY8g7NnI/AAAAAAAABFo/ll3FxQuiUVQ/s1600/cool-moving-wallpapers-viewing-gallery.jpg" style="width:100%" /> <h4> Title for my picture. </h4> </div>

With no styling we get:


Title for my picture.


We can overlay our title ontop of our picture using relative positioning. The CSS for this would be:

.parent{
	position:relative;
}
.parent h4{
	position: absolute;
    bottom: 0px;
    background-color: black;
    width: 100%;
    padding: 1em;
    color: white;
    text-align: center;
}

With this styling we get:


Title for my picture.


The "bottom" property forces the heading to be 0 pixels away from the bottom of the parent div. Alertnatively we can used top:0px; if we'd like to move the heading to the top of the div. If we'd like to move the div to the left or right, we can set the "left" and "right" properties.

Automatic Styling Properties

Below is a list of all automatic styling web browsers apply to the corresponding HTML elements.

Tags Description

<div></div>

By default div's are set to display:block with no margins or padding.

<ul> <ol> <table>

By default these elements are set to display:block.

<a> <input> <img> <b> <select>

By default these elements are set to display:inline with no margins or padding.

Browser Specific Styling

To include more complicated styling we need to use browser specific CSS. The most common browser specific CSS you will see will either involve "webkit", "moz" or "o". Webkit is software which is built into Google Chrome, Safari and Opera. Webkit allows for a vast range for advacned styling and can even create animations. Styling which involves "moz" is targeting Mozilla Firefox and "o", Opera. Generally if you want your website to be compatible with all browsers, you include browser specific styling for both Webkit browsers as well as Firefox and Opera. If you want to target Internet Explorer, there is also a limited range of advanced CSS properties.

Example:

If we'd like to have a gradient background colour, we need to use some more advanced css.

For example to create this gradient background:



We need to use the styling:

.gradient{
    background: red; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(red, yellow); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(red, yellow); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(red, yellow); /* For Firefox 3.6 to 15 */
    background: linear-gradient(red, yellow); /* Standard syntax */
}

Notice that we begin with background:red;. This ensures that the element will at least have a red background if the browser fails to create the gradient background.

More information about advanced CSS properties is available here, examples of CSS animations are available here.

Create your own Website

See if you can recreate the website here using everything we have learnt above.

4 - File Structure of a Website

File Structure of a Website

If your website requires several pages, or your own custom pictures, you'll need to store all of the files somewhere and access them appropriately. Lets create a basic website structure.

Create the following folders/files:

  • website
  • website/index.html
  • website/images
  • website/pages
  • website/pages/contact.html

Relative Links

If we are on a particular webpage, for example index.html, and would like to navigate to contact.html, we need to know the location of contact.html relative to index.html. To do this we need to tell the computer to access folders on our website.


In this scenario the syntax would be:

<a href="pages/contact.html"></a>

Since we are in the index.html file, we are in the website folder. We need to tell the computer to go into the pages folder then access the contact.html file.

Relative Images

If we would like to access an image on out website, we need to enter the relative link into the src attribute of the image.


For example:

<img src="images/myimage.jpg" />

This opens the images folder then shows "myimage.jpg".

Changing Directories

What if we'd like to do more than enter a folder, what if we'd like to leave a folder, or go to the root folder?

Name Syntax Description

Up a Directory

new/filename.html

From whatever folder you're in, open the new folder then the filename.html file.

Down a Directory

../new/filename.html

../ sends you up one folder from the folder your in. Then we open the new folder then the filename.html file.

Down two Directories

../../new/filename.html

../ sends you up two folders from the folder your in.

Root Directory

/new/filename.html

The first / sends you straight to the root directory.

Creating an External Style Sheet

We can also store all of out styling outside of our html document. This significantly reduces the amount of styling work we'll need to do since the same styling can be applied to multiple pages.
Download the template style sheet by right clicking here, then click Save As. Make sure you put the style sheet in the css folder of your website. To include the stylesheet paste the below code within the head tag.

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

5 - Utilising Resources

Custom Fonts

You an include any font you want in your website. There are three different ways you can do this.

Default Fonts

If it is a mainstream font then it is most likely available by default. To see a list of all the default fonts click here. To set the font all you need to do is set the font-family setting to whatever font you desire.


For example if I wanted to set the font of all p elements to Times New Roman, I'd add the following CSS to my style sheet.

p {
    font-family: "Times New Roman", Times, serif;
}

Google Fonts

Google hosts thousands of fonts online for you. You can view/search through the entire list here. Search for the font that you want and once you find it the website will provide you with a some code which looks something like:

<link href="https://fonts.googleapis.com/css?family=Baloo+Tamma" rel="stylesheet">

Add this element into your head tag so that the font is included within your website. Google also provides the code required to access the font.


For example if I wanted to set the font of all p elements to Baloo Tamma, I'd add the following CSS to my style sheet.

p {
    font-family: 'Baloo Tamma', cursive;
}

Custom Fonts

If you'd like to use a font which is not listed on Google Fonts and is not default then you need to store the font file within your website somewhere. Below is a list of popular websites which provide free custom fonts.

Once you download the font file and place it into a folder within your website you need to declare it within your stylesheet. The CSS to do this is:

@font-face {
    font-family: myFirstFont;
    src: url('font/myfont.ttf');
}

If I wanted to set the font of all p elements to myfont.ttf, I'd add the following CSS to my style sheet.

p {
    font-family: 'myFirstFont';
}

Font-Awesome

Font-Awesome is a special kind of font which allows us to include a huge range of different icons on our website. To view a complete list of all the icons click here.


To include Font-Awesome on our website we must add the following element to our head.

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">

If we'd like to show a picture of a bus, for example, we would add the following element to our website.

<i class="fa fa-bus"></i>

This results in . The first "fa" in the class applies Font-Awesome styling and the "fa-bus" class adds the bus icon. If we were to write "fa-car" instead, we'd get the car icon.


We can also use Font-Awesome to animate icons, for example we can rotate the bus by adding the class "fa-spin" . For more animation options click here.

Bootstrap

Bootstrap is essentially a huge style sheet with some extra features to make websites more interactive. It has a large range of structured an pre-styled html which you can essentially just copy and paste onto your website where you need it. To view a list of all Bootstrap has to offer click here.

To include Bootstap on your website you need to add the following code to your head:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" > <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Material Design Lite

Material Design Lite (MDL) is essentially Googles version of Bootstrap. It is relatively new compared to Bootstrap but does essentially everything Bootstrap does and more. It is relatively easier to use and manipulate and has a few extra features which prevents us from having to write any extra code. To view a list of all MDL has to offer click here.

To include MDL on your website you need to add the following code to your head:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <script defer src="https://code.getmdl.io/1.2.0/material.min.js"></script>

Customising Templates

If your building a standard business website, or anything which doesn't require any specialised features, then you can download and edit a template. The best website to download free templates from is w3layouts. Simply select the layout you want and apply everything you have learnt in class to manipulate / edit it into your own. The benefit to using these templates is a lot of custom interactive coding has been included which allows for popups, sliding galleries etc. These templates are essentailly what websites such as Wordpres, Wix, etc, run off.

Make your own website

Select either Bootstrap, MDL or a template and use it to make your own custom website.