CGS – 4854 Summer 2012

1. CGS – 4854 Summer 2012 Instructor: Francisco R. Ortega Chapter 5 Web Site Construction and Management

2. Today’s Lecture • Chapter 6

3. HTML • Keep layout in HTML • Keep style in CSS

4. Images • <imgsrc=“happy.gif” alt=“smiley face”> • <imgsrc=“/myapp/images/surprise.gif” alt=“surprise face”>

5. HTML 4 tags vs CSS

6. HTML 5 • HTML 4 have been deprecated • deprecation is a status applied to features, characteristics, or practices to indicate that they should be avoided, typically because they have been superseded [WIKI]

7. In-line and block tags • Two ways to tag • In Line • This <em> is an important </em> talk about <em> c++ </em> • Block • Using <p> …. </p> <h1> </h1>

8. In-Line Tags

9. BLOCK

10. NOTE ABOUT BOOK • The book shows some html tags without ending tags. This is optional. • For example • <li> • <li> </li> • I prefer the one with the closing tag.

11. Layout tags : LIST • List • Great way to organize data in a html page • Types: • ordered, unordered and definition. • <ol> </ol> • Ordered list • <li> </li> • List Item • <ul> </ul> • Unordered list.

12. List

13. List and Definition List

14. Definition List • <dl> </dl> • Defines the “Definition List” • <dt> • Indicated term • <dd> indicate definition

15. Definition List

16. Tables • <table> </table> • Defines the table • <tr> defines row • <td> defines cell • Default rowspan = 1 , colspan = 1. One square

17. Table

18. Table

19. CSS • CSS stands for • Cascading Stle Sheets • CSS controls the style of html pages • Adding a style • <link rel=“stylesheet” type=“text/css” href=“style.css”> • http://www.w3.org/Style/CSS/

20. CSS

21. Defining Styles • Scales • Deal with measurements • Common Style • Background-color: green; • Background-image: url(test.png); • Color: #003399 (three or 6 digit hex) • Font-family, Font-size, Font-style, Font-weight • Text-align, Text-decoration, Text-transform, Margin, Padding, Text-indent, List-style-type, Border

22. Default Styles body { color: red; text-align: center; } p{ color: blue; }

23. Default Style • Multiple Definition • h1,h2{ … } • Nested Definition • td h1 { font-size: 20pt;} • Named Styles • td.money { color: green; text align: left;} • Td.sky {color: lightblue}

24. Name Styles

25. Generic Styles • Omits the HTML tag • .warning { color: orange;} • HTML can use the generic style is • <strong class=“warning”> F Grade </strong> • <em class=“warning”> Study Harder </em>

26. Uniquely Named Styles • # definition is for division and should be used once per page. • div#about { position: relative; float:right;} • HTML • <div id=“about”> Francisco </div>

27. Pseudo Styles • Allows to control hyperlinks styles • a:link • Unvisited hypertext links. • a:visited • Visited hypertext links.

28. Example

29. Custom Layout with CSS • This is used to change the default behavior of the HTML page. • By default • In-Line tags • Block Tags • Important Tags • Float and Position

30. Position • static • Default : no custom layout • fixed • Forces element to stay in the same location relative to the window • Absolute • Sets the location the upper left corner of the parent element’s position. • Relative • Relative to other elements

31. Float • None • It will display from the edge of the parent. • Left • If there is room, anchored to the left • Right • If there is room, anchored to the right. • Inherit • Inherits from the PARENT control

32. Position and Float • Width : 100px • Height: 100px • Top : 5ex; • Only valid for elements with position: fixed, relative and absolute • Left: 5ex;

33. Position and Float • Visible • Allow to extended beyond the edge of element • Hidden • Extra content is not display • Scroll • Add if there is extra content • Auto • Scroll bars are only added if there is extra content that does not fit within the size of the tag • Inherit • From its parent

34. Custom Layout Example

36. <div class="layout" id="outer"> <div class="layout" id="nw"> Northwest (nw) section of the layout. </div> <div class="layout" id="ne">Northeast (ne) section of the layout. </div> <div class="layout" id="sw">Southwest (sw) section of the layout. </div> <div class="layout" id="core">Core (core) section of the layout </div> <div class="layout" id="se">Southeast (se) section of the layout.</div> </div>

37. 6.4: Form Elements • You already know Input type • Text • Hidden • Submit • New ones • Password, radio button, checkbox, reset • Radio and checkbox groups • Combo Box and List Box

38. Password • PASSWORD appears as ******* • Value will appear as plain text in the request • HTML Tag <input type=“password” name=“pswd” value=“${helper.data.pswd}”>

39. Radio Button and checkbox • Value is hidden from the user • Value will be in request if is checked • If Additional tag “checked” • box will check when page loads <input type=“radio” name=“happiness” value=“1” checked> <input type=“checkbox” name=“extra” value=“sprinkless” checked>

40. Reset • It looks like the submit button • Default value is Reset. • It does not need a name • The reset value is never sent to the server • The purpose is to reset the fields <input type=“reset” value=“Reset>

41. Radio Group • Values do not need to be numeric • Name must be the same to be part of the group • Only one value can be checked

42. Radio Group “Happiness” Level of Happiness:<br> <input type="radio" name="happiness" value="1" checked> Elated <input type="radio" name="happiness" value="2"> Ecstatic <input type="radio" name="happiness" value="3”> Joyous <br> Checked is only the default value when the page is loaded.

43. Checkbox Group • Values can be compose of any type (number, letters…) • Name must be the same to be part of the group • Multiple Values can be checked.

44. Checkbox Group <input type="checkbox" name=”gift” value=”Wrap" checked> <input type="checkbox" name=”gift” value=”Birthday Card” checked> <input type="checkbox" name=”gift” value=”Chocolates”>

45. Textarea Element • Multiple lines of text. • If you want a default value: • <Textarea name=“comments”>Enter some text here</textarea> HTML TAG • <Textarea name=“comments”></textarea>

46. Select Elements • Single selection list • Dropdown box. • Multiple selection list. • List box.

47. Dropdown box <select name=“cpu”> <option value = “Intel i7”> <option value = “Intel i5” selected> <option value = “Intel i3”> <option value = “amd”> </select>

48. List Box • Same as dropdown except for • Multiple and size • Multiple makes it a list box • Size if specified • Number of options available • Otherwise, the default is selected by the browser

49. List Box <select name=“BestMovies” multiplesize=“4”> <option value=“Star Wars” selected> <option value=“Avatar” selected> <option value=“Scarface”> <option value=“Hunger Games”> <option value=“War Games” selected> <option value=“The Matrix”> </select>

50. Bean Implementation • We have worked with single value inputs • Text,hidden… • Remember? protected String comments; public void SetComments(String comments) { this.comments = comments; } public String getComments() { return this.comments; }