Facilitators_handbook_Website_Management T
advertisement
INTRODUCTION TO
WEBSITES AND WEBSITE MANAGEMENT
Facilitator’s Notes
Author:
EM Njoroge
Date:
July 2013
Page 1 of 73
Objectives
1. To define websites
2. To learn how to develop a simple website
3. To learn best practices in web management
4. To manage and customize a webpage
By the end of the module, participants should be able to:
Understand the basic structures of a typical website
Master elementary skills in HTML, CSS and PHP web management
programming skills
Page 2 of 73
INTRODUCTION TO WEBSITE MANAGEMENT
The original purpose of the World Wide Web (WWW) was to provide easy access to
cross-referenced documents that existed on the computer network
Hypertext linking allows one to quickly open other Web pages
A document on the Web is called a “Web page” which is identified by a unique address
called the Uniform Resource Locator (URL), commonly referred to as a Web address,
a URL is a type of Uniform Resource Identifier (URI)
Each URL consists of two basic parts:
–
–
A protocol (usually HTTP) and
Either the domain name for a Web server or a Web server’s Internet
Protocol address
Hypertext Transfer Protocol (HTTP) manages the hypertext links that are used to
navigate the Web
A Web site refers to the location on the Internet of the Web pages and related files
which will be displayed using a program called a Web browser
A Web server is a computer that delivers Web pages over the internet, the most
popular Web server software is Apache HTTP Server (Apache) and Microsoft Internet
Information Services (IIS) for Windows
A host refers to a computer system that is being accessed by a remote computer
A domain name is a unique address used for identifying a computer such as a Web
server on the Internet
Page 3 of 73
The domain identifier identifies the type of institution or organization (.biz, .com, .edu,
.org)
An Internet Protocol, or IP address, is another way to identify computers or devices
connected to the Internet
Web pages are created using Hypertext Markup Language (HTML) which are
commonly referred to as HTML pages or documents
A markup language is a set of characters or symbols that define a document’s logical
structure
Working with Well-Formed Web Pages
A web page is an "HTML Document". This is a file format which usually uses the
extension ".html" or ".htm". For example, if you use Microsoft Word, you will usually
save your files with the extension ".doc". However you can also save your files with
many other extensions such as ".txt", ".wps" etc. Amongst the options is ".html".
HTML documents are actually just plain text, but contain snippets of code which carry
vital information about how the page should be displayed. You can create such a
document using any text editor - even a very simple one like Windows Notepad. In fact
many web designers prefer to use simple text editors.
This is what a very simple HTML document looks like:
<html>
<head>
<title>A Simple Web Page</title>
</head>
<body>
This is about as simple as a web page can get.
</body>
</html>
To view an HTML document, you must use a browser (or similar software). The browser
opens the HTML document in the background and "decodes" it before showing it to you.
What you see is your browser's interpretation of how the web page should look.
Page 4 of 73
HTML
Introduction
At the heart of web page design is a computer language called "HTML". Although many
new languages and technologies are superseding HTML, it still forms the foundation of
virtually all websites. For this tutorial we will simplify the situation and pretend that all
web pages use only HTML.
What is HTML?
It is a language for describing web pages as it stands for Hyper Text Markup Language;
it is a markup language which is a set of markup tags, which describe document
content; HTML documents contain HTML tags and plain text, HTML documents are also
called web pages.
The Growth of HTML
Since the early days of the web, there have been many versions of HTML:
Version
HTML
HTML+
HTML 2.0
HTML 3.2
HTML 4.01
XHTML 1.0
HTML-5
XHTML-5
Year
1991
1993
1995
1997
1999
2000
2012
2013
Page 5 of 73
The HTML Tags
Markup tags are usually called HTML tags, which are keywords surrounded by angle
brackets like <html><br><p> and they normally come in pairs like <b> and </b>
The first tag in a pair is the start tag; the second tag is the end tag what makes the
difference is that the end tag is written like the start tag, with a forward slash before the
tag name Start and end tags are also called opening tags and closing tags.
Example:
<tagname>content</tagname>
HTML Elements
An HTML element is everything between the start tag and the end tag, including the
tags:
Example:
<p>This is a paragraph.</p>
Web Browsers
The purpose of a web browser (such as Google Chrome, Internet Explorer, Firefox) is to
read HTML documents and display them as web pages.
The browser does not display the HTML tags, but uses the tags to determine how the
content of the HTML page is to be presented/ displayed to the user:
Page 6 of 73
Page 7 of 73
HTML Page Structure
Below is a visualization of an HTML page structure:
<html>
<body>
<h1>This a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
Common Declarations
HTML5
<!DOCTYPE html>
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Page 8 of 73
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
HTML Editors
Writing HTML Using Notepad or TextEdit
HTML can be edited by using a professional HTML editor like:
Adobe Dreamweaver
Microsoft Expression Web
CoffeeCup HTML Editor
Notepad.
However, for learning HTML we recommend a text editor like Notepad (PC) or TextEdit
(Mac). We believe using a simple text editor is a good way to learn HTML.
Page 9 of 73
BASICS
HTML headings are defined with the <h1> to <h6> tags.
Example
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
HTML Paragraphs
HTML paragraphs are defined with the <p> tag.
Example
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
HTML Links
HTML links are defined with the <a> tag.
Example
<a href="http://www.mytestpage.com">This is a link</a>
HTML Images
HTML images are defined with the <img> tag.
Page 10 of 73
Example
<img src="MyfirstLogo.jpg" width="104" height="142">
Elements
An HTML element is everything from the start tag to the end tag:
Start tag *
Element content
End tag *
<p>
This is a
paragraph
</p>
<a href ="default.htm">
This is a link
</a>
<br>
Break a line
* The start tag is often called the opening tag. The end tag is often called the closing
tag.
HTML Element Syntax
An HTML element starts with a start tag / opening tag
An HTML element ends with an end tag / closing tag
The element content is everything between the start and the end tag
Some HTML elements have empty content
Empty elements are closed in the start tag
Most HTML elements can have attributes
Nested HTML Elements
Most HTML elements can be nested (can contain other HTML elements).
Page 11 of 73
HTML documents consist of nested HTML elements.
HTML Document Example
<! DOCTYPE html>
<html>
<body>
<p>This is my first paragraph.</p>
</body>
</html>
The example above contains 3 HTML elements.
Empty HTML Elements
HTML elements with no content are called empty elements.
<br> is an empty element without a closing tag (the <br> tag defines a line break).
Tip: In XHTML, all elements must be closed. Adding a slash inside the start tag, like <br
/>, is the proper way of closing empty elements in XHTML (and XML).
Attributes
HTML elements can have attributes
Attributes provide additional information about an element
Attributes are always specified in the start tag
Attributes come in name/value pairs like: name="value"
Attribute Example
HTML links are defined with the <a> tag. The link address is specified in the href
attribute:
Page 12 of 73
Example
<a href="http://myfirstPage.com">This is a link</a>
Always Quote Attribute Values
Attribute values should always be enclosed in quotes.
Double style quotes are the most common, but single style quotes are also allowed.
HTML Tip: Use Lowercase Attributes
Attribute names and attribute values are case-insensitive.
However, the World Wide Web Consortium (W3C) recommends lowercase
attributes/attribute values in their HTML 4 recommendation.
Newer versions of (X) HTML will demand lowercase attributes.
HTML Attributes Reference
Below is a list of some attributes that can be used on any HTML element:
Attribute
class
id
style
Description
Specifies one or more class names for an element (refers to a
class in a style sheet)
Specifies a unique id for an element
Specifies an inline CSS style for an element
Headings
Headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading.
Page 13 of 73
Example
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
Note: Browsers automatically add some empty space (a margin) before and after each
heading.
Use HTML headings for headings only. Don't use headings to make text BIG or bold.
Search engines use your headings to index the structure and content of your web
pages.
Since users may skim your pages by its headings, it is important to use headings to
show the document structure.
H1 headings should be used as main headings, followed by H2 headings, then the less
important H3 headings, and so on.
HTML Lines
The <hr>tag creates a horizontal line in an HTML page.
The hr element can be used to separate content:
Example
<p>This is a paragraph.</p>
<hr>
<p>This is a paragraph.</p>
<hr>
<p>This is a paragraph.</p>
Page 14 of 73
HTML Comments
Comments can be inserted into the HTML code to make it more readable and
understandable. Comments are ignored by the browser and are not displayed.
Comments are written like this:
Example
<!-- This is a comment -->
Note: There is an exclamation point after the opening bracket, but not before the
closing bracket.
Page 15 of 73
HTML TAG REFERENCE
W3Schools' tag reference contains additional information about these tags and their
attributes.
Tag
<html>
<body>
<h1> to <h6>
<hr>
<!-->
Description
Defines an HTML document
Defines the document's body
Defines HTML headings
Defines a horizontal line
Defines a comment
Paragraphs
Paragraphs are defined with the <p> tag.
Example
<p>This is a paragraph</p>
<p>This is another paragraph</p>
Example
<p>This is a paragraph
<p>This is another paragraph
The example above will work in most browsers, but don't rely on it. Forgetting the end
tag can produce unexpected results or errors.
Note: Future version of HTML will not allow you to skip end tags.
Page 16 of 73
Line Breaks
Use the <br> tag if you want a line break (a new line) without starting a new paragraph:
Example
<p>This is<br>a para<br>graph with line breaks</p>
The <br> element is an empty HTML element. It has no end tag.
Formatting
HTML uses tags like <b> and <i> for formatting output, like bold or italic text.
These HTML tags are called formatting tags
Tag
<b>
<em>
<i>
<small>
<strong>
<sub>
<sup>
<ins>
<del>
Description
Defines bold text
Defines emphasized text
Defines a part of text in an alternate voice or mood
Defines smaller text
Defines important text
Defines subscripted text
Defines superscripted text
Defines inserted text
Defines deleted text
Links
The HTML <a> tag defines a hyperlink.
A hyperlink (or link) is a word, group of words, or image that you can click on to jump to
another document.
Page 17 of 73
When you move the cursor over a link in a Web page, the arrow will turn into a little
hand.
The most important attribute of the <a> element is the href attribute, which indicates the
link’s destination.
By default, links will appear as follows in all browsers:
An unvisited link is underlined and blue
A visited link is underlined and purple
An active link is underlined and red
Link Syntax
The HTML code for a link is simple. It looks like this:
<a href="url">Link text</a>
The href attribute specifies the destination of a link.
Example
<a href="http://www.myfirstpage.com/">Visit my page</a>
Links - The target attribute
The target attribute specifies where to open the linked document.
The example below will open the linked document in a new browser window or a new
tab:
Example
<a href="http://www.myfirstpage.com/" target="_blank">Visit my page!</a>
Page 18 of 73
Links - The id Attribute
The id attribute can be used to create a bookmark inside an HTML document.
Tip: Bookmarks are not displayed in any special way. They are invisible to the reader.
Example
An anchor with an id inside an HTML document:
<a id="tips">Useful Tips Section</a>
Create a link to the "Useful Tips Section" inside the same document:
<a href="#tips">Visit the Useful Tips Section</a>
Or, create a link to the "Useful Tips Section" from another page:
<a href="http://www.mypage.com/html_links.htm#tips">
Visit the Useful Tips Section</a>
HEADS
The <head> element is a container for all the head elements. Elements inside <head>
can include scripts, instruct the browser where to find style sheets, provide meta
information, and more.
The following tags can be added to the head section: <title>, <style>, <meta>, <link>,
<script>, <noscript>, and <base>.
The <title> Element
The <title> tag defines the title of the document.
Page 19 of 73
The <title> element is required in all HTML/XHTML documents.
The <title> element:
defines a title in the browser toolbar
provides a title for the page when it is added to favorites
displays a title for the page in search-engine results
A simplified HTML document:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>
The <base> Element
The <base> tag specifies the base URL/target for all relative URLs in a page:
<head>
<base href="http://www.mypage.com/images/" target="_blank">
</head>
Page 20 of 73
The <link> Element
The <link> tag defines the relationship between a document and an external resource.
The <link> tag is most used to link to style sheets:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
The <style> Element
The <style> tag is used to define style information for an HTML document.
Inside the <style> element you specify how HTML elements should render in a browser:
<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>
The <meta> Element
Metadata is data (information) about data.
The <meta> tag provides metadata about the HTML document. Metadata will not be
displayed on the page, but will be machine parsable.
Meta elements are typically used to specify page description, keywords, author of the
document, last modified, and other metadata.
Page 21 of 73
The metadata can be used by browsers (how to display content or reload page), search
engines (keywords), or other web services.
<meta> tags always goes inside the <head> element.
Head Elements
Tag
<head>
<title>
<base>
<link>
<meta>
<script>
<style>
Description
Defines information about the document
Defines the title of a document
Defines a default address or a default target for all links on a page
Defines the relationship between a document and an external
resource
Defines metadata about an HTML document
Defines a client-side script
Defines style information for a document
Page 22 of 73
CSS
What is a CSS?
CSS stands for Cascading Style Sheets, they are tags used to define how to
display HTML elements, and external Style Sheets can save a lot of work and are
stored in CSS files.
Styles were added to HTML to solve a problem, What Problems have Style sheets
solved
HTML was never intended to contain tags for formatting a document, it was
intended to define the content of a document, like:
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
When tags like <font>, and color attributes were added to the HTML specification, it
started a nightmare for web developers. Development of large web sites, where fonts
and color information were added to every single page, became a long and expensive
process.
To solve this problem, the World Wide Web Consortium (W3C) created CSS.
Introduction
/*Before we proceed a recap of HTML/XHTML*/
What we should have known by now
HTML / XHTML
Page 23 of 73
Syntax
A CSS rule has two main parts: a selector, and one or more declarations:
The selector is normally the HTML element you want to style.
Each declaration consists of a property and a value.
The property is the style attribute you want to change. Each property has a value.
Examples
A CSS declaration always ends with a semicolon, and declaration groups are
surrounded by curly brackets:
p {color:red;text-align:center;}
To make the CSS more readable, you can put one declaration on each line, like this:
Example
p
{
color:red;
text-align:center;
}
Page 24 of 73
Comments
Comments are used to explain your code, and may help you when you edit the source
code at a later date. Comments are ignored by browsers.
A CSS comment begins with "/*", and ends with "*/", like this:
/*This is a comment*/
p
{
text-align:center;
/*This is another comment*/
color:black;
font-family:arial;
}
ID and Classes
In addition to setting a style for a HTML element, CSS allows you to specify your own
selectors called "id" and "class".
The id Selector
The id selector is used to specify a style for a single, unique element. It uses the id
attribute of the HTML element, and is defined with a "#".
The style rule below will be applied to the element with id="para1":
Page 25 of 73
Example
#para1
{
text-align:center;
color:red;
}
The class Selector
The class selector is used to specify a style for a group of elements. Unlike the id
selector, the class selector is most often used on several elements.
This allows you to set a particular style for many HTML elements with the same class. It
uses the HTML class attribute, and is defined with a "."
In the example below, all HTML elements with class="center" will be center-aligned:
Example
.center {text-align:center;}
You can also specify that only specific HTML elements should be affected by a class. In
the example below, all p elements with class="center" will be center-aligned:
Example
p.center {text-align:center;}
Page 26 of 73
CSS HOW TO’S
There are three ways of inserting a style sheet:
External style sheet
Internal style sheet
Inline style
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.
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>
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");}
Page 27 of 73
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 of an HTML page, by using the <style> tag, like
this:
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
Inline Styles
An inline style loses many of the advantages of style sheets by mixing content with
presentation. Use this method sparingly!
To use inline styles you use the style attribute in the relevant tag. The style attribute can
contain any CSS property. The example 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>
Page 28 of 73
CSS STYLING
Background
CSS background properties are used to define the background
effects of an element.
CSS properties used for background effects:
background-color
background-image
background-repeat
background-attachment
background-position
Background Color
The background-color property specifies the background color of an element.
The background color of a page is defined in the body selector:
Example
body {background-color:#b0c4de;}
With CSS, a color is most often specified by:
a HEX value - like "#ff0000"
an RGB value - like "rgb(255,0,0)"
a color name - like "red"
In the example below, the h1, p, and div elements have different background colors:
Page 29 of 73
Example
h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}
Background Image
The background-image property specifies an image to use as the background of an
element.
By default, the image is repeated so it covers the entire element.
The background image for a page can be set like this:
Example
body {background-image:url('paper.gif');}
Background Image - Repeat Horizontally or Vertically
By default, the background-image property repeats an image both horizontally and
vertically.
Some images should be repeated only horizontally or vertically, or they will look
strange, like this:
Example
body
{
Page 30 of 73
background-image:url('gradient2.png');
}
If the image is repeated only horizontally (repeat-x), the background will look better:
Example
body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}
Background Image - Set position and no-repeat
When using a background image, use an image that does not disturb the text.
Showing the image only once is specified by the background-repeat property:
Example
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}
In the example above, the background image is shown in the same place as the text.
We want to change the position of the image, so that it does not disturb the text too
much.
Page 31 of 73
The position of the image is specified by the background-position property:
Example
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}
Page 32 of 73
All CSS Background Properties
Property
Description
background
background-attachment
Sets all the background properties in one declaration
Sets whether a background image is fixed or scrolls with
the rest of the page
Sets the background color of an element
Sets the background image for an element
Sets the starting position of a background image
Sets how a background image will be repeated
background-color
background-image
background-position
background-repeat
Page 33 of 73
TEXT
This text is styled with some of the text formatting properties.
The heading uses the text-align, text-transform, and color
properties. The paragraph is indented, aligned, and the space
between characters is specified.
Text Color
The color property is used to set the color of the text.
With CSS, a color is most often specified by:
a HEX value - like "#ff0000"
an RGB value - like "rgb(255,0,0)"
a color name - like "red"
Example
body {color:blue;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}
Text Alignment
The text-align property is used to set the horizontal alignment of a text.
Text can be centered, or aligned to the left or right, or justified.
When text-align is set to "justify", each line is stretched so that every line has equal
width, and the left and right margins are straight (like in magazines and newspapers).
Page 34 of 73
Example
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
Text Decoration
The text-decoration property is used to set or remove decorations from text.
The text-decoration property is mostly used to remove underlines from links for design
purposes:
Example
a {text-decoration:none;}
It can also be used to decorate text:
Example
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
Text Transformation
The text-transform property is used to specify uppercase and lowercase letters in a text.
It can be used to turn everything into uppercase or lowercase letters, or capitalize the
first letter of each word.
Page 35 of 73
Example
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
Text Indentation
The text-indent property is used to specify the indentation of the first line of a text.
Example
p {text-indent:50px;}
All CSS Text Properties
Property
Description
color
direction
letter-spacing
line-height
text-align
text-decoration
text-indent
text-shadow
text-transform
unicode-bidi
vertical-align
white-space
word-spacing
Sets the color of text
Specifies the text direction/writing direction
Increases or decreases the space between characters in a text
Sets the line height
Specifies the horizontal alignment of text
Specifies the decoration added to text
Specifies the indentation of the first line in a text-block
Specifies the shadow effect added to text
Controls the capitalization of text
Sets the vertical alignment of an element
Specifies how white-space inside an element is handled
Increases or decreases the space between words in a text
Page 36 of 73
FONTS
CSS font properties define the font family, boldness, size, and the style of a text.
Difference between Serif and Sans-serif Fonts
On computer screens, sans-serif fonts are considered easier to read than serif fonts.
CSS Font Families
In CSS, there are two types of font family names:
generic family - a group of font families with a similar look (like "Serif" or
"Monospace")
font family - a specific font family (like "Times New Roman" or "Arial")
Generic family
Font family
Description
Serif
Times New Roman
Georgia
Arial
Verdana
Serif fonts have small lines at the ends
on some characters
"Sans" means without - these fonts do
not have the lines at the ends of
characters
All monospace characters have the
same width
Sans-serif
Monospace
Courier New
Lucida Console
Page 37 of 73
Font Family
The font family of a text is set with the font-family property.
The font-family property should hold several font names as a "fallback" system. If the
browser does not support the first font, it tries the next font.
Start with the font you want, and end with a generic family, to let the browser pick a
similar font in the generic family, if no other fonts are available.
Note: If the name of a font family is more than one word, it must be in quotation marks,
like font-family: "Times New Roman".
More than one font family is specified in a comma-separated list:
Example
p{font-family:"Times New Roman", Times, serif;}
Font Style
The font-style property is mostly used to specify italic text.
This property has three values:
normal - The text is shown normally
italic - The text is shown in italics
oblique - The text is "leaning" (oblique is very similar to italic, but less supported)
Example
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
Page 38 of 73
Font Size
The font-size property sets the size of the text.
Being able to manage the text size is important in web design. However, you should not
use font size adjustments to make paragraphs look like headings, or headings look like
paragraphs.
Always use the proper HTML tags, like <h1> - <h6> for headings and <p> for
paragraphs.
The font-size value can be an absolute or relative size.
Absolute size:
Sets the text to a specified size
Does not allow a user to change the text size in all browsers (bad for accessibility
reasons)
Absolute size is useful when the physical size of the output is known
Relative size:
Sets the size relative to surrounding elements
Allows a user to change the text size in browsers
Set Font Size with Pixels
Setting the text size with pixels gives you full control over the text size:
Example
h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}
Page 39 of 73
Set Font Size with em
To avoid the resizing problem with older versions of Internet Explorer, many developers
use em instead of pixels.
The em size unit is recommended by the W3C.
1em is equal to the current font size. The default text size in browsers is 16px. So, the
default size of 1em is 16px.
The size can be calculated from pixels to em using this formula: pixels/16=em
Example
h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */
Use a Combination of Percent and Em
The solution that works in all browsers is to set a default font-size in percent for the
<body> element:
Example
body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}
Page 40 of 73
LINKS
Links can be styled in different ways. Links can be styled with any CSS property (e.g.
color, font-family, background, etc.).
In addition, links can be styled differently depending on what state they are in.
The four links states are:
a:link - a normal, unvisited link
a:visited - a link the user has visited
a:hover - a link when the user mouses over it
a:active - a link the moment it is clicked
Example
a:link {color:#FF0000;}
/* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
When setting the style for several link states, there are some order rules:
a:hover MUST come after a:link and a:visited
a:active MUST come after a:hover
Common Link Styles
In the example above the link changes color depending on what state it is in. Lets go
through some of the other common ways to style links:
Text Decoration
The text-decoration property is mostly used to remove underlines from links:
Page 41 of 73
Example
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
Background Color
The background-color property specifies the background color for links:
Example
a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}
Page 42 of 73
LISTS
The CSS list properties allow you to:
Set different list item markers for ordered lists
Set different list item markers for unordered lists
Set an image as the list item marker
In HTML, there are two types of lists:
unordered lists - the list items are marked with bullets
ordered lists - the list items are marked with numbers or letters
With CSS, lists can be styled further, and images can be used as the list item marker.
Different List Item Markers
The type of list item marker is specified with the list-style-type property:
Example
ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}
An Image as the List Item Marker
To specify an image as the list item marker, use the list-style-image property:
Page 43 of 73
Example
ul
{
list-style-image: url('sqpurple.gif');
The example above does not display equally in all browsers. IE and Opera will display
the image-marker a little bit higher than Firefox, Chrome, and Safari.
If you want the image-marker to be placed equally in all browsers, a cross browser
solution is explained below.
Cross browser Solution
The following example displays the image-marker equally in all browsers:
Example
ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
ul li
{
background-image: url(sqpurple.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
Page 44 of 73
padding-left: 14px;
}
Example explained:
For ul:
Set the list-style-type to none to remove the list item marker
Set both padding and margin to 0px (for cross-browser compatibility)
For all li in ul:
o Set the URL of the image, and show it only once (no-repeat)
o Position the image where you want it (left 0px and down 5px)
o Position the text in the list with padding-left
o
o
List - Shorthand property
It is also possible to specify all the list properties in one, single property. This is called a
shorthand property.
The shorthand property used for lists, is the list-style property:
Example
ul
{
list-style: square url("sqpurple.gif");
}
When using the shorthand property, the orders of the values are:
list-style-type
list-style-position (for a description, see the CSS properties table below)
list-style-image
It does not matter if one of the values above are missing, as long as the rest are in the
specified order.
Page 45 of 73
TABLES
The look of an HTML table can be greatly improved with CSS:
Table Borders
To specify table borders in CSS, use the border property.
The example below specifies a black border for table, th, and td elements:
Example
table, th, td
{
border: 1px solid black;
}
Notice that the table in the example above has double borders. This is because both the
table and the th/td elements have separate borders.
To display a single border for the table, use the border-collapse property.
Collapse Borders
The border-collapse property sets whether the table borders are collapsed into a single
border or separated:
Page 46 of 73
Example
table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
}
Table Width and Height
Width and height of a table is defined by the width and height properties.
The example below sets the width of the table to 100%, and the height of the th
elements to 50px:
Example
table
{
width:100%;
}
th
{
height:50px;
}
Page 47 of 73
Table Text Alignment
The text in a table is aligned with the text-align and vertical-align properties.
The text-align property sets the horizontal alignment, like left, right, or center:
Example
td
{
text-align:right;
}
The vertical-align property sets the vertical alignment, like top, bottom, or middle:
Example
td
{
height:50px;
vertical-align:bottom;
}
Table Padding
To control the space between the border and content in a table, use the padding
property on td and th elements:
Example
td
{
Page 48 of 73
padding:15px;
}
Table Color
The example below specifies the color of the borders, and the text and background
color of th elements:
Example
table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}
Page 49 of 73
BOX MODEL
Border Properties
The CSS border properties allow you to specify the style and color of an element's border.
Border Style
The border-style property specifies what kind of border to display.
border-style values:
none: Defines no border
dotted: Defines a dotted border
dashed: Defines a dashed border
solid: Defines a solid border
double: Defines two borders. The width of the two borders are the same as the borderwidth value
groove: Defines a 3D grooved border. The effect depends on the border-color value
ridge: Defines a 3D ridged border. The effect depends on the border-color value
inset: Defines a 3D inset border. The effect depends on the border-color value
outset: Defines a 3D outset border. The effect depends on the border-color value
Page 50 of 73
Border Width
The border-width property is used to set the width of the border.
The width is set in pixels, or by using one of the three pre-defined values: thin, medium,
or thick.
Note: The "border-width" property does not work if it is used alone. Use the "borderstyle" property to set the borders first.
Example
p.one
{
border-style:solid;
border-width:5px;
}
p.two
{
border-style:solid;
border-width:medium;
}
Border Color
The border-color property is used to set the color of the border. The color can be set by:
name - specify a color name, like "red"
RGB - specify a RGB value, like "rgb(255,0,0)"
Hex - specify a hex value, like "#ff0000"
You can also set the border color to "transparent".
Page 51 of 73
Note: The "border-color" property does not work if it is used alone. Use the "borderstyle" property to set the borders first.
Example
p.one
{
border-style:solid;
border-color:red;
}
p.two
{
border-style:solid;
border-color:#98bf21;
}
Border - Individual sides
In CSS it is possible to specify different borders for different sides:
Example
p
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}
Page 52 of 73
The example above can also be set with a single property:
Example
border-style: dotted solid;
The border-style property can have from one to four values.
border-style:dotted solid double dashed;
o top border is dotted
o right border is solid
o bottom border is double
o left border is dashed
border-style:dotted solid double;
o top border is dotted
o right and left borders are solid
o bottom border is double
border-style:dotted solid;
o top and bottom borders are dotted
o right and left borders are solid
border-style:dotted;
o all four borders are dotted
The border-style property is used in the example above. However, it also works with
border-width and border-color.
Page 53 of 73
All CSS list properties
Property
Description
list-style
list-style-image
list-style-position
Sets all the properties for a list in one declaration
Specifies an image as the list-item marker
Specifies if the list-item markers should appear inside or
outside the content flow
Specifies the type of list-item marker
list-style-type
Page 54 of 73
PHP
Introduction
* Before you continue you should have a basic understanding of the following:
HTML
CSS
What is PHP?
PHP stands for PHP: Hypertext Preprocessor, it is a widely-used, open source scripting
language that means it is free to download and use. Its scripts are executed on the
server
What is a PHP File?
PHP files can contain text, HTML, JavaScript code, and PHP code. This are executed
on the server, and the result is returned to the browser as plain HTML. The files carries
the default file extension of ".php"
What Can PHP Do?
PHP also offers many advanced features for professional programmers.
It can generate dynamic page content
PHP can create, open, read, write, and close files on the server
PHP can collect form data
PHP can send and receive cookies
PHP can add, delete, modify data in your database
PHP can restrict users to access some pages on your website
PHP can encrypt data
Page 55 of 73
With PHP you are not limited to output HTML. You can output images, PDF files, and
even Flash movies. You can also output any text, such as XHTML and XML.
Why PHP?
PHP runs on different platforms (Windows, Linux, Unix, Mac OS X, etc.)
PHP is compatible with almost all servers used today (Apache, IIS, etc.)
PHP has support for a wide range of databases
PHP is easy to learn and runs efficiently on the server side
Installing PHP
What Do I Need?
To start using PHP, you can:
Find a web host with PHP and MySQL support
Install a web server on your own PC, and then install PHP and MySQL
Use a Web Host with PHP Support
If your server has activated support for PHP you do not need to do anything. Just create
some .php files, place them in your web directory, and the server will automatically
parse them for you. You do not need to compile anything or install any extra tools.
Because PHP is free, most web hosts offer PHP support.
Set Up PHP on Your Own PC
However, if your server does not support PHP, you must:
install a web server
install PHP
install a database, such as MySQL
Page 56 of 73
The PHP script is executed on the server, and the plain HTML result is sent back to the
browser.
Basic PHP Syntax
A PHP script can be placed anywhere in the document and it starts with <?php and
ends with ?>:
Example
<?php
// PHP code goes here
?>
The default file extension for PHP files is ".php".
Below, we have an example of a simple PHP file, with a PHP script that sends the text
"Hello World!" back to the browser:
Example
<!DOCTYPE html>
<html>
<body>
<h1>My first PHP page</h1>
<?php
echo "Hello World!";
?>
Page 57 of 73
</body>
</html>
Each code line in PHP must end with a semicolon. The semicolon is a separator and is
used to distinguish one set of instructions from another.
With PHP, there are two basic statements to output text in the browser: echo and print.
Comments in PHP
Example
<!DOCTYPE html>
<html>
<body>
<?php
//This is a PHP comment line
/*
This is
a PHP comment
block
*/
?>
</body>
</html>
Page 58 of 73
VARIABLES
In programming Variables are "containers" for storing information:
Example
<?php
$x=5;
$y=6;
$z=$x+$y;
echo $z;
?>
Much like Algebra
x=5
y=6
z=x+y
In algebra we use letters (like x) to hold values (like 5).
From the expression z=x+y above, we can calculate the value of z to be 11.
In PHP these letters are called variables.
PHP Variables
As with algebra, PHP variables can be used to hold values (x=5) or expressions
(z=x+y).
Page 59 of 73
Variable can have short names (like x and y) or more descriptive names (age, carname,
totalvolume).
Rules for PHP variables:
A variable starts with the $ sign, followed by the name of the variable
A variable name must begin with a letter or the underscore character
A variable name can only contain alpha-numeric characters and underscores (Az, 0-9, and _ )
A variable name should not contain spaces
Variable names are case sensitive ($y and $Y are two different variables)
Creating (Declaring) PHP Variables
PHP has no command for declaring a variable.
A variable is created the moment you first assign a value to it:
$txt="Hello world!";
$x=5;
After the execution of the statements above, the variable txt will hold the value Hello
world!, and the variable xwill hold the value 5.
Note: When you assign a text value to a variable, put quotes around the value.
PHP is a Loosely Typed Language
In the example above, notice that we did not have to tell PHP which data type the
variable is.
PHP automatically converts the variable to the correct data type, depending on its
value.
In a strongly typed programming language, we will have to declare (define) the type and
name of the variable before using it.
Page 60 of 73
PHP Variable Scopes
The scope of a variable is the part of the script where the variable can be
referenced/used.
PHP has four different variable scopes:
local
global
static
parameter
Local Scope
A variable declared within a PHP function is local and can only be accessed within that
function:
Example
<?php
$x=5; // global scope
function myTest()
{
echo $x; // local scope
}
myTest();
?>
Page 61 of 73
The script above will not produce any output because the echo statement refers to the
local scope variable $x, which has not been assigned a value within this scope.
You can have local variables with the same name in different functions, because local
variables are only recognized by the function in which they are declared.
Local variables are deleted as soon as the function is completed.
Global Scope
A variable that is defined outside of any function has a global scope.
Global variables can be accessed from any part of the script, EXCEPT from within a
function.
To access a global variable from within a function, use the global keyword:
Example
<?php
$x=5; // global scope
$y=10; // global scope
function myTest()
{
global $x,$y;
$y=$x+$y;
}
myTest();
echo $y; // outputs 15
?>
Page 62 of 73
PHP also stores all global variables in an array called $GLOBALS[index].
The index holds the name of the variable. This array is also accessible from within
functions and can be used to update global variables directly.
The example above can be rewritten like this:
Example
<?php
$x=5;
$y=10;
function myTest()
{
$GLOBALS['y']=$GLOBALS['x']+$GLOBALS['y'];
}
myTest();
echo $y;
?>
Static Scope
When a function is completed, all of its variables are normally deleted. However,
sometimes you want a local variable to not be deleted.
To do this, use the static keyword when you first declare the variable:
Page 63 of 73
Example
<?php
function myTest()
{
static $x=0;
echo $x;
$x++;
}
myTest();
myTest();
myTest();
?>
Then, each time the function is called, that variable will still have the information it
contained from the last time the function was called.
Note: The variable is still local to the function.
Parameter Scope
A parameter is a local variable whose value is passed to the function by the calling
code.
Parameters are declared in a parameter list as part of the function declaration:
Page 64 of 73
Example
<?php
function myTest($x)
{
echo $x;
}
myTest(5);
?>
Parameters are also called arguments.
String Variables in PHP
String variables are used for values that contain characters.
After we have created a string variable we can manipulate it. A string can be used
directly in a function or it can be stored in a variable.
In the example below, we create a string variable called txt, then we assign the text
"Hello world!" to it. Then we write the value of the txt variable to the output:
Example
<?php
$txt="Hello world!";
echo $txt;
?>
Page 65 of 73
Now, let’s look at some commonly used functions and operators to manipulate strings.
The PHP Concatenation Operator
There is only one string operator in PHP.
The concatenation operator (.) is used to join two string values together.
The example below shows how to concatenate two string variables together:
Example
<?php
$txt1="Hello world!";
$txt2="What a nice day!";
echo $txt1 . " " . $txt2;
?>
The output of the code above will be: Hello world! What a nice day!
The PHP strlen() function
Sometimes it is useful to know the length of a string value.
The strlen() function returns the length of a string, in characters.
The example below returns the length of the string "Hello world!":
Example
<?php
echo strlen("Hello world!");
?>
Page 66 of 73
The output of the code above will be: 12
The PHP strpos() function
The strpos() function is used to search for a character or a specific text within a string.
If a match is found, it will return the character position of the first match. If no match is
found, it will return FALSE.
The example below searches for the text "world" in the string "Hello world!":
Example
<?php
echo strpos("Hello world!","world");
?>
The output of the code above will be: 6.
Page 67 of 73
PHP OPERATORS
The assignment operator = is used to assign values to variables in PHP.
The arithmetic operator + is used to add values together in PHP.
PHP Arithmetic Operators
Operator
Name
Description
Example
Result
x+y
x-y
x*y
x/y
Addition
Subtraction
Multiplication
Division
Sum of x and y
Difference of x and y
Product of x and y
Quotient of x and y
2+2
5-2
5*2
15 / 5
4
3
10
3
PHP Assignment Operators
The basic assignment operator in PHP is "=". It means that the left operand gets set to
the value of the expression on the right. That is, the value of "$x = 5" is 5.
Assignment Same as...
Description
x=y
x=y
x += y
x -= y
x *= y
x /= y
x %= y
a .= b
x=x+y
x=x-y
x=x*y
x=x/y
x=x%y
a=a.b
The left operand gets set to the value of the
expression on the right
Addition
Subtraction
Multiplication
Division
Modulus
Concatenate two strings
Page 68 of 73
PHP Incrementing/Decrementing Operators
Operator
Name
Description
++ x
x ++
-- x
x --
Pre-increment
Post-increment
Pre-decrement
Post-decrement
Increments x by one, then returns x
Returns x, then increments x by one
Decrements x by one, then returns x
Returns x, then decrements x by one
PHP Comparison Operators
Comparison operators allows you to compare two values:
Operator
Name
Description
Example
x == y
x === y
Equal
Identical
x != y
x <> y
x !== y
Not equal
Not equal
Not identical
5==8 returns false
5==="5" returns
false
5!=8 returns true
5<>8 returns true
5!=="5" returns true
x>y
x<y
x >= y
Greater than
Less than
Greater than or
equal to
Less than or
equal to
True if x is equal to y
True if x is equal to y, and
they are of same type
True if x is not equal to y
True if x is not equal to y
True if x is not equal to y,
or they are not of same
type
True if x is greater than y
True if x is less than y
True if x is greater than or
equal to y
True if x is less than or
equal to y
x <= y
5>8 returns false
5<8 returns true
5>=8 returns false
5<=8 returns true
Page 69 of 73
PHP Logical Operators
Operator
Name
Description
Example
x and y
And
True if both x and y are
true
x or y
Or
True if either or both x and
y are true
x xor y
Xor
True if either x or y is true,
but not both
x && y
And
True if both x and y are
true
x || y
Or
True if either or both x and
y are true
!x
Not
True if x is not true
x=6
y=3
(x < 10 and y > 1) returns true
x=6
y=3
(x==6 or y==5) returns true
x=6
y=3
(x==6 xor y==3) returns false
x=6
y=3
(x < 10 && y > 1) returns true
x=6
y=3
(x==5 || y==5) returns false
x=6
y=3
!(x==y) returns true
PHP Array Operators
Operator
Name
Description
x+y
x == y
Union
Equality
x === y
Identity
x != y
x <> y
Inequality
Inequality
Union of x and y
True if x and y have the same key/value
pairs
True if x and y have the same key/value
pairs in the same order and are of the
same type
True if x is not equal to y
True if x is not equal to y
Page 70 of 73
x !== y
Non-identity
True if x is not identical to y
PHP Form Handling
The most important thing to notice when dealing with HTML forms and PHP is that any
form element in an HTML page will automatically be available to your PHP scripts
Example
The example below contains an HTML form with two input fields and a submit button:
<html>
<body>
<form action="welcome.php" method="post">
Name: <input type="text" name="fname">
Age: <input type="text" name="age">
<input type="submit">
</form>
</body>
</html>
When a user fills out the form above and clicks on the submit button, the form data is
sent to a PHP file, called "welcome.php":
"welcome.php" looks like this:
<html>
<body>
Page 71 of 73
Welcome <?php echo $_POST["fname"]; ?>!<br>
You are <?php echo $_POST["age"]; ?> years old.
</body>
</html>
Output could be something like this:
Welcome John!
You are 28 years old.
The PHP $_GET and $_POST variables will be explained in the next chapters.
Form Validation
User input should be validated on the browser whenever possible (by client scripts).
Browser validation is faster and reduces the server load.
You should consider server validation if the user input will be inserted into a database. A
good way to validate a form on the server is to post the form to itself, instead of jumping
to a different page. The user will then get the error messages on the same page as the
form. This makes it easier to discover the error.
The $_GET Variable
The predefined $_GET variable is used to collect values in a form with method="get"
Information sent from a form with the GET method is visible to everyone (it will be
displayed in the browser's address bar) and has limits on the amount of information to
send.
Page 72 of 73
Example
<form action="welcome.php" method="get">
Name: <input type="text" name="fname">
Age: <input type="text" name="age">
<input type="submit">
</form>
When the user clicks the "Submit" button, the URL sent to the server could look
something like this:
http://www.w3schools.com/welcome.php?fname=Peter&age=37
The "welcome.php" file can now use the $_GET variable to collect form data (the names
of the form fields will automatically be the keys in the $_GET array):
Welcome <?php echo $_GET["fname"]; ?>.<br>
You are <?php echo $_GET["age"]; ?> years old!
When to use method="get"?
When using method="get" in HTML forms, all variable names and values are displayed
in the URL.
Note: This method should not be used when sending passwords or other sensitive
information!
However, because the variables are displayed in the URL, it is possible to bookmark the
page. This can be useful in some cases.
Page 73 of 73
