Web design for fun

Presented to the Rochester Computer Society 6/10/2003 By Michael Necheles EDS

Agenda

Brief overview of the Internet HTML Structure Development Tools HTML Tags How to publish Q & A

Brief Overview of the Internet

• Internet consists of network of networks • Connected by multiple media types • In 1989, Timothy Berner-Lee and other researches at CERN nuclear research facility laid foundation of WWW.

• Hypertext • No longer limited to text. Images, sound and video

Brief Overview of the Internet

• Web page stored on a web server • Web pages viewed by web browser.

• Browsers • Text based • Graphical • HTML – language of the www – Developed from SGML – Describes format of page by use of tags – Browser interprets tag.

HTML Structure

• Follows set of rules (Syntax) • Standards written by World Wide Web Consortium.

– HTML 1.0 1989-1994 – First public version of html – HTML 2.0 1995 – first version supported by all browsers – HTML 3.0 1997 – added support for tables and other options – HTML 4.01 1999 – support for style sheets and layout. Gave developers more style control – XHTML 1.0 2001 – reformulation of HTML 4.01 into XML

HTML Structure

• Extensions, XML and the future – Competition – Netscape and Internet Explorer introduce extensions. Later adopted by W3C – XML being introduced for document content.

Development Tools

• HTML files are TEXT documents.

• HTML converter – Takes document and converts to HTML – Save As feature in MS Word • HTML editor – Creates HTML by inserting tags for you.

– Examples Front Page, CoffeeCup, NoteTab

Creating HTML Documents

• HTML file made up of content and tags.

– Content is what the users see on the page – Tags are HTML codes that control the appearance of the document content • General HTML Syntax – Two sided tags • document content – One sided tag •

Format of an HTML document

1.

2.

3.

4.

5.

6.

7.

8.

9.

10.

11.

• 12.

Steps to create a simple document

Open notepad Type the following : This is the dawning of the age of Aquarius.

Click on file Click on Save As Make sure that “Save As Type” text box is “all file types” In the filename text box, give it a name with a .htm or .html extension (i.e. mywebpage.htm) Click on save (remember the name of the file and where you saved the file) Open up a web browser Click on File Click on Open Locate the file you just saved Click ok You are now looking at the page you created

Common HTML tags

•

Creating headings, paragraphs and lists

– –

Heading tags range from H1 to H6. The higher the number, the smaller the font size.

This is to introduce Balloon Art to the world

– –

tag is the paragraph tag. Insert this tag prior to where you want the paragraph to begin. It is a two sided tag. If you don’t want a paragraph, just a line break, use the
tag. This is a one sided tag.

Common HTML tags

There are three types of lists. Ordered lists, Unordered lists and definition list.

Ordered lists are ordered numerically. Unordered lists are bullets. Definition list is a list of terms, each followed by a definition line that is indented slightly to the right.

Ordered Lists:

1. item 1
2. item 2
3. item 3

Unordered lists can have options:

Unordered Lists:
• bullet 1
• bullet 2
• bullet 3
Both list types can be nested:

Common HTML tags

Example:

1. HTML Editors
   • Easy to use
   • Often has GUI
2. HTML Converters
   • produce larger than necessary files
   • are harder to edit manually
   • are simple to use
• • The above snippet will produce the following content HTML Editors – Easy to use – Often has GUI HTML Converters – – – produce larger than necessary files are harder to edit manually are simple to use

Common HTML tags

Definition List: Example:

INTERNET

a network of networks

WWW

world wide wait.

FTP

file transfer protocol. Used to transfer files on the internet

The above snippet produces the following content INTERNET a network of networks WWW World wide wait FTP file transfer protocol. Used to transfer files on the internet

Common HTML tags

Character formatting tags:

- enclosed text is bold - enclosed text is italic - enclosed text is underlined - typewriter text (monospaced) - bigger text - smaller text - subscript - superscript These tags are often used together.

Example:

The rain in Spain stays mainly on the plane.

Renders: The

rain

in Spain stays

mainly

on the

plane.

Common HTML tags

•

Horizontal Line

- used to break up a page by inserting a horizontal line. Single sided tag.

Syntax:

---

e.g

---

•

Inserting an image

. Single sided tag.

Syntax: note that “file” requires the path if image is not located in same directory as html file.

Common HTML tags

Links

• Two types of links, interpage and intrapage.

• Interpage link allows you to create hypertext links between web pages • Intrapage links allow you to create hypertext links between elements within a single web page. Examples of this are when are viewing a large web page and see links that say “return to top”. When you click on those links, the page automatically scrolls back to the top of the page.

Common HTML tags

• Intrapage links are made up of two parts, the link and the anchor.

• To create an anchor at the top of the page you would use something like the following example: Top • In the above snippet, we have created an anchor called topOfPage. The document text that will be displayed will be Top.

• At various points of the document, you will want to insert links pointing to the top of the page.

Return to top

Common HTML tags

• Interpage links consist of the anchor tag

”>click here to go to yahoo go to my second page Our History

Common HTML tags

• Tables – Tables consist of at least three tags •

surrounds each table • Surrounds each row • Surrounds each row Multipurpose – used for formatting layout as well as display.

Common HTML tags

Table Example:

cell 1	cell 2	cell 3
cell 4	cell 5	cell 6
cell 7	cell 8	cell 9

Creating HTML Documents

• Remember that different browsers display HTML differently. • Tags are not case sensitive • Browsers ignore whitespace

Creating HTML Web Site

• Step 1 – PLAN • Step 2 – PLAN • Step 3 – PLAN • Consider the layout you desire, – Linear – Augmented linear – Hierarchical – Mixed

Creating HTML Web Site

• Consider that color and images are important • Do not put large images on site • Too many moving elements are distracting • Make sure that background color is in contrast to font color • Make sure that a constant theme is carried throughout site • Create the page a piece at a time • Test with different browsers • Make sure you spell check!!

Where to Publish?

• Most ISP’s give you disk space as part of your monthly fee.

• Numerous free services where you can publish • Purchase your own Domain name and have it hosted • Rent space on public sites and use their domain name, but have your own area

Notable Links

• http://www.w3.org

- The World Wide Web Consortium responsible for the development of common protocols for the evolution of the World Wide Web. Excellent place to learn about the latest issues regarding HTML development. • http://developer.netscape.com

- Different browsers will support various extensions to the Recommendations set by the W3C. You can read more about Netscape's support of HTML and other web standards • http://msdn.microsoft.com/workshop Internet Explorer browser - Microsoft provides information about the • http://www.tucows.com

versions of HTML editors – downloadable software such as shareware and demo • http://www.peda.com/smaller/Welcome.html

- a program for reducing the file size of animated GIFs, without introducing any visible changes whatsoever. • http://www.boutell.com/mapedit/ maps.

- a program that assists in creating image • http://www.fookes.com/notetab/index.html

• http://www.geocities.com

- notetab light is a free HTML editor – Place where you can publish your website for free

Questions?

THANKS FOR LISTENING