Advanced Web Design 1

Size: px

Start display at page:

Download "Advanced Web Design 1"

Austen Skinner
5 years ago
Views:

Advanced Web Design 1 Review of HTML General HTML Page Template <HTML><HEAD><TITLE> </TITLE></HEAD> <BODY> </BODY> </HTML> Can be created in any text editor (Word, Wordpad, Notepad, etc.

In Notepad it would be: In most cases HTML tags are not case sensitive File Save As Name the file with a.html extension and choose the All Files file type: The website home page is always named index.

1 Advanced Web Design 1 Review of HTML General HTML Page Template <HTML><HEAD><TITLE> </TITLE></HEAD> <BODY> </BODY> </HTML> Can be created in any text editor (Word, Wordpad, Notepad, etc.) The title that appears in the browser is placed between the <TITLE> and the </TITLE> tags The page contents are placed between the <BODY> and the </BODY> tags The document is saved as an HTML file. In Notepad it would be: In most cases HTML tags are not case sensitive File Save As Name the file with a.html extension and choose the All Files file type: The website home page is always named index.html Opening the html file causes its contents to be displayed in the web browser Viewing the Page Contents Selecting the HTML file icon and choosing the File Open With Notepad option will open an html file in Notepad so that its code can be viewed and edited.

2 Advanced Web Design 2 Editing a Web Page White Space &nbsp If the page being edited is open in the browser, after editing the code and saving it, clicking the Refresh Button will cause the changes to appear in the browser. Causes a character space to appear on the page (like pressing the space bar on the keyboard) Several spaces can be strung together using a semi-colon between each Do not place a semi-colon after the last one &nbsp Line Break Tag <BR> Like pressing the ENTER key Paragraph Tag <P> Like pressing the ENTER key with a double space Horizontal Rule Tag <HR> Parameters: Color = The horizontal rule color Width = Width of the rule in pixels Size = Line thickness in pixels

3 Advanced Web Design 3 Styles Bold Tag <B> </B> All text between the <B> and the </B> tag is bold Italics Tag <I> </I> All text between the <I> and the</i> tag is italics Underline Tag <U> </U> All text between the <U> and the </U> tag is underlined Blockquote Tag <BLOCKQUOTE> </BLOCKQUOTE> <BLOCKQUOTE> All text between the blockquote tag and the close blockquote tag is indented in from the left and from the right margins. It is usually used to set off a section of text quoted from another source. </BLOCKQUOTE> Super Script Tag <SUP> </SUP> All text between the <SUP> tag and the </SUP> tags are raised and made smaller like an exponent Sub Script Tag <SUB> </SUB> All text between the <SUB> tag and the </SUB> tags is lowered and made smaller

4 Advanced Web Design 4 Lists Ordered List <OL> <LI> First Item <LI> Second Item </OL> 1. First Item 2. Second Item Unordered List <UL> <LI> First Item <LI>Second Item </UL> First Item Second Item Lists can be nested inside each other as well Images <IMG SRC= [Name of Image File] ALIGN=[LEFT OR RIGHT]> Aligning the image left will force following text to be aligned to the right of the image Aligning the image right will force following text to be aligned to the left of the image Links To go to that page, <A HREF= page2.html > Click here </A>. To go to that page Click here. Clicking on the words Click here will open the page2.html page in the browser.

Advanced Web Design 5 Tables <TABLE WIDTH=1000 CELLPADDING=20 CELLSPACING=10> <TR> <TD WIDTH=1000 HEIGHT=100 COLSPAN=2> <H1><CENTER>This is the Heading</CENTER></H1> <TR> </TD> <TD WIDTH=500

5 Advanced Web Design 5 Tables <TABLE WIDTH=1000 CELLPADDING=20 CELLSPACING=10> <TR> <TD WIDTH=1000 HEIGHT=100 COLSPAN=2> <H1><CENTER>This is the Heading</CENTER></H1> <TR> </TD> <TD WIDTH=500 HEIGHT=300 BGCOLOR="RED" VALIGN=TOP> <FONT COLOR="WHITE" FACE="ARIAL" SIZE=4> This is text </FONT> </TD> <TD WIDTH=500 BGCOLOR="YELLOW" VALIGN= BOTTOM > <FONTFACE="ARIAL" SIZE=4> This is text </FONT> </TD> </TABLE> The output for this page appears below:

6 Advanced Web Design 6 <TABLE> = Opens the table and establishes a total width, background color, cell padding, cell spacing, etc. Cell Padding = Number of pixels between the edge of a cell and the contents it contains in the table Cell Spacing = Number of pixels between columns and rows in a table <ROW> = Begins a new row in a table (need not be closed with a </ROW> tag) <TD> = Starts a column in the most recently opened row. Includes the width of the column in that row in pixels The first column in each row establishes the height of each column in that row and is therefore not required in subsequent columns in the row BGCOLOR parameter establishes the background color of that particular cell VALIGN establishes how contents in that cell are aligned vertically (default is center) MUST BE CLOSED WITH A </TD>

7 Advanced Web Design 7 XHTML Document Type XHTML comes in essentially two types Transitional and Strict. Transitional This document type is more forgiving in the event code is written that does not comply with XHTML conventions exactly. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " Strict This document type relies on the writer to comply completely with XHTML conventions and is the ultimate goal of web writers. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " HTML Tag The HTML tag in an XHTML document looks like this: <html xmlns=" The xmlns portion of the tag refers to the xml name space and points to the URL where this information is stored on the Internet. HEAD Tag The HEAD tag can include the title tag and several meta tags. An example appears below: <head> </head> <TITLE> Test Page for preformat </TITLE> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="refresh" content="10; url= /> <title> Test XHTML Web Page </title> <meta name="keywords" content="preformat, XHTML, meta tags" /> In this HEAD tag, we have added the title of the page to appear in the title bar of the browser. We have added several meta tags to 1) Designate the character set for the page; 2) Designate a different page to link to (after 10 seconds in this case); 3) Keywords to be used by search engines when users type keywords in it.

8 Advanced Web Design 8 Non-Terminated Tags Some tags do not require a closing tag. For instance, in the example above, each meta tag ends with a slash close ( /> ). This is how XHTML processes these types of tags. Another example would be the horizontal rule tag: Horizontal Rule Horizontal rules are created in XHTML basically the same as HTML except for the nonterminated tag procedure (see above). There are additional differences in attributes as well: Plain horizontal rule - <hr /> Width percentage - <hr width= 75% /> Alignment - <hr align= center /> Turn off shading - <hr noshade= noshade /> Of course, several attributes can be included in a single tag, separated by a space. Definition Lists Definition lists consist of the definition list tag ( <dl>), the definition term tag ( <dt> ), and the term for the definition term ( <dd> ). An example appears below: <Body> <H1>An Animal List </H1> <HR Width="33%" Size="5" Color="Red" align="left" /> <dl> <dt> Mammals </dt> <dd> Bear live young </dd> <dd> Skin includes hair </dd> <dt> Insects </dt> <dd> Have six legs </dd> <dd> Have wings </dd> <dd> Have an exoskeleton </dd> </dl> </Body>

9 Advanced Web Design 9 Opening a New Window with a Link Normally, when linking to another web page, the browser opens another instance of itself and opens the page linked to. Often, it is preferable for the user to remain in your web page and simply open another window or tab to display the new page. To do this, simply add a target attribute to the anchor tag: <a href= target=_ blank > Linking to Non-HTML Pages Many web sites include the ability to view or download non-html documents such as Zip, PDF, Word, Excel, or PowerPoint documents. To do this, simply replace the URL portion of the anchor tag with the name of the document: Include the file extension of the document (i.e..doc for a Word document,.pdf for a PDF document,.zip for a zipped file etc.) Most browsers, when accessing one of these file types will give the user the option to either open OR download the document. Images in XHTML XHTML requires the image tag to include alternative text to each image using the alt parameter. The alt parameter displays text describing the image to be displayed prior to displaying the actual image: <img src="tee2.gif" alt="tulpehocken T" /> This allows slow downloads to prepare the user for the picture about to be displayed and informs him/her that the browser is indeed working on the download. It also allows sight impaired users equipped with voice software to hear the information about the soon-to-beopened graphic without actually seeing it.

10 Cascading Style Sheets (CSS) CSS is used to separate a web page style from its structure. Advanced Web Design 10 Deprecation To deprecate something means to render it antiquated or no longer useful. XHTML, as discussed previously, has made changes in the way markup elements and attributes are used and coded. This is because the old version of HTML includes both content elements as well as presentation controls. Now, XHTML has remained in control of content while CSS is now in control of presentation. Browsers today still recognize and execute the older HTML code but there is no guarantee that they will continue to do so in the future. Therefore, today s web designers need to avoid deprecated code in favor of the newer XHTML and CSS approach. Deprecated HTML Markup Elements Name Type Description Alternative applet pair Invoke Java Applets object basefont pair Base Font Size CSS font controls center pair Shorthand for CSS text alignment <div align= center > controls dir pair Directory list type <ul> With CSS formatting font pair Local font assignment CSS font-family isindex empty Single line input prompt HTML forms markup menu pair List type for menu <ul> With CSS options formatting s pair Strikethrough text CSS text-decoration strike pair Strikethrough text CSS text-decoration u pair Underline text CSS text-decoration

11 Advanced Web Design 11 Common Deprecated Attributes Name Related Elements Type Description Align Caption %CAlign Table caption alignment Align applet, iframe, img, Vertical or Horizontal %IAlign input, object alignment Align Table %TAlign Table position relative to window Align col LCRJ Table alignment background Body %URI Image file for doc. background Bgcolor table, tr, td, th %Color Table element background color Bgcolor Body %Color General document background color Border img, object %Pixels Width for link border Color basefont, font %Color Text Color Face basefont, font CDATA Comma-separated list of font names Height td, th %Length Table cell height Hspace applet, img, object %Pixels Horizontal gutter around box Link Body %Color Color for links in the document body Size HR %Pixels Size of a horizontal rule Size Basefont CDATA Base font size Text Body %Color Document text color Vlink Body %Color Color of visited links Vspace applet, img, object %Pixels Vertical gutter around box Width Hr %Length Horizontal rule width Width td, th %Length Table cell width Property Measurement Values Absolute Measurement Inches -.75in Centimeters 5cm Millimeters 10mm Picas 2pc (6 picas equal one inch) Points 28pt (12 points equal one pica) Pixels 15px (Dictated by the number of pixels on the user s screen)

12 Advanced Web Design 12 Relative Measurement Relative measurements are reference a portion of the current size: p% - 75% (A percentage of the current font-size value) ex 1.25ex (Multiplied by the current x-height of the lower case font) ( 1 ¼ times the current font-size x-height) em 2em (A value multiplied by the current font size) (12pt font changed by 2em doubles it to 24pt) Three Ways to Use CSS Style sheets can be implemented in three ways: Inline Style Added to individual XHTML elements Internal Style Style instructions in an XHTML <HEAD> section External Style Sheet Reference a separate style sheet inside the XHTML document CSS Structure and Syntax A style sheet is made up of style rules, each of which has two parts: Selector Specifies the markup element to which the style is applied Declaration Specifies how content described by the markup and consists of: o Properties aspects of how the computer displays text and graphics (i.e. size or color) o Values Data specifying how the text or images should look on the page (i.e. 18pt. font size or a blue background) The general syntax for a style rule: selector {declaration} Or, more specifically selector {property: value;} Rules: Declarations are contained inside curly braces { } Separate property and its value with a colon ( : ) Declarations are always ended with a semicolon ( ; ) Multiple options for a declaration are separated by a comma (, ) o If any property or value is comprised of more than one word such as a font-style like Times New Roman, it must be enclosed inside quotation marks o The first property or value is the first choice, followed in order by the other values separated by commas

13 Advanced Web Design 13 Below is an example of a simple style: Here, the first font-family option is Harlow Solid Italic. If this is not available, it reverts to Arial The accompanying code appears below: The resulting page appears below:

14 Advanced Web Design 14 The entire page markup (cropped a bit to the right) appears below: Style Classes Maybe it is necessary to assign a selector a rule only if it applies to a certain criteria. For instance, perhaps all paragraphs in the document that explain something are to be in green Forte italics font. We would make a rule for the paragraph element and we could call it explanation (or whatever name is desired): Create the style class in the <style type= text/css > element. Apply the class using class=<class name> The

Advanced Web Design 15 The resulting page looks like this: Creating Classes Not Associated with an Element It is possible to create a class that can be applied to

Use it with an element whether they are in a regular paragraph or a heading: Here is the result: Use it by itself using the <Span class= [class name] > </Span> tags.

15 Advanced Web Design 15 The resulting page looks like this: Creating Classes Not Associated with an Element It is possible to create a class that can be applied to many elements. For instance, maybe we want all quotations to look the same Create the class without an element designation before the name. Use it with an element whether they are in a regular paragraph or a heading: Here is the result: Use it by itself using the <Span class= [class name] > </Span> tags. Note that the class settings override the element settings. So, even though the Quoth the Raven, Nevermore line is inside a <H1> element, it takes the style from its assigned quotation class.

16 Advanced Web Design 16 Style IDs A style ID can be applied to any instance of an element but not necessarily to all of them. For instance, if we wanted to create an ID to indent the first word of a paragraph: Create the ID preceding its name with a pound sign ( # ) and include the text-indent declaration for ½ inch. Include the ID in any paragraph tags in which a ½ inch indent is desired. Below is the result: Different Kinds of Style Sheets Add the style attribute directly into any individual element in the page: i.e. - <H1 style="font-size:30px; font-family:arial; color:red"> This method is not recommended as it is just a cumbersome as the old HTML attributes. Internal Style Sheet where styles are delineated between the </head> and <Body> tags and these styles live in that document only. All of the preceding examples show this method. External Style Sheet where a separate style sheet is created and the styles are imported from the style sheet after it has been linked to the XHTML document. Unlike the Internal Style Sheet, the External Style Sheet can be used to make sure all documents in a site are structured identically.

17 Advanced Web Design 17 External Style Sheets Here is an example of an external style sheet to create the following page: The CSS style sheet code for this page is: Body{font-family:Arial; font-size:30px; color:blue; } p.explanation{font-family:forte; color:green; font-style:italic; } The HTML code linking to the CSS style sheet is: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tranditional //EN" " <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title> Test XHTML Web Page </title> <link rel="stylesheet" type="text/css" href="style1.css"> </head> <style " </style> Create the link inside the <head> tag Import the styles sheet inside the <style> tag.

Advanced Web Design 18 Inheritance Rules Web pages could link to an external style sheet (style1). This style sheet could, in turn, link to another external style sheet (style2).

18 Advanced Web Design 18 Inheritance Rules Web pages could link to an external style sheet (style1). This style sheet could, in turn, link to another external style sheet (style2). The style in the style1 sheet supersedes the style2 style sheet. Style2 style sheet Links To Style1 style sheet Links To Web Page So, in the case above: 1. All of Style2 s selectors not included in the Style1 style sheet, apply to the web page 2. Any selectors included in both style sheets will be controlled by the Style1 s declarations 3. The web page s internal style sheet will, in turn control any selectors included in either of the external style sheets 4. Any inline styles in the web page will control that particular instance of that selector Below is an example: Here are the two style sheets: Style1.css includes a body style as well as a style for the p.explanation selector Style2.css includes its own body style AND imports Style1.css o It, therefore, inherits all of the settings in Style1.css (including the p.explanation class) o It also creates AND OVERWRITES the body selector it inherited from Style1.css Here is the XHTML document: It links to and imports the Style2.css style sheet Therefore, it inherits the Style1.css styles through Style2.css

Advanced Web Design 19 Below is the resulting web page: It includes the style for the body selector gotten from the Style2.css style sheet it imported and linked to It also includes the p.

19 Advanced Web Design 19 Below is the resulting web page: It includes the style for the body selector gotten from the Style2.css style sheet it imported and linked to It also includes the p.explanation style inherited from the Style1.css style sheet General Suggestions for Use Use internal styles to create the look and feel desired in a test page After the desired results have been achieved in the test page, move those settings to an external style sheet to be used by all pages in the site Alignment and Layout Here is an example of a web page that includes positioning objects:

Advanced Web Design 20 Here is the code that created the page: 2 4 6 7 3 1 5 1. Set color for the background, bottom border, and right border color 2.

20 Advanced Web Design 20 Here is the code that created the page: Set color for the background, bottom border, and right border color 2. Border width and styles in order top right bottom left 3. Display sets the box type to block style 4. Float aligns the box right 5. Sets margins (inside object) and padding (outside object) in order topright bottom left 6. Width and line height 7. Positions the picture an absolute distance from the top and left of the page

21 Advanced Web Design 21 Overlapping Objects on a page appear with the last object added at the top of the stack. It can be changed using the z-index property. For instance, to move the picture behind the list box, change the style to this: #tpic{ } position: absolute; top:170px; left:740px; z-index:-1; The negative 1 designation moves the picture behind everything else on the page. Hyperlinks Creating links to other pages using CSS affords several options for the a tag: text-decoration How the link text will appear o none turns off all underlining font-weight The style of the text o bold Sets all link text to bold link Color of un-visited links visited Color of visited links hover Behavior of links that are pointed to Below, is an example of an internal style sheet that sets the anchor tag as well as the heading 1 tag: Previously visited and not pointed to Previously visited and hovered over

Advanced Web Design 22 Externalizing Style Sheets It is always best to experiment with styles in an internal style sheet within one web page until the desired results are achieved.

22 Advanced Web Design 22 Externalizing Style Sheets It is always best to experiment with styles in an internal style sheet within one web page until the desired results are achieved. Then, create the external style sheet upon which all pages in the site will obtain their look and feel. Copy everything between the <style> and the </style> tags Paste this text inside a new document in Notepad, WordPad, Word, etc. Save the text document as a CSS document by using the.css xtension Each web page that uses the external style sheet needs to EITHER o LINK to the external style sheet by putting the link inside the <head> tag <link rel="stylesheet" type="text/css" href="style2.css"> In the above case, the CSS document used for this web page is called Style2.css The link tag is understood by all CSS enabled browsers o IMPORT the CSS style into the web page <style " </style> keyword is placed inside <style> tags located after the </head> tag Only newer browsers understand the import keyword A Good Tutorial Now that the basic syntax and usage have been explained, specific examples can be seen at CSS Exercise 1 Backgrounds Create the following web page using an internal style sheet to give the page a background color of your choosing: example: <style type="text/css"> body{background-color:#fafad2;} </style>

Advanced Web Design 23 Background Image Create the following web page using

{background-image:url('simplebackgroundimage.

the above web using a smaller image that will tile: Using the repeat

23 Advanced Web Design 23 Background Image Create the following web page using the background-image property: body {background-image:url('simplebackgroundimage.jpg');} Handling Tiled Image Backgrounds Using any available image, change the above web using a smaller image that will tile: Using the repeat Declaration Change the previous exercise by setting the background-repeat directive to no-repeat: body {background-image:url('tee2.gif'); background-repeat:no-repeat;}

Using the Position Declaration Advanced Web Design 24 Place the non-repeated background image so its center is placed at the right top of the page: background-position: right center; Repeat-x and

24 Using the Position Declaration Advanced Web Design 24 Place the non-repeated background image so its center is placed at the right top of the page: background-position: right center; Repeat-x and Repeat-y Change the repeat declaration property to repeat-y to have the image repeat vertically (Using repeat-x repeats it horizontally). background-repeat: repeat-y background-position: right center;

Advanced Web Design 25 Background Size Set the background size of the document using the large image that covers the whole page to 500 pixels wide by 200 pixels high (Note: Internet Explorer9.

25 Advanced Web Design 25 Background Size Set the background size of the document using the large image that covers the whole page to 500 pixels wide by 200 pixels high (Note: Internet Explorer9.0 or later) background-size: 500px 200px; background-repeat: no-repeat;} Text Color Can be: Hexadecimal body{color: #34bf89;} This is light red, heavy green, and moderately heavy blue for default text color RGB h1{color: rgb(255,0,0); } This is all red text for heading 1 Color Name h2{color: blue;} This sets heading 2 text color to blue Text Alignment Can be : Centered h1 {text-align : center;} Aligns heading 1 text center Right h2{text-align : right;} Aligns all heading 2 text to the right Justified p.main {text-align: justify;} Sets all text using the main class in the paragraph selector to stretch from left to right margins Text Decoration Text decoration includes underline, line-through, overline, and blinking (blinking is not available in all browsers). Most of the time, it is used to remove underlines in links. Below is an example of a typical link style using text-decoration to turn off underlines until the mouse hovers over it: <style type="text/css"> a{text-decoration:none; font-weight:bold} a:link {color:green} a:visited {color: red} a:hover {text-decoration: underline} </style>

26 Advanced Web Design 26 Text Transformation Text transformation Is used to designate text as UPPER CASE, lower case, or Capitalize. <style type="text/css"> h1{font-family:arial; font-size:25px;} h1.capitalize {text-transform:capitalize;} h1.upper {text-transform:uppercase;} </style> <Body> <h1 class="capitalize">this is the capitalized class of h1</h1> <p /> <h1 class="upper"> this is the upper case class of h1 </h1> </Body> Text Indent Indents the text a given distance: h1.upper {text-transform:uppercase; text-indent:30px; }

Advanced Web Design 27 CSS Exercise 2 Working With Text Using the text styles discussed above, create the following page: The body text is o Hexadecimal color fafad2, red, 20 pixels, indented 30

27 Advanced Web Design 27 CSS Exercise 2 Working With Text Using the text styles discussed above, create the following page: The body text is o Hexadecimal color fafad2, red, 20 pixels, indented 30 pixels H1 for the first line o main class, blue Forte text, aligned center, size 3 times body text, capitalized transformation, no indent Sub H1 Lines o Internal class, green Arial text, sized 1 ½ times body text, uppercase transformation, no indent Note that setting the font size requires the font-size declaration for the body and the two h1 classes (See the section on Property Measurement Values discussed earlier). Font Size As per the discussion on Property Measurement Values earlier, the font size can be set as an absolute value such as pixels or picas. It can also be set in relative values such as percentage of the default body font size or as a multiple of the default font size. This was done in the previous exercise but just for clarification, here is what was needed in that exercise (font-size only): Default Body body {font-size:20px;} h1.main {font-size:3em;} h1.internal {font-size;1.5em;}

28 Advanced Web Design 28 Note that the default font size, if not designated in the body style, is 16 pixels (16px). If a body font-size setting is set to 100%, it will set the default to 16 pixels and subsequent selector settings can then be set using the em relative settings: body {font-size:100%;} h1.main {font-size:3em;} h1.internal {font-size;1.5em;} In the above example, the default size has been established as 16 pixels (100% of default) and the h1 selector classes (main and internal) have been set to 3 times and 1 ½ times 16 pixels respectively. Font Style The font-style property is used to set the style. Typical font-style values are normal, italic, oblique (similar to italic but not as distinctive), and inherited (Not supported by all browsers, it sets the style to be inherited from the parent element). Font Variant The font-variant property has the normal, small-caps, and inherit (Not supported by all browsers) values. Font Weight The font-weight property has the normal, bold, bolder, lighter, and a series of multiples of 100 ( ) that gives the designer more options. In this case, 400 is normal with lower numbers being lighter and higher values being bolder. CSS Exercise 3 Font Weights and Styles A graphic of a web page is shown below. Read it to see what types of paragraph classes are required and how they should appear. Note that the <h1> tag includes small-caps, underlined, Arial font, red, aligned left. Because the graphic cannot be enlarged in order to show all of its contents, a listing of the smallest text appears here: This is an example of the small paragraph class. Its font-size is 50% of default but its weight is set to 700. It is indented 20 pixels. Use an external style sheet saved in a sub-folder, and link it to the web page.

Advanced Web Design 29 Height, Width, Line Height,

the height of a paragraph and width will set its

regular class style with these p property values:

29 Advanced Web Design 29 Height, Width, Line Height, and Letter Spacing Height can be used to specify the height of a paragraph and width will set its width. regular class style with these p property values: height:45px; width:500px; regular class style with these property values: height:45px; width:400px;

big {height:200px; width:200px;} </style> <Body> This is a web page using an internal style sheet to establish a background image. <img class="small" src="tee2.gif"> <p /> <img class="big" src="tee2.

30 Advanced Web Design 30 The page to the left was created using two classes of img selectors. One called small and the other called big. <style type="text/css"> body {background: url(simplebackgroundimage.jpg); background-size: 500px 200px; background-repeat: no-repeat;} img.small {height:50px; width:50px;} img.big {height:200px; width:200px;} </style> <Body> This is a web page using an internal style sheet to establish a background image. <img class="small" src="tee2.gif"> <p /> <img class="big" src="tee2.gif"> </Body> Line Height The line-height property sets the height of lines in a selector (usually the p selector). It can be set as pixels, picas, etc. just like font-size. It can also be done as a relative value (percentage of default or a number multiplier of the default). Here, the small p class has had its line-height changed to 20px o line-height:20px; The regular p class has had its lineheight changed to 3 times the default o line-height:3;

either an internal or external style sheet: h1 style for the top heading h2 class for political quotes h2 class for literature quotes h2 class for religious quotes p class for the source of the quote

31 Advanced Web Design 31 Letter Spacing This property places a designated amount of space between letters. Below is an example of a letter-spacing value of 2px: The regular p class letter-spacing value set to 2 pixels o letter-spacing:2px; CSS Exercise 4 Spacing and Height Create the following page using either an internal or external style sheet: h1 style for the top heading h2 class for political quotes h2 class for literature quotes h2 class for religious quotes p class for the source of the quote All h2 classes include letter spacing of 2 pixels, line height of 10 pixels, font size twice the default size, plus fonts and colors similar to those shown above. The paragraph class includes a line height of 15 pixels. Lists In XHTML, lists are stacked in the same manner as HTML with one exception all <li> tags need to be closed ( </li> ). With CSS involved, it is possible to create styles for several levels: ol.level1 {list-style-type: upper-roman; font-family:arial; color:blue;} ol.level3 {list-style-type: lower-alpha; font-family:garamond; color:red;} ul.level2 {list-style-type: none; font-family:tahoma; color:green;}

32 Advanced Web Design 32 CSS Exercise 5 Lists Create the following page using <ol> and <ul> styles. Note that the text of the exercise itself explains the various properties: Tables CSS offers style settings for table, th, and td selectors. The general syntax is the same as with html. Below is a review of that syntax: <table> </table> <tr> <th> some text </th> </tr>

33 Advanced Web Design 33 CSS Exercise 6 Tables Read the information in the following table and, using that information, create the table. You may pick the colors and border styles: CSS Box Model The Box Model is used to wrap around an object or text. It can then be positioned on the page in relation to other objects. Below is an example of using the box model with some text and an image: <style type="text/css"> div.box {width:300px; height:200px; border:10px solid red; margin-right:100px; margin- top:30px; padding:10px; float:left;} div.pic {width:300px; height:300px; border:0px; margin-left:100px; margin-right:100px; float:left;} </style> 2 <div class="box"> Here is an example of a box. <br /> I am using its width, padding, <br /> border, and margin to place it <br /> in the document. Here is its style: <br /> div.box {width:300px; height:200px; <br /> border:10px solid red; margin-right:100px; <br /> margin-top:30px; padding:10px; float:left;} <br /> Its text appears between the div and <br /> /div tags. </div> 1 <div class="pic"> <img src = Tee2.gif width=300 height=300 /> </div> The top two boxes in the page shown below is the result of the code above. the margin-left property in the div.pic class. 2 1 Adding to

Boxes Create the following page using four boxes to place text or graphics in the

34 Advanced Web Design 34 Of course, additional control can be accomplished using the position: absolute; top: px; right: px; bottom: px; left: px; CSS Exercise 7 Using Boxes Create the following page using four boxes to place text or graphics in the page. Adjust margins and sizes to get the page to look as close to the one below:

Advanced Web Design 35 Border Borders can be set around any object on the page including paragraphs. The border-style determines how the border will look.

Here is a table of examples: Individual borders can also be set: p {border-top-style:solid; border-right-style:dashed; border-bottom-style:dotted; border-leftstyle:none;} In addition, there is a

35 Advanced Web Design 35 Border Borders can be set around any object on the page including paragraphs. The border-style determines how the border will look. The border-width will determine how wide the border will be. The border-color will set its color. Here is a table of examples: Individual borders can also be set: p {border-top-style:solid; border-right-style:dashed; border-bottom-style:dotted; border-leftstyle:none;} In addition, there is a shortcut method of setting separate borders. The sides must be designated in this order: top right bottom left. The shortcut command for each border separately could look like this: p {border-style:dotted solid double dashed;} In this case, top is dotted, right is solid, bottom is double, and left is dashed. p {border-style:dotted solid double;} will do top dotted, right AND left solid, and bottom double. p{border-style:dotted solid;} will do top AND bottom dotted with right AND left solid. A shorthand for all three properties is done in this order width, style, and color. p {border: 10px inset blue;}

Advanced Web Design 36 CSS Exercise 8 - Borders Add some border style, color, and width to the styles in CSS Exercise 7 done previously. You pick them.

An example appears below: Outline The outline property differs from the border property in that the outline in not included in the width or height of the object. It is outside of the object.

36 Advanced Web Design 36 CSS Exercise 8 - Borders Add some border style, color, and width to the styles in CSS Exercise 7 done previously. You pick them. Play around with them to see what they look like with varying colors and widths. An example appears below: Outline The outline property differs from the border property in that the outline in not included in the width or height of the object. It is outside of the object. Its values are the same as those of the border property except, of course, you would substitute the word outline for border. Image Opacity This property will allow some of the background to be seen through the graphic: <img class="big" src="tee2.gif" style="opacity:0.3; filter:alpha(opacity=30)" /> The opacity:0.3 is used by Firefox to set the opacity to 30% and the filter:alpha(opacity=30) is used by Internet Explorer for a 30% opacity. Therefore, if the page is going to be on the Internet, you will need to use both because you don t know what browser your readers will use. The lower the value, the more the background will appear.

Advanced Web Design 37 Display Options Objects can be made to disappear or reappear using the visibility or the display properties of the object: h2.hidden {visibility:hidden;} h2.

37 Advanced Web Design 37 Display Options Objects can be made to disappear or reappear using the visibility or the display properties of the object: h2.hidden {visibility:hidden;} h2.hidden {display:none;} Objects can be changed to block style (takes the full width available and has a line break before and after it i.e. <h1> <p> <div>) or inline (takes as much width as necessary and does not force line breaks i.e. <span> <a>). li {display : inline;} span {display:block;} Collapsing Table Elements Using the visibility property, sections of a table can be removed without affecting any other cells of the table: td.collapse {visibility : collapse;} <td class= collapse > </td>

38 Setting Up the Environment Advanced Web Design 38 Install a Web Server There are several web servers available. Windows comes with IIS but the vast majority of web sites on the Internet are served by the Apache Web Server. This web server is available free from Read the information to decide which version is best suited for your environment. Generally speaking, it is good to use the latest stable version for your environment as alpha and beta versions are not yet completely tested. Instructions for installation on all platforms begins at Install PHP PHP is also available free and is the scripting language that links web pages to a database server. It can be downloaded from Again, read the information carefully to decide which version you should use depending upon your environment. Installation instructions can be found at Install MySQL Server This is the database server. It will store and efficiently distribute your data to your web pages using PHP. It is freely downloadable from The Community Server is the free version of the software and is well suited for most applications. Installation information is available at Note: Since MySQL is a command prompt application, it is often advantageous to use software that displays SQL objects in a more graphic manner. MySQL Workbench This is the software that depicts data in a more understandable manner and even offers limited editing services. It can be downloaded from Using the ZIP file method does not install it in Windows and so it must be run from its own folder. The MSI installer version actually installs it in Windows.

Using XAMPP on a USB Drive Advanced Web Design 39 Download and Extract the Software 1. Go to www.apachefriends.org/en/xampp-windows.html 2. Choose the XAMPP USB Lite option 3.

39 Using XAMPP on a USB Drive Advanced Web Design 39 Download and Extract the Software 1. Go to 2. Choose the XAMPP USB Lite option 3. After it is downloaded, copy it to the root of the USB drive 4. Extract all of the files there Start MySQL and Apache Web Server In the root folder\xampp folder, double click the apache_start and the mysql_start icons to start both of these. Note that, if your system automatically starts these applications upon boot up, you will need to stop them from the control panel services dialog BEFORE starting the USB instances of the applications.

Advanced Web Design 40 Opening XAMPP After both Apache and MySQL are started: Open the browser Go to http://localhost The following xampp control page should open: From here it is possible to access

40 Advanced Web Design 40 Opening XAMPP After both Apache and MySQL are started: Open the browser Go to The following xampp control page should open: From here it is possible to access PHPMYADMIN to examine and adjust MySQL databases if desired. Opening MySQL from the USB Drive Databases and tables can be created and maintained through phpmyadmin but, in reality, MySQL is a command prompt application. The phpmyadmin application executes the actual SQL commands and a real knowledge of the system is only gained through use of these commands. 1. Go to the command prompt (Start Programs Accessories Command Prompt OR Start Run Enter the word Command in the dialog)

$Switch to the drive letter for your USB drive (<Drive Letter>:) In this case, the USB drive is designated as the E drive The E:\>$ signifies that the E drive is indeed the current drive 3.

signifies that the E drive is indeed the current drive 3.

41 Advanced Web Design Switch to the drive letter for your USB drive (<Drive Letter>:) In this case, the USB drive is designated as the E drive The E:\> signifies that the E drive is indeed the current drive 3. Change the current directory to that which contains your MySQL binary files (CD <Path to the binary files> <ENTER>) Here is an example. Check for your individual file path. 4. Enter the command to start MySQL as the root user with a password and enter the password. You are now in the MySQL environment:

Advanced Web Design 42 Starting MySQL with a Batch File Given the potential length of the path to the MySQL binary files it is much more convenient to create a batch file that can be executed from

42 Advanced Web Design 42 Starting MySQL with a Batch File Given the potential length of the path to the MySQL binary files it is much more convenient to create a batch file that can be executed from the command prompt. This file contains the steps needed to start the application and is executed in the order in which they are entered into the file. Below is an example of batch file creation: 1. Go to the root of the USB drive (CD \ <ENTER> if the USB drive is already the current drive) or (<Drive Letter> : <ENTER> if the current drive is not the USB drive) 2. Enter copy con <File Name>.bat <ENTER> 3. Type all of the commands desired in the desired order, pressing <ENTER> after each of the commands 4. Finish the file by typing CTRL-Z (Hold the CTRL key while hitting the Z key) 5. Now, after making the USB root your current location, simply type the name of the batch file and all of the commands will be executed:

Advanced Web Design 43 Closing MySQL When finished with MySQL you must close it in order to be sure all of your work is saved. At the prompt, type Exit and press <ENTER>.

43 Advanced Web Design 43 Closing MySQL When finished with MySQL you must close it in order to be sure all of your work is saved. At the prompt, type Exit and press <ENTER>. Stopping Apache and MySQL Servers Double click the mysql_stop icon in the xampp folder to stop the MySQL database server Double click the apache_stop icon in the xampp folder to stop the Apache web server.

44 Developing the Application The following steps are useful when developing an application. What do you want from the application? Advanced Web Design 44 What is the whole reason behind developing the application? Is it to organize data for online viewing, sell things, present information based upon user input, etc? Then, once the basic reason for the application is established, it is possible to home in on particular tasks such as gathering a customer s vital information, noting the exact specifications of a product ordered or produced, etc. Design the site to be easy to use. Link all pages so the user does not need to use browser navigation buttons to move from page to page. Make the text easy to read using appropriate colors and font sizes. Keep in mind that the user may require additional functionality in the future so make the design expandable. Designing the Database In order to design the database, it is necessary to know what information is necessary in order to accomplish the task. From this point, the next step is to lay out a logical pattern from which to create the tables that contain the data. The information should be laid out in a grid, each column of which is a field. Each row of the grid is a record that contains all of the fields. This table might be named EmployeeInfo. ID Name HireDate Department Izzy Foreal 3/21/99 Sales Shelly Tellher 2/13/91 Shipping Art Thou 2/18/01 Manufacturing Not all of the information about each of these employees is contained in this one table. For instance, each person has an address and phone number as well as many other attributes. Separate tables containing additional information can be created but should be linked together by a field that is unique to only that person. There could be people with the same name, the same hire date, or in the same department. Therefore, the ID number is the only field that cannot be duplicated in any other record.

45 Advanced Web Design 45 If we create another table for addresses and name it EmployeeAddress, it could look something like this: ID Address City State Zip Main St. Bernville PA Lancaster Ave. 250 Stevens Ave. Bethel PA Bernville PA Note that the ID field is the only field common to both tables. It is the field that links the tables together and is called the KEY FIELD and these two tables are called RELATED TABLES. There can be several tables that are related. For instance, there may be a EmployeeSalary table that looks like this: ID Salary BonusPercent DeductionPercent There are several different types of data distributed throughout these tables, there are numerics such as the salary, bonus percent, and tax deduction percent. There are dates such as the hire date, and there is text such as names and addresses etc. In the example tables above, the numbers 1, 2, and 3 are serial, which are automatically incremented numbers that enumerate how many records are in the table. On the following page is a table of all of the data types available.

46 Advanced Web Design 46 Data Type CHAR (length) VARCHAR (length) Description Fixed length character string Variable length character string. Designates the longest string that can be stored. TEXT Variable length character string with a maximum length of 64,000 INT (length) INT (length) UNSIGNED BIGINT DECIMAL (length,dec) DATE TIME DATETIME ENUM ( val1, val2 ) SERIAL Integer in range of to The length parameter limits the number of numerals and signs that can be displayed. For instance, a length of 4 limits the numbers displayed to -999 to 9999 even though larger numbers can be stored. Integer within a range of 0 to with length limiting the number of digits displayed Integer with a signed range of to and an unsigned range 0 to Decimal with length designating the number of characters used to display the number including signs and decimal points. The dec designates how many decimal places are displayed. For instance has a length of 6 and a dec of 2. Date value displayed in YYYY-MM-DD Time displayed as HH:MM:SS Date and time displayed as YYYY-MM-DD HH:MM:SS Only the values listed can be stored. For instance ENUM ( Yes, No ) allows only the values Yes or No. BIGINT UNSIGNED NOT NULL AUTO_INCREMENT To lay out the tables described previously, we would do something like this: EmployeeInfo Table Column Name Type Description RecordNumber SERIAL AUTO_INCREMENTED ID VARCHAR(5) Employee ID Number Name VARCHAR(30) Employee Name HireDate DATE Date Hired Department ENUM ( Sales, Shipping, Manufacturing ) Department in which the employee works

47 Advanced Web Design 47 EmployeeAddress Table Column Name Type Description RecordNumber SERIAL AUTO_INCREMENTED ID VARCHAR(5) Employee ID Number Address VARCHAR(30) Employee Address City VARCHAR(20) City in the address State VARCHAR(2) State in the address Zip CHAR(5) Zip code in the address EmployeeSalary Table Column Name Type Description RecordNumber SERIAL AUTO_INCREMENTED ID VARCHAR(5) Employee ID Number Salary DECIMAL (9,2) Employee Yearly Salary BonusPct DECIMAL (3,2) Bonus as percent of salary DeductionPct DECIMAL(3,2) Tax deduction as percent of salary

Advanced Web Design 48 Building the Database Using phpmyadmin Type the name of the database Click Create Be sure the XAMPP Control Panel has started MySql and the

48 Advanced Web Design 48 Building the Database Using phpmyadmin Type the name of the database Click Create Be sure the XAMPP Control Panel has started MySql and the Apache Web Server Open a browser Type the URL The above screen should open and you can use phpmyadmin to create and edit your databases

Advanced Web Design 49 Using MySQL Workbench MySQL Workbench is free software available at http://dev.

This software allows the user to create databases and see the contents of tables without using the

49 Advanced Web Design 49 Using MySQL Workbench MySQL Workbench is free software available at This software allows the user to create databases and see the contents of tables without using the command prompt MySQL interface. Creating the Database Click the Create New Schema button in the workbench Name it and click Apply In the subsequent dialogs, choose to apply the SQL commands

50 Advanced Web Design 50 Select the new schema (database) and double click the Add Table option

Advanced Web Design 51 Some GUI administrative applications can be finicky in that they attempt to do the job but generate the incorrect code depending upon the task desired.

51 Advanced Web Design 51 Some GUI administrative applications can be finicky in that they attempt to do the job but generate the incorrect code depending upon the task desired. In many cases it is just a quick to use the command interface: Create a MySQL Batch File You want the current directory of the command prompt to be set to the folder in which your MySQL binary files are stored: Above is an example of a typical installation in Windows. This batch file (mysqlpath.bat) was created by Opening the command prompt Changing the current directory to the root of the hard drive (CD\ <ENTER>) Typing the following : o COPY CON mysqlpath.bat <ENTER> o At the command prompt, type the path to the binaries (note that yours may be different) path C:\Program Files\MySQL\mySQL Server 5.1\bin <ENTER> o Press the CTRL and Z keys together to finish and save the batch file in the root of the C: drive Start MySQL Session At the C:\> prompt, type the command to start MySQL: mysql u root p <ENTER> Then, at the password: prompt, type the password for the user mentioned above. (Note that, in the example, the root or administrative user was invoked. This user, obviously, has sufficient rights to do anything in any database. Also, note that this example assumes working with MySQL on this computer.

Advanced Web Design 52 To log in to MySQL on a nework computer, use the host command: mysqll h <HOSTNAME> -u root p Here, you substitute HOSTNAME with the hostname of the server (ie. mysqlserver.

52 Advanced Web Design 52 To log in to MySQL on a nework computer, use the host command: mysqll h <HOSTNAME> -u root p Here, you substitute HOSTNAME with the hostname of the server (ie. mysqlserver.myorganization.com) View All Databases show databases; Don t forget the semicolon at the end This command lists all of the databases currently stored on this server Select a Database use <Database Name>; Select a Database Name from the list Don t forget the semicolon The phrase Database changed means that the desired database has been selected for use. Creating a New Database CREATE DATABASE <Name of Database>;

Advanced Web Design 53 Deleting a Database DROP DATABASE <Database Name>; Creating a Table With a SQL Script Once the database has been created and selected, it is possible to create the table(s)

53 Advanced Web Design 53 Deleting a Database DROP DATABASE <Database Name>; Creating a Table With a SQL Script Once the database has been created and selected, it is possible to create the table(s) inside it. Above is an sql script named CreateTable.sql that was created in Notepad++. In this case, it was saved in a folder named SQLScripts on the root of the C: drive. To run the script: Be sure the batch file created earlier was run after opening this command prompt Change the current directory to the one containing the script (C:\SQLScripts) OR save it in the MySQL\bin directory At the mysql prompt type a \. <Name of the script> and the script should run

This method can also be useful when doing other MySQL tasks.

54 Advanced Web Design 54 In this way, SQL commands can be pre-typed without the tedious repetition due forgotten semi-colons or parenthesis etc. All that is needed to create another table is to edit the script file and run it again. This method can also be useful when doing other MySQL tasks. In phpmyadmin Click Go Enter the name of the table Enter the number of fields To add another table to the database, click on the database name and the screen above will once again appear

of adding a record to the EmployeeInfo table.

55 Advanced Web Design 55 Deleting a Table DROP TABLE <Name of Table> Adding Records to a Table Below is an example of adding a record to the EmployeeInfo table. The script was created in Notepad ++ and was run at the mysql prompt.

56 Advanced Web Design 56 In phpmyadmin Enter the name of the Field Set its maximum length Enter its default value if desired Choose its data type Click Save when finished Set a field as the key

Advanced Web Design 57 Modifying a Table If the Name field needs to be changed to allow for 35 characters, the command would be: ALTER TABLE employeeinfo MODIFY Name VARCHAR(35); Adding Data Using

For instance, perhaps a new class of 200 students names and passwords need to be added to a table at the beginning of a school year.

57 Advanced Web Design 57 Modifying a Table If the Name field needs to be changed to allow for 35 characters, the command would be: ALTER TABLE employeeinfo MODIFY Name VARCHAR(35); Adding Data Using Text Files Sometimes large amounts of data need to be added to a table at one time. For instance, perhaps a new class of 200 students names and passwords need to be added to a table at the beginning of a school year. In this case, the data can be obtained from a tab delimited text file and added to the table. Below is an example of a tab delimited text file that will be used to add data to the employeeinfo table. The current contents of the table appear below as seen through MySQL Workbench: Run the batch file to name the path to the MySQL binary files Change the directory to the directory containing the text file (In this case the text file is in the root of the C: drive and so the command would be CD \ <ENTER>) Start MySQL with mysql u root p <ENTER> and then enter the password Select the database to use:

Advanced Web Design 58 Enter the following command to load the data from the text file into the table: Here, the LOAD DATA INFILE command utilizes the delimited data in the text file to

58 Advanced Web Design 58 Enter the following command to load the data from the text file into the table: Here, the LOAD DATA INFILE command utilizes the delimited data in the text file to populate the field names ID, Name, HireDate, and Department. The employeeinfo table now looks like this: Note that, since the ID field is the primary key, the records have been sorted on that field.

Advanced Web Design 59 Using phpmyadmin 2) Select the Insert 4) Enter each record s data and 5) click Go 1) Select the desired table 3) Select Insert another new row

added to the info table as a VARCHAR (20) data type and is located after the sernum field in the table.

59 Advanced Web Design 59 Using phpmyadmin 2) Select the Insert 4) Enter each record s data and 5) click Go 1) Select the desired table 3) Select Insert another new row Note that the actual mysql code used for any operation appears when it is completed Adding and Deleting Fields from a Table In the example below, the field name is added to the info table as a VARCHAR (20) data type and is located after the sernum field in the table. The NOT NULL designation means that it must have a value when a new record is added. Then, we remove the name field from the table. ALTER TABLE `info` ADD `name` VARCHAR( 20 ) NOT NULL AFTER `sernum` ALTER TABLE `info` DROP `name`

Advanced Web Design 60 Retrieving Data To see data in a table, use the

The example below shows all of the data in the table: The * in the

60 Advanced Web Design 60 Retrieving Data To see data in a table, use the SELECT command. The example below shows all of the data in the table: The * in the command selects all of the fields in the table to display and displays all of the records. The example below shows the ID and Name fields only and shows these fields for all of the records. In phpmyadmin Select the database name Choose the browse icon for any table in the database

61 Advanced Web Design 61 The table data appears along with sorting and filtering options etc. Filtering for Data Below is an example where we select the Name field for all records where the Department value is Sales : Below is an example where we select the Name field for all records where the ID begins with a 1.

62 Advanced Web Design 62 In phpmyadmin Select the database name Choose Query Select the arrow and choose a field in an available table

Advanced Web Design 63 After selecting all of the fields included, check the fields to include in the results Enter a criteria for the query Click Update Query The generated

Click Submit Query Saving Data to a Text File Data can be gotten from a table and saved to a tab delimited text file from which it can be loaded into an Excel worksheet or an

63 Advanced Web Design 63 After selecting all of the fields included, check the fields to include in the results Enter a criteria for the query Click Update Query The generated query will appear near the bottom of the page. Click Submit Query Saving Data to a Text File Data can be gotten from a table and saved to a tab delimited text file from which it can be loaded into an Excel worksheet or an Access Table, or any number of applications. To load the data from the employeeinfo table into a text file called info.txt, the command would be select * from employeeinfo into outfile info.txt ; Of course, filtering can be added as well: select Name from employeeid where Department= Sales into outfile info.txt ;

required. Click Go The results will then appear.

64 Advanced Web Design 64 If you get an error message (In this case an equal sign needs to be added), made the changes required. Click Go The results will then appear. In this case, we see the Name and Department of the person with an ID of

starts with a S Note that the operator or can be used to include another condition that makes the entire statement true.

65 Advanced Web Design 65 Filtering With Boolean Conditions Below, we show all records where the ID starts with a 1 and the Name starts with J : In phpmyadmin Here, we want to see the employee name whose ID starts with a 1 AND whose department starts with a S Note that the operator or can be used to include another condition that makes the entire statement true. Eliminating Criteria Here, the not in operator is used to show the Name value for all records where the ID does not equal or 15000

Advanced Web Design 66 Here we select the Name field from all records whose ID falls between 11000 and 50000: Conditional operators are: Greater Than > Less Than < Greater Than or Equal To >= Less

66 Advanced Web Design 66 Here we select the Name field from all records whose ID falls between and 50000: Conditional operators are: Greater Than > Less Than < Greater Than or Equal To >= Less Than or Equal To <= BETWEEN IN NOT IN LIKE NOT LIKE Limiting the Records to be Included Here, the Name field is selected where the ID field is < 30000, which would include three of the four records in the table. The conditional LIMIT 2 limits the output to the first 2 records encountered that fit those criteria. Below is an example of how the DISTINCT operator limits the output to only one instance of the criteria. Note that there are two records with a Department value of Sales but only the first record encountered will be returned.

loaded data in the employeesalary table for our four employees as well, we could display the entire table contents,

67 Advanced Web Design 67 Maximum and Minimum Values Here, the largest ID value is returned from the employeeinfo table. The MIN function can also be used to return the smallest value Ordering and Grouping the Output Assuming we have loaded data in the employeesalary table for our four employees as well, we could display the entire table contents, ordering the data by salary: Below, the contents of the employeeinfo table is listed, grouped by the Department field:

Combining Tables Sometimes data is needed from more than one table at a time.

68 Advanced Web Design 68 Calculations Using Fields Below, the query has been set up to use the Salary and the DeductionPct fields to calculate the total amount of salary deducted over a year and displaying this data as Deduction. Combining Tables Sometimes data is needed from more than one table at a time. When this occurs, there are two ways to combine the data: Union A union combines total rows from more than one table. Below are the contents of two tables, the employeeinfo table and the employeesalary table:

Advanced Web Design 69 Below is a query where the union was created to show all of the names from the employeeinfo table and all of the salaries from the employeesalary table.

69 Advanced Web Design 69 Below is a query where the union was created to show all of the names from the employeeinfo table and all of the salaries from the employeesalary table. Join Unlike a union where selected fields from several tables are displayed one after the other, a join connects tables horizontally, combining fields to create a new virtual table from several others. Inner Join An inner join contains only those rows that are common to both tables. The command below will cause all records from the employeeinfo table and the admins table that have matching Department values to be displayed.

70 Advanced Web Design 70 The contents of the two tables appear below: To the left is the admins table and below is the employeeinfo table. Outer Left Join An outer join includes all of the rows in one table. Rows in the second table NOT containing rows in the first table will have EMPTY COLUMNS. Below is an example of a outer left join where the admins table is joined at its left to the employeeinfo table. All records with matching Department values (Manufacturing and Shipping) are listed but the records that do not have a Department match in the admins table appear as NULL.

71 Outer Right Join Advanced Web Design 71 In the example below, the admins table was right outer joined to the employeeinfo table where records matching the Department field in the admins table from the employeeinfo table are displayed. In this case, there are no Null fields. Below, the same Department field is used but the admins table is right joined to the employeeinfo table. Updating Data Let s say we want to change the name in record 1 from Joe Smith to Joe Jones and change his HireDate to :

72 Advanced Web Design 72 Removing Data To remove a record, use the DELETE command. For instance, if we wanted to delete Joe Jones record from the employeeinfo table, we would use the following query: DELETE FROM employeeinfo WHERE Name = Joe Jones ; To remove a field from a table: The following command will remove the HireDate field from the employeeinfo table: ALTER TABLE employeeinfo DROP HireDate; Protecting Data MySQL data is protected by four things: Account Name Can be up to 16 characters long Can include letters, numerals, spaces, or hyphens (dashes) Can be blank o Any account name will be valid for that account o Any account name will be allowed to access the data provided the connection is from a hostname that is allowed o Blank account names allow anonymous users to access data The administrative account name is root Hostname The hostname is the name of the computer allowed to access the data (usually the computer on which the database resides). Usually called localhost o This is the default name of the computer on which the data is stored o Utilized if the MySQL data is stored on the same server as the MySQL command prompt is used If the data is stored on another computer (perhaps in a multiple-server network), the hostname of that computer would be used.

73 Advanced Web Design 73 Password The password is used in conjunction with the user name and host name to gain access to a database. Recall that the syntax for starting MySQL is: MySQL -<User Name> - p followed by a prompt to enter the password: Passwords should: Use 6 8 characters Include one or more of each lower case, upper case, number, punctuation mark Do not use words commonly associated with yourself (names, pet names, phone number, dates, etc.) Privileges Privileges are the actions allowed to occur within the database. Privilege ALL ALTER CREATE DELETE DROP FILE GRANT INSERT SELECT SHUTDOWN UPDATE USAGE Description All privileges allowed Allowed to change the structure of tables Allowed to create new databases or tables Allowed to delete rows in tables Allowed to remove databases and tables Allowed to read and write files on the server Allowed to change the privileges on a MYSQL account Allowed to add new rows to tables Allowed to read data from tables Allowed to shut down the MySQL server Allowed to change data in a table No privileges

74 Advanced Web Design 74 Granting ALL privileges basically allows the account to have administrative rights which are normally restricted to one administrative account. A database used for browsing information on a web page such as a product list or directory would give SELECT priveleges to anonymous users. In the event, the database is used for e-commerce, anonymous users would have SELECT and INSERT privileges. The example below grants all privileges on the employee database to the knoecker account on the localhost server. Below, the user student is created on the localhost server and is assigned the password student123. Below, the SELECT and INSERT privileges have been granted to the student account on the localhost server for all tables in the employee database. FLUSH The FLUSH command resets cache memory in MySQL and basically makes all privilege changes available to the server.

75 Advanced Web Design 75 PHP Installing PHP Installing PHP on Windows XP from the downloaded PHP zip file is just a matter of extracting the zip file to a directory and altering the Apache configuration file to use the PHP interpreter for PHP scripts. Instructions: Right click on the PHP zip archive (retrieved in step 1 of this guide) and click "Extract All..." and then "Next". Change C:\Downloads\php Win32 to C:\ and click "Next", followed by "Finish". There should now exist a folder C:\php Win32. Rename the this folder from C:\php Win32 to C:\php. Open the httpd.conf (C:\Program Files\Apache Group\Apache\conf\httpd.conf) file and find the line: <IfModule mod_alias.c> Immediately under this line insert the following lines: ScriptAlias /php/ "c:/php/" AddType application/x-httpd-php.php.phtml Action application/x-httpd-php "/php/php.exe" Save the file as httpd.conf. To test that PHP and Apache now work together, create a plain text file and insert the following: <?php phpinfo();?> Save this file as test.php in the C:\Program Files\Apache Group\Apache\htdocs folder. Restart the Apache server (Start > Programs > Apache HTTP Server > Control Apache Server > Restart) so Apache will use the altered configuration file. If you go to in a web browser you should see a page like this:

76 Advanced Web Design 76

Advanced Web Design 77 Basic Syntax: <html> <body> PHP code is usually embedded in HTML code Each line MUST END IN A SEMI-COLON PHP script begins with <?php and ends with?> <?php echo "Hello World";?

77 Advanced Web Design 77 Basic Syntax: <html> <body> PHP code is usually embedded in HTML code Each line MUST END IN A SEMI-COLON PHP script begins with <?php and ends with?> <?php echo "Hello World";?> </body> </html> Viewing Results Echo Print Results in this page: Single quotes (apostrophes) designate literal quotation Double quotes designate evaluated quotation o These are used when variables are included in an echo or print to return the variable s value NOT the actual name of the variable. The dot or period is the concatenation operator and in this case, adds a <br> tag to the echo so World appears on a new line

78 Advanced Web Design 78 Comments Double Front Slashes ( // Single line comment) /* */ <?php //Single line comment /* This is a Comment block */?> Variables All variables start with a Dollar Sign Variables can be used over and over in the script Separate the variable name with an Equal Sign No spaces are allowed in the variable name (Use an underscore to split a variable name) Can only consist of letters, numbers, and underscore Must start with a letter or underscore Data type is not declared (PHP automatically assigns a numeric data type if it is equal to a number or a string if it is equal to text) <?php $this_name = John Q. Public ; $x = 7;?> Example: <?php $Name = 'Harold'; echo 'Hello '. $Name. '!';?> $Name = 'Harold'; echo 'Hello '. $Name. '!'; $num1 = 10; $num2 = 7; echo '<br>'; echo 'The total of '. $num1. ' + '. $num2. ' is equal to '. ($num1 + $num2);?> Here, the variables $num1 and $num2 have been given values of 10 and 7 respectively. Placing them inside parenthesis performs the math

79 Advanced Web Design 79 The Escape Character Since an apostrophe is considered an operator for the echo and print commands, using it in a contraction will affect the desired outcome: Example: echo This won t work ; To fix this, we need to use the backslash ( \ ) escape character to turn off the quotation setting for the second apostrophe: echo This won\ t work ; Here, there are actually three quotation marks in the echo command and that will not work because PHP considers This won as the first quote with no beginning quote after the t in the word won t. Now, the apostrophe before the t in won t is a normal text apostrophe. Formatting Numeric Output sprint ( <format >, <variable> or <number > to be formatted number_format(<variable> or <number>,<number of decimal places>) Example: 1 echo sprintf("%01.2f",$sum). '<br>'; echo number_format($sum,3); 2 1. Print the value stored in $sum as a floating point with 1 space padding and 2 decimal places. 2. Print the value stored in $sum with 3 decimal places % = Start of the format 01 = Number of spaces padding (1 in this case). = Separator between the padding and number of decimal places right of the decimal point 2f = Set the format to floatin point / 2 decimal places You can also use sprintf to place strings in an echo statement: $Name = 'Harold'; $last_name = 'Smith'; echo sprintf("first Name: %s <br> Last Name: %s.",$name,$last_name);

80 Advanced Web Design 80 PHP Exercise 1 Create a PHP script that looks like this: Include the following: Store Harold in a variable and use it to echo Store 93 in a variable and use it to echo line 2 Change the value of the variable by dividing by 100 and use it to echo the decimal After a paragraph, echo the last line String Functions The period is the concatenation operator <?php $String1 = Computer ; $String2 = Class ; echo $String1.. $String2;?> The output is Computer Class strlen returns the length of a string <?php $mystring = Computer Class ; echo strlen(mystring); echo strlen( Hello World! );?>\ This code returns strpos returns the position of a substring within another string o Character position starts at zero o If the substring is not found, it returns false <?php $big_string = Computer ; $small_string = put ; echo strpos($big_string,$small_string);?> This code returns 3 Additional string functions are available at

81 PHP Operators Advanced Web Design 81 Operator Description Example Result + Addition x=2 x+2 - Subtraction x=2 5-x * Multiplication x=4 x*5 / Division 15/5 5/2 % Modulus (division remainder) 5%2 10%8 10%2 ++ Increment x=5 x++ -- Decrement x=5 x x=6 x=4 Assignment Operators Operator Example Is The Same As = x=y x=y += x+=y x=x+y -= x-=y x=x-y *= x*=y x=x*y /= x/=y x=x/y.= x.=y x=x.y %= x%=y x=x%y Comparison Operators Operator Description Example == is equal to 5==8 returns false!= is not equal 5!=8 returns true <> is not equal 5<>8 returns true > is greater than 5>8 returns false < is less than 5<8 returns true >= is greater than or equal to 5>=8 returns false <= is less than or equal to 5<=8 returns true Logical Operators Operator Description Example && and x=6 y=3 or x=6 y=3 (x < 10 && y > 1) returns true! not x=6 y=3 (x==5 y==5) returns false!(x==y) returns true

82 Advanced Web Design 82 Working with Strings Single vs. Double Quotes Single quotes or apostrophes ( ) make everything inside them literal. That is, even if a variable is included in the string, the variable name will be displayed, not its value. Double quotes ( ) do not make variable names literal. Instead, the value of the variable will be returned. For instance: $name = Sheldon ; echo Hello $name ; Result = Hello Sheldon echo Hello $name ; Result = Hello $name New Line \n Using the above example: echo Hello \n$name ; Result = Hello Sheldon echo Hello \n$name ; Result = Hello \n$name Tab \t The IF Statement Syntax is if (condition) <execute code if condition is true>; <html> <body> <?php $d=date("d"); if ($d=="fri") echo "Have a nice weekend!";?> </body> </html>

83 Advanced Web Design 83 IF ELSE <html> <body> Syntax is if (condition) execute code if true; else execute code if false; <?php $d=date("d"); if ($d=="fri") echo "Have a nice weekend!"; else echo "Have a nice day!";?> </body> </html> Elseif Syntax is if (condition) <execute code if true>; elseif (condition) <execute code if this is true>; else <execute code if none of above is true>; <html> <body> <?php $d=date("d"); if ($d=="fri") echo "Have a nice weekend!"; elseif ($d=="sun") echo "Have a nice Sunday!"; else echo "Have a nice day!";?> </body> </html>

84 Advanced Web Design 84 The Switch Statement <html> <body> Analogous to the Case statement in Visual BASIC A condition (usually a variable) is placed in the Switch( ) statement o A case is set for each of the targeted values of the variable If the case matches the value of the variable, that code is executed The break statement ends the Switch structure after that code is executed <?php switch ($x) { case 1: echo "Number 1"; break; case 2: echo "Number 2"; break; case 3: echo "Number 3"; break; default: echo "No number between 1 and 3"; }?> </body> </html>

85 Advanced Web Design 85 Arrays Index values start at zero Use square brackets $cars=array("saab","volvo","bmw","toyota"); OR $cars[0]="saab"; $cars[1]="volvo"; $cars[2]="bmw"; $cars[3]="toyota"; Using the second method (above), the array works like this: <?php $cars[0]="saab"; $cars[1]="volvo"; $cars[2]="bmw"; $cars[3]="toyota"; echo $cars[0]. " and ". $cars[1]. " are Swedish cars.";?> The output is Saab and Volvo are Swedish cars. Associative Arrays Used to assign values matching array elements Create the array $ages = array("peter"=>32, "Quagmire"=>30, "Joe"=>34); OR $ages['peter'] = "32"; $ages['quagmire'] = "30"; $ages['joe'] = "34"; This code uses the second method shown above <?php $ages['peter'] = "32"; $ages['quagmire'] = "30"; $ages['joe'] = "34"; echo "Peter is ". $ages['peter']. " years old.";?> The output is Peter is 32 years old.

86 Advanced Web Design 86 Multidimensional Arrays Used to contain sub-arrays inside main arrays Create the array $families = array ( "Griffin"=>array ( "Peter", "Lois", "Megan" ), "Quagmire"=>array ( "Glenn" ), "Brown"=>array ( "Cleveland", "Loretta", "Junior" ) ); Here is the array used in some code echo "Is ". $families['griffin'][2]. " a part of the Griffin family?"; The output is Is Megan a part of the Griffin family?

87 Advanced Web Design 87 Loops While loop <html> <body> <?php $i=1; while($i<=5) { echo "The number is ". $i. "<br />"; $i++; }?> </body> </html> The output is: The number is 1 The number is 2 The number is 3 The number is 4 The number is 5 Do While Loop <html> <body> <?php $i=1; do { $i++; echo "The number is ". $i. "<br />"; } while ($i<=5);?> </body> </html> The output is the same as above

88 Advanced Web Design 88 For Loop <html> <body> <?php for ($i=1; $i<=5; $i++) { echo "The number is ". $i. "<br />"; }?> </body> </html> The output is: The number is 1 The number is 2 The number is 3 The number is 4 The number is 5 Foreach Loop Used to access each element of an array <html> <body> <?php $x=array("one","two","three"); foreach ($x as $value) { echo $value. "<br />"; }?> </body> </html> The output is: one two three

89 Advanced Web Design 89 PHP Functions Simple Function <html> <body> <?php function writename() { echo "Kai Jim Refsnes"; } echo "My name is "; writename();?> </body> </html> The output is: My name is Kai Jim Refsnes With Parameters <html> <body> <?php function writename($fname) { echo $fname. " Refsnes.<br />"; } echo "My name is "; writename("kai Jim"); echo "My sister's name is "; writename("hege"); echo "My brother's name is "; writename("stale");?> The output is: My name is Kai Jim Refsnes. My sister s name is Hege Refsnes. My brother s name is Stale Refsnes. </body> </html>

90 Advanced Web Design 90 Multiple Parameters <html> <body> <?php function writename($fname,$punctuation) { echo $fname. " Refsnes". $punctuation. "<br />"; } echo "My name is "; writename("kai Jim","."); echo "My sister's name is "; writename("hege","!"); echo "My brother's name is "; writename("ståle","?");?> </body> </html> The output is: My name is Kai Jim Refsnes. My sister's name is Hege Refsnes! My brother's name is Ståle Refsnes? Returning a Value <html> <body> <?php function add($x,$y) { $total=$x+$y; return $total; } echo " = ". add(1,16);?> </body> </html> The output is = 17

91 Forms Set up a form using HTML <html> <body> Advanced Web Design 91 <form action="classquestion.php" method="post"> Favorite Class: <input type="text" name="faveclass" /> <P> 2 3 Your Years Left in School: <input type="text" name="yearsleft" /> <P> <input type="submit" /> </form> </body> </html> 4 1. Name of a PHP file to process the form information 2. Creates the text boxes 3. Names of textboxes 4. Creates a Submit Button The resulting page looks like this: 1 Create the PHP file to process the form s data <HTML> <BODY> I love <?php echo $_POST["faveClass"];?>!<br /> Will you take this class in the next <?php echo $_POST["yearsLeft"];?> years? </BODY> </HTML> Given the following input: The resulting text appears in the web page after submitting: I love Computer! Will you take this class in the next 3 years?

Advanced Web Design 92 Radio Buttons A set of radio buttons is often used when an established set of options is provided and when only one option can be chosen at a time.

92 Advanced Web Design 92 Radio Buttons A set of radio buttons is often used when an established set of options is provided and when only one option can be chosen at a time. Below is an example of a form that uses radio buttons: The resulting radio buttons appear in the page: Note that the name parameter for all four buttons is the same (Class). Because all four have the same name, whenever one is selected, all of the others are de-selected. Check Boxes A set of check boxes allows the user to select more than one of a limited number of options. An example appears below: <form action="checkschool.php" method="post" name="f1"> <input type="checkbox" name="college[]" value="penn State" id="college" /> Penn State <BR> <input type="checkbox" name="college[]" value="west Chester" id="college" /> West Chester <BR> <input type="checkbox" name="college[]" value="millersville" id="college" /> Millersville <BR> <input type="checkbox" name="college[]" value="kutztown" id="college" /> Kutztown <P> <CENTER> <input type="submit" name="subbutton" value = "Submit" /> </form>

$Advanced Web Design 93 The code to read the information ( checkschool.php in this case) is: <?php $aschool = $_POST["college"];?> if(empty($aschool)) { } else { } echo("you did not select a school.$

93 Advanced Web Design 93 The code to read the information ( checkschool.php in this case) is: <?php $aschool = $_POST["college"];?> if(empty($aschool)) { } else { } echo("you did not select a school."); $N = count($aschool); echo("you selected $N schools: ". "<P>"); for($i=0; $i < $N; $i++) { echo($aschool[$i]. "<BR>"); } So, if the checkboxes were selected as follows: The resulting page would be:

HTML Summary. All of the following are containers. Structure. Italics Bold. Line Break. Horizontal Rule. Non-break (hard) space.

HTML Summary. All of the following are containers. Structure. Italics Bold. Line Break. Horizontal Rule. Non-break (hard) space. HTML Summary Structure All of the following are containers. Structure Contains the entire web page. Contains information