Loading presentation...

Present Remotely

Send the link below via email or IM


Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.



Web Programming

Philip Heimer

on 30 March 2015

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of HTML - CSS

1. Internet och webbens grunder
2. Webbsidor - struktur/layout -(Element).
3. Hyperlänkar
4. Webbdesign
5. CSS
6. Grafik på webben
9. Tabeller
10. Formulär
11. Media och interaktivitet
7. Mer CSS
8. Sidlayout
12. Publicera på webben
1993 - Mosaic, first graphical browser
1994 - Netscape (Became free in 1998)
1995 - Internet Explorer
2004 - Firefox
Browser Mania
Internet Explorer
User Statistics 2012
2012 Internet Explorer Firefox Chrome Safari Opera
December 14.7 % 31.1 % 46.9 % 4.2 % 2.1 %
Operating Systems
2012 Win8 Win7 Vista NT* WinXP Linux Mac Mobile
December 2,5% 55.6% 2.8% 1.8% 21.1% 4.7% 8.7% 2.2%
Source: W3Schools
Discontinued 2007 : Netscape's 4.x series of browsers had a poor support for CSS and no support for XML.
Google Chrome Comic
2008 - Google Chrome
1997 - Philip Heimer on the web...
Upphovsrätt och etik på webben
"Allt material - texter, bilder, grafik och teckningar - som publiceras på en webbplats är skyddat av lagen om upphovsrätt. Mångfaldigande, kopiering, överlåtelse, försäljning, överföring eller varje annan form av utnyttjande av materialet är förbjudet enligt lagen. Bryter du mot detta kan det leda till skadestånd och om det gjorts "uppsåtligen" eller "av grov oaktsamhet" döms du dessutom till böter eller riskerar fängelse i två år. "
Testa: Google bildsök
Client - Server architecture
Connected to the Internet when needed
Runs a browser
Requests web pages from a web server
Receives web pages and associated files from the web server
Continually connected to the Internet
Runs web server software such as Apache or Microsoft Internet Information Server
Receives a request for the web page
Responds to the request and transmits the status code, web page and the associated files
The type of file needs to be indicated.. called MIME (Multi-Purpose Internet Mail Extensions).
Could be of seven different types;

audio, video, image, application, message, multipart (multi text) and text
Internet Protocols
SMTP - Simple Mail Transfer Protocol
POP Post Office Protocol

HTTP - Hypertext Transfer Protocol

FTP - File Transfer Protocol

TCP - Transmission Control Protocol
Möjliggör kontroll av överförda packet
UDP - User Datagram Packet
Utan kontroll

IP - Internet Protocol
Möjliggör addressering med IPv4 alt. IPv6

TCP/IP - Krävs för kommunikation över Internet
Exempel på olika lager och respektive protokoll
Opte Project - "Map of the Internet"
Public DNS servers:
Top Level Domain (TLD) Names list:
"Den som själv vill göra en webbsida står själv för innehåll och egna uttalanden och kan också ställa till svars om innehållet bryter mot lagen."
HyperText Markup Language -
Markup code refered to as "element" or "tag": <img> <ul> <br> <p> etc.
eXtensible HyperText Markup Language - a more rigorous syntax, HTML4 + XML (eXtensible Markup Language - used to separate html and data).

Purpose of XHTML was to provide a foundation for device-independent web access.
- the newest version of HTML
The book presents both XHTML and HTML5.
New elements: http://www.w3schools.com/html/html5_new_elements.asp
En första webbsida
<!DOCTYPE html>
<html lang="en">
<title>Title of the document</title>
<meta charset="utf-8">

My first HTML5 webpage.

DTD - Document Type Definition måste deklareras
Exempel: http://www.w3schools.com/tags/tag_doctype.asp
Unicode är en industristandard som låter datorer hantera text skriven i världens alla skriftsystem.

Unicode består av en repertoar med mer än 100 000 skrivtecken.
Spara sidan; ex: "index.html"
Öppna sidan i din webbrowser.
Heading Element
Paragraph Element
Line Break and Horizontal Rule
Blockquote Element
Phrase Element
Unordered List
Ordered List
Description List
Special Entity Characters
Div Element
HTML Syntax Validation
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
<hr> horisontal rule
<br> line break
…text goes here…
To cause text to "stand out" from surrounding text. Usually
<strong>This is important</strong>
To cause text to be emphasized in relation to other text on
the page. Usually italics.
<em>Please note</em>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
Display a list of terms and descriptions
Display a list of FAQ and answers
The Description List element
<dl> tag
Contains the definition list
The dtElement
<dt> tag
Contains a term or name
Configures a line break above and below the text
The dd Element
<dd> tag
Contains a definition or description
Indents the text
Special Entities
Configure a specially formatted division or area of a web page
There is a line break before and after the division.
Can contain other block display and inline display elements
Check your code for syntax errors
Benefit: Valid code - more consistent browser display

W3C XHTML Validation Tool
› http://validator.w3.org
Additional HTML5 Validation Tool
› http://html5.validator.nu
Phrase Elements
Unordered Lists
Ordered Lists
Description List
Division Tag
The anchor element
Inline-level element
Specifies a hyperlink reference (href) to a file
Text between the <a> and </a> is displayed on the web
<a href="contact.html">Contact Us</a>
href Attribute
Indicates the file name or URL
Web page document, photo, pdf, etc.
Absolute link
Link to other websites
<a href="http://yahoo.com">Yahoo</a>

Relative link
Link to pages on your own site
Relative to the current page
<a href="index.html">Home</a>
The target attribute on the anchor element
opens a link in a new browser window or new
browser tab.

<a href="http://yahoo.com" target="_blank">Yahoo!</a>
Automatically launch the default mail program configured for the browser
If no browser default is configured, a message is displayed

<a href="mailto:me@hotmail.com">me@hotmail.com</a>
A link to a part of a web page
Also called named fragments, fragment ids
Two components:

1. The element that identifies the named fragment of
a Web page. This requires the id attribute.
<div id="top"> ….. </div>

2. The anchor tag that links to the named fragment of
a Web page. This uses the href attribute.
<a href="#top">Back to Top</a>
Target Audience
Website Organization
Principles of Visual Design
Use of Text
Use of
Use of Graphics and Multimedia
Navigation Design
Page Layout Design
More Design Conciderations
Web Design Best Practices Checklist
Browser Friendly?
Screen Resolution?
"Web organization"
Repeat Visual Elements
Group Related Items
Align Elements to Create Visual Unity
Add Visual Excitement and Draw Attention
Navigation bars
Aligning elements vertically and horizontally
Can be done using description lists
Four design principles
Design to Provide for Accessibility
"Web Content Accessibility Guidelines (WCAG) 2.0 defines how to make Web content more accessible to people with disabilities. Accessibility involves a wide range of disabilities, including

learning and neurological disabilities.

Although these guidelines cover a wide range of issues, they are not able to address the needs of people with all types, degrees, and combinations of disability. These guidelines also make Web content more usable by older individuals with changing abilities due to aging and often improve usability for users in general. "
Fonts - Serif or Sans Serif
Color and Contrast
Line Length
Text in Hyperlinks
Spelling and Grammar




#00 00 00
Hexadecimal Values: 1-9 A-F
Web Safe Colors... (because every monitor does not support all colors)
/* RGB model */
p { color: #F00 } /* #rgb */
p { color: #FF0000 } /* #rrggbb */
p { color: rgb(255, 0, 0) } /* integer range 0 - 255 */
p { color: rgb(100%, 0%, 0%) } /* float range 0.0% - 100.0% */

/* RGB with alpha channel, added to CSS3 */
p { color: rgba(255, 0, 0, 0.5) } /* 0.5 opacity, semi-transparent */

/* HSL model, added to CSS3 */
p { color: hsl(0, 100%, 50%) } /* red */
p { color: hsl(120, 100%, 50%) } /* green */
p { color: hsl(120, 100%, 25%) } /* dark green */
p { color: hsl(120, 100%, 75%) } /* light green */
p { color: hsl(120, 50%, 50%) } /* pastel green */

/* HSL model with alpha channel */
p { color: hsla(120, 100%, 50%, 1) } /* green */
p { color: hsla(120, 100%, 50%, 0.5) } /* semi-transparent green */
p { color: hsla(120, 100%, 50%, 0.1) } /* very transparent green */
CSS3/HSL model (hue, saturation, and lightness).
Try out: http://colorschemedesigner.com/
Appealing to...
File Size and Dimensions
Antialiased/Aliased Text Considerations
Use Only Necessary Multimedia
Provide Alternate Text
Kantutjämning till höger - anti aliasing
alt="information" Om vi inte ser bilden.. alternativt när vi använder en skärmavläsare.
Ease of Navigation - labeled navigation on each page/same location...
Navigation Bars - text or graphic
Breadcrumb Navigation - ( Home -> Food -> Pizza )
Dynamic Navigation ( Menus appear )
Site Map
Site Search Feature
MC+A Google Search Appliance/Google C# APIs
"Mockingbird is an online tool that makes it easy for you to create, link together, preview, and share mockups of your website or application."
Page Layout Design Techniques
Ice Design

Jello Design

Liquid Design
Ice Design - Makes the page hug the left margin and controls the formatting of the entire page.

Jello Design - Centers page content with margins on both sides and has a fixed width. The jello design is better in higher resolutions than the Ice design.

Liquid Design - A fluid web page design that takes up 100% of the page. This design will fill the whole page regardless of resolution or browser type with no margins.
Load Time
Perceived Load Time
Above the Fold
Adequate White Space
Horizontal Scrolling
Top Website Design Trends for 2012
Solutions may be dynamic page loading or "break" pages into many (typically using AJAX).
Placing interesting information visible (before you need to scroll down..)
Makes images "stand out", increased readability, looks appealing to the audience.
Avoid this...
Cascading Style Sheets Overview
CSS Selectors and Declarations
CSS Syntax for Color Values
Inline CSS with the Style Attribute
Configure Embedded CSS
Configure External CSS
CSS Class, Id and Contextual Selectors
CSS Troubleshooting and Syntax Validation
Span Elements
Advantages of Cascading Style Sheets:
Typography and page layout can be better controlled
Style is separate from structure
Styles can be stored
Documents are potentially smaller
Site maintenance is easier
Methods of Configuring Cascading Style Sheets
Inline Styles - coded in the body.

Embedded Styles - defined in the head section (applies to the entire page.)

External Styles are coded in a separate text file (external style sheet.)

Imported Styles - coded in a separate text file. Can be imported into embedded styles or into another external style sheets using the @import directive.
The "Cascade"
Style sheets are composed of "Rules" that describe the styling to be applied.
Each rule contains a Selector and a Declaration
Configure a web page to display blue text and yellow background.
body { color: blue; background-color: yellow; }

This could also be written using hexadecimal color values as shown below.
body { color: #0000FF; background-color: #FFFF00; }
Inline CSS with the Style Attribute
<h1 style="color:#FF0000;background-color:#cccccc">This is displayed as a red heading with gray background</h1>
CSS style rules are contained in a text file separate from the XHTML documents.

The External Style Sheet text file:
extension ".css"
contains only style rules
does not contain any HTML tags
<link rel="stylesheet" href="site.css">
The <link> element
A self-contained tag
Placed in the header section
Purpose: associates the external style sheet file with the web page.

body { background-color: #E6E6FA; color: #192970; }
h1 { background-color: #191970; color: #E6E6FA; }

<style type="text/css">
body { background-color: #E6E6FA;
color: #191970;}
h1 { background-color: #191970;
color: #E6E6FA;}
h2 { background-color: #AEAED4;
color: #191970;}
CSS Selectors
Common Types of Selectors:

HTML element name selector
class selector
id selector
contextual selector
Class Selector
Apply a CSS rule to ONE OR MORE elements on a web page
Does not associate the style to a particular HTML element
Configure with .classname
The sample creates a class called “new” with red italic text.
To use the class, code the following XHTML:
<style type="text/css">
.new { color: #FF0000;
font-style: italic;
<p class=“new”>This is text is red and in italics</p>
Apply a CSS rule to ONLY ONE element on a web page.
Configure with #idname
Id Selector
<style type="text/css">
#new { color: #FF0000;
font-style: italic;
The sample creates an id called “new” with red, large, italic text.
To use the id, code the following XHTML:
<p id=“new”>This is text is red, large, and in italics</p>
Apply a CSSrule within the context ofthe container (parent) element.
Sometimes called adescendent selector.
Contextual Selector
ol ul { background-color: #FF0099; }
Any unordered list within an ordered list, this style will be applied to.
Div Element
A block-level element
Purpose: configure a specially formatted division or area of a web page
There is a line break before and after the division.
Can contain other block-level and inline elements

Useful to define an area that will contain other block-level tags (such as paragraphs or spans) within it.
.footer { font-size: small;
text-align: center; }
<div class=“footer">Copyright &copy; 2011</div>
An inline-level element
Configure a specially formatted area displayed in-line with other elements, such as within a paragraph.
There is no line break before and after the span.
.companyname { font-weight: bold;
font-family: Georgia, "Times New Roman", serif;
font-size: 1.25em; }
<p>Your needs are important to us at <span class=“companyname">Acme Web Design</span>.We will work with you to build your website.</p>
Verify you are using the : and ; symbols in the right spots—they are easy to confuse.

Check that you are not using = signs instead of : between each property and its value.

Verify that the { and } symbols are properly placed

Check the syntax of your selectors, their properties, and property values for correct usage.

If part of your CSS works, and another part doesn’t:
Review your CSS
Determine the first rule that is not applied. Often the error is in the rule above the rule that is not applied.

Validate your CSS at http://jigsaw.w3.org/css-validator
The process of creating an image with the lowest file size that still renders a good quality image— balancing image quality and file size.

Photographs taken with digital cameras are not usually optimized for the Web

Use a graphics application to:
Reduce image dimensions
Reduce size of the image file
Image Optimization
Web Graphics
Use all lowercase letters
Do not use punctuation symbols and spaces
Do not change the file extensions (should be .gif, .jpg, .jpeg, or .png)
Keep your file names short but descriptive
i1.gif is probably too short
myimagewithmydogonmybirthday.gif is too long
dogbday.gif may be just about right
Naming Images
Configures graphics on a web page

src Attribute
File name of the graphic
alt Attribute
Configures alternate text content (description)
height Attribute
Height of the graphic in pixels
width Attribute
Width of the graphic in pixels
<img src=“cake.gif” alt=“birthday cake” height=“100” width=“100”>
The Image Element
<img> Alignment
Image Links
<a href="index.html"><img src="home.gif" height="19" width="85" alt="Home"></a>
Browsers automatically add a border to image links.
Configure CSS to eliminate the border

img {border:0 }
CSS background-repeat property
h2 { background-color: #d5edb3;
color: #5c743d;
font-family: Georgia, "Times New Roman", serif;
padding-left: 30px;
background-image: url(trilliumbullet.gif);
background-repeat: no-repeat;
body { background-color: #f4ffe4;
color: #333333;
background-image: url(trilliumgradient.png);
background: url(trilliumfoot.gif)
no-repeat bottom right,
url(trilliumgradient.png); }
Multiple Background Images
Favorite Icon
<link rel="icon" href="favicon.ico" type="image/x-icon" />
Small icon that displays in the address bar or tab bar of some browsers.

Also called a favicon
Configure List Markers with CSS
CSS Properties

list-style position
ul {list-style-image: url(trillium.gif); }
Sometimes called “Web” Organization
Usually there is no clear path through the site
May be used with artistic or concept sites
Not typically used for commercial sites.
Be careful that the organization is not too deep.
This results in many “clicks” needed to drill down to the needed page.
User Interface “Three Click Rule”
A web page visitor should be able to get from any page on your site to any other page on your site with a maximum of three hyperlinks.
Be careful that the organization is not too shallow.
Too many choices a confusing and less usable web site
Information Chunking
“seven plus or minus two” principle
George A. Miller found that humans can store only five to nine chunks of information at a time in short-term memory
Many web designers try not to place more than nine major navigation links on a page or in a well-defined page area.
Plug-ins, Containers and Codecs
Configure Audio and Video
Flash and the HTML5 Embed Element
Forms and CSS
HTML5 Form Controls
HTML 5 Audio and Source Elements
HTML5 Video and Source Elements
Embed a YouTube Video
CSS3 Transform Property
Register a Domain Name
Choose a Web Host
Publish with File Transfer Protocol
Search Engine Submission
Search Engine Optimization
Accessibility Testing
Usability Testing
Forms Elements
Input Boxes
Radio buttons
Select (size 1)
Select (size 4)
<input type="reset" ...
<input type="submit" ...
Web page form
<legend>Form part title 1</legend>

<label>Email:<input type="text" name="email" id="email" required="required"></br></label>
Name:<input type="text" name="name" id="name" required="required"></br>
Password:<input type="password" name="pword" id="pword" required="required"></br>

<textarea name="message" id="messge" cols="40" rows="3" required="required">Enter comments</textarea></br>

<input type="checkbox" name="IE" id="IE" value="yes">Internet Explorer</br>
<input type="checkbox" name="Chrome" id="Chrome" value="yes">Google Chrome</br>
<input type="checkbox" name="Firefox" id="Firefox" value="yes">Mozilla Firefox</br>


Fieldset Element and Legend Element
Web page form
CSS Code
Adobe Flash Player - The Flash Player displays .swf format files
Adobe Shockwave Player - The Shockwave Player displays high-performance multimedia created using the Adobe Director application
Adobe Reader - pdf-files
Java Runtime Environment - To run applications and applets using Java technology.
RealPlayer - Streaming audio, video, animations and multimedia presentations
Apple QuickTime - displaying animation, music, audio and video
These plugins have been used on the Web many years to help display various content.
HTML5 video and audio is native to the browser so you won't need any plugin.
Be aware of the container (which is designated by the file extension) and the codec (which is the algorithm used to compress the media.
MP3 (.mp3)
MP3 is the name of the file extension and also the name of the type of file for MPEG, audio layer 3. Layer 3 is one of three coding schemes (layer 1, layer 2 and layer 3) for the compression of audio signals. Layer 3 uses perceptual audio coding and psychoacoustic compression to remove all superfluous information (more specifically, the redundant and irrelevant parts of a sound signal. The stuff the human ear doesn't hear anyway). It also adds a MDCT (Modified Discrete Cosine Transform) that implements a filter bank, increasing the frequency resolution 18 times higher than that of layer 2. The result in real terms is layer 3 shrinks the original sound data from a CD (with a bit rate of 1411.2 kilobits per one second of stereo music) by a factor of 12 (down to 112-128kbps) without sacrificing sound quality.

WMA - Windows Media Audio (.wma)
Short for Windows Media Audio, WMA is a Microsoft file format for encoding digital audio files similar to MP3 though can compress files at a higher rate than MP3. WMA files, which use the ".wma" file extension, can be of any size compressed to match many different connection speeds, or bandwidths.

WAV (.wav)
WAV is the format used for storing sound in files developed jointly by Microsoft and IBM. Support for WAV files was built into Windows 95 making it the de facto standard for sound on PCs. WAV sound files end with a .wav extension and can be played by nearly all Windows applications that support sound.

Real Audio (.ra .ram .rm)
Real Audio is a proprietary format, and is used for streaming audio that enables you to play digital audio files in real-time. To use this type of file you must have RealPlayer (for Windows or Mac), which you can download for free. Real Audio was developed by RealNetworks.

MIDI - Musical Instrument Digital Interface (.mid)
Short for musical instrument digital interface, MIDI is a standard adopted by the electronic music industry for controlling devices, such as synthesizers and sound cards, that emit music. At minimum, a MIDI representation of a sound includes values for the note's pitch, length, and volume. It can also include additional characteristics, such as attack and delay time.

Ogg (.ogg)
Ogg is an audio compression format, comparable to other formats used to store and play digital music, but differs in that it is free, open and unpatented. It uses Vorbis, a specific audio compression scheme that's designed to be contained in Ogg.
Common Audio File Types
HTML5 replacing the need...
Flash Video Format (.flv)
Because of the cross-platform availability of Flash video players, the Flash video format has become increasingly popular. Flash video is playable within Flash movies files, which are supported by practically every browser on every platform. Flash video is compact, using compression from On2, and supports both progressive and streaming downloads.

AVI Format (.avi)
The AVI format, which stands for audio video interleave, was developed by Microsoft.
It stores data that can be encoded in a number of different codec’s and can contain both audio and video data. The AVI format usually uses less compression than some similar formats and is a very popular format amongst internet users.

AVI files most commonly contain M-JPEG, or DivX codec’s, but can also contain almost any format.

The MPEG-4 video format uses separate compression for audio and video tracks; video is compressed with MPEG-4 video encoding; audio is compressed using AAC compression, the same type of audio compression used in .AAC files.
The mp4 can most commonly be played on the Apple QuickTime Player or other movie players. Devices that play p4 are also known as mp4 players.

Mpg Format (.mpg)
Common video format standardized by the Moving Picture Experts Group (MPEG); typically incorporates MPEG-1 or MPEG-2 audio and video compression; often used for creating downloadable movies. It can be played using Apple QuickTime Player or
Microsoft Windows Media Player.

Windows Media Video Format (.wmv)
WMV format, short for Windows Media Video was developed by Microsoft. It was originally designed for internet streaming applications, and can now cater to more specialized content. Windows Media is a common format on the Internet, but Windows Media movies cannot be played on non-Windows computer without an extra (free) component installed. Some later Windows Media movies cannot play at all on non-Windows computers because no player is available.
Videos stored in the Windows Media format have the extension .wmv.

3GP File Extension (.3gp)
The 3gp format is both an audio and video format that was designed as a multimedia format for transmitting audio and video files between 3G cell phones and the internet. It is most commonly used to capture video from your cell phone and place it online.

Flash Movie Format (.swf )
The Flash movie format was developed my Macromedia.

The RealVideo Format
The RealVideo format was developed for the Internet by Real Media. The format is used for streaming of video at low bandwidths. This sometimes causes the quality of the videos to be reduced.
Common Video File Types
The easiest way to give your website visitors access to an audio or a video file is to create a simple hyperlink to the file.

When a visitor clicks the link, the default program/plug-in will open the file and play it.
<a href="WDFpodcast.mp3">Podcast Episode 1</a>
Multimedia and Browser Compatibility Issues
-HTML5 solving the problem?
<embed type="application/x-shockwave-flash" src="lighthouse.swf" quality="high" width="480" height="320" title="Door County Lighthouse Cruise">
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.

Browser Support
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.

Browser Support
Element Attributes
Video Element Attributes
<iframe width="420" height="315" src="http://www.youtube.com/embed/XjUz8IT0CYg" frameborder="0" allowfullscreen></iframe>
Element Attributes
-ms-transform:rotate(7deg); /* IE 9 */
-moz-transform:rotate(7deg); /* Firefox */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
-o-transform:rotate(7deg); /* Opera */
Rotate a div element
a:hover { position: absolute; opacity: 0;
-webkit-transition: opacity 3s ease-in-out;}
Example 2
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari and Chrome */
-o-transition: width 2s; /* Opera */
Example 1
15 Stunning Examples of CSS Animation
HTML5 Canvas Element
"The HTML5s canvas element is the deciding factor for HTML5 to replace certain Flash animation. It allows you to build dynamic, scriptable rendering of 2D shapes and bitmap images with Javascript, which by other mean is, controllable animation."
48 potentail Flash-killing Demos
"The HTML5 <canvas> element is used to draw graphics, on the fly, via scripting (usually JavaScript).

The <canvas> element is only a container for graphics. You must use a script to actually draw the graphics.

Canvas has several methods for drawing paths, boxes, circles, characters, and adding images."
<!DOCTYPE html>
function drawMe() {
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
<body onload="drawMe()">

<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">


<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
Top-level Domain list:
Find out if your preferred name is registered...
What services do I need to run?
100 GB utrymme
2000 GB trafik
Både Windows och Linux
ASP.NET 2.0/3.5 & 4.0
PHP 5.2
Lastbalanserad webbsida
Lastbalanserad e-post
Lastbalanserad FTP/SSH
Anycast DNS
Dagliga backuper
Obegränsat antal FTP-konton
Obegränsat antal e-postkonton
45 dagars öppet köp
Inga bindningstider
Swedish Web Host...
International Web Host...
"File Transfer Protocol (FTP) is a standard network protocol used to transfer files from one host to another host over a TCP-based network, such as the Internet.

FTP is built on a client-server architecture and uses separate control and data connections between the client and the server."
Core FTP
March, 2013

Google: 82.91%
Yahoo!: 7.99%
Bing: 5.03%
Baidu: 1.99%
Ask: 0.40%
Other: 1.68%
"Web Robots (also known as Web Wanderers, Crawlers, or Spiders), are programs that traverse the Web automatically. Search engines such as Google use them to index the web content, spammers use them to scan for email addresses, and they have many other uses.
You can use a special HTML <META> tag to tell robots not to index the content of a page, and/or not scan it for links to follow.

For example:
Add your page to Google at,
Page Titles <Title>...
Heading Tags <h1>...
Description info...
The Meta Tag
Images and Multimedia
Valid Code
Content of Value
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="Ståle Refsnes">
<meta charset="UTF-8">
robots doesnt see embedded text..
Google Adwords
Google AdSense
"Web accessibility testing is a subset of usability testing where the users under consideration have disabilities that affect how they use the web. The end goal, in both usability and accessibility, is to discover how easily people can use a web site and feed that information back into improving future designs and implementations."
address the needs of people with all disabilities.

balance the needs of people with differing disabilities.

match those needs to optimal techniques.

use clear language to express needs or techniques.
Ease of learning - How easy is it to learn to use the website? Is the navigation intuitive? Does a new visitor consider it easy to learn to perform basics tasks on the website or is he or she frustrated?

Efficiency of Use - How do experienced users perceive the website - once they are comfortable, are they able to complete tasks efficiently and quickly or are they frustrated?

Memorability - When a visitor returns to a website, does he or she remember enough to use it productively or is the visitor back at the beginning of the learning curve (and frustrated)?

Error Frequency and Severity - Do website visitors make errors when navigating or filling in forms on the website? Are they serious errors? Is it easy to recover from errors or are visitors frustrated?

Subjective Satisfaction - Do users "like" using the website? Are they satisfied? Why or why not?
Usability is the measure of the quality of a users experience when interacting with a system.
Full transcript