Web design for fun

1
Web design for fun

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

2
Agenda

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

3
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

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

5
HTML Structure ltVersionsgt

• 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

6
HTML Structure ltVersionsgt

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

7
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

8
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
• ltTAG attributesgt document content lt/TAGgt
• One sided tag
• lttag attributesgt

9
Format of an HTML document

• lthtmlgt
• ltheadgt
• lttitlegt
• lt/titlegt
• lt/headgt
• ltbodygt
• lt/bodygt
• lt/htmlgt

10
Steps to create a simple document

• Open notepad
• Type the following
• lthtmlgt
• ltheadgt
• lttitlegt
• My first web page
• lt/titlegt
• lt/headgt
• ltbodygt
• This is the dawning of the age of
  Aquarius.
• lt/bodygt
• lt/htmlgt
• 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

11
Common HTML tags

• Creating headings, paragraphs and lists
• Heading tags range from H1 to H6. The higher the
  number, the smaller the font size.
• lth1 aligncentergtThis is to introduce Balloon
  Art to the worldlt/h1gt
• ltpgt 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 dont want a paragraph, just a line break,
  use the ltbrgt tag. This is a one sided tag.

12
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
• ltolgt
• ltligtitem 1
• ltligtitem 2
• ltligtitem 3
• lt/olgt
• Unordered lists can have options
• ltul typecirclegt
• Unordered Lists
• ltulgt
• ltligtbullet 1
• ltligtbullet 2
• ltligtbullet 3
• lt/ulgt
• Both list types can be nested
• ltulgt
• ltligt

13
Common HTML tags

• Example
• ltolgt
• ltligt HTML Editors
• ltulgt
• ltligt Easy to use
• ltligt Often has GUI
• lt/ulgt
• ltligt HTML Converters
• ltulgt
• ltligt produce larger than necessary files
• ltligt are harder to edit manually
• ltligt are simple to use
• lt/ulgt
• lt/olgt
• The above snippet will produce the following
  content
• HTML Editors
• Easy to use
• Often has GUI

14
Common HTML tags

• Definition List
• Example
• ltdlgt
• ltdtgtINTERNETltddgta network of networks
• ltdtgtWWWltddgtworld wide wait.
• ltdtgtFTPltddgtfile transfer protocol. Used to
  transfer files on the internet
• lt/dlgt
• 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

15
Common HTML tags

• Character formatting tags
• ltbgt lt/bgt - enclosed text is bold
• ltigt lt/igt - enclosed text is italic
• ltugt lt/ugt - enclosed text is underlined
• ltttgt lt/ttgt - typewriter text (monospaced)
• ltbiggt lt/biggt - bigger text
• ltsmallgt lt/smallgt - smaller text
• ltsubgt lt/subgt - subscript
• ltsupgt lt/supgt - superscript
• These tags are often used together.
• Example
• ltpgtThe ltbgtltigtrainlt/igtlt/bgt in Spain stays
  ltigtmainlylt/igt on the ltbgtplane.lt/bgtlt/pgt
• Renders
• The rain in Spain stays mainly on the plane.

16
Common HTML tags

• Horizontal Line - used to break up a page by
  inserting a horizontal line. Single sided tag.
• Syntax
• ltHR alignalign sizesize widthwidth
  colorcolor noshadegt
• e.g lthr aligncenter size3 width50gt
• Inserting an image. Single sided tag.
• Syntax
• ltimg srcfilegt
• note that file requires the path if image is
  not located in same directory as html file.

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

18
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
• lta nametopOfPagegtToplt/agt
• 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.
• lta href topOfPagegtReturn to toplt/agt

19
Common HTML tags

• Interpage links consist of the anchor tag
• lta hrefhttp//www.yahoo.comgtclick here to go
  to yahoolt/agt
• lta hrefpage2.htmgtgo to my second pagelt/agt
• lta href/docs/history.htmgtOur Historylt/agt

20
Common HTML tags

• Tables
• Tables consist of at least three tags
• lttablegtlt/tablegt surrounds each table
• lttrgtlt/trgt Surrounds each row
• lttdgtlt/tdgt Surrounds each row
• Multipurpose used for formatting layout as well
  as display.

21
Common HTML tags

• Table Example
• lttable border1gtlttrgt lttdgtcell 1lt/tdgtlttdgtcell
  2lt/tdgtlttdgtcell 3lt/tdgtlt/trgtlttrgt lttdgtcell
  4lt/tdgtlttdgtcell 5lt/tdgtlttdgtcell 6lt/tdgtlt/trgtlttrgt
  lttdgtcell 7lt/tdgtlttdgtcell 8lt/tdgtlttdgtcell
  9lt/tdgtlt/trgt
• lt/tablegt

22
Creating HTML Documents

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

23
Creating HTML Web Site

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

24
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!!

25
Where to Publish?

• Most ISPs 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

26
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

27
Questions?

• THANKS FOR LISTENING