HTML&CSS cơ bản- Lý thiết và bài tập thực hành

Tổng hợp các bài viết về lập trình HTML và CSS cơ bản nhất, rất chi tiết có kèm các bài tập để bạn tự thực hành trong quá trình tự học. Bạn có thể tự học và tự thiết kế trang Web cho riêng mình mà chưa biết nhiều về HTML và CSS.

Trang 1

TRƯỜNG ĐẠI HỌC HỌC CÙNG NHAU

HƯỚNG DẪN HỌC THIẾT KẾ WEB

Trang 2

Mục lục

Giới thiệu về HTML 4

Cấu trúc cơ bản của HTML 5

Nhóm các thẻ block 7

Thẻ định dạng tiêu đề 8

Đây là tiêu đề quan trọng nhất (lớn nhất) 8

Logo 9

Thẻ định dạng đoạn văn bản 9

Thẻ phân chia khu vực 11

Thẻ xác định danh sách 12

Các thẻ danh sách có thứ tự và không có thứ tự 15

Danh sách không có thứ tự 16

Cấu trúc thẻ danh sách có thứ tự và không có thứ tự 17

Một số cấu trúc của danh sách có thứ tự và không có thứ tự 17

Cấu trúc <ul></ul> lồng bên trong <ol></ol> 18

Những thẻ thuộc nhóm inline 19

Thẻ liên kết <a></a> 20

Thẻ ngắt đoạn văn bản <br /> 21

Thẻ nhóm các inline <span></span> 21

Thẻ hiển thị hình ảnh mạnh <strong></strong> 21

Thẻ dùng để nhấn mạnh nội dung văn bản <em></em> 21

Ví dụ về liên kết <a> 21

Ví dụ về <img /> 23

Đoạn văn bản <p> 24

Ví dụ về các tag <dl> - <dd> - <dt> 25

Ví dụ về các tag <ol> - <li> 25

Ví dụ về các tag <ul> - <li> 27

Ví dụ về thẻ <input /> 28

Ví dụ về thẻ <button> 30

Ví dụ về thẻ select - option 30

Ví dụ về thẻ <optgroup> 31

Ví dụ về thẻ <textarea> 32

Ví dụ về <fieldset> - <legend> 32

Ví dụ về thẻ <label> 33

Kết hợp các thẻ định dạng và nhóm thẻ inline 39

Bài tập 39

Phần đầu: header 43

Phần liên kết toàn cục global : navigation 45

Phần nội dung chính : content 46

Phần nội dung phụ : sidebar 50

Phần cuối trang web : footer 53

Giới thiệu về CSS 57

Sử dụng CSS 57

Cách viết một nội dung CSS 58

Cách viết một comment trong file CSS 59

Các thuộc tính định dạng cho text 59

Thuộc tính color 60

Thuộc tính font-size 61

Thuộc tính font-family 61

Trang 3

Thuộc tính letter-spacing 62

Thuộc tính text-decoration 63

Thuộc tính word-spacing 63

Các thuộc tính định dạng chung 63

Thuộc tính background 64

Thuộc tính border 65

Thuộc tính height 67

Thuộc tính text-align 67

Các thuộc tính điều khiển nội dung 68

padding 68

margin 77

float 84

Ví dụ về thuộc tính float 89

clear 92

clearfix 97

display : Xác định sự hiển thị cho thành phần 103

position 106

position: absolute 111

position: fixed 116

position: static 117

Ví dụ về thuộc tính position 117

Ví dụ về thuộc tính border 120

Ví dụ về thuộc tính display 123

Ví dụ về thuộc tính text-align 128

Ví dụ về thuộc tính vertical-align 129

Ví dụ về thuộc tính list-style 133

Ví dụ về thuộc tính margin 136

Ví dụ về thuộc tính overflow 140

Ví dụ về thuộc tính z-index 142

Ví dụ về thuộc tính content 145

Kết hợp các thuộc tính CSS 147

Phần web : header 151

Phần liên kết toàn cục global navigation 156

Phần nội dung : content 158

Phần : sidebar 170

Phần : footer 172

Tổng kết bài tập CSS 177

Màu trong HTML & CSS 185

jQuery 189

CSS3 204

Tag mới trong HTML5 207

Những tag tương tự HTML4 / XHTML 208

Những tag không được hỗ trợ trong HTML5 210

Trang 4

Giới thiệu về HTML

 HTML là ngôn ngữ dùng để mô tả một trang web

 HTML viết tắt của từ Hyper Text Markup Language

 HTML không phải là ngôn ngữ lập trình, html là ngôn ngữ đánh dấu (markup language), ngôn ngữ đánh dấu là một nhóm các thẻ đánh dấu (các tag), HTML sử dụng các thẻ này để mô tả trang web

Sự sắp xếp chiều dọc của thẻ block trong HTML

Khi sử dụng các thẻ block, trình duyệt sẽ sắp xếp các thẻ theo chiều dọc, mỗi thẻ sẽ chiếm vùng không gian nằm ngang từ trên xuống theo thứ tự sắp xếp trong trang HTML/XHTML, thẻ nào code trước sẽ nằm trên, các thẻ code sau sẽ nằm bên dưới

Xem ví dụ sau đây để thấy được trình duyệt sắp xếp các thẻ theo chiều ngang như thế nào:

HTML viết

<ul>

</ul>

<div>Nội dung chính</div>

Trang 5

Ta thấy các thẻ block đều chiếm vùng không gian nằm ngang, chúng ta có thể sắp xếp lại vị trí của các thẻ block bằng cách sử dụng các thuộc tính css

Sự sắp xếp chiều ngang của thẻ inline trong HTML

Khi sử dụng các thẻ inline, trình duyệt sẽ sắp xếp các thẻ liền kề nhau theo chiều ngang, thẻ nào code trước xuất hiện trước, thẻ nào code sau xuất hiện sau

Xem ví dụ sau đây để thấy được trình duyệt sắp xếp các thẻ inline như thế nào:

ngang, nếu muốn hiểu rõ hơn các bạn có thể tham khảo thêm các vùng không gian HTML

Nhiệm vụ của trình duyệt (Firefox, Internet Explorer, Safari, Opera, Chrome, ) là đọc văn bản HTML và hiển thị chúng như chúng ta thấy, tuy nhiên các trình duyệt không hiển thị các thẻ HTML (các tag), nhưng lại sử dụng các thẻ để giải thích nội dung cho trang web

Cấu trúc cơ bản của HTML Cấu trúc cơ bản của trang HTML/XHTML có dạng như sau, thường gồm 3 phần:

 <!Doctype>: Phần khai báo chuẩn của html hay xhtml

 <head></head>: Phần khai báo ban đầu, khai báo về meta, title, css, javascript…

 <body></body>: Phần chứa nội dung của trang web, nơi hiển thị nội dung

Trang 6

</html>

Cấu trúc cơ bản của trang web

Mỗi trang web đều có cách thể hiện cấu trúc khác nhau, có trang 1 cột, có trang 2 và cũng có trang chứa nhiều cột, bên dưới đây chúng ta tham khảo một trang đơn giản sử dụng 2 cột để layout

 Phần đầu: header, có thể chứa logo, câu slogan, các liên kết, các banner liên kết, các button, đoạn flash, hoặc các form ngắn như form tìm kiếm,

 Phần liên kết toàn cục: global navigation, dùng để chứa các liên kết đến những trang quan trọng trong toàn bộ trang, trong phần này có thể chứa thêm các liên kết con (sub navigation)

 Phần thân của trang: page body, phần này chứa phần nội dung chính (content) và phần nội dung phụ (sidebar)

 Phần nội dung chính: content, phần này chứa nội dung chính cần thể hiện cho người dùng xem

 Phần nội dung phụ: sidebar, phần này có thể chứa liên kết phụ của từng trang (local

navigation), hoặc các banner chứa liên kết liên quan, hoặc có thể dùng để chứa các liên kết quảng cáo,

 Phần cuối trang web: footer, phần này thường chứa phần liên hệ như: tên công ty, địa chỉ, số điện thoại, mail liên hệ, và đặc biệt là copyright, hoặc có thể chứa các liên kết toàn trang, các banner liên kết,

Trang 7

Nhóm các thẻ block Nhóm các thẻ block: là các thẻ dùng để sắp xếp bố cục cho trang web

 Thẻ phân chia khu vực <div>

 Ta có thể hiểu đây là sự phân chia khu vực hay vùng, sự phân chia này sẽ giúp cho trình duyệt hiểu rõ những vùng được bố cục trên trang web

 Thẻ xác định danh sách <dl>, <dt>, <dd>

 Sử dụng cho danh sách có các mục và có nội dung mô tả cho các mục

 Thẻ danh sách có thứ tự <ol>, <li>

 Được sử dụng cho danh sách có thứ tự

 Thẻ danh sách không có thứ tự <ul>, <li>

Trang 8

 Được sử dụng cho danh sách không có thứ tự

Thẻ định dạng tiêu đề Định nghĩa và cách dùng

 Thẻ <hx>: chữ "h" viết tắc của từ "headings" nghĩa là đề mục, hoặc tiêu đề

 Thẻ <hx> : Sử dụng để định nghĩa tiêu đề cho nội dung HTML, giúp cho trình duyệt nhận biết được tiêu đề của một nội dung

 Thẻ <hx> có giá trị từ <h1> tới <h6>, trong đó mức độ quan trọng giảm từ <h1> tới <h6> (hay

ta có thể hiểu: tiêu đề lớn nhất là <h1>, và tiêu đề nhỏ nhất là <h6>)

 Nội dung bên trong <hx></hx> chỉ nên chứa các thẻ thuộc nhóm inline

 Thẻ <hx></hx> chỉ nên thể hiện tiêu đề, không dùng cho mục đích khác

<h1>Đây là tiêu đề quan trọng nhất (lớn nhất)</h1>

<h2>Đây là tiêu đề quan trọng thứ nhì (lớn thứ nhì)</h2>

<h3>Đây là tiêu đề quan trọng thứ ba (lớn thứ ba)</h3>

<h4>Đây là tiêu đề quan trọng thứ tư (lớn thứ tư)</h4>

<h5>Đây là tiêu đề quan trọng thứ năm (lớn thứ năm)</h5>

<h6>Đây là tiêu đề ít quan trọng nhất (nhỏ nhất)</h6>

</body>

</html>

Hiển thị trình duyệt:

Đây là tiêu đề quan trọng nhất (lớn nhất)

Đây là tiêu đề quan trọng thứ nhì (lớn thứ nhì)

Đây là tiêu đề quan trọng thứ ba (lớn thứ ba)

Đây là tiêu đề quan trọng thứ tư (lớn thứ tư)

Đây là tiêu đề quan trọng thứ năm (lớn thứ năm)

Đây là tiêu đề ít quan trọng nhất (nhỏ nhất)

Thẻ <h1> là thẻ quan trọng nhất trong trang HTML, trong một trang html thường người ta sử dụng

<h1> một lần duy nhất cho logo, hoặc dòng mô tả trang web (mục đích SEO), mục đích của <h1> là khai báo cho trình duyệt biết đâu là phần quan trọng nhất của trang web

Trang 9

Nội dung của tiêu đề nhỏ

Những cấu trúc không nên sử dụng

Không được chứa bên trong <hx></hx> các thẻ thuộc nhóm các thẻ block, code như thế này là sai, không đúng chuẩn W3C:

<h1><p>Đây là đoạn văn</p></h1>

<h2><div>Đây là đoạn văn</div></h2>

 Thẻ <p></p> viết tắt của từ "paragraphs" có nghĩa là đoạn văn

 Thẻ <p></p> giúp trình duyệt xác định được đoạn văn bản trong trang HTML, thẻ này chỉ có thể chứa các thẻ thuộc nhóm inline, gồm: text, image, link, button,

Trang 10

<p>Trong đoạn văn này có chứa <a href="tut_html_layout.php">liên kết</a></p>

</body>

</html>

Đây là đoạn văn

Trong đoạn văn này có chứa liên kết

Để ngắt đoạn cho đoạn văn ta có thể dùng 2 cách:

 Ngắt đoạn cùng dòng: sử dụng thẻ <br /> (<br /> là thẻ thuộc nhóm inline)

<p>Đây là đoạn văn dài rất dài rất dài rất dài<br />

rất dài rất dài rất dài rất dài.</p>

</body>

</html>

Đây là đoạn văn dài rất dài rất dài rất dài

rất dài rất dài rất dài rất dài

 Ngắt đoạn khác dòng: sử dụng 2 thẻ <p></p> để ngắt đoạn khác dòng, tránh trường hợp sử dụng 2 lần thẻ <br /> vì về mặt ý nghĩa của thẻ sẽ không còn chính xác, điều này sẽ gây khó khăn cho trình duyệt phân biệt đâu là cùng đoạn, đâu là khác đoạn

</body>

</html>

Đây là đoạn văn thứ nhất

Đây là đoạn văn thứ hai

Không được chứa bên trong <p></p> các thẻ thuộc nhóm các thẻ block, code như thế này là sai, không đúng chuẩn W3C:

Trang 11

<p><p>Đây là đoạn văn</p></p>

<p><div>Đây là đoạn văn</div></p>

 Có thể chứa hầu hết các thẻ trong HTML/XHTML

 Một số thẻ không được chứa bên trong <div></div>: <html></html>, <meta></meta>,

 Một số thẻ không nên chứa bên trong <div></div>: <style></style>, <script></script>

 Một số khu vực khuyên sử dụng thẻ <div></div>:

o Header, global navigation, page body, content, sidebar, footer (Xem lại cấu trúc cơ bản của trang web)

o Một số khu vực lớn, cấu trúc có nhiều thẻ bên trong thì cũng nên nhóm lại bằng thẻ

<div></div> để tiện cho việc điều khiển

Xem ví dụ để hiểu rõ hơn về thẻ <div></div>, đoạn code bên dưới có sử dụng thuộc tính id, chúng ta

có thể xem ở phần tham khảo thuộc tính id

Trang 12

<div id="header">Viết nội dung phần header ở đây</div>

<div id="gNav">Viết nội dung phần global navigation ở đây</div>

<div id="content">Viết nội dung phần content ở đây</div>

<div id="sidebar">Viết nội dung phần sidebar ở đây</div>

Viết nội dung phần header ở đây

Viết nội dung phần global navigation ở đây

Viết nội dung phần content ở đây

Viết nội dung phần sidebar ở đây

Viết nội dung phần footer ở đây

Không nên sử dụng thẻ <div></div> trực tiếp cho những chi tiết nhỏ như: một đoạn text, một image, một liên kết, một button, nói tóm lại không nên sử dụng thẻ <div></div> trực tiếp cho nhóm inline Tuy trình duyệt sẽ hiển thị đúng ý đồ của tác giả, nhưng code như vậy sẽ không đúng với ý nghĩa của thẻ <div></div>, khiến trình duyệt khó xác định được đâu là nội dung lớn đâu là nội dung nhỏ HTML viết

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

<div>Đây là đoạn văn</div>

<div><img src="images/img_planet.gif" alt="Space" /></div>

<div>Trong đoạn văn này có chứa <a href="tut_html_layout.php">liên kết</a></div>

</body>

</html>

Thẻ xác định danh sách Định nghĩa danh sách trong HTML/XHTML có nhiều dạng khác nhau, mỗi dạng sẽ theo một cấu trúc thẻ khác nhau, do đó việc hiểu rõ danh sách rất quan trọng, nếu bạn chưa nắm rõ cách định nghĩa về danh sách thì bạn không thể hiểu hết được bài học này, xin hãy xem trước định nghĩa về danh sách

trong HTML/XHTML

Định nghĩa

Thẻ xác định danh sách (có đề mục và mô tả đề mục) là một bộ gồm 3 thẻ:

 <dl></dl> viết tắt của chữ "definition list" có nghĩa là sự xác định (hay định nghĩa) danh sách

 <dt></dt> viết tắt của chữ "defines an item" có nghĩa là xác định (hay định nghĩa) một mục

 <dd></dd> viết tắt của chữ "defines describe an item" có nghĩa là xác định (hay định nghĩa) một mô tả của một mục

Thẻ xác định danh sách sử dụng cho danh sách có các mục và có nội dung mô tả cho các mục, không

sử dụng cho danh sách không có phần nội dung mô tả

HTML viết

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">

Trang 13

Cấu trúc thẻ xác định danh sách phải theo các nguyên tắc sau đây:

 Lúc nào cũng phải tồn tại 3 thẻ, không thể thiếu một trong 3: <dl></dl>, <dt></dt>,

 Bên trong thẻ <dt></dt> chỉ chứa được các thẻ thuộc nhóm inline

 Bên trong thẻ <dd></dd> chứa được hầu hết các thẻ HTML/XHTML, tuy nhiên không được

chứa một số thẻ sau đây: <html></html>, <meta></meta>, <body></body>, <title></title>,

 Thẻ <dt></dt> và <dd></dd> phải được viết trực tiếp bên trong <dl></dl>:

Trang 14

Những cấu trúc dưới đây tuy hiển thị tốt cho trình duyệt, nhưng lại không đúng ý nghĩa của bộ 3 thẻ

<dl></dl>, <dt></dt>, <dd></dd>, sẽ khiến cho trình duyệt lúng túng trong việc xác định thẻ

Cấu trúc thiếu vắng <dt></dt>: thiếu mục

Trang 15

trong HTML/XHTML

Danh sách có thứ tự

Để thể hiện danh sách có thứ tự ta sử dụng cặp thẻ: <ol></ol> và <li></li>, trong đó:

 <ol></ol> là viết tắt của chữ "ordered list" có nghĩa là danh sách có thứ tự

 <li></li> viết tắt của chữ "list item" có nghĩa là mục của danh sách

Danh sách sau đây gọi là danh sách có thứ tự:

Trang 16

<li>Cá thu chiên xoài bằm</li>

Để thể hiện danh sách không có thứ tự ta sử dụng cặp thẻ: <ul></ul> và <li></li>, trong đó:

 <ul></ul> là viết tắt của chữ: unordered list có nghĩa là danh sách không có thứ tự

 <li></li> viết tắt của chữ: list item có nghĩa là mục của danh sách

Danh sách sau đây gọi là danh sách không có thứ tự:

Trang 17

Cấu trúc phải theo các nguyên tắc sau đây:

 Lúc nào cũng phải tồn tại 1 cặp thẻ, không thể thiếu một trong 2:

o Đối với danh sách có thứ tự, phải tồn tại cặp thẻ: <ol></ol>, <li></li>

o Đối với danh sách không có thứ tự, phải tồn tại cặp thẻ: <ul></ul>, <li></li>

 Bên trong thẻ <ol></ol> (hoặc <ul></ul>) chỉ chứa trực tiếp một thẻ duy nhất <li></li>

 Bên trong thẻ <li></li> chứa được hầu hết các thẻ HTML/XHTML, tuy nhiên không được

chứa một số thẻ sau đây: <html></html>, <meta></meta>, <body></body>, <title></title>,

Trang 18

<ol>

<li>Cơm chiên hải sản</li>

2 Tráng miệng trái cây

 Tráng miệng trái cây

Trang 19

<ul>

2 Tráng miệng trái cây

Những thẻ thuộc nhóm inline

 Những thẻ thuộc nhóm inline là những thẻ cơ bản của HTML/XHTML, chỉ được dùng để chứa nội dung cho text hoặc các thẻ inline khác

 Bản thân text cũng có thể coi thuộc nhóm inline

 Những thẻ thuộc nhóm inline nên được bao ngoài bởi nhóm các thẻ block, vì các thẻ block sẽ

lo nhiệm vụ dàn trang web, còn các thẻ thuộc nhóm inline chỉ để hiển thị nội dung cho văn bản

Học HTML rất dễ

Đây là một liên kết

 Những thẻ thuộc nhóm inline có thể được lồng vào nhau

 Không được sử dụng các thẻ khác bên trong các thẻ inline, cách sử dụng sau đây là không đúng chuẩn:

<a href="www.hocwebchuan.com"><p>Đây là cấu trúc sai.</p></a> <span><div>Đây là cấu trúc sai</div></span>

Các thẻ sau đây thuộc nhóm inline:

 <a></a>

Trang 20

 Thẻ hiển thị hình ảnh mạnh, mục đích đánh dấu chữ <strong></strong>

 Thẻ dùng để nhấn mạnh nội dung văn bản <em></em>

Thẻ liên kết <a></a>

 Thẻ liên kết <a></a> dùng để tạo một liên kết từ trang web này sang trang web khác, từ vị trí này sang vị trí khác hay dùng để mở ra một object nào đó (có thể là file words, excel, pdf, mp3, movie, ), thẻ này có một thuộc tính bắt buộc:

o href: Chứa đường dẫn cụ thể tới mục tiêu liên kết

 Tham khảo thêm về thẻ liên kết <a></a>

Thẻ hiển thị một image <img />

 Thẻ hiển thị một image <img /> dùng để nhúng một ảnh thông qua thuộc tính src, thẻ này có 2 thuộc tính bắt buộc:

Trang 21

o alt: Được sử dụng như một văn bản thay thế khi image không hiển thị (hoặc không có sẵn)

 Cấu trúc của thẻ <img /> không có sử dụng thẻ đóng (không dùng <img></img>), mà sử dụng

 Thẻ ngắt đoạn văn bản <br /> dùng để xuống dòng văn bản trong cùng một đoạn văn

 Cấu trúc của thẻ <br /> không có sử dụng thẻ đóng (không dùng <br></br>), mà sử dụng ký

tự kết thúc là một khoảng trắng và ký tự "/"

 Tham khảo thêm về thẻ <br />

HTML viết

rất dài rất dài rất dài rất dài.</p>

Đây là đoạn văn dài rất dài rất dài rất dài

rất dài rất dài rất dài rất dài

Đây là text được nhấn mạnh

Thẻ dùng để nhấn mạnh nội dung văn bản <em></em>

 Thẻ dùng để nhấn mạnh nội dung văn bản <em></em> mục đích nhấn mạnh văn bản nhằm gây chú ý cho người xem, văn bản được đánh dấu sẽ hiển thị bằng hình dạng, in nghiên, màu sắc

 Tham khảo thêm về thẻ <em></em>

Trang 22

<a href="/index.php">Liên kết tới trang khác</a>

Liên kết tới trang khác

Liên kết tới trang khác thông qua hình (image)

Liên kết mail

Email: <a href="mailto:support@hocwebchuan.com">support@hocwebchuan.com</a>

Email: support@hocwebchuan.com

Liên kết mail với chủ đề được điền sẵn

Khi sử dụng, người dùng click vào liên kết mail, sẽ lập tức mở ra chương trình gửi mail với chủ đề đã được điền sẵn

Các sử dụng này validator sẽ xuất hiện cảnh báo (warning)

Email: <a href="mailto:support@hocwebchuan.com?subject=Chu%20de%20viet%20o%20day"> support@hocwebchuan.com</a>

Viết thêm %20 vào các khoảng trắng để chắc chắn rằng trình duyệt sẽ hiển thị thuộc tính text

Email: support@hocwebchuan.com

Liên kết mail với chủ đề và nội dung được điền sẵn

Khi sử dụng, người dùng click vào liên kết mail, sẽ lập tức mở ra chương trình gửi mail với chủ đề và nội dung đã được điền sẵn

Các sử dụng này validator sẽ xuất hiện cảnh báo (warning)

Liên kết từ vị trí này tới vị trí khác

<a href="#layout">Liên kết tới id layout</a>

Liên kết tới id layout

Liên kết để mở file word (tương tự cho những định dạng khác)

<a href="doc/ex.doc">Mở file ex.doc trong thư mục "doc"</a>

Mở file ex.doc trong thư mục "doc"

Liên kết mở ra cửa sổ khác - target="_blank"

Liên kết mở ra cửa sổ khác

Ví dụ về link

Liên kết tới file css

Liên kết trên cho biết văn bản HTML và index.css có mối quan hệ rel="stylesheet" theo kiểu

type="text/css" và đường dẫn liên kết tới file css là href="css/index.css"

Liên kết tới file css theo media="screen"

Liên kết trên cho biết, css chỉ điều khiển layout, không dùng cho trang print

Xem ví dụ

Liên kết tới file css theo media="print"

Liên kết trên cho biết, css chỉ điều khiển trang print, không dùng cho layout

Xem ví dụ

Liên kết tới file css theo dạng kết hợp media="screen,print"

Trang 23

Liên kết trên cho biết, css điều khiển cả trang layout và print

Xem ví dụ

Liên kết tới file css theo media="all"

Liên kết trên cho biết, css điều khiển tất cả các dạng cho văn bản (nếu không để media thì văn bản hiểu là all)

<img /> - hình đặt trong folder "images"

<img /> - hình đặt trong folder "images" khác folder với file html

" /" mang ý nghĩa: từ trang html nhảy ra ngoài folder 1 cấp

<img /> - sử dụng <map> - dạng rect

</map/>

Vùng map nằm bên trong hình vuông

Trang 24

<img /> - sử dụng <map> - dạng circle

</map/>

Vùng map nằm bên trong quanh hành tinh

<img /> - sử dụng <map> - dạng poly

<p>Trong đoạn văn này có chứa <a href="tut_html_layout.php">liên kết</a></p>

Đây là đoạn văn dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài

Trong đoạn văn này có chứa liên kết

Ngắt đoạn cùng dòng sử dụng thẻ <br />

<p>Đây là đoạn văn dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài

rất dài<br />

rất dài rất dài rất dài rất dài rất dài rất dài rất dài.</p>

Đây là đoạn văn dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài

rất dài rất dài rất dài rất dài rất dài rất dài rất dài

Ngắt đoạn khác dòng sử dụng 2 thẻ <p>

Trang 25

Đây là đoạn văn dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài rất dài

Ngày quốc tế thiếu nhi

Ví dụ về các tag <ol> - <li>

Trang 26

</ol>

</li>

Trang 27

</ul>

</li>

Trang 28

Input dạng text - sử dụng maxlength

<input type="text" name="" value="" size="30" maxlength="20" />

Xác định chiều dài lớn nhất (trong ký tự) của một trường text hay password

Input dạng text - sử dụng readonly

<input type="text" name="" value="" size="30" readonly="readonly" />

Sử dụng khi giá trị text chỉ dùng để đọc, không được thay đổi

Input dạng password

<input type="password" name="" value="" size="30" />

Text hiển thị bên trong dưới dạng password

<input type="password" name="" value="myPasssword" size="30" />

***********

Trang 29

Input dạng hidden

<input type="hidden" name="" value="" size="30" />

Dạng này sẽ không hiển thì ra trình duyệt

Được sử dụng khi không muốn dữ liệu bị thay đổi

Input dạng checkbox

<input type="checkbox" name="" value="" />

Được sử dụng cho nhiều lựa chọn khác nhau

Input dạng checkbox - sử dụng checked

<input type="checkbox" name="" value="" checked="checked" />

Được sử dụng cho nhiều lựa chọn khác nhau

Input dạng checkbox - sử dụng disabled

<input type="checkbox" name="" value="" disabled="disabled" />

Dạng này không cho click hay tác động tới input

Input dạng radio

<input type="radio" name="checkbox" value="" />

Được sử dụng cho một chọn lựa duy nhất

Các <input /> phải cùng "name", nếu không sẽ không chọn được

Input dạng radio - sử dụng checked

<input type="radio" name="checkbox" value="" checked="checked" />

Được sử dụng cho một chọn lựa mặc định

Input dạng radio - sử dụng disabled

<input type="radio" name="checkbox" value="" disabled="disabled" />

Dạng này không cho click hay tác động tới input

Input dạng button

<input type="button" name="" value="Click" />

Sử dụng như một nút nhấn

Input dạng button reset

<input type="reset" name="" value="Reset" />

Dùng để reset lại giá trị trong <form>

Input dạng button submit

<input type="submit" name="" value="Submit" />

Trang 30

Dùng để gửi dữ liệu lên server, dữ liệu được gửi thông qua thuộc tính action trong <form> Input dạng button image

<input type="image" src="images/btn_submit.jpeg" alt="SUBMIT" name="" />

Sử dụng như một nút nhấn bằng hình

Input dạng file upload

<input type="file" name="" />

Sử dụng để upload file

Ví dụ về thẻ <button>

Input với thuộc tính type

<button type="button">Click me!</button>

Input với thuộc tính disabled

<button disabled="disabled">Disabled</button>

Input với thuộc tính name

<button name="tênButton">Click me!</button>

Input với thuộc tính type="button"

Xác định danh sách thả xuống không hiển thị

select - option với thuộc tính multiple

<select multiple="multiple">

Trang 31

</select>

Hiển thị nhiều tùy chọn

select - option với thuộc tính size

Xác định danh sách thả xuống không hiển thị

option với thuộc tính label

<option label="label01">Danh sách 01</option>

</select>

Xác định nhãn cho tùy chon

option với thuộc tính selected

<option value="value01">Danh sách 01</option>

</select>

Xác định giá trị của tùy chọn (sẽ được gửi tới server khi submit)

Ví dụ về thẻ <optgroup> optgroup sử dụng thuộc tính label

Trang 32

textarea với thuộc tính rows - cols

<textarea rows="5" cols="20">Bạn đang xem tag html textarea, là text có thể nhập được văn bản, và

có thể chứa rất nhiều dòng </textarea>

B?n đang xem tag html textarea, là tag có

textarea với thuộc tính disabled

<textarea rows="5" cols="20" disabled="disabled">Bạn đang xem tag html textarea, là text có thể nhập được văn bản, và có thể chứa rất nhiều dòng </textarea>

Dạng này sẽ không hiển thì ra trình duyệt

textarea với thuộc tính readonly

<textarea rows="5" cols="20" readonly="readonly">Bạn đang xem tag html textarea, là text có thể nhập được văn bản, và có thể chứa rất nhiều dòng </textarea>

Sử dụng khi giá trị textarea chỉ dùng để đọc, không được thay đổi

Ví dụ về <fieldset> - <legend>

<legend>Thông tin cá nhân:</legend>

Họ tên: <input type="text" size="30" /><br />

Email: <input type="text" size="30" /><br />

Ngày sinh: <input type="text" size="10" />

Trang 33

fieldset - legend - với thuộc tính disabled="disabled"

Khi sử dụng thuộc tính này, chúng ta không thể nào thao tác các chức năng trong form được, ví dụ như không thể click checkbox, radio, không thể điền trường text cho input hay khu vực textarea

<legend>Thông tin cá nhân:</legend>

Họ tên: <input type="text" size="30" /><br />

Email: <input type="text" size="30" /><br />

Ngày sinh: <input type="text" size="10" />

Label - input dạng text

<label for="email">Email</label>: <input type="text" id="email" name="email" size="30" />

Thuộc tính for của label và id của input phải cùng giá trị, click vào nhãn Email để hiểu rõ hơn Email:

Label - input dạng checkbox

<label for="label01">Nhãn 01</label>: <input type="checkbox" id="label01" name="label01"

Label - input dạng radio

<label for="male">Nam</label>: <input type="radio" id="male" name="sex" value="" />

<br />

Thuộc tính for của label và id của input phải cùng giá trị, click vào nhãn Nam và Nữ để hiểu rõ hơn

(chú ý: giá trị của "name" trong 2 <input /> phải như nhau)

Nam:

Trang 39

nhóm thẻ inline để tạo file html với nội dung trang web như bên dưới

Trang 40

Phân tích phần cơ bản trang web

Xem lại phần Cấu trúc cơ bản của trang web ta sẽ phân tích trang web trên như sau:

Tiêu đề	HTML&CSS cơ bản- Lý thiết và bài tập thực hành
Tác giả	Nguyễn Phúc Đức
Trường học	Trường Đại Học Học Cùng Nhau
Chuyên ngành	Thiết Kế Web
Thể loại	giáo trình
Năm xuất bản	2013
Thành phố	Hà Nội

Định dạng
Số trang	210
Dung lượng	4,21 MB