Lập trình web tĩnh Html dành cho người mới bắt đầu học lập trình web Mình khuyên các bạn nên học đầy đủ từ bài số 1 trở điVà kết hợp với video khi sử dụng slide nhưng do video mình chưa có thời gia up lên khi nào có mình sẽ cho link lên mục này
Trang 1Session 2
Module 3: Using Lists and Tables
Module 4: Working with Frames and Forms
Trang 2Session 2 – Objectives (1)
Using Lists and Tables & Working with Frames and Forms – Slide 2 / 51
Trang 3Session 2 – Objectives (2)
Using Lists and Tables & Working with Frames and Forms – Slide 3 / 51
Trang 4HTML Lists
unordered lists:
Trang 5<li>The first list item </li>
<li>The second list item </li>
<li>The third list item </li>
</ol>
Using Lists and Tables & Working with Frames and Forms – Slide 5 / 51
Trang 6Unordered List
list item starts with the <li> tag
<ul type="square">
<li> List item </li>
<li> List item </li>
<li> List item </li>
</ul>
Using Lists and Tables & Working with Frames and Forms – Slide 6 / 51
Trang 7Definition Lists
description of each item
Trang 8<li> List item </li>
<li> List item </li>
<li> List item </li>
</ul>
</li>
<li> The second list item </li>
<li> The third list item </li>
</ol>
Using Lists and Tables & Working with Frames and Forms – Slide 8 / 51
Trang 9Using Lists and Tables & Working with Frames and Forms – Slide 9 / 51
Trang 10HTML Tables (1)
and each row is divided into data cells (with the
<td> tag)
content of a data cell
forms, other tables, etc
Using Lists and Tables & Working with Frames and Forms – Slide 10 / 51
Trang 11HTML Tables (1)
and each row is divided into data cells (with the
<td> tag)
content of a data cell
forms, other tables, etc
Using Lists and Tables & Working with Frames and Forms – Slide 11 / 51
Trang 12HTML Table (2)
Using Lists and Tables & Working with Frames and Forms – Slide 12 / 51
Trang 13Layout of a Table
Header 1 Header 2 Header 3
Trang 14cellpadding
Using Lists and Tables & Working with Frames and Forms – Slide 14 / 51
Trang 15Elements Associated with Table
Using Lists and Tables & Working with Frames and Forms – Slide 15 / 51
Trang 16Table Cell Element
<table border="1" cellpadding="3">
Trang 17Using Lists and Tables & Working with Frames and Forms – Slide 17 / 51
Trang 18Table Cell Element Attributes
Using Lists and Tables & Working with Frames and Forms – Slide 18 / 51
Trang 19Table Header, Footer And Body
<table border="1" cellpadding="3" bordercolor="red">
Trang 20Merging Cells
create cells that span more than one column or row
<th> can use only the colspan attribute.
<td> use both of the colspan and rowspan
Trang 21Web Page Layout Using Table
Trang 22Embedding Flash
multimedia platform used to add animation, video, and interactivity to web pages
games
called "ShockWave Flash" movies, "Flash movies," or "Flash games", usually have a swf file extension
Using Lists and Tables & Working with Frames and Forms – Slide 22 / 51
Trang 23Embedding Flash Video (1)
deliver video over the Internet using Adobe Flash Player versions 6–10
within SWF files
as Flash Video: FLV and F4V
Using Lists and Tables & Working with Frames and Forms – Slide 23 / 51
Trang 24Embedding Flash Video (2)
<object type="application/x-shockwave-flash "
data="FLVPlayer.swf" width="320" height="263" id="FLVPlayer">
<param name="allowScriptAccess" value="sameDomain"/>
<param name="movie" value="FLVPlayer.swf"/>
<param name="quality" value="high"/>
<param name="scale" value="noScale"/>
<param name="wmode" value="transparent"/>
<param name="flashvars " value="videoFile=mymovie.flv"/>
</object>
Using Lists and Tables & Working with Frames and Forms – Slide 24 / 51
Trang 25HTML document in the same browser window
each frame is independent of the others
Web page, one with a banner, one for the navigation menu and one to display data
Using Lists and Tables & Working with Frames and Forms – Slide 25 / 51
Trang 27Frameset Element
Frames are created using the <frameset> tag
<frameset> element contains multiple <frame>
You cannot use the <body></body> tags together with the <frameset></frameset> tags
Add the <noframes> tag for browsers that do not support frames
Trang 30Using Lists and Tables & Working with Frames and Forms – Slide 30 / 51
Trang 31Inline Frames
within a web page
<h2>View content of another Web page</h2>
<iframe src ="http://aptech.ac.vn" width="100%" height="300"> <p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
Trang 32Inline Frame Demo
Using Lists and Tables & Working with Frames and Forms – Slide 32 / 51
Trang 33Introduction to HTML Forms (1)
user input and then pass data to a server
checkboxes, radio-buttons, submit buttons, select lists, textarea and more
<form action="URL" method="post">
input elements.
</form>
Using Lists and Tables & Working with Frames and Forms – Slide 33 / 51
Trang 34Introduction to HTML Forms (2)
Using Lists and Tables & Working with Frames and Forms – Slide 34 / 51
Trang 35Introduction to HTML Forms (3)
information to register users for a service or event in Web page
item For example, if we want to purchase a book over the Internet, we would be required to fill in our name, mailing address, mode of payment, and so on
Using Lists and Tables & Working with Frames and Forms – Slide 35 / 51
Trang 36HTML Form Attributes
Using Lists and Tables & Working with Frames and Forms – Slide 36 / 51
Trang 37HTML Form Tags
Using Lists and Tables & Working with Frames and Forms – Slide 37 / 51
Trang 38HTML Input Element
information
depending on the type attribute
checkbox, password, radio button, submit button, and more
Using Lists and Tables & Working with Frames and Forms – Slide 38 / 51
Trang 39Input Element Attributes (1)
Using Lists and Tables & Working with Frames and Forms – Slide 39 / 51
Trang 40Input Element Attributes (2)
Using Lists and Tables & Working with Frames and Forms – Slide 40 / 51
Trang 41Input Element Demo
<form method="post" action="register.asp">
Email: <input type="text" name="txtEmail" /> <br />
Password: <input type="text" name="txtPassword" /> <br />
Gender: <input type="radio" name="rdGender" value="male" />Male
<input type="radio" name="rdGender" value="female" />Female<br/> <input name="chkAgreement" type="checkbox”>
I agree with the terms of service <br />
<input type="submit" value="Register">
<input type="reset" value="Reset">
Trang 42Using Lists and Tables & Working with Frames and Forms – Slide 42 / 51
Trang 43Select and Option Element (1)
list).
Using Lists and Tables & Working with Frames and Forms – Slide 43 / 51
Trang 44Select and Option Element (2)
define the available options in the list
Using Lists and Tables & Working with Frames and Forms – Slide 44 / 51
Trang 45Select Element Demo
Trang 46Fieldset Element
together elements in a form
related form elements
fieldset element
Using Lists and Tables & Working with Frames and Forms – Slide 46 / 51
Trang 47Fieldset Element Demo
<form>
<fieldset>
<legend>Information</legend>
Name: <input type="text" size="30" /><br />
Email: <input type="text" size="30" /><br />
Date of birth: <input type="text" size="10" />
Trang 48Other Form Elements
Using Lists and Tables & Working with Frames and Forms – Slide 48 / 51
Trang 49Guideline for Creating Forms
Trang 50Session 2 – Summary (1)
and each row is divided into data cells (with the
<td> tag)
Using Lists and Tables & Working with Frames and Forms – Slide 50 / 51
Trang 51Session 2 – Summary (2)
separate regions, each of which can display a separate scrollable page
contains another document
user input and then pass data to a server
fieldset, legend elements and more
Using Lists and Tables & Working with Frames and Forms – Slide 51 / 51