Section1 HTML (part2) Web technology for b
salmamontaser1
12 views
36 slides
Mar 03, 2025
Slide 1 of 36
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
About This Presentation
vcv
Slide Content
Web Technology Lab 2: HTML
HTML 5 (Part 2)
Course Outline Hypertext Markup Language (HTML) Cascading Style Sheets (CSS) Java Script (JS) Programming in PHP MYSQL Laravel framework
HTML TAGS Continues
5 <table> tag defines an HTML table. HTML tables allow web developers to arrange data into rows and columns. 9. HTML Tables
6 <HTML> <HEAD> <TITLE> Tables </TITLE> </HEAD> <BODY> <TABLE BORDER = "1" > <CAPTION> Table Caption </CAPTION> <TR><TH> Heading1 </TH> <TH> Heading2 </TH></TR> <TR><TD> Row1 Col1 Data </TD><TD> Row1 Col2 Data </TD></TR> <TR><TD> Row2 Col1 Data </TD><TD> Row2 Col2 Data </TD></TR> <TR><TD> Row3 Col1 Data </TD><TD> Row3 Col2 Data </TD></TR> </TABLE> </BODY> </HTML> 9. HTML Tables
7 Table Attributes Align : position Like left, center, right for table Border : number Like width in pixels of border (including any cell spacing, default 0) Cellspacing : number Like spacing in pixels between cells, default about 3 Cellpadding : number Like space in pixels between cell border and table element, default about 1 Width : number[%] Like width in pixels or percentage of page/frame width align : left, center, right Valign : top, middle, bottom Bgcolor : background color 9. HTML Tables
8 <HTML> <HEAD> <TITLE> Tables </TITLE> </HEAD> <BODY> <TABLE ALIGN = "center" WIDTH = "300" HEIGHT = "200" > <TR ALIGN = "left" VALIGN = "top" BGCOLOR = "red" > <TD> One </TD> <TD> Two </TD> <TR ALIGN = "center" VALIGN = "middle" BGCOLOR = " lightblue " > <TD> Three </TD> <TD> Four </TD> <TR ALIGN = "right" VALIGN = "bottom" BGCOLOR = "yellow" > <TD> Five </TD> <TD> Six </TD> </TABLE> </BODY> </HTML> 9. HTML Tables
9 Table cells Attributes colspan : how many columns this cell occupies rowspan : how many rows this cell occupies Cellspacing : number Like spacing in pixels between cells, default about 3 Cellpadding : number Like space in pixels between cell border and table element, default about 1 Width : number[%] Like width in pixels or percentage of page/frame width align : left, center, right Valign : top, middle, bottom Bgcolor : background color 9. HTML Tables
10 <HTML> <HEAD> <TITLE> HyperLinks </TITLE> </HEAD> <BODY> <h2> Cell that spans two columns: </h2> <table BORDER = "1" style = "width:100%;" > < tr > < th > Name </ th > < th colspan = "2" > Telephone </ th > </ tr > < tr > <td> Bill Gates </td> <td> 555 77 854 </td> <td> 555 77 855 </td> </ tr > </table> </BODY> </HTML> 9. HTML Tables
11 HTML lists allow web developers to group a set of related items in lists. Unordered List : An unordered list starts with the < ul > tag. Each list item starts with the <li> tag. Ordered List : An ordered list starts with the < ol > tag. Each list item starts with the <li> tag. Description Lists : The <dl> tag defines the description list, the < dt > tag defines the term (name), and the < dd > tag describes each term 10. HTML Lists
12 Unordered List list-style-type : 10. HTML Lists
13 <HTML> <HEAD> <TITLE> Unordered List </TITLE> </HEAD> <BODY> <h2> Unordered List </h2> <UL TYPE = "disc" > <LI> One </LI> <LI> Two </LI> <UL TYPE = "circle" > <LI> Three </LI> <LI> Four </LI> <UL TYPE = "square" > <LI> Five </LI> <LI> Six </LI> </UL> </UL> </UL> </BODY> </HTML> 10. HTML Lists
14 Ordered List list-style-type : 10. HTML Lists
15 <html> <head> <title> ordered list </title> </head> <body> <h2> ordered list </h2> < ol type = "1" > <li> item one </li> <li> item two </li> < ol type = " i " > <li> sublist item one </li> <li> sublist item two </li> < ol type = " i " > <li> sub- sublist item one </li> <li> sub- sublist item two </li> </ ol > </ ol > </ ol > </body> </html> 10. HTML Lists
16 <form> is just another kind of HTML tag HTML forms are used to create GUIs on Web pages Usually the purpose is to ask the user for information The information is then sent back to the server A form is an area that can contain form elements The syntax is: <form> ...form elements... </form> Form elements include: buttons, checkboxes, text fields, radio buttons, drop-down menus, etc. A form usually contains a Submit button to send the information in the form elements to the server. 11. HTML Forms
17 The <form attributes> ... </form> tag encloses form elements The arguments to form tell what to do with the user input < form action ="/ action_page.php " method ="post” target ="_blank" > action=" url " : Specifies where to send the data when the Submit button is clicked method="get” : Requests data from a specified resource method="post“ : Submits data to be processed to a specified resource target="target“ : where to display the response that is received after submitting the form target= _blank : means open in a new window target= _self : means use the same window 11. HTML Forms Forms Attributes
18 The HTML <form> element can contain one or more of the following form elements: 11. HTML Forms Forms Elements <input> <label> <select> < textarea > < fieldset > <legend> < datalist >
19 Input Types: <input type="text"> <input type="email"> the e-mail address can be automatically validated when submitted <form> <label for = "name" > Name: </label>< br > <input type = "email" id = "email" name = "email" >< br > <label for = "email" > Email: </label>< br > <input type = "email" id = "email" name = "email" > </form> 11. HTML Forms <input>
20 Input Types: <input type="password"> <form action = "/ action_page.php " > <label for = "username" > Username: </label>< br > <input type = "text" id = "username" name = "username" >< br > <label for = " pwd " > Password: </label>< br > <input type = "password" id = " pwd " name = " pwd " >< br >< br > <input type = "submit" value = "Submit" > </form> 11. HTML Forms <input>
21 Input Types: <input type="submit"> send data <input type="button"> take some action as specified by JavaScript <input type="reset"> restore all form elements to their initial state 11. HTML Forms <input>
22 Input Types: <form action = "/ action_page.php " > <label for = " fname " > First name: </label>< br > <input type = "text" id = " fname " name = " fname " value = “Martina" >< br > <label for = " lname " > Last name: </label>< br > <input type = "text" id = " lname " name = " lname " value = “ Girgis " >< br >< br > <input type = "submit" value = "Submit" > </form> 11. HTML Forms <input>
23 Input Types: <input type="radio"> If two or more radio buttons have the same name , the user can select only one <form> <input type = "radio" id = "html" name = " fav_language " value = "HTML" > <label for = "html" > HTML </label>< br > <input type = "radio" id = " css " name = " fav_language " value = "CSS" > <label for = " css " > CSS </label>< br > <input type = "radio" id = " javascript " name = " fav_language " value = "JavaScript" > <label for = " javascript " > JavaScript </label> </form> 11. HTML Forms <input>
24 Input Types: <input type="checkbox"> If two or more radio buttons have the same name, the user can select ZERO or MORE options <form action = "/ action_page.php " > <input type = "checkbox" id = "vehicle1" name = "vehicle" value = "Bike" > <label for = "vehicle1" > I have a bike </label>< br > <input type = "checkbox" id = "vehicle2" name = "vehicle" value = "Car" > <label for = "vehicle2" > I have a car </label>< br > <input type = "checkbox" id = "vehicle3" name = "vehicle" value = "Boat" > <label for = "vehicle3" > I have a boat </label>< br >< br > <input type = "submit" value = "Submit" > </form> 11. HTML Forms <input>
25 Input Types: <input type="color"> Depending on browser support, a color picker can show up in the input field. <form action = "/ action_page.php " > <label for = " favcolor " > Select your favorite color: </label> <input type = "color" id = " favcolor " name = " favcolor " value = "#ff0000" > <input type = "submit" value = "Submit" > </form> 11. HTML Forms <input>
26 Input Types: <input type="date"> <input type=" datetime -local"> <input type="month"> <input type="week"> <input type="time"> 11. HTML Forms <input>
27 Input Types: <input type="file"> <form action = "/ action_page.php " > <label for = " myfile " > Select a file: </label> <input type = "file" id = " myfile " name = " myfile " >< br >< br > <input type = "submit" value = "Submit" > </form> 11. HTML Forms <input>
28 Input Types: <input type="number"> <form action = "/ action_page.php " > <label for = "quantity" > Quantity (between 1 and 5): </label> <input type = "number" id = "quantity" name = "quantity" min = "1" max = "5" > <input type = "submit" value = "Submit" > </form> 11. HTML Forms <input>
29 The HTML <form> element can contain one or more of the following form elements: 11. HTML Forms Forms Elements <input> <label> <select> < textarea > < fieldset > <legend> < datalist >
30 The <select> element defines a drop-down list The <option> elements defines an option that can be selected. <form action = "/ action_page.php " > <label for = "cars" > Choose a car: </label> <select id = "cars" name = "cars" > <option value = " volvo " > Volvo </option> <option value = " saab " > Saab </option> <option value = "fiat" > Fiat </option> <option value = " audi " > Audi </option> </select> <input type = "submit" value = "Submit" > </form> 11. HTML Forms <select>
31 Grouping Form Data <body> <form > < fieldset > <legend> Personal information: </legend> First name: < br > <input type ="text" name =" firstname " >< br > Last name: < br > <input type ="text" name =" lastname " > < br >< br > <input type ="submit" value ="Send" > </ fieldset > </form> </body>
32 Datalist input (auto-complete) <form> <input list ="browsers" name ="browser" > < datalist > <option value ="Internet Explorer" > <option value ="Firefox" > <option value ="Chrome" > <option value ="Opera" > <option value ="Safari" > </ datalist > <input type ="submit" > </form>
33 HTML Form Elements Forms Most, but not all, form elements use the input tag, with a type ="..." argument to tell which kind of element it is type can be text, checkbox, radio button, password, hidden, submit, reset, button, date, file, or image. Other common input tag arguments include: name : the name of the element value : the “value” of the element; used in different ways for different values of type readonly : the value cannot be changed disabled : the user can’t do anything with this element Size : the size (in characters) for the input field
34 Practice <body> <p> <b> Who are you? </b> </p> <form method="post"> <p> Name: <input type ="text" name =" textfield " > </p> <p> Gender: <input type ="radio" name ="gender" value ="m" > Male <input type ="radio" name ="gender" value ="f" > Female </p> </form> </body>
35 Forms : Review Radio Buttons Drop-down List Submit Button Password Field Text Field Checkbox
Tags
Categories
GeneralDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 12
- Slides 36
- Age 273 days
Related Slideshows
22
Pray For The Peace Of Jerusalem and You Will Prosper
RodolfoMoralesMarcuc
30 views
26
Don_t_Waste_Your_Life_God.....powerpoint
chalobrido8
32 views
31
VILLASUR_FACTORS_TO_CONSIDER_IN_PLATING_SALAD_10-13.pdf
JaiJai148317
30 views
14
Fertility awareness methods for women in the society
Isaiah47
29 views
35
Chapter 5 Arithmetic Functions Computer Organisation and Architecture
RitikSharma297999
26 views
5
syakira bhasa inggris (1) (1).pptx.......
ourcommunity56
28 views