Webpage JRS

JESUIT REFUGEE SERVICE/REFUGEE COMMUNITY SERVICE-ETHIOPIA
A Training Manual On Webpage Design and Hosting
Prepared By: Zemene Matewos(ECEng) October 2015
Addis Ababa, Ethiopia

We believe that this tutorial is useful in helping refugee students in
mastering the basic concepts for developing a webpage and hosting it
on the internet cloud.
I have used some references to prepare this material but much effort
has been made to adapt it for the scope of the students we teach here
at JRS.
In order to expand your knowledge regarding webpage design and

development further ahead, you may read some fully fledged books
written for this purpose.
Some of the books that I recommend for you in satisfying your needs
for that purpose include Adaptive Web Design by Aron Gustafson, A Practical
Guide to Designing for the Web by Mark Boulton, HTML5 & CSS3 For The Real
World by Estelle Weyl, Louis Lazaris and Alexis Goldstein
I hope you'll benefit a lot from this material. And I'm hopeful that you
may be successful in your endeavor to mastering webpage as a career,
if you want to do so.
Zemene Matewos(ECEng)
October 2015
Table of Contents
What is the Internet? .............................................................................................................................. 1

What is the world wide web? .............................................................................................................. 1
How do web browsers work? .................................................................................................................. 1
What is in a Response? ....................................................................................................................... 2
What is HTTP?...............................................................................................................................................3
What is HTTPS.........................................................................................................................................4
Web Server Responses.................................................................................................................................5
Cascading Style Sheets...........................................................................................................................5
Java Script...............................................................................................................................................6
Introduction to HTML...................................................................................................................................7
What is a HTML document?....................................................................................................................7
What are HTML tags?..............................................................................................................................7
More about tags......................................................................................................................................8
Self-closing Tags......................................................................................................................................8
Tag attributes..........................................................................................................................................9
Viewing Website HTML in our browsers.......................................................................................................9
Creating our first HTML document.............................................................................................................12
Understanding Basic HTML.........................................................................................................................17
Adding Text to our HTML page...................................................................................................................19
Adding Links and Images in HTML..............................................................................................................23
How to add navigation to a simple HTML page..........................................................................................28
Styling our navigation list.....................................................................................................................29
Class, ID and < div > and < span > in HTML.................................................................................................31
What Is CSS?...............................................................................................................................................33
What does it mean that our style sheets are “cascading”?...................................................................34
What kind of rules can we put in our style sheets?...............................................................................34
CSS Rule Structure..................................................................................................................................36
Understanding CSS Selectors......................................................................................................................37
Inherited Selectors................................................................................................................................38
Pseudo Selectors...................................................................................................................................39
Selector Specificity.................................................................................................................................39
Using Simple CSS Styles for text..................................................................................................................40
Font-Size Style......................................................................................................................................41
Text-Transform Style.............................................................................................................................42
Text-Align Style.....................................................................................................................................42
Text-Decoration Style...........................................................................................................................42
Color and Background Style..................................................................................................................43
Padding Style........................................................................................................................................44
Padding, Border and Margin in CSS............................................................................................................44
What about Margin?.............................................................................................................................48
Loading External CSS Files using the tag.....................................................................................................48
More advanced CSS....................................................................................................................................52
Border-radius.........................................................................................................................................52
Box-shadow...........................................................................................................................................53
Float Styling...........................................................................................................................................53
Width and Height..................................................................................................................................54
Display Style..........................................................................................................................................54
CSS Introduced.......................................................................................................................................54
What is Web Hosting?................................................................................................................................55
Web Host software................................................................................................................................55
How to choose a web host.........................................................................................................................57
DNS and Domain Names.............................................................................................................................59
Webpage Design and Hosting
What is the internet?

The internet is a network of computers which spans the entire world.
The internet is a decentralized network – in other words, every computer connected to it is treated the
same. There are no special internet servers which control the whole internet, but some servers have a
special role which we will discuss in later lessons.
Computers which have content that people want to access are often called ‘servers’ because they serve
up that content to other computers.
In practice, the internet is made up of many (many!) computers all around the world connected
together by dedicated infrastructure. It is impossible to know exactly how many computers there are
on the internet, but it is estimated there were more than 100,000,000 servers online by 2013. Imagine
huge rooms filled with computers, joined by cables that cover every country and go under every ocean
– that is what the internet is like physically! It doesn’t matter to us where the computers are or how we
are connected to them – once you’re connected to the internet you can talk to any of the other
computers.
The internet isn’t owned or controlled by any one organization. Many large organizations have a huge
amount of servers they make available on the internet – for example it is estimated that Facebook
alone had over 200,000 of their own servers in 2013, and Google have over ten times that number.
What is the World Wide Web?
The World Wide Web – or web – is not the same as the internet. The internet is the globally-connected
network, and the Web is a way of accessing information over that network. We will understand more
about how the web and websites work as we progress through this course.
How do web browsers work?

When you navigate to a website, your browser makes a request to the server that hosts the website.
Depending on what is contained in that request the server sends back different content in the
response.
This request/response cycle is the basis of all websites.
You can see this happen when you navigate to a page – your browser shows an icon indicating that it
has sent a request and is waiting for a response.
For example, in Google Chrome:
JRS/RCC Education Section Page 1

You can see in these images that the spinning circle is the way the browser indicates it is waiting for a
response from the server. In the second image you can see that it has received some data: in this case,
the title of the website which begins “Welcome to Facebook…”. However, it hasn’t yet fully received
the entire response so it continues to show the spinning circle.
(This is similar to how other browsers, such as Internet Explorer or Firefox operate.)
The responses change depending on what is happening as you browse. For example, when you first
load a website the server will send the first page: often a login page.
When you enter your login details the browser sends another request. This request contains extra
data: your username and password. Now the server knows you are logged in so it sends a different
response – the response it gives to users that are logged in, for example their own profile page.
As you continue interacting with the website you send more requests to the server, and the server
sends back more responses.
Next time you are browsing websites try and notice when your browser makes a request and recognize
the responses coming back from the server.
Multiple Request/Responses
Most modern websites require many requests and responses to load a single page. This is because
modern websites are very complex and there are a lot of parts that must come together to form each
page. As we go through this course we will learn more about each of these parts, but for now just
remember this: each time you load a page your browser makes many requests, and the server sends
many responses.
What is in a Response?
The response from the server can contain a large variety of data: image data, HTML, JavaScript, CSS,
or many other data types.
Sometimes these are even combined: perhaps the server sends HTML, CSS and JavaScript all together
in a single response.
Again, we will understand more about each of these types of data as we proceed through the course.
For now the most important thing to understand is that when you view a web page you are viewing a
‘conversation’ between your computer and the internet server. Your computer comes up with part of
the conversation via requests and the server finishes the conversation with responses. Try and see this
back-and-forth conversation happening as you browse the internet – it will help your understanding
the rest of the lessons very much!

What is HTTP?
So far we have learned that when we navigate the internet, browsers make requests to a web server and
the servers send back a response. Today we are going to learn how these requests and responses are
transmitted.
Have you noticed that web addresses (also called URLs) often begin with “http://” or “https://”?
This first part of a URL (URL stands for Universal Resource Locator) tells the browser how to
communicate with the web server. This is almost always HTTP, so often the “http://” part of the
address is left out. This is why you can just type “www.google.com” to get to the Google homepage:
your browser assumes if you don’t say otherwise you want to use HTTP.
But what is HTTP?
HTTP stands for HyperText Transfer Protocol. This is an agreed standard which defines a way for
computers to talk over the internet.
For our purposes we don’t need to understand the underlying details of exactly how the protocol
defines computers can talk. We can think of it like a language that both our browser and the web
server speak so they can understand each other when they make requests/responses.
It is also important for us to understand that there are different types of request in HTTP. These are
defined by having different verbs.
So our browser makes a request using a particular verb and the server responds appropriately
depending on the verb.
There are more than 20 HTTP verbs defined, but the most common are GET, POST, PUT, DELETE
and HEAD. Of these, by far the most important are GET and POST.
When your browser navigates to a new webpage it sends a GET request to the URL you have typed.
Sending a GET request asks the server for some particular data that is located at the address you have
supplied.
Here is a fake URL as an example: http://www.myfakeblog.com/category/this-is-my-post
When we type this into our browser, the browser makes a GET request to the web server located at
www.myfakeblog.com. The browser uses GET as a default in this case.
The server looks at the extra address information: /category/this-is-my-post and uses this to find the
exact page that the browser is requesting.

This is a common pattern for a GET request.
POST requests usually mean the browser is sending data to the server, for example login details or
other requests that require data from the browser to formulate the correct response. These POST
requests are usually used for requests that change the state of the web page.
What is HTTPS?
HTTPS stands for HyperText Transfer Protocol Secure. This is an encrypted form of HTTP.
When we send a request it doesn’t go immediately to the server. Because the internet is a connected
network of computers each request passes through many computers before arriving at the server, then
the response comes back via the same route.
Since HTTP is unencrypted that means that all of the computers between your browser and the website
can read all of the data you are sending back and forth!
You can use a utility called tracert to see how many computers are between your browser and the
website you are accessing.
Try this experiment:
On windows, press your Windows key:
Then type “cmd” and press Enter. This brings up a command prompt, which looks similar to this:
Now type “tracert google.com” and press Enter. This shows you the number of computers (hops)
between your computer and google.com. You can try this with other websites too by replacing the
website name “google.com” with whatever web address you like.
You can see that many computers are between you and every website – because the internet is a
connected network. Using HTTP each of those computers can read the traffic that passes through
them.
To solve this problem an encrypted form of HTTP was developed, called HTTPS. This encrypts the
data so only your browser and the web server can read it, using a technology called SSL (Secure

Socket Layers). HTTPS is used for secure transactions such as financial information, private
information, and login on most websites.
You should always look for the HTTPS symbol when using websites where security is important. On
many browsers this appears as a padlock:
If we build a secure website we need to ensure it supports HTTPS for any private transactions.
Web Server Responses

We have learned that web servers respond to our requests by sending back various types of data.
HTML
One of the most important types of data returned by web servers is called HTML.
HTML stands for Hypertext Markup Language. We can think of HTML as the content of our
webpage, plus some extra information which tells the browser about the content.
For example, it may tell the browser how the content is structured, or how to get from the current web
page to another web page, or how the page should be displayed. In the next few lessons we’ll start
learning how to write our own HTML. For now the important lesson is:
HTML is the content of our webpage formatted in a way that web browsers can understand
Cascading Style Sheets(CSS)
CSS is the next most important type of data returned by a HTTP Response.
CSS stands for Cascading Style Sheets. This is a special display language which tells the web browser
how to present the content in the HTML. This is what makes websites look pretty (or ugly!).
Again, we will learn how to write our own CSS later in this course, but for now the important lesson
is:
CSS tells web browsers how to display the HTML content
HTML without CSS

It is possible to have HTML without any CSS. Web browsers are perfectly happy to display just
HTML, or even just plain text.
HTML also contains several ways to display text in different ways, e.g. font size, color, bold, italic,
even very simple animations. However, in modern web development it is very bad practice to change
your display using HTML.
This is because CSS has many advantages over HTML display:
1) CSS is much more powerful than HTML for styling
2) CSS can be re-used across many pages on your site
3) It is much easier to change your site if all the display logic is in one central place: your CSS files
It can be very difficult to make changes to a site when some display logic is in HTML and some is in
CSS, so it is considered good practice to keep your display logic purely in CSS, and keep HTML
purely for content.
This is part of the software development practice known as separation of concerns – making sure that
each part of your web site is responsible for only what it should be responsible for.
HTML: Content
CSS: Display
JavaScript
JavaScript is another important type of data returned by responses.
JavaScript is a coding language, unlike HTML and CSS which are markup languages. In other words,
JavaScript is much more like a standard programming language.
JavaScript is the coding language that tells websites how to behave. It is responsible for the
functionality of a modern website, including loading data in the background, changing CSS
dynamically to provide animations, validating data and handling user interactions.
JavaScript code runs locally in your browser, not on the web server. The server sends the JavaScript
code down as part of the response, and your browser then runs it on your computer. This allows your
computer to understand how to interact with the website.
We will learn more about JavaScript later in the course too. For now, the important lesson is:
JavaScript is responsible for the behavior of a web page
HTML: Content – a markup language

CSS: Display – a markup language
JavaScript: Behavior – a programming language
As we progress we will understand more how each of these types of response is generated, and how
the browser knows how to request all of this data from the web server.
Introduction to HTML
In this lesson we learn about one of the main types of data websites send to our computers over the
internet: HTML.
If you haven’t completed the first part of our Website Design course “What is the internet” make sure
you read those first to get a good understanding of how websites are sent to your browser.
Remember what HTML stands for? It stands for HyperText Markup Language.
Let’s look in more detail what this means.
‘Markup’ in computing means adding extra data to text in order to tell computers more information
about that text. For example, in HTML we tell the computer which parts of the HTML document are
to be displayed, which parts make up the navigation, even which parts are titles and which are content.
What is a HTML document?
A HTML document is just what it sounds like – a document that contains HTML! It’s nothing more
special than that. All we have to do is type our HTML into a document in a writing program – for
example Notepad, or even Microsoft Word – and we have a HTML document.
Starting from the next lesson of this course we’re going to make our own simple HTML pages on our
own computers, and learn all about HTML as we go.
First let’s understand what makes HTML special.
What are HTML tags?
HTML is just normal text, with additional information. This additional information is delivered
through tags. Tags are the fundamental building blocks of HTML.
A tag looks like this:
<tag>
Anything inside the “<” and “>” symbols defines the tag.

Can anything be a HTML tag?
Yes and no. Technically you could put anything inside a “<” and “>” symbol. However, browsers only
understand certain tags, so unless you use the tags that are officially defined as part of HTML then
your tags will not work correctly.
We will learn all about the important HTML tags as we proceed through this course.
More about tags
Tags can be both opened and closed. For example, let’s look at a <span> tag (don’t worry about what
a <span> tag is for now – we’ll get to it later):
<span>This is inside my span! I can put anything I like here.</span>
You can see that a tag is opened by having an initial tag such as <span>. It is then closed with a
second tag that has an additional “/” symbol. Anything can go between the opening and closing tags –
this is known as the tag contents.
This whole example from the opening tag to the tag contents to the closing tag is known as a HTML
element. In this case we have created a span element, because we are using a span tag to define the
element.
Elements are made up of tags.
Self-closing Tags
Some tags don’t require opening and closing tags, they can effectively open and close themselves in
just one tag. These are often known as self-closing tags.
Technically in HTML 5, which is currently the most advanced version of HTML, self-closing tags
don’t actually close themselves, but it’s a helpful way to picture what is happening. (If you’re
interested in why: it’s because HTML is similar to a markup language called XML. In XML tags are
required to either be closed in a pair, or to self-close. HTML is not as strict as XML, so you don’t have
to self-close your tags. However, it doesn’t hurt, and keeps your HTML neat so it is not a bad habit to
have.)
A self-closing tag looks like this: <tag />
Tags that can exist on their own, i.e. be self-closed include: <img />, <link /> and <meta />, amongst
others.
Again, we will understand more about each of these tags as we encounter them when we start building
our own website!

Tag attributes
The last important concept to understand about tags is that tags can have attributes as well as
contents. Let’s add an attribute to our <span> tag from before:
<span class=”exampleTag”>This is inside my span! I can put anything I like here.</span>
Now our tag has a class attribute. Attributes can have values. In this case our attribute has the value
exampleTag.
As with tag names, attributes can technically be anything. For example, we could have said:
<span lemon=”fruityAttribute”>This is inside my span! I can put anything I like here.</span>
This gives our <span> tag an attribute named “lemon” and with a value of “fruityAttribute”.
However, just like with tags there are certain attributes that are important and have meaning. We will
learn about these as we learn about each tag.
Putting it all together
Here we can see all of the parts that make up an element.
Make sure you understand which part of the element is a tag, which part is an attribute, which part is
an attribute value and which part is the element contents.
We will be referring to all of these throughout the course so try and memorize these now.
Viewing Website HTML in our browsers

In this lesson we learn how to view HTML using the free Developer Tools in our browser.
Before we begin building our own websites let’s look at the HTML that websites are already sending
us.
Doing this helps us to ‘demystify’ HTML and to realize that websites aren’t magic – we can
understand them and learn to build them ourselves!
All modern browsers – for example Google Chrome, Mozilla Firefox and Internet Explorer – have
built in tools that let us look at the HTML sent to us from a web server.
Let’s try using these tools now.
I’m going to use the JRS Eastern Africa Website as my example. But you can use any other website.

Each browser is slightly different. In my example I’m using Mozilla Firefox Browser , so what you see
might be different.
First I see the webpage I’m looking at:
In order to see the HTML that this page is made up of I press F12. This works in Firefox and in
modern versions of Google Chrome and Internet Explorer. If this doesn’t work for you, you might
want to try upgrading your browser or installing another one.

Pressing F12 brings up the Developer Tools, which looks like this.
I have highlighted the Developer Tools in red. Let’s take a closer look at it.
We can see there are many tabs we can click, each of which shows different information about the
webpage we’re looking at (again if you’re in a different browser this may look different for you – be
brave, click and explore the Developer Tools until you can find the HTML! ).

For now, we’re only interested in the “Inspector” tab – we want to see the HTML elements that make
up this page.
Hopefully you can recognize that we’re looking at some HTML tags like the ones we learned about in
the previous lesson.
You can see that the HTML here is more complex than our previous examples, but they are still the
same principle: elements made up of tags that have attributes and contents.
Take some time to explore the HTML of a few of your favorite websites. It’s ok if you don’t
understand it – for now we just want to get used to what HTML looks like, and to become familiar
with using Developer Tools to view HTML that our browser is displaying.
Creating our first HTML document

In this lesson we will walk through creating an empty HTML document and learn about HTML
document structure and some simple HTML tags.

First, create a place to put our simple website on your computer. Right-click your desktop and select New ->
Folder, like this:
You may have different programs installed or be on a different version of Windows so your options may be
different, but you will have New Folder. If you’re on a different operating system such as OSX or Linux you can
still follow this tutorial: just choose a place of your own to store the files we’re going to create.
Name your folder with a name you’ll remember. We’re going to use this folder to keep all our files in
for this whole project. I’ve named mine “JRS Education Website Tutorial”:
Open your new folder, and right-click inside it. Again go to New, but this time click “Text
Document”, like this:
Open your new folder, and right-click inside it. Again go to New, but this time click “Text Document”, like this:

Rename the text document to “index.html”. You need to replace the “.txt” extension with “.html” – when you
do this you’ll be prompted if it’s ok to change the extension. We want to make a HTML file so click Yes.

Right click the HTML file and click ‘Edit’. This will open it in Notepad. If you can’t find Edit, you
can open Notepad through the start menu, and then use File – Open to open the index.html file you’ve
just created. When you’ve done this you should have an empty document in Notepad like this:
You can use much more advanced software than Notepad to do this, but an important part of this
lesson is that you can use very simple tools to make websites, so we’re going to use Notepad. If you
have a preferred text editor, such as TextMate, Notepad++ or another, then feel free to use those
instead.
Copy the following text into your index.html file and save it:
<!DOCTYPE html>
<html>
<head>
<title>JRS First Website</title>
</head>
<body>
This is our first JRS web page.
</body>
</html>
Once you’ve hit save you can close Notepad.

Now if you double-click your HTML file it should open in your local browser. If this doesn’t work
you can open a browser (such as Chrome, Firefox, and Internet Explorer) and drag your file into it to
open it. Here’s how the file appears when I open it in my web browser.
You can see that the location of the website starts with file:/// instead of the http:// we’re used to. (If
you can’t remember what HTTP:// means then go back and review the lesson on “What is HTTP”
earlier in this course). Now that you understand what HTTP is you can understand that we don’t need
to use HTTP to access our index.html because the file exists on our own computer: HTTP is used for
talking to other computers.
So we can guess that “file:///” means that the browser is accessing a file on our local computer.
The rest of the web address is then the location of the file on our own computer.
Underneath that we can see our web page. It’s not very exciting at the moment, as it just has a single
sentence.
Go back to editing your notepad document and change the HTML contents of the <body> tag, like this
(you can change it to whatever you like):

Make sure to save your index.html in Notepad. Then go back to your browser window and press F5 to
refresh.
As you can see the text is changed on our simple webpage:
You can put whatever text you like in and it will appear on the web page.
This cycle of editing-in-Notepad, saving-in-Notepad, and then pressing F5 in your browser to

refresh is the simplest way of making websites. Of course when it comes to making more complex
websites we will need to learn more complex tools, but this is an excellent way to understand the
fundamentals of HTML.
In the next lesson we will look in more detail at the HTML we have so far in our simple webpage
Understanding Basic HTML

In this lesson we’ll learn about some of the simplest HTML tags and how they function.
So far we have a very simple index.html:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
This is our first JRS web page.
</body>
</html>

Let’s look in more detail at this HTML.
First, we can see a strange-looking tag that says <!DOCTYPE html>
This is an unusual tag as it has an exclamation symbol at the beginning, and it doesn’t have a matching
end tag anywhere. That’s because this is not technically a HTML tag. Instead it tells our web browser
what language we’re using to communicate with it. In this case, we are using HTML.
The DOCTYPE declaration must always come first in a HTML page. There are other possible values
for DOCTYPE. If you look at WebPages using the F12 Developer Tools (see earlier in the course for
an example of how to do this) you will see a variety of different DOCTYPEs. For the purposes of our
course we are not interested in these other DOCTYPES: <!DOCTYPE html> tells browsers that we
want to use the updated version of HTML, which is currently HTML 5.
After the DOCTYPE declaration we can see our first HTML tag: <html>.
If we look at the very end of the document we see the matching closing tag: </html>.
This means that everything else in the document is inside our <html> tag. The <html> tag acts as a
container. It tells the browser that everything inside it is to be rendered (displayed) as HTML.
Putting tags inside other tags is often referred to as nesting. We say that the other tags are nested
inside the <html> tag.
Inside the <html> tag we put two very important tags: <head> and <body>.
This is the fundamental structure of every HTML page. They all must have a DOCTYPE declaration,
then a single <html> tag, which contains <head> and <body> tags.
The <head> Tag
The <head> tag can contain a number of other special tags. We will learn about more of those in later
lessons.
The important fact to remember about the <head> tag is that it contains data that is not directly
displayed as part of the page. Often it tells the browser about extra resources the browser needs to
fetch to display the page properly, such as additional CSS or JavaScript files. The <head> tag is also
where we put metadata about the page.
Metadata is a fancy way of saying ‘data about the web page’. For example, in our <head> tag we
have a <title> tag. The <title> tag contains some metadata: in this case, the title of the page. You can
see the title in your browser tab:

So the <title> tag is one of the tags that can go in the <head> tag, and it defines the title of the web
page. We will see more of these metadata tags in future lessons.
The <body> Tag
The <body> tag is where we put the body of the website. In other words, all the data that is displayed
as part of the web page. As you can imagine, for complex websites this can be a LOT of data. At the
moment our web page body is only a simple sentence… but from the next lesson we will start to add
much more.
Conclusion
We now have the foundation of every website: a simple index.html with the basic structure of a
HTML document. Before you move on, make sure you understand how the <html>, <head> and
<body> tags are formed and what kinds of data we put in <head> and <body>.
Adding Text to our HTML page

In this lesson we’ll learn about some HTML tags that help us structure text in our web pages.
If you haven’t followed the lessons up to now then you should start from the beginning of the course.
For this lesson you’ll want to have your “index.html” open in both Notepad and your browser so we
can make changes to it and refresh the browser to see them, just like we did a couple of lessons ago.
It’s time to start making our page more interesting. Replace the text in your <body> tag with the
following:
<body>
<section>
<h1>JRS Website Tutorial</h1>
<div>
<h2>Making our first page</h2>
<p>It is possible to make websites using these extremely simple

tools. This is great news as it means everyone can learn to make
websites.</p>
</div>
</section>
</body>

You will notice that I’ve indented the new tags. This means I’ve pressed the TAB key in notepad to
leave a gap at the beginning of each tag. This makes it easy to tell which tags are nested (contained)
within other tags. In this diagram I’ve marked the TAB indentations in green.
When our web pages get more complex it’s VERY important to keep the HTML as readable as
possible. For example, if I didn’t indent the HTML, look how messy it could get:
<body><section><h1>JRS Website Tutorial</h1><div><h2>Making our

first page</h2><p>It is possible to make websites using these
extremely simple tools. This is great news as it means everyone can
learn to make websites.</p></div></section></body>
This HTML is exactly the same as the previous example. See how much easier it is to read when we
use indentation properly?
You should get into the habit of using indentation to make your HTML readable. When you come
back to make changes to your website – or if another developer needs to – you will thank yourself for
putting in the time to make your website as clean as possible. Clean HTML is much easier to work
with.
Now it’s time to save our changes in Notepad and hit refresh (F5) in the browser. You should see this:

Let’s look in more detail at what we have added.
First we can see several new tags: <section>, <div>, <h1>, <h2> and <p>
The <section> and <div> tags
These tags are known as grouping elements, because they group related tags together inside them.
They are very similar tags, but <section> is used to group related items together. If you want to create
a section of your page that contains similar information then you should use a <section> tag. For
example, a list of blog article titles would be one <section>, while the part of the page that contains the
actual blog articles would be another <section>.
Meanwhile, a <div> tag is used to group elements together that aren’t necessarily semantically related.
Perhaps they are unrelated information that are kept in the same part of a page, or perhaps it’s a sub
group of data that you want to group. The use of this tag will become more clear when we start styling
our page using CSS.
The <h1> and <h2> tags
These are known as ‘title’ or ‘heading’ tags. They specify different levels of heading on the page. The
lower the number the more important the heading is. For example, <h1> may specify the main heading
on your page, while <h2> may be used to specify the subtitles of the different parts of your page.
As you can see, the headings are automatically displayed in bigger bolder text by the browser.
It is possible to have heading tags for up to 6 different levels of heading, from <h1> as the biggest to
<h6> as the smallest.
The < p> tag
The <p> tag is short for a “paragraph” tag. As the name suggests, you use this tag when you have a
paragraph of text.
Putting all this together
We can now add some more text to our page, now that we understand the new tags we have used.
Replace your <body> text with the following. Don’t forget to check your indentation!
<body>
<section>
<div>


websites.</p>
<p>For now we only have a simple page, but later we will make it
more complex and interesting.
</div>
<div>
<h2>What have we learned so far?</h2>
<p>So far we have learned a few simple tags for placing text onto a
page.</p>
</div>
</section>
</body>
Now we have some more text to play with. You can see how the headings are displayed as headings
and how the paragraphs automatically separate.
Can I make this look better with just HTML?
Technically it is possible to style a page using pure HTML. You can add tags that make the text bold,
or italic, or change the font or the color. However, this is a very bad idea. As a result, I’m not even
going to show you the tags that can do this as you should never style your page using just HTML.
Why can I not style a page using HTML?
It’s best not to style a page using HTML for several reasons:
1. Styling a page using HTML is very limited. You can’t make it look very good, however you
try.
2. Styling a page using HTML is a lot of work. It takes way more effort to style using the HTML
style tags.
3. Styling a page using HTML is very difficult to change. Once you start changing the layout
and the look of your page in HTML it is very hard to go back and edit, especially once you add
multiple pages to a site.

As a result, we have to be patient. Currently our pages look ugly, but that’s ok – we’re just using them
to learn the basic HTML. Later in the course once we’ve mastered the simple HTML we will start
using the power of CSS to make our pages look pretty!
Adding Links and Images in HTML

In this lesson we’ll learn some HTML tags that allow us to add links and images to our web pages.
can make changes to it and refresh the browser to see them, as usual.
It’s time to start making our webpage a little more functional!
Do you remember how we created the index.html file originally? Right-click inside your folder and
choose New -> Text Document. We’re going to repeat this process to create a second html file. Call
this file “about.html” and paste the following HTML code inside:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<section>
<h1>About Me</h1>
<div>
<h2>Mr Abebe</h2>
<p>I am currently following a course to learn all about HTML!</p>
</div>
</section>
</body>
</html>

There’s nothing here you don’t already know. We’re just showing different text. You can replace “Mr
Abebe” with your own name, and say whatever you like about yourself. Make the text in the <p> tag
personal!
Let’s add something new – how about a picture of ourselves?
Copy a picture you’d like to display into the folder, and give it the name “me.jpg”. If it’s not a .jpg file
then replace .jpg with whatever the current extension for your picture is. I’m using a PNG file so I’ll
call it “me.png” like so:
We want to add this image to our About page. To do this we’re going to use a new tag, the <img> tag.
The <img> tag
The <img> tag is a self-closing tag that uses attributes to determine how it displays. If you don’t
remember about self-closing tags and attributes then go back and revise our “Introduction to HTML”
lesson from earlier in the course.
We want to add this tag:
<img src=”me.png” title=”A picture of me” alt=”A picture of me” />
We can see that the image tag has several attributes. Of these, the most important is the src attribute.
This tells the browser what the source of the image is – in this case, our image is “me.png”.
The title/alt attributes tell the browser more about the image. When you hover an image with your
mouse the title text is displayed, and the alt text displays instead of an image if the browser can’t find
the image, or for people who use screen readers to look at the web, such as the visually impaired.
It’s good practice to always include a title and alt attributes, which should describe the image.
Let’s put the image in at the end of our “About Me” <div>:
<div>
<h2>Mr Abebe</h2>
<p>I am currently following a course to learn all about HTML!</p>

<img src=”me.png” title=”A picture of me” alt=”A picture of me” />
</div>
So our HTML should look like this:
And now our About page looks like this in the browser:

Troubleshooting: If your image doesn’t load properly then use the F12 Developer Tools to see the
error. The browser will tell you where it is looking for the image – check that it’s looking in the
correct place. If not then you can move your image to where it IS looking, or change your img src to
point to where the image actually is. If you see funny characters like %E2%80%9D in your error, then
it means your quote marks around the “src” attribute aren’t the right kind of quotemark… try deleting
them and typing them again. Sometimes when we copy-paste we copy characters that LOOK the same
but the computer treats differently! We will look at why this is in a future lesson.
Next – the <a> tag
So we’ve added an image to our ‘About’ page. But what if we wanted to get between the "Index" and
"About" pages? We need a LINK.
We all use links all the time to navigate the web – we’re so used to clicking text to take us to other
pages we often don’t stop to think about how they work.
Links are just simple HTML tags that tell the browser “when someone clicks here, go to this page”.
The tag is the <a> tag – one of the most important HTML tags there is.

Here’s an example <a> tag:
<a href=”About.html”>About</a>
As you can see, we have another attribute to learn: the href attribute. This tells the browser where the
link is pointing to. The contents of the element is what is displayed that you can click on. Of course,
this doesn’t have to be just text: if you put an <img> tag inside an <a> tag then the image acts as the
link!
Let’s add one link to each of our pages.
1. Put <a href=”About.html”>About</a> into our index.html

2. Put <a href=”Index.html”>Index</a> into our about.html
You can put them wherever you like. I’ve added mine before the start of the <section> element, so it
looks like this:
Now our pages both have links, so we can click from one to another!
Save both your files, and hit F5 to refresh. Try clicking from one page to the next, and back again. It’s
starting to feel more like a real webpage!

How to add navigation to a simple HTML page

In this lesson we’ll add navigation between our two simple HTML web pages.
can make changes to it and refresh the browser to see them, as usual.
Our link at the top looks a little lost and alone. Most websites have more than one page, so let’s add an
element that lets us navigate between multiple pages. In the process we’ll meet some more new tags,
and even add our first CSS style.
Make the following changes to your index.html:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<nav>
<ul>
<li><a href=”Index.html”>Home</a></li>
<li><a href=”About.html”>About</a></li>
</ul>
</nav>
<section id=”content”>
<div>
websites.</p>
<p>For now we only have a simple page, but later we will make it
more complex and interesting.
</div>
<div>
<h2>What have we learned so far?</h2>
<p>So far we have learned a few simple tags for placing text onto a
page.</p>
</div>
</section>
</body>
</html>
You’ll note that I’ve removed our old <a> tag from inside the <section>. I’ve added an id attribute to
the section – don’t worry about that for now, we’ll need it later.

I’ve also added a new <nav> element which contains some HTML.
Make the same changes to about.html – remove the old link, add the SAME <nav> element and the
id attribute to section.
Now both pages should have a list at the top that looks like this:
Let’s look in detail at these changes.
The <nav>, <ul> and <li> elements
The <nav> element is a special grouping element. It doesn’t do anything technically to the site, but it
allows computers and search engines to understand how to get around your site. It is short for
navigation. Each webpage should have one <nav> element which contains links to the different
sections of your website.
Inside our <nav> element we’ve used another new tag, the <ul> tag.
This tag stands for unordered list – it is used whenever we have a LIST of items… such as a list of
sections for our website. There are other kinds of list tags, such as an ordered list or a numbered list,
but the most appropriate list for navigation links is an unordered list because it doesn’t matter what
order the links are written in.
Inside the unordered list we have two <li> tags. These stand for list items – a <ul> must have one <li>
for each item in the list. And each list item contains our links.
Now whenever we want to add a new page to our site we just have to add a new <li> to our list which
contains the appropriate link. For example, if we wanted a Contact page, we might create Contact.html
and add: <li><a href=”Contact.html”>Contact</a></li>
I’m sure you can think of many other pages you might want to add to your own sites.
Styling our navigation list
We are going to look at CSS in more detail later. For now let’s just add some to make our navigation
look a little nicer.
Inside our <head> element on both pages, add the following HTML:
<head>
<style>

html { font-family: Arial; }

body { padding: 10px 30px; }
h1 { font-size: 1.8em; }
nav { background: black; padding: 5px; }
nav ul { list-style: none; }
nav ul li { display: inline; margin-left: 15px; font-weight: bold; }
nav ul li a { color: white; }
nav ul li a:visited { color: white; }
nav ul li a:hover { color: orange; }
a { text-decoration: none; color: blue; }
a:visited { color: purple; }
a:hover { color: orange; }
</style>
</head>
Now if you save and refresh you’ll see we have a navigation bar on both of our pages, and the pages
all look much prettier.
For now, don’t worry about understanding the code we’ve just added. All of the unfamiliar looking
text is CSS, which we will cover in a future lesson. You may notice the names of colors we’ve added –
you can change those colors and save and refresh and see what happens!
Experiment by setting the color names to different colors and seeing how it affects your website. See
what combinations you like!
Wait, didn’t you say NOT to put styling in our HTML? What is this <style> element then?
You’re right, I DID say not to do that. If you’ve experimented with changing the colors and swapping
between the pages then maybe you’ll realize why! The <style> element lets you put CSS code into
your pages, and the CSS code changes the way your page looks.
HOWEVER, we have to put the same CSS code into every page. If you tried changing colors then you
probably found that you had to make the same changes on both pages – which is annoying and
difficult to remember. Imagine if you had 100 pages on your site… you’d have to change 100 files
every time you wanted to change how your site looks.
So, we have in this case used a <style> element in our HTML, but hopefully you can see why it’s a
bad idea. Later in the course we will replace our <style> element with a better solution – but for now
we haven’t yet learned how to do that so we’ll just keep our <style> element until then.

Class, ID and < div > and < span > in HTML
In this lesson we’ll learn about class and ID attributes, and two tags that are useful for structuring our
HTML. If you haven’t followed the lessons up to now then you should start from the beginning of the
course. For this lesson you’ll want to have your “index.html” open in both Notepad and your browser
so we can make changes to it and refresh the browser to see them, as usual.
Classes and IDs
Class and ID are two very important attributes that can go on any HTML element.
Class is used to group together elements that are alike in some way.
ID is used to identify one particular element that we want to interact with.
For example, earlier we added an ID to our <section> element, like so:
<section id=”content”>…blah blah blah…</section>
This is so we can tell this <section> element apart from any other <section> elements we might add
later. What this says is “this section element is called ‘content’”.
IDs are referred to using the “#” symbol, so the correct way to describe this element using its id is
#content. This means “the element with the ID ‘content’”. This is called a selector.
There can only be one element with a particular ID on each page. In other words IDs specify an
element that is unique.
Classes are used to group together alike elements that share a characteristic.
For example, our page might have many <li> elements. (remember <li>? <li> is a list item – an item
that appears as part of a list). Imagine a page with lots of different lists on it, all with lots of <li>
elements.
What if we wanted to do something with just ONE group of the list elements? Well, we could add a
class to those list elements. Something like this:
<ul>
<li class=”special”>Item One</li>
<li class=”special”>Item Two</li>
<li class=”special”>Item Three</li>
</ul>
Now we can specify the list items that have the class “special”. The selector for classes uses the
symbol “.” so in this example our selector would be .special

Classes do not have to be unique, they can be shared by any element that you want to be part of the
same class.
It will be important to understand classes and IDs when we start learning CSS in detail later.
The <div> and <span> elements
We have already seen the <div> element: it acts as a group, to collect together multiple elements that
we want to keep together.
The <span> element is similar, except that it acts inline where <div> acts as a block. Later in the
course we will study the block model so we can understand this statement in detail.
For now, we just need to know that <span> can go inline as part of text without any effect. For
example:
On our index.html page, we could add a <span> around some of the text, like so:

tools. This is <span class=”important”>great news</span> as it means
everyone can learn to make websites.</p>
Replace your <p> tag in index.html with the above HTML and hit refresh.
Everything looks EXACTLY the same. That’s because we haven’t told the browser what a span with
class important means!
Inside our <style> element in the <head> add the following line:
span.important { font-weight: bold; color: red; }
With our understanding of selectors we can probably guess what this CSS means – if we have a
<span> with class important (i.e. span.important) then make it bold and red. If you save and refresh
then you can see the text now shows as red and bold:
What if the <span> was a <div>? Try changing the <span> to <div> like so:

tools. This is <div class=”important”>great news</div> as it means
everyone can learn to make websites.</p>
Save and refresh and we get this:

Ok. So the <div> has put “great news” on its own line. This is what we mean when we say <div> acts
as a block – it is now a separate block between the other two lines, instead of being inline like the
<span> tag was. This is the essential difference between <div> and <span> – <div> starts a new line
for all of its content. Technically it’s a little more complicated than that, as we’ll see when we study
the block model in more detail. But for now that gives us a good understanding to work from.
Wait, why isn’t my important text bold and red anymore?
That’s the other change – now our text isn’t getting the “important” change we made before with our
“important” class.
If you remember the line of CSS we added, we said span.important – we specified that it must be a
<span> element with a class important. If we remove the word “span” so it just says “.important”
let’s see what happens.
Change the line of CSS you added earlier to read:
.important { font-weight: bold; color: red; }
Now our “important” class is working again!
Of course, we don’t want to keep this as a <div> as we want the text to appear in line. So change it
back to a span and save, so it looks like this:
Now you can see how to use <div> and <span> to group content in your own websites, and we have
begun to learn about classes and IDs.
What Is CSS?
This is the third part of a series in which we learn how to make websites. If you haven’t completed
Part Two then you should do that first. In Part Two we made a very simple website consisting of a

couple of HTML files on our own computers – you’ll need that website to continue, as we’re going to
build on it in this part.
In this lesson we learn about one of the main types of data websites send to our computers over the
internet: CSS.
We now have a basic knowledge of HTML – enough to start working on more advanced topics.
We would like to make our website look more attractive. The best way to do this is using a technology
called CSS.
CSS stands for Cascading Style Sheets. Let’s look at what this means.
A ‘style sheet’ is a list of rules for how we want our webpage to look. For example, we might have a
rule that says “all headings are green”, or one that says “put a big space between every paragraph”.
What does it mean that our style sheets are “cascading”?
In this context, ‘cascading’ means that we can have multiple rules applying to the same piece of
HTML, and the rules will ‘cascade’ to determine which one wins. In CSS the most specific rule always
wins. Let’s understand this with an example:
If I have two rules like this:
• All headings are green

• The second heading on the page is blue
Then what color will the second heading be? These two rules contradict each other: it can’t be both
green and blue!
Because the most specific rule always wins we can see that the second rule is going to be used. The
second rule is more specific: it only applies to the second heading. So on our page all the headings will
be green, except for the second which will be blue.
This is an example of the ‘cascading’ effect of the rules in our style sheets.
What kind of rules can we put in our style sheets?
CSS contains many possible rules and is very powerful. Here are just some of the rules we can apply:
• Color of items on our page

• Position of items on our page
• Size of items
• How parts of the page are divided up

• Background images
• Animations
• Visual effects, e.g. rounded corners
Example CSS
Here is the CSS we have added to our site so far. At the moment it lives in the <style> tag in the
<head> section of our HTML. We will look at a better place to put it in a later lesson.
<style>

</style>
This is a list of rules. Let’s look at some of them to understand how a rule is made up.
Each rule has this structure: first it describes what HTML elements the rule applies to. Then, inside
curly braces “{” and “}” it describes what the rule does.
So this first rule applies to the HTML element “html”. Remember the <html> tag we learned about?
This tag contains ALL the html for our whole webpage. So any rules we put in the “html” rule apply to
every element on the page.
What does this rule do?
Each CSS rule has a property and a value. In our example, the property is “font-family” and the value
is “Arial”.
Properties are defined by CSS, so we have to use the correct properties to get the effect we want.

In this case, the CSS property “font-family” lets us set the font on any element. In this case, we are
setting it to the font ‘Arial’.
So our rule
sets the font for anything within the <html> tag to be Arial.
Let’s look at another rule:
This rule applies to the <body> tag. It is setting the padding property to the value “10px 30px”.
We will look in more detail at properties like “padding” in later lessons. For now we just want to
understand how these rules are formed.
Finally look at this rule:
This rule applies to the <a> tag. This rule sets more than one property. It sets “text-decoration” to
“none”, and “color” to “blue”.
So we can set multiple properties by putting a semi-colon “;” between them in our rule.
In this case, we are setting all links on the page (remember, links are defined by the <a> tag!) to have
no decoration (i.e. no underline) and to be blue.
CSS Rule Structure
Now we can see how our rules are created. First there is a selector, which tells the browser which
elements to apply the rule to. Then there is a list of properties and values.
In the next lesson we will learn more about selectors in detail.

Understanding CSS Selectors

We have seen that CSS is a list of rules that tell our browser how to display the HTML, and we have
looked at how rules are formed. Let’s look in more detail now at selectors.
In this lesson we learn about one of the main parts of a CSS rule: CSS selectors.
Remember, a selector is the part of a CSS rule that goes outside of the curly braces “{” and “}”. This
tells the browser which elements the rule acts upon
For example a selector a applies to ALL <a> tags. The selector html applies to all <html> tags.
What about this selector that is in our example?
.important
Remember when we learned about classes and ids earlier in the course? If not, you should go and
review the lesson “Class, ID and <div> and <span> in HTML” which came in the last part of the
course.
Just in case, here’s a reminder. Class and id are both attributes we can put on our HTML tags. We put
a class on any tags we want to share particular CSS rules, and we put an ID on any tags we want to be
unique.
For example:
<h1 id=”mainHeading”> We only want ONE main heading, so we give this tag a unique name. We
only have ONE element with any ID on a page.
<li class=”important”> We might want lots of elements to be marked as ‘important’ so we make a

class called important and apply it to LOTS of elements.
To put a CSS selector via ID we use the “#” symbol, and for a class we use the “.” symbol.
So our rule .important applies to any element with a class of “important”.
If we wanted to apply a rule to only one element, then we give that element an ID, e.g.
id=”myElement” and then create a rule for it:
#myElement { … }

What if we had a lot of elements that we had marked with a class, but we only wanted some of them to
have a particular rule? For example, imagine this HTML:
<li class=”important”>Some list item</li>

<li>Another list item</li>
<a class=”important”>Here’s a link!</a>
We don’t want to change the way our ‘important’ things appear everywhere, but we do want our link
to have something extra, maybe be in bold.
We can do this by combining parts of our selectors. We can specify BOTH a type of element and a
class, like this:
a.important { font-weight:bold; }
This means that this rule only applies to elements <a> that have a class “important”.
Similarly, we could use an ID in the same way:
a#myUniqueLink { font-weight:bold; }
Of course, since there should only be ONE id #myUniqueLink on the page then we can have the same
effect without the “a”.
Inherited Selectors
What about the very long selectors we have in our example CSS file? Look at this one:
This specifies FOUR tags.
When we list tags like this, we are saying that we only want this rule to apply to tags that are inside the
preceding tag. So we would translate our rule as saying “apply this rule to any <a> tag that is inside an
<li> that is inside a <ul> that is inside a <nav>”.
So only links inside our <nav> get colored white!
This means we can have different rules for different parts of the page, like this:
#mainSection a { color: orange; }

#otherSection a { color: green; }
Now any <a> tags inside the tag with ID #mainSection will appear orange, while any <a> tags inside
the tag with ID #otherSection will appear green!

Pseudo Selectors
Finally there are some selectors called ‘pseudo selectors’. These apply to elements that are in certain
states. For example:

This kind of selector is mostly seen with the <a> tag. Remember, <a> is a link. Links can be visited or
unvisited. Often websites show you a different colored link when you click it – that is achieved using
the a:visited pseudoselector. Now when you click a link on our page, it shows as purple so you know
you’ve already been to it.
Similarly, :hover allows you to change an element when your mouse hovers over it – so we get a nice
visual effect on our links by changing their color when we hover them.
Selector Specificity
This is a complex topic, but it’s important to understand how different rules apply. Remember the
golden rule is:
The most specific rule always wins
For example:
<p id=”someParagraph” class=”superSpecial”>What color is this

text?</p>
<style>
#someParagraph { color: red; }

.superSpecial { color: blue; }
</style>
What color will our paragraph be?
It has BOTH a class and an ID. And one tells it to be red, and the other tells it to be blue.
Since the most specific rule always wins, and an ID is more specific than a class (because you can
only have ONE ID) we know that the #someParagraph rule will “win” and it will be red.
Similarly, any rule that specifies a type of element is more specific than one that does not:
p.superSpecial { color: yellow; }

.superSpecial { color: green; }

In this case the color will be yellow because the first rule is more specific: it only applies to <p>
elements whereas the second rule applies to any element with the class .superSpecial.
It can be very difficult to understand specificity – the best way is to practice and experiment with your
own website. We want to give you the ability to start experimenting for yourself so you can learn by
experience!
Using Simple CSS Styles for text

In this lesson we learn some styles we can apply with CSS to make text on our websites more visually
attractive.
Let’s make some changes to the CSS in our sample website so we can learn some new CSS styles.
(If you don’t have a sample website then return to our course on understanding basic HTML and work
through those lessons)
Find the selector that applies to the <h1> tag. From the last lesson you should know that the selector
for that is just “h1″.
Change the CSS for that line from this:
To this:
h1 { font-size: 1.8em; text-transform: uppercase; text-align:

center; text-decoration: underline; color: white; background: black;
padding: 10px 0px; }
So we have added a number of extra styles to our <h1> tag. Let’s look at what has changed.
Originally our <h1> element (which you hopefully remember is the main title of the page – the
“heading 1″) on the page appeared like this:

Now with all the extra styles it appears like this:
Let’s look at why by looking at each style in turn:
Font-Size Style
The “font-size” style hasn’t changed. We originally set it to “1.8em” and that is still the same. Font-
size determines how big the text appears on the screen. It can be in pixels or ems or points.
We are usually most familiar with expressing font sizes in points – these are the units we use in word
processing programs when we change the font size. So we would express this as “font-size: 12pt” in
CSS.

An em is an alternative way of expressing how large a font can be. They are scalable depending on
how large the font size is set to in the users browser. So a font-size of 1.8em is saying “set it to 1.8x
the size of the font”, or “set it to 180% of the normal font size”. In other words anything larger than
1.0em increases the font size, anything less than 1em shrinks it.
You can experiment with this yourself using the Browser Tools – practice setting the “font-size”
element to 0.5em, then 1em, then 1.5em so you can see if for yourself!
Text-Transform Style
Text-transform allows us to change the case of the letters. For example, if we have a particular part of
the page we want to appear in all uppercase or lowercase, we set text-transform to “uppercase” or
“lowercase”. If we wanted to draw attention to all our links perhaps we would put all of our <a> tags
in uppercase:
a { text-transform: uppercase; }
Text-Align Style
Text-align defines how the element is aligned on the page. You may be familiar with centering text, or
aligning it to the left or the right. Text-align takes everything inside the element(s) defined by our
selector and aligns it either left, right or center, e.g.:
text-align: center;
You can see the text of our title is now centered since we applied this rule.
Text-Decoration Style
By now I’m sure you’re guessing what each of these styles does! Text-decoration allows us to apply
effects to the text. In this case, we are adding an underline:
text-decoration: underline;
We could also set it to “overline”:
Or to “line-through”:
Color and Background Styles
color: white; background: black;
These are self-explanatory – you can choose a foreground and background color using the color and
background styles. For example:
color: orangered; background: aliceblue;
As you can see, my browser supports complex colors like “aliceblue” and “orangered”.
However, we cannot rely on naming all of our colors: what if we want a very subtle shade? This is
where hex color codes come in.
Usually we specify our colors using a hex code. This is a six digit number, written beginning with a
“#” symbol, e.g. “#000000″.
Each digit can be 0-9, or A-F. This is a hexadecimal system, so A, B, C, D, E and F are all considered
larger “numbers” than 0-9. Think of them like the Jack, Queen, King and Ace in a pack of cards: in
many card games they have a value of Jack = 11, Queen = 12, King = 13, etc.
So in hexadecimal A = 10, B = 11, C = 12, D = 13, E = 14 and F = 15.
So the lowest possible value for a color code is “#000000″ and the highest is “#FFFFFF”.
The six digits are divided into three pairs, one for Red, one for Green and one for Blue – in that order.
So pure red would be “#FF0000″. In other words, the maximum amount of red, and no green and no
blue.
Pure Green is then “#00FF00″ – maximum green, but no red or blue.
Pure Blue is “#0000FF” – maximum blue, but no red or green.
Now you know this you might be able to guess what color “#000000″ corresponds to. No red, no
green, no blue… so it must be black!
Similarly, “#FFFFFF” is all red, all green and all blue – when we mix all the colors together we get
white!
We can also mix colors. So

color: #EE5566; background: #99AADD;
translates to look like this:
Try experimenting with your own color codes by entering values in the “color” field using the
Browser Tools. Start with the “#” symbol then enter six digits from 0-F and get a feel for how they are
created!
Padding Style
The final style we have added is “padding”. Let’s see if we can see what difference our padding
makes.
Let’s look again at our title:
This is with padding set to “10px 0px”. What if we set it to “0px 0px”?
Can you see the difference? Without the padding there is less space above and below the text. So
padding adds extra space to the inside of an element.
Padding can get very complex so we will look at that in more detail later in the course.
So we have learned a number of CSS styles:
font-size, text-transform, text-align, text-decoration, color,

background, padding
We can apply these to any element to transform the way our text appears.
Padding, Border and Margin in CSS

In this lesson we learn about three of the most important CSS styles for positioning on our web pages:
Padding, Border and Margin. In the last lesson we first learned about ‘padding’ and saw how it adds
extra space to the inside of a HTML element. Let’s look at this now in more detail.

This may look complicated, but once you understand how these four pieces fit together you will have a
great understanding of how HTML elements are displayed on the page.
Each HTML element has “content”. This is the text or images or whatever is in the actual element.
e.g. <span>My content goes here inside the tag!</span>
The sentence “My content goes here inside the tag!” is the content of the span element.
If we don’t do anything special to the tag then it will just display as a ‘normal’ sentence.
But we can apply CSS rules to it. Let’s give it an ID first so we can apply a rule easily:
<span id=”testSpan”>My content goes here inside the tag!</span>
This appears like this on the page:
Let’s add a border by applying some CSS:
#testSpan { border: 1px solid black; }
Now it appears like this:
By now you’re familiar enough with CSS that you can probably guess how the border tag works. The
first part of it is the border thickness, in this case “1px”. Then there are some definitions for how the
border could appear – dotted, solid, etc. Then finally a color, which can be a named color or a
hexcode, like we saw in the last lesson.
So we could say:
#testSpan { border: 6px dotted #FF0000; }

And this looks like this:
In this case it’s a thicker border: 6px, instead of 1px. And it’s dotted instead of solid. And you
remember that #FF0000 is the hexcode way of saying “all red, and no green or blue” – in other words,
red!
For simplicity I’m going to reduce my border back to solid and only 2px:
#testSpan { border: 2px solid #FF0000; }
Now we can see where the border goes compared to the content. As you might expect, it goes all
around!
Let’s look at how padding affects the element. We remember from the last lesson that padding adds
space inside the element.
#testSpan { padding: 10px; border: 2px solid #FF0000; }

So now we have 10 pixels of space between the content and the border.
What if we wanted 10px on the top, but not on the bottom?
Well, there are two ways of doing that. We could specify only padding on the top, like this:
#testSpan { padding-top: 10px; border: 2px solid #FF0000; }
Or we could specify it using the padding tag with some extra inputs, like this:
#testSpan { padding: 10px 0px 0px; border: 2px solid #FF0000; }
Both of these have the same effect.

This is because with padding, border and margin, you can specify different values for “top”, “bottom”,
“left” and “right” by putting “-top” after the name of the style.
For example:
padding-right: 3px;
Sets a padding to 3px on the right only.
Or “border-bottom: 5px solid yellow;” puts a solid yellow border 5 pixels thick only on the bottom.
If we just write “border” or “padding” without specifying a direction then the browser assumes we
mean all four directions. So “padding: 10px;” is a short way of saying:
“padding-right: 10px; padding-top: 10px; padding-bottom: 10px; padding-left: 10px;”
Each style also allows us to use shorthand.
If we put just one value, it applies to all four directions.
If we put two values, then the first applies to top/bottom, and the second applies to left/right.
For example:
Padding: 10px 200px; looks like this:
Top and bottom both get 10px, and left and right both get 200px.
What about three values?
Padding: 10px 200px 60px; looks like this:
Top gets the first value (10px), left and right both get the second value (200px) and bottom gets the
final value (60px).

And all four allows us to put a different value on each direction:
Padding: 10px 200px 60px 45px;
So we can set a different value for each. This helps us to position text, elements etc within other
elements.
What about Margin?
We have seen that padding adds space inside an element. Margin does the same for outside the border.
Remember how they all fit together?
So increasing the margin puts space between our element and any other elements.
Just like padding, margin can be specified as margin-top, margin-bottom, etc. And it uses the same
shortcuts as padding, so “margin: 10px” means “put a 10 pixel margin around the whole element”.
Now we understand how to space out the elements on our page!
Loading External CSS Files using the tag

In this lesson we will learn how to separate our CSS into separate files and load it using the <link>
tag.
So far we have been putting CSS straight into our HTML files using the <style> tag.
However, we have seen that this has many disadvantages. If we have many pages on our site we have

to copy the same CSS into every page. Then if we choose to change it we have to change it on
EVERY page… and if we miss one then everything will look different on that page.
It would be better if we could put all of our CSS in a separate file, then changing that file would
automatically update every page on our site.
Luckily we can do this, using the <link> tag.
First, let’s move all of our CSS out of the <style> tag.
Copy all of the CSS and save it in a new Notepad document:

h1 { font-size: 1.8em; text-transform: uppercase; text-align:
center; text-decoration: underline; color: white; background: black;
padding: 10px 0px; }
Save this as “Site.Css” in the same folder as our HTML files.

Now remove the <style> tags from the <head> section in BOTH our HTML files.
Should become:
Once you have removed the <style> the HTML should look a lot shorter!
Let’s refresh our page.

Oh. That hasn’t worked – we’ve lost all our CSS styles!
Why is that?
It’s because even though we’ve put all our CSS into a separate file we haven’t told the browser that we
need to load that CSS alongside our HTML.
We do this using the <link> tag.
Add this tag to your <head> section:
<link rel=”stylesheet” type=”text/css” href=”site.css” />
There are several attributes to the link tag.
The “type” attribute tells the browser what kind of information is contained in the linked file. In our
case it is “text/css” because it’s a text-based CSS file.
You may recognize the “href” attribute from links you’ve seen on the <a> tag. This tells the browser
where the link is located. In our case, we want to load “site.css”.
Finally the “rel” attribute tells the browser that what we are loading is a style sheet that it should apply
to the page.
Now if we hit refresh:

Everything looks just like it is supposed to!

Now we can change our CSS file, and update the entire site.
Try experimenting with editing the CSS in your file – space things out differently, change the colors,
make it look however you like!
More advanced CSS

In this lesson we will learn some more CSS styles we can use to develop the look of our pages.
By now we’re used to applying styles, and we have our own separate CSS file to add them to.
I hope you’re beginning to have ideas of how you could make your personal WebPages look and how
you can use each style to get the maximum effect.
Let’s learn some new styles that may help.
Border-radius
Border-radius is a new style that gives a modern-looking “rounded corners” effect. For example:
H1 { color: white; background: red; border-top: 10px solid #ffaadd;

border-bottom: 10px solid #ffaadd; padding: 10px; border-radius:
54px ; }
Here you can see that the border-radius takes a pixel value and makes the corners appear round. You
can see that it affects both the background (red) and the border (pink).

Box-shadow
Box-shadow adds a shadow effect to our element. Let’s put a shadow on our title:
H1 { color: white; background: red; border-top: 10px solid #ffaadd;

border-bottom: 10px solid #ffaadd; padding: 10px; border-radius:
54px ; box-shadow: 10px 10px 10px black; }
Float Styling
Float is a complex style. It removes the element from the flow of the page and makes it ‘float’ to either
the left or the right, letting everything else flow around it. For example:
In this example we have a few paragraphs of text, and a couple of images.

Instead of having the images above or below the text we want to mix the two, so we float the images
within the text. The CSS syntax is just:
.selectorToFloat { float: left; }
(or float:right, of course!)
Floats can get very complicated. The best way is to try them, so put some text and images in your
HTML (remember the <img> tag!) and try moving the images around with “float” to see how it works.
Width and Height
Sometimes we want to set the width and height of particular elements in CSS. We do this by simply
setting “width:” and “height:”.
E.g. “width: 200px; height: 100px;” would resize an image to those heights in pixels.
Display Style
The CSS “display” style is the final one we will look at in our introduction to CSS.
Remember when we learned about <div> and <span> and how one behaved as a block, and the other
inline?
We can achieve the same effect for any element we choose with a selector by setting the display style:
Display: block;
Display: inline;
Display can also be set to hide/show elements. Currently this isn’t very useful as we haven’t yet
learned how to apply code to our pages, but when we begin to write JavaScript it is sometimes useful
to set a CSS style to hide elements.
CSS Introduced
I hope you now have enough understanding to see how to layout a basic page in CSS, and how to
apply selectors to elements.

By using the CSS we have learned you can begin to design your own pages.
Try creating a HTML page with your own content and styling it however you like! Practice will make
you a much better web designer.
We have only covered the basics so far, but if you understand everything so far in the course you are
well on your way to making some awesome websites and understanding how the internet works!
What is Web Hosting?

In this lesson we will learn what is meant by the term ‘web hosting’, and we will understand more
deeply how web servers create the responses to the requests from our browser.
Web Hosting is the name commonly given to the service which makes our websites available over the
internet.
Websites are uploaded to a computer known as a ‘web host’ and from there the web site is accessed. If you
recall our lesson on What Is The Internet you will realize that a web host is just another name for a server.
There is nothing particularly special about ‘web hosting’ computers – they are just computers like any
other! They usually have more specialized hardware than home computers (for example more
memory, or a faster hard disk) but they are essentially “just computers”.
Unlike our home computers web hosts are connected to the internet all the time. Of course this is
because the website must be accessible at all times so people from all over the world can access it.
Web Host Software
Servers used as a web host are commonly configured with different software to the home computers
we are used to.
There are two main 'flavors' of web host software: Windows and Linux.
Web hosts running Windows usually use a business/server version of Windows. This is similar to the
home versions of Windows we are used to, but has some extra features for server administrators to
use.
Linux is a very popular free operating system which is very common in the world of servers and web
hosting.
However, the operating system is not sufficient software to run a modern website. On top of the
operating system the web hosting machine also has a ‘web server’ installed.
This is confusing terminology, as the term “web server” is used to refer to the physical machine, and
also this particular bit of software that runs on the machine! However, it is usually obvious from

context when we are referring to a physical machine and when we are referring to the web server
software.
On Windows the most common web server software is known as IIS. This is the web server provided
by Microsoft.
On Linux the most common web server is known as Apache.
Both Apache and IIS are capable of more or less the same tasks, though the way in which we
administer each is different. Naturally there are multiple different versions of both Apache and IIS so
there is a lot of detail to be learned when mastering either of these pieces of software.
Do you remember what a web request is? If not you should review our lesson on How Web Browsers
Work.
When a web request arrives at the web host the web server software intercepts it. At this point IIS or
Apache (or some other web server software) decides how to respond to the request and creates the
response.
Depending on the nature of the web site the way in which this response is created can be very
different.
For example, if a request comes in:
1. Asking for an image. The web server simply responds with the image file.
2. Asking for an HTML page. The web server simply responds with the contents of the HTML file.
3. Asking for a page written in ASP.NET or PHP or some other server-side language. The web server calls
yet another program (ASP.NET or PHP etc) and that program creates the response. This response is
then returned by the web server.
There are many possible ways the web server may create a response, but these few examples hopefully
give you the idea. Sometimes it is as clear as sending back an individual file. Sometimes the web
server asks another program for what to send back.
This is known as a pipeline. More and more programs can be connected together in this pipeline to
allow very complex responses to be created.
Now you understand in a little more detail how responses are created by web servers. If you have been
following our course then you can imagine how you might put your HTML files on a web server and
access them. Or maybe you can begin learning more complex languages such as PHP or ASP.NET and
start generating HTML files dynamically on the server! We will work towards more understanding in
future lessons.

How to Choose a Web Host

In this lesson we will look at the considerations that go into choosing the correct web host for our
needs.
Now you understand what web hosting is, you may be wondering how to choose a web host.
If you search for web hosting you will see there are hundreds or thousands of companies who are offering
web hosting services. How do we decide which is best?
There are a number of important considerations.
Do we want their specific platform, or do we want a generic web host?
What technology do we require from our web host?
Some web hosts offer a complete package including specialized software to create websites using their
platform. For example they might have created a particular blogging engine, and if we get hosting
from them it must use their blogging engine. This can be very useful as it saves us the effort of
creating our own blog!
However, these platforms may not be very flexible. Perhaps they can only be used in a certain way, or
for a certain kind of website. Later we may be frustrated that we cannot do exactly what we want using
this platform.
The alternative approach to this is a more generic web host. For example, a web host that offers simply
basic Windows machines running IIS (or Apache on Linux) gives us the complete technical freedom
to do whatever we want. We can put up our own HTML files for simple websites, or we can write
complex websites in a server-side language such as ASP.NET or PHP or Ruby.
The downside of this generic approach is that we have to write our own software, which is difficult
and time-consuming.
Of course if you want to write a website in ASP.NET then you must choose a host which provides a
web server that runs ASP.NET. And the same goes for PHP or Ruby or other server-side languages.
Sometimes there is a tradeoff – perhaps we can use a web host which provides their platform, but they
allow us to customize the code for our own needs, or to run other sites alongside it for additional
functionality.
Technology is the most important initial consideration, as you need to ensure your web host is capable
of doing everything your website requires.

Support & Reputation
Does the hosting company you are looking at have strong support systems? Do they respond to
support tickets rapidly? Hopefully you will not need much support, but it is inevitable that you will
encounter problems and it is useful to have support.
It is worth noting that the hosting company is not responsible for everything to do with your site. They
are responsible for ensuring the physical machine your site runs on is available and accessible, and for
any software on it that they agree to install (for example the web server software). However if your
site has bugs or problems they are usually not your line of support!
Sometimes it is difficult to tell whether a problem is to do with your site or to do with the web host not
working correctly – in this instance you want to know that your web host is responsive to support
requests so you can find out and get to fixing it!
Also always check the reputation of a company you are getting your hosting from. Hosting contracts
can be cancelled at any time, but you should still ensure the business you are dealing with has a good
reputation amongst its customers.
Space and Bandwidth
How much storage space and bandwidth do you get with your web host?
If you are making a small site that you will access only every now and then (for example, creating a
family album just for yourself… and you don’t want to use a large photo-sharing service because you
like the challenge of making your own website!) then you do not need a lot of bandwidth.
However if you intend to create a website to rival
Facebook
then you will need thousands of web servers and a lot of bandwidth. Of course you wouldn’t begin by getting
all that bandwidth in advance! And if you are getting millions of hits per day then you should probably start
developing your own computing infrastructure..!
It is important to be realistic and realize you will not have massive bandwidth needs immediately.
But it is important to estimate your traffic accurately. Will you get 1 hit per day? Or 1000? Or
100,000? In each case you need to choose the right amount of bandwidth.
Which brings us to…

Price
The more computing power and bandwidth we want the more our hosting will cost. For most sites we
don’t expect a lot of traffic so we can afford to choose a lower amount of bandwidth or computing
power. These days it is easy to scale up the power of a server if it starts getting more traffic than
expected, so it is wise to begin with the minimum amount of power you think you will need.
You must budget wisely – can you afford the monthly cost of this host? Paying more than you need for
hosting is not a good use of the money for your business or family – look carefully at the costs,
compare to other hosting companies that have the same technology and choose one that appears
reputable (check the reviews!), and affordable for you.
Conclusion
There are a number of important considerations when choosing a web hosting company. On the
technical side you must consider the platform and software they offer, and how customizable it is. It is
important to estimate your bandwidth requirements realistically. And choose a package you can afford
from a reputable company.
Good luck with your hosting!
DNS and Domain Names

In this lesson we will look at understanding the DNS “Domain Name System” and how web addresses
work on the internet.
Have you ever wondered how your computer knows how to find the correct web server when you type
in a web address?
An IP Address is a list of numbers which tells the computer how to find the correct web server for the
web site you asked for. An IP address is usually in the form of four numbers separated by dots, for
example 127.0.0.1. The maximum for each number is 255, so IP address range from 0.0.0.0 to
255.255.255.255.
(Note: There is a new form of IP addresses known as IPv6 which is six numbers separated by “:”
characters. You can think of them as being basically the same idea but longer numbers! So don’t be
confused if you see an IP address that doesn’t look like 0.0.0.0 – it’s just an IPv6 address.)
This ‘big list’ where the computer looks up the IP address is called the Domain Name System, which
is often shortened to DNS.
When you register a domain name, for example, www.free-online-training-courses.com you have
ownership of that address. You can point it at any IP address you like.

The domain name is just a name – it doesn’t come with a web host… for that you have to get a web
host! See our earlier lessons on web hosting to understand how to do this.
There are a number of companies which provide access to registering new domain names. When you
buy a domain name you can log into the portal the company provides and edit the DNS records for
your domain name.
So, perhaps when you register the domain name you have already purchased a web host. And you
know that your web host has assigned you the IP address 127.0.0.1.
So you can log into your DNS service and change the IP address associated with your domain name to
127.0.0.1.
This causes the DNS changes to ‘propagate’. This means that the big list of DNS addresses is updated
all around the world. Sometimes this takes a few hours.
Then, whenever you type into a browser your domain name, e.g. www.example.org the computer will
look up your domain name, find the IP address (127.0.0.1) and then it will ask your web host for your
website.
At this point the web server software on your host will respond. And you already understand
something about how this works from our earlier lessons!
Now you are beginning to get an idea of the entire workings of the internet and web browsers in more
detail. This knowledge will help you greatly as you learn to create websites.

Webpage JRS

Uploaded by

Document Information

Original Description:

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

Webpage JRS

Uploaded by

Copyright:

Available Formats

JESUIT REFUGEE SERVICE/REFUGEE COMMUNITY SERVICE-ETHIOPIA

A Training Manual On Webpage Design and Hosting

Prepared By: Zemene Matewos(ECEng) October 2015

Addis Ababa, Ethiopia

In order to expand your knowledge regarding webpage design and

What is the Internet? .............................................................................................................................. 1

What is the internet?

What is the World Wide Web?

How do web browsers work?

For example, in Google Chrome:

JRS/RCC Education Section Page 1

JRS/RCC Education Section Page 2

But what is HTTP?

Here is a fake URL as an example: http://www.myfakeblog.com/category/this-is-my-post

JRS/RCC Education Section Page 3

This is a common pattern for a GET request.

Try this experiment:

On windows, press your Windows key:

JRS/RCC Education Section Page 4

Web Server Responses

Cascading Style Sheets(CSS)

CSS tells web browsers how to display the HTML content

HTML without CSS

JRS/RCC Education Section Page 5

This is because CSS has many advantages over HTML display:

1) CSS is much more powerful than HTML for styling

2) CSS can be re-used across many pages on your site

JavaScript is another important type of data returned by responses.

JavaScript is responsible for the behavior of a web page

HTML: Content – a markup language

JRS/RCC Education Section Page 6

CSS: Display – a markup language

JavaScript: Behavior – a programming language

Let’s look in more detail what this means.

What is a HTML document?

First let’s understand what makes HTML special.

What are HTML tags?

A tag looks like this:

JRS/RCC Education Section Page 7

Can anything be a HTML tag?

More about tags

<span>This is inside my span! I can put anything I like here.</span>

Elements are made up of tags.

A self-closing tag looks like this: <tag />

JRS/RCC Education Section Page 8

<span class=”exampleTag”>This is inside my span! I can put anything I like here.</span>

<span lemon=”fruityAttribute”>This is inside my span! I can put anything I like here.</span>

Putting it all together

Here we can see all of the parts that make up an element.

Viewing Website HTML in our browsers

JRS/RCC Education Section Page 9

First I see the webpage I’m looking at:

JRS/RCC Education Section Page 10

JRS/RCC Education Section Page 11

Creating our first HTML document

JRS/RCC Education Section Page 12

JRS/RCC Education Section Page 13

JRS/RCC Education Section Page 14

Once you’ve hit save you can close Notepad.

JRS/RCC Education Section Page 15

JRS/RCC Education Section Page 16

As you can see the text is changed on our simple webpage:

This cycle of editing-in-Notepad, saving-in-Notepad, and then pressing F5 in your browser to