LAB GOALS
Installing and testing Notepad++ (Text editor)
Step1: To get started, lets google “Notepad++” or simply go to the http://notepad-plus-plus.org/ web site. Then click
the “download” link.
Step2: Select the most current version, and then click “download”. Select the appropriate “.exe” file to install.
Copyright 2017-2020
Step3: Double click the most recent “Installer” file, then click “Run” to install.
Etc.
Step 4: Once the installation is complete, run the Notepad++ program and type the following in the editor.
Step 5: Now save the file in your “….…/lab1/” directory and name the file “lab1.html” (make sure the file type that you
choose is “HTML”)
Step 6: Try loading this file (“lab1.html”) using your favorite browser.
Step 7: Upload the result lab1 folder to canvas.
Copyright 2017
Laboratory Session #2
LAB GOALS
1) Installing and testing WAMP (or LAMP, or XAMPP). These XAMPP includes Apache (web server), MySQL
(database), PHP (language), as well as a few other components.
To get started, lets google “WAMP or XAMPP”. Pick an appropriate site, then click the “download” button.
Below is the example of installing XAMPP
Step 1: Download the “XAMPP” software by clicking the XAMPP link.
Pick the latest version availab
Copyright 2017
Step 2: Use the Installer option. See below:
Step 3: Save and Install the “xampp-win32-7.3.5.0-VC15-installer.exe” (or whatever is the current
version)
Copyright 2017
Step 4: Install the software (will take a few minutes)
Copyright 2017
Step 5: Now, you should have a new “XAMPP Control Panel” icon on your desktop and/or your start
menu. Also, under your C: drive you should see a directory named “xampp” with several
files and folders in it.
Step 6: Start “Apache” and “MySQL” and test your installation:
Copyright 2017
Step 7: Now open a browser window and type the address: “localhost” or “127.1.1.1”
Step 8: Take a screen shot of your browser (it should look similar to the figure above, but don’t be
alarmed if different version of the software look differently) and place it in a word
document and upload it as “lab2.docx” in your labs directory. Later zip your labs directory
and upload it to canvas.
Copyright 2017
Alternatively, to install WAMP or XAMPP lite, see below:
To install WAMP
To install XAMPP lite on a USB (portable) drive, search for it online and also see the following video:
Copyright 2017
© Copyright 2017
Laboratory Session #3
LAB GOALS
• Creating a simple HTML document from scratch.
• Understanding the DOM structure, understating block vs. inline elements
• Use of Head tags (e.g., Title, Meta, etc.)
• Use of Body tags (e.g., header <h1>, paragraph <p>, formatting: bold <b>, italic <i>, etc., special characters,
<img>, link/anchor tag <a ..>, ordered and unordered list <ol> <ul>, <li>, horizontal rule <hr>, line brakes <br>,
DIV)
Using your text editor (Notepad++ / TextWrangler) create a web page like the picture shown below:
Step 1: Start with a simple HTML web site similar to figure below:
<!DOCTYPE html>
<html>
<head>
</head>
<body
© Copyright 2017
</body>
</html>
Step 2: Place the following documentation lines in the HTML file, right below the <!DOCTYPE html>
Your name
Web Programming
Lab: #
Semester, Year
Step 3: Set the title of the web page to “Informatics at IU South Bend”. Then set the keywords for the page to Bachelor of Science in
Informatics, BS in Informatics, Degree Requirement, IUSB, IU South Bend, Indiana University, IT, IT Jobs. Finally make sure
the character set for the web page is set to UTF-8.
Step 4: Create a document heading “Bachelor of Science in Informatics”. Make sure the heading is centered, and has the largest
header tag available.
Step 5: Place the following introductory paragraph below step 4. Make sure it is left justified and it is also emphasized.
Information technology (IT) is rapidly changing the world, creating new challenges and opportunities every day. Informatics
equips students to study IT, consider its social impact, and find ways to use technology to solve problems. The aim is to
produce qualified information technology professionals who understand the ways people work with and use information,
and who can develop solutions that are effective and easy-to-use. Usually, informatics is combined with another field of
study or cognate. A number of cognates have been identified, such as bioinformatics, social informatics, business, new
media, and health care informatics.
Step 6: Include the following image below step 4 and to the right of the paragraph is step 5.
http://cs.iusb.edu/~hhakimza/CSCI-C490_ClientServer/Images/campus4.jpg
Step 7: Create a combination of ordered and unordered lists to capture the degree requirements for the BS in Informatics.
The degree requires a total of 122 credit hours including the following:
FUNDAMENTAL LITERACIES:
1. ENG-W 131 English Composition (3 cr.) A grade of C or better is required.
2. Critical Thinking (3 cr.) e.g., PHIL- P 105, P 110, P 150, or P 250
3. Oral Communication (3 cr.) SPCH-S 121
4. Visual Literary (3 cr.) e.g., INFO-I310, FINA A109, JOUR J210
5. Quantitative Reasoning (3 cr.) Satisfied by required Mathematics courses
6. COAS-Q 110 Information Literacy (1 cr.) Should be taken with ENG W131
7. Computer Literacy (3 cr.) Satisfied by required Computer Science courses
COMMON CORE (12 Credits). At least one of the following must be at the 300 level.
1. The Natural World (3 cr.) e.g., N190 or N390
2. Human Behavior & Social Institutions (3 cr.) e.g., B190 or B399
3. Literary and Intellectual Traditions (3 cr.) e.g., T190 or T390
4. Art, Aesthetics and Creativity (3 cr.) e.g., A190 or A399
CONTEMPORARY SOCIAL VALUES (8 Credits)
1. Non-Western Cultures (3 cr.) e.g., ANTH E105, POLS Y109
2. Diversity in U.S. Society (3 cr.) e.g., SOC S161, HIST H105 or H106
3. Health and Wellness (2 cr.) e.g., HPER N220, NURS B109 plus HPER-E 100-level
LANGUAGE STUDIES (6 Credits)
Two semesters in a single language, or equivalent.
PHYSICAL & LIFE SCIENCES (13 Credits). Courses in at least two different sciences must be taken.
© Copyright 2017
• N190 or N390 (3 cr.)
• Electives chosen from astronomy, biology, chemistry, geology, and physics. (10 cr.)
MATHEMATICS (6 Credits). A grade of C or better in each course is required.
• MATH-M 118 Finite Mathematics (3 cr.)
• 300 level Statistics approved by the informatics director (3 cr.)
INFORMATICS (34 Credits). A grade of C- or better in each course is required. At least 22 of the 34 credits must be taken
within Indiana University.
Thirty-four credit hours in Informatics, to be satisfied with the following core and elective courses: Core:
• INFO-I 101 Introduction to Informatics (4 cr.)
• INFO-I 201 Mathematical Foundations of Informatics (4 cr.) or CSCI-C 251
• INFO-I 202 Social Informatics or SOC-S 260
• INFO-I 210 Information Infrastructure I (4 cr.) or CSCI-C 101
• INFO-I 211 Information Infrastructure II (4 cr.) or CSCI-C 201
• INFO-I 308 Information Representation (3 cr.)
Two of the following four courses:
• INFO-I 300 Human-Computer Interaction (3 cr.)
• INFO-I 303 Organizational Informatics (3 cr.)
• INFO-I 310 Multimedia Arts and Technology (3 cr.)
• INFO-I 320 Distributed Systems and Collaborative Computing (3 cr.)
Capstone:
• INFO-I 450/I451 Design & Development of an Information System (or CSCI-C 308/CSCI-C 442)
Electives: at least 6 credits chosen from Informatics electives (300 level or higher). Prerequisite courses may be required.
COGNATE AREA: (approximately 15-18 Credits)
Course in your area of interest chosen with the consent of your advisor and the director of informatics
GENERAL ELECTIVES: (approximately 3 Credits)
Step 8: Create the following links:
Home http://informatics.iusb.edu/
Courses http://bulletins.iu.edu/iusb/2018-2019/schools/online-collaborative/ojc-informatics.shtml
Advising http://cs.iusb.edu/~hhakimza/Advising/Informatics_Online_Advising_Sheet_2018.xlsx
Faculty http://cs.iusb.edu/people/faculty_staff.html
Step 9: Create 3 block elements: (e.g., div or table)
1) Header
2) Top Navigation
3) Content
Place the elements produced in step 4 in the Header block. (900 pixels wide)
Place the elements produced in step 5, 6, and 7 in the Content block. (900 pixels wide)
Place the elements produced in step 8 in the Top Navigation block. (900 pixels wide)
Step 10: Validate your HTML file by using the W3C validation service. (http://validator.w3.org/). Try to remove as many of the errors
as you can.
© Copyright 2019
Laboratory Session #4
LAB GOALS
• Creating Tables
• Image tag and its attributes
• Using colors / color schemes (http://paletton.com)
(https://www.w3schools.com/colors/colors_picker.asp)
Using your text editor (Notepad++ / TextWrangler) create a web page similar to the picture shown below:
Step 1: Start with a simple HTML web site similar to figure below:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
Step 2: Place the following documentation lines in the HTML file, right below the <!DOCTYPE html>
Your name
Web Programming
Lab: 4 (Creating a HTML Tables)
Semester, Year
Step 3: Set the title of the web page to “Creating HTML Tables”. Then set the keywords for the page to HTML Tables, and Client
Server Web Programming. Finally make sure the character set for the web page is set to UTF-8.
Step 4: Include an image of yourself at the top of the page and center it. Set the height of the image to 140 pixels, and adjust the
width of the image to whatever makes the images properly proportioned. Include a tooltip attribute for the image (try both
“alt” and “title” attributes), so that when the user hovers over your images, your name will appear as alternate text for the
picture.
© Copyright 2019
Step 5: Below the picture, put your “name” and email on two separate lines. Make sure these lines are centered, and are <H2> size.
Step 6: Place the following introductory paragraph below step 4. Make sure it is left justified and it is also bold.
A paragraph (3 to 5 sentences) about yourself, your major, etc.
Step 7: Create a table (15 rows x 6 columns) similar to the one shown below: (Monday through Friday, 8:00am to 8:00pm), Work
Hours shown in BLUE, classes shown in GREEN. Pick different color(s) for other events that you may want to include.
Note that the above table has 2 head rows, and 13 data rows. Investigate the use of <THEAD> and <TBODY>.
Step 8: Create the table tag with header and body. Note in the example below the table body has a border which is 15 pixels
wide.
<table border =’15’ align=’center’>
<thead>
<!– The table head –>
</thead>
<tbody>
© Copyright 2019
<!– The table Body –>
<tbody>
</table>
Step 9: Inside the <thead> ……</thead> tag, create two rows (<tr>) tags to put the table heading <th> information:
<tr>
<th>
Time
</th>
<th>
Monday
</th>
<th>
Tuesday
</th>
…
</tr>
Step 10: Make each weekday column (100) pixels wide by adding a width attribute to the <th> tag:
<th width= ‘100px’>
Step 11: Now add the rows to the table body. Note that each row represents one hour:
<tr>
<td>08:00</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<td>09:00</td>
<td align=’center’ bgcolor=’#3BA3D0′> Tutoring</td>
<td align=’center’ bgcolor=’#3BA3D0′> Tutoring</td>
<td align=’center’ bgcolor=’#3BA3D0′> Tutoring</td>
<td align=’center’ bgcolor=’#3BA3D0′> Tutoring</td>
<td align=’center’ bgcolor=’#3BA3D0′> Tutoring</td>
….
<tr>
<td>15:00</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td align=’center’ bgcolor=’#AAF53D’>CSCI-C490</td>
</tr>
BLUE
background
for work
GREEN
background
for classes
Assignment #1 Web Programming
HTML
(Form, Table, DIV, IMG, etc.)
20 pts.
Due Date (Consult canvas)
Complete Labs (1,2,3 and 4)
prior to attempting this
assignment.
Create a website similar to the initial page shown in
facebook.com.
https://www.facebook.com/
The site should be called “nosebook” should provide the
following features:
1) Meta information identifying the page developer
(you), assignment #, course, see your previous
labs as guideline.
2) Heading with background similar to the one
shown below (or color combination of your choosing), image shown below (nose1.png), 2 textboxes for email and
password, and one “log in” button. In order to have control over the positioning of the information in the heading
you probably need to either use <div> or <table> tags.
Email
Password
Nosebook is for inquisitive
people who want to know what
everyone else is doing in their
lives.
Sign Up
First Name:
Last Name:
Your Email:
Reenter Email:
New Password:
Birthday:
Gender: Male
Female
M Day Year
© Copyright 2019 by Nosebook.com
Log In
Sign Up
3) Below the heading, we need three regions. (Left, Middle, Right)
4) The left region will display an image (nosebook.gif). The image should be centered.
5) The middle region will display an image (nos3.png) and some text below it. The image should be centered.
6) The right region has a “Sign in” form, with several textboxes, 3 combo boxes and 2 radio buttons.
7) Note that the textboxes, combo boxes and radio buttons in the form are all lined up. You may want to consider
using a table to achieve this look.
8) Note the last line on the bottom of the web page. The line starts with a © symbol.
The images for this page can be found at:
http://cs.iusb.edu/~hhakimza/INFO-C413/Assigns/Assign1_Images/login.gif
http://cs.iusb.edu/~hhakimza/INFO-C413/Assigns/Assign1_Images/nose1.png
http://cs.iusb.edu/~hhakimza/INFO-C413/Assigns/Assign1_Images/nose2.png
http://cs.iusb.edu/~hhakimza/INFO-C413/Assigns/Assign1_Images/nose3.png
http://cs.iusb.edu/~hhakimza/INFO-C413/Assigns/Assign1_Images/nosebook.gif
http://cs.iusb.edu/~hhakimza/INFO-C413/Assigns/Assign1_Images/signup.gif
Note:
The figure below is an implementation of this assignment. I have changed the background color of each region to give you
some idea as to how to organize the regions within the page. Also, note the black horizontal bars separating the header
from the main section of the web page.
Hacker’s Corner
If you finish the assignment before the due date and want to do more, consider creating two
PHP programs to simply process each of the buttons above. “login.php” should use the GET
or POST method to extract the data from the Email and Password textboxes and display
their contents. Similarly, the “signup.php” should use the same method to extract the data
from the “sign up” form and display the content.
Good luck.
