COMPUTER
GRADE 8
COVERAGE FOR
SECOND GRADING
WEB SCRIPTING
Experimenting with Fonts and Colors
Concept of Using Table
Working with Box Model
Experimenting With Images
Website Sections and Multimedia
*** Experimenting with Fonts and
Colors and Concept of Using table were already discussed so handout regarding
these lessons will be posted later.***
CSS
Positioning Properties
|
Description
|
Properties
|
Example
|
|
1. Absolute – the
elements stays in one place. Even if you resize the browser. It will remain
in the part of the page you assigned it to.
|
left, top
right, bottom
|
.abs { position:
absolute;
bottom:4em;
right: 0;}
|
|
2. relative – its
position depends on other elements. Even if you resize the browser window, it
will not overlap into other elements
|
left, top,
right, bottom
|
.rel { position:
relative;
top:0;}
|
|
3. static – The
default position. The element would be in this position if you did not
specify any value
|
-
|
hr {position:static;}
|
|
4. fixed – The element
stays in place even if you scroll up or down, left or right. Its position
depends on the browser window and not on the page itself.
|
Left, top, right
bottom
|
pre { position: fixed;
left: 0;}
|
|
5. float – Its
position is either to the left or right of another element, with all the
other contents enclosing it.
|
Left and right
|
.left { float:left}
|
|
6. Clear – So that the
element will not have any other contents around it
|
Left, right or both
|
.right {clear: right;}
|
Span
– tag defines the
style of any in-line element. Usually use for Inline CSS.
<span style=”font-style:italic”>This
text is italicized </span>
Div - is used to define the style of a
block of elements.
<div style=”text-align:center;
color:red”> This sentence uses in-line css </div>
The
Box Model
The appearance of any element may be
enhanced by styling its borders, margins and padding. In the box model, the
element is enclosed by the padding, which is then enclosed by the borders, and
which in turn is enclosed by the margin.
Border
Properties
a. border-style = you may choose
dashed, dotted, double, solid or none.
b. border-width = thin, medium, thick
or in pixels.
c. border-color = any color or
transparent
Margin
Property = indicates
the amount of space between the border of an element and the edge of your web
page. May be specified through px, em or % units. Margin properties may be in
margin-top, margin-bottom, margin-left and margin-right.
Padding
Property = indicates
the amount of space between the borer of the element and its contents through
px, em or % units. Padding sides: padding-top, padding-bottom, padding-left or
padding right.
Sample
of HTML Document using the concept of Box Model
<!DOCTYPE html>
<html><head><title>Box
Model </title>
<style type=”text/css”>
.box { margin:3em; padding:2em;
border-style:dashed; border-color:red;}
</style></head><body>
<div class=”box”> This text uses box
model</div></body></html>
Experimenting
With Images
Background
Values
a. background-color = light background go perfect with dark texts
and vice versa
b. background-image = this is where
you put the image source
c. background-position = top, left,
bottom, center, left right or combinations of these (top left)
d. background-repeat = repeat,
repeat-y, repeat-x or no-repeat.
e. background-attachment = fixed or
scroll
sample:
<style type=”text/css”>
body { background-color: red;
background-image: url(smiley.gif);
background-position: center;
background-repeat: no-repeat:
background-attachment: fixed }
</style>
OR can be written as:
<style type=”text/css”>
body {background: red url(smiley.gif)
center no-repeat fixed }
</style>
Using
In-line Images
Using image in-line with the text is
through the empty tag <img/>
Sample:
<img
src=”birds.gif” alt=”a small bird” longdesc=http://www.clipart.com
width=”200” height=”300”>
Image Attribute
a. src = refers to the path or URL of the image you
want to display on your page.
b. alt = alternative description of
the image.
c. longdesc = refers to the .html
address of the image.
d. width and height = specifies the
dimension of the image.
To
Format the Image’s border using CSS
Border Properties
a. border-style = you may choose
dashed, dotted, double, solid or none.
b. border-width = thin, medium, thick
or in pixels.
c. border-color = any color or
transparent
<style type=”text/css”>
img { border-style: dashed;
border-width:3px;
border-color:green; } </style>
Image
File Types
There are two main image formats used
in Web Pages:
a. JPEG (Joint Photographic Experts
Group)
= designed as the standard for photographic
images allowing 16 million different colors in an image.
b. GIF (Graphics Interchange Format)
=
This is good format for illustration, computer-generated images, cartoons and
images with big areas of solid colors. GIF images can be transparent or
animated. GIF supports only up to 256 different colors.
MULTIMEDIA = is a combination of the
different forms of media such as text, graphics, audio, and video.
Adding
Audio
<embed src=”music.mid” autoplay=”false”
hidden=”false” loops=”3”/>
src= path or url of the music file
autoplay = when set to false, will
allow the user to click a play button, however, the music will start playing
once the page finishes loading
hidden = determines whether the control
panel will appear or not.
loop = will play and replay the file
depending on the value specified.
Adding
Video
<embed src=”complicated.mp3” height
=”300” width=”300” autoplay=”false” hidden=”false” />
src= path or url of the music file
autoplay = when set to false, will
allow the user to click a play button, however, the video will start playing
once the page finishes loading
hidden = determines whether the
control panel will appear or not.
height and width= refers to the
dimension of the video that will be displayed
WESITE SECTIONS
a. home page = The first web page that
a visitor must be able to access in a website
*splash
page = a striking entrance page for your site. It usually consists of your
site’s logo, or any image illustration that best represents your site and the
links to you main page.
b. About the site Section = Where you
can state your reasons for making the site
c. About Me Section = Section
regarding yourself as the creator
d. Copyright Section or Contact Me
Section
e. Site Map = It is a separate page
consisting of all the links in your site
f. Site links Section = a separate
page in your site that presents all the other sites you find interesting and or
related to your site.
h. Guestbook = Is a web page where
your site’s visitors can enter their comments about your site or yourself.
Walang komento:
Mag-post ng isang Komento