BÀI TẬP NHÓM - LAB 2

Lab 2_ GV: Nguyễn Thành Thủy Nhóm 10 BÀI TẬP NHÓM - LAB 2 GVHD: Nguyễn Thành Thủy Danh sách nhóm: 1. Lê Thị Thu Thủy 2. Nguyễn Thị Bích Thủy 3. Phạm Thị Bích Ngọc 4. Trần Thị Ly Ly 5. Nguyễn Thị Thảo 6. Dương Viết Hùng 1 Lab 2_ GV: Nguyễn Thành Thủy Nhóm 10 MỤC LỤC 2 Lab 2_ GV: Nguyễn Thành Thủy Nhóm 10 I: Giới thiệu về HTML ( HTML introduction ) 1.HTML là gì ?  HTML là 1 ngôn ngữ dùng để mô tả về các trang web  HTML là viết tắt của Hyper Text Markup Lnaguage  Một ngôn ngữ đánh dấu là 1 bộ tag các thẻ đánh dấu  HTML sử dụng thẻ đánh dấu để mô tả các trang web 2.HTML tags : Thẻ đánh dấu HTML thường được gọi là thẻ HTML  Các thẻ HTML là các từ khóa được bao quanh bởi các dấu ngoặc vuông góc như < html >  Thẻ HTML thường đi theo các cặp từ như <b> và <b>  Các thẻ đầu tiên trong cặp là thẻ bắt đầu , thẻ thứ nhì là thẻ kết thúc .  Thẻ bắt đầu và thẻ kết thúc còn gọi là thẻ mở và thẻ đóng . 3.Một văn bản HTML = 1 trang web :  Văn bản HTML mô tả các trang web  Văn bản HTML chứa các thẻ HTML và các văn bản thuần túy  Các văn bản HTML còn được gọi là các trang web Mục đích của 1 trình duyệt web ( IE hay firefox ) là để đọc văn bản HTML và hiển thị chúng như là các trang web . Các trình duyệt không hiển thị các thẻ HTML nhưng sử dụng các thẻ để giải thích nội dung của trang web . <html> <body> <h1>Nhóm 10 </ h1> <p> Nhóm 10</ p> </ body> </ html> • Ví dụ:  Các văn bản ở giữa < html > và <html/ > mô tả các trang web  Các văn bản giữa <body > và < body > là nội dung hiển thị của trang web  Các văn bản giữa < h1 > và </h1 > sẽ được hiển thị như tiêu đề  Các văn bản giữa < p> và <p/> sẽ được hiển thị như 1 paragraph 3 Lab 2_ GV: Nguyễn Thành Thủy Nhóm 10 II : Cơ bản về HTML (HTML Basic) Đừng lo lắng nếu các ví dụ sử dụng các tab mà bạn chưa được học . Bạn sẽ được tìm hiểu về chúng trong các chương tiếp theo . • HTML heading : Nhóm HTML được định nghĩa với các tag <h1> to <h6> Ví dụ : • HTML paragraphs : - HTML paragraphs được định nghĩa với tag <p> Ví dụ : 4 Lab 2_ GV: Nguyễn Thành Thủy Nhóm 10 • Liên kết HTML : Liên kết HTML được định nghĩa bằng tag < a> Ví dụ : Lưu ý : Các địa chỉ lien kết này được cung cấp như là 1 thuộc tính ( bạn sẽ được học về các thuộc tính này trong 1 phần khác của hướng dẫn này ) • HTML images HTML images được định nghĩa với tag < img > Ví dụ : 5 Lab 2_ GV: Nguyễn Thành Thủy Nhóm 10 Lưu ý : tên gọi và kích thước của hình ảnh được cung cấp như các thuộc tính ( bạn sẽ tìm hiểu các thuộc tính trong 1 chương khác của tài liệu này ) III.Các thành phần của HTML ( HTML elements ) Văn bản HTML được định nghĩa bởi HTML elements Một HTML element là bao gồm tất cả mọi thứ từ thẻ bắt đầu đến thẻ kết thúc : Start tag * Element content End tag * <p> This is a paragraph </p> < a herf = “default.htm”> This is a link </a> <br/> Các thẻ bắt đầu được gọi là thẻ mở còn các thẻ kết thúc được gọi là thẻ đóng . • Cú pháp HTML element :  1 thành phần của HTML bắt đầu với 1 thẻ bắt đầu  1 thành phần của HTML kết thúc bằng 1 thẻ kết thúc  Các nội dung của phần tử là tất cả mọi thứ ở giữa thẻ mở và thẻ đóng  Một số thành phần của HTML có nội dung trống  Phần tử rỗng được đóng trong các tag bắt đầu  Hầu hết các thành phần của HTML đều có thuộc tính ( Bạn sẽ tìm hiểu các thuộc tính của các thành phần này trong các mục tiếp theo ) • Lồng ghép HTML element : Hầu hết các thành phần của HTML có thể được lồng vào nhau ( có thể chứa các thành phần của HTML) Văn bản HTML bao gồm các thành phần HTML lồng vào nhau - Ví dụ văn bản HTML : 6 Lab 2_ GV: Nguyễn Thành Thủy Nhóm 10 Ở ví dụ trên có 3 thành phần của HTML Giải thích ví dụ HTML - Các thành phần <p> bao gồm : <p>Nhóm 10 ^^</p> - Các element <p> xác định 1 đoạn trong tài liệu HTML . Yếu tố này có thẻ bắt đầu <p> và thẻ kết thúc <p/> . Với nội dung là “Nhóm 10 ^^“ - Thành phần < body > bao gồm : <body> <p>Nhóm 10^^</p> </body> - Các body element xác định phần thân của các tài liệu HTML . Thành phần này có thẻ bắt đầu là < body> và thẻ kết thúc là < body/> - Thành phần < html> bao gồm : <html> <body> <p>Nhóm 10 ^^</</p> </body> </html > - Các element <html > xác định nội dung cả HTML . Yếu tố này có thể bắt đầu là <html > và thẻ kết thúc là <html/>  Hầu hết các trình duyệt HTML sẽ hiển thị 1 cách chính xác , ngày cả nếu bạn quên cả thẻ kết thúc . Tuy nhiên , quên thể kết thúc sẽ có thể tạo ra các kết quả không mong muốn hoặc sai sót . Và trong tương lai các phiên bản của HTML sẽ không cho phép bạn bỏ qua thể kết thúc . 7 Lab 2_ GV: Nguyễn Thành Thủy Nhóm 10  Các thành phần HTML mà không có nội dung gọi là các thành phần rỗng . Các thành phần này có thể được đóng trong tag bắt đầu . IV.HTML Attributes Những thuộc tính cung cấp thông tin bổ sung về HTML element • HTML Attributes  HTML element có thể có những thuộc tính  Những thuộc tính cung cấp thông tin bổ sung về HTML element  Thuộc tính luôn luôn được xác định trong thẻ bắt đầu  Thuộc tính là cặp giá trị name/value như name="value" Ví dụ : • Dấu nháy đôi chứa giá trị của thuộc tính  Những giá trị bao giờ cũng ở trong dấu nháy đôi  Phổ biến là cách sử dụng cặp dấu nháy đôi, nhưng dấu nháy đơn cũng được sử dụng  Trong một số trường hợp, nếu văn bản hay nội dung có chứa dấu nháy đôi thì ta sử dụng dấu nháy đơn. Ví dụ: name='John "ShotGun" Nelson' • Lời khuyên: Sử dụng kí tự thường cho thuộc tính  Tên thuộc tính và giá trị thuộc tính không phân biệt chữ hoa và chữ thường.  Tuy nhiên, Tập đoàn mạng toàn cầu ( W3C) khuyến cáo sử dụng chữ thương cho giá trị của thuộc tínhvà tên thuộc tính 8 Lab 2_ GV: Nguyễn Thành Thủy Nhóm 10  Những phiên bản mới hơn Của ( X)HTML sẽ yêu cầu thuộc tính được viết bằng chữ thường. • Thuộc tính tham chiếu của HTML Dưới đây là danh sách một số thuộc tính được tiêu chuẩn cho hầu hết các phần tử HTML: thuộc tính Giá Trị Mô Tả Class Class_rule hay style_rule Lớp của element ID Tên đối tượng Một id duy nhất cho các phần tử Style định nghĩa kiểu Địng nghĩa kiểu Title Chú giải văn bản Hiển thị văn vẳn chú thích V.HTML Headings Tiêu đề rất quan trọng trong tài liệu HTML. • HTML Headings Tiêu đề được định nghĩa từ thể <h1> đến <h6>. Thẻ <h1> hiện thị kích thước chữ lớn nhất ngược lại với thẻ <h6> • Sự quan trọng của tiêu đề  Sử dụng HTML Headings cho các tiêu đề mà thôi. Không sử dụng HTML Headings để làm cho văn bản lớn hoặc đậm.  Được sử dụng để hiện thi cấu trúc và nội dung của trang wed  Người dùng sử dụng tiêu đề để hiểu nội dung của trang wed.  Tiêu đề chính dùng với thể <h1> và giảm dần đến <h6> • HTML rule Thẻ <hr /> được sử dụng để hiển thị một thanh ngang 9 Lab 2_ GV: Nguyễn Thành Thủy Nhóm 10 • Chú thích trong HTML : Chú thích được chèn vào trong mã HTML để người lập trình có thể tường minh mã.Nó không được hiện thị trên trình duyệt. Ví dụ : Lưu ý: Có một dấu chấm than sau dấu < và >, nhưng thẻ này không có thẻ đóng 10 [...]... dưới đây là một danh sách đầy đủ các tên màu được hỗ trợ bởi tất cả các trình duyệt chính Sắp xếp theo tên : 28 Lab 2_ GV: Nguyễn Thành Thủy Nhóm 10 29 Lab 2_ GV: Nguyễn Thành Thủy Nhóm 10 30 Lab 2_ GV: Nguyễn Thành Thủy • Nhóm 10 HTML và CSS của W3C tiêu chuẩn đã liệt kê chỉ có 16 tên màu hợp lệ: - Aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and... yellow Nếu bạn muốn hợp lệ CSS HTML hoặc sử dụng các giá trị HEX thay thế Những giá trị màu trong HTML Sắp xếp theo giá trị của hệ thập lục phân 31 Lab 2_ GV: Nguyễn Thành Thủy Nhóm 10 32 Lab 2_ GV: Nguyễn Thành Thủy Nhóm 10 33 Lab 2_ GV: Nguyễn Thành Thủy Nhóm 10 Lưu ý: Các tên ở trên không phải là một phần của tiêu chuẩn web của W3C HTML và CSS của W3C tiêu chuẩn đã liệt kê chỉ có 16 tên màu hợp lệ:... khi mà máy tính có thể hiển thị tối đa 25 6 màu khác nhau, một danh sách của 21 6 "màu an toàn cho web" được đưa như màu chuẩn, đặt cho 40 hệ thống màu  21 6 trình duyệt chéo nhau các bảng màu được tạo ra để bảo đảm rằng tất cả các máy tính sẽ hiển thị màu sắc chính xác khi chạy một bảng màu 25 6 27 Lab 2_ GV: Nguyễn Thành Thủy Nhóm 10  Hiện tại điều đó không quan trọng, khi các máy tính bây giờ đã hiển... số, bắt đầu bởi ký hiệu # 25 Lab 2_ GV: Nguyễn Thành Thủy Nhóm 10 Ví dụ: • 16 triệu màu khác nhau  Sự hòa trộn của 3 màu đỏ, xanh dương, xanh lá ứng với các giá trị từ 0 đến 25 5 cho tổng cộng 16 triệu màu khác nhau  Hầu hết các máy tính có thể hiển thị ít nhất 16384 màu khác nhau  Nếu nhìn xuống bảng dưới thì có thể thấy kết quả của các màu khác nhau nếu cho đỏ chạy từ 0 đến 25 5 trong khi giữ nguyên.. .Lab 2_ GV: Nguyễn Thành Thủy Nhóm 10 VI.HTML Paragraphs Đoạn được định nghĩa với thẻ < p > Ghi chú: Trình duyệt sẽ tự thêm thẻ một dòng phía trên và dưới cho đoạn văn bản được định nghĩa bằng thẻ • Đừng quên sử dụng thẻ đóng Đa số những bộ duyệt sẽ trình bày HTML chính xác thậm chí nếu bạn quên dùng thẻ đóng 11 Lab 2_ GV: Nguyễn Thành Thủy Nhóm 10 Ví dụ trên sẽ làm việc... Styles Thuộc tính kiểu là đặc điểm mới trong thuộc tính của HTML 14 Lab 2_ GV: Nguyễn Thành Thủy Nhóm 10 • HTML Style Attribute Mục đích của Style Attribute:  Để cung cấp các kiểu cho tất cả các HTML element  Những kiểu được giới thiệu với HTML 4, như cách mới và được ưu tiên để gọi tên HTML phần tử 15 Lab 2_ GV: Nguyễn Thành Thủy Nhóm 10 • Những nhãn và những thuộc tính không dùng nữa  ở HTML 4,... chọn 23 Lab 2_ GV: Nguyễn Thành Thủy • • Nhóm 10 Lưu ý rằng chỉ có một lựa chọn có thể được chọn Checks Box  Hộp kiểm này được sử dụng khi bạn muốn người dùng lựa chọn một hoặc nhiều tuỳ chọn của một số giới hạn của sự lựa chọn Thuộc tính action của form và nút Submit  Khi người dùng nhấp vào nút submit , nội dung sẽ được gửi đến máy chủ Thuộc tính action sẽ xác định tên của tập tin gửi Các tập tin... purple, red, silver, teal, white, and yellow Nếu bạn muốn hợp lệ CSS HTML hoặc sử dụng các giá trị HEX thay thế 34 Lab 2_ GV: Nguyễn Thành Thủy Nhóm 10 XVI Kết quả màu trong HTML(HTML Colorvalues)  Sắp xếp theo giá trị Hex  Danh sách được sắp xếp theo tên màu sắc: 35 Lab 2_ GV: Nguyễn Thành Thủy Nhóm 10 36 ... trên một trang HTML Một người sử dụng có thể viết văn bản trong một trường văn bản • Trường mật khẩu: Ví dụ này chứng tỏ làm thế nào để tạo ra một trường mật khẩu trên một trang HTML 22 Lab 2_ GV: Nguyễn Thành Thủy • • • Nhóm 10 Form:  Một form là một vùng chứa các yếu tố của form Các thành phần của form là các thành phần cho phép người dùng nhập thông tin (như các lĩnh vực văn bản, các lĩnh vực vùn... chọn đúng màu xám 26 Lab 2_ GV: Nguyễn Thành Thủy • • Nhóm 10 Những tên các màu tiêu chuẩn Mạng  Có 16 màu chuẩn cho bộ mã HTML and CSS:  aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow  nếu muốn dùng màu khác thì phải xài mã hex của màu Màu an toàn cho web ?  Cách đây 1 vài năm khi mà máy tính có thể hiển thị tối đa 25 6 màu khác nhau, . Lab 2_ GV: Nguyễn Thành Thủy Nhóm 10 BÀI TẬP NHÓM - LAB 2 GVHD: Nguyễn Thành Thủy Danh sách nhóm: 1. Lê Thị Thu Thủy 2. Nguyễn Thị Bích Thủy 3. Phạm Thị Bích. Ngọc 4. Trần Thị Ly Ly 5. Nguyễn Thị Thảo 6. Dương Viết Hùng 1 Lab 2_ GV: Nguyễn Thành Thủy Nhóm 10 MỤC LỤC 2 Lab 2_ GV: Nguyễn Thành Thủy Nhóm 10 I: Giới thiệu về HTML ( HTML introduction ) 1.HTML. lồng vào nhau - Ví dụ văn bản HTML : 6 Lab 2_ GV: Nguyễn Thành Thủy Nhóm 10 Ở ví dụ trên có 3 thành phần của HTML Giải thích ví dụ HTML - Các thành phần <p> bao gồm : <p> ;Nhóm 10 ^^</p> -