CSIS-390: Web Application Development

Lab 1: HTML

Goals

Learn about...

  1. HTML Syntax
  2. Semantic Structure
  3. Folder hierarchies for storing static HTML files

Key Concept

HTML is used to give semantic meaning to text and to create hyperlinks to other pages. Folder hierarchies can be used to organize websites with many pages.

Pre-lab

Pre-lab Reading

Pre-lab Activity

  1. Visit W3C HTML Tutorial
  2. Read the tutorial from the HTML Intro to the Chapter on Blocks. The key is to follow along and experiment with the "Try It Yourself" editor.

Use the tutorial to answer the Pre-lab Questions in Blackboard. Be sure to complete the Pre-lab quiz before the start of the lab period. Otherwise, the penalty is 30%.

In-lab

Note that these instructions are not always detailed. You must figure out some of the details by reading the textbook and investigating online sources. You can always ask your instructor for help. If your instructor is busy helping others, raise your hand to make sure the instructor sees that you need help, but then put your hand down and go back to work. As you wait for help, try your best to solve the problem on your own by reading the textbook.

Preparation

  1. For file and folder names only use lowercase letters and never use spaces.
  2. On your network drive or your own flash drive, create a folder for this course called csis390
  3. Inside csis390, create folders called projects and labs.
  4. Inside labs, create folders called lab1, lab2, ..., lab11.

Notepad++

For the first few labs, I will show you some of the features of Notepad++, which we will use for editing. At home you can use the editor or IDE of your choice. Eclipse and NetBeans are popular ones, but one of the goals in this course is to teach students how to debug code using only a text editor and a development server. Students should be wary of dependence on a particular IDE or debugging environment.

In-lab Activity

You can work together with your partner during lab. But after the lab session is over, you must complete this activity independently. Be sure to email your partner relevant files before the end of the lab session. You should not collaborate with your partner outside of the designated two-hour lab session.

Overview: You will use the information you acquired in the pre-lab to create appropriate semantic structure for content from a popular professional sport and then you will organize this content into a folder hierarchy.

Carmelo Anthony
  1. Open Notepad++
  2. Create a new file called anthony_carmelo.html and save the file in your lab1 folder.
  3. Add the minimum HTML document structure shown in the tutorial.
  4. There are many correct ways to markup the content, but there are also incorrect ways. Consult the tutorial and this HTML reference for guidance on using HTML elements appropriately.
  5. While HTML adds formatting that improves the readability of content, another goal in adding HTML is to give the content structure and meaning. Don't worry about how the web page looks; Worry about "tagging" each logical piece of content with the most appropriate HTML element.
  6. Cut and paste the following content into the body of your HTML document and then add the appropriate markup tags. At minimum, you should use the following tags: h1, h2, h3, p, ol, ul, li, dl, dt, dd, table, th, tr, td, strong, img, caption, and a
  7. The content below includes some information and hints inside parenthesis (). Remove the hints as you add your html tags: 
    Player Profile (h1)

Carmelo Anthony #7 (h2)  
Small Forward (h3)
New York Knicks (h4)

Image of Carmelo Anthony (save an image and use the img tag here)

Info (h3)

(use an unordered list  for the content below)

* Height: 6' 8"
* Weight: 230 lbs
* Born: May 29, 1984 in New York, NY (Age: 29)
* Drafted: 2003, 1st Rnd, 3rd by DEN
* College: Syracuse
* Experience: 10 years

Short Biography (h3)

Carmelo Anthony was born in Brooklyn, New York, in 1984. Raised in Baltimore, Anthony became the No. 1 high school player in the country. As a freshman he led Syracuse University to the national title in 2003. That same year he was drafted third overall by the Denver Nuggets, becoming one of the league's top scorers. After seven-plus seasons in Denver he was traded to the New York Knicks in 2011.

Full Biography (find a good external source and link to it)

Stats (h3)

(use a table for the content below)

Recent Statistics*		GP	MPG 	RPG	APG	BLK	STL	PF	TO	PPG
2012-13 Reg. Season		67	37.0	6.9	2.6	0.5	0.8	3.1	2.6	28.7
2012-13 Postseason		12	40.1	6.6	1.6	0.2	1.1	3.8	2.6	28.8
Career            		713	36.3	6.4	3.1	0.5	1.1	3.0	3.0	25.0
* Statistics for Carmelo Anthony (table caption)

All Stats (find a good external source and link to it)

Game Log (Last 5) (h3)

(use an ordered list for the content below)

  1.  Sat 5/18	Loss Indiana 39 PTS
  2.  Thu 5/16	Win  Indiana 28 PTS
  3.  Tue 5/14	Loss Indiana 24 PTS
  4.  Sat 5/11	Loss Indiana 21 PTS
  5.  Tue 5/7	Win  Indiana 32 PTS

Glossary (h4)

(use a definition list, i.e., dl, dt, dd, for the content below)

GP
  Games Played
MPG
  Minutes Per Game
RPG
  Rebounds Per Game
APG
  Assists Per Game  
STL
  STeaLs per game
PF
  Personal Fouls per game
TO
  Turn Overs per game
PPG
  Points Per Game
  8. Save your file
  9. Open your file locally in a web browser to be sure your tags are rendering properly
  10. Make sure your document validates at http://validator.w3.org/#validate_by_upload. Validation will be covered in lecture or lab, but you can ask your instructor for help if you have errors. Warnings are OK.
  11. Show your instructor that the file validates with no errors and only a few warnings.
Lebron James
  1. Be sure your previous file was saved as anthony_carmelo.html in your lab1 folder.
  2. Save a copy of your files as james_lebron.html
    Note: This is known as the "save as" method for creating new instances of structurally similar web pages. It is an OK practice as long as you get the structure of the first page perfect. Later, we will generate pages programmatically, which will make the "save as" look silly.
  3. Use the file as a template, search the Internet and appropriately fill in the information for Lebron James
  4. You do not have to change all the information, just change the basic info, picture, and biography
  5. Save your file
  6. Open your file locally in a web browser to be sure your tags are rendering properly
  7. Make sure your document validates at http://validator.w3.org/#validate_by_upload. Validation will be covered in lecture or lab, but you can ask your instructor for help if you have errors. Warnings are OK.
NY Knicks
  1. In Notepad++, create a new HTML file and save it as ny_knicks.html in your lab1 folder.
  2. Add the minimum HTML document structure that should now be familiar to you.
  3. Cut and paste the following content into the body and then add the appropriate markup tags: 
    Team Profile (h1)

New York Knicks (h2)
Atlantic Division (h3)

2012-13 Season Record (h3)

Overall: 54-28  (use breaks, i.e., br)
vs Atlantic: 10-6

Team leaders (h3)
 
PPG: Anthony 28.7 (use br and make PPG bold using strong)
RPG: Chandler, 10.7
APG: Felton 5.5

Next Game (h3)

Wed, Oct 9 7:30 PM ET @ Boston (use em to make @ Boston italic)


2012-13 NBA Rankings (out of 30 teams) (h3)

(use unordered list for content below)

* POINTS PER GAME	100.0 11th
* REBOUNDS PER GAME 40.6 26th
* ASSISTS PER GAME	19.3 30th
* POINTS ALLOWED  95.7 7th

Current Roster (h3)

(use a table)

NO.	NAME            	POS	AGE	HEIGHT	WEIGT
7	Carmelo Anthony		SF	29	6-8 	230	
--	Andrea Bargnani		C	27	7-0 	256	 
42	Earl Barron   		C	32	7-0 	250
6	Tyson Chandler		C	30	7-1 	240	 
2	Raymond Felton		PG	29	6-1 	205	
10	Tim Hardaway Jr.	SG	21	6-6 	205	
5	C.J. Leslie    		SF	22	6-9 	200	
3	Kenyon Martin		PF	35	6-9 	240	
9	Pablo Prigioni		PG	36	6-3 	185
21	Iman Shumpert		SF	23	6-5 	220	
8	J.R. Smith    		SG	27	6-6 	220	
1	Amar'e Stoudemire	PF	30	6-11	245	
--	Jeremy Tyler		PF	22	6-10	260
19	Beno Udrih     		PG	31	6-3 	203	 
--	Metta World Peace	SF	33	6-7 	260
  4. In the roster above, make the text "Carmelo Anthony" a hyperlink to the page you previously created.
  5. Assume there will eventually be HTML files for all players where the file name is lastname_firstname.html.
  6. Make at least four other player names in the roster hyperlinks.
  7. Think about how we could automatically make the hyperlinks by parsing the player's name. We just need a way to identify and extract the first and last name?
  8. Do not use any periods or punctuation marks in the href of the hyperlink. For instance, "Amar'e Stoudemire" would link to href ="stoudemire_amare.html" and "J.R. Smith" would link to href="smith_jr.html"
  9. Think about how we could automatically remove special character from a name in order to link to the correct file.
  10. Save your file
  11. Open your file locally in a web browser to be sure your tags render properly and your hyperlinks work.
  12. Make sure your document validates at http://validator.w3.org/#validate_by_upload.
Miami Heat
  1. Be sure your previous file is saved as ny_knicks.html
  2. Save a copy of your files as miami_heat.html
  3. Use the file as a template, search the Internet and appropriately fill in the information for the Miami Heat.
  4. You do not have to change all the information, just change the team name, city, and then replace the Knicks roster with just three of Miami's current player (Lebron James, Dwayne Wade, and Chris Bosh).
  5. Save your file
  6. Open your file locally in a web browser to be sure your tags are rendering properly
  7. Make sure your document validates at http://validator.w3.org/#validate_by_upload. Validation will be covered in lecture or lab, but you can ask your instructor for help if you have errors. Warnings are OK.
NBA
  1. In Notepad++, create a new HTML file and save it as nba.html
  2. Save the file in your lab1 folder.
  3. Add the minimum HTML document structure.
  4. Cut and paste the following content into the body and then add the appropriate markup tags: 
    National Basketball Association (h1)

Team Pages (h2)

Eastern Conference (h3)

Atlantic Division (h4)

Boston Celtics	Boston, MA	TD Garden	1946
Brooklyn Nets	Brooklyn, New York City, NY	Barclays Center	1976
New York Knicks	Manhattan, New York City, NY	Madison Square Garden	1946
Philadelphia 76ers	Philadelphia, PA	Wells Fargo Center	1949
Toronto Raptors	Toronto, ON	Air Canada Centre	1995

Central	Division (h4)

Chicago Bulls	Chicago, IL	United Center	1966
Cleveland Cavaliers	Cleveland, OH	Quicken Loans Arena	1970
Detroit Pistons	Auburn Hills, MI	The Palace of Auburn Hills	1948
Indiana Pacers	Indianapolis, IN	Bankers Life Fieldhouse	1976
Milwaukee Bucks	Milwaukee, WI	BMO Harris Bradley Center	1968

Southeast Division (h4)

Atlanta Hawks	Atlanta, GA	Philips Arena	1949
Charlotte Bobcats	Charlotte, NC	Time Warner Cable Arena	2004
Miami Heat	Miami, FL	American Airlines Arena	1988
Orlando Magic	Orlando, FL	Amway Center	1989
Washington Wizards	Washington, D.C.	Verizon Center	1961

Western Conference (h3)

Northwest Division (h4)

Denver Nuggets	Denver, CO	Pepsi Center	1976
Minnesota Timberwolves	Minneapolis, MN	Target Center	1989
Oklahoma City Thunder	Oklahoma City, OK	Chesapeake Energy Arena	1967
Portland Trail Blazers	Portland, OR	Moda Center	1970
Utah Jazz	Salt Lake City, UT	EnergySolutions Arena	1974

Pacific Division (h4)

Golden State Warriors	Oakland, CA	Oracle Arena	1946
Los Angeles Clippers	Los Angeles, CA	Staples Center	1970
Los Angeles Lakers	Los Angeles, CA	Staples Center	1948
Phoenix Suns	Phoenix, AZ	US Airways Center	1968
Sacramento Kings	Sacramento, CA	Sleep Train Arena	1948

Southwest Division (h4)

Dallas Mavericks	Dallas, TX	American Airlines Center	1980
Houston Rockets	Houston, TX	Toyota Center	1967
Memphis Grizzlies	Memphis, TN	FedExForum	1995
New Orleans Pelicans	New Orleans, LA	New Orleans Arena	1988
San Antonio Spurs	San Antonio, TX	AT&T Center	1976
  5. In the content above, make the text "New York Knicks" and "Miami Heat" hyperlinks to the team page you previously created.
  6. Assume there will eventually be HTML files for all teams where the file name is city_teamname.html.
  7. Make hyperlinks for all the teams in the Atlantic Division. Except for the Knicks, these hyperlinks will link to pages that cannot be found, but assume they will eventually be created.
  8. Do not use any periods or punctuation marks in file names or hyperlinks. Only use lower case letter and underscores, i.e., _
  9. Save your file
  10. Open your file locally in a web browser to be sure your tags render properly and your hyperlinks work (for Knicks and Heat).
  11. Make sure your document validates at http://validator.w3.org/#validate_by_upload.
  12. Be sure your file is saved as nba.html in your lab1 folder
  13. Show your instructor that the file validates with no errors and only a few warnings.

Key Dilemma

Consider that to complete an entire website with all 30 NBA team rosters and 15 players per team, we would need over 480 pages. In the near future, we will learn how to create all these pages programmatically by writing scripts to extract data and generate the pages dynamically. But, we must first understand how many websites still use folders to create logical organizations. Putting 480+ web pages in one folder is an organizational disaster because it is hard distinguish player pages from team pages. In the past, sub-folders and index files were used to organize large websites.

Creating Folder Hierarchy
  1. Inside of your lab1 folder, create a subfolder called nba.
  2. Inside of your nba folder, create subfolders called east and west.
  3. Inside of your east folder, create subfolders called atlantic, central and southeast.
  4. Inside of your west folder, create subfolders called northwest, pacific and southwest.
  5. Inside of your atlantic folder, create subfolders for each of the five teams. Use the following convention for naming the folders: city_teamname.
  6. Inside of your southest folder, create a subfolder for the Miami Heat.
  7. Move nba.html into the nba folder and rename nba.html to index.html.
  8. Move ny_knicks.html into the east/atlantic/ny_knicks folder and rename ny_knicks.html to index.html.
  9. Move miami_heat.html into the east/atlantic/ny_knicks folder and rename miami_heat.html to index.html.
  10. Move anthony_carmelo.html to the east/atlantic/ny_knicks folder.
  11. Move james_lebron.html to the east/atlantic/miami_heat folder.
  12. Consider that the hyperlinks in nba/index.html will now have to point to the team pages that are nested, i.e., east/atlantic/ny_knicks/index.html
  13. Update nba/index.html so that the links to the NY Knicks, Miami Heat, and Atlantic Division teams will work.
  14. Consider that the player hyperlinks in east/atlantic/ny_knicks/index.html and east/southeast/miami_heat/index.html do not need to be changed because the hyperlinks will still correctly point to the player pages that reside in each subfolder.

Key Insight

In the late 1990's and early 2000's, website developers realized the importance of directly connecting web servers with database servers. Today, almost every major website is database-driven, which means the underlying content is not stored in HTML files but rather in traditional relational databases. Web pages are generated dynamically by a scripting language. The most popular scripting languages for supporting websites include PHP, JSP, ASP, Ruby, Python, Perl and server-side JavaScript. Compiled languages like Java and C# can also be used to generate websites, but non-compiled languages are more widely used because making changes to the scripts does not require re-compiling and rebuilding full applications. Some web applications require the performance of a compiled language like C# or C++, but most web applications require only basic input/output operations and very little number crunching. Today, creating a serious website starts with thinking about how the website content will be stored in a database.

Lab Questions

Imagine the work involved in creating pages for all the players and teams (over 480) and keeping them organized and updated throughout a season. Imagine if you wanted to change the appearance of all the player pages. Imagine if you wanted to add 10 games instead of 5 to the game log summary. Imagine how you would handle updates as players got drafted, traded, or retired. Not very long ago, large websites were implemented with static web pages organized into logical folder hierarchies. Consider how you would create, organize, and maintain a large website without scripting languages and databases. Life back then was hell.

  1. Describe the exact process of adding a brand new player to the website and assigning him to a team.
  2. Describe everything you would have to do to properly update the website if a player got traded from the Heat to the Knicks.
  3. Consider the naming convention for player files. Why exactly is this a bad idea, especially if we stored all the players in on folder?
  4. If we were going to store this data in a database, how many tables would we create and what would each table store exactly?

Deliverables

  • Go to Blackboard --> CSIS-390 --> Lab Deliverables --> Lab 1
  • In the submission area, answer the Lab Questions above.
  • Create a zip file called nba.zip for your entire nba sub-folder.
  • In the attachment area, browse for your nba.zip file and upload it to Blackboard.