27
Web design for fun Presented to the Rochester Computer Society 6/10/2003 By Michael Necheles EDS
| Date post: | 25-Dec-2015 |
| Category: |
Documents |
| Upload: | theodora-joseph |
| View: | 215 times |
| Download: | 2 times |
Web design for fun
Presented to the Rochester Computer Society6/10/2003
ByMichael Necheles
EDS
AgendaBrief overview of the Internet
HTML Structure Development Tools
HTML TagsHow 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. Open notepad2. 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. Click on file4. Click on Save As5. Make sure that “Save As Type” text box is “all file types”6. In the filename text box, give it a name with a .htm or .html extension (i.e. mywebpage.htm)7. Click on save (remember the name of the file and where you saved the file)8. Open up a web browser9. Click on File10. Click on Open11. Locate the file you just saved12. 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 tagsThere 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 tagsExample:<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 tagsDefinition 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 contentINTERNET a network of networksWWW World wide waitFTP file transfer protocol. Used to transfer files on the internet
Common HTML tagsCharacter 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
