›
›

Giáo trình HTML + CSS - Nghề: Lập trình viên máy tính - Trình độ: Cao đẳng - Trường Cao đẳng nghề kỹ thuật công nghệ

pdf 90 trang Gia Huy 17/05/2022 3531
Download
Bạn đang xem 20 trang mẫu của tài liệu "Giáo trình HTML + CSS - Nghề: Lập trình viên máy tính - Trình độ: Cao đẳng - Trường Cao đẳng nghề kỹ thuật công nghệ", để tải tài liệu gốc về máy bạn click vào nút DOWNLOAD ở trên

Tài liệu đính kèm:

  • pdfgiao_trinh_html_css_nghe_lap_trinh_vien_may_tinh_trinh_do_ca.pdf

Nội dung text: Giáo trình HTML + CSS - Nghề: Lập trình viên máy tính - Trình độ: Cao đẳng - Trường Cao đẳng nghề kỹ thuật công nghệ

  1. BỘ LAO ĐỘNG - THƯƠNG BINH VÀ XÃ HỘI TRƯỜNG CAO ĐẲNG NGHỀ KỸ THUẬT CÔNG NGHỆ š›&š› GIÁO TRÌNH MÔ ĐUN : HTML+CSS NGHỀ: LẬP TRÌNH VIÊN MÁY TÍNH TRÌNH ĐỘ: CAO ĐẲNG Ban hành kèm theo Quyết định số: 13A/QĐ-CĐNKTCN ngày 10 tháng 01 năm 2019 của Hiệu trưởng Trường Cao đẳng nghề Kỹ thuật Công nghệ Hà Nội, năm 2021 (Lưu hành nội bộ) 1
  2. TUYÊN BỐ BẢN QUYỀN: Tài liệu này thuộc loại sách giáo trình nên các nguồn thông tin có thể được phép dùng nguyên bản hoặc trích dùng cho các mục đích về đào tạo và tham khảo. Mọi mục đích khác mang tính lệch lạc hoặc sử dụng với mục đích kinh doanh thiếu lành mạnh sẽ bị nghiêm cấm. MÃ TÀI LIỆU : MĐLTV 16 2
  3. LỜI GIỚI THIỆU HTML/CSS có thể nói là khởi đầu của mọi tất cả vấn đề liên quan tới web, dù bạn là người làm nghành nào, miễn là có đụng tới quản trị web thì ít nhất phải biết qua HTML/CSS. Bạn có thể là một blogger viết rất tốt, nhưng liệu bạn đã sử dụng thành thục các thẻ HTML và vùng chọn CSS căn bản chưa? Nếu câu trả lời là chưa thì điều đó đang hạn chế tiềm năng blogging của bạn. Chương trình khung nghề Lập trình viên máy tính đã được xây dựng trên cơ sở phân tích nghề, phần kỹ thuật nghề được kết cấu theo các môđun. Để tạo điều kiện thuận lợi cho các cơ sở dạy nghề trong quá trình thực hiện, việc biên soạn giáo trình kỹ thuật nghề theo các môđun đào tạo nghề là cấp thiết hiện nay. Mô đun 16: HTML +CSS là mô đun đào tạo nghề được biên soạn theo hình thức tích hợp lý thuyết và thực hành. Trong quá trình thực hiện, nhóm biên soạn đã tham khảo nhiều tài liệu trong và ngoài nước, kết hợp với kinh nghiệm trong thực tế. Mặc dù có rất nhiều cố gắng, nhưng không tránh khỏi những sai sót, rất mong nhận được sự đóng góp ý kiến của độc giả để giáo trình được hoàn thiện hơn. Xin chân thành cảm ơn! Hà Nội, ngày 23 tháng 04 năm 2021 Tham gia biên soạn 1. Chủ biên Trần Thị Vinh 2. Tập thể Giảng viên Khoa CNTT Mọi thông tin đóng góp chia sẻ xin gửi về hòm thư tranthivinhvnn@gmail.com hoặc liên hệ số điện thoại 0978113529 3
  4. MỤC LỤC LỜI GIỚI THIỆU 3 MỤC LỤC 4 BÀI1: TỔNG QUAN VỀ HTML 8 1. Giới thiệu internet 8 2. Giới thiệu HTML 9 2.1. HTML Development 9 2.2. Sử dụng thẻ Metal 10 Các ví dụ về thẻ meta trong HTML 10 2.3. Sử dụng kí tự đặc biệt trong HTML 10 3. Sử dụng các siêu liên kết 19 3.1.Giới thiệu các siêu liên kết và URL 19 3.2. Sử dụng siêu liên kết 20 BÀI 2: CÁC THẺ CƠ BẢN 22 1. Headings 23 2. Các thẻ mức đoạn 25 2.1. Thẻ 25 2.2. Thẻ 25 2.3. Thẻ 25 3. Thẻ khối , 26 4. Các thẻ định dạng kí tự thường dùng 26 5. Danh sách 27 5.1. Danh sách không tuần tự 27 5.2. Danh sách có thứ tự 27 5.3. Danh sách định nghĩa (danh sach hai cấp) 28 6. Thẻ đường kẻ ngang 28 7. Sử dụng font 28 8. Sử dụng màu sắc 29 9. Thẻ thể hiện hình ảnh IMG 29 9.1. Chèn ảnh 29 BÀI 3: SỬ DỤNG BẢNG VÀ LỚP 31 1. Cách tạo bảng 31 1.1. Thẻ dùng để tạo bảng -Thẻ Table 31 1.2. Chèn hàng và cột 32 1.3. Xóa hàng và cột 32 1.4. Trộn ô: Kết hợp giữa các cột hay dòng 32 1.5 Định dạng cho ô 33 2.Lớp (Layer) 33 2.1. Lớp là gì 33 2.2. Sử dụng các lớp 34 3. Chèn Multimedia vào tài liệu HTML 37 3.1. Chèn ảnh động (.Gif) vào tài liệu HTML 37 3.2. Chèn âm thanh vào tài liệu HTML 37 Các thuộc tính của thẻ 37 3.3. Chèn video vào HTML 38 3.4. Chèn các Java Applets 38 4
  5. BÀI 4: SỬ DỤNG BIỂU MẪU VÀ KHUNG 39 1. Giới thiệu biểu mẫu 39 1.1. Sử dụng biểu mẫu 39 1.2 Phần tử Form 39 1.3. Các phần tử nhập của HTML 42 1.4. Tạo biểu mẫu 44 2. Khung (Frame) 45 2.1. Tại sao sử dụng khung 45 2.2. Sử dụng khung 45 2.3. Phần tử iframe – khung trên dòng (inline frame) 47 3. Một số weblayout thường dùng 47 BÀI 5: CSS (Cascading Style Sheet) 58 1. DHTML 58 1.1. Giới thiệu DHTML 58 1.2. Các đặc điểm của DHTML 58 2. Style sheets 58 2.1. Khái niệm, chức năng và các thuận lợi của stylesheet 58 2.2 Quy tắc stylesheet 59 3. Các selector trong style sheet 59 3.1. Selector đơn 59 3.2. Selector ngữ cảnh 60 4. Kết hợp liên kết và chèn một style sheet vào tài liệu HTML 60 4.1. Phần tử style 60 4.2. Thuộc tính style 60 5. Thiết lập thuộc tính trong stylesheet 60 6. Các thuộc tính cơ bản trong CSS 61 6.1 Thuộc tính background 61 6.2 Thuộc tính border 61 6.3 Các thuộc tính CSS dành cho text (văn bản) 65 8. Float / Clear 71 5
  6. GIÁO TRÌNHMÔ ĐUN Tên mô đun: HTML + CSS Mã mô đun: MĐLTV 16 Vị trí, tính chất, ý nghĩa và vai trò của mô đun : - Vị trí: Mô đun HTML+CSS giảng dạy cho sinh viên cao đẳng ngành Lập trình viên - Tính chất: Mô đun cung cấp các kiến thức căn bản về HTML và CSS. Học phần cũng giúp sinh viên tiếp cận với kỹ thuật lập trình web. Mục tiêu của mô đun: - Về kiến thức + Trình bày được các bước của qui trình thiết kế website. + Trình bày các kiến thức cơ bản về các kỹ thuật lập trình web phía Client với HTML, CSS. - Về kỹ năng + Vận dụng được ngôn ngữ HTML, CSS xây dựng web phía client theo yêu cầu. + Thiết kế được các website theo yêu cầu. - Về năng lực tự chủ và trách nhiệm: + Khả năng tìm tài liệu, đọc hiểu tài liệu + Khả năng làm việc nhóm Nội dung của mô đun: Thời gian Số Tên các bài trong mô đun Tổng Lý Thực Kiểm TT số thuyết hành tra* 1 Bài 1: Tổng quan về HTML 1. Giới thiệu Internet 20 3 17 2. Giới thiệu HTML 3. Sử dụng các siêu liên kết 2 Bài 2: Các thẻ HTML cơ bản 1. Headings (tiêu đề) 2. Các thẻ mức đoạn 3. Thẻ khối 4. Các thẻ định dạng ký tự thường dùng 30 6 23 1 5. Danh sách 6. Thẻ đường kẻ ngang 7. Sử dụng font 8. Sử dụng màu sắc 9. Sử dụng hình ảnh trong HTML 3 Bài 3: Sử dụng bảng và lớp 1. Cách tạo bảng 2. Lớp (Layer) 30 12 17 1 3. Chèn Multimedia vào HTML 6
  7. 4 Bài 4: Sử dụng biểu mẫu và khung 1. Giới thiệu biểu mẫu(Form) 2. Khung(Frame) 13 3 10 3. Một số weblayout thường dùng 5 Bài 5: CSS (cascading style sheet) 1. DHTML 2. Style sheets. 3. Các selector trong style sheet (hay các giả lớp) 25 5 19 1 4. Kết hợp, liên kêt và chèn một style sheet vào tài liệu HTML 5. Thiết lập thuộc tính trong stylesheet Thi kết thúc mô đun 2 1 1 Cộng 120 29 87 4 * Ghi chú: Thời gian kiểm tra lý thuyết được tính vào gìơ lý thuyết, Thời gian kiểm tra thực hành được tính vào giờ thực hành. 2. Nội dung chi tiết: 7
  8. BÀI 1: TỔNG QUAN VỀ HTML Mã bài: MĐLTV 16.01 Giới thiệu: HTML (viết tắt của Hypertext Markup Language hay ngôn ngữ đánh dấu siêu văn bản) là ngôn ngữ đánh dấu được dùng để tạo các trang siêu văn bản được sử dụng trên mạng internet (hay trang web). Gọi là ngôn ngữ đánh dấu là vì HTML sử dụng các thẻ để định nghĩa (hay đánh dấu) các thành phần khác nhau trên trang web. Siêu văn bản (hay hypertext) là loại văn bản được sử dụng để hiẹn thị trên các máy vi tính (hoặc các thiết bị điện tử số). Siêu văn bản khác với văn bản thông thường ở chỗ chúng được liên kết lại với nhau và có thể được tham chiếu tới nhờ sử dụng các link liên kết. Mục tiêu: Trình bày được những khái niệm cơ bản về internet, HTML Nắm vững cấu trúc một trang HTML Trình bày và sử dụng được các siêu liên kết của HTML Nội dung chính: 1. Giới thiệu internet Mục tiêu: - Giới thiệu chức năng, tầm quan trọng của Internet Internet là gì? Internet là gì? Internet là mạng toàn cầu bao gồm hàng tỷ máy tính và các thiết bị điện tử khác. Với Internet, bạn có thể truy cập hầu hết mọi thông tin, giao tiếp với bất kỳ ai khác trên thế giới và bạn còn làm được nhiều hơn thế nữa. Bạn có thể làm tất cả điều này bằng cách kết nối máy tính với Internet, hay còn được gọi là going online. Khi ai đó nói rằng máy tính đang trực tuyến, đó là cách nói khác chỉ rằng nó đang được kết nối với Internet. 8
  9. 2. Giới thiệu HTML 2.1. HTML Development HTML (viết tắt của từ Hypertext Markup Language, hay là "Ngôn ngữ Đánh dấu Siêu văn bản") là một ngôn ngữ đánh dấu được thiết kế ra để tạo nên các trang web trên World Wide Web. Cùng với CSS và JavaScript, HTML là một trong những ngôn ngữ quan trọng trong lĩnh vực thiết kế website. HTML được định nghĩa như là một ứng dụng đơn giản của SGML và được sử dụng trong các tổ chức cần đến các yêu cầu xuất bản phức tạp. HTML đã trở thành một chuẩn mực của Internet do tổ chức World Wide Web Consortium (W3C) duy trì. Phiên bản chính thức mới nhất của HTML là HTML 4.01 (1999). Sau đó, các nhà phát triển đã thay thế nó bằng XHTML. Hiện nay, phiên bản mới nhất của ngôn ngữ này là HTML5. Lưu ý: HTML không phải là ngôn ngữ lập trình. Bằng cách dùng HTML động hoặc Ajax, lập trình viên có thể được tạo ra và xử lý bởi số lượng lớn các công cụ, từ một chương trình soạn thảo văn bản đơn giản – có thể gõ vào ngay từ những dòng đầu tiên – cho đến những công cụ xuất bản WYSIWYG phức tạp. Hypertext là cách mà các trang Web (được thiết kế bằng HTML) được kết nối với nhau. Và như thế, đường link có trên trang Web được gọi là Hypertext. Như tên gọi đã nói, HTML là ngôn ngữ đánh dấu bằng thẻ (Markup Language), nghĩa là bạn sử dụng HTML để đánh dấu một tài liệu text bằng các thẻ (tag) để nói cho trình duyệt Web cách để cấu trúc nó để hiển thị Cấu trúc trang HTML 9
  10. 2.2. Sử dụng thẻ Metal Thẻ HTML hay thẻ meta trong HTML được sử dụng để cung cấp metadata về tài liệu HTML. Metadata sẽ không được hiển thị trên trình duyệt, nhưng nó sẽ được bộ máy tìm kiếm phân tích để lấy thông tin cơ bản về trang web của bạn. Thẻ HTML meta được sử dụng để định nghĩa các thông tin cơ bản như mô tả trang web, từ khóa, tác giả, chỉnh sửa cuối cùng và các metadata khác. Metadata có thể được sử dụng bởi các trình duyệt (cách hiển thị nội dung hoặc tải lại trang), bộ máy tìm kiếm (từ khóa), và các dịch vụ web khác. HTML5 giới thiệu một phương pháp để cho các nhà thiết kế web kiểm soát khung nhìn (khu vực hiển thị của một người dùng trên trang web), thông qua thẻ Thẻ meta được định nghĩa trong thẻ Các ví dụ về thẻ meta trong HTML Ví dụ 1: định nghĩa các từ khóa cho bộ máy tìm kiếm. 1 Ví dụ 2: định nghĩa một mô tả cho trang web. 1 Ví dụ 3: định nghĩa tác giả của trang web. 1 Ví dụ 4: tự động tải lại trang web sau 30s. 1 Ví dụ 5: Thiết định khung nhìn để trang web dễ nhìn trên tất cả các thiết bị. 1 2.3. Sử dụng kí tự đặc biệt trong HTML Khi học lập trình HTML, bạn sẽ có cơ hội được thấy các kí tự vô cùng đặc biệt nhưng không thể thể hiện được nó như các kí tự thông thường trên bàn phím. Để có thể biểu diễn được các kí tự này trên Website dưới dạng ngôn ngữ lập trình HTML, chúng ta cần biết các loại mã đặc trưng dành cho chúng. Khi HTML nhìn thấy các loại mã này, chúng mặc định sẽ chuyển đổi các mã ở cột “HTML” sang hình dạng kí tự như cột “Symbol” như dưới đây. Numeri CSS JS HTML Symbol Description Hex c (ISO) (Octal) SPECIAL CHARACTERS " “ " quotation mark u+0022 \0022 \42 10
  11. Numeri CSS JS HTML Symbol Description Hex c (ISO) (Octal) ISOnum u+0023 # # # number sign \0023 \43 ISOnum u+0024 $ $ $ dollar sign \0024 \44 ISOnum u+0025 % % % percent sign \0025 \45 ISOnum u+0026 & & & ampersand \0026 \46 ISOnum u+0027 ' ‘ ' apostrophe \0027 \47 ISOnum u+0028 ( ( ( left parenthesis \0028 \50 ISOnum u+0029 ) ) ) right parenthesis \0029 \51 ISOnum u+002A * * * Asterisk \002a \52 ISOnum u+002B + + + plus sign \002b \53 ISOnum u+002C , , , Comma \002c \54 ISOnum u+002D − – - hyphen-minus \002d \55 ISOnum u+002E . . . full stop; period \002e \56 ISOnum u+002F / / / solidus; slash \002f \57 ISOnum u+003A : : : Colon \003a \72 ISOnum u+003B ; ; ; semicolon \003b \73 ISOnum u+003C < > \003e \76 sign ISOnum u+003F ? ? ? question mark \003f \77 ISOnum at sign; u+0040 @ @ @ \0040 \100 commercial at ISOnum [ [ [ left square u+005B \005b \133 11
  12. Numeri CSS JS HTML Symbol Description Hex c (ISO) (Octal) bracket ISOnum u+005C \ \ \ backslash \005c \134 ISOnum right square u+005D ] ] ] \005d \135 bracket ISOnum circumflex u+005E ^ ^ ^ \005e \136 accent ISOnum u+005F _ _ _ low line \005f \137 ISOnum u+0060 ` ` ` grave accent \0060 \u0060 ISOnum left curly u+007b { { { \007b \173 bracket ISOnum u+007c | | | vertical bar \007c \174 ISOnum right curly u+007d } } } \007d \175 bracket ISOnum u+007e ~ } Tilde \007e \176 ISOnum LATIN     no-break space %A0 \00a0 \240 inverted ¡ ¡ ¡ exclamation %A1 \00a1 \241 mark ¢ ¢ ¢ cent sign %A2 \00a2 \242 pound sterling £ £ £ %A3 \00a3 \243 sign general ¤ ¤ ¤ %A4 \00a4 \244 currency sign ¥ ¥ ¥ yen sign %A5 \00a5 \245 ȋ Indian Rupee ₹ U+20B9 \20B9 \u20B9 9; (INR) sign broken ¦ ¦ ¦ %A6 \00a6 \246 (vertical) bar § § § section sign %A7 \00a7 \247 umlaut ¨ ¨ ¨ %A8 \00a8 \250 (dieresis) © © © copyright sign %A9 \00a9 \251 ordinal ª ª ª indicator, %AA \00aa \252 feminine « « « angle quotation %AB \00ab \253 12
  13. Numeri CSS JS HTML Symbol Description Hex c (ISO) (Octal) mark, left ¬ ¬ ¬ not sign %AC \00ac \254 ­ ­ soft hyphen %AD \00ad \255 ® ® ® registered sign %AE \00ae \256 ¯ ¯ ¯ Macron %AF \00af \257 ° ° ° degree sign %B0 \00b0 \260 plus-or-minus ± ± ± %B1 \00b1 \261 sign ² ² ² superscript two %B2 \00b2 \262 ³ ³ ³ superscript three %B3 \00b3 \263 ´ ´ ´ acute accent %B4 \00b4 \264 µ µ µ micro sign %B5 \00b5 \265 pilcrow ¶ ¶ ¶ %B6 \00b6 \266 (paragraph sign) · · · middle dot %B7 \00b7 \267 ¸ ¸ ¸ Cedilla %B8 \00b8 \270 ¹ ¹ ¹ superscript one %B9 \00b9 \271 ordinal º º º indicator, %BA \00ba \272 masculine angle quotation » » » %BB \00bb \273 mark, right fraction one- ¼ ¼ ¼ %BC \00bc \274 quarter fraction one- ½ ½ ½ %BD \00bd \275 half fraction three- ¾ ¾ ¾ %BE \00be \276 quarters inverted ¿ ¿ ¿ %BF \00bf \277 question mark capital A, grave À À À %C0 \00c0 \300 accent capital A, acute Á Á Á %C1 \00c1 \301 accent capital A,    ; circumflex %C2 \00c2 \302 accent à à à capital A, tilde %C3 \00c3 \303 capital A, Ä Ä Ä dieresis or %C4 \00c4 \304 umlaut mark 13
  14. Numeri CSS JS HTML Symbol Description Hex c (ISO) (Octal) Å Å Å capital A, ring %C5 \00c5 \305 capital AE Æ Æ Æ diphthong %C6 \00c6 \306 (ligature) capital C, Ç Ç Ç %C7 \00c7 \307 cedilla capital E, grave È È È %C8 \00c8 \310 accent capital E, acute É É É %C9 \00c9 \311 accent capital E, Ê Ê Ê circumflex %CA \00ca \312 accent capital E, Ë Ë Ë dieresis or %CB \00cb \313 umlaut mark capital I, grave Ì Ì Ì %CC \00cc \314 accent capital I, acute Í Í Í %CD \00cd \315 accent capital I, Î Î Î circumflex %CE \00ce \316 accent capital I, Ï Ï Ï dieresis or %CF \00cf \317 umlaut mark capital Eth, Ð Ð Ð %D0 \00d0 \320 Icelandic Ñ Ñ Ñ capital N, tilde %D1 \00d1 \321 capital O, grave Ò Ò Ò %D2 \00d2 \322 accent capital O, acute Ó Ó Ó %D3 \00d3 \323 accent capital O, Ô Ô Ô circumflex %D4 \00d4 \324 accent Õ Õ Õ capital O, tilde %D5 \00d5 \325 capital O, Ö Ö Ö dieresis or %D6 \00d6 \326 umlaut mark × × × multiply sign %D7 \00d7 \327 Ø Ø Ø capital O, slash %D8 \00d8 \330 Ù Ù Ù capital U, grave %D9 \00d9 \331 14
  15. Numeri CSS JS HTML Symbol Description Hex c (ISO) (Octal) accent capital U, acute Ú Ú Ú %DA \00da \332 accent capital U, Û Û Û circumflex %DB \00db \333 accent capital U, Ü Ü Ü dieresis or %DC \00dc \334 umlaut mark capital Y, acute Ý Ý Ý %DD \00dd \335 accent capital THORN, Þ Þ Þ %DE \00de \336 Icelandic small sharp s, ß ß ß German (sz %DF \00df \337 ligature) small a, grave à à à %E0 \00e0 \340 accent small a, acute á á á %E1 \00e1 \341 accent small a, â â â circumflex %E2 \00e2 \342 accent ã ã ã small a, tilde %E3 \00e3 \343 small a, dieresis ä ä ä %E4 \00e4 \344 or umlaut mark å å å small a, ring %E5 \00e5 \345 small ae æ æ æ diphthong %E6 \00e6 \346 (ligature) ç ç ç small c, cedilla %E7 \00e7 \347 small e, grave è è è %E8 \00e8 \350 accent small e, acute é é é %E9 \00e9 \351 accent small e, ê ê ê circumflex %EA \00ea \352 accent small e, dieresis ë ë ë %EB \00eb \353 or umlaut mark small i, grave ì ì ì %EC \00ec \354 accent í í í small i, acute %ED \00ed \355 15
  16. Numeri CSS JS HTML Symbol Description Hex c (ISO) (Octal) accent small i, î î î circumflex %EE \00ee \356 accent small i, dieresis ï ï ï %EF \00ef \357 or umlaut mark small eth, ð ð ð %F0 \00f0 \360 Icelandic ñ ñ ñ small n, tilde %F1 \00f1 \361 small o, grave ò ò ò %F2 \00f2 \362 accent small o, acute ó ó ó %F3 \00f3 \363 accent small o, ô ô ô circumflex %F4 \00f4 \364 accent õ õ õ small o, tilde %F5 \00f5 \365 small o, dieresis ö ö ö %F6 \00f6 \366 or umlaut mark ÷ ÷ ÷ divide sign %F7 \00f7 \367 ø ø ø small o, slash %F8 \00f8 \370 small u, grave ù ù ù %F9 \00f9 \371 accent small u, acute ú ú ú %FA \00fa \372 accent small u, û û û circumflex %FB \00fb \373 accent small u, dieresis ü ü ü %FC \00fc \374 or umlaut mark small y, acute ý ý ý %FD \00fd \375 accent small thorn, þ þ þ %FE \00fe \376 Icelandic small y, dieresis ÿ ÿ ÿ %FF \00ff \377 or umlaut mark LATIN EXTENDED latin capital u+0152 Œ Œ Œ \0152 \u0152 ligature oe ISOlat2 latin small u+0153 œ œ œ \0153 \u0153 ligature oe ISOlat2 Š Š Š latin capital u+0160 \0160 \u0160 16
  17. Numeri CSS JS HTML Symbol Description Hex c (ISO) (Octal) letter s with ISOlat2 caron latin small letter u+0161 š š š \0161 \u0161 s with caron ISOlat2 latin capital u+0178 Ÿ Ÿ Ÿ letter y with \0178 \u0178 ISOlat2 diaeresis latin small f u+0192 ƒ ƒ ƒ \0192 \u0192 with hook ISOtech SPACING MODIFIER LETTERS modifier letter u+02C6 ˆ ˆ circumflex \02c6 \u02c6 ISOpub accent u+02DC ˜ ˜ small tilde \02dc \u02dc ISOdia GREEK greek capital Α Α Α u+0391 \0391 \u0391 letter alpha greek capital Β Β Β u+0392 \0392 \u0392 letter beta greek capital u+0393 Γ Γ Γ \0393 \u0395 letter gamma ISOgrk3 greek capital u+0394 Δ Δ Δ \0394 \u0394 letter delta ISOgrk3 greek capital Ε Ε Ε u+0395 \0395 \u0395 letter epsilon greek capital Ζ Ζ Ζ u+0396 \0396 \u0396 letter zeta greek capital Η Η Η u+0397 \0397 \u0397 letter eta greek capital u+0398 Θ Θ Θ \0398 \u0398 letter theta ISOgrk3 greek capital Ι Ι Ι u+0399 \0399 \u0399 letter iota greek capital Κ Κ Κ u+039A \039a \u039a letter kappa greek capital u+039B Λ Λ Λ \039b \u039b letter lambda ISOgrk3 greek capital Μ Μ Μ u+039C \039c \u039c letter mu greek capital Ν Ν Ν u+039D \039d \u039D letter nu 17
  18. Numeri CSS JS HTML Symbol Description Hex c (ISO) (Octal) greek capital u+039E Ξ Ξ Ξ \039e \u039e letter xi ISOgrk3 greek capital Ο Ο Ο u+039F \039f \u039f letter omicron greek capital u+03A0 Π Π Π \03a0 \u03a0 letter pi ISOgrk3 greek capital Ρ Ρ Ρ u+03A1 \03a1 \u03a1 letter rho greek capital u+03A3 Σ Σ Σ \03a3 \u03A3 letter sigma ISOgrk3 greek capital Τ Τ Τ u+03A4 \03a4 \u03A4 letter tau greek capital u+03A5 Υ Υ Υ \03a5 \u03A5 letter upsilon ISOgrk3 greek capital u+03A6 Φ Φ Φ \03a6 \u03A6 letter phi ISOgrk3 greek capital Χ Χ Χ u+03A7 \03a7 \u03A7 letter chi greek capital u+03A8 Ψ Ψ Ψ \03a8 \u03A8 letter psi ISOgrk3 greek capital u+03A9 Ω Ω Ω \03a9 \u03A9 letter omega ISOgrk3 greek small u+03B1 α α α \03b1 \u03b1 letter alpha ISOgrk3 greek small u+03B2 β β β \03b2 \u03b2 letter beta ISOgrk3 greek small u+03B3 γ γ γ \03b3 \u03b3 letter gamma ISOgrk3 greek small u+03B4 δ δ δ \03b4 \u03b4 letter delta ISOgrk3 greek small u+03B5 ε ε ε \03b5 \u03b5 letter epsilon ISOgrk3 greek small u+03B6 ζ ζ ζ \03b6 \u03b6 letter zeta ISOgrk3 greek small u+03B7 η η η \03b7 \u03b7 letter eta ISOgrk3 greek small u+03B8 θ θ θ \03b8 \u03b8 letter theta ISOgrk3 greek small u+03B9 ι ι ι \03b9 \u03b9 letter iota ISOgrk3 greek small u+03BA κ κ κ \03ba \u03ba letter kappa ISOgrk3 18
  19. Numeri CSS JS HTML Symbol Description Hex c (ISO) (Octal) greek small u+03BB λ λ λ \03bb \u03bb letter lambda ISOgrk3 greek small u+03BC μ μ μ \03bc \u03bc letter mu ISOgrk3 greek small u+03BD ν ν ν \03bd \u03bd letter nu ISOgrk3 greek small u+03BE ξ ξ ξ \03be \u03be letter xi ISOgrk3 greek small u+03BF ο ο ο \03bf \u03bf letter omicron NEW greek small u+03C0 π π π \03c0 \u03c0 letter pi ISOgrk3 greek small u+03C1 ρ ρ ρ \03c1 \u03c1 letter rho ISOgrk3 greek small u+03C2 ς ς ς letter final \03C2 \u03c2 ISOgrk3 sigma greek small u+03C3 σ σ σ \03C3 \u03c3 letter sigma ISOgrk3 greek small u+03C4 τ τ τ \03C4 \u03c4 letter tau ISOgrk3 greek small u+03C5 υ υ υ \03C5 \u03c5 letter upsilon ISOgrk3 greek small u+03C6 φ φ φ \03C6 \03c6 letter phi ISOgrk3 greek small u+03C7 χ χ χ \03C7 \u03c7 letter chi ISOgrk3 greek small u+03C8 ψ ψ ψ \03C8 \u03c8 letter psi ISOgrk3 greek small u+03C9 ω ω ω \03C9 \u03c9 letter omega ISOgrk3 greek small u+03D1 ϑ ϑ ϑ letter theta \03D1 \u03D1 NEW symbol greek upsilon u+03D2 ϒ ϒ ϒ with hook \03D2 \u03D2 NEW symbol u+03D6 ϖ ϖ ϖ greek pi symbol \03D6 \u03D6 ISOgrk3 3. Sử dụng các siêu liên kết 3.1.Giới thiệu các siêu liên kết và URL Trong HTML, liên kết được xác định bởi cặp thẻ : 19
  20. Ví dụ 1 Thuộc tính href xác định địa chỉ đích 3.2. Sử dụng siêu liên kết Các liên kết cục bộ Ví dụ trên sử dụng một URL tuyệt đối (Một địa chỉ web đầy đủ).Một liên kết cục bộ (Liên kết tới các trang web trong cùng một website) được xác định với một URL tương đối (Không có .). Ví dụ 2 Xem demo ví dụ 4 Giá trị target Mô tả _blank Mở tài liệu liên kết trong một của sổ mới hoặc một tab mới Mở tài liệu liên kết trong cùng frame như mà nó được kích(đây là _self mặc định) _parent Mở tài liệu liên kết trong frame cha _top Mở tài liệu liên kết chiếm toàn bộ phần body của cửa sổ framename Mở tài liệu liên kết trong một frame đã được đặt tên Nếu trang web của bạn bị khóa trong một frame, bạn có thể sử dụng target=”_top” để thoát khỏi frame đó: 20
  21. Ví dụ 5 Liên kết trong HTML – Liên kết dùng hình ảnh Nó rất phổ biến sử dụng các hình ảnh cho các liên kết : Ví dụ 6 21
  22. BÀI 2: CÁC THẺ CƠ BẢN Mã bài: MĐLTV 16.02 Giới thiệu Bài này sẽ giới thiệu cho các bạn thuộc tín, ý nghĩa các sử dụng những thẻ cơ bản dùng trong HTML như thẻ trình bày biểu diễn đoạn văn bản, thẻ ngắt dòng, thẻ căn chỉnh nội dung trung tâm Mục tiêu của bài: - Liệt kê được các thẻ HTML và các thuộc tính về ý nghĩa và cách sử dụng cơ bản - Trình bày được ý nghĩa các loại thẻ - Tạo được tài liệu HTML và hiển thị được các tài liệu trên các trình duyệt khác nhau - Vận dụng vào thiết kế 1 nội dung cụ thể của website - Rèn luyện tính thẩm mỹ, khả năng làm việc nhóm - Tích cực chủ động làm các bài tập thực thành theo đúng nội dung Nội dung: Thay đổi màu nền Visual Stadio code: File/ Preference/ Color Theme/ Chọn Light (Visual Stadio). Đổi font chữ Visual Stadio code: File/ Preference/ Settings/ Chọn Font size: 16 CÁC BƯỚC KHI CHẠY FILE CODE Bước 1: Mở file mới: Ấn ctrl + N/ Lưu file: tên file.html(luôn luôn có đuôi là .html)/ Trong màn hình soạn thảo Visual Stadio code: Giữ phím Shift + 1 để ra dấu chấm than ! (sử dụng phần viết code là subline text 3 thì gõ <html rồi ấn phím Enter. Ấn phím tab trên bàn phím sẽ hiển thị ra cấu trúc của trang web 22
  23. Trong phần head sửa nội dung ở thẻ Tên trang web Bước 2: Gõ nội dung các thẻ trong phần: chú ý các thẻ chỉ cần gõ tên thẻ rồi ấn Enter sẽ tự động ra thẻ đóng của nó. Bước 3: Gõ xong nội dung code/ lưu file: ctrl + S/ Bước 4: Vào file đã lưu/Nhấp phải chuột chọn một trình duyệt web 1. Headings - Danh sách các thẻ từ h1 đến h6 Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Ví dụ: Gõ code trên Visual Stadio và lưu html heading.html 23
  24. Thẻ tiêu đề Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung Bước 2: Vào thư mục chứa file html heading.html 24
  25. Hiển thị kết quả: 2. Các thẻ mức đoạn 2.1. Thẻ Thẻ trong HTML - Thẻ dùng để xác định thông tin liên hệ của tác giả (hoặc chủ sở hữu) trang web. - Mặc định, phần tử sẽ có một ngắt dòng ở phía trên và một ngắt dòng ở phía dưới. Văn bản nằm bên trong phần tử được định dạng kiểu chữ in nghiêng. Được viết bởi: tập thể khoa cntt Website: Địa chỉ: tổ 27, thị trấn Đông Anh, Hà nội 2.2. Thẻ - Thẻ dùng để xác định một "đoạn trích dẫn" từ một website khác. - Cú pháp: đoạn trích dẫn Ví dụ Bên dưới là một trích dẫn từ trang www.worldwildlife.org For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally. 2.3. Thẻ thẻ giúp cho nội dung mà bạn muốn hiển thị lên màn hình được giữ nguyên định dạng giống như trong lúc soạn thảo. 25
  26. - Thẻ Nội dung Ví dụ: 3. Thẻ khối , Cấu trúc và qui tắc của thẻ HTML - Thông thường thẻ HTML sẽ có thẻ đóng và thẻ mở - Thẻ HTML có tên giống nhau ở thẻ đóng mở, chỉ khác nhau ở dấu / - Trường hợp đặc biệt thì sẽ không có thẻ đóng, nhưng có đóng thẻ trên chính nó - Thẻ html có thể không có, có 1 hoặc nhiều thuộc tính Nội dung hoặc - Nội dung bọc giữa thẻ đóng và mở: Text, Ảnh, Video, Các thẻ HTML - Có thể tự định nghĩa thẻ HTML Các loại thẻ HTML Có 3 loại thẻ HTML - Block: Nội dung - Inline: Nội dung - None: 4. Các thẻ định dạng kí tự thường dùng Tiêu đề của trang - Nội dung tiêu đề SEO: Quan trọng Các thẻ thể hiện văn bản - Nội dung Thẻ thể hiện đoạn văn bản - : Xuống dòng - Nội dung : Gạch chân văn bản - Nội dung : Xóa văn bản - Nội dung : In nghiêng - Nội dung : Thẻ font chữ trong có các thuộc tính màu chữ, cỡ chữ (size). - Nội dung & Nội dung : Thể thể hiện chữ in đậm văn bản SEO: Dùng thẻ strong tốt hơn. Ví dụ:Lưu file html text.html Các thẻ font chữ 26
  27. THIẾT KẾ WEB TẠI TRƯỜNG CAO ĐẲNG NGHỀ KTCN THIẾT KẾ WEB TẠI TRƯỜNG CAO ĐẲNG NGHỀ KTCN THIẾT KẾ WEB TẠI TRƯỜNG CAO ĐẲNG NGHỀ KTCN THIẾT KẾ WEB TẠI TRƯỜNG CAO ĐẲNG NGHỀ KTCN THIẾT KẾ WEB TẠI TRƯỜNG CAO ĐẲNG NGHỀ KỸ THUẬT CÔNG NGHỆ THIẾT KẾ WEB TẠI TRƯỜNG CAO ĐẲNG NGHỀ KTCN Nội dung 5. Danh sách 5.1. Danh sách không tuần tự Thể hiện danh sách (tuần tự & bất tuần tự) Nội dung Nội dung Nội dung Nội dung Nội dung Nội dung 5.2. Danh sách có thứ tự Danh sách có thứ tự trong HTML hay còn gọi là danh sách được đánh số trong HTML. Mặc định tất cả các mục của danh sách được đánh dấu bằng các con số tăng dần. Danh sách có thứ tự bắt đầu với thẻ và các mục danh sách bắt đầu bằng thẻ . 27
  28. Ví dụ: 5.3. Danh sách định nghĩa (danh sach hai cấp) - Danh sách hai cấp là một dạng mở rộng của danh sách thông thường, danh mục bên trong danh sách có thể là một cái danh sách khác Để tạo một cái danh sách hai cấp thì chúng ta chỉ cần chèn đoạn mã của cái danh sáchcấp hai nằm tại vị trí danh mục của cái danh sách cấp một là được. HTML CSS Ajax jQuery PHP & MySQL 6. Thẻ đường kẻ ngang Để kẻ một đường ngang trong HTML, ta dùng lệnh Hr, và vì nó là một thẻ đơn nên không có thẻ đóng (end tag) như các bạn thẻ khác. Một đường kẻ ngang mặc định của HTML là như thế này: Đường kẻ ngang kéo dài từ lề trái sang lề phải và có màu đen 7. Sử dụng font Thẻ được dùng để định dạng cho văn bản như: màu sắc, kích cỡ, kiểu chữ, Danh sách các thuộc tính được sử dụng trong thẻ Thuộc tính Giá trị Mô tả color Tên màu Chỉnh màu sắc văn bản Giá trị rgb Giá trị hex 28
  29. Size Number (trong Chỉnh kích cỡ văn bản khoảng từ 1 đến 7) Face Tên kiểu chữ Chỉnh kiểu chữ văn bản Ví dụ: 8. Sử dụng màu sắc Quy tắc màu sắc trong HTML, mã màu sắc CSS và HTML, sử dụng các màu sắc trong văn bản HTML thuần túy, công cụ chọn màu sắc và các mã màu dùng trong CSS và HTML Màu sắc sử dụng trong HTML cũng như CSS là sự kết hợp ba màu (trộn ba màu đỏ RED, xanh lá GREEN, xanh BLUE với cường độ màu khác nhau của các màu thành phần này), từ nguyên tắc trộn màu đó nó tạo ra tất cả các màu còn lại khác), ta gọi là trộn màu RGB. Cường độ màu là số nguyên có giá trị từ 0 đến 255. Quy tắc trộn màu theo quy luật về màu sắc trong hội họa Các ngôn ngũ lập trình đều hỗ trợ những hàm để trộn màu rgb, ngay cả HTML CSS cũng có hàm pha trộn màu ba thành phần có tên là rgb, ví dụ: màu đỏ có cường độ 128, màu green có cường độ 100, màu blue có cường độ 50 ba màu đó trộn với nhau Dùng phổ biến trong HTML, CSS là cách màu sắc được biểu diễn bằng giá trị thập lục phân hexadecimal. Tức là dùng 16 chữ số: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F để biểu diễn những thành phần màu được pha trộn RGB Giá trị màu Hex biểu diễn bằng cách viết ký tự hashtag (#) và theo sau là sáu ký tự HEX gồm 2 ký tự đầu là giá trị HEX là cường độ màu đỏ RED, tiếp theo là 2 ký tự hex cường độ màu xanh lá GREEN, 2 ký tự cuối là số hex cường độ màu xanh BLUE. Kết quả màu sẽ sự pha trộn của ba thành phần đó. Màu nền rgb(128,100,200) Hoặc màu đỏ và màu green (cường độ cao nhất 255) trộn với nhau (không có màu blue) thì sẽ ra màu vàng Màu nền rgb(255, 255, 0) Màu nền rgb(255, 255, 0). 9. Thẻ thể hiện hình ảnh IMG 9.1. Chèn ảnh Thẻ img là thẻ đặc biệt không có thẻ đóng, đóng thẻ trên chính nó 29
  30. Cú pháp: Trong đó: src: Đường dẫn của ảnh. Đường dẫn của ảnh có hai cách: - Tên ảnh. Phần mở rộng ảnh (jpg hoặc png) (nếu ảnh nằm cùng thư mục với file code html) - Thư mục chứa ảnh/Tên ảnh. Phần mở rộng ảnh (jpg hoặc png) (nếu ảnh nằm trong một folder chứa ảnh). alt: Mô tả cho ảnh width: chiều rộng ảnh height: chiều cao ảnh Ví dụ: Code trên visual studio: Lưu file: html image.html HTML Image Chú ý: Thông thường chỉ xét đến thuộc tính là chiều rộng hoặc chiều cao của ảnh, xét một cái nó sẽ t ự động điều chỉnh làm cho ảnh khôn bị vỡ. Nếu đặt cả hai thuộc tính thì chú ý chiều rộng và cao để cho ảnh cân đối. Trừ khi độ rộng và chiều cao đúng. 30
  31. BÀI 3: SỬ DỤNG BẢNG VÀ LỚP Mã bài: MĐLTV 16.03 Giới thiệu Class là một thuộc tính trong HTML và hầu hết các thẻ HTML đều hỗ trợ thuộc tính class. Vậy, class dùng để làm gì? class được sử dụng cho việc lên giao diện cho website. Nội dung bài này chúng ta sẽ được học về tạo bảng, căn chỉnh, định dạng bảng và class. Mục tiêu - Liệt kê được các thẻ HTML và các thuộc tính về ý nghĩa và cách sử dụng cơ bản thẻ bảng và lớp. - Tạo được tài liệu HTML và hiển thị được các tài liệu trên các trình duyệt - Tích cực chủ động làm các bài tập thực thành theo đúng nội dung Nội dung 1. Cách tạo bảng 1.1. Thẻ dùng để tạo bảng -Thẻ Table Thẻ table là thẻ dùng để tạo bảng trong html. Trước đây khi chưa có css thì table là thẻ quan trong để dựng layout trong trang web. Ngày nay không sử dụng bảng để dựng bố cục cho trang web do dùng rất nặng. Cấu trúc của bảng gồn có dòng (row), cột (column) và các tiêu đều heading. Giao của dòng và cột là các ô (cell). Số cột của các dòng luôn bằng nhau, nếu không sẽ bị vỡ. Cú pháp 1 2 3 4 1 1 1 1 1 1 1 1 Thuộc tính dùng chung cho table, tr và td + width: Qui định độ rộng của trang + align: (left|right|center) canh lề table so với trình duyệt + border: Qui định đường viền + bgcolor: Qui định màu nền 31
  32. Thuộc tính cho td valign: (top|midlle|bottom) Canh nội dung trong cột theo chiều dọc 1.2. Chèn hàng và cột Thẻ và được sử dụng để chèn theo thứ tự các hàng và các cột trong 1 bảng 1.3. Xóa hàng và cột Để có thể xóa một hàng và xóa thẻ Tr tương ứng với các thẻ TD thì bên trong nó từ 1 file mã HTML để xóa dòng thứ 2 chúng ta cần xóa thẻ TD 1.4. Trộn ô: Kết hợp giữa các cột hay dòng * Gộp dòng và gộp cột trong table sử dụng thuộc tính colspan= “số dòng gộp cột” Ví dụ: Lưu file: html table.html. Đường viền 1px, có độ rộng 900px, căn bảng ra giữa trình duyệt, chiều cao mỗi hàng là 70px, màu bảng là màu gray. Hướng dẫn code Bảng STT Họ Và Tên Giới tính Số ĐT Email Địa Chỉ 1 Trần Xuân Quang Nam 0949 923 789 quang12@gmail.com Lạc Long Quân - Hà Nội 32
  33. 2 Đỗ Thị Lan Anh Nữ 0949 237 456 lananh2@gmail.com Lạc Long Quân - Hà Nội 2 Đỗ Mai Trang Nữ 0949 237 456 lananh2@gmail.com Lạc Long Quân - Hà Nội - Thiết lập độ dày của cái đường viền bao xung quanh bảng và các border ô. cellspacing - Thiết lập khoảng cách nằm giữa mỗi hai đường viền lân cận. cellpadding - Thiết lập khoảng cách vùng đệm bên trong các ô. bgcolor - Thiết lập màu nền cho bảng hoặc các ô. width - Thiết lập chiều rộng cho bảng hoặc các ô. height - Thiết lập chiều cao cho bảng hoặc các ô. align - Canh lề cho nội dung bên trong ô (theo chiều ngang) valign - Canh lề cho nội dung bên trong ô (theo chiều dọc) 1.5 Định dạng cho ô - Dưới đây là danh sách một số thuộc tính thường được áp dụng trong việc tạo bảng. (các bạn vui lòng tấm vào hình để tìm hiểu chi tiết chức năng và cách sử dụng của từng thuộc tính) 2.Lớp (Layer) 2.1. Lớp là gì Định nghĩa: định nghĩa một lớp được bắt đầu bởi dấu chấm (.) bên trong khai báo nhiều thuộc tính css để áp dụng cho bất kỳ thẻ nào chỉ định bới thuộc tính class của nó. . { } Áp dụng: tất cả các thuộc tính class có giá trị là . Chú ý thuộc tính class của mỗi thẻ có thể chỏ đến nhiều class cùng một lúc (cách nhau khoảng trắng). Ví dụ sau khi định nghĩa 2 bộ chọn lớp sau đó thẻ áp dụng một còn thẻ áp dụng cho cả hai để tận dụng các đặc điểm tổng hợp. VD bộ chọn lớp .myheader{ 33
  34. font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-style: italic; font-size: 14; color:red; } .myboder{ border: 3px double blue; font-size: 20px; display: inline; } CHÀO MỪNG ĐẾN VỚI WEB CHÀO MỪNG ĐẾN VỚI WEB Trong đó: font-family: tên font chữ font-weight: Độ đậm, nét font chữ font-style: Kiểu chữ font-size: Kích thước chữ color: màu chữ border: viền chữ display: dạng hiển thị Kết quả thực hiện Hình: Bộ chọn lớp 2.2. Sử dụng các lớp Bộ chọn định danh (ID selector) Định nghĩa: giống như bộ chọn lớp nhưng khởi đầu với dấu #. # { } Áp dụng: tất cả các thẻ sử dụng thuộc tính id với giá trị là Ví dụ sau định nghĩa bộ chọn định danh tên là #myparagraph sau đó áp dụng cho một thẻ trong trang web. Chú ý thẻ chòn lại không hề bị ảnh hưởng gì. ví dụ bộ chọn id 34
  35. #myparagraph { background-color: red; /* màu nền*/ text-align: justify; /* căn lề chữ*/ color: black; /* màu chữ */ margin: 10px; /* Khoảng cách từ viền đến thẻ bên ngoài*/ padding: 5px; /* Khoảng cách đường viền đến nội dung*/ border: 1px dotted blue; font-size: 20px; line-height: 2; /* Khoảng cách dòng*/ margin: 0 auto; /* căn nội dung ra giữa*/ width: 1024; /* Độ rộng*/ } Mưa như trút nước những ngày qua đã khiến nhiều địa phương suốt dài đất miền Trung bị ngập sâu, nhiều làng mạc đang bị cô lập hoàn toàn. Trận lũ năm nay được cho là chạm mốc “đại hồng thuỷ” năm 2010. Tại Quảng Bình, ghi nhận của PV Dân trí tại “rốn lũ” xã Tân Ho, huyện miền núi Minh Hoá cho thấy mưa đang rất to và nước lũ lên rất nhanh. Hiện tại nước lũ đã nhấn chìm hơn 600 ngôi nhà, trong đó có rất nhiều nhà nước ngập tới nóc. Kết quả chạy web: Hình: Bộ chọn định danh Bộ chọn cho liên kết Định nghĩa: định nghĩa css cho siêu liên kết. Với liên kết có bốn trạng thái sử dụng là chưa click, đã click, có chuột và tích (đang chọn). Vì vậy để định nghịa CSS cáp dụng cho liên kết chỉ có thể định nghĩa css cho thẻ mà còn định nghĩa cà 4 trạng thái của nó. Sau đây là định nghĩa css cho siêu liên kết. A: { } A:link { } A: visited { } A:hover { } A: active { } Áp dụng: Tất cả các liên kết trong trang có định nghĩa Css cho liên kết. Ví dụ: 35
  36. Bộ chọn liên kết a{ font-family: Arial, Helvetica, sans-serif; font-size: 20px; /* thuộc tính bỏ dấu gạch chân */ text-decoration: none; /* Khoảng cách giữa lề trái, phải là 10px giữa các thẻ a */ padding: 0 10px; } a:link{ color: blue; } a:visited { color: green; } a:hover { text-decoration: underline; color: saddlebrown; border: 1px dotted red; background: yellow; } a:active { color:orange; } | | | | | Kết quả thực hiện: Link 3 đang có chuột, Link 2 đã bị click chuột trước đó. 36
  37. 3. Chèn Multimedia vào tài liệu HTML 3.1. Chèn ảnh động (.Gif) vào tài liệu HTML Bước 1: Truy cập trang web có chứa ảnh động Gif mà bạn muốn sao chép và lưu. Bước 2: Mở cửa sổ Settings trên trình duyệt, sau đó chọn Save Page (trên trình duyệt Firefox) hoặc More tools => Save page as (trên Google Chrome). Bước 3: Mở Windows Explorer hoặc File Explorer, sau đó điều hướng đến vị trí mà bạn lưu trang. Lúc này bạn sẽ nhìn thấy một thư mục mới được tạo và cùng tên nhưng được lưu dưới dạng HTML. Bước 4: Mở thư mục đó lên và tìm kiếm *.gif - nó sẽ hiển thị kết quả tìm kiếm là ảnh động gif mà bạn muốn. Bước 5: Bạn có thể dán ảnh Gif đã tải về vào file Microsoft Word, email hoặc trang web. Bước 6: Trên Microsoft Word, bạn truy cập Insert => Picture để nhúng ảnh động Gif vào. Tuy nhiên trên MS Word không hiển thị ảnh động Gif. Nếu muốn nhúng ảnh động Gif vào MS Word, bạn sẽ phải lưu tài liệu Word dưới dạng Web Page. Và khi bạn mở tài liệu Web Page (được tạo bởi MS Word) trên trình duyệt Uwbe bạn sẽ nhìn thấy ảnh động Gif. img { width:100%; } 3.2. Chèn âm thanh vào tài liệu HTML Để chèn một trình nghe nhạc vào trang web, ta sử dụng thẻ và thẻ theo cú pháp sau: Các thuộc tính của thẻ Thuộc tính dùng để cung cấp thêm thông tin, hành động cho trình nghe nhạc (Ví dụ như: tự động phát nhạc, phát lặp đi lặp lại, tắt tiếng, ). Thuộc tính Ý nghĩa controls hiển thị trình nghe nhạc autoplay tập tin âm thanh sẽ được tự động phát khi trang web load xong. 37
  38. loop phát lặp đi lặp lại tập tin âm thanh mỗi khi nó kết thúc muted tắt volumn của trình nghe nhạc 3.3. Chèn video vào HTML Thẻ được dùng để tạo một "trình xem phim" cho trang web. - Để tạo một trình xem phim thì thẻ cần phải được sử dụng kết hợp với thẻ để xác định tập tin video mà bạn muốn phát. 3.4. Chèn các Java Applets Chức năng Thẻ lệnh HTML dùng để chèn các trình Java Applets trong trang mạng . Trình Java Applets được viết bởi trình soạn thảo Java để thực thi một việc như Trò chơi, Xem nhac hình và Hiển thị dữ liệu Cú pháp Code = Applet mả Codebase = Applet địa chỉ Name = Tên Alt = Chú thích Width = Chiều dọc Height =Chiều ngang Ví dụ HelloWorld_example.html A Java applet example Here it is: This is where HelloWorld.class runs. 38
  39. BÀI 4: SỬ DỤNG BIỂU MẪU VÀ KHUNG Giới thiệu Tại sao phải sử dụng Form? Các mẫu form trong HTML được yêu cầu khi bạn muốn thu thập một vài dữ liệu từ người sử dụng. Ví dụ, khi người sử dụng đăng ký, bạn có thể muốn thu thập thông tin như tên, địa chỉ email, thẻ tín dụng .Một mẫu form sẽ nhận dữ liệu đầu vào từ site người sử dụng và sau đó sẽ thông báo nó tới các ứng dụng back-end như CGI, ASP Script hoặc PHP Script .Có nhiều phần tử form có sẵn như các trường text, các trường textarea, menu, checkbox Mục tiêu - Trình bày được các thẻ nhập liệu trên form - Vận dụng vào thiết kế 1 form nhập liệu cụ thể - Rèn luyện tính cẩn thận, khả năng làm việc nhóm Nội dung 1. Giới thiệu biểu mẫu 1.1. Sử dụng biểu mẫu Thẻ form Cú pháp: Trong đó: + Action: Nơi tiếp nhận dữ liệu gửi đến + Method: phương thức gửi dữ liệu đi + Enctype: Dùng khi upload file 1.2 Phần tử Form Các thẻ con trong form Các thẻ con trong form mục đích hỗ trợ người dùng để nhập liệu Cú pháp: Trong đó: - type: Quy định kiểu dữ liệu nhập vào + text: Dữ liệu nhập vào là chữ (string) + number: dữ liệu nhập vào là số + email: dữ liệu nhập vào là địa chỉ email. + password: Mã hóa dữ liệu nhập vào. + file: chọn file để upload. + submit: dạng button để submit. + radio: cho phép chọn. + checkbox: cho phép chọn. + date: Ngày tháng năm, tùy từng trình duyệt mà nó hiển thị khác nhau. - name, id: tự đặt tên - size: quy định chiều dài của input. Chỉ có ý nghĩa với text và password. - placehode: Mô tả nội dung dữ liệu cần nhập (hay mô tả cho input). 39
  40. - value: chứa giá trị người dùng nhập vào. Quan trọng khi làm việc với js và ngôn ngữ phía sever, chính là chứa giá trị người dùng nhập vào. Value có thể gán giá trị luôn Ví dụ: Lưu file form input.html Dưới đây là ví dụ cơ bản của việc sử dụng Text Input chỉ có một dòng sử dụng để nhận tên và họ. Vi du Text Input trong HTML First name: Last name: Nó sẽ tạo ra kết quả sau: First name: Last name: Ví dụ 2: Lưu file password.html Sau đây là một ví dụ đơn giản về Password Input được sử dụng để nhận mật khẩu người dùng: Ví dụ Password Input trong HTML User ID : Password: Kết quả sẽ là: User ID : Password: Ví dụ3: Lưu file form in html.html 40
  41. Form in html Nam Nữ Nam Sở thích Bóng đá Bóng truyền Bóng rổ Ngày sinh nhật Hiển thị trên web 41
  42. 1.3. Các phần tử nhập của HTML Thẻ textarea Thẻ cho phép người dùng nhập nhiều dòng văn bản. Cú pháp: Trong đó: Cols: Độ rộng Rows: độ cao của Name: Tên Ví dụ: Lưu file Thẻ nhập nhiều dòng textarea.html HTML Hiển thị Web body> Thông tin khác THÔNG TIN KHÁC Phần tử button (nút bấm) Điều khiển này tạo ra điều khiển button. Khi người dùng nhấp vào nút submit, biểu mẫu sẽ được xác nhận để xử lý. Cặp tên/giá trị của nút submit được nhận cùng với biểu mẫu. Cú pháp: Nội dung Thuộc tính Mô tả Name Gán tên cho nút 42
  43. Value Gán giá trị cho nút Type Xác nhận loại nút. Các giá trị có thể là: Submit: Tạo nút nhận biểu mẫu khi được bấm vào Button: Tạo nút kích hoạt môt script khi được kích vào. Reset: tạo nút thiết lập lại (reset) biểu mẫu và các giá trị của các điều khiển trong biểu mẫu Ví dụ: Đăng ký Làm lại Thẻ lable, select Thẻ label: làm rõ hơn nội dung cần phải nhập cho một input. Ngoài ra không muốn dùng thẻ label mà vẫn muốn làm rõ thuộc tính của thẻ thì ta có thuộc tính placeholder = “nội dung”. Ví dụ . Cú pháp: Nội dung Thẻ chọn select Là phần tử hiển thị một danh sách các mục chọn, cho phép người dùng có thể chọn một hoặc nhiều mục. Cú pháp: các thẻ option Để chèn mỗi mục chọn ta dùng các thẻ Các thuộc tính: + Name: tên của phần tử + Size: Kích thước của phần tử. + Multiple: Cho phép người dùng có thể chọn nhiều mục hay không? Ví dụ: Chọn Select Tỉnh thành Hà Nội Đà Nẵng TP Hồ Chí Minh Hải Phòng Nha Trang Hải Dương 43
  44. Code Kết quả Web Chọn Select Tỉnh thành Hà Nội Đà Nẵng TP Hồ Chí Minh Hải Phòng Nha Trang Hải Dương 1.4. Tạo biểu mẫu Các thẻ trong html 5 Trước đây khi muốn chạy được các video hoặc audio thì dùng flash chạy hiệu ứng,. Khi dùng flash phải cài plugin. Nhược điểm của flash là tốn tài nguyên máy tính làm máy chậm, nhanh hết pin, nóng máy. Chính vì vậy sử ra đời của HTML 5 loại bỏ được điều đó. 44
  45. HTML 5 Một số thẻ trong html 5 Tag (thẻ) Mô tả Định nghĩa một bài viết, một nội dung riêng biệt. Định nghĩa nội dung bên ngoài nội dung chính (thường là sidebar). Định nghĩa âm thanh, như nhạc hay audio khác. Được dùng để hiển thị đồ họa. Định nghĩa khu vực header (phần đầu) của trang. Định nghĩa khu vực footer (phần cuối) của trang. Thẻ chứa nội dung chính. Định nghĩa link danh mục (navigation) Định nghĩa một khu vực (vùng bao). Xác định các nội dung liên quan mạc lạc với nhau như hình ảnh, sơ đồ, code, , nội dung liên quan tới nội dung chính. Tất cả các thẻ html 5 trên đều có kiểu block tương đường với thẻ div. Nhưng vì sau này ta có những bố cục trang web cứ lặp đi lặp lại nên dùng các thẻ đó để người lập 2. Khung (Frame) 2.1. Tại sao sử dụng khung Frame (hay Frame) trong HTML được sử dụng để phân chia cửa sổ trình duyệt của bạn thành các khu vực khác nhau mà mỗi khu vực tải một tài liệu HTML riêng. Một tập hợp các Frame trong cửa sổ trình duyệt được biết đến như là một Frameset. Cửa sổ được chia vào các Frame theo cách tương tự như các bảng: bên trong các hàng và cột. 2.2. Sử dụng khung Để sử dụng các Frame trên trang web, chúng ta sử dụng thẻ thay cho thẻ . Thẻ xác định cách chia cửa sổ thành các Frame. Thuộc tính rows trong thẻ này xác định chiều ngang của Frame còn thuộc tính cols xác định chiều dọc của Frame. Mỗi Frame được chỉ dẫn bởi một thẻ và nó xác định tài liệu nào sẽ được mở trong Frame. Các thuộc tính của thẻ Thuộc tính Miêu tả cols Xác định số cột được chứa trong frameset và kích cỡ của mỗi cột. Bạn có thể xác định độ rộng của mỗi cột theo một trong 4 cách sau: Theo giá trị tuyệt đối Pixels. Ví dụ để tạo ra 3 cột dọc, sử dụng cols="100, 500,100". Phần trăm của cửa sổ trình duyệt. Ví dụ để tạo ra thiết lập 3 Frame dọc: cols="10%, 80%,10%". Sử dụng biểu tượng gán giá trị (wildcard). Ví dụ để tạo 3 Frame dọc, bạn sử dụng cols="10%, ,10%". Trong trường hợp này thì wildcard sẽ chiếm phần còn lại. Độ rộng quan hệ của cửa sổ trình duyệt. Ví dụ để tạo 3 Frame dọc, sử dụng cols="3,2,1". Đây là cách thay thế cho việc sử dụng phần trăm. Ở trường hợp này, cửa sổ windows sẽ được chia thành 6 phần, cột đầu 45
  46. Thuộc tính Miêu tả sẽ chiếm một nửa màn hình, cột thứ hai chiếm 1/3 và cột thứ ba chiếm 1/6. rows Thuộc tính này giống như thuộc tính cols và sử dụng các giá trị tương tự, nhưng nó được sử dụng để xác định các hàng của frameset. Ví dụ để tạo 2 Frame ngang, bạn sử dụng rows="10%, 90%". Bạn có thể xác định chiều cao của mỗi hàng theo cách tương tự như các cột. border Thuộc tính này xác định độ rộng của Border (đường viền) của mỗi Frame theo Pixel. Ví dụ như border="5". Một giá trị bằng không có nghĩa là không có Border. frameborder Thuộc tính này xác định có hay không Border được hiển thị giữa các Frame. Nó nhận giá trị 1 hoặc 0. Ví dụ frameborder="0" thì xác định là không có Border. framespacing Xác định số lượng khoảng cách giữa các Frame trong frameset. Nó nhận giá trị nguyên. Ví dụ framespcing="10" nghĩa là có 10 pixel khoảng cách giữa các Frame. Các thuộc tính của thẻ Dưới đây là các thuộc tính của thẻ : Thuộc tính Miêu tả src Thuộc tính này được sử dụng để đặt tên của file sẽ được tải trong Frame. Giá trị là bất cứ địa chỉ URL. Ví dụ, src=" /html/top- frame.html" sẽ tải một file HTML có trong danh mục HTML. name Thuộc tính này cho phép bạn đặt tên cho một Frame. Nó được sử dụng để chỉ rõ Frame nào của tài liệu sẽ được tải trong đó. Nó đặc biệt quan trọng khi bạn muốn tạo các link trong một Frame mà tải các trang web trong một Frame khác, trong trường hợp đó, Frame thứ hai cần một tên để xác định chính nó như là đích tới của link. frameborder Thuộc tính xác định có hay không Border trong Frame đã được chỉ; thuộc tính này được quyền ưu tiên trước giá trị được gán trong thuộc tính frameborder của thẻ . Và nó nhận giá trị 1 (Yes) hoặc 0 (No). marginwidth Thuộc tính này cho phép bạn xác định độ rộng của khoảng cách giữa bên trái và phải của Border Frame với nội dung trong Frame. Giá trị là pixel. Ví dụ marginwidth="10". marginheight Thuộc tính cho phép bạn xác định chiều cao của khoảng cách giữa trên và dưới của Border Frame và nội dung của nó. Giá trị là pixel. Ví 46
  47. Thuộc tính Miêu tả dụ marginheight="10". noresize Theo mặc định thì bạn có thể đặt lại kích thước cho Frame bằng cách nhấn chuột vào Border Frame và kéo. Thuộc tính noresize ngăn cản người sử dụng đặt lại kích cỡ. Ví dụ noresize="noresize". scrolling Thuộc tính này điều khiển sự xuất hiện của thanh cuốn xuất hiện trên Frame. Nó nhận giá trị "yes", "no", hoặc "auto". Ví dụ scrolling="no" nghĩa là sẽ không có thanh cuốn (scrollbar). longdesc Thuộc tính này cho phép bạn cung cấp một đường link tới trang web khác chứa một sự miêu tả dài trong nội dung của Frame. Ví dụ longdesc="framedescription.html". Trình duyệt hỗ trợ cho các Frame Nếu một người dùng đang sử dụng một trình duyệt cũ hoặc trình duyệt mà không hỗ trợ Frame thì khi đó phần tử sẽ được hiển thị tới người dùng. Vì thế bạn phải đặt một phần tử bên trong phần tử bởi vì phần tử được hỗ trợ để đổi vị trí của phần tử , nhưng nếu một trình duyệt không hiểu phần tử thì nó sẽ hiểu những gì bên trong của phần tử mà có chứa trong phần tử . Bạn có thể đặt một vài thông báo lịch thiệp tới người dùng của bạn mà đang sử dụng các trình duyệt cũ. Ví dụ Sorry!! Trinh duyet cua ban khong ho tro Frame. như ví dụ trên. Các thuộc tính name và target của Frame Một trong các cách phổ biến về sử dụng các Frame là để đặt ví trí các thanh điều hướng trong một Frame và sau đó là tải các trang chính trong một Frame riêng biệt. 2.3. Phần tử iframe – khung trên dòng (inline frame) IFrame là thành phần hay thẻ tag của một HTML element giúp nhúng HTML, hình ảnh, video hay trang web khác vào website của mình. IFrame là viết tắt của cụm từ Inline Frame và tạm dịch là khung nội tuyến.IFrame có nhiều thuộc tính từ đơn giản nhất như trích xuất nguồn, chiều rộng, chiều cao đến phức tạp hơn như kẻ đường viền iFrame, canh lề trái phải Tuy nhiên, ở bài viết này, chúng tôi sẽ giới thiệu đến bạn đọc những thuộc tính cơ bản nhất của iFrame: 〈 src: Thuộc tính khai báo đường dẫn tới 1 trang web hoặc 1 file tài liệu nào đó. 〈 width: Thuộc tính dùng để khai báo chiều rộng của iFrame (đơn vị là px hoặc %) 〈 height: Thuộc tính dùng để khai báo chiều cao của iFrame (đơn vị là px hoặc %) 〈 name: Thuộc tính này dùng để đặt tên cho frame. Nó hay được dùng khi muốn hiển thị 1 liên kết nào đó trong 1 frame có thuộc tính name 〈 frameborder: Thuộc tính dùng để thiết lập đường viền bao quanh frame. Thuộc tính này sẽ có 2 giá trị: 0 – ẩn đường viền, 1 – hiện đường viền. Nếu không khai báo thuộc tính này thì mặc định là đường viền được hiển thị 3. Một số weblayout thường dùng CẤU TẠO MỘT TRANG WEB 47
  48. HEADER HEADERMENU LEFT RIGHT FOOTER BÀI TẬP CHƯƠNG 1 Bài 1: Lưu tệp tin Bài 1 ul html.html 〈 Dòng đầu cỡ tiêu đề H3, màu đỏ 〈 Các dòng nội dung dạng danh sách không đánh số thứ tự. Màu xanh. 〈 Dòng cuối có sử dụng văn bản dạng chú thích, có màu khác các màu còn lại, số điện thoại cho đậm. Hướng dẫn code: 49
  49. Bài 1 the danh sach CHƯƠNG TRÌNH ĐÀO TẠO THIẾT KẾ WEB Học html, css, javascript Học thiết kế web động PHP Học thiết kế web với C# Học thiết kế web python Học thiết kế web với Asp net Mọi thông tin liên hệ văn phòng đào tạo tin học điện thoại: 0978113529 b. Tương tự thiết kế theo mẫu Bài 1.1: Tạo trang web theo mẫu sử dụng thẻ liên kết a. Lưu file danh bạ web.html Hướng dẫn code: 50
  50. DANH BẠ WEB DANH BẠ WEBSITE Tin tức Giải trí Liên kết quảng cáo Bài 2: Tạo mẫu form sau: Hướng dẫn Họ: Tên: Lưu ý: mặc định bản thân form không hiển thị ra bên ngoài, chỉ các thành phần tro ng form hiển thị. 51
  51. Chiều dài khung nhập liệu kiểu text mặc định là 20 ký tự. Bài 3: Tạo form đăng nhập theo mẫu. Lưu file: Đăng Nhập.html Hướng dẫn code form in html ĐĂNG NHẬP Username Email Password Password(again) 52
  52. Bài 4: Sử dụng bảng và thẻ input, textarea, thẻ tiêu đề h3, bảng căn ở giữa, bảng có đường viền theo mẫu: Hướng dẫn code: Dong gop ĐÓNG GÓP Ý KIẾN Họ và tên: Nội dung góp ý: Bài 5: Lưu file tên Dangnhap.html Thiết kế trang s ử dụng form trình bày các đối tượng: text, password, submit, Reset. Kết hợp bảng table theo mẫu sau: 53
  53. Hướng dẫn Code FORM ĐĂNG NHẬP ĐĂNG NHẬP DIỄN ĐÀN Tên đăng nhập Mật khẩu 54
  54. Trong đó : - Thẻ để chúng ta tạo một ô để nhập văn bản vào. Các type trong thẻ phải nhập đúng giá trị. - Tất cả các thẻ phải nằm trong cặp thẻ . - Thuộc tính action dùng để link đến một trang web khác khi người dùng nhập vào username + password và nhấp OK ở ví dụ trên là xulyform.html. - Method = “post” là thuộc tính thông thường được sử dụng trong một form. Ngoài ra có thêm một số thuộc tính khác như Method=”get”. - Placeholder là đoạn text sẽ hiện ra trong ô nhập user và password nhằm mục đích hướng dẫn người dùng. - Button Reset có type là reset nhằm khôi phục lại giá trị ban đầu. - Button Ok có type là submit có ý nghĩa là gửi đi. Bài 6: Lưu file gopy.html Thiết kế trang sử dùng form tao các đối tượng bên trong theo mẫu: Sử dụng bảng table có 6 hàng 2 cột, bảng căn giữa trang web. Hướng dẫn: Form Góp ý ĐÓNG GÓP Ý KIẾN Họ và tên* 55
  55. Địa chỉ Số điện thoại Email Nội dung góp ý Bài 7 Lưu file là: Thamdoykien.html Thiết kế trang sử dụng form và kết hợp bảng table để thiết kế các đối tượng bên trong theo mẫu: Hướng dẫn: Thăm dò ý kiến 56
  56. PHIẾU THĂM DÒ Ý KIẾN Tên đăng nhập Giới tính Nam Nữ Những mục ban đầu thường quan tâm trên Internet Tin tức Giải trí Góc học tập Game Các mục khác 57
  57. BÀI 5: CSS (Cascading Style Sheet) Giới thiệu Mặc dù HTML cũng có những thuộc tính giúp chúng ta định dạng màu sắc, kích thước của một số thành phần trên web nhưng khi chúng ta muốn tùy chỉnh vị trí của một phần tử hoặc tạo hiệu ứng cho phần tử thì HTML không thể làm được. Lúc này chúng ta sẽ cần sử dụng đến CSS. Vậy CSS là gì? CSS là viết tắt của từ viết tắt của từ Cascading Style Sheets. Với CSS chúng ta có thể thỏa sức sáng tạo trong thiết kế website bằng cách tùy chỉnh vị trí các phần tử, màu sắc, màu nền, font chữ, thứ tự sắp xếp của các phần tử, hiệu ứng (đổ bóng, bo góc, xoay ) những điều mà HTML gần như không thể làm được. Mục tiêu - Liệt kê được cấu trúc CSS, cách áp dụng, ứng dụng của CSS - Tạo được tài liệu HTML có áp dụng được các CSS, tạo được các CSS theo yêu cầu - Vận dụng cách tạo Css vào thiết kế layout cho 1 website cụ thể - Rèn luyện tính thẩm mỹ, khả năng làm việc nhóm - Tích cực chủ động làm các bài tập thực thành theo đúng nội dung Nội dung 1. DHTML 1.1. Giới thiệu DHTML HTML động hay DHTML (viết tắt tiếng Anh: Dynamic HTML) là một thể hiện của việc tạo ra một trang web bằng cách kết hợp các thành phần: ngôn ngữ đánh dấu HTML tĩnh, ngôn ngữ kịch bản máy khách (như là Javascript), và ngôn ngữ định dạng trình diễn Cascading Style Sheets và Document Object Model (DOM). DHTML có thể được sử dụng để tạo ra 1 ứng dụng trên trình duyệt web: ví dụ như dễ dàng điều hướng, tạo một đơn web tương tác với người dùng hoặc tạo ra một bài tập sử dụng cho e-learning. 1.2. Các đặc điểm của DHTML Một đặc điểm DHTML cơ bản là một cái nhìn hướng đối tượng của các yếu tố trang Web và các điều khiển và Cascading Style Sheets (CSS), được sử dụng để xác định trang Web và các thành phần trang web. Là một phương pháp thiết kế web hướng đối tượng, DHTML cho phép các nhà phát triển để xây dựng nhiều loại trò chơi trực tuyến trực tiếp vào các trang Web. Duy trì các thuật ngữ và công ước hiện nay tạo điều kiện thách thức mã hóa lớn DHTML, mà là trình duyệt cá nhân yêu cầu thông số khác nhau. Một số trình duyệt xử lý mã DHTML tốt hơn so với những người khác, nhưng khả năng qua trình duyệt vẫn còn là một vấn đề phát triển DHTML. Document Object Model (DOM) là một thay thế cho mô hình hướng đối tượng DHTML. 2. Style sheets 2.1. Khái niệm, chức năng và các thuận lợi của stylesheet Cách sử dụng (khai báo CSS) - Lưu file: Ten file.css - 3 cách khai báo CSS + Cách 1: Khai báo nội tuyến:Khai báo trực tiếp trên trang. Khai báo trong phần head. Được định nghĩa bên trong phần tử nằm trong vùng của trang. Được sử dụng nếu ta muốn áp dụng style cho tất cả các phần tử trong nội bộ của một trang. Được sử dụng nếu một trang HTML có một style riêng biệt duy nhất. 58
  58. Cú pháp Gõ code css + Cách 2: Khai báo ngoại tuyến: Tạo file css ở bên ngoài, nhúng vào thông qua thẻ link Cú pháp: Thuộc tính: - rel: Quy định kiểu file sẽ nhúng vào trang web. - stylesheet là kiểu file css. - type = “text/css”: Nó sẽ hiểu là chúng ta nhúng file css. - href: Đường dẫn của file css. + Cách 3: Khai báo trực tiếp trên thẻ HTML Được định nghĩa bên trong thuộc tính style của phần tử. Inline style được dùng để áp dụng một style duy nhất cho phần tử đơn. 2.2 Quy tắc stylesheet Giống như HTML, CSS không thực sự là một ngôn ngữ lập trình. Nó không phải là một ngôn ngữ đánh dấu - đó là một ngôn ngữ định kiểu. Điều này có nghĩa là nó cho phép bạn áp dụng kiểu có chọn lọc cho các phần tử trong tài liệu HTML. Ví dụ: để chọn tất cả các phần tử đoạn trên trang HTML và chuyển văn bản trong đó màu đỏ, bạn sẽ viết CSS này: Chúng ta hãy kiểm tra nó: dán ba dòng CSS này vào một tập tin trong chương trình hiệu chỉnh văn bản của bạn, sau đó lưu tập tin với tên là style.css trong thư mục styles của bạn. Nhưng chúng ta vẫn cần nhúng CSS vào tài liệu HTML của bạn. Nếu không, các định dạng CSS sẽ không ảnh hưởng đến các trình duyệt của bạn hiển thị tài liệu HTML. (Nếu bạn không tiếp tục theo dõi dự án của chúng tôi, hãy đọc Dealing with files và HTML basics để tìm thấy những điều bạn cần làm trước tiên.) 3. Các selector trong style sheet 3.1. Selector đơn Độ ưu tiên trong CSS Vậy css có vai trò gì đối với thẻ HTML? Làm thay đổi thuộc tính của thẻ HTML trên trang web. Trong css có ba cách khai báo thì sẽ có độ ưu tiên như thế nào? Cách nào có độ ưu tiên cao hơn? Độ ưu tiên trong css: 59
  59. - Khai báo trực tiếpÒ Nội tuyến Ò Bên ngoài (Cái nào định nghĩa cuối cùng sẽ được lấy cái đó vì trình duyệt sẽ nhận từ trên xuống dưới). - important: Có độ ưu tiên cao nhất. - Tên thẻ có thuộc tính id có độ ưu tiên hơn tên thẻ có thuộc tính class. (class ký hiệu là dấu .tên thẻ còn id là dấu #tên thẻ) Ví dụ H1{ Color: yellow !important; } Nó sẽ nhận thuộc tính important có độ ưu tiên cao nhất, không quan tâm đến những định nghĩa bên trong hoặc trực tiếp ở thẻ. 3.2. Selector ngữ cảnh Cascading Selectors ( bộ chọn ngữ cảnh): chữ Cascading nằm trong 3 chữ viết tắt CSS không, điều này chứng tỏ Cascading Selectors cũng rất rất quan trọng và nó giảm tối đa thời gian code cho những người viết HTML/CSS. 〈 Cascading Selectors thì dùng dấu space trong bàn phím để phân cách 2 phần tử mà các bạn muốn viết mã và nếu đọc từ phải qua sẽ là phần tử bên phải nằm trong phần tử bên trái, đọc từ trái qua thì là phần tử bên trái nằm ngoài phần tử bên phải. 4. Kết hợp liên kết và chèn một style sheet vào tài liệu HTML Các loại bộ chọn (selector) Bộ chọn (selector) là nơi định nghĩa các qui luật kiểu dáng để áp dụng cho các thành phần trên trang Web. 4.1. Phần tử style Định nghĩa bộ chọn HTML (HTML seclector): Trên trangcó rất nhiều thẻ html khác nhau, muốn dùng css để thay đổi thuộc tính cho một thẻ html bất kỳ chúng ta cần phải gọi đến tên thẻ hoặc gọi đến thẻ đó bằng một khái niệm gọi là selector. 4.2. Thuộc tính style Định nghĩa: tên kiểu sáng bổ sung cho các thẻ HTML { } Áp dụng: tự động áp dụng quy luật css trong phần khai bóa cho tát cả các thẻ có tên là Ví dụ Span { Color: red; Border: 1px solid brown; Background:yellow; } Trước dấu ngoặc nhọn gọi là selector Một số loại selector: - Tên thẻ - Thuộc tính của thẻ - Class (ký hiệu của class là dấu chấm (.). - ID (ký hiệu của ID trong css là dấu #). 5. Thiết lập thuộc tính trong stylesheet Cú pháp chung khi định nghĩa css cho 1 thẻ HTML selector { cssAttributeName: value; 60
  60. cssAttributeName: value; cssAttributeName: value; } 6. Các thuộc tính cơ bản trong CSS 6.1 Thuộc tính background - Thu gọn background: color | image | repeat | position | attachment - Chi tiết background-color: Mã màu; background-image: url(đường dẫn ảnh) background-repeat: no-repeat | repeat-x | repeat-y background-position: ?px | left | right | top | bottom | center background-attachment: scroll, no-scroll background-size: cover | contain | reset Ví dụ: 6.2 Thuộc tính border Thuộc tính border được dùng để định dạng đường viền cho thành phần. Cấu trúc: tag { Thuộc tính: giá trị; } Với thuộc tính và giá trị như sau: Thuộc tính giá trị Ví dụ Mô tả Thuộc tính định dạng border-color: mã màu #ff0000; Xác định màu sắc của đường border-color tên màu border-color: red; viền. Giá trị rgb border-color: rgb(255,0,0); border-style: Xác định hình dạng của đường border-style kiểu border solid; viền. px thin border-width border-width: 5px; Xác định bề dày của đường viền. medium thick Thuộc tính vị trí Một hoặc nhiều giá trị border-top: border-top của các Xác định đường viền bên trên. #ff0000 solid 2px; thuộc tính định dạng. Một hoặc border-right: border-right nhiều giá trị Xác định đường viền bên phải. #ff0000 solid 2px; của các 61
  61. thuộc tính định dạng. Một hoặc nhiều giá trị border- border-bottom: của các Xác định đường viền bên dưới. bottom #ff0000 solid 2px; thuộc tính định dạng. Một hoặc nhiều giá trị border-left: border-left của các Xác định đường viền bên trái. #ff0000 solid 2px; thuộc tính định dạng. Một hoặc nhiều giá trị border: #ff0000 Xác định tất cả các đường viền border của các solid 2px; xung quanh. thuộc tính định dạng. Kết hợp giữa thuộc tính vị trí và thuộc tính định dạng border-top-color: #ff0000; mã màu border-top- border-top-color: Xác định màu sắc cho đường tên màu color red; viền bên trên. Giá trị rgb border-top-color: rgb(255,0,0); border-top- border-top-style: Xác định hình dạng cho đường kiểu border style solid; viền bên trên. px border-top- thin border-top-width: Xác định bề dày cho đường viền width medium 5px; bên trên. thick border-right-color: #ff0000; mã màu border-right- border-right-color: Xác định màu sắc cho đường tên màu color red; viền bên phải. Giá trị rgb border-right-color: rgb(255,0,0); border-right- border right- Xác định hình dạng cho đường kiểu border style style: solid; viền bên phải. px border-right- thin border-right- Xác định bề dày cho đường viền width medium width: 5px; bên phải. thick border- mã màu border-bottom- Xác định màu sắc cho đường 62
  62. bottom-color tên màu color: #ff0000; viền bên dưới. Giá trị rgb border-bottom- color: red; border-bottom- color: rgb(255,0,0); border- border-bottom- Xác định hình dạng cho đường kiểu border bottom-style style: solid; viền bên dưới. px border- thin border-bottom- Xác định bề dày cho đường viền bottom- medium width: 5px; bên dưới. width thick border-left-color: #ff0000; mã màu border-left- border-left-color: Xác định màu sắc cho đường tên màu color red; viền bên trái. Giá trị rgb border-left-color: rgb(255,0,0); border-left- border-left-style: Xác định hình dạng cho đường kiểu border style solid; viền bên trái. px border-left- thin border-left-width: Xác định bề dày cho đường viền width medium 5px; bên trái. thick border-color: mã màu #ff0000; Xác định màu sắc cho tất cả các border-color tên màu border-color: red; đường viền xung quanh. Giá trị rgb border-color: rgb(255,0,0); border-style: Xác định hình dạng cho tất cả các border-style kiểu border solid; đường viền xung quanh. px thin Xác định chiều rộng cho tất cả border-width border-width: 5px; medium các đường viền xung quanh. thick Kiểu cho border: giá trị Ví dụ Mô tả Hiển thị Xác định thành phần sẽ không có Đường viền none border: none; đường viền. hiển thị border: Giống như giá trị none, nhưng được Đường viền hidden hidden; dùng cho table. hiển thị border: Xác định đường viền cho thành phần Đường viền dotted dotted; là dấu chấm (dotted). hiển thị 63
  63. border: Xác định đường viền cho thành phần Đường viền dashed dashed; là gạch ngang (dashed). hiển thị Xác định đường viền cho thành phần Đường viền solid border: solid; là đường thẳng nét (solid). hiển thị border: Xác định đường viền cho thành phần Đường viền double double; là 2 đường thẳng nét (double). hiển thị border: Xác định đường viền cho thành phần Đường viền groove groove; là đường rãnh (groove). hiển thị Xác định đường viền cho thành phần Đường viền ridge border: ridge; là đường chóp (ridge). hiển thị Xác định đường viền cho thành phần Đường viền inset border: inset; là đường bóng bên trong (inset). hiển thị border: Xác định đường viền cho thành phần Đường viền outset outset; là đường bóng bên ngoài (outset). hiển thị Xác định thừa hưởng thuộc tính từ border: Đường viền inherit thành phần cha (thành phần bao inherit; hiển thị ngoài). Ví dụ: css border p.one { border: groove; border-color: yellow; border-width: 6px; margin-top: 40px; } p.two{ border: dashed; border-color: red; border-radius: 5px; } p.three{ border: double; border-color: blueviolet; border-width: 9px; } 64
  64. Ví dụ mô tả các kiểu đường viền Đoạn 1 Đoạn 2 Đoạn 3 Hiển thị trang web: Viết tắt border: width type color; (Áp dụng cho 4 cạnh) width: Độ dầy của đường viền type: kiểu đường viền + solid + dashed + dotted + none color: Màu đường viền border-top: width type color; border-bottom: width type color; border-left: width type color;; border-right: width type color; border-color: value; boder-width: ?px; border-radius: ?px; (Bo viền cho cả 4 cạnh) 6.3 Các thuộc tính CSS dành cho text (văn bản) - text-align: left | right | center; (Canh lề nội dung) - text-indent: ?px | ?em || ?rem; (Thụt đầu dòng) - text-transform: uppercase | lowercase; Chuyển đổi kiểu font chứ - font-size: ?px | ?em | ?rem | % (Cỡ chữ) - color: #mã_màu (màu chữ) - line-height: ?px | ?em | ?rem (khoảng cách giữa các dòng) - font-family: Kiểu font (Qui định kiểu font) - font-weight: bold | number | Normal: Độ rộng font chứ - font-style: italic, : Kiểu chữ - letter-spacing: ?px | ?em | ?rem: Khoảng các các chữ. Ví dụ: 65
  65. Thuộc tính text body { background-color: lightblue; } h3{ color: black; } p { font-family: Arial, Helvetica, sans-serif; font-size: 18px; font-weight: 600; } HÀNG VẠN NGƯỜI "CHÔN CHÂN" DƯỚI GIÁ LẠNH 10 ĐỘ C TẠI HÀ NỘI Sáng ngày 8/1, nhiều tuyến đường tại khu vực quận Cầu Giấy, Nam Từ Liêm ( Hà Nội) xảy ra tình trạng ùn tắc cục bộ nhiều giờ đồng hồ, hàng nghìn phương tiện nhí ch từng mét một. 6.4. Thuộc tính width, height, margin, padding - width: ?px | % | rhv;Quy định độ rộng của thẻ. - height: ?px | %;Quy định chiều cao. - max-width: ?px | %;Qui định độ rộng tối đa của thẻ. - min-width: ?px | % ; Qui định độ rộng tối thiểu của thẻ. - max-height: ?px | %; Quy định độ cao tối đa của thẻ. - min-height: ?px | %; Quy định độ cao tối thiểu của thẻ. Ví dụ: Lưu file width height css.html width height in css div{ background: red;/* Màu nền */ height: 500px; /* Chiều cao thẻ div */ width: 500px; /* Độ rộng thẻ div */ color: white; /* Màu chữ */ text-align: center; /* Chữ căn giữa */ line-height: 500px; /* Chữ ở giữa ô*/ max-width: 300px; /* Chiều cao lớn nhất nó sẽ ưu tiên nhận chiều cao lớn nhất */ max-height: 300px; /* Chiều rộng lớn nhất*/ 66
  66. } Học CSS thẻ độ rộng và chiều cao Sự giống nhau và khác nhau giữa margin và padding là gì? Margin và padding dùng để làm gì? * Margin:Tạo khoảng cách với những thẻ HTML nằm ở ngoài. - Cách viết ngắn gọn margin: top right bottom left (Đơn vị: ?px | %); Quy định khoảng cách trên, phải, dưới, trái với các thẻ bên ngoài nó. - margin: ?px ?px (top/bottom - left/right) - margin-top: ?px; Quy định khoảng cách trên. - margin-bottom: ?px; Quy định khoảng cách dưới. - margin-right: ?px; Quy định khoảng cách phải bên ngoài với thẻ. - margin-left: ?px; Quy định khoảng các bên phải với thẻ ngoài nó. Cú pháp: tag { margin: giá trị;} Với giá trị như sau: huộc tính giá trị Ví dụ Mô tả đơn vị Đây là cách viết ngắn gọn các thuộc margin: 5px 10px 3px margin auto tính bên dưới, đơn vị có thể là px, em, 20px; inherit %, đơn vị Canh lề bên trên cho thành phần, đơn margin-top auto margin-top: 5px; vị có thể là px, em, %, inherit đơn vị margin- Canh lề bên phải cho thành phần, đơn auto margin-right: 5px; right vị có thể là px, em, %, inherit 67
  67. đơn vị margin- Canh lề bên dưới cho thành phần, đơn auto margin-bottom: 5px; bottom vị có thể là px, em, %, inherit đơn vị Canh lề bên trái cho thành phần, đơn margin-left auto margin-left: 5px; vị có thể là px, em, %, inherit Cách sử dụng thuộc tính margin: Thuộc Thành Thể hiện Ví dụ Mô tả tính phần margin-top: 5px; margin-right: 10px; 4 thành top right bottom margin: 5px 10px margin-bottom: phần left 3px 20px; 3px; margin-left: 20px; margin-top: 5px; margin-right: 10px; 3 thành top (right left) margin: 5px 10px margin-left: 10px; phần bottom 15px; margin-bottom: 15px; margin margin-top: 5px; margin-bottom: 2 thành (top bottom) margin: 5px 10px; 5px; phần (right left) margin-right: 10px; margin-left: 10px; margin-top: 10px; margin-right: 10px; 1 thành (top right bottom margin: 10px; margin-bottom: phần left) 10px; margin-left: 10px; Ví dụ: margin p{ border: 1px solid black; margin-top: 100px; margin-bottom: 100px; margin-right: 150px; margin-left: 80px; background-color:chartreuse; } 68
  68. Ví dụ về sử dụng margin căn lề Tạo khoảng cách với những thẻ HTML nằm ở ngoài nó margin Các thuộc tính của margin Hiển thị web: * Padding:Tạo khoảng cách với những nội dung bên trong nó. - padding: top right bottom left (Đơn vị: ?px | %) - padding: ?px ?px (top/bottom - left/right) - padding-top: ?px - padding-bottom: ?px - padding-right: ?px - padding-left: ?px Chú ý: Khi sử dụng margin hoặc padding sẽ làm kích thước của thẻ tăng lên Ví dụ Tạo file: padding css.html padding p{ border: 1px solid black;// viền có độ dày 1px, kiểu viền solid padding: 100px; padding-bottom: 100px; padding-right: 150px; padding-left: 80px; background-color:chartreuse;// màu nền } Ví dụ về sử dụng padding căn lề 69
  69. Tạo khoảng cách với những thẻ HTML nằm ở trong nó padding Các thuộc tính của margin Hiển thị trên web: Ví dụ 2: Tạo file margin padding.html Định dạng css để được buttons giống mẫu: màu button là màu xanh, cỡ chữ: 16px, font chữ 'Times New Roman', Times, serif,chữ màu trắng, có con trỏ chuột hình bàn tay. Hướng dẫn code Border width height .button { background-color: green; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; font-size: 16px; font-family: 'Times New Roman', Times, serif; margin: 4px 2px; /* Con trỏ chuột có hình bàn tay */ cursor: pointer; } 70
  70. CSS Buttons Default Button 8. Float / Clear - Khi sử dụng float, bắt buộc phải sử dụng width cố định (responsive khó). Float làm cho thẻ ngay sau nó tràn lên mà không quan tâm thuộc tính block hay inline. Float: Left; Float: Left; Float: Left; Float: Left; Sử dụng thuộc tính này để dựng giao diện, có khối nằm ngang, nằm dọc nằm trên nhau trong một trang web. Tràn lên theo hướng trái hoặc phải phụ thuộc vào hướng của float. Khi sử dụng float thì những thẻ ngay sau nó sẽ tràn lên, nếu không muốn tràn lên chẳng hạn như thẻ màu vàng không muốn tràn lên ta sử dụng clear: left| right cùng với thuộc tính thẻ float. - float: left | right; - clear: left | right | both;Không muốn tràn về bên trái dùng left, không muốn tràn bên phải dùng right. Khái niệm về float Mặc định hiển thị là thứ tự từ trên xuống dưới mà khi làm giao diện cái nằm trên, nằm dưới trang báo. Float:left|right có hai loại left và right. Khi là float chỉ nên chọn left hoặc right để không bị vỡ giao diện. Ví dụ: Lưu file float.html Float.html Style.css #left { left width: 100px; center height: 80px; right background-color: blueviolet; float:left; Kết quả chạy } #center { width: 100px; height: 80px; background-color:yellow; float:left; } #right { 71
  71. width: 100px; height: 80px; background-color: green; float:left; } Thuộc tính clear được dùng để xóa thuộc tính float. Nếu chúng ta gặp trường hợp bị thuộc tính float ảnh hưởng và muốn xóa thuộc tính này thì ta dùng thuộc tính clear như sau: Xóa float: left; dùng clear: left; Xóa float: right; dùng clear: right; Ví dụ: 1 2 Style.css div{ Muốn tách khối 1 và hai trên mỗi khối một dòng và khối màu xanh vẫn nằm ở bên phải ta dùng float: right; thêm thuộc tính height: 100px; clear: both; ở thẻ section. width: 100px; background-color: green; } section{ height: 200px; background-color: yellow; } Ví dụ: img { float: right; cursor: pointer; } body{ 72
  72. font-size: 18px; } Float Right Phát hiện xe chở đầy bom và súng gần quốc hội Mỹ ngày xảy ra bạo loạn. Các công tố viên liên bang Mỹ cho biết, một người đàn ông có tên Lonnie Leroy Co ffman đến từ bang Alabama bị cáo buộc đã đậu một chiếc xe bán tải với 11 quả bom tự chế, một súng trường và một súng ngắn gần trụ sở quốc hội Mỹ ở thủ đô Washington DC sáng 6/1, ngày xảy ra biểu tình bạo loạn ngăn quốc hội xác nhận kết quả bầu cử. M ột đội rà bom đã phát hiện ra chiếc xe khi dò tìm quanh khu vực vài giờ sau đó.Coffman khai với cảnh sát rằng, ô ng ta có những chiếc lọ chứa đầy "xốp nung chảy và xăng". Theo các nhà điều tra, hỗn hợp này nếu phát nổ sẽ có sức công phá như bom napalm. Hiển thị trên web: 9. position & z-index: Sử dụng nhiều khi làm menu Position có ý nghĩa như thế nào trong css? Position có chức năng định vị thẻ đó trong một trang hoặc định vị trong thẻ nào đó nhưng nó không làm thay đổi vị trí ngay mà nó phải kết hợp với thuộc tính khác. - position: relative | absolute | static | fixed Trong đó: - Đi kèm với Position là những thuộc tính để quy định khoảng cách của nó với đường viền của trình duyệt hoặc khoảng cách của nó với viền của thẻ bao nó.: left: ?px; right: ?px; bottom: ?px; top: ?px; Ví dụ: 73
  73. Position in css div{ position: absolute; left: 100px; top:0px; border: 2px solid orange; } Học lập trình web HỌC LẬP TRÌNH WEB Hiển thị web: Khi đưa position: absolute;trong thẻ div thì tính chất của thẻ thay đổi từ block sang thẻ inline và định vị với trình duyệt cách left:100px; top: 0px; thì nó sẽ phá vỡ quy luật của css thẻ nào khai báo trước được hiện thị trước mà nó sẽ hiển thị theo định vị left, top, right, bottom. position: relative; thì tính chất của thẻ không thay đổi.Khi dùng thuộc tính position: absolute|fixed; nó sẽ phá vỡ trật tự của html. Ứng dụng thay đổi vị trí thẻ trên trang và vị trí của thẻ là cố định ví dụ như phần chat cố định bên phải khi mở trang web, hoặc làm menu. - z-index: number; (Chỉ sử dụng được khi có position) Chú ý: Thẻ nào có z-index cao hơn, thẻ đó nằm ở trên Ví dụ: Đặt 3 thẻ div hiển thị như hình mẫu 74
  74. z-index in css div{ width: 100px; height: 100px; background: red; } .two{ background: yellowgreen; } .three{ background: green; } 10. hover trong css “:hover” chọn các liên kết được hover (di chuyển chuột lên thành phần). Cấu trúc a:hover { 75
  75. property : value; } Ví dụ: HTMl viết Hiển thị trình duyệt khi chưa có css CSS VIẾT Hiển thị trình duyệt có css a:hover { background: #ff0000; color: #fff; } Hover qua link sẽ thấy hiệu ứng khung chữ có màu đỏ. 11. opacity vs visibility & display - Làm mờ, ẩn đi + opacity: 0.1 -> 0.9 or 1 0.1 -> 0.9 : Độ mờ của thẻ đó 1: Hiển thị hoàn toàn 12. before & after & ::first-line in css Ví dụ ở page7 BÀI TẬP THỰC HÀNH Bài 1: Dựng menu ngang cấp 1 Hướng dẫn code Dung menu ngang /* menu */ nav{ 76
  76. background: #57a929; height: 45px; } nav ul { list-style-type: none; align-items: center; display: flex; line-height: 45px; justify-content: space-around; /* cách đều nhau giữa các thẻ li */ } nav ul li a{ text-decoration: none; color: white; } Bài 2: Dựng menu ngang cấp 1 theo mẫu: Gồm có Trang chủ, Giới thiệu, Bản đồ, Liên Hệ, Sản Phẩm. Bài 3: Dựng menu đa cấp: 77
  77. Hướng dẫn code VD Menu da cap *{ margin: 0px; padding: 0px; } body{ font-family: 'Times New Roman', Times, serif; font-size: 16px; font-weight: 300; } #menu{ width: 1200px; height: 40px; background: green; /* căn menu ra giữa trình duyệt */ margin: 0px auto; margin-top: 50px; } ul.root > li{ list-style-type: none; /* các menu nằm trên một hàng */ float:left; position: relative; } ul.root > li > a{ /* bỏ gạch chân ở thẻ a */ text-decoration: none; color: black; line-height: 40px; padding: 0px 12px 0px 12px; display: block; } ul.root > li > a:hover{ background: yellow; color: red; } ul.submenu{ width: 180px; background: gray; 78
  78. display: none; position: absolute; } ul.submenu li { list-style: none; } ul.submenu li a{ text-decoration: none; color: white; display: block; border: 1px solid #cccccc; line-height: 40px; text-indent: 10px; } /* click vào mới hiển thị */ ul.root >li:hover ul.submenu{ display: block; } ul.submenu li a:hover{ background: yellow; color: red; } 79
  79. Bài 4 Tạo file login css.html theo mẫu: Hiệu ứng khi tích chuột vào Username và password thì khung rộng 280px, và màu viền đổi thành màu: #2ecc71 Hiệu ứng khii tích vào Login màu chuyển màu xanh: #175317 81
  80. form login body{ margin: 0px; padding: 0px; font-family: 'Times New Roman', Times, serif; background: #34495e; } .box{ width: 300px; padding: 40px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: #191919; text-align: center; } .box h1 { color: white; text-transform: uppercase; font-weight: 500; } .box input[type="text"], .box input[type="password"]{ 82
  81. border: 0px; background: none; display: block; margin: 20px auto; text-align: center; border: 2px solid #3498db; padding: 14px 10px; width: 200px; outline: none; color: white; border-radius: 24px; transition: 0.25s; } .box input[type="text"]:focus, .box input[type="password"]:focus{ width: 280px; border-color: #2ecc71; } .box input[type="submit"]{ border: 0px; background: none; display: block; margin: 20px auto; text-align: center; border: 2px solid #175317; padding: 14px 40px; width: 150px; outline: none; color: white; border-radius: 24px; transition: 0.25s; } .box input[type="submit"]:hover { background: #175317; } LOGIN Bài tập 5: Lưu file ĐÓNG GÓP Ý KIẾN.HTML DỰNG FORM ĐÓNG GÓP Ý KIẾN THEO MẪU 83
  82. Yêu cầu: Sử dụng thẻ form, table, input với kiểu dữ liệu text, email, number để thể hiện dữ liệu ô Họ và tên, Địa chỉ, Số điện thoại và Email. Định dạng toàn trang: + Màu nền của trang web màu xanh: ackground-color: burlywood; + Chữ có kích thước 18px; font-family: 'Times New Roman', Times, serif; + Chữ: ĐÓNG GÓP Ý KIẾN VÀ BẢNG CĂN GIỮA - Độ rộng của bảng: 500px, màu nền bảng màu trắng - Độ rộng của ô nhập Họ và Tên, Địa chỉ, Email, và số điện thoại có độ rộng 300px và chiều cao 40px. - Hai ô thực hiện các định dạng sau: + Kiểu dữ liệu button có độ rộng 60px và chiều cao 40px: width: 60px; height: 40px; + Mmàu nền màu xám (gray): background-color: gray; + Nội dung chữ cách viền trên, dưới, trái phải là 10px. Tich chuột vào chon trỏ chuột có hình bàn tay: thuộc tính cursor: pointer; + Font chữ Gửi và xóa có kích thước 16px (font-size: 16px;), độ dày chữ 800: font-weight: 800; + Hiệu ứng khi tích chuột vào ô Gửi và xóa chuyển sang màu xanh (background- color: lightseagreen) và độ rộng thay đổi 80px và đường bo viền 5px(width: 80px; border-radius: 5px;) Gợi ý code: 84
  83. Đóng góp ý kiến body{ font-family: 'Times New Roman', Times, serif; font-size: 18px; background-color: burlywood; } table, td, tr{ /* border: 1px solid grey; */ margin-top: 10%; background-color: honeydew; width: 500px; } /* input[type=emai], input[type=text], input[type=number]{ width: 300px; height: 40px; } */ /* cách 2: đặt tên những input có chung đặc điểm một tên class */ .Noidung{ width: 300px; height: 40px; } input[type=submit], input[type=reset]{ width: 60px; height: 40px; background-color: gray; padding: 10px 10px 10px 10px; /* tích chuột vào ô gửi và xóa có hình bàn tay */ cursor: pointer; font-size: 16px; font-weight: 800; } input[type=submit]:hover, input[type=reset]:hover{ background-color: lightseagreen; width: 80px; border-radius: 5px; } 85
  84. ĐÓNG GÓP Ý KIẾN Họ và tên* Địa chỉ Số điện thoại* Email Nội dung góp ý Bài 6: Tạo form Đăng nhập theo mẫu và Lưu file: ĐĂNG NHẬP.HTML 86
  85. Yêu cầu: - Đổi tên tiêu đề ĐĂNG NHẬP - Sử dụng thẻ form, input kiểu dữ liệu là text và dạng mật khẩu (password), để hiển thị nội dung Tên của bạn và Mật khẩu của bạn (dùng thuộc tính placeholder). - Ô đăng nhập sử dụng thẻ button hoặc thẻ input kiểu dữ liệu button. Định dạng - Chữ Đăng nhập: căn giữa và thẻ h2 và chữ Đăng nhập cách lề dưới 30px - Màu nền trang web: skyblue, font chữ time new roman. - form đăng nhập: + Độ rộng 450px, màu nền trong khung form màu trắng, đường viền 1px kiểu viền solid viền màu xám nhẹ silver - Định dạng dữ liệu nhập input + Độ rộng 400px, chiều cao 35px, cách lề dưới 10px và có đường bo viền 10px, nội dung chữ trong ô cách viền 5px. - Định dạng nút button: + Độ rộng 412px và chiều cao 40px, màu nền skyblue, không viền, kích thước font chữ 18, độ dày font chữ 700 và chữ Đăng nhập màu trắng. Hướng dẫn code: 87