Presentation is loading. Please wait.

Presentation is loading. Please wait.

Introduction to XHTML/HTML5 (part 2)

Similar presentations


Presentation on theme: "Introduction to XHTML/HTML5 (part 2)"— Presentation transcript:

1 Introduction to XHTML/HTML5 (part 2)
Instructor: Sergey Goldman Based on Based on Internet & World Wide Web How To Program (multiple versions)

2 Content 1 Introduction 2 Basic XHTML Tables
3 Intermediate XHTML Tables and Formatting 4 Basic XHTML Forms 5 More Complex XHTML Forms 6 Internal Linking 7 Creating and Using Image Maps 8 meta Elements 9 frameset Element 10 Nested framesets 11 Web Resources

3 Agenda tables with rows and columns of data table formatting forms
image maps to aid in Web-page navigation meta elements frameset element to display multiple Web pages in a single browser window.

4 Internal linking and image maps Frames
  Introduction Tables Present information Forms Collect information from visitor goes to server! Internal linking and image maps Enhance Web page navigation Frames Display multiple documents in the browser

5 Basic Tables Organize data into rows and columns table element
Attribute summary Describes the table’s contents Attribute caption Describes the table’s content and helps text-based browsers interpret table data Head section (header cell, defined with a head element) Contains header information such as column names tr element (defines an individual table row) th element (defines the columns in the head section) Foot section (defined with a tfoot element) Table body (defined with a tbody element) Data cells (defined with td element)

6 Pre-HTML 5 Table Attributes
<table border=“5” bordercolor=“blue” align=“center” width=“50%” height=“123” cellpadding=“3” cellspacing=“5” bgcolor=“yellow” background=“bg.gif”> border specifies the table’s border width in pixels (0 – no borders) Set border for debugging! bordercolor specifies the color of the border using either their RGB value or one of the set ones align can be set to left, right or center and specifies where the table will appear on the browser window width can be set in pixels or as a percentage of the browser window. height can be set in pixels or as a percentage of the browser window cellpadding set in pixels, specifies the space within each cell in which nothing will appear cellspacing set in pixels, specifies the amount of blank space in between each cell bgcolor sets the background color of the table, use either the RGB or one of the set colors. background sets a background image

7 Table cellpadding and cellspacing example
<html> <body> <table border="1" bordercolor="blue" bgcolor="yellow" width="50%"> <tr> <td>Table cell 1</td> <td>Table cell 2</td> </tr> </table> <br /> <table border="1" cellpadding="5" cellspacing="20“ bordercolor="blue" bgcolor="yellow" width="50%"> </body>

8 TR Element and its Attributes
<tr align=“right” valign=“bottom” bgcolor=“blue” bordercolor=“yelow” background=“bg.gif”> align can be set to left, right or center. Specifies the horizontal alignment of text in each cell of that row valign can be set to top, bottom or center. Specifies the vertical alignment of text in each cell of that row bgcolor the same as the bgcolor attribute of the <table> tag except that this sets only the color for that row bordercolor the same as the bordercolor attribute of the <table> tag except that this sets only the color for that row background sets a background image

9 TR Element and bordercolor example (overriding)
<html> <body> <table border="1" bordercolor="blue" bgcolor="yellow" width="50%"> <tr bordercolor="red" bgcolor="yellowGreen"> <td>Table cell 1</td> <td>Table cell 2</td> </tr> </table> <br /> <table border="1" cellpadding="5" cellspacing="20“ bordercolor="blue“ bgcolor=“red" width="50%"> <tr bordercolor="magenta" bgcolor="lightYellow"> </body>

10 The syntax for specifying the cell space is:
cellspacing The syntax for specifying the cell space is: <table cellspacing=“value”> value is the width of the interior borders in pixels the default cell spacing is 2 pixels

11 The syntax for this attribute is:
cellspacing To control the space between the table text and the cell borders, add the cellpadding attribute to the table tag. The syntax for this attribute is: <table cellpadding =“value”> value is the distance from the table text to the cell border, as measured in pixels the default cell padding value is 1 pixel Cell padding refers to the space within the cells.

12 TD Element and its attributes
<td align=“right” valign=“top” bgcolor=“green” bordercolor=“black” height=“50” width=“100” colspan=“2” rowspan=“3” background=“bg.gif”> align is the same as the attribute in the <tr> tag except that it effects only that cell valign bgcolor is the same as the attribute in the <tr> cell except that it effects only that cell bordercolor height is set in pixels and sets the height of the cell width is set in pixels and sets the width of the cell

13 TD Element bgcolor example (overriding)
<html> <body> <table border="1" bordercolor="blue" bgcolor="yellow" width="50%"> <tr bordercolor="red" bgcolor="yellowGreen"> <td>Table cell 1</td> <td>Table cell 2</td> </tr> </table> <br /> <table border="1" cellpadding="5" cellspacing="20“ bordercolor="blue" bgcolor="yellow" width="50%"> <tr bordercolor="magenta" bgcolor="lightYellow"> <td bgcolor="red">Table cell 1</td> </body>

14

15

16

17

18

19 Spanning Rows and Columns
To merge several cells into one, you need to create a spanning cell. A spanning cell is a cell that occupies more than one row or column in a table. Spanning cells are created by inserting the rowspan and colspan attribute in a <td> or <th> tag. The syntax for these attributes is: rowspan=“value” colspan=“value” value is the number of rows or columns that the cell spans in the table

20 <html> <body> <table width=“200” height=“200” align="center" cellspacing=“0” cellpadding=“5” border=“2” bordercolor="red"> <tr> <td width="100%" colspan=“2” align="center"> This cell spans the two cells below using COLSPAN. </td> </tr> <tr> <td width="50%" align="center">Cell #2</td> <td width="50%" align="center">Cell #3</td> </tr> </table> </body> </html> Without width in the cell1, it would still span 2 two cells below due to COLSPAN. In practice, it's best to use a width in all of the cells and make sure that the widths add up properly

21 Start by coding the total number of rows Create 2 sets of <tr>
…. <tr> <td width="100%" rowspan=2 align="center"> This cell spans two rows using ROWSPAN. </td> <td width="50%" align="center">Cell #2 </td> </tr> <tr> <td width="50%" align="center">Cell #3</td> </tr> Start by coding the total number of rows Create 2 sets of <tr> Find the row you want the top of the spanning cell to be in and code the spanning cell with ROWSPAN Cells to the left of the spanning cell are coded before the spanning cell in the same row Cells to the right of the spanning cell are coded after the spanning cell Code in the cells in the other rows If the spanning cell was 20% wide, the cells it spans would be 80% wide

22 coding the ROWSPAN cell after cell #2, it appears on the left:
<tr> <td width="50%" align="center">Cell #2</td> <td width="100%" rowspan=2 align="center"> This cell spans two rows using ROWSPAN.</td> </tr> <tr> <td width="50%" align="center">Cell #3</td> </tr>

23 Ex.: A Table Structure with a Row-Spanning Cell
HTML code resulting table four table cells in the first row only three table cells are required for the second and third rows

24 Ex.: Adding Spanning Cells to a Table

25 Ex.: Spanning Cells

26 Ex.: Another Example of Spanning Cells

27 Ex.: Column and Row Span Cell[2,3] Cell[1,3] Cell[3,2] Cell[2,2]
* 07/16/96 Ex.: Column and Row Span <table cellspacing="0"> <tr class="1"><td>Cell[1,1]</td> <td colspan="2">Cell[2,1]</td></tr> <tr class=“2"><td>Cell[1,2]</td> <td rowspan="2">Cell[2,2]</td> <td>Cell[3,2]</td></tr> <tr class=“3"><td>Cell[1,3]</td> <td>Cell[2,3]</td></tr> </table> Cell[2,3] Cell[1,3] Cell[3,2] Cell[2,2] Cell[1,2] Cell[2,1] Cell[1,1] (c) 2007 National Academy for Software Development - All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.*

28 Intermediate XHTML Tables and Formatting
Element colgroup Groups and formats columns. Since HTML (use it, but don't rely on it!) <table> <colgroup> <col span="2" style="background-color:red"> <col style="background-color:yellow"> </colgroup> <tr> <th>ISBN</th> <th>Title</th> <th>Price</th> </tr> <td> </td> <td>My first HTML</td> <td>$53</td> <td> </td> <td>My first CSS</td> <td>$49</td> </table>

29 Intermediate XHTML Tables and Formatting
align Determines the alignment of text in the column valign Aligns data vertically One of the four values: “top”, “middle”, “bottom”, “baseline”

30 About width and height if a width or height is set in a cell then the cells on the same row are effected by the height attribute and all the cells on the same column are effected by the width attribute When two different widths are specified in the same column the larger one takes control. The text however in the cell with the smaller width set, will wrap at the point where the width is set If two different heights are specified on the same row then the larger one is presented but the smaller one still takes effect in it's cell. Do not use COLSPAN and ROWSPAN in the same <td>. You cannot make "L-shaped" cells by using both attributes in one <td>. Spanning across more rows and columns than there are in the table can cause distortion

31 Tables (Cont.) A table can be split into three distinct sections:
head (thead element) Table titles Column headers body (tbody element) Primary table data table foot (tfoot element) Calculation results Footnotes Above body section in the code, but displays at the bottom in the page

32 tr (required), th (optional) and td (required)
tr Element Defines individual table rows Element th Defines a header cell td Element Contains table data elements

33 br, img, hr The br element is render as a line break in most browsers—any markup or text following a br element is rendered on the next line. Like the img element, br is an example of a void element. Like the hr element, br is considered a legacy formatting element that you should avoid using—in general, formatting should be specified using CSS.

34

35

36

37

38 Forms Element form Attribute method
Specifies how the form’s data is sent to Web server method = “post” Appends form data to the browser request method = “get” ( Appends form data directly to the end of the URL Limit 2048 chars Attribute action Specifies the URL of a script on the Web server input Specifies data to provide to the script that processes the form

39 The form causes something to run on a Web server
Hypertext Transfer Protocol (HTTP) Port 80 CGI (perl, C, C++) ASP.NET (C#, VB.NET) Servlet (JSP, Java)

40 action

41

42 <form method = "post" action = "http://google.com">

43 method Attribute of the form
A form is defined by a form element Attribute method specifies how the form’s data is sent to the web server. Using method = "post" appends form data to the browser request, which contains the protocol (HTTP) and the requested resource’s URL The other possible value, method = "get", appends the form data directly to the end of the URL of the script, where it’s visible in the browser’s Address field.

44 Action Attribute of the form
The action attribute of the form element specifies the script to which the form data will be sent. Since we haven’t introduced server-side programming yet, we set this attribute to for now. input elements that specify data to provide to the script that processes the form (also called the form handler). An input’s type is determined by its type attribute.

45 input element input elements that specify data to provide to the script that processes the form (also called the form handler). An input’s type is determined by its type attribute.

46 hidden Inputs Forms can contain visual and nonvisual components.
Visual components include clickable buttons and other graphical user interface components with which users interact. Nonvisual components, called hidden inputs, store any data that you specify, such as addresses and HTML5 document file names that act as links.

47 text input Element label, size, maxlength
The text input inserts a text field into the form, which allows the user to input data. The label element provides users with information about the input element’s purpose The size attribute specifies the number of characters visible in the text field. Optional attribute maxlength limits the number of characters input into a text field.

48 submit and reset input Elements
The submit input element is a button. When the submit button is pressed, the form’s data is sent to the location specified in the form’s action attribute. The value attribute sets the text displayed on the button The reset input element allows a user to reset all form elements to their default values.

49 textarea The textarea element inserts a multiline text area into the form. The number of rows is specified with the rows attribute, and the number of columns (i.e., characters per line) with the cols attribute. Default text can be specified in other input types, such as text fields, by using the value attribute.

50

51

52

53

54

55

56 The password input inserts a password box into a form.
Allows users to enter sensitive information, such as credit card numbers and passwords, by “masking” the information input with another character, usually asterisks. The actual value input is sent to the web server, not the asterisks that mask the input.

57 Checkbox, radio, select The checkbox input element enables users to select and option. When the checkbox is selected, a check mark appears in the checkbox . Otherwise, the checkbox is empty checkboxes can be used individually and in groups. checkboxes that are part of the same group have the same name radio buttons are similar to checkboxes, except that only one radio button in a group can be selected at any time. All radio buttons in a group have the same name attribute but different value attributes. The select input provides a drop-down list of items. The name attribute identifies the drop-down list. The option element adds items to the drop-down list.

58

59 2.12 Internal Linking The a tag can be used to link to another section of the same document by specifying the element’s id as the link’s href. To link internally to an element with its id attribute set, use the syntax #id.

60

61

62

63

64

65 meta Elements One way that search engines catalog pages is by reading the meta element’s contents. The name attribute identifies the type of meta element The content attribute Of a keywords meta element: provides search engines with a list of words that describe a page, which are compared with words in search requests Of a description meta element: provides a three- to four-line description of a site in sentence form, used by search engines to catalog your site. This text is sometimes displayed as part of the search result Provides the information search engine use to catalog pages em (emphasize usually italic)

66

67

68

69

70 click

71 Internal link in another document*
href = “filename.html#id”

72 Creating and Using Image Maps*
Designate certain areas of an image (called hotspots) as links Element map Attribute id Identifies the image map Element area Defines hotspot Attribute shape and coords Specify the hotspot’s shape and coordinates Rectangular ( shape = “rect” ) Polygon ( shape = “poly” ) Circle ( shape = “circle” )

73 picture.html (1 of 2)

74 picture.html (2 of 2) x r attribute usemap

75

76 9  frameset Element* Allow browser display more than one document simultaneously XHTML 1.1 recommends using CSS Some browsers do not support frames (noframes) Element frameset Attribute cols Specifies the frameset’s column layout For example, 110, * means 2 vertical frames, first 110 pixels and second is the remainder Attribute rows Specifies the number of rows and the size of each row Element frame Specifies the documents that will be loaded Attribute src Specifies URL of the page to display

77 index.html (1 of 2)

78 index.html (2 of 2)

79

80 Targets* specify a target browser (the window to display the content in): <a href="some_url.html" target="window_name"> _top loads the page into the full browser (removes frameset) _parent similar to target="_top" but will refer to the immediate parent of a frame. In more advanced frame usage there may be several nested frames and this allows more control over which frames are specified _blank causes the link to open in a totally new browser window, leaving the page with the referring link still open behind it (no control over the size of the resulting window - it just depends what the browser happened to do the last time they shut their browser down) _self loads the page into the frame in which the anchor element appears

81 nav.html (1 of 2)

82 nav.html (2 of 2)

83   Nested framesets * framesets within framesets index2.html (1 of 2)

84 index2.html (2 of 2)

85


Download ppt "Introduction to XHTML/HTML5 (part 2)"

Similar presentations


Ads by Google