Inquiry and Design Based Project: Simple HTML Web Page Design

1
Inquiry and Design Based ProjectSimple 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 pages 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
  structure rather 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 ltHTMLgtltHEADgt (you usually
  enter here what document is about, but this is
  not neceassry) and ends with lt/BODYgtlt/HTMLgt. All
  the information you'd like to include in your Web
  page fits in between the ltBODYgt and lt/BODYgt tags
• Starting out with ltHTMLgt 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
• ltbgtText to be boldlt/bgt

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 browsers title bar. The
  code for this can be placed immediately after the
  ltHTMLgt declaration and should look like this
• lttitlegtTitle of Webpagelt/titlegt
• Another option you have is changing the page
  background color, text, and link color
• ltbody bgcolor012345gt changes the background
  color
• ltbody text67890Agt changes the text color
• ltbody linkBCDEF0gt changes the link color
• ltbody vlink123456gt 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
• ltimg src"picture.jpg"gt (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
• ltimg src"image.jpg" height"350" width"200"gt

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 viewers attention
• Select a music file to be played make sure it
  isnt 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
• lta hrefindex.htmlgtYour text herelt/agt
• 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
• lta target"_blank" href"http//www.tcnj.edu/"gtYou
  r text herelt/agtnbsp
• 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)
• lta href"mailtoYourEmailAddressHere"gtEmail
  me!lt/agt
• 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
• lta href"aimgoim?screennameYourScreenNameHere"gtI
  M me!lt/agt

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
• lttablegt
• lttable width400 border3gt
• lt/tablegt
• 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.htm
  l
• http//www.netpanel.com/articles/internet/tables.h
  tm
• 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
• ltMETA http-equivrefresh content0URLindex.htm
  lgt
• 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)
• lta href"http//www.tcnj.edu"gtltimg
  srcpicture1.jpg"gtlt/agt
• To be able to click on a picture and open in
  another window, follow this code
• lta target"_blank" href"http//www.tcnj.edu/"gtlt
  img srcpicture1.jpg"gtlt/agtnbsp
• 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 visitors
  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/quick
  ref/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/We
  bGraphics/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