1 / 27

Web design for fun

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

penha
Download Presentation

Web design for fun

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

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

  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 • <TAG attributes> document content </TAG> • One sided tag • <tag attributes>

  9. Format of an HTML document <html> <head> <title> </title> </head> <body> </body> </html>

  10. Steps to create a simple document • 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> • 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

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

  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: <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>

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

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

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

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

  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: <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>

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

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

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

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

  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

More Related