| Date post: | 20-Jan-2018 |
| Category: |
Documents |
| Upload: | kristopher-trevor-jordan |
| View: | 229 times |
| Download: | 0 times |
1Chapter 2 - Introduction to HTML: Part 2
Outline
Basic HTML TablesIntermediate HTML Tables and Formatting
Basic HTML FormsMore Complex HTML Forms
Internal Linking<meta> Tags
frameset Element Nested framesets
2
Tables
Tag Description<table> Defines the table
<caption> Defines the table caption
<summary> Defines the table description
<thead> Defines the table header
<tfoot> Defines the table footer
<tbody> Defines the table body
<tr> Defines the table row
<th> Defines the table header
<td> Defines the table data cell
3Tables attributeAttribut
eDescription
Border Create a border
Width Determine the table width
Valign Determine the position of <tr> content (top, middle, button)
Rowspan To merge rows
Clospan To merge columns
Cellpading To create more white space between the content and its border
Cellspacing Increase the distance between the cells
Bgcolor Background color for the cell or table
Background To add a background image to the table
Bordercolor To coloring the table border
Frame Control the border around the table (border, box, above, below,)
4Table1.html
<html> <head> <title>A simple HTML table</title> </head> <body> <!-- The <table> tag opens a table --> <table border = "1" width = "40%" summary = "This table provides information about the price of fruit"> <caption><strong>Price of Fruit</strong></caption> <thead> <tr> <th>Fruit</th> <th>Price</th> </tr> </thead>
The border attribute gives the size in pixels of the table’s border.
The width attribute gives the width of the table.
The summary attribute describes the table’s contents.
Text placed in a table header is rendered bold and centered in the cell.
5Table1.html <tbody> <tr> <td>Apple</td> <td>$0.25</td> </tr> <tr> <td>Orange</td> <td>$1.50</td> </tr> <tr> <td>Banana</td> <td>$1.00</td> </tr> <tr> <td>Pineapple</td> <td>$2.00</td> </tr> </tbody> <tfoot> <tr> <th>Total</th> <th>$3.75</th> </tr> </tfoot> </table> </body> </html>
The body of the table is placed between the tbody tags.
Table rows are created using the tr element
Data placed between td tags are placed in an individual cell.
The table footer belongs at the bottom of the table. It formats text in a similar manner to a table header.
6
Table1.html
Program Output
Table footer
End of table body
Start of table body
Table header
Table Caption
7Table2.html <html> <head> <title>Internet and WWW How to Program - Tables</title> </head> <body> <h1>Table Example Page</h1> <table border = "1"> <caption>Here is a more complex sample table.</caption> <colgroup> <col align = "right" span = "1" /> </colgroup> <thead> <tr> <!-- Merge two rows --> <th rowspan = "2"> <img src = "camel.gif" width = "205" height = "167" alt = "Picture of a camel" /> </th> <!-- Merge four columns --> <th colspan = "4" valign = "top"> <h1>Camelid comparison</h1><br /> <p>Approximate as of 8/99</p> </th> </tr> <tr valign = "bottom"> <th># of Humps</th> <th>Indigenous region</th> <th>Spits?</th> <th>Produces Wool?</th> </tr> </thead>
The align attribute is used to horizontally align data in a cell.
The span attribute indicates width of the data cell in number of columns.
The value of the colspan attribute gives the amount of columns taken up by the cell.
The vertical alignment of data in a cell can be specified with the valign attribute.
8
<tbody> <tr> <th>Camels (bactrian)</th> <td>2</td> <td>Africa/Asia</td> <td rowspan = "2">Llama</td> <td rowspan = "2">Llama</td> </tr> <tr> <th>Llamas</th> <td>1</td> <td>Andes Mountains</td> </tr> </tbody> </table> </body> </html>
Table2.html
The value of the rowspan attribute gives the amount of rows taken up by the cell.
9
Table2.html
Program Output
Cell spanning the size of two rows.
Cell spanning the size of four columns.
10
HTML Form
•A form is an area that can contain form element.•Form can be either visual component (clickable button, and other graphical user interface) and non visual component called hidden inputs, store any data that, the document author specifies such as e-mail address and HTML document file name that acts as link.•Form elements are elements that allow the user to enter information (like text field, text area, dropdown list, radio button, check box , etc).
11
Form Tags
Tag Description<form> Defines a form user input
<input> Defines an input field
<textarea> Defines a text area (multi line text input control)
<label> Defines a label to a control
<select> Defines a selectable list (dropdown list)
<option> Defines an option in the dropdown box
<button> Defines a push button
12
Form Type attributes
Type Description"Text” To insert text
“password” Information input by asters
“file” To make a brows button
“reset” Reset all for elements to their default value
“submit” Data will send to the web server for processing.
“button” To create a button
“hidden” Send form data that is not input by the user.
13
Text FieldText fields are used when you want the user to type letters, numbers…etc
Attribute
Description
Size Specifies the number of characters visible in the text box.
Maxlength Limits the number of characters input into the text box
Name Identifies the input element.
<Form>First name:<input type="text" name="fname"> <br>Last name:<input type="text" name="lname"> <br>Password:<input type="password" name="pass"> <br>Your file:<input type="file" name="file brows"> </form>
14
Buttons
1. create a button: <Form><input type="button" value="calculate"/></form>2. submit, reset:<Form><input type="submit" value="submit your entries"/><Br> <input type="reset" value="reset your entries"/></form>The default value is:Submit submit query Reset reset.
15
Text areaAttribut
eDescription
rows Specified number of rows cols Specified number of columns wrap "off": text display in one line
<Form>comment: <br><textarea name="comment" rows="4" cols="30"> enter your comment here"</textarea></form>
16
Radio buttonRadio button are used when you want the user to select one of limited number of choices.
Attribute
Description
Name Identifies the input element. (must be the same value)Value Distinguished between radio buttons (the value that will be
sending to the web server). Checked Indicates which radio button is selected initially.
Checked=checked <Form>Sex:<input type="radio" name="sex" value=“ma"> male <br><input type="radio" name="sex" value="fe"> female </form>
17
CheckboxCheck box is used when you want the user to select one or more option of limit number of choices.
Attribute
Description
Name Identifies the input element. (must be the same value)Value Distinguished between check box.
Checked Indicates which check box is selected initially. Checked=checked
<Form> site design <input type="checkbox" name="things" value="de"/> </label>links <input type="checkbox" name="things" value=“li"/> </form>
18
Dropdown listTag Description
<select> Provide drop-down list of line, from which the user can select an item.
<option> Add item to the dropdown list
Attribute
Description
name Identify the drop-down list
selected Specifies which item initially is displayed as the selected item in the select element.
<Form> car type:<select name="rating"><option selected="selected"> BMW</option><Option> Mazda </option><Option> Honda </option><Option> Kia </option></select></form>
19
Program Output
Text box created using input element.
Submit button created using input element.
Reset button created using input element.
20
Form2.html
<!-- <textarea> creates a multiline textbox --> <p><label>Comments:<br /> <textarea name = "comments" rows = "4" cols = "36"> Enter your comments here. </textarea> </label></p> <!-- <input type = "password"> inserts a --> <!-- textbox whose display is masked with --> <!-- asterisk characters --> <p><label>E-mail Address: <input name = "email" type = "password" size = "25" /> </label></p> <p> <strong>Things you liked:</strong><br /> <label>Site design <input name = "thingsliked" type = "checkbox" value = "Design" /></label> <label>Links <input name = "thingsliked" type = "checkbox" value = "Links" /></label> <label>Ease of use <input name = "thingsliked" type = "checkbox" value = "Ease" /></label> <label>Images <input name = "thingsliked" type = "checkbox" value = "Images" /></label>
Setting an input element’s type attribute to checkbox will create a checkbox.
Checkboxes that belong to the same group must have same value in the name attribute.
The textarea element renders a text area when the page is displayed. The size of the text area can be specified
with the rows and cols attribute.
21
Form2.html
Program Output
<label>Source code <input name = "thingsliked" type = "checkbox" value = "Code" /></label> </p> <p> <input type = "submit" value = "Submit Your Entries" /> <input type = "reset" value = "Clear Your Entries" /> </p> </form> </body> </html>
Checkbox options created with input element.
Text area created with input element.
22
Form3.html
<html> <head> <title>Internet and WWW How to Program - Forms</title> </head> <body> <h1>Feedback Form</h1> <p>Please fill out this form to help us improve our site.</p> <p><input type = "hidden" name = "redirect" value = "main.html" /> </p> <p><label>Name: <input name = "name" type = "text" size = "25" /> </label></p>
23
Form3.html
<p><label>Comments:<br /> <textarea name = "comments" rows = "4" cols = "36"></textarea> </label></p> <p><label>E-mail Address: <input name = "email" type = "password" size = "25" /></label></p> <p> <strong>Things you liked:</strong><br /> <label>Site design <input name = "things" type = "checkbox" value = "Design" /></label> <label>Links <input name = "things" type = "checkbox" value = "Links" /></label> <label>Ease of use <input name = "things" type = "checkbox" value = "Ease" /></label> <label>Images <input name = "things" type = "checkbox" value = "Images" /></label> <label>Source code <input name = "things" type = "checkbox" value = "Code" /></label> </p>
24
Form3.html
<p> <strong>How did you get to our site?:</strong><br /> <label>Search engine <input name = "how get to site" type = "radio" value = "search engine" checked = "checked" /> </label> <label>Links from another site <input name = "how get to site" type = "radio" value = "link" /></label> <label>Deitel.com Web site <input name = "how get to site" type = "radio" value = "deitel.com" /></label> <label>Reference in a book <input name = "how get to site" type = "radio" value = "book" /></label> <label>Other <input name = "how get to site" type = "radio" value = "other" /></label> </p>
The checked attribute will mark this radio option by default.
An input element with type value equal to radio creates
radio buttons.
25
Form3.html
<p> <label>Rate our site: <select name = "rating"> <option selected = "selected">Amazing</option> <option>10</option> <option>9</option> <option>8</option> <option>7</option> <option>6</option> <option>5</option> <option>4</option> <option>3</option> <option>2</option> <option>1</option> <option>Awful</option> </select> </label> </p> <p> <input type = "submit" value = "Submit Your Entries" /> <input type = "reset" value = "Clear Your Entries" /> </p> </form> </body> </html>
The selected attribute selects a default value for the drop down list.
The select element creates a drop down list.
The option tag is used for each option in the drop down list.
26
Program Output
Drop down box list created with input element.The
Amazing option is selected as a default value.
Radio box list created with input element.
27
Program Output
28
Internal Linking
Attribute
Description
Id Create an internal hyperlink destination
•Mechanism that enable the user to jump between locations in the same document.•Internal linking is useful for long documents that contain many sections.•Clicking an internal link enable users to find a section without scrolling through the entire document.
<a href="#value"> the internal link address.
29Internal LinkingExample:<Html><Head><Title> internal linking </title></head><Body><h1> internal linking </h1><h1 id=" table content"> table content </h1><Ol><Li> chapter one <li> <Li> chapter two </li> <Li> chapter three </li><Li> <a href="#ch4"> chapter four </a> </li></ol><h1 id="ch4"> </h1><p> <h2> chapter four content <h2> </p><Ul><Li> tags </li> <Li> link </li><Li> image </li></ul><p><a href="#table content"> go to table of content </a> </p>
To internally link, place a # sign in front of the name of the desired anchor element within the page.
An anchor named ch4 will be created at this point on the page.
This anchor does not link and will not be seen on the page. However,
other anchors can refer to this anchor and link to it.
30Meta Element
Attribute
Description
<meta> Defines meta information
•Search engines are read content in each web site these content are called Meta data.•Meta data specify information about element
Attribute:Name: type of element (keyword, description)Content: provide information search engines to catalog pages.Type, value "keyword": list of words that describe a page. "Description": description of site written in sentence form.Note: Meta element is defined in <head> section tag because they are not visible to the user, and if not in head section they will not be visible to the user.
31Meta ElementExample:
<Html>
<Head>
<Title> Meta data </title>
<Meta name="keyword" content="web page, design, index, graphics"/>
<Meta name="description" content="this web site will help you to learn the basic of html"/>
</head>
<Body>
</body>
</html>
The meta element provides information to search
engines about the document.
The name attribute describes the type of meta element.
The content attribute provides the information search engines
use to catalog pages.
32
HTML Frames
Tag Description<frameset> Defines a set of frames
<frame> Defines a frame (sub window)
<noframe> Defines a no frame section for browser that do not handle frames.
The frame set tag:•<Frameset> tag: defines how to divide the window into frames.•Each frameset defines a set of rows or columns.•The value of rows/columns indicates the amount of screen area each row/column will occupy.•Defines before the <body> tag.
33
Frameset Tag
Example 1:<frameset rows="50%, 50 %">two horizontal framesFirst frame extends 50% from the document.Second frame extends 50% from the document.
Example 2:<frameset cols="110, *">Two vertical framesFirst frame extends 110 pixels from the left.Second frame fills the reminder of the browser width (*).
The frame set tag:•<Frameset> tag: defines how to divide the window into frames.•Each frameset defines a set of rows or columns.•The value of rows/columns indicates the amount of screen area each row/column will occupy.•Defines before the <body> tag.
34
Frame Tag
The frame tag:<Frame> tag defines what HTML document to put into each frame.
Example 1:<frameset cols="25%, 75 %"><frame src="a.html"><frame src="b.html"></frameset>
Attribute Description
src Defines the source of the document
noresize Preventing the user to resize the frame border. "Resize".
35
Frame TagExample 2:<frameset cols="50%, 50 %"><frame noresize="noresize" src="a.html"><frameset rows="25%, 75 %"><frame noresize="noresize" src="b.html"><frame noresize="noresize" src="c.html"></frameset></frameset>
Example 3::<Html><frameset cols="25%, 50%, 25 %"><frame src="a.html"><frame src="b.html"><frame src="c.html"><Noframes><Body>Your browser does not handle frames </body></noframes></frameset></html>
36Index.html <html> <head> <title>Internet and WWW How to Program - Main</title> </head> <frameset cols = "110,*"> <frame name = “leftframe" src = "nav.html" /> <frame name = "main" src = "main.html" />
<noframes> <p>This page uses frames, but your browser does not support them.</p> <p>Please, <a href = "nav.html">follow this link to browse our site without frames</a>.</p> </noframes> </frameset> </html>
The frameset element informs the browser that the page contains
frames.
The frame element loads documents into the frameset. The src attribute
indicates the document to be loaded.
Nav.html is loaded into the left frame and main.html is loaded into the right frame.
The noframes element provides an option for browsers that do not display frames.
37
Index.html
Right frame (main)
Left frame (leftframe)
38
Program Output
When Header Examples is selected, the document it links to is displayed in
the right frame.
39
Target Attribute
Target: defines which frame that the document will be located.
Attribute
Description
“_blank” Loads the page into a new browser window
“_top” Loads the page into a frame in which the anchor element appear.
“-self” Loads the page into the full browser window.
40
Target AttributeEx: Navigation frame:
Navigation frame caption a list of links with the second frame as the target.
The first file called content.html contains three links
Source code:
<a href="a.html" target="main"> frame a </a> <br><a href="b.html" target="main"> frame b </a> <br><a href="c.html" target="main"> frame c </a>
The second file Source code:
<frameset cols="120, *"><frame src="content.html"><frame src="a.html" name="main"></frameset> </html>
The target attribute specifies where the document linked by the anchor should
display.
The document will open in the frame called main.
