Programming Skill Survey
• DO IT NOW
Assignment 1
• Uploaded to course website• Due next Tuesday, Jan 21, at 11:59pm
IST210 3
Chapter 1. Introduction to Database
Previous Lecture
• Potential problems with Lists– Deletion– Update– Insertion
• Avoid these problems using a relational database:– Break a list into several tables, one table for each
theme– Tables can be joined together using the value of the
data
IST210 5
Exercise
• What are the problems with this table.• Split it into multiple tables.• Check whether you split the table correctly.
IST210 6
Relational Databases
• A relational database stores information in tables. Each informational topic is stored in its own table
• In essence, a relational database will break-up a list into several parts. One part for each theme in the list
IST210 7
Answering Query: Putting the Pieces Back Together
• In our relational database, we broke apart our list into several tables. Somehow the tables must be joined back together
• In a relational database, tables are joined together using the value of the data
IST210 8
Query Relational Database: Using One Table
Student Table
Course Table
Registration Table
Query 1:How many students take class 210?
Answer: Check Registration Table to see many rows with CourseID as 210. count = 4
IST210 9
Query Relational Database: Using Two Tables
Query 2:How many students take class taught by Marc?
Student Table
Course Table
Registration Table
Answer: Step 1. Check the CourseID taught by David in Course Table. CourseID = 220Step 2. See how many students taking class with CourseID 220 in Registration Table. count = 2
IST210 10
Query Relational Database: Using Three Tables
Query 3:Who are the students taking class taught by Zihan?
Student Table
Course Table
Registration Table
Answer:Step 1. Check the CourseID taught by Zihan in Course Table. CourseID = 210Step 2. Get the StudentID taking class with CourseID 210 in Registration Table. StudentID 101, 102, 103, 104Step 3. Get the student names in Student Table with StudentID 101, 102, 103, 104. Bob, Lisa, Sarah, Jim
IST210 11
Query Relational Database Student Table
Course Table
Registration Table
In a relational database, to answer a query, tables are joined together using the value of the data in the shared columns
IST210 12
Query Relational Database: Structured Query Language (SQL)
• Structured Query Language (SQL) is an international standard for creating, processing and querying databases and their tables
SELECT Count(StudentID)FROM Course, RegistrationWHERE Course.CourseID = Registration.CourseID AND Course.Instructor = ‘Marc’
Query 2:How many students take class taught by John?Answer: Step 1. Check the CourseID taught by Marc in Course Table. CourseID = 220Step 2. See how many students taking class with CourseID 220 in Registration Table. count = 2
IST210 13
Exercise (cont.)
After you split this table into multiple tables, answer following questions:• Question 1: How many items purchased by Anderson? • Question 2: What items purchased by customers in State
College?
IST210 14
Sounds likeMore Work, Not Less
• A relational database is more complicated than a list
• However, a relational database minimizes data redundancy, preserves complex relationships among topics, and allows for partial data
• Furthermore, a relational database provides a solid foundation for user forms and reports
IST210 15
Chapter 1 Summary
• What is the problem with using a simple list to store the information?– Redundancy, Multiple themes Modification issues
• What is the solution to replace a simple list?– Relational database– Break a simple long list to several tables; each table has
its own theme• How to query a relational database?– Join back the tables by the value of data through shared
columns
IST210 16
HTML Basic I
Keep In Mind
• This is not a programming course!• Programming can be time consuming. Plan
ahead!
IST210 18
HTML: Hyper Text Markup Language
• An HTML document is a text file (script)• A web browser (IE, Firefox, Opera, etc.)
interprets the script and presents appropriate contents
IST210 19
Tags in HTML
• Tags are mainly used to indicate what data is about and for some types of data, how to display it– Document properties– Layout– Text style– Images– Hyper-links
IST210 20
Basic Tags
• Four Basic tags– HTML <html></html>– Head <head></head>– Title <title></title>– Body <body></body>
<html><head>
<title>Hello World</title>
</head><body>
Hello World!</body>
</html>
IST210 21
Try it yourself• Start Notepad• Create an HTML document with all four basic tags– HTML– HEAD– TITLE– BODY
• Save as an html document, e.g. HelloWorld.html– Remember to change “Save as type” to “All Files”. It will be saved as
“.txt” by default.
• To display: Double click or open in a web browser
<html><head>
<title>Hello World</title></head><body>
Hello World!</body>
</html>
IST210 22
HTML Tags: Format• Format tags:– Container tags
• Affect whatever part of the document they contain – bold tag: <b> text </b>– italic tag: <i> text </i>
• <tag_name attribute=value>texts</tag_name>– font tag: <font color="red"> text </font>
– Singular tag• Results in an action where the tag is located in the HTML
– the horizontal line tag: <hr>– line break line tag: <br>
Try it yourself
• bold tag: <b> text </b>• line break line tag: <br>• font tag: <font color="red"> text </font>
<html><head>
<title>Hello World</title></head><body>
Hello World! <br>My name is <b>Zihan</b>. <br><font color="red"> How are you?
</font></body>
</html>
IST210 24
HTML Tags: More Text Styles
Regular <b> bold </b><br>Regular <big> big </big><br>Regular <em> emphasized </em><br>Regular <i> italic </i><br>Regular <small> small </small><br>Regular <strong> strong </strong><br>Regular <sub> subscripted </sub><br>Regular <sup> superscripted </sup><br>Regular <ins> inserted </ins><br>Regular <del> deleted </del><br>
• You are NOT required to remember all of them
IST210 25
HTML Tags: More Fonts• Font is defined by <font> tag, with the following attributes:
– size="number" size="2" Defines the font size – size="+number" size="+1" Increases the font size – size="-number" size="-1" Decreases the font size – face="face-name" face="Times" Defines the font-name – color="color-value" color="#FFFFFF" Defines the font color – color="color-name" color="red" Defines the font color
Regular<br><font size="2">size=2</font><br><font size="+2">size=+2</font><br><font size="-2">size=-2</font><br><font face="Arial">Arial</font><br><font color="#00FF00">Green</font><br><font color="red">Red</font><br>
attribute value
IST210 26
HTML Tags: Heading
• Heading tags: <h1> to <h6>, where <h1> is the largest.
• A blank line is added before/after the heading.
<h1>Heading 1</h1><h2>Heading 2</h2><h3>Heading 3</h3><h4>Heading 4</h4><h5>Heading 5</h5><h6>Heading 6</h6>Regular text
IST210 27
Document Attribute
<html><head>
<title>Hello World</title></head><body bgcolor="black">
<font color="white"> Hello World! </font>
</body></html>
<body bgcolor="black"> text
</body>
IST210 28
HTML Tags: Document Attributes
• Background color• <body bgcolor="#000000">• <body bgcolor="rgb(0,0,0)">• <body bgcolor="black">
• RGB colors• HTML colors are defined using a hexadecimal notation for the
combination of Red, Green, and Blue color values (RGB). The lowest value that can be given to one of the light sources is 0 (hex #00). The highest value is 255 (hex #FF).
• http://www.w3schools.com/HTML/html_colornames.asp
• Background image• <body background=“book.jpg">
IST210 29
HTML Tags: More…• More tags:
– http://www.w3schools.com/tags/default.asp• HTML is not case sensitive, but lower case tags are suggested• “Coding” in HTML is not as strict as in programming languages• You can use html or htm as file extension• Try view page source on any webpage
– On a webpage, right click, click on “View Source”
IST210 30
Place Your Page on Web
• Access your IST web space– Method 1:
– Method 2: Direct access via UNC path: \\upws1.up.ist.local\Users\USERNAME
• The URL for your web space is: http://my.up.ist.psu.edu/USERNAME/helloworld.html
IST210 31
Lab Exercise
• Time and Location– 2:30 – 3:45 PM Thursday– Location: 202 IST Building
• A Simple Personal Webpage– Use the HTML basics you learnt in class to make your homepage and
place it on the web– See the next slide for requirements– If you meet every checkpoint in requirements, let TA take a look and
mark your lab attendance
1. Access your webpage from web2. Use your name as the page title
7. Use yellow background color
6. Hobby in color blue, font Arial, and italic
3. Welcome line in <h1> heading
4. Major in red color
5. Year in font size 8