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

1 Introduction 2 Basic XHTML Table s 3 Intermediate XHTML Tables and Formatting 4 Basic XHTML Form s 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 Content 2

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. 3

Introduction TablesTables –Present information FormsForms –Collect information from visitor goes to server! Internal linkingimage mapsInternal linking and image maps –Enhance Web page navigation FramesFrames –Display multiple documents in the browser 4

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) 5

Pre-HTML 5 Table Attributes 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 6

Table Attributes AttributeValueDescription alignleft center right Not supported in HTML5. Specifies the alignment of a table according to surrounding text bgcolorrgb(x,x,x) #xxxxxx colorname Not supported in HTML5. Specifies the background color for a table border1010 Specifies whether or not the table is being used for layout purposes cellpaddingpixelsNot supported in HTML5. Specifies the space between the cell wall and the cell content cellspacingpixelsNot supported in HTML5. Specifies the space between cells framevoid above below hsides lhs rhs vsides box border Not supported in HTML5. Specifies which parts of the outside borders that should be visible rulesnone groups rows cols all Not supported in HTML5. Specifies which parts of the inside borders that should be visible sortable Specifies that the table should be sortable summarytextNot supported in HTML5. Specifies a summary of the content of a table widthpixels % Not supported in HTML5. Specifies the width of a table 7

Table cellpadding and cellspacing example Table cell 1 Table cell 2 <table border="1" cellpadding="5" cellspacing="20“ bordercolor="blue" bgcolor="yellow" width="50%"> Table cell 1 Table cell 2 8

TR Element and its Attributes 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 tag except that this sets only the color for that row bordercolor –the same as the bordercolor attribute of the tag except that this sets only the color for that row background –sets a background image 9

TR Element and bordercolor example (overriding) Table cell 1 Table cell 2 <table border="1" cellpadding="5" cellspacing="20“ bordercolor="blue“ bgcolor=“red" width="50%"> Table cell 1 Table cell 2 10

cellspacing The syntax for specifying the cell space is: –value is the width of the interior borders in pixels –the default cell spacing is 2 pixels 11

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: –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 align – is the same as the attribute in the tag except that it effects only that cell valign –is the same as the attribute in the tag except that it effects only that cell bgcolor –is the same as the attribute in the cell except that it effects only that cell bordercolor –is the same as the attribute in the tag except that it effects only that cell 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) Table cell 1 Table cell 2 <table border="1" cellpadding="5" cellspacing="20“ bordercolor="blue" bgcolor="yellow" width="50%"> Table cell 1 Table cell 2 14

15

16

17

18

19

20 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 or 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

<table width=“200” height=“200” align="center" cellspacing=“0” cellpadding=“5” border=“2” bordercolor="red"> This cell spans the two cells below using COLSPAN. Cell #2 Cell #3 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

…. This cell spans two rows using ROWSPAN. Cell #2 Cell #3 ….  Start by coding the total number of rows  Create 2 sets of  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: Cell #2 This cell spans two rows using ROWSPAN. Cell #3 23

24 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

25 Ex.: Adding Spanning Cells to a Table

26 Ex.: Spanning Cells

27 Ex.: Another Example of Spanning Cells

Cell[1,1] Cell[1,1] Cell[2,1] Cell[2,1] Cell[1,2] Cell[1,2] Cell[2,2] Cell[2,2] Cell[3,2] Cell[3,2] Cell[1,3] Cell[1,3] Cell[2,3] Cell[2,3] </table> Ex.: Column and Row Span 28 Cell[2,3]Cell[1,3] Cell[3,2] Cell[2,2] Cell[1,2] Cell[2,1]Cell[1,1]

Intermediate XHTML Tables and Formatting Element colgroup –Groups and formats columns. Since HTML 4.0. (use it, but don't rely on it!) ISBN Title Price My first HTML $ My first CSS $49 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 width s 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. You cannot make "L-shaped" cells by using both attributes in one. Spanning across more rows and columns than there are in the table can cause distortion 31

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 Tables (Cont.) 32

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

 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. br, img, hr 34

35

36

37

38

Forms Element form –Attribute method Specifies how the form’s data is sent to Web server method = “post” (http!) –Appends form data to the browser request method = “get” (http!) ( ) –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 name- value

43

 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 method 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 Action Attribute of the form

–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 input element

 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 hidden Inputs

 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 text input Element label, size, maxlength

 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 submit and reset input Elements

 The textarea element inserts a multiline text area into the form.  The number of row s 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 textarea

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 password

 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 –checkbox es can be used individually and in groups. checkbox es 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 Checkbox, radio, select

Usually picks the las one

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 Internal Linking

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) meta Elements

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): _ 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 frameset s * Nested frameset s * frameset s within frameset s index2.html (1 of 2) 84

index2.html (2 of 2) 85

86