ICONS Management
Ths. Heftyes gt. 45
0267 Oslo
Norway

+47 90179215
+47 22551071

Internet

Internet is a network of networks. Inter = between, net = networks. Internet has a long history: 1960/70. DARPA | ARPANET USA military and then universities. Internet has several different services:

Telnet (terminal emulating) - telnet
FTP File Transfer Protocol - ftp
SMTP Simple Mail Transfer Protocol (e-mail) - mail to
NNTP Network News Transfer Protocol (news groups) - news
HTTP Hypertext Transfer Protocol (WWW) - http
...

WWW: World Wide Web

TCP/IP communication protocol used in external and internal networks
IP: Internet Protocol
TCP: Transport Control Protocol - connects machines
DNS: Domain Name System - translates names (text) and address (numbers).
Computers prefer numbers and people prefer names. A domain name is hierarchical like the file structure on a computer

www.icons.no

www = host name
icons = sub-domain
no = top domain

Top domains - organizations

edu - education
com - commerce
mil - military
...

Top domains - land:

no = norway
dk = denmark
fi = finland
...

URI: Universal Resource Identifier - URL: Uniform Resource Locator

All resources on the Internet must have an address ("file name"), html documents, images, videos, programs. We are mostly familiar with URL: Uniform Resource Locator a web address, a place on the Internet: World Wide Web.

WWW was "invented" by Tim Berners-Lee, nuclear institute, CERN, October 1990. January 1993: about 50 known WWW-servers. February 1993: alpha version of Mosaic browser.

World Wide Web Consortium (W3C)

W3C http://www.w3.org/ is responsible for the development of HTML and other markup languages under the leadership of Tim Berners-Lee, MIT (Massachusetts Institute of Technology), Boston, USA.

Markup languages

SGML: Standard Generalized Markup Language
HTML: HyperText Markup Language
XML: eXtensible Markup Language
XHTML: eXtensible HyperText Markup Language

Content / design equation

In order to understand solid standard-based design, you need to understand the two halves of the content/presentation equation: (X)HTML (for content) and CSS (for presentation).

Our (X)HTML documents should include the page content, marked up in semantic elements - tags that actually describe the type of content contained within them. When our content has semantic meaning, the user agent (the browser in most cases) doesn't matter.

What are web standards?

Web standards are guidelines for best practices in building web sites. Building sites in this manner means following three principles:

Separate content and its presentation

If you create the essential structure of the document in the (X)HTML page, you can code the information once, and output to many different devices.

Use Cascading Style Sheets for the design
- The simple text document known as a CSS file gives the (X)HTML document its look with a few well-crafted rules.
Design for universal accessibility
- Not everyone on the web can access, or see, our pages in exactly the same way. The goal is to give everyone the same content, in a reasonably acceptable presentational style, without crashing the system. Assistive technologies (AT) will have access to all our content without the presentational markup getting in the way.

The (X)HTML document

Several concepts are essential to understanding proper, well formed (X)HTML documents:

The doctype
Character encoding
Document flow
Inline vs block elements

DTD: Document Type Definition

DTDs come in three flavours: strict, transitional and frameset. Use strict if you do not intend to use any old tags, use transitional if you want some slack and frameset if you are using frames (which you probably should not). Omitting the DTD will result in browsers rendering pages in quirks mode instead of standards mode. This means our carefully constructed CSS might not display as we expect.

Character encoding

This is the character encoding for a page, which is the system whereby each character we type is turned into computer bits. Character set charset=ISO-8859-1 for Western European languages is still in use but it limits the number of languages expressed and you have to use character entities for several special characters. Universal Character Encoding called Unicode. Dreamweaver defaults to a flavour of Unicode called UTF-8, which has backward compatibility with ASCII (American Standard Code for Information Interchange).

Document flow

Another important concept to understand is the natural document flow. The flow of the document is what you see if you remove all CSS control from a page. In the absence of any positioning techniques, page elements will flow one after the other in the order that they appear in the source code of the document.

Inline vs block elements

When you place text, images and other content in an (X)HTML page, each element flows one after the other in the natural order in which you insert it in the source code of you document. But another variable within the flow affects how elements behave: their status as block or inline element.

Block elements

Block elements are 100% as wide as their parent container and stack vertically on top of each other. They start on a new line in other words. Block elements occupy their own block of space. Block elements do not by default sit next to each other.

Inline elements

Inline elements flow horizontally and only require the amount of space they use (instead of the set width of the block elements).

XHTML document parts

DOCTYPE
head
body

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML-my first page</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<p>Here comes content for my very first web page.</p>
</body>
</html>

Web page building blocks

Elements
Attributes
Values
Comments
Entities

Elements

Elements are the main building blocks of web pages:

Example: <h1>First heading</h1>

Element name: h1
Element content: First heading
Start tag <h1>
Closing tag: </h1>
Elements come in pairs of start and end tags most of the time but a few elements are " empty". They must still be closed but in a special way with a space and a dash: <br />

Attributes

Most XHTML elements can take one or more attributes
Example: <a href="http://www.hio.no/">Link to HiO</a>
- Attributes are pairs of attribute name and value
- The value must be enclosed in quotes

Comments

Comments are written as a help for the developers and will not show up in the browser. It is good practice to comment you markup in order to make the code well organized and easier to understand.

Entities - special characters

Sooner or later you will want to use some characters you will not find on your keyboard or characters being part of the markup language. You can use ANSI character codes or html characters. Both codes start with & and end with ;

© copyright symbol: © or ©
® registered trademark: ® or ®
é small e with accent: é
< less than symbol: <
> greater than symbol: >
Non-breaking space:

Well-formed documents

Good coding practice: well-formed documents must follow a simple but strict XML (eXtensible Markup Language) syntax (rules):

Elements must be nested correctly
Markup must be lower case letters
All elements must be closed
Values must be enclosed in quotes

It is also good markup practice to comment your code:

Block element

An element can be block-level or inline. If it is block-level, it will always be displayed on a new line. Block-level elements are considered the bigger structural pieces of your web page. Block elements can contain other block elements, inline elements and text.

<h1>....</h1> headings 1 to 6
<p>.....</p> paragraph
<blockquote>...</blockquote> for longer citations
<hr /> horizontal rule
<pre>....</pre> preformatted text
<br /> line break
<div>....</div> breaking up a page in divisions

Lists (block elements / list elements)

<ul>

<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>

</ul>

Replace <ul> with <ol> and you get numbers instead of bullet points.

You make nested lists if you want several levels in your lists:

<ul>

<li>List item 1</li>
<li>List item 2</li>
<li>List item 3

<ul>

<li>Under list item 1</li>
<li>Under list item 2</li>

</ul>

</li>

<li>List item 4</li>

</ul>

Nested lists will look like this:

List item 1
List item 2
List item 3
1. Under list item 1
2. Under list item 2
List item 4

Inline elements

Inline elements can only contain other inline elements and text usually.

img (images)
a (links)
em (emphasize, usually italic)
strong (bold)
sup (above the line)
sub (under the line)
span (used as an "anchor" for css in the middle of a sentence for example)

Links

<a href=”http://www.icons.no”>ICONS Management</a>
<a href=”interests.htm”>To interests</a>
<a href=”http://www.microsoft.com”><img src=”mslogo.gif”></a>
<a href=”mailto:ebuntz@icons.no”>Send email!</a>

Anchors

Links are usually bringing us to a new page but some links are pointing to a specific place in a document. These links are called anchors, named anchors or bookmarks.

<a name="anchor_name"></a> This is where you jump to.
<a href="#anchor_name">Link to anchor name>/a> This is the link.

The most modern way of setting an anchor is to add an id attribute to any element you like: <h1 id="anchor_name">Important heading</h1>

Images

Use gif, jpg and png image files on the web. Use a graphics program to set the right resolution (72) and size etc for image files before placing on the web.

Next page for XHTML coding.

Validation

Use W3C's validation service and see if your pages have correct XHTML. copy and paste your markup in the Validate by Direct Input option or paste the URL to your page on the net. http://validator.w3.org/

Curriculum literature

Castro, E. (2007). HTML, XHTML & CSS: visual quickstart guide (6th ed.). Berkley: Peachpit Press (Visual quickstart guide). ISBN: 0-321-43084-0. 456 pages

More info

Course web in Norwegian (http://www.buntz.no) click HTML
Castro: http://www.elizabethcastro.com/html6ed/extras/
Castro: http://www.elizabethcastro.com/html6ed/examples/
W3Schools - courses: http://www.w3schools.com/ click XML etc
W3Schools - tag lists: http://www.w3schools.com/tags/default.asp
Curriculum library studies HiO (inks not always active) in Norwegian:
http://www.hio.no/content/view/full/48576
http://www.jbi.hio.no/bibin/KoG1vev/ressurser/designhjelp.html