chapter 6

avatar
Created by
Dayana Khoury

Cards (44)

  • HTML stands for HyperText Markup Language and is used to create Web pages
  • HTML allows you to create a Web page with text, graphics, sound, and video
  • The essence of HTML programming is tags, which are keywords enclosed by angle brackets
  • Opening and closing tags are used in HTML, with the closing tag containing an additional forward slash
  • All Web pages should contain a pair of <HTML>, <HEAD>, <TITLE>, and <BODY> tags
  • The <TITLE> tag in HTML is important for determining the ranking in search engines and for identifying the page in lists
  • Text formatting in HTML includes tags for bold, italics, underline, new paragraphs, and line breaks
  • Font in HTML can be changed using <FONT FACE>, <FONT SIZE>, and <FONT COLOR> attributes
  • Headings in HTML are created using <Hn> tags, where n ranges from 1 to 6 for different sizes
  • Text alignment in HTML can be adjusted using the ALIGN attribute in <P> and <Hn> tags
  • Comment statements in HTML are notes that explain features of the code and are enclosed in <!-- ... --> tags
  • Page formatting in HTML includes setting background color, text color, and text size using attributes in the <BODY> tag
  • Images in HTML are inserted using <IMG SRC> with options to adjust width, height, and add borders
  • Alternate text for images in HTML can be defined using the ALT attribute
  • Links in HTML are created using <A HREF> with destination, label, and target parts
  • Anchors in HTML allow users to jump to specific places on a website and are created using <A NAME> and <A HREF> tags
  • Ordered lists in HTML are numbered lists created with <OL> and <LI> tags
  • Unordered lists in HTML are bulleted lists created with <UL> and <LI> tags
  • Forms in HTML allow users to enter information and consist of the form shell and form elements
  • A form shell in HTML includes the <FORM> tag with the script address, form elements, and submit button
  • Text boxes, drop-down menus, radio buttons, checkboxes, text areas, submit, and reset buttons are common form elements in HTML
  • Creating Text Boxes:
    • To create a text box, type <INPUT TYPE=“text” NAME=“name” VALUE=“value” SIZE=n MAXLENGTH=n>
    • The NAME, VALUE, SIZE, and MAXLENGTH attributes are optional
  • Text Box Attributes:
    • The NAME attribute is used to identify the text box to the processing script
    • The VALUE attribute is used to specify the text that will initially appear in the text box
    • The SIZE attribute is used to define the size of the box in characters
    • The MAXLENGTH attribute is used to define the maximum number of characters that can be typed in the box
  • Creating Larger Text Areas:
    • To create larger text areas, type <TEXTAREA NAME=“name” ROWS=n1 COLS=n2 WRAP> Default Text </TEXTAREA>, where n1 is the height of the text box in rows and n2 is the width of the text box in characters
    • The WRAP attribute causes the cursor to move automatically to the next line as the user types
  • Creating Radio Buttons:
    • To create a radio button, type <INPUT TYPE=“radio” NAME=“name” VALUE=“data”>Label, where “data” is the text that will be sent to the server if the button is checked and “Label” is the text that identifies the button to the user
  • Creating Checkboxes:
    • To create a checkbox, type <INPUT TYPE=“checkbox” NAME=“name” VALUE=“value”>Label
    • If you give a group of radio buttons or checkboxes the same name, the user will only be able to select one button or box at a time
  • Creating Drop-down Menus:
    • To create a drop-down menu, type <SELECT NAME=“name” SIZE=n MULTIPLE>
    • Then type <OPTION VALUE= “value”>Label
    • The SIZE attribute specifies the height of the menu in lines and MULTIPLE allows users to select more than one menu option
  • Creating a Submit Button:
    • To create a submit button, type <INPUT TYPE=“submit”>
    • Use the VALUE attribute to change the text that appears on the button
  • Creating a Reset Button:
    • To create a reset button, type <INPUT TYPE=“reset”>
    • The VALUE attribute can be used to change the text that appears on the button
  • Tables:
    • Tables can be used to display rows and columns of data, create multi-column text, captions for images, and sidebars
    • The <TABLE> tag is used to create a table; the <TR> tag defines the beginning of a row while the <TD> tag defines the beginning of a cell
  • Adding a Border:
    • The BORDER=n attribute allows you to add a border n pixels thick around the table
    • To make a solid border color, use the BORDERCOLOR=“color” attribute
    • To make a shaded colored border, use BODERCOLORDARK=“color” and BORDERCOLORLIGHT=“color”
  • Adjusting the Width:
    • Use the WIDTH =n attribute in the <TABLE> and <TD> tags to eliminate extra space added by the browser
    • A cell cannot be smaller than its contents, and making a table wider than the browser window will hide parts of it
  • Centering a Table:
    • Center a table by typing <TABLE ALIGN=CENTER>
    • Enclose the <TABLE> tags in opening and closing <CENTER> tags
  • Wrapping Text around a Table:
    • To wrap text around a table, type <TABLE ALIGN = LEFT> to align the table to the left while the text flows to the right
    • Create the table using the <TR>, <TD>, and </TABLE> tags as you normally would
  • Adding Space around a Table:
    • To add space around a table, use the HSPACE=n and VSPACE=n attributes in the <TABLE> tag
  • Spanning Cells Across Columns:
    • To span a cell across many columns, type <TD COLSPAN=n>, where n is the number of columns to be spanned
  • Spanning Cells Across Rows:
    • To span a cell across many rows, type <TD ROWSPAN=n>, where n is the number of rows
  • Aligning Cell Content:
    • Use VALIGN=direction to change the vertical alignment (top, middle, bottom, or baseline)
    • Use ALIGN=direction to change the horizontal alignment (left, center, or right)
  • Controlling Cell Spacing:
    • CELLSPACING=n controls the space between cells
    • CELLPADDING=n controls the space around the contents of a cell
  • Nesting Tables:
    • Create the inner table
    • Create the outer table and determine which cell of the outer table will hold the inner table
    • Test both tables separately to ensure they work
    • Copy the inner table into the cell of the outer table
    • Avoid nesting too many tables