Networking
Objectives
• Understand the following
– What HTML is?
– How to write simple HTML pages and learn the
key tags
– Look at CSS
– Understand the main web file formats
Networking
HTML
We all have seen many WebPages. Some are good, some are great and
some are just plain terrible. Regardless of the quality or topic of a website
they all share one thing in common. That is they use HTML to display their
content. HTML stands for Hyper Text Markup Language.
HTML pages are actually just simple text files with special commands written
in. These text files are sent to the browser which then interprets them and
renders the content. This is why some websites look different in different web
browsers as they will render the HTML slightly differently.
Networking
HTML render
hello world
Web Broswer
Hello world
Networking
HTML render
hello world
Hello world
The above HTML code is making the text red and size 60. See if you can
work out what is going on!
HTML is made up of tags. A tag is an instruction to the browser to display
content in a certain way. There are not a huge number of tags to learn which
is why learning HTML is easy to understand but difficult to master!
Networking
Activity
Open the file “simple.html” and add some
more text to it. See if you can change the
colour and the font size. Experiment with
the tags!
Use Geany to edit the file.
Networking
HTML structure
Every website starts with the HTML tag.
The rest of the website will be contained
within the open tag () and the
close tag ().
Inside the tag is a and a
tag. The contains
information like the page title, the CSS and
javascript. It may also contain metadata.
The tag contains the visible
content.
All websites should have this structure.
Networking
P, H1, H2 and the such!
and stand for heading 1 and
My webpage heading 2. You can use this to add
The low down headings and sub-headings to your work!
This is the first paragraph
The tag stands for paragraph. It will
This is the second paragraph lay out your text as a single paragraph.
When you want to create a new paragraph
All done! you surround it with the and the
tags.
Next we will look at how the open and
close tags work!
Networking
Open and close tags
Tags will format your text. The open and
This text is bold close tags effectively say when the
This text is underlined formatting should start and end.
Underlined and
bold The tags can be mixed up. stands for
bold and stands for underline. When
This is neither! the browser encounters a and a
it will make the text both bold and
underlined.
The close tags (which always have a / in)
will stop the formatting. That is why the
text "and bold" will not be underlined.
Networking
Activity
Open the file “simpleFormat.html” and add
a new paragraph which makes use of
headings, bold and underline.
Add your new text INSIDE the
tag.
Networking
Cascading style sheets
HTML 5, the newest version, makes
extensive use of a technology called CSS
H1 { or cascading style sheets. This allows you
color: #FF0000; to set the style of any HTML tag.
font-size: 80px;
} Most modern websites will use CSS to
change the style of the site. Styles are
added in the tag of a webpage.
Test They have their own syntax as the
example on the left shows.
You must ensure that you add a ; at the
end of each instruction as well as
surrounding the style in {}.
Networking
Activity
Open the file called "simpleCSS.html".
Play around with the styles!
Go onto the following website
http://www.w3schools.com/css/css_text.as
p
Try some of the other text styles. See how
they work!
Networking
Using classes in CSS
Sometimes you may wish to use different
styles for the same tags! CSS allows you
P{ to do this by creating a class.
color: #aabbaa;
font-size: 20px;
} Notice the ".different". This is a class! We
.different {
can tell this because it starts with a full
color: #FF00FF; stop. To use a class a tag must include an
font-size:150px;
}
attribute.
Notice the second tag has
class="different" in it? This allows you to
This is in one style
This is in choose which style the tag uses. You can
another! only use styles which start with a full stop
(or a class) in this way!
Networking
Activity
Open the file called
"UsingCSSClass.html".
Add a few extra classes and create some
tags which use them!
Networking
Using tags
Layout on webpages is done using
.title { tag, also known as a layer. You can make
position: absolute; a tag take any size and be placed
top: 10px; anywhere on the web page.
left: 400px;
width: 100px;
height: 100px; The position:absolute; tells the browser to
background-color:#11aaf5; place the exactly where you say.
color: #FF0000; top: 10px; and left: 400px; say how far
font-size: 20px; from the top left courner the div will be.
}
Width and height specify the size. Finally
Here is the title background-color will set the colour of the
.
Networking
Activity
Open the file called "UsingDIVS.html".
Create a simple web layout which has -
A menu
A title
A main window
You do not need to add any content!
Networking
Images
Images are added to websites using the
tag. Before a image is added to a
website you should ensure that it is -
•The right format
•The correct size
The image format is very important. The
two main formats are -
• JPG
• GIF
Networking
GIF's
GIF images are compressed using loss-
less technology. That means that they do
not loose quality when they are
compressed (unlike Jpegs). They have the
following features -
•Maximum of 256 colours
•Supports transparency
•Can be animated
•High quality
They are mainly used for diagrams or
buttons. GIF is NEVER used for photos!
The image on the right is a GIF
Networking
Jpeg
Jpeg images are mainly used for photos.
They can support upto 16 million different
colours but they loose quality as they are
compressed. They use something known
as losy compression. Parts of the image
are discarded in order to save file space.
The main features of Jpeg are-
•Loose image quality in return for small
file sizes
•Supports 16 million colours
•Mainly used for photos
Networking
File size
Image file sizes can be large. Even Jpeg
images can be over 3-4 Mb! When
downloading a webpage it is important that
the images used are not too big. If the file
sizes are too big then the website would
take a long ime to load, even on a
broadband connection.
You must always reduce the width and
height of a image to make sure it fits into
the page without making the browser resize
it. This speeds up the downloading and
rendering of the file.
Networking
IMG tag
The will include a image into your webpage. The src attribute will
specify the name of the image to include. The image must be in the same
place as the webpage file otherwise it will not find it. You can put your images
into folders but if you do so you must add the folder name in the src attribute.
src stands for "source" and is the location of the file. The location can be
relative (like the ones above) or absolute (for example
http://www.mysite.com/smile.jpg)
Networking
Activity
Open the file called "UsingImages.html".
Add a few more images. You may wish to
add a few more tags to help place
them correctly on the screen.
HINT - the CSS z-index allows you to put
DIVS in front or behind each other!
Networking
File Formats
Because webpages can be viewed on any type of computing device (PC's,
Mac's, IPads, PS3, mobile phones etc) you can not guarantee that they all
have the same software installed. As a result the web tends to only use a
small number of common file formats.
PDF files are commonly used instead of word files. They include all of the
fonts and images in a single file which means that they do not have to rely on
fonts or software being installed.
MP3 files are very common and support on most computers. As such MP3 is
used for music and sound files.
Mpeg is a common video format which is supported by most computers.
However you can not embed Mpeg videos easily into a webpage.
Networking
HTML 5 and video
We are all used to watching videos in a web browser (like on youtube) but
have you ever wondered how they do it? Embedding video in a website is
complicated. You need something known as a "flash video player" which will
play FLV files (or flash video files). These are specially converted video files
which can be played by flash.
This is not a great solution! HTML 5 offers a better solution by using a
tag. However different web browsers support different file types. IE
9 and safari (IE 9 is the only IE which supports HTML 5!) h264 while firefox
and chrome support OGG. That means you have at least two different
versions of your video.
Hopefully this will be fixed in the future!
Networking
Activity
Make notes on –
What is HTML?
What file formats are supported on the
web?
Networking
Activity
Creat a tutorial on how to create a basic
webpage using HTML and CSS. You shoul
explain all of the items in this PowerPoint.
The tutorial should be saved as a video.
Hint - you could created a PowerPoint with
narration and the. Convert that to a video.