AMELITA M. SANTOS
(Faculty, School of Computer Science, Arellano
University)
What is the web?
In a nutshell, the web is a whole bunch on
interconnected computers talking to one another.
The computers (on the web) are typically connected
by phone lines, digital satellite signals, cables, and
other types of data-transfer mechanisms.
A 'data-transfer mechanism' is a nerd's way of saying:
a way to move information from point A to point B to
point C and so on.
The computers that make up the web can be connected
all the time (24/7), or they can be connected only
periodically.
The computers that are connected all the time are
typically called a 'server'.
Servers are computers just like the one you're using
now to read this article, with one major difference,
they have a special software installed called 'server'
software.
Web Design
The skill of designing hypertext presentations of
content that is delivered to an end-user through
the World Wide Web.
The process of designing Web pages, Web sites,
Web applications or multimedia for the Web and
may utilize multiple disciplines, such as animation,
authoring, graphic design, human-computer
interaction, interaction design, photography, and
search engine.
Technologies Involved
Markup languages (such as HTML, XHTML and
XML)
Style sheet languages (such as CSS and XSL)
Client-side scripting (such as JavaScript and
VBScript)
Server-side scripting (such as PHP and ASP)
Database technologies (such as MySQL)
Multimedia technologies (such as Flash and
Silverlight)
A style sheet language is a computer
language used to describe the presentation of
structured documents.
• A structured document is a document whose
sections are clearly defined and categorized (also
called "well-formed"). A program presenting the
document can present it in different styles because
the content has been categorized.
input[type="text"] {background-
color: blue}
The ID
Selector
You can also define styles for HTML elements
with the id selector. The id selector is defined as
a #.
The style rule below will match the element that
has an id attribute with a value of "green":
#green {color: green}
The style rule below will match the p element
that has an id with a value of "para1":
p#para1
{ text-align: center;
color: red }
How to Insert a Style
Sheet
When a browser reads a style sheet, it will
format the document according to it. There are
three ways of inserting a style sheet:
1. External Style Sheet
An external style sheet is ideal when the style is applied to
many pages. With an external style sheet, you can change the
look of an entire Web site by changing one file.
2. Internal Style Sheet
An internal style sheet should be used when a single document
has a unique style. You define internal styles in the head
section by using the <style> tag.
3. Inline Styles
An inline style loses many of the advantages of style sheets by
mixing content with presentation. Use this method sparingly,
such as when a style is to be applied to a single occurrence of
an element.
A. External Style
Sheet-1
Each page must link to the style sheet
using the <link> tag. The <link> tag
goes inside the head section:
<head> <link rel="stylesheet"
type="text/css" href="mystyle.css"
/>
</head>
The browser will read the style
definitions from the file mystyle.css, and
format the document according to it.
A. External Style
Sheet-2
An external style sheet can be written in
any text editor. The file should not contain
any html tags. Your style sheet should be
saved with a .css extension.
An example of a style sheet file is shown below:
hr {color: sienna}
p {margin-left: 20px}
body {background-image:
url("images/back40.gif")}
Creating External CSS
file
External style sheets allow you to set all the rules for
the entire site in one place, giving your site a
consistent look across all the pages.
• You must create a text file called
mystyles.css.
• Type the styles code below into the file.
• Notice that this code does not have the
<STYLE ...> tag in it:
H2 {
color:red;
font-weight:900;
font-family:sans-serif; }
Example
url("images/back40.gif") }
--> </style> </head>
C. Inline Styles
To use inline styles you use the style attribute in the
relevant tag. The style attribute can contain any CSS
property.
The example below shows how to change the color
and the left margin of a paragraph:
<p style="color: sienna; margin-left:
20px">
This is a paragraph </p>
Single Tag CSS
CSS can be defined for single tags by simply
adding style="styledefinition:styleattribute;"
to the tags.
Single tag CSS is used when the style is used in a
single place on the entire site.
Look at this example:
<h2 style="font-family:sans-serif;">
Single Tag Example</h2>
It is
<b style="font-size:20px;">NOT</b> me.
http://www.echoecho.com/csslayers.htm
That’s ALL folks…
have a happy
WEB DESIGNING
day
http://www.w3schools.com/css/css_syntax.asp