Download presentation
Presentation is loading. Please wait.
1
Chapter 2 - Introduction to HTML: Part 2
Outline Basic HTML Tables Intermediate HTML Tables and Formatting Basic HTML Forms More Complex HTML Forms Internal Linking <meta> Tags frameset Element Nested framesets
2
Tables Tag Description <table> 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> <td> Defines the table data cell
3
Tables attribute Attribute Description 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,)
4
The border attribute gives the size in pixels of the table’s border.
Table1.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.
5
The body of the table is placed between the tbody tags.
Table1.html <tbody> <tr> <td>Apple</td> <td>$0.25</td> </tr> <td>Orange</td> <td>$1.50</td> <td>Banana</td> <td>$1.00</td> <td>Pineapple</td> <td>$2.00</td> </tbody> <tfoot> <th>Total</th> <th>$3.75</th> </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 Caption Table header Start of table body End of table body Table footer
7
The align attribute is used to horizontally align data in a cell.
Table2.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> </tr> <tr valign = "bottom"> <th># of Humps</th> <th>Indigenous region</th> <th>Spits?</th> <th>Produces Wool?</th> </thead> The span attribute indicates width of the data cell in number of columns. The align attribute is used to horizontally align data in a cell. 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> </tr> <th>Llamas</th> <td>1</td> <td>Andes Mountains</td> </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 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
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 Field Attribute Description Size
Text 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: <input type="submit" value="submit your entries"/> <Br> <input type="reset" value="reset your entries"/> The default value is: Submit submit query Reset reset.
15
Text area Attribute Description 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 button Attribute Description Name
Radio 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
Checkbox Attribute Description Name
Check 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 list Tag Description Attribute <select> <option>
Provide drop-down list of line, from which the user can select an item. <option> Add item to the dropdown list Attribute 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
Text box created using input element.
Program Output Text box created using input element. Submit button created using input element. Reset button created using input element.
20
<!-- <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> Address: <input name = " " type = "password" size = "25" /> <p> <strong>Things you liked:</strong><br /> <label>Site design <input name = "thingsliked" type = "checkbox" value = "Design" /></label> <label>Links value = "Links" /></label> <label>Ease of use value = "Ease" /></label> <label>Images value = "Images" /></label> 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. Form2.html 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.
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" /> </form> </body> </html> Form2.html Program Output Text area created with input element. Checkbox options 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> Form3.html
23
Form3.html <p><label>Comments:<br />
<textarea name = "comments" rows = "4" cols = "36"></textarea> </label></p> <p><label> Address: <input name = " " 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 value = "Links" /></label> <label>Ease of use value = "Ease" /></label> <label>Images value = "Images" /></label> <label>Source code value = "Code" /></label> </p> Form3.html
24
The checked attribute will mark this radio option by default.
<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 value = "link" /></label> <label>Deitel.com Web site value = "deitel.com" /></label> <label>Reference in a book value = "book" /></label> <label>Other value = "other" /></label> </p> Form3.html The checked attribute will mark this radio option by default. An input element with type value equal to radio creates radio buttons.
25
The select element creates a drop down list.
<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> <input type = "submit" value = "Submit Your Entries" /> <input type = "reset" value = "Clear Your Entries" /> </form> </body> </html> Form3.html The select element creates a drop down list. The selected attribute selects a default value for the drop down list. The option tag is used for each option in the drop down list.
26
Radio box list created with input element.
Program Output Radio box list created with input element. Drop down box list created with input element.The Amazing option is selected as a default value.
27
Program Output
28
Internal Linking Attribute Description Id
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. Attribute Description Id Create an internal hyperlink destination <a href="#value"> the internal link address.
29
Internal Linking Example: <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.
30
Meta Element Attribute Description <meta>
Search engines are read content in each web site these content are called Meta data. Meta data specify information about element Attribute Description <meta> Defines meta information 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.
31
The name attribute describes the type of meta element.
Example: <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
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 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. Example 1: <frameset rows="50%, 50 %"> two horizontal frames First frame extends 50% from the document. Second frame extends 50% from the document. Example 2: <frameset cols="110, *"> Two vertical frames First frame extends 110 pixels from the left. Second frame fills the reminder of the browser width (*).
34
Frame Tag Attribute Description src Defines the source of the document
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 Tag Example 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> 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> </html>
36
Index.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. Nav.html is loaded into the left frame and main.html is loaded into the right frame. The frame element loads documents into the frameset. The src attribute indicates the document to be loaded. The noframes element provides an option for browsers that do not display frames.
37
Left frame (leftframe)
Index.html Left frame (leftframe) Right frame (main)
38
Program Output When Header Examples is selected, the document it links to is displayed in the right frame.
39
Target: defines which frame that the document will be located.
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
The document will open in the frame called main.
Target Attribute Ex: 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 <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.
41
<a href="a.html" target="main"> frame a </a> <br>
Target Attribute You must have 5 web pages in the same folder (a, b , c, content , home) Great content web page contains three links as the following: <html> <body> <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> </body> </html>
42
<frameset cols="120, *"> <frame src="content.html">
3. Great home web page just for dividing the web page , as the following: <html> <frameset cols="120, *"> <frame src="content.html"> <frame src="a.html" name="main"> </frameset><body></body> </html>
Similar presentations
