introduction to website management - inasp - web viewfor this tutorial we will simplify the...

INTRODUCTION TO

WEBSITES AND WEBSITE MANAGEMENT

Facilitator’s Notes

Author: EM Njoroge

Date: July 2013

of 78

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

of 78

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

of 78

A domain name is a unique address used for identifying a computer such as a Web server on the Internet

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>

of 78

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.

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 YearHTML 1991HTML+ 1993HTML 2.0 1995HTML 3.2 1997HTML 4.01 1999XHTML 1.0 2000HTML-5 2012

of 78

XHTML-5 2013

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:

of 78

HTML Page Structure

Below is a visualization of an HTML page structure:

<html>

<body>

<h1>This a heading</h1>


<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">

of 78

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.

of 78

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>

of 78

HTML Images

HTML images are defined with the <img> tag.

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

of 78

Most HTML elements can have attributes

Nested HTML Elements

Most HTML elements can be nested (can contain other HTML elements).

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

of 78

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:

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 Descriptionclass Specifies one or more class names for an element (refers to a

class in a style sheet)id Specifies a unique id for an element

of 78

style 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.

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:

of 78

Example

<p>This is a paragraph.</p><hr><p>This is a paragraph.</p><hr><p>This is a paragraph.</p>

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



Note: There is an exclamation point after the opening bracket, but not before the closing bracket.

of 78

HTML TAG REFERENCE

W3Schools' tag reference contains additional information about these tags and their attributes.

Tag Description<html> Defines an HTML document<body> Defines the document's body<h1> to <h6> Defines HTML headings<hr> 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.

of 78

http://www.w3schools.com/tags/tag_comment.asp

http://www.w3schools.com/tags/tag_hr.asp

http://www.w3schools.com/tags/tag_hn.asp

http://www.w3schools.com/tags/tag_body.asp

http://www.w3schools.com/tags/tag_html.asp

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 Description

<b> Defines bold text<em> Defines emphasized text

<i> Defines a part of text in an alternate voice or mood<small> Defines smaller text<strong> Defines important text

<sub> Defines subscripted text<sup> Defines superscripted text<ins> Defines inserted text<del> Defines deleted text

Links

The HTML <a> tag defines a hyperlink.

of 78

http://www.w3schools.com/tags/tag_del.asp

http://www.w3schools.com/tags/tag_ins.asp

http://www.w3schools.com/tags/tag_sup.asp

http://www.w3schools.com/tags/tag_sub.asp

http://www.w3schools.com/tags/tag_strong.asp

http://www.w3schools.com/tags/tag_small.asp

http://www.w3schools.com/tags/tag_i.asp

http://www.w3schools.com/tags/tag_em.asp

http://www.w3schools.com/tags/tag_b.asp

A hyperlink (or link) is a word, group of words, or image that you can click on to jump to another document.

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:

of 78

Example

<a href="http://www.myfirstpage.com/" target="_blank">Visit my page!</a>

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.

of 78

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.

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>

of 78

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>

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}

of 78

</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.

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 Description

<head> Defines information about the document<title> Defines the title of a document

<base> Defines a default address or a default target for all links on a page

<link> Defines the relationship between a document and an external resource

<meta> Defines metadata about an HTML document<script> Defines a client-side script<style> Defines style information for a document

of 78

http://www.w3schools.com/tags/tag_style.asp

http://www.w3schools.com/tags/tag_script.asp

http://www.w3schools.com/tags/tag_meta.asp

http://www.w3schools.com/tags/tag_link.asp

http://www.w3schools.com/tags/tag_base.asp

http://www.w3schools.com/tags/tag_title.asp

http://www.w3schools.com/tags/tag_head.asp

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>


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

of 78

HTML / XHTML

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;

of 78

text-align:center;

}

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 "#".

of 78

The style rule below will be applied to the element with id="para1":

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;}

of 78

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");}

of 78

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>

of 78

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:

of 78

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

{

of 78

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;

}

of 78

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.

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;

}

of 78

All CSS Background Properties

Property Descriptionbackground Sets all the background properties in one declarationbackground-attachment Sets whether a background image is fixed or scrolls with

the rest of the pagebackground-color Sets the background color of an elementbackground-image Sets the background image for an elementbackground-position Sets the starting position of a background imagebackground-repeat Sets how a background image will be repeated

of 78

http://www.w3schools.com/cssref/pr_background-repeat.asp

http://www.w3schools.com/cssref/pr_background-position.asp

http://www.w3schools.com/cssref/pr_background-image.asp

http://www.w3schools.com/cssref/pr_background-color.asp

http://www.w3schools.com/cssref/pr_background-attachment.asp

http://www.w3schools.com/cssref/css3_pr_background.asp

TEXT

T h i s t e x t i s s t y l e d w i t h s o m e o f t h e t e x t f o r m a t t i n g p r o p e r t i e s . T h e h e a d i n g u s e s t h e t e x t - a l i g n , t e x t - t r a n s f o r m , a n d c o l o r p r o p e r t i e s . T h e p a r a g r a p h i s i n d e n t e d , a l i g n e d , a n d t h e s p a c e b e t w e e n c h a r a c t e r s i s s p e c i f i e d .

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).

of 78

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.

of 78

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 Descriptioncolor Sets the color of textdirection Specifies the text direction/writing directionletter-spacing Increases or decreases the space between characters in a

textline-height Sets the line heighttext-align Specifies the horizontal alignment of texttext-decoration Specifies the decoration added to texttext-indent Specifies the indentation of the first line in a text-blocktext-shadow Specifies the shadow effect added to texttext-transform Controls the capitalization of textunicode-bidivertical-align Sets the vertical alignment of an elementwhite-space Specifies how white-space inside an element is handledword-spacing Increases or decreases the space between words in a text

of 78

http://www.w3schools.com/cssref/pr_text_word-spacing.asp

http://www.w3schools.com/cssref/pr_text_white-space.asp

http://www.w3schools.com/cssref/pr_pos_vertical-align.asp

http://www.w3schools.com/cssref/pr_text_text-transform.asp

http://www.w3schools.com/cssref/pr_text_text-indent.asp

http://www.w3schools.com/cssref/pr_text_text-decoration.asp

http://www.w3schools.com/cssref/pr_text_text-align.asp

http://www.w3schools.com/cssref/pr_dim_line-height.asp

http://www.w3schools.com/cssref/pr_text_letter-spacing.asp

http://www.w3schools.com/cssref/pr_text_direction.asp

http://www.w3schools.com/cssref/pr_text_color.asp

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 DescriptionSerif Times New Roman

GeorgiaSerif fonts have small lines at the ends on some characters

Sans-serif ArialVerdana

"Sans" means without - these fonts do not have the lines at the ends of

of 78

charactersMonospace Courier New

Lucida ConsoleAll monospace characters have the same width

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)

of 78

Example

p.normal {font-style:normal;}

p.italic {font-style:italic;}

p.oblique {font-style:oblique;}

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:

of 78

Example

h1 {font-size:40px;}

h2 {font-size:30px;}

p {font-size:14px;}

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=emExample

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;}

of 78

h2 {font-size:1.875em;}

p {font-size:0.875em;}

of 78

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:

of 78

Text Decoration

The text-decoration property is mostly used to remove underlines from links: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;}

of 78

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:

of 78

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;

of 78

padding-left: 14px;

}

Example explained:

For ul:o Set the list-style-type to none to remove the list item markero 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

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

of 78

It does not matter if one of the values above are missing, as long as the rest are in the specified order.

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:

of 78

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;

}

of 78

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:

of 78

Example

td

{

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;

}

of 78

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 border-width 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

of 78

outset: Defines a 3D outset border. The effect depends on the border-color value

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 "border-style" 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:

of 78

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".

Note: The "border-color" property does not work if it is used alone. Use the "border-style" 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

{

of 78

border-top-style:dotted;

border-right-style:solid;

border-bottom-style:dotted;

border-left-style:solid;

}

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 dottedo right border is solido bottom border is doubleo left border is dashed

border-style:dotted solid double;o top border is dottedo right and left borders are solido bottom border is double

border-style:dotted solid;o top and bottom borders are dottedo right and left borders are solid

of 78

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.

All CSS list properties

Property Description

list-style Sets all the properties for a list in one declarationlist-style-image Specifies an image as the list-item markerlist-style-position Specifies if the list-item markers should appear inside or

outside the content flowlist-style-type Specifies the type of list-item marker

of 78

http://www.w3schools.com/cssref/pr_list-style-type.asp

http://www.w3schools.com/cssref/pr_list-style-position.asp

http://www.w3schools.com/cssref/pr_list-style-image.asp

http://www.w3schools.com/cssref/pr_list-style.asp

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

of 78

PHP can add, delete, modify data in your database PHP can restrict users to access some pages on your website PHP can encrypt data

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:

of 78

install a web server install PHP install a database, such as MySQL

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>

of 78

<?php

echo "Hello World!";

?>

</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

of 78

*/

?>

</body>

</html>

VARIABLES

In programming Variables are "containers" for storing information:

Example

<?php

$x=5;

$y=6;

$z=$x+$y;

echo $z;

?>

Much like Algebra

x=5y=6z=x+y

In algebra we use letters (like x) to hold values (like 5).

of 78

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).

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 (A-

z, 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.

of 78

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.

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:

of 78

Example

<?php

$x=5; // global scope

function myTest()

{

echo $x; // local scope

}

myTest();

?>

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:

of 78

Example

<?php

$x=5; // global scope

$y=10; // global scope

function myTest()

{

global $x,$y;

$y=$x+$y;

}

myTest();

echo $y; // outputs 15

?>

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;

of 78

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:

Example

<?php

function myTest()

{

static $x=0;

echo $x;

$x++;

}

of 78

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:

Example

<?php

function myTest($x)

{

echo $x;

}

myTest(5);

of 78

?>

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;

?>

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:

of 78

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!");

?>

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.

of 78

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.

of 78

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 Addition Sum of x and y 2 + 2 4x - y Subtraction Difference of x and y 5 - 2 3x * y Multiplication Product of x and y 5 * 2 10x / y Division Quotient of x and y 15 / 5 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 The left operand gets set to the value of the expression on the right

x += y x = x + y Additionx -= y x = x - y Subtractionx *= y x = x * y Multiplicationx /= y x = x / y Divisionx %= y x = x % y Modulusa .= b a = a . b Concatenate two strings

of 78

PHP Incrementing/Decrementing Operators

Operator Name Description

++ x Pre-increment Increments x by one, then returns xx ++ Post-increment Returns x, then increments x by one-- x Pre-decrement Decrements x by one, then returns xx -- Post-decrement Returns x, then decrements x by one

PHP Comparison Operators

Comparison operators allows you to compare two values:

Operator Name Description Example

x == y Equal True if x is equal to y 5==8 returns falsex === y Identical True if x is equal to y, and

they are of same type5==="5" returns false

x != y Not equal True if x is not equal to y 5!=8 returns truex <> y Not equal True if x is not equal to y 5<>8 returns truex !== y Not identical True if x is not equal to y,

or they are not of same type

5!=="5" returns true

x > y Greater than True if x is greater than y 5>8 returns falsex < y Less than True if x is less than y 5<8 returns truex >= y Greater than or

equal toTrue if x is greater than or equal to y

5>=8 returns false

x <= y Less than or equal to

True if x is less than or equal to y

5<=8 returns true

of 78

PHP Logical Operators

Operator Name Description Example

x and y And True if both x and y are true

x=6y=3 (x < 10 and y > 1) returns true

x or y Or True if either or both x and y are true

x=6y=3 (x==6 or y==5) returns true

x xor y Xor True if either x or y is true, but not both

x=6y=3 (x==6 xor y==3) returns false

x && y And True if both x and y are true

x=6y=3(x < 10 && y > 1) returns true

x || y Or True if either or both x and y are true

x=6y=3(x==5 || y==5) returns false

! x Not True if x is not true x=6y=3!(x==y) returns true

PHP Array Operators

Operator Name Description

x + y Union Union of x and yx == y Equality True if x and y have the same key/value

pairsx === y Identity True if x and y have the same key/value

pairs in the same order and are of the same type

of 78

x != y Inequality True if x is not equal to yx <> y Inequality True if x is not equal to yx !== 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:

of 78

<html>

<body>

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.

of 78

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.

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.

of 78

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.

of 78

introduction to website management - inasp - web viewfor this tutorial we will simplify the...

Documents