Docstoc

html

Document Sample
html Powered By Docstoc
					                     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




<P style=“color:#FF0000; font-size:60px;”>
             hello world </p>




             Web Broswer




    Hello world
                                 Networking
                                 HTML render




                  <P style=“color:#FF0000; font-size:60px;”>
                               hello world </p>




                    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
<HTML>           within the open tag (<HTML>) and the
                 close tag (</HTML>).
    <HEAD>
    </HEAD>      Inside the <HTML> tag is a <HEAD> and a
                 <BODY> tag. The <HEAD> contains
    <BODY>       information like the page title, the CSS and
                 javascript. It may also contain metadata.
    </BODY>      The <BODY> tag contains the visible
                 content.
</HTML>
                 All websites should have this structure.
                                   Networking
                             P, H1, H2 and the such!




                                    <H1> and <H2> stand for heading 1 and
<H1> My webpage </H1>               heading 2. You can use this to add
<H2> The low down </H2>             headings and sub-headings to your work!
<P> This is the first paragraph
</p>                                The <P> tag stands for paragraph. It will
<p> This is the second paragraph    lay out your text as a single paragraph.
</p>                                When you want to create a new paragraph
<H2> All done! </H2>                you surround it with the <P> and the </P>
                                    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
<B> This text is bold </B>          close tags effectively say when the
<U> This text is underlined </U>    formatting should start and end.
<B> <U> Underlined </U> and
bold </B>                           The tags can be mixed up. <B> stands for
                                    bold and <U> stands for underline. When
This is neither!                    the browser encounters a <B> and a <U>
                                    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 <BODY>
tag.
                                  Networking
                             Cascading style sheets




                                    HTML 5, the newest version, makes
<STYLE>                             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
</STYLE>                            change the style of the site. Styles are
                                    added in the <HEAD> tag of a webpage.
<H1> Test </H1>                     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
<HEAD>                                                styles for the same tags! CSS allows you
 <STYLE>
             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.
  </STYLE>
</HEAD>
                                                      Notice the second <P> tag has
<BODY>                                                class="different" in it? This allows you to
             <P> This is in one style </P>
             <P class="different"> This is in         choose which style the tag uses. You can
             another! </P>                            only use styles which start with a full stop
</BODY>
                                                      (or a class) in this way!
                               Networking
                                Activity




Open the file called
"UsingCSSClass.html".

Add a few extra classes and create some
<P> tags which use them!
                                  Networking
                                Using <DIV> tags




                                    Layout on webpages is done using <DIV>
.title {                            tag, also known as a layer. You can make
    position: absolute;             a <DIV> 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 <DIV> 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.
}

<DIV class="title">                 Width and height specify the size. Finally
          Here is the title         background-color will set the colour of the
</DIV>                              <DIV>.
                                 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
 <IMG> 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




                    <IMG src="smile.jpg">

                    <IMG src="images/bigSmile.jpg">




The <IMG> 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 <DIV> 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
<VIDEO> 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.

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:16
posted:10/27/2011
language:English
pages:25