Inquiry and Design Based Project: Simple HTML Web Page Design

1. Inquiry and Design Based Project:Simple HTML Web Page Design

2. Introduction • This PowerPoint presentation is to be used as a guide to assist the user in getting familiar with designing a webpage using HTML. Many helpful links are provided throughout the presentation and it is recommended that the user has a stable internet connection when running the slide show. There are navigational links provided at the bottom right of each slide, but the user can also feel free to navigate through the presentation by just clicking to the next slide or using the arrow keys on the keyboard.

3. Project Goals • Introduce and give the user a basic understanding of web design using HTML • Creating a page • Add and modify text/pictures/links • Making web forms • Simple HTML and JavaScript tricks • Introduce other related topics • Be able to design webpage/website on own using HTML

4. What is HTML? • HTML stands for HyperText Markup Language, and is a language to specify the structure of documents for retrieval across the Internet using browser programs of the World Wide Web. HTML defines the structure and layout of a Web document by using a variety of tags and attributes. Basically it is a set of ‘markup’ symbols or codes inserted in a file that tells the Web browser how to display a Web page’s words and images for the user. The individual mark up codes are referred to as elements. • HTML looks a lot like old-fashioned typesetting code, where you surround a block of text with codes that indicate how it should appear, additionally; in HTML you can specify that a block of text, or a word, is linked to another file on the Internet. • HTML is an application of the Standard Generalized Markup Language (SGML) which is the International Standard for text markup. The principle is that text markup concentrates on structurerather than appearance, making the files more reusable and leaving the visual details to the end-user software.

5. Getting started - What do you want your webpage to reveal? • Before you even strike the keyboard to enter information for your webpage, you must decide what information you want to include • Map out, draw, and write down ideas of what you want contained • Next create a directory (folder) where all of your webpage files will be stored before uploading (if you are putting pictures or other documents on the site, they must be placed in this folder ). It is a lot easier to have all of them together, than scattered separately • If you are designing a personal page about yourself, make sure you have items available for you to put up (example: pictures) Click here to go to Designing a Personal Web Page. • If the page is for professional use you will want to include company information (if applicable) and a brief history of your education and background skills. Click here to go to Designing a Professional Web Page. • Another type of webpage is the Web Form. Web Forms are used as a submission tool in which viewers enter the information you request and then submit this information to you via email. To learn how to create a form click here. • Once your page is complete, you need to upload it to the internet.

6. Designing a Personal Web Page • First, you will need to decide what information about yourself you want to include. REMEMBER this information will become public! • Once you have decided what you want to put on your webpage, you will need to start writing code. To get start writing click here. • Many personal web pages include pictures. To learn how to include pictures in your web page click here. • To add audio to your page click here • Web pages can also include links to other pages on the internet. To learn how to add links to your webpage click here. • To put text or pictures on your webpage in table form click here. • For other simple HTML tricks to add to your site click here. • Other related topics • More general helpful HTML links Click here to go back to Main Menu

7. Writing Your Web Page • From your program menu open up the Notepad program (this is one of many ways to write code in HTML). • Once this is open you will want to save the file as an HTML file. Choose a file name (example: index) followed by the file extension of .html • Generally, the correct structure for an HTML document starts with <HTML><HEAD> (you usually enter here what document is about, but this is not neceassry) and ends with </BODY></HTML>. All the information you'd like to include in your Web page fits in between the <BODY> and </BODY> tags • Starting out with <HTML> tells the computer that the code to be read will be in HTML. • There are many different things you can do while writing in HTML, below are three helpful links containing many different codes (NOTE: THESE ARE EXTREMELY HELPFUL!): • http://www.web-source.net/html_codes_chart.htm • http://hotwired.lycos.com/webmonkey/reference/html_cheatsheet/ • http://www.faqs.org/docs/htmltut/ • All these have to be declared and then ended. When you want to stop the command type in the same code you put previously, but this time with a forward slash (/) in front of it. So if you were to bold only one line, you would type: <b>Text to be bold</b> Topic continued on next page

8. Writing Your Web Page • One thing you may want to have is a title for your webpage in the web browser’s title bar. The code for this can be placed immediately after the <HTML> declaration and should look like this: <title>Title of Webpage</title> • Another option you have is changing the page background color, text, and link color: <body bgcolor=“012345”> changes the background color <body text=“67890A”> changes the text color <body link=“BCDEF0”> changes the link color <body vlink=“123456”> changes the link color after it is clicked • The differing numbers and letters within the quotes are Hexadecimal numbers used to identify certain colors. To see what these color codes are go to any of these websites: • http://www.htmlgoodies.com/tutors/colors.html • http://www.december.com/html/spec/color.html • http://www.immigration-usa.com/html_colors.html • For a general color (example: blue), you can just type in the name of the color instead of a color code within the quotes Click here to go back Designing a Webpage Click here to go back to Main Menu

9. Adding Pictures to your Web Page • In order to add pictures to your page, you must first format the picture to the size you want it displayed on the page • Use a picture formatting program (example: Adobe PhotoShop) • To adjust picture size in the HTML code refer to bottom of the page • To import the picture into your program, follow this example: • <img src="picture.jpg"> (where picture.jpg will be your picture name) • Make sure the picture file name matches the file name included in the web page file (it is case sensitive, make sure all capital letters are the same). • Below is the code for adjusting the picture size in HTML (if not adjusted proportionally, the picture will become distorted: • <img src="image.jpg" height="350" width="200"> Click here to go back Designing a Webpage

10. Embedding Audio to the Webpage • Music can be played in the background of your webpage to accompany whatever is being shown on the page or just to grab the viewer’s attention • Select a music file to be played; make sure it isn’t too large or else it will take a long time to load • The following link will assist in coding to add music to your site as well as provide music files that you may wish to use: • http://www.walthowe.com/pubweb/audio.html Click here to go back Designing a Webpage

11. Adding Links to your Web Page • Links on a webpage can be very useful especially if you have more than one page on your website or want to be redirected to another site • There are a few types of webpage links: • A link that takes you directly to another site without opening another window - Click Here • A link that will open up a separate web browser window so that viewers can visit the link without leaving your site - Click Here • Links that will allow you to send the person an Email or Instant Message (via AOL Instant Messenger) – Click Here • These types of links can also be used in opening or downloading files or documents (all you have to do is put in the file name), although the opening a document in a separate window method is preferred Click here to go back Designing a Webpage

12. Linking to Another Page (without opening another window) • To include a link in your program that goes to another page or opens a document, follow this example: <a href=“index.html”>Your text here</a> • In this case, replace “index.html” with the name of the page file or document that you want viewers to be redirected to. • If this file was not located in the same folder as the current page/file, then the code within the quotes would be: ../index.html - the ../ moves up one level in the directory tree • If the file was in another folder one level down the directory tree, the code within the quotes to link to this file would be: /foldername/index.html - where foldername would be the name of the folder it is in • To go to a general webpage (one that is not included in any of the folders, example: Google.com) you would have to type in the full link, http://www.google.com, in between the quotes Click here to go back Designing a Webpage Click here to go back to Adding links

13. Linking to Another Page (Opens a separate window) • To include a link in your program that will open a link in a separate window, follow this example: <a target="_blank" href="http://www.tcnj.edu/">Your text here</a>&nbsp • You can follow the same rules located on the previous page for the data within the quotes, for pages located in different folders or separate websites • Again, if you are to open a file or document to download, this method is preferred because it will open in a separate page and the page that you opened it from will still be open Click here to go back Designing a Webpage Click here to go back to Adding links

14. Some Simple Linking Tricks • The code for creating a link so that the person on your site can send you an Email is (must have an email program, example: Microsoft Outlook): <a href="mailto:YourEmailAddressHere">Email me!</a> • The Code for creating a link so that the person on your site can sent you and Instant Message is (must have AOL Instant Messenger and the program must be running: <a href="aim:goim?screenname=YourScreenNameHere">IM me!</a> Click here to go back Designing a Webpage Click here to go back to Adding links

15. Working with Tables • Tables are nice for aligning images and text, the make the page a bit more organized and orderly • Just as in many other things in HTML, tables must first be declared, a simple declaration could be: <table> <table width=400 border=3> </table> • You can make the table invisible by setting the border to zero • The rest of the code in working with tables can be found using any one of the links below: • http://www.w3.org/TR/REC-html40/struct/tables.html • http://www.htmlgoodies.com/tutors/html4_tables.html • http://www.netpanel.com/articles/internet/tables.htm • http://www.december.com/html/demo/table.html Click here to go back Designing a Webpage

16. Other Tricks • Page redirection • If your page is under construction or you want to have a welcome page before the user gets to your main webpage, you may need to redirect the user to another page • Follow this example for page redirection: <META http-equiv=refresh content=0;URL=index.html> • This can redirect the user anywhere on your site or to a different site • The amount of time it takes to go to the next page can be changed to any amount of time by changing the zero (0) • The site that it will be redirected to can be changed by changing the part index.html to the link you want Topic continued on next page

17. Picture Links • To be able to click on a picture and link to another webpage, follow this code (opening in same window): <a href="http://www.tcnj.edu"><img src=“picture1.jpg"></a> • To be able to click on a picture and open in another window, follow this code: <a target="_blank" href="http://www.tcnj.edu/">< img src=“picture1.jpg"></a>&nbsp • This is the same code as the previous linking code, except the picture source code is replacing where the link text would be Click here to go back Designing a Webpage

18. Other Related Topics • There are many other things that can be done to a webpage using little programs or short codes within the HTML code. Below is a list of extra things that can be added: • Cascading Style Sheets (CSS) • JavaScript • VBScript • Common Gateway Interface (CGI) • eXtensible Markup Language (XML) Click here to go back Designing a Webpage

19. Cascading Style Sheets (CSS) • Cascading Style Sheets or CSS offers web developers a powerful tool that helps simplify the complex task of maintaining web sites, and provides sophisticated layout and design features for web pages without the need for plug-ins, long download times, and expensive tools • Like an HTML document, CSS is just a simple text file written according to the grammar defined in the CSS recommendations. Styles define how to display HTML elements and are normally stored in Style Sheets. But unlike an HTML document, you don't need a special declaration at the top of the file to say that this is a style sheet. The name of the file should however end with a .css suffix. • CSS provides a means for web authors to separate the appearance of web pages from the content of web pages • Some helpful CSS sites are: • http://www.htmlhelp.com/reference/css/ • http://www.w3schools.com/css/default.asp • http://glish.com/css/ • http://www.w3.org/Style/CSS/ Back to Other Related Topics

20. JavaScript • JavaScript is a scripting language that is designed to resemble Java (a software coding language), only it looks more like C and C++. The difference is that Java was built as a general-purpose object language, while JavaScript is intended to provide a quicker and simpler language for enhancing webpages and servers. JavaScript is embedded as a small program in a webpage that is interpreted and executed by a web client. JavaScript functions can be called from within a Web document, often executed by mouse functions, buttons, or other actions from the user. • Some good JavaScript codes sites are: • http://www.bignosebird.com/javas.shtml • http://www.webmastersarea.com/resources/js_tricks.html • http://www.geocities.com/SiliconValley/7116/ • http://www.javascript.com/ • http://javascript.internet.com/ • These are fun codes that can give your site something a little extra to grab a visitor’s attention and most of the codes can just be copied and placed into the body of your code Back to Other Related Topics

21. VBScript • VBScript, which is based on the Microsoft Visual Basic, is like JavaScript, embedded as a small program in a web page that is interpreted and executed by the Web client. The Scriptor controls the time and nature of the execution, and VBScript functions can be called from within a Web document, often executed by mouse functions, buttons, Active X controls, or other actions from the user. VBscript can be used to fully control compatible browsers, including all the familiar browser attributes. • Below are sites with more information about VBScript • http://www.devguru.com/Technologies/vbscript/quickref/vbscript_intro.html • http://www.w3schools.com/vbscript/default.asp • Web Tutorial: • http://www.intranetjournal.com/corner/wrox/progref/vbt/ Back to Other Related Topics

22. Common Gateway Interface (CGI) • Common Gateway Interface, better known as CGI, is a set of rules that describe how a web server communicates with another piece of software on the same machine, and how the other piece of software responds to the web server. Usually a CGI program is a small program that takes data from a web server and does something with it, like putting the content of a form into an e-mail message, or turning the data into a database query. CGI scripts are just scripts which use CGI. CGI is often confused with Perl, which is a programming language, while CGI is an interface to the server from a particular program. Perl is an application of CGI, as well as many others, such as MIVA, Python, PHP3, to name a few other scripting languages. • For more on CGI, take a look at these sites: • http://www.php.net/ • http://hoohoo.ncsa.uiuc.edu/cgi/ • http://cgi.resourceindex.com/ • CGI Script Archive: • http://www.scriptarchive.com/ Back to Other Related Topics

23. eXtensible Markup Language (XML) • XML stands for eXtensible Markup Language. It is designed to improve the functionality of the Web by providing more flexible and adaptable information identification. • It is called extensible because it is not a fixed format like HTML (a single, predefined markup language). Instead, XML is actually a ‘Metalanguage’ - a language for describing other languages - which lets you design your own customized markup languages for limitless different types of documents. XML can do this because it's written in SGML, the International Standard Metalanguage for text markup systems. • XML is intended to make it easy and straightforward to use SGML on the Web: easy to define document types, easy to author and manage SGML-defined documents, and easy to transmit and share them across the internet. • XML is a simple, very flexible text format derived from SGML. Originally designed to meet the challenges of large-scale electronic publishing, XML is also playing an increasingly important role in the exchange of a wide variety of data on the Web and elsewhere. • These sites will provide more information on XML: • http://www.w3schools.com/xml/ • http://xml.apache.org/ • http://www.ucc.ie/xml/ • http://www.xml.com/ Back to Other Related Topics

24. Creating a Form Web Page • Forms are useful in doing things such as surveys, quizzes, or just plain fun (I have a by-weekly movie quote form, in which people try to guess the name of the movie the quote is from, to see it, Click here) • Forms need to supported through whatever server or network you are on (in this case the we will use the TCNJ network) • First go to http://uss.tcnj.edu/formgen and enter in your UNIX account name. Next, you will have to enter your password to enter the form creation site. • One the next page there is a drop down menu with a few options, select “Create New Form”. • Follow the directions for creating your form. You will be asked to chose colors and the information that you want to be included within the form. • Once the form is created, copy the link and add it to your webpage so that people can view your form from your webpage. • To make a form into a quiz, log back into the forms page, select “Quiz Mode” and then select the form you want to make into a quiz. Again, follow the steps and your form will be made into a quiz. Click here to go back to Main Menu

25. Designing a Professional Web Page • First you will need to decide what you want the web page to accomplish • Do you want the web page to make people aware of the company and its history? • Do you want people to be able to make purchases through the web page? • Pictures can help to liven up a web page that is otherwise filled with information, but no personal pictures should be displayed. To learn how to add pictures click here. • Many companies will provide links to other web pages through their own page. To learn how to add links to your webpage click here. • Email and contact information may also be a good thing to add to your website, especially if you want someone to contact you. To create an email link click here. • To have a link to a document that contains important information about you or the company, click here to create a link to a document. Click here to go to start Writing Your Webpage Click here to go back to Main Menu

26. Uploading to the Internet • Once your webpage files are complete and you feel you are ready to have it viewed by the public, you need to upload the files to the internet. • First you need to setup your web space (if not done so already) • Log into your UNIX account (beast.tcnj.edu) using your UNIX user name and password • Once logged in type in wwwsetup – this will setup your web space on the TCNJ server • Next, you need an FTP program • FTP programs can be found at download.com by doing a search for “FTP Programs” • TCNJ gives software to students which includes an FTP program called WS_FTP LE • Once this is installed, open the program and set up the properties for logging in • The Host/Domain Name is: beast.tcnj.edu • The User ID is: your UNIX login name • The Password is: your UNIX password • After you log in, go to the www folder. This is the folder which all files need to be placed into in order for them to be displayed online • Once in this folder, select the [webpage] files you designed that you want to put online and transfer them into the www folder • When the transfer is complete you may go to your website and few your files on the internet (the URL will be: http://www.tcnj.edu/~YourUNIXName Click here to go back to Main Menu

27. More Helpful Links • Interactive HTML Tutorial http://www.davesite.com/webstation/html/ • HTML Definition and helpful links http://www.webopedia.com/TERM/H/HTML.html • This page contains basic information about designing in HTML http://www.htmlgoodies.com/primers/basics.html • This link contains helpful information about many of the topics discussed http://www.cc.utah.edu/~joseph/Course_Materials/WebGraphics/BasicWebGraphics.html Click here to go back to Main Menu

28. End of Presentation Click here to beginning of presentation Click here to go back to Main Menu Click here if you have a question for presentation creator