Web design for fun - The Rochester Computer Society, Inc
Download
Report
Transcript Web design for fun - The Rochester Computer Society, Inc
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 <Versions>
• 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 <Versions>
• 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
• <TAG attributes> document content </TAG>
– One sided tag
• <tag attributes>
Format of an HTML document
<html>
<head>
<title>
</title>
</head>
<body>
</body>
</html>
Steps to create a simple
document
1.
2.
Open notepad
Type the following :
<html>
<head>
<title>
My first web page
</title>
</head>
<body>
This is the dawning of the age of Aquarius.
</body>
</html>
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
•
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.
– <h1 align=”center”>This is to introduce Balloon Art to
the world</h1>
– <p> 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 <br> 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:
<ol>
<li>item 1
<li>item 2
<li>item 3
</ol>
Unordered lists can have options:
<ul type=”circle”>
Unordered Lists:
<ul>
<li>bullet 1
<li>bullet 2
<li>bullet 3
</ul>
Both list types can be nested:
<ul>
<li>
<ul>
<li>
</ul>
</ul>
Common HTML tags
Example:
<ol>
<li> HTML Editors
<ul>
<li> Easy to use
<li> Often has GUI
</ul>
<li> HTML Converters
<ul>
<li> produce larger than necessary files
<li> are harder to edit manually
<li> are simple to use
</ul>
</ol>
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:
<dl>
<dt>INTERNET<dd>a network of networks
<dt>WWW<dd>world wide wait.
<dt>FTP<dd>file transfer protocol. Used to transfer files on the internet
</dl>
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:
<b> </b> - enclosed text is bold
<i> </i> - enclosed text is italic
<u> </u> - enclosed text is underlined
<tt> </tt> - typewriter text (monospaced)
<big> </big> - bigger text
<small> </small> - smaller text
<sub> </sub> - subscript
<sup> </sup> - superscript
These tags are often used together.
Example:
<p>The <b><i>rain</i></b> in Spain stays <i>mainly</i> on the
<b>plane.</b></p>
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:
<HR align=”align” size=”size” width=”width” color=”color” noshade>
e.g <hr align=”center” size=”3” width=”50%”>
• Inserting an image. Single sided tag.
Syntax:
<img src=”file”>
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:
<a name=topOfPage>Top</a>
• 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.
<a href =#topOfPage>Return to top</a>
Common HTML tags
• Interpage links consist of the anchor tag
<a href=“http://www.yahoo.com”>click here to go to yahoo</a>
<a href=“page2.htm”>go to my second page</a>
<a href=“/docs/history.htm”>Our History</a>
Common HTML tags
• Tables
– Tables consist of at least three tags
• <table></table> surrounds each table
• <tr></tr> Surrounds each row
• <td></td> Surrounds each row
Multipurpose – used for formatting layout as
well as display.
Common HTML tags
Table Example:
<table border=1>
<tr>
<td>cell 1</td><td>cell 2</td><td>cell 3</td>
</tr>
<tr>
<td>cell 4</td><td>cell 5</td><td>cell 6</td>
</tr>
<tr>
<td>cell 7</td><td>cell 8</td><td>cell 9</td>
</tr>
</table>
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 - Microsoft provides information about the
Internet Explorer browser
•http://www.tucows.com – downloadable software such as shareware and demo
versions of HTML editors
•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/ - a program that assists in creating image
maps.
•http://www.fookes.com/notetab/index.html - notetab light is a free HTML editor
•http://www.geocities.com – Place where you can publish your website for free
Questions?
THANKS FOR LISTENING