Inquiry and Design Based Inquiry and Design Based Project:Project:

Simple HTML Web Page Simple HTML Web Page DesignDesign

IntroductionIntroduction

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

Project GoalsProject Goals

Introduce and give the user a basic Introduce and give the user a basic understanding of web design using HTMLunderstanding of web design using HTML Creating a pageCreating a page Add and modify text/pictures/linksAdd and modify text/pictures/links Making web formsMaking web forms Simple HTML and JavaScript tricksSimple HTML and JavaScript tricks Introduce other related topicsIntroduce other related topics

Be able to design webpage/website on Be able to design webpage/website on own using HTMLown using HTML

What is HTML?What is HTML? HTML stands for HyperText Markup Language, and is a HTML stands for HyperText Markup Language, and is a

language to specify the structure of documents for retrieval language to specify the structure of documents for retrieval across the Internet using browser programs of the World Wide across the Internet using browser programs of the World Wide Web. HTML defines the structure and layout of a Web Web. HTML defines the structure and layout of a Web document by using a variety of tags and attributes. Basically it 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 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 the Web browser how to display a Web page’s words and images for the user. The individual mark up codes are referred images for the user. The individual mark up codes are referred to as elements. to as elements.

HTML looks a lot like old-fashioned typesetting code, where you HTML looks a lot like old-fashioned typesetting code, where you surround a block of text with codes that indicate how it should surround a block of text with codes that indicate how it should appear, additionally; in HTML you can specify that a block of appear, additionally; in HTML you can specify that a block of text, or a word, is linked to another file on the Internet.text, or a word, is linked to another file on the Internet.

HTML is an application of the Standard Generalized Markup HTML is an application of the Standard Generalized Markup Language (SGML) which is the International Standard for text Language (SGML) which is the International Standard for text markup. The principle is that text markup concentrates on markup. The principle is that text markup concentrates on structurestructure rather than appearance, making the files more rather than appearance, making the files more reusable and leaving the visual details to the end-user reusable and leaving the visual details to the end-user software.software.

Getting started - What do you Getting started - What do you want your webpage to reveal?want your webpage to reveal?

Before you even strike the keyboard to enter information for Before you even strike the keyboard to enter information for your webpage, you must decide what information you want to your webpage, you must decide what information you want to includeinclude Map out, draw, and write down ideas of what you want containedMap out, draw, and write down ideas of what you want contained Next create a directory (folder) where all of your webpage files will Next create a directory (folder) where all of your webpage files will

be stored before uploading (if you are putting pictures or other 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 documents on the site, they must be placed in this folder ). It is a lot easier to have all of them together, than scattered separatelylot easier to have all of them together, than scattered separately

If you are designing a personal page about yourself, make sure If you are designing a personal page about yourself, make sure you have items available for you to put up (example: pictures) you have items available for you to put up (example: pictures) Click here to go to Designing a Personal Web Page.Click here to go to Designing a Personal Web Page.

If the page is for professional use you will want to include If the page is for professional use you will want to include company information (if applicable) and a brief history of your company information (if applicable) and a brief history of your education and background skills. education and background skills. Click here to go to Designing a Professional Web Page. Click here to go to Designing a Professional Web Page.

Another type of webpage is the Web Form. Web Forms are Another type of webpage is the Web Form. Web Forms are used as a submission tool in which viewers enter the used as a submission tool in which viewers enter the information you request and then submit this information to you information you request and then submit this information to you via email. To learn how to create a form via email. To learn how to create a form click hereclick here..

Once your page is complete, you need to Once your page is complete, you need to upload it to the internetupload it to the internet ..

Designing a Personal Web Designing a Personal Web PagePage

First, you will need to decide what information about yourself First, you will need to decide what information about yourself you want to include. REMEMBER this information will become you want to include. REMEMBER this information will become public!public!

Once you have decided what you want to put on your Once you have decided what you want to put on your webpage, you will need to start writing code. To get start webpage, you will need to start writing code. To get start writing writing click hereclick here..

Many personal web pages include pictures. To learn how to Many personal web pages include pictures. To learn how to include pictures in your web page include pictures in your web page click hereclick here..

To add audio to your page To add audio to your page click hereclick here Web pages can also include links to other pages on the Web pages can also include links to other pages on the

internet. To learn how to add links to your webpage internet. To learn how to add links to your webpage click hereclick here..

To put text or pictures on your webpage in table form To put text or pictures on your webpage in table form click hereclick here. .

For other simple HTML tricks to add to your site For other simple HTML tricks to add to your site click hereclick here.. Other related topicsOther related topics More general helpful HTML linksMore general helpful HTML linksClick here to go back to Main Menu

Writing Your Web PageWriting Your Web Page From your program menu open up the Notepad program (this is one of From your program menu open up the Notepad program (this is one of

many ways to write code in HTML).many ways to write code in HTML). Once this is open you will want to save the file as an HTML file. 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 Choose a file name (example: index) followed by the file extension of .htmlof .html

Generally, the correct structure for an HTML document starts with Generally, the correct structure for an HTML document starts with <HTML><HEAD> (you usually enter here what document is about, <HTML><HEAD> (you usually enter here what document is about, but this is not neceassry) and ends with </BODY></HTML>. All the 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 information you'd like to include in your Web page fits in between the <BODY> and </BODY> tags<BODY> and </BODY> tags

Starting out with <HTML> tells the computer that the code to be read Starting out with <HTML> tells the computer that the code to be read will be in HTML.will be in HTML.

There are many different things you can do while writing in HTML, There are many different things you can do while writing in HTML, below are three helpful links containing many different codes (NOTE: below are three helpful links containing many different codes (NOTE: THESE ARE EXTREMELY HELPFUL!):THESE ARE EXTREMELY HELPFUL!):

http://www.web-source.net/html_codes_chart.htmhttp://www.web-source.net/html_codes_chart.htm http://hotwired.lycos.com/webmonkey/reference/html_cheatsheet/http://hotwired.lycos.com/webmonkey/reference/html_cheatsheet/ http://http://www.faqs.org/docs/htmltutwww.faqs.org/docs/htmltut//

All these have to be declared and then ended. When you want to stop 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 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 with a forward slash (/) in front of it. So if you were to bold only one line, you would type:line, you would type:

<b>Text to be bold</b><b>Text to be bold</b> Topic continued on next page

Writing Your Web PageWriting Your Web Page One thing you may want to have is a title for your webpage in 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 the web browser’s title bar. The code for this can be placed immediately after the <HTML> declaration and should look like immediately after the <HTML> declaration and should look like this:this:

<title>Title of Webpage</title><title>Title of Webpage</title> Another option you have is changing the page background Another option you have is changing the page background

color, text, and link color:color, text, and link color:<body bgcolor=“012345”><body bgcolor=“012345”> changes the background color changes the background color<body text=“67890A”><body text=“67890A”> changes the text color changes the text color<body link=“BCDEF0”><body link=“BCDEF0”> changes the link color changes the link color<body vlink=“123456”><body vlink=“123456”> changes the link color after it is clicked changes the link color after it is clicked

The differing numbers and letters within the quotes are The differing numbers and letters within the quotes are Hexadecimal numbers used to identify certain colors. To see Hexadecimal numbers used to identify certain colors. To see what these color codes are go to any of these websites:what these color codes are go to any of these websites:

http://http://www.htmlgoodies.com/tutors/colors.htmlwww.htmlgoodies.com/tutors/colors.html http://www.december.com/html/spec/color.htmlhttp://www.december.com/html/spec/color.html http://www.immigration-usa.com/html_colors.htmlhttp://www.immigration-usa.com/html_colors.html

For a general color (example: blue), you can just type in the For a general color (example: blue), you can just type in the name of the color instead of a color code within the quotesname of the color instead of a color code within the quotes

Click here to go back to Main Menu

Click here to go back Designing a Webpage

Adding Pictures to your Web Adding Pictures to your Web PagePage

In order to add pictures to your page, you must first format the In order to add pictures to your page, you must first format the picture to the size you want it displayed on the pagepicture to the size you want it displayed on the page Use a picture formatting program (example: Adobe PhotoShop)Use a picture formatting program (example: Adobe PhotoShop) To adjust picture size in the HTML code refer to bottom of the pageTo adjust picture size in the HTML code refer to bottom of the page

To import the picture into your program, follow this example:To import the picture into your program, follow this example: <img src="picture.jpg"><img src="picture.jpg"> (where (where picture.jpgpicture.jpg will be your will be your

picture name)picture name) Make sure the picture file name matches the file name Make sure the picture file name matches the file name

included in the web page file (it is case sensitive, make sure all included in the web page file (it is case sensitive, make sure all capital letters are the same).capital letters are the same).

Below is the code for adjusting the picture size in HTML (if not Below is the code for adjusting the picture size in HTML (if not adjusted proportionally, the picture will become distorted:adjusted proportionally, the picture will become distorted:

<img src="image.jpg" height="350" width="200"><img src="image.jpg" height="350" width="200">

Click here to go back Designing a Webpage

Embedding Audio to the Embedding Audio to the WebpageWebpage

Music can be played in the background of Music can be played in the background of your webpage to accompany whatever is your webpage to accompany whatever is being shown on the page or just to grab the being shown on the page or just to grab the viewer’s attentionviewer’s attention

Select a music file to be played; make sure it Select a music file to be played; make sure it isn’t too large or else it will take a long time to isn’t too large or else it will take a long time to loadload

The following link will assist in coding to add The following link will assist in coding to add music to your site as well as provide music music to your site as well as provide music files that you may wish to use:files that you may wish to use:

http://www.http://www.walthowewalthowe.com/.com/pubwebpubweb/audio.html/audio.htmlClick here to go back Designing a Webpage

Adding Links to your Web Adding Links to your Web PagePage

Links on a webpage can be very useful especially if you have Links on a webpage can be very useful especially if you have more than one page on your website or want to be more than one page on your website or want to be redirected to another siteredirected to another site

There are a few types of webpage links:There are a few types of webpage links: A link that takes you directly to another site without A link that takes you directly to another site without

opening another window - opening another window - Click HereClick Here A link that will open up a separate web browser window A link that will open up a separate web browser window

so that viewers can visit the link without leaving your site so that viewers can visit the link without leaving your site - - Click HereClick Here

Links that will allow you to send the person an Email or Links that will allow you to send the person an Email or Instant Message (via AOL Instant Messenger) – Instant Message (via AOL Instant Messenger) – Click HereClick Here

These types of links can also be used in opening or These types of links can also be used in opening or downloading files or documents (all you have to do is put in downloading files or documents (all you have to do is put in the file name), although the opening a document in a the file name), although the opening a document in a separate window method is preferredseparate window method is preferred

Click here to go back Designing a Webpage

Linking to Another Page Linking to Another Page (without opening another (without opening another

window)window) To include a link in your program that goes to another page or To include a link in your program that goes to another page or opens a document, follow this example:opens a document, follow this example:

<a href=“index.html”>Your text here</a><a href=“index.html”>Your text here</a> In this case, replace “In this case, replace “index.htmlindex.html” with the name of the page ” with the name of the page

file or document that you want viewers to be redirected to.file or document that you want viewers to be redirected to. If this file was not located in the same folder as the current If this file was not located in the same folder as the current

page/file, then the code within the quotes would be:page/file, then the code within the quotes would be:../index.html../index.html - the ../ moves up one level in the directory tree - the ../ moves up one level in the directory tree

If the file was in another folder one level down the directory 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:tree, the code within the quotes to link to this file would be:

/foldername/index.html /foldername/index.html - where foldername would be the - where foldername would be the name of the folder it is inname of the folder it is in

To go to a general webpage (one that is not included in any To go to a general webpage (one that is not included in any of the folders, example: Google.com) you would have to type of the folders, example: Google.com) you would have to type in the full link, in the full link, http://www.google.comhttp://www.google.com, in between the quotes, in between the quotes

Click here to go back to Adding links

Click here to go back Designing a Webpage

Linking to Another Page Linking to Another Page (Opens a separate window) (Opens a separate window)

To include a link in your program that will open a To include a link in your program that will open a link in a separate window, follow this example:link in a separate window, follow this example:

<a target="_blank" <a target="_blank" href="http://www.tcnj.edu/">Your text href="http://www.tcnj.edu/">Your text here</a>&nbsphere</a>&nbsp

You can follow the same rules located on the You can follow the same rules located on the previous page previous page for the data within the quotes, for for the data within the quotes, for pages located in different folders or separate pages located in different folders or separate websiteswebsites

Again, if you are to open a file or document to Again, if you are to open a file or document to download, this method is preferred because it will download, this method is preferred because it will open in a separate page and the page that you open in a separate page and the page that you opened it from will still be openopened it from will still be open

Click here to go back to Adding links

Click here to go back Designing a Webpage

Some Simple Linking TricksSome Simple Linking Tricks

The code for creating a link so that the person on The code for creating a link so that the person on your site can send you an Email is (must have an your site can send you an Email is (must have an email program, example: Microsoft Outlook):email program, example: Microsoft Outlook):

<a href="mailto:YourEmailAddressHere">Email me!<a href="mailto:YourEmailAddressHere">Email me!</a></a>

The Code for creating a link so that the person on The Code for creating a link so that the person on your site can sent you and Instant Message is your site can sent you and Instant Message is (must have AOL Instant Messenger and the (must have AOL Instant Messenger and the program must be running:program must be running:

<a href="aim:goim?<a href="aim:goim?screenname=YourScreenNameHere">IM me!</a>screenname=YourScreenNameHere">IM me!</a>

Click here to go back to Adding links

Click here to go back Designing a Webpage

Working with TablesWorking with Tables Tables are nice for aligning images and text, the make the Tables are nice for aligning images and text, the make the

page a bit more organized and orderlypage a bit more organized and orderly Just as in many other things in HTML, tables must first be Just as in many other things in HTML, tables must first be

declared, a simple declaration could be:declared, a simple declaration could be:<table><table><table width=400 border=3><table width=400 border=3>

</table></table>

You can make the table invisible by setting the border to zeroYou can make the table invisible by setting the border to zero The rest of the code in working with tables can be found using The rest of the code in working with tables can be found using

any one of the links below:any one of the links below: http://www.w3.org/TR/REC-html40/struct/tables.htmlhttp://www.w3.org/TR/REC-html40/struct/tables.html http://www.htmlgoodies.com/tutors/html4_tables.htmlhttp://www.htmlgoodies.com/tutors/html4_tables.html http://www.netpanel.com/articles/internet/tables.htmhttp://www.netpanel.com/articles/internet/tables.htm http://www.http://www.decemberdecember.com/html/demo/table.html.com/html/demo/table.html

Click here to go back Designing a Webpage

Other TricksOther Tricks Page redirectionPage redirection

If your page is under construction or you want to have a If your page is under construction or you want to have a welcome page before the user gets to your main welcome page before the user gets to your main webpage, you may need to redirect the user to another webpage, you may need to redirect the user to another pagepage

Follow this example for page redirection:Follow this example for page redirection:<META http-equiv=refresh <META http-equiv=refresh

content=0;URL=index.html>content=0;URL=index.html>

This can redirect the user anywhere on your site or to a This can redirect the user anywhere on your site or to a different sitedifferent site

The amount of time it takes to go to the next page can be 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)changed to any amount of time by changing the zero (0)

The site that it will be redirected to can be changed by The site that it will be redirected to can be changed by changing the part changing the part index.htmlindex.html to the link you want to the link you want

Topic continued on next page

Picture LinksPicture Links

To be able to click on a picture and link to To be able to click on a picture and link to another webpage, follow this code (opening in another webpage, follow this code (opening in same window):same window):

<a href="http://www.tcnj.edu"><img <a href="http://www.tcnj.edu"><img src=“picture1.jpg"></a>src=“picture1.jpg"></a>

To be able to click on a picture and open in To be able to click on a picture and open in another window, follow this code:another window, follow this code:<a target="_blank" href="http://www.tcnj.edu/">< img <a target="_blank" href="http://www.tcnj.edu/">< img src=“picture1.jpg"></a>&nbspsrc=“picture1.jpg"></a>&nbsp

This is the same code as the previous linking This is the same code as the previous linking code, except the picture source code is replacing code, except the picture source code is replacing where the link text would bewhere the link text would be

Click here to go back Designing a Webpage

Other Related TopicsOther Related Topics

There are many other things that can be There are many other things that can be done to a webpage using little programs or done to a webpage using little programs or short codes within the HTML code. Below short codes within the HTML code. Below is a list of extra things that can be added:is a list of extra things that can be added: Cascading Style Sheets (Cascading Style Sheets (CSS)CSS) JavaScriptJavaScript VBScriptVBScript Common Gateway Interface (CGI)Common Gateway Interface (CGI) eXtensible Markup Language (XML)eXtensible Markup Language (XML)

Click here to go back Designing a Webpage

Cascading Style Sheets Cascading Style Sheets ((CSS)CSS) Cascading Style Sheets or CSS offers web developers a powerful Cascading Style Sheets or CSS offers web developers a powerful

tool that helps simplify the complex task of maintaining web tool that helps simplify the complex task of maintaining web sites, and provides sophisticated layout and design features for sites, and provides sophisticated layout and design features for web pages without the need for plug-ins, long download times, web pages without the need for plug-ins, long download times, and expensive toolsand expensive tools

Like an HTML document, CSS is just a simple text file written Like an HTML document, CSS is just a simple text file written according to the grammar defined in the CSS recommendations. according to the grammar defined in the CSS recommendations. Styles define how to display HTML elements and are normally Styles define how to display HTML elements and are normally stored in Style Sheets. But unlike an HTML document, you don't 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 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 style sheet. The name of the file should however end with a .css suffix.a .css suffix.

CSS provides a means for web authors to separate the CSS provides a means for web authors to separate the appearance of web pages from the content of web pagesappearance of web pages from the content of web pages

Some helpful CSS sites are:Some helpful CSS sites are: http://http://www.htmlhelp.com/reference/csswww.htmlhelp.com/reference/css// http://www.w3schools.com/css/default.asphttp://www.w3schools.com/css/default.asp http://glish.com/css/http://glish.com/css/ http://www.w3.org/Style/CSS/http://www.w3.org/Style/CSS/ Back to Other Related Topics

JavaScriptJavaScript JavaScript is a scripting language that is designed to resemble Java (a JavaScript is a scripting language that is designed to resemble Java (a

software coding language), only it looks more like C and C++. The software coding language), only it looks more like C and C++. The difference is that Java was built as a general-purpose object language, difference is that Java was built as a general-purpose object language, while JavaScript is intended to provide a quicker and simpler language while JavaScript is intended to provide a quicker and simpler language for enhancing webpages and servers. JavaScript is embedded as a small for enhancing webpages and servers. JavaScript is embedded as a small program in a webpage that is interpreted and executed by a web client. program in a webpage that is interpreted and executed by a web client. JavaScript functions can be called from within a Web document, often JavaScript functions can be called from within a Web document, often executed by mouse functions, buttons, or other actions from the user.executed by mouse functions, buttons, or other actions from the user.

Some good JavaScript codes sites are:Some good JavaScript codes sites are: http://www.http://www.bignosebirdbignosebird.com/.com/javasjavas..shtmlshtml http://www.webmastersarea.com/resources/js_tricks.htmlhttp://www.webmastersarea.com/resources/js_tricks.html http://www.geocities.com/SiliconValley/7116/http://www.geocities.com/SiliconValley/7116/ http://www.javascript.com/http://www.javascript.com/ http://javascript.internet.com/http://javascript.internet.com/

These are fun codes that can give your site something a little extra to 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 grab a visitor’s attention and most of the codes can just be copied and placed into the body of your codeplaced into the body of your code

Back to Other Related Topics

VBScriptVBScript VBScript, which is based on the Microsoft Visual Basic, VBScript, which is based on the Microsoft Visual Basic,

is like JavaScript, embedded as a small program in a is like JavaScript, embedded as a small program in a web page that is interpreted and executed by the Web web page that is interpreted and executed by the Web client. The Scriptor controls the time and nature of the client. The Scriptor controls the time and nature of the execution, and VBScript functions can be called from execution, and VBScript functions can be called from within a Web document, often executed by mouse within a Web document, often executed by mouse functions, buttons, Active X controls, or other actions functions, buttons, Active X controls, or other actions from the user. VBscript can be used to fully control from the user. VBscript can be used to fully control compatible browsers, including all the familiar browser compatible browsers, including all the familiar browser attributes.attributes.

Below are sites with more information about VBScriptBelow are sites with more information about VBScript http://www.devguru.com/Technologies/vbscript/quickref/http://www.devguru.com/Technologies/vbscript/quickref/

vbscript_intro.htmlvbscript_intro.html http://www.w3schools.com/vbscript/default.asphttp://www.w3schools.com/vbscript/default.asp

Web Tutorial:Web Tutorial: http://www.http://www.intranetjournalintranetjournal.com/corner/.com/corner/wroxwrox//progrefprogref//vbtvbt//

Back to Other Related Topics

Common Gateway Interface Common Gateway Interface (CGI)(CGI)

Common Gateway Interface, better known as CGI, is a set of Common Gateway Interface, better known as CGI, is a set of rules that describe how a web server communicates with rules that describe how a web server communicates with another piece of software on the same machine, and how the another piece of software on the same machine, and how the other piece of software responds to the web server. Usually a other piece of software responds to the web server. Usually a CGI program is a small program that takes data from a web CGI program is a small program that takes data from a web server and does something with it, like putting the content of a server and does something with it, like putting the content of a form into an e-mail message, or turning the data into a form into an e-mail message, or turning the data into a database query. CGI scripts are just scripts which use CGI. CGI database query. CGI scripts are just scripts which use CGI. CGI is often confused with Perl, which is a programming language, is often confused with Perl, which is a programming language, while CGI is an interface to the server from a particular while CGI is an interface to the server from a particular program. Perl is an application of CGI, as well as many others, program. Perl is an application of CGI, as well as many others, such as MIVA, Python, PHP3, to name a few other scripting such as MIVA, Python, PHP3, to name a few other scripting languages.languages.

For more on CGI, take a look at these sites:For more on CGI, take a look at these sites: http://http://www.php.netwww.php.net// http://http://hoohoo.ncsa.uiuc.edu/cgihoohoo.ncsa.uiuc.edu/cgi// http://cgi.resourceindex.com/http://cgi.resourceindex.com/

CGI Script Archive:CGI Script Archive: http://http://www.scriptarchive.comwww.scriptarchive.com//

Back to Other Related Topics

eXtensible Markup Language eXtensible Markup Language (XML)(XML)

XML stands for eXtensible Markup Language. It is designed to improve XML stands for eXtensible Markup Language. It is designed to improve the functionality of the Web by providing more flexible and adaptable the functionality of the Web by providing more flexible and adaptable information identification. information identification.

It is called extensible because it is not a fixed format like HTML (a It is called extensible because it is not a fixed format like HTML (a single, predefined markup language). Instead, XML is actually a single, predefined markup language). Instead, XML is actually a ‘Metalanguage’ - a language for describing other languages - which ‘Metalanguage’ - a language for describing other languages - which lets you design your own customized markup languages for limitless lets you design your own customized markup languages for limitless different types of documents. XML can do this because it's written in different types of documents. XML can do this because it's written in SGMLSGML, the International Standard Metalanguage for text markup , the International Standard Metalanguage for text markup systems.systems.

XML is intended to make it easy and straightforward to use SGML on 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 the Web: easy to define document types, easy to author and manage SGML-defined documents, and easy to transmit and share them across SGML-defined documents, and easy to transmit and share them across the internet. the internet.

XML is a simple, very flexible text format derived from SGML. XML is a simple, very flexible text format derived from SGML. Originally designed to meet the challenges of large-scale electronic Originally designed to meet the challenges of large-scale electronic publishing, XML is also playing an increasingly important role in the publishing, XML is also playing an increasingly important role in the exchange of a wide variety of data on the Web and elsewhere.exchange of a wide variety of data on the Web and elsewhere.

These sites will provide more information on XML:These sites will provide more information on XML: http://www.w3schools.com/xml/http://www.w3schools.com/xml/ http://xml.apache.org/http://xml.apache.org/ http://www.ucc.ie/xml/http://www.ucc.ie/xml/ http://www.xml.com/http://www.xml.com/

Back to Other Related Topics

Creating a Form Web PageCreating a Form Web Page Forms are useful in doing things such as surveys, quizzes, or just 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 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, to guess the name of the movie the quote is from, to see it, Click hereClick here))

Forms need to supported through whatever server or network you Forms need to supported through whatever server or network you are on (in this case the we will use the TCNJ network)are on (in this case the we will use the TCNJ network)

First go to First go to http://uss.tcnj.edu/formgenhttp://uss.tcnj.edu/formgen and enter in your UNIX and enter in your UNIX account name. Next, you will have to enter your password to enter account name. Next, you will have to enter your password to enter the form creation site.the form creation site.

One the next page there is a drop down menu with a few options, One the next page there is a drop down menu with a few options, select “Create New Form”. select “Create New Form”.

Follow the directions for creating your form. You will be asked to Follow the directions for creating your form. You will be asked to chose colors and the information that you want to be included chose colors and the information that you want to be included within the form.within the form.

Once the form is created, copy the link and add it to your webpage Once the form is created, copy the link and add it to your webpage so that people can view your form from 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 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 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. Again, follow the steps and your form will be made into a quiz.quiz.

Click here to go back to Main Menu

Designing a Professional Web PageDesigning a Professional Web Page First you will need to decide what you want the web page to First you will need to decide what you want the web page to

accomplishaccomplish Do you want the web page to make people aware of the company and its Do you want the web page to make people aware of the company and its

history?history? Do you want people to be able to make purchases through the web Do you want people to be able to make purchases through the web

page?page? Pictures can help to liven up a web page that is otherwise filled with Pictures can help to liven up a web page that is otherwise filled with

information, but no personal pictures should be displayed. To learn information, but no personal pictures should be displayed. To learn how to add pictures how to add pictures click hereclick here. .

Many companies will provide links to other web pages through their Many companies will provide links to other web pages through their own page. To learn how to add links to your webpage own page. To learn how to add links to your webpage click hereclick here..

Email and contact information may also be a good thing to add to Email and contact information may also be a good thing to add to your website, especially if you want someone to contact you. To your website, especially if you want someone to contact you. To create an email link create an email link click hereclick here..

To have a link to a document that contains important information To have a link to a document that contains important information about you or the company, about you or the company, click here click here to create a link to a document.to create a link to a document.

Click here to go to start Writing Your WebpageClick here to go back to Main Menu

Uploading to the InternetUploading to the Internet Once your webpage files are complete and you feel you are Once your webpage files are complete and you feel you are

ready to have it viewed by the public, you need to upload the ready to have it viewed by the public, you need to upload the files to the internet.files to the internet. First you need to setup your web space (if not done so already)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 Log into your UNIX account (beast.tcnj.edu) using your UNIX user name and passwordpassword

Once logged in type in wwwsetup – this will setup your web space on the TCNJ Once logged in type in wwwsetup – this will setup your web space on the TCNJ serverserver

Next, you need an FTP programNext, you need an FTP program FTP programs can be found at download.com by doing a search for “FTP Programs”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 LETCNJ 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 Once this is installed, open the program and set up the properties for logging inlogging in

The Host/Domain Name is: beast.tcnj.eduThe Host/Domain Name is: beast.tcnj.edu The User ID is: your UNIX login nameThe User ID is: your UNIX login name The Password is: your UNIX passwordThe Password is: your UNIX password

After you log in, go to the www folder. This is the folder which all files 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 onlineneed to be placed into in order for them to be displayed online

Once in this folder, select the [webpage] files you designed that you Once in this folder, select the [webpage] files you designed that you want to put online and transfer them into the www folderwant to put online and transfer them into the www folder

When the transfer is complete you may go to your website and few When the transfer is complete you may go to your website and few your files on the internet (the URL will be: your files on the internet (the URL will be: http://www.http://www.tcnjtcnj..eduedu/~/~YourUNIXNameYourUNIXName Click here to go back to Main Menu

More Helpful LinksMore Helpful Links Interactive HTML TutorialInteractive HTML Tutorialhttp://www.davesite.com/webstation/html/http://www.davesite.com/webstation/html/

HTML Definition and helpful linksHTML Definition and helpful linkshttp://www.webopedia.com/TERM/H/HTML.htmlhttp://www.webopedia.com/TERM/H/HTML.html

This page contains basic information about designing in HTMLThis page contains basic information about designing in HTMLhttp://www.htmlgoodies.com/primers/basics.htmlhttp://www.htmlgoodies.com/primers/basics.html

This link contains helpful information about many of the This link contains helpful information about many of the topics discussedtopics discussed

http://www.cc.http://www.cc.utahutah..eduedu/~/~josephjoseph/Course_Materials//Course_Materials/WebGraphicsWebGraphics//BasicWebGraphicsBasicWebGraphics.html.html

Click here to go back to Main Menu

End of PresentationEnd of Presentation

Click here if you have a question for presentation creator

Click here to beginning of presentation

Click here to go back to Main Menu