Instructor Information: Mark Jamil questions@markjamil.com WEB 220: CSS Workshop Instructor Information: Mark Jamil questions@markjamil.com
Definitions HTML (hyper-text markup language) Is a computer language used to create websites. CSS (cascading style sheets) Is a computer language used to control HTML elements. It is main purpose is to help centralize management of websites. PHP (personal home page) Is a computer language designed to compliment HTML by providing functionality that HTML normally does not have. It provides a path to operating system resources. Unlike HTML & CSS, PHP is a server side language. SQL (pronounced S-Q-L or sequel) Structured Query Language. Is a computer language used to communicate with most modern database systems. Database Is an organized collection of data used to provide information. Table A data storage method using rows and columns. In computer science, rows are also referred to as “Records” and columns are referred to as “Fields.”
Intro to Software Development Software is the modern method of providing data services. Software can do the following Collect data Distribute data Both of the above Software is useless without data. Data is useless without some way to distribute it.
Intro to Software Development The best way to distribute data to a massive number of people is through the use of the World Wide Network (internet). Modern web browsers create a visual representation of a web page written in HTML and CSS. However, HTML and CSS does not provide a good way to collect data and store it for future distribution. HTML and CSS are not very dynamic. To extend HTML and CSS to become more dynamic, languages like PHP were developed to give access to databases.
Intro to Software Development Using HTML, CSS, and PHP a developer will have the capability to collect user data and provide services that require data storage such as banking and shopping. The best way to store data for internet use is in the form of a database. A database is a collection of data structures designed specifically for fast and efficient data storage. Most databases today rely on the B-Tree data structure to store and retrieve data which provides a O(log n) performance (search, insert, delete)
Intro to HTML Here is a example of a simple html page. <html> <head> <title> My Homepage </title> </head> <body> <p>This is a very simple HTML document.</p> <p>It only has two sentences.</p> </body> </html>
Intro to HTML Important HTML elements: HTML supports 3 types of lists: An Unordered List An Ordered List A Definition List (look this one up if you are interested) Unordered lists <ul> <li>Apples</li> <li>Oranges</li> <li>Bananas</li> </ul> This list will create the following output Apples Oranges Bananas
Intro to HTML Ordered lists <ol> <li>Question 1</li> <li>Question 2</li> <li>Question 3</li> </ol> This list will create the following output Question 1 Question 2 Question 3
Intro to HTML Fruit Vegetable Apple Carrot Orange Pea Pear Turnip Important HTML elements: TABLES <table> <tr> <td>Fruit</td> <td>Vegetable</td> </tr> <tr> <td>Apple</td> <td>Carrot</td> <td>Orange</td> <td>Pea</td> <td>Pear</td> <td>Turnip</td> </tr> </table> Fruit Vegetable Apple Carrot Orange Pea Pear Turnip
Intro to CSS CSS is used to control HTML elements. It is written inside of the HTML page itself or is called from another files (a .css file). CSS can be used in three ways Inline the style rules appear throughout the HTML of the Web page - i.e. in the body. Embedded the style rules are included within the HTML at the top of the Web page - in the head. Linked The style rules are stored in a separate file external to all the Web pages.
Examples of Embedded CSS Within the HTML create a style section: <style type="text/css"> // insert styles here </style> Styles are defined as follows: selector { property: value} CSS styles can have more than one property and value. For example: body {background:black; color:white} p em {background:red; color:white; font-style:italic} p.red {font-family:Arial; color:red} //this is a class selector <p class="red">Red text paragraph</p> a:link {font-family:Arial; color:red; text-decoration:none} //this is an anchor selector
Example of linked CSS To use a .css file you must call the file from within your HTML page like so: <link rel="stylesheet" href="mystyle.css" type="text/css"> Create a file called mystyle.css and inside the file, you can create styles the same way you did with the embedded styles previously: h2 {font-family:Arial; font-style:italic; color:blue} p {font-family:Arial; color:black} p em {background:red; color:white; font-style:italic} p.blue {font-family:Arial; color:blue} p.red {font-family:Arial; color:red}