1 - Introduction To HTML & CSS

2017
Introduction
& CSS to HTML
KAINOS WORK EXPERIENCE
PETER MCAREE
What is HTML and why would you learn it?
Every webpage you look at is written in a language called HTML. You can think of HTML as
the skeleton that gives every webpage structure. HTML represents the elements on the
webpage such as headers, buttons and forms.
HTML stands for Hyper Text Markup Language

A markup language is a set of markup tags
HTML was created over 20 years ago and is still the most widely used programming
language nowadays – and we can’t see it being replaced any time soon! It has gone through
numerous iterations since its first release and we now use HTML5.
In this course, we'll use HTML to structure and create a webpage whilst using some of the
language’s features along the way e.g. adding paragraphs, headings, images and links to a
webpage. Once we have used HTML to create the webpage, we will then style it using
something called CSS, but more on that later.
2
Kainos Work Experience
Getting stuck in!
First of all, create a new folder on the desktop entitled with your name, like so:
We’ll use this as our base directory when creating the various different different pages to
build up our website. Make sure when you create a new HTML page, that it is saved into this
directory.
Next open up ‘Visual Studio Code’. This is a simple IDE application that should already be
installed on your machine. We will use this for our development throughout the week.
VS Code will pick up the extension of the file that you are editing and will colour-code
various tags and keywords, it will also give you some suggestions once you start typing.
Additional Information:
There are hundreds of different IDEs (Integrated Development Environment) available
for developers to choose from. Some specialise in specific programming languages such as
Java. We are using VS Code as it is a lightweight application that supports HTML, CSS and
JavaScript – all of which we will be using!
3
Next step is to drag the new folder that you have just created on the desktop into VS Code
like so:
This should make the ‘Explorer’ tab appear on the left-hand side of the application:
Now that we have set up our environment, we can start creating HTML pages!
Hover over the name of your folder within VS Code (like above) and click on ‘New File’. Set
the name of the file to ‘index.html’. You should now see something like the following:
4
We have now created our first HTML page – you’ll notice that it has the .html extension, all
HTML pages have this extension.
As it’s noted above, a HTML document is made up of a number of different tags. Write the
following code into the index.html page:
You’ll see that VS Code nicely colour codes our tags and also gives you suggestions to
complete your tag for you.
Let’s walk through the code that we have just written:
● The <!DOCTYPE html> declaration defines this document to be HTML5. This is so the

browser can understand what language it is interpreting
● 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
Go ahead and open up your index.html page in a web browser to see what it looks like. You
can do this by opening the folder on your desktop and double clicking on the file.
Congratulations! You’ve successfully created a web page with some content!
5
Task:
By creating the code above, you have made use of a “heading” tag on line 8. There are a
number of different heading tags that can be used. Change <h1> to <h3>, save and view
the changes in your browser again – note you’ll also need to change the closing tag too.
What was the difference? Can you find out how many different heading tags there are?
Create Pretty Code

Now is a good time to quickly mention indentation— that is, the amount each line is spaced
in from the margin. Take another look at the code that we have created so far in the
previous exercise. You'll notice that when we place tags inside of other tags, we indent them
more. This really helps make your code more readable!
Try to follow this indentation style when you're writing HTML so you don't get confused.
Creating readable code allows others to quickly understand what you’re trying to do when
they look at your code, which comes in really handy if you ever need help with something!
6
Exploring Functionality
Now that you’ve grasped the basic structure of a HTML file, we’ll explore some more
functionality that it can provide.
Create a new webpage in your folder located on your desktop called ‘lists.html’. Create it in
the same way that we created our index.html page. If you can’t remember, refer back to the
first part of the tutorial.
Add in the basic structure of a HTML page including a title. Create a heading within your
body and set the text to ‘Lists’. Save your code and open it up in your browser, you should
see something like this:
7
We are going to be implementing two different types of list – ordered list and unordered
list. There is a subtle difference between these two which we will discover when we
implement them.
To start off, let’s create an ordered list. Add in the following code below your heading on
your lists.html page:
Remember to save your file and view it in a browser to make sure that it is working as
expected as you go along. It should resemble something similar to the following:
8
9
Let’s walk through the code that we have just written:
● The <ol></ol> tags represent the start and finish of the ordered list.
● We wrap each item that we want to place in the list within <li></li> tags – “li” stands
for list item.
● We then wrap all of our list items within the ordered list tags.
● As you can see from the screenshot, the ordered list is incremental, meaning the
more items that we place in it, the higher the order.
● Take note of how we placed one list item on one line – this helps to make our code
more readable.
Task:
Unordered lists work in the same way that ordered lists do. The only difference is the
start and finish tags – can you figure out how unordered lists are programmed? What is
the visual difference between the two types of lists?
Create a new header with an unordered list underneath it to produce something like
the following:
Unordered lists are commonly used when the collection of items in the list do not require to
be ordered in anyway.
Congratulations! You’ve successfully added a few lists to a webpage!
10
Recap
Let’s quickly recap on what we have learned and created so far:
● HTML is a mark-up programming language used to create all websites making use of
tags to program features.
● We have used Visual Studio Code which is an IDE. It is an application that allows us
to write our code giving us assistance such as colour-coding and type ahead.
● All HTML files have the .html extension.
● We have created 2 different HTML pages – both exploring different features of the
HTML language.
● We have tested our webpages in browser to see how they are rendered up.
11
Style It Up!
So far, we have created a few webpages and added some different content on to both of
them. However, both of them look very plain and bland.
To add some styling to the webpages we use something called Cascading Style Sheets (CSS).
This allows us to change the font size, colour, positioning and much more.
To begin, create a new webpage titled ‘styling.html’, in the same way that we have done
before. Again, add a title to the webpage, along with a header and some paragraph
elements. Your code should look something like below:
So there are three different ways that we can add styles to our HTML:
● External style sheet
● Internal style sheet
● Inline styling
For now, we’re going to focus on inline styling and we’ll take a look at an external style
sheet later on.
12
Inline styling basically means that we add the properties and styles that we want to apply to
the element, directly onto the element using the “style” attribute.
Let’s change the font-size of the three different paragraph elements that we have created
on our webpage. Add the style keyword to the <p> elements like below:
If we add the style keyword onto a HTML element, we can then edit the various properties
of that element. Remember to save your file and reload it in a browser to see how it looks.
In the example above, we are adding individual styling to each paragraph element on our
webpage. We are changing the ‘font-size’ property on each of them.
There are hundreds of properties that you can change on each element, we’ll change the
properties of some other elements on the page:
13
Save the file, view it in your browser and you’ll get something funky like this:
As you can see, we’re changing more than one property on some of our paragraph
elements. To achieve this, we set the first property followed by a semicolon (;) and then set
the second property – this is visible in line 10 and 11.
You can view a full of list of properties that can be changed here:
http://www.w3schools.com/cssref/
Task:
Explore around with CSS and change some more of the styles of the elements by making
reference to the link above.
Change some of the text fonts and see if you can figure out how to change the position
of the elements.
Now if you’ve changed a few more properties on one particular element, you might notice
that you have a rather long line of styles and properties – it might not be the most readable.
This is one of the reasons that inline styling is considered bad practice within the software
development realm and should be avoided if it can be.
14
This is where ‘External style sheets’ come into play. We can create a separate file to hold all
of the styles and property changes that we want to apply.
Create a new file like we have previous but this time name it ‘styles.css’. The .css extension
informs the browser that this is a style sheet and that is how it should be interpreted.
CSS files are structured in a similar style to how they are applied inline. Write the following
code into your css file:
You should be able to easily interpret what properties we are setting here and on which
elements. On the body tag, we are setting the background-color to ‘cornflowerblue’.
We’ve created the styles, but how do we actually apply them? Well it’s simply done by the
addition of one line in our HTML. Open up your index.html file that we created earlier on
and add this line into the header:
15
Don’t forget to save both the HTML and CSS files and view your index.html file in your
browser to see the changes and how it looks!
One of the major advantages of using external style sheets is that it will easily allow you to
keep the consistent style throughout your webpages by simply linking it to the same style
sheet. It also means that if you have used your stylesheet on a number of different pages,
you can easily edit all of them in one place – the CSS file.
Task:
Link the other 2 webpages that you have created so far to the same stylesheet, what
happens? Do any elements change colour, size, position?
What happens to the webpage that we have inline styling on when we link the external
style sheet?
16
Recap
Let’s quickly recap on what we have learned and created so far:
● We have created numerous webpages that all contain different content – utilising
the different components that HTML can create.
● We have learnt that CSS is how we style our HTML and this can be done in 3 different
ways but the best is via the use of an external style sheet.
● Now, we can link our HTML code to our external style sheet.
● Know how to change the colour of different elements on our webpage, including
background and text colour.
17
Other Important Stuff
So we have managed to create a few webpages which contain some content, we have then
applied different styles to them to make them a bit more aesthetically pleasing. However,
we’ve only scratched the surface of the functionality that HTML can offer us.
We’re going to take a quick final look at 3 extra other pieces of functionality that we can
create with HTML – addition of images, links and forms.
Once again, create a new HTML page within your folder named ‘form.html’. Create your
page with a similar structure to the ones that we have previously created.
Next, add the following code:
Save and open the page in your browser – make sure that you are connected to the
internet. You should notice that we now have an image embedded in our webpage.
This is simply done by the code that is present on line 9. We have inserted an img tag that
has a couple of attributes, let’s walk through it:
● Src – this is the source of the image, where it is located. In this example, we have
used an external link on the internet. However, this can point to an image that is
stored on your machine too, simply replace the URL with the file path to the
location.
● Alt – short for “alt tag”. This is an accessibility feature in the event that the image
cannot be found, it will replace the image with the text. Screen readers may also use
the alt tag when dictating what is present on the web page.
● Height & Width – fairly straightforward, this sets the height and width of the image.
Both of these are optional.
18
Something interesting to note is that we don’t have a closing tag for img, can you figure out
why? Now, we have added an image that isn’t very relevant to our webpage but we use this
tag to include things like icons, logos and other relevant content.
Another important feature that is present on all webpages are links. Links form part of
navigation, both to other pages within our website but also external, to other websites.
Links are commonly added to both images and text – and they are written in the same way.
To add a link, we use <a></a> tags.
Add the following code to your webpage:
Save your code and open it up in a browser. What is the difference?
Notice on line 9 we have wrapped our <img> tag with the <a></a> tags. The a tag takes one
attribute href which is where we define the links destination – in this case, we have simply
pointed it to Google.
In the same way that our src attribute of the img tag can point to both internal and external
resources, our href can do the same.
Task:
Try to add some additional text on the webpage and link it to navigate to one of the
other pages that we have created.
Hint: ensure that all of your webpages are stored in the same directory.
19
The last piece of functionality that we’re going to implement using HTML is a form. Forms
are used on nearly every single webpage and their main purpose is to submit some data that
the end user has input.
Examples of forms include:

● Login forms – such as Facebook & Google where you enter your username/email
address and password, then click ‘Submit’ (or Login).
● Registering for a new account – such as Amazon, adding in your personal details e.g.
name, DOB, home address.
Continue on with the webpage that we have just created ‘form.html’ and below where we
have placed our image, write the following code:
Remember to save and view your page in a browser to see how it is displayed.
Let’s take a quick look through the code we have just written:
● Forms begin and end with the <form></form> tags (line 11).
● We have added in some text labels to indicate to the user what the particular input
box they are looking at is being used for e.g. “Name” (line 14).
● Also notice we have a <br> tag on the same line, this is simply a ‘page break’ and
takes a new line on the webpage, mainly used for layout purposes.
20
● Next we have various <input> tags. Now these are how we define something for the
user to input data into. Input tags have various attributes but a few to note are:
o Type – this defines the type of input that it is e.g. text, radio, submit
o Name – each input field must have this attribute if it is to be submitted
correctly.
For extra information about HTML forms, check out:
http://www.w3schools.com/html/html_forms.asp
21
Laying Out Our Content
We’ve managed to cover how to create webpages, add content with some common
features that we see on a daily basis and also how to style our pages with some basic CSS.
The final thing we’re going to take a look at is some structural aspects of HTML: <table> &
<div>s!
These are 3 different HTML elements that allow us to lay out our content easily and apply
CSS to different blocks of content.
For the last time, create a new webpage called ‘layouts.html’ – adding in a title for the page,
a heading within the body, something like the following:
Standard stuff that you should be used to by now!
First of all, let’s take a look at tables - tables are very useful. We use them to store tabular
data so it is easy to read! When you want to present information neatly in a table with rows
and columns—you guessed it—the <table> tag is what you need.
It is the first tag that we need to create our table element, we then place a number of
different tags inside these. We use the <tr> tag to create a table row.
22
Write the following code between your body tags and below the heading that you’ve
created:
Save the page and view it in a browser. You should be presented with something like the
following:
23
As you can see, we have created a table element containing one column and three different
rows. Now let’s walk through the code that we have written:
● Table – we have created our table element, also adding the attribute ‘border’ with a
value of 1px. This is simply so we can visibly see the table for the purpose of this
exercise.
● Tr – creates a new ‘table row’ in our table, as you can see we have created 3
separate rows.
● Td – this is our ‘table data’ that we wish to display in the table, in this case we have 3
instances of table data (One, Two and Three).
To add another column in the table, simply add another instance of <td> to a particular
table row.
Task:
Add another few columns to each of the table rows.
Investigate some of the other elements that we can add to tables by navigating to this
link: http://www.w3schools.com/html/html_tables.asp
24
Next we’ll take a look at <div>. The <div> tag is one of the most versatile structure tags that
you can use when creating your webpages. Short for "division," <div> allows you to divide
your page into containers (that is, different pieces).
Add the following code below the table that you’ve just created on the ‘layouts.html’ page:
Save your code and view it in a browser.
Div tags are commonly used to wrap around content so that it can be easily structured and
placed in certain places throughout your website. You’ll notice that each of the blocks that
we’ve just created are placed one on top of each other – this is due to the type of element
that div is, it’s a ‘block’ type container.
Task:
Add a link to two of the blocks that we have just created. Link one of them to an external
website again and one to an internal page that we’ve just created.
25
Final task:
HTML and CSS may look basic now, but as you learn more, you will be able to build
spectacular websites just using these 2 languages!
For your last challenge I want you to create a website about a hobby you enjoy, using
different pages linked together to talk about the history of the hobby, what it involves and any
other details you want to add!
26

1 - Introduction To HTML & CSS

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

1 - Introduction To HTML & CSS

Uploaded by

Copyright:

Available Formats

2017

HTML stands for Hyper Text Markup Language

Let’s walk through the code that we have just written:

● The <!DOCTYPE html> declaration defines this document to be HTML5. This is so the

Congratulations! You’ve successfully created a web page with some content!

Create Pretty Code

Congratulations! You’ve successfully added a few lists to a webpage!

Next, add the following code:

Add the following code to your webpage:

Save your code and open it up in a browser. What is the difference?

Examples of forms include:

Standard stuff that you should be used to by now!

Save your code and view it in a browser.

You might also like