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

 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 để

Trang 1

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

GVHD: Nguyễn Thành ThủyDanh sách nhóm:

1 Lê Thị Thu Thủy

Trang 2

M C L C ỤC LỤC ỤC LỤC

I: Giới thiệu về HTML ( HTML introduction ) 2

II : Cơ bản về HTML (HTML Basic) 3

III.Các thành phần của HTML ( HTML elements ) 5

IV.HTML Attributes 7

V.HTML Headings 8

VI.HTML Paragraphs 11

VII HTML Text Formatting 12

VIII.HTML Styles 14

IX HTML Link 16

X.HTLM image 17

XI.HTLM tables 18

XII.HTLM lists 20

XIII.HTLM forms 22

XIV.Màu HTML 25

XV.Những tên màu trong HML 28

XVI Kết quả màu trong HTML(HTML Colorvalues) 35

XVII Danh sách nhanh trong HTML(HTML Quick List) 37

Trang 3

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

 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

Trang 6

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:

 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 )

Trang 7

- 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>

Trang 8

 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

Trang 9

 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

 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:

Class Class_rule hay style_rule Lớp của element

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>

Trang 10

 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

Trang 12

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ẻ <p>

 Đừ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

Trang 13

Ví dụ trên sẽ làm việc trong hầu hết các trình duyệt, nhưng việc quên dùng thẻ đóng có thể sản sinh các kết quả không mong muốn hoặc sai sót.

Lưu ý: Tương lai phiên bản của HTML sẽ không cho phép bạn bỏ qua thẻ đóng

Trang 14

 Thẻ định dạng

 HTML sử dụng thẻ như <b> và <i> cho định dạng đầu ra, như chữ in

đậm hoặc nghiêng

 Đó là các thẻ được gọi thẻ định dạng văn bản

Hãy tham khảo cuối trang này cho một tham chiếu đầy đủ

 Các nhãn định dạng văn bảng :

<sup> Định nghĩa văn bản đọc theo siêu kịch bản

<s> không tán thành sử dụng <del> dể thay thế

<strike> không tán thành sử dụng <del> dể thay thế

vào đó

 Thẻ "Computer Output"

Trang 15

<code> Xác mã văn bản máy tính

đánh chữ

<blockquote> Định nghĩa một trích dẫn dài

Trang 16

 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

Trang 17

 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ử

 Những nhãn và những thuộc tính không dùng nữa

 ở HTML 4, một số nhãn và những thuộc tính được định nghĩa như không dùng nữa Nó sẽ không được hỗ trợ trong những phiên bản (của) HTML và XHTML tương lai

 Tránh những sử dụng những nhãn và thuộc tính không dùng nữa

Các thẻ và thuộc tính cần tránh:

<font> and <basefont> Xác định phông chữ HTML

<s> and <strike> Định nghĩa văn bản strikeout

<u> Định nghĩa văn bản gạch chân

Trang 18

 Siêu liên kết, Anchors, liên kết.

 Về trang web, một liên kết là một tài liệu tham khảo (một địa chỉ) đến một nguồn tài nguyên trên web

 Siêu liên kết có thể đến bất kỳ tài nguyên trên web: một trang HTML, hình ảnh, file âm thanh, một bộ phim, vv

 Anchors là một thuật ngữ được sử dụng để xác định một điểm đến siêuliên kết bên trong một tài liệu

 Các phần tử HTML Anchors <a>, được sử dụng để xác định cả hai siêu liên kết và Anchors

 Một HTML LINKS

Cú pháp:

 Các thẻ bắt đầu có chứa các thuộc tính về liên kết

 Nội dung giữa 2 thẻ chứa phần hiển thị

 Thuộc tính HREF

Thuộc tính href định nghĩa "địa chỉ" liên kết

Đây là yếu tố xác định một liên kết đến website W3Schools:

 Các thuộc tính target

Thuộc tính xác định target., nơi các tài liệu liên kết sẽ được mở ra

Đoạn code dưới đây sẽ mở tài liệu trong một cửa sổ trình duyệt mới:

<a href="http://www.w3schools.com/">Visit W3Schools!</a>

<a href="http://www.w3schools.com/"

target="_blank">Visit W3Schools!</a>

Trang 19

 Thẻ <img> và các thuộc tính Src

 Trong HTML, hình ảnh được định nghĩa với thẻ <img>

 Các <img> thẻ trống, có nghĩa là nó chứa các thuộc tính duy nhất và không có thẻ đóng

 Để hiển thị một hình ảnh trên một trang, bạn cần phải sử dụng thuộc tính src Src viết tắt của "source" có nghĩa là nguồn Giá trị của thuộc tính src là URL của hình ảnh bạn muốn hiển thị trên trang của bạn

 Cú pháp của xác định một hình ảnh:

 URL chỉ tới vị trí nơi mà hình ảnh được lưu trữ Một hình ảnh có tên

"boat.gif" nằm trong thư mục "hình ảnh" trên "www.w3schools.com"

Trang 20

 Viền của bảng: Ví dụ này chứng tỏ giáp bảng khác nhau.

 Bảng:

 Bảng được định nghĩa với thẻ <table> Bảng A được chia thành các hàng (với thẻ <tr>), và mỗi hàng được chia thành các thẻ dữ liệu (với

<td> tag) Td chữ viết tắt của " table data", đó là nội dung của một ô

dữ liệu Một ô dữ liệu có thể chứa văn bản, hình ảnh, danh sách, đoạn văn, hình thức, ngang quy tắc, bảng, vv

Trang 22

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

 Một danh sách không có thứ tự là danh sách các bản ghi Danh sách các mục được đánh dấu bằng hình tròn (thường nhỏ hình tròn màu đen)

 Một danh sách không có thứ tự bắt đầu với thẻ <ul> Mỗi mục danh sách bắt đầu với thẻ

 Một danh sách định nghĩa không phải là một danh sách hàng duy nhất

Nó là một danh sách các bản ghi (điều khoản), với một mô tả của mỗi mục

 Một danh sách định nghĩa bắt đầu với một <dl> tag (định nghĩa danh sách)

 Mỗi điều bắt đầu với một <dt> tag (định nghĩa thuật ngữ)

 Mỗi mô tả bắt đầu với một <dd> tag (định nghĩa mô tả)

Trang 23

sách định nghĩa

<dd> Xác định một mô tả của một thuật ngữ trong một

danh sách định nghĩa

XIII.HTLM forms

 Các trường văn bản: Ví dụ này chứng tỏ làm thế nào để tạo ra các

trường văn bản trên một trang HTML Một người sử dụng có thể viếtvă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

Trang 24

 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ậpthông tin (như các lĩnh vực văn bản, các lĩnh vực vùn văn bản, thả xuống, nút radio, hộp kiểm tra, vv) dưới các form

 Form được xác định với thẻ <form>

Đầu ra :

 Thẻ được sử dụng nhiều nhất là thẻ <input> Các loại đầu vào được chỉ định với những thuộc tính Các loại đầu vào được sử dụng phổ biến nhất là

 Các lĩnh vực văn bản được sử dụng khi bạn muốn người dùng gõ chữ cái, số, vv ở các form

Radio Buttons

 Nút radio được sử dụng khi bạn muốn người sử dụng lựa chọn một trong một số giới hạn của sự lựa chọn

Trang 25

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 được định nghĩa trong thuộc tính action và nó sẽ được xử lý

Trang 26

Các thẻ :

<form> Xác định một hình thức cho người sử dụng đầu vào

<input> Xác định một trường đầu vào

<textarea> Xác định một văn bản diện tích (đa dòng văn bản nhập

vào điều khiển)

<label> Xác định một nhãn để kiểm soát

<fieldset> Định nghĩa một fieldset

<legend> Xác định một chú thích cho một fieldset

<select> Xác định một danh sách lựa chọn (một hộp thả xuống)

Giá trị của màu sắc

 Màu HTML được xác định bằng một bộ số theo hệ 16 số biễu diễn sự hòa trộn của giá trị các màu đỏ, xanh dương, xanh lá

 giá trị thấp nhất là 0, tương ứng bên hệ 16 số là 00, giá trị cao nhất là

255, tương ứng bên hệ 16 số là FF được viết thành 3 cặp số, bắt đầu bởi ký hiệu #

Trang 27

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 255 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 255 trong khi giữ nguyên xanh lá và xanh dương

Trang 28

Những tên các màu tiêu chuẩn Mạng

 Có 16 màu chuẩn cho bộ mã 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

Mà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 256 màu khác nhau, một danh sách của 216 "màu an toàn cho web" được đưa như màu chuẩn, đặt cho 40 hệ thống màu

 216 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 256

Trang 29

 Hiện tại điều đó không quan trọng, khi các máy tính bây giờ đã hiển thị được cả triệu màu khác nhau

XV.Những tên màu trong HML

Tên màu được hỗ trợ bởi tất cả các trình duyệt

Danh sách dưới đây là một danh sách đầy đủ các tên màu được hỗ trợ bởitất cả các trình duyệt chính

Sắp xếp theo tên :

Trang 32

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

Trang 35

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ệ: 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ế

Trang 36

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:

Trang 38

XVII Danh sách nhanh trong HTML(HTML Quick List)

Trang 39

Trang 40

đây </ a>

Hình ảnh liên kết: <a href="http://www.example.com/"> <img src="URL"

alt="Alternate Text" /> </ a>

Mailto link: <a href="mailto:webmaster@example.com"> Gửi e-mail </ a>

Một anchor được đặt tên:

<a href="#tips"> Chuyển đến mục Mẹo </ a>

<ul>

khoản <li> </ li>

<li> khoản </ li>

</ ul>

<ol>

Định dạng
Số trang	40
Dung lượng	2,98 MB