XP Introduction to HTML UNIT II III B

XP Introduction to HTML UNIT II

III B. COM(IT) B Prepared By Dr. D. Vanitha, Associate Professor, Dept of B. Com(IT) XP

XP Using HTML Tables 3

Defining a Table Structure XP • The first step to creating a table is to specify the table structure: – the number of rows and columns – the location of column headings – the placement of a table caption • Once the table structure is in place, you can start entering data into the table. 4

Using the <table>, <tr>, and <td> Tags XP • Graphical tables are enclosed within a two-sided <table> tag that identifies the start and ending of the table structure. • Each row of the table is indicated using a two-sided <tr> (for table row). • Within each table row, a two-sided <td> (for table data) tag indicates the presence of individual table cells. 5

The General Table Syntax XP <table> <tr> <td> First Cell </td> <td> Second Cell </td> </tr> <td> Third Cell </td> <td> Fourth Cell </td> </tr> </table> two rows two columns 6

Columns within a Table XP • HTML does not provide a tag for table columns. • In the original HTML specifications, the number of columns is determined by how many cells are inserted within each row. – for example, if you have four <td> tags in each table row, that table has four columns • Later versions of HTML provide increased support for controlling the appearance of table columns. 7

HTML Structure of a Table XP beginning of the table structure table cells first row of six in the table You do not need to indent the <td> tags or place them on separate lines, but you may find it easier to interpret your code if you do so. After the table structure is in place, you’re ready to add the text for each cell. end of the table structure 8

Creating Headings with the <th> Tag XP • HTML provides the <th> tag for table headings. • Text formatted with the <th> tag is centered within the cell and displayed in a boldface font. • The <th> tag is most often used for column headings, but you can use it for any cell that you want to contain centered boldfaced text. 9

Adding Table Headings to the Table XP Text in cells formatted with the <th> tag is bold and centered above each table column. table headings 10

Creating a Table Caption XP • HTML allows you to specify a caption for a table. • The syntax for creating a caption is: <caption align=“alignment”>caption text</caption> – – alignment indicates the caption placement a value of “bottom” centers the caption below the table a value of “top” or “center” centers the caption above the table a value of “left” or “right” place the caption above the table to the left or right 11

Table Captions XP • Only Internet Explorer supports all caption values. • Netscape supports only the “top” and “bottom” values. • The <caption> tag works only with tables, the tag must be placed within the table structure. • Captions are shown as normal text without special formatting. • Captions can be formatted by embedding the caption text within other HTML tags. – for example, place the caption text within a pair of <b> and <i> tags causes the caption to display as bold and italic 12

Result of a Table Caption XP caption text caption will be centered above the table 13

Modifying the Appearance of a Table XP • You can modify the appearance of a table by adding: – gridlines – borders – background color • HTML also provides tags and attributes to control the placement and size of a table. 14

Adding a Table Border XP • By default, browsers display tables without table borders. • A table border can be added using the border attribute to the <table> tag. • The syntax for creating a table border is: <table border=“value”> – value is the width of the border in pixels • The size attribute is optional; if you don’t specify a size, the browser creates a table border 1 pixel wide. 15

Tables with Different Borders Values XP This figure shows the effect on a table’s border when the border size is varied. 16

Adding a 5 -Pixel Border to a Table XP Only the outside border is affected by the border attribute; the internal gridlines are not affected. 17

Controlling Cell Spacing XP • The cellspacing attribute controls the amount of space inserted between table cells. • 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 • Cell spacing refers to the space between the cells. 18

Defining Cell Padding XP • 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. 19

Tables with Different Cell Spacing Values XP different cell spacing values different cell padding values 20

Table Frames and Rules XP • Two additional table attributes introduced in HTML 4. 0 are the frames and rules attributes. • With the frame and rule attributes you can control how borders and gridlines are applied to the table. • The frames attribute allows you to determine which sides of the table will have borders. • The frame attribute syntax is: <table frame=“type”> – type is either “box” (the default), “above”, “below”, “hsides”, “vsides”, “lhs”, “rhs”, or “void” 21

Values of the Frame Attribute XP 22

Effect of Different Frame Values XP This figure shows the effect of each of the frame values on the table grid. 23

Creating Frames and Rules Continued XP • The rules attribute lets you control how the table gridlines are drawn (not supported by Netscape) • The syntax of the rules attribute is: <table rules=“type”> – type is either “all”, “rows”, “cols”, or “none” the effect of each of the rules attribute values on a table 24

Working with Table and Cell Size XP • The size of a table is determined by text it contains in its cells. • By default, HTML places text on a single line. • As you add text in a cell, the width of the column and table expands to the edge of the page. – once the page edge is reached, the browser reduces the size of the remaining columns to keep the text to a single line • You can insert line break, paragraph, or other tags within a cell. • When the browser can no longer increase or decrease the size of the column and table it wraps the text to a second line. • As more text is added, the height of the table expands to accommodate the additional text. • But, you can manually define the size of the table and its cells. 25

Defining the Table Size XP • The syntax for specifying the table size is: <table width=“size” height=“size”> – size is the width and height of the table as measured in pixels or as a percentage of the display area • To create a table whose height is equal to the entire height of the display area, enter the attribute height=“ 100%”. • If you specify an absolute size for a table in pixels, its size remains constant, regardless of the browser or monitor settings used. • Remember that some monitors display Web pages at a resolution of 640 by 480 pixels. 26

Setting the Width of the Table to 500 Pixels XP 27

Defining Cell and Column Sizes XP • To set the width of an individual cell, add the width attribute to either the <td> or <th> tags. • The syntax is: width=“value” – value can be expressed in pixels or as a percentage of the table width – width value of 30% displays a cell that is 30% of the total width of table. • The height attribute can also be used in the <td> or <th> tags to set the height of individual cells. – The height attribute is expressed either in pixels or as a percentage of the height of the table. – If you include more text than can be displayed within that height value you specify, the cell expands to display the additional text. 28

Defining Cell and Column Sizes XP • Specifying a width for an individual cell does not guarantee that the cell will be that width when displayed in the browser. – the reason for this is that the cell is part of a column containing other cells. • Set the width of all the cells in the column to the same value to ensure that the cells do not change in size. 29

Aligning a Table on the Web Page XP • By default, a browser places a table on the left margin of a Web page, with surrounding text placed above and below the table. • To align a table with the surrounding text, use the align attribute as follows: align=“alignment” – alignment equals “left”, “right”, or “center” – left or right alignment places the table on the margin of the Web page and wraps surrounding text to the side – center alignment places the table in the horizontal center of the page, but does not allow text to wrap around it • The align attribute is similar to the align attribute used with the <img> tag. 30

Results of a Right-Aligned Table XP 31

Aligning the Contents of a Table XP • By default, cell text is placed in the middle of the cell, aligned with the cell’s left edge. • By using the align and valign attributes, you can specify the text’s horizontal and vertical placement. • To align the text for a single column, you must apply the align attribute to every cell in that column. 32

Values of the Align and Valign Attributes XP 33

Spanning Rows and Columns XP • 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 34

Example of Spanning Cells This cell spans two columns and two rows XP this cell spans three columns This cell spans three rows 35

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

Adding Spanning Cells to a Table XP 37

Another Example of Spanning Cells XP 38

Another Example of Spanning Cells XP 39

Applying a Background Color XP • Table elements support the bgcolor attribute. • To specify a background color for all of the cells in a table, all of the cells in a row, or for individual cells, by adding the bgcolor attribute to either the <table>, <tr>, <td>, or <th> tags as follows: <table bgcolor=“color”> <tr bgcolor=“color”> <td bgcolor=“color”> <th bgcolor=“color”> – color is either a color name or hexadecimal color value 40

Specifying Table, Row, and Cell Colors XP

Specifying Table, Row, and Cell Colors XP

The bordercolor Attribute XP • By default, table borders are displayed in two shades of gray that create a three-dimensional effect. • The syntax for the bordercolor attribute is: <table bordercolor=“color”> – color is an HTML color name or hexadecimal color value • Internet Explorer and Netscape apply this attribute differently. <table border=“ 10” Internet Explorer bordercolor=“blue”> Netscape 43

Applying a Table Background XP • Add a background image to your tables using the background attribute. • A background can be applied to the entire table or to a cell. parch. jpg <table background=“parch. jpg”> <td background=“parch. jpg”> 44

Designing a Page Layout with Tables XP • HTML tables are most often used to define the layout of an entire Web page. • If you want to design a page that displays text in newspaper style columns, or separates the page into distinct sections, you’ll find tables an essential and useful tool. 45

Table Layout of a Web Page XP 620 pixels 1) newspaper logo 120 pixels a sample table layout of a Web page. 2) list of links 500 pixels 3) articles 4) address and phone number 46

Using Nested Table XP • Tables can be created within another table making the Web page easier to manage. a sketch of a web page using nested tables 47

The Result of the Web Page using Nested Tables XP a sample web page using nested tables 48

An Example of the Contents XP 49

An Example of the Gargoyle Notes XP 50

Introducing Frames : Applications XP • A frame is a section of the browser window capable of displaying the contents of an entire Web page. For example: – the frame on the left may display the contents of a Web page containing a list of hyperlinks – the frame on the right may display a Web page with product information 51

Advantages to Using Frames XP • Frames can give more flexibility in designing your Web presentation • You can place information in different Web pages, removing redundancy • Frames can make your site easier to manage • Frames allows you to update only a few files rather than the whole • Web designers advocate creating both framed and non-framed versions for a Web site and giving users the option of which one to use 52

Disadvantages to Using Frames XP • The browser has to load multiple HTML files before a user can view the contents of the site increasing the waiting time for potential customers • Some older browsers cannot display frames • Some users simply do not like using frames • Some web authors feel that frames are too constricting, limiting flexibility in designing the layout of a Web page • There is concern that frames can use up valuable screen space • The source code is removed from the user 53

An Example of Frames XP A common use of frames: displaying a table of contents in one frame, while showing individual pages from the site on the another. 54

Activating a Hyperlink within Frames XP A list of hyperlinks that remain on the screen while the user navigates through the contents of the site. 55

XP Planning Your Frames • Before you start creating your frames, it is a good idea to plan their appearance and how they are to be used. There are several issues to consider: – – – What information will be displayed in each frame? How do you want the frames placed on the Web page? What is the size of each frame? Which frames will be static (always showing the same content)? What Web pages will users first see when they access the site? Should users be permitted to resize the frame to suit their needs? 56

An Example of a Frame Layout Sketch XP 57

Creating a frameset XP • A frameset describes how th frames are organized; they are defined by rows or columns, but not both. • You must choose to layout your frames in either rows or columns • To create a frame layout, you will use the rows and cols attributes of the <frameset> ta – the rows attribute creates a row of frames – the cols attribute creates a column of frames 58

Creating a Frameset XP • The <frameset> tag is used to store the definitions of the various frames in the file. These definitions will typically: – include the size and location of the frame – include the Web pages the frames display • The <frameset> code does not include an opening and closing <body> tag – the reason for this is that this HTML file displays the contents of other Web pages; technically, it is not a Web page 59

Frames Defined in either Rows or Columns XP Frames laid out in columns Frames laid out in rows 60

XP The Frame Syntax • The syntax for creating a row or column frame layout is: – <frameset rows=“row 1, row 2, row 3, . . . ”> </frameset> or – <frameset cols=“column 1, column 2, column 3, . . . ”> </frameset> 61

Specifying a Frame Source XP • To specify a source for a frame, use the <frame> tag with the syntax: <frame src=“url” /> • The URL is the filename and location of the page that you want to load. • You must insert the <frame> tag between the opening and closing <frameset> tags 62

Logo and Placement XP 63

Inserting a Frame for the Head. htm File XP Because this is the first <frame> tag, the browser displays head. htm in the first frame row. Note that using the comment tag and indenting the <frame> tag a few spaces helps make your HTML code easier to follow and interpret. Frame source 64

Nesting Framesets XP • Remember that a frameset is defined by rows or columns, but not both • To create frames using both rows and columns, one frameset must be nested inside another • The interpretation of the rows and cols attributes changes slightly – for example, a row height of 25% does not mean 25% of the display area, but rather 25% of the height of the frame into which that row has been inserted (or nested) 65

Creating a Nested Set of Frames in the Second Frame Row XP two columns of frames nested in the second frame row 66

Nested Frames XP 67

Inserting frame columns XP 68

Result of Web Site with Nested Frames XP 69

Formatting a Frames XP • You can control three attributes of a frame: – scroll bars – the size of the margin between the source document and the frame border – whether or not the user is allowed to change the size of the frame 70

XP Hiding and Displaying Scroll Bars • By default, scroll bars are displayed when the content of the source page cannot fit within the frame • You can override the default setting using the scrolling attribute • The scrolling syntax is: scrolling=“type” – scrolling can either be “yes” (to always display scroll bars) or “no” (to never display scroll bars) • If you don’t specify a setting for the scrolling attribute, the browser displays scroll bars when necessary 71

Setting Frame Margins XP • The following should be consider for frame margins: – the browser determines the amount of space between the content of the page and the frame border – occasionally, the browser sets the margin between the border and the content too large – the margin should be big enough to keep the source’s text or images from running into the frame’s borders – the margin should not take up too much space, because you typically want to display as much of the source as possible 72

Specifying Margins Syntax XP • The syntax for specifying margins for a frame is: marginheight=“value” marginwidth=“value”> – marginheight is the amount of space, in pixels, above and below the content of the page in the frame – marginwidth is the amount of space to the left and right of the page • If you specify only one, the browser assumes that you want to use the same value for both • Setting margin values is a process of trial and error as you determine what combination of margin sizes looks best 73

Result of Web Site with Resized Frame Margins XP 74

Files and links in a Web Site XP 75

Setting the Border Color XP • To change the color of a frame’s border, use the bordercolor attribute • The attribute can be applied either to an entire set of frames, using the <frameset> tag, or to individual frames, using the <frame> tag • The syntax for this attribute is: – bordercolor=“color”> 76

XP FORMS

Form Processing Input User Output B r o w s e r XP HTML Form Data from Form Web Server HTML Document Form Processing Program (CGI) Data Flow Database Management System Flow of Information for Forms

Forms XP • The FORM element is used to create a data input form. • A region using forms is enclosed within the <FORM> </FORM> tags. • A document can have several forms, but the forms should not be embedded. • The FORM element has three attributes: – ACTION, METHOD, and ENCTYPE.

Forms XP • METHOD: – Specifies the way in which the data from the user are encoded. – The default METHOD is GET, although the POST method is preferred. – GET: The CGI program receives the encoded form input in the QUERY_STRING variable, which follows the “? ” in the URL that calls the script. – POST: The CGI script or program receives the encoded form input in its standard input stream. The CONTENT_LENGTH must be used.

Forms XP • ACTION: – Specifies the destination URL to which the form should be submitted, once it has been completed by the user. – If no URL is specified, the URL of the current document containing the form is used. – MAILTO Action: The data from the form is mailed to the specified E-mail address. Use the POST method.

Forms • ENCTYPE: – Tell the browser how the data from a form should be encoded when it is returned to the server. – The default is “application/x-www-form-urlencoded” that converts spaces to “+” and uses “&” to delineated different data fields. XP

Form Tag <Form Action=“getemp. asp” Method=“post”> (all form elements inside) </Form> XP

Forms XP • Form Input: INPUT – Only used within a FORM element and is denoted by <INPUT>. – Attributes: • NAME: The name of the particular element. • MAXLENGTH: The maximum number of characters that can be entered by users in a text field. • SIZE: Specifies the size of the field and depends on its type. • SRC: Denote URL for an image. • VALUE: Contain the initial value displayed to users. • TYPE: Defines the type of data used in the field. • CHECKED: Indicates that a checkbox or radio button is selected. • DISABLED: Prevents the field from receiving focus. • ALIGN: Alignment if image is used. • READONLY: Prevents modification of the contents of the field.

TYPE Attribute XP • Checkbox: – An object where several values can be selected at the same time. – The checkbox is submitted as separate name/value pair for each selected value. – Checkbox that are grouped together should have • a different name. • a unique value.

TYPE Attribute • Checkbox: <FORM> What pets do you own? <P><INPUT TYPE=CHECKBOX name = petdog value=“dog”> DOG <BR><INPUT TYPE=CHECKBOX name = petcat value=“cat”> CAT <BR><INPUT TYPE=CHECKBOX name = petbird value=“bird”> BIRD <BR><INPUT TYPE=CHECKBOX name = petfish value=“fish”> FISH </FORM> XP

TYPE Attribute XP • Radio Boxes: – An object that defines an item where only one value can be selected from a set of possibilities. – A set is defined as the group of radio boxes with the same NAME attribute. – Never set more than one radio box at a time with the CHECKED attribute. <P><B>Charge Card: </B> <INPUT NAME = “cc” VALUE=“visa” TYPE = “radio”>VISA <INPUT NAME = “cc” VALUE=“mc” TYPE = “radio”>Master Card <INPUT NAME = “cc” VALUE=“amex” TYPE = “radio”>American Express

TYPE Attribute XP • HIDDEN Type: – When this type is chosen, no field is presented to the user. – Primary use is record keeping for programs that may parse user input from forms. – May be used for shopping carts.

TYPE Attribute XP • TEXT type: – Specifies a single line text entry field. – Can be used with the MAXLENGTH and SIZE attributes (MAXLENGTH >= SIZE) <P><B> First Name: </B> <INPUT NAME=“fname” TYPE = text MAXLENGTH=30 SIZE =30></P> <P><B> Last Name: </B> <INPUT NAME=“lname” TYPE = text MAXLENGTH=30 SIZE =30></P>

TYPE Attribute • PASSWORD Type: – Same as text except the text entered by the user is obscured. – Use the MAXLENGTH and SIZE attributes. <P><B> Enter Your Password: </B> <INPUT NAME=“password” TYPE = password MAXLENGTH=30 SIZE =30></P> XP

TYPE Attribute XP • SUBMIT and RESET Types: – SUBMIT: Used to submit the form’s content, as specified by the ACTION attribute. – RESET: Set all fields in the form to their initial values. <P>INPUT TYPE=SUBMIT> <INPUT TYPE=RESET> <P><INPUT TYPE=SUBMIT VALUE = “Place Your Order”> <INPUT TYPE=RESET VALUE = “Start over”>

TYPE Attribute XP • BUTTON Input Type: – Creates a button whose use can be defined through scripting and on. Click event. – Use to create a back button. – Only useful to browsers that support scripting. <FORM><P><INPUT TYPE=“button” VALUE=“Back to Last Document” on. Click=“history. back( )”></P></FORM>

TEXTAREA XP • Let users enter more than one line of text. • Uses attributes ROWS and COLS to size. • WRAP Attribute: – OFF: No wrapping – VIRTUAL: Display wraps but long lines are sent as one line. – PHYSICAL: Word wraps and text is sent with wrap points.

Pull. Down Menu • Use SELECT and OPTION to create pulldown menu. • SELECT: – Allows the user to choose one (or possibly more) items from a list. – Attributes: MULTIPLE, SIZE, and NAME. • OPTION: – Specifies the list items. – Attributes: SELECTED, VALUE, and LABEL XP

Pull. Down Menu • Example: <P><B>Pick your favorite baseball team: </B> <BR><SELECT NAME=“team”> <OPTION>Dodgers <OPTION>Braves <OPTION>Cardinals <OPTION>Yankees </SELECT> XP

Form Programming XP • Handling GET Forms: – A typical invocation of a GET-style applicatoin might use a URL like this: http: //www. kumquat. com/cgibin/dump_get? name=bob&phone=555 -1212 – When the server processes this URL, it invokes the application named dump_get stored in the directory named cgi-bin. Everything after the question mark is passed to the application as parameters. – The parameters are placed in a variable named QUERY_STRING.

Form Programming • Handling POST Method: – Data is sent in the format: name=bob&phone=555 -1212 – No URL is sent. XP

Cascading Style Sheets XP CSS 98

XP What is CSS? • A simple mechanism for controlling the style of a Web document without compromising its structure. • It allows you to separate visual design elements (layout, fonts, colors, margins, and so on) from the contents of a Web page. • Allows for faster downloads, streamlined site maintenance, and global control of design attributes across multiple pages. 99

XP CSS vs. just HTML • What can we do with CSS that we can’t do with HTML? – Control of backgrounds. – Set font size to the exact height you want. – Highlight words, entire paragraphs, headings or even individual letters with background colors. – Overlap words and make logo-type headers without making images. – Precise positioning. – Linked style sheets to control the look of a whole website from one single location. – And more. 100

XP How to write CSS? • Selector – HTML element tags (examples: p, h 2, body, img, table) – class and ID names • Property (examples: color, font-size) • Value (examples: red, 14 pt) 101

XP How to write CSS: • The basic syntax of a CSS rule: selector {property 1: value 1; property 2: value 2} Example: p {font-size: 8 pt; color: red} Notice the { } around the rule and the : before each value! 102

XP Three ways to include CSS: 1. Local (Inline) 2. Global (Embedded, or Internal) 3. Linked (External) 103

XP 1. Local • • Inline style sheet. Placed inside tags. Specific to a single instance of an html tag on a page. Must be used instead of <font> tags to specify font size, color, and typeface and to define margins, etc. • Use to override an external or embedded style specification. 104

XP Local (inline) • Example <p style="font-size: 10 pt; color: red; font-weight: bold; font -family: Arial, Helvetica, sans-serif"> This is a local stylesheet declaration. </p> On the browser: 105

XP 2. Global • Embedded or internal style sheet • Applicable to an entire document • Styles are defined within the <style> </style> tag, which is placed in the header of the html file (i. e. , within <head> and </head>). 106

XP Global (Internal) • Example: <html> <head> <title>Title</title> <style type="text/css"> <!--[STYLE INFORMATION GOES HERE] --> </style> </head> <body> </html> [DOCUMENT BODY GOES HERE] 107

XP 3. Linked • External style sheet • Styles are saved in a separate file, with the extension . css • This single stylesheet can be used to define the look of multiple pages. 108

XP Linked (External) • Example In Text. Pad, Notepad, p {font-family: verdana, sans-serif; etc. … font-size: 12 pt; color: red} Save this text file as whatever. cs s h 1 {font-family: serif; font-size: 14 pt; color: green} h 2 {font-family: serif; font-size: 11 pt; color: blue} 109

XP Linked (External) • Example (continued) To apply the stylesheet “whatever. css“ to an HTML document, call it in from the header: <head> <link rel="stylesheet" href=“whatever. css" type="text/css"> </head> 110

XP Let’s try this now! <h 1 style=“text-align: center; font-weight: bold; color: blue”> Styling with CSS! </h 1> <p style="font-size: 10 pt; color: red; font-weight: bold; fontfamily: Arial, Helvetica, sans-serif“ > Write whatever you want here </p> 111

XP Grouping properties • Separate properties with a semi-colon – Example: p {text-align: center; color: red; fontfamily: Arial; font-style: italic} 112

XP Grouping selectors • Separate selectors with a comma – Example: h 1, h 2, h 3, h 4, h 5, h 6 { color: green } (each header will be green) • Separate selectors with a space – Example: p li { color: red } (only items within a list and a paragraph tag will be red) 113

XP The class Selector • With a class selector you can define different styles for the same type of HTML element • Examples: First define the class: p. right {text-align: right; color: red; font-style: italic} p. blue {text-align: center; color: blue} Then use the class in your HTML code : <p class="right"> This paragraph will be right-aligned, italic, and red. </p> <p class=“blue"> This paragraph will be center-aligned and blue. </p> 114

XP The class Selector • You can also omit the tag name in the selector to define a style that will be used by all HTML elements that have this class. • Example: . poem {text-align: center; font-style: italic} Any HTML element with class=“poem" will be center -aligned and italic. 115

XP The class Selector • Example (continued) Both elements below will follow the rules in the ". poem“ class: <h 1 class=“poem"> This heading will be center-aligned and italic </h 1> <p class=“poem"> This paragraph will also be centeraligned and italic. </p> 116

XP Class Example <style> p {font-family: sans-serif; font-size: 10 pt} h 1 {font-family: serif; font-size: 30 pt} h 2 {font-family: serif; font-size: 24 pt} . boldred {color: red; font-weight: bold} . green {color: green} . tinyblue {color: blue; font-size: 8 pt} </style> The tags and classes can then be used in combination: <h 1 class=“boldred">This is rendered as 30 -point red serif bold text. </h 1> <p class=“boldred">This is rendered as 10 -point red sans-serif bold text. </p> 117

XP Applying styles to portions of a document: • <div> – A division tag: to “package” a block of document into one unit. It defines a block element. – Causes a line break, like and <p>. • <span> – “Wraps” a portion of text into a unit, but doesn't cause a line break. Allows styles to be applied to an 'elemental' region (such as a portion of a paragraph). 118

XP Example <p><span class="foo">This text is rendered as foo -style</span> and this is not. </p> <div class="foo"> <p>The "foo" style will be applied to this text, and to <a href="page. html">this text</a> as well. </div> 119

XP Properties - Font • font-family – Name, or serif, sans-serif, cursive, monospace • font-style – normal, italic • font-weight – normal, bold, 100, 200, 300, 400, 500, 600, 700, 800, 900 • font-size – absolute-size, relative-size, length, percentage • font-variant – small-caps 120

XP Properties - Text • text-decoration – underline, line-through • text-transform – capitalize, uppercase, lowercase, none • text-align – left, right, center, justify • text-indent – <length>, <percentage> 121

XP Properties - Position • position – absolute, relative • top – <length>, <percentage>, auto • left – <length>, <percentage>, auto • Z-index – <number>, auto 122

XP THANK YOU