Tải bản đầy đủ (.docx) (40 trang)
  1. Trang chủ
    2. >>
  2. Luận Văn - Báo Cáo
    3. >>
  3. Công nghệ thông tin

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

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (2.56 MB, 40 trang )

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
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ẻ <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
11
Lab 2_ GV: Nguyễn Thành Thủy Nhóm 10
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.
• HTML Line Breaks
 Sử dụng <br /> nếu bạn muốn có một ngắt dòng (một dòng mới) mà
không cần bắt đầu từ một đoạn mới:
VII. HTML Text Formatting
Định dạng văn bản trong HTML
12
Lab 2_ GV: Nguyễn Thành Thủy Nhóm 10
• 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 :
<b> Xác định văn bản đậm
<big> Định nghĩa văn bản lớn
<em> Xác định nhấn mạnh văn bản
<i> Định nghĩa văn bản nghiêng
<small> Định nghĩa văn bản nhỏ
<strong> Định nghĩa văn bản chữ dày
<sub> Định nghĩa văn bản đọc theo kịch bản

<sup> Định nghĩa văn bản đọc theo siêu kịch bản
<ins> Định nghĩa văn bản được chèn vào
<del> Xác định xóa văn 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ế
<u> Không dùng nữa. Sử dụng những kiểu thay
vào đó
• Thẻ "Computer Output"
Thẻ Mô tả
13
Lab 2_ GV: Nguyễn Thành Thủy Nhóm 10
<code> Xác mã văn bản máy tính
<kbd> Định nghĩa văn bản bàn phím
<samp> Định nghĩa mã máy tính mẫu
<tt> Định nghĩa văn bản máy điện báo
đánh chữ
<var> Định nghĩa một biến
<pre> Định nghĩa văn bản được tạo khuôn
trước
<listing> Không dùng nữa. Sử dụng< Pre> Thay
vào đó
<plaintext> Không dùng nữa. Sử dụng< Pre> Thay
vào đó
<xmp> Không dùng nữa. Sử dụng< Pre> Thay
vào đó
• Thẻ trích dẫn và thẻ định nghĩa
Thẻ Mô tả
<abbr> Xác định viết tắt
<acronym> Xác định một từ viết tắt
<address> Xác định một thành phần địa chỉ

<bdo> Xác định hướng văn bản
<blockquote> Định nghĩa một trích dẫn dài
<q> Định nghĩa một trích dẫn ngắn
<dfn> Xác định một định nghĩa thuật ngữ
VIII.HTML 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, 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:
Thẻ Mô Tả
<center> Xác định nội dung trung tâm
<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
Thuộc Tính Mô tả

align
Định nghĩa sự sắp thành hàng (của)
văn bản
bgcolor
Xác định màu nền
color Xác định màu văn bản
IX. HTML Link
Một liên kết là địa chỉ đến một tài liệu (hoặc một nguồn tài nguyên) trên
web.
• 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.
16
Lab 2_ GV: Nguyễn Thành Thủy Nhóm 10
 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êu
liê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:

Ví dụ:
X.HTLM image
• Chèn hình ảnh: Ví dụ này chứng tỏ làm thế nào để chèn hình ảnh vào
trang web của bạn.
• Chèn hình ảnh từ các địa điểm khác nhau: Ví dụ này chứng tỏ làm thế
nào để chèn một hình ảnh từ một thư mục khác hoặc máy chủ khác.
17
<a href="url">Link text</a>
<a href=" W3Schools!</a>
<a href=" />target="_blank">Visit W3Schools!</a>
Lab 2_ GV: Nguyễn Thành Thủy Nhóm 10
• 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"
đã URL: />• Thuộc tính ALT
Thuộc tính alt được sử dụng để xác định một văn bản "thay thế" cho một hình
ảnh.
XI.HTLM tables
• Bảng: Làm thế nào để xác định các bảng trong một tài liệu HTML.
18
<img src="url" />
<img src="boat.gif" Boat" alt="Big />
Lab 2_ GV: Nguyễn Thành Thủy Nhóm 10

• 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
• Bảng và đặc tính border
 Nếu bạn không chỉ định thuộc tính border của bảng thì nó sẽ được
hiển thị mà không có bất kỳ đường biên nào. Đôi khi điều này có thể
có ích, nhưng hầu hết cách thể hiện, bạn nên sử dụng nó
• Các đề mục trong bảng
 Các đề mục trong bảng được định nghĩa với thẻ <th>.
• Thẻ bảng:
Thẻ Mô tả
<table> Xác định bảng
19
Lab 2_ GV: Nguyễn Thành Thủy Nhóm 10
<th> Xác định bảng tiêu đề
<tr> Xác định hàng của bảng
<td> Xác định ô của bảng
<caption> Xác định bảng chú thích
<colgroup> Xác định nhóm cột bảng
<col> Xác định các giá trị thuộc tính cho một hoặc nhiều cột trong
một bảng
<thead> Xác định một tiêu đề
<tbody> Xác định một cấu trúc bảng
<tfoot> Xác định chân bảng
XII.HTLM lists
• Danh sách không có thứ tự:

• Danh sách có thứ tự :
20
Lab 2_ GV: Nguyễn Thành Thủy Nhóm 10
• 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ẻ
• Danh sách có thứ tự:
 Một danh sách thứ tự cũng là một danh sách các bản ghi. Danh sách
các mục được đánh dấu bằng số.
 Một danh sách đã ra lệnh bắt đầu với thẻ <ol>. Mỗi mục danh sách bắt
đầu với thẻ <li>.
• Danh sách định nghĩa:
 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ả).
• Các thẻ.
Thẻ Mô tả
<ol> Xác định một danh sách đặt hàng
<ul> Xác định một danh sách có thứ tự
<li> Xác định một danh sách các mục
<dl> Xác định một danh sách định nghĩa
21
Lab 2_ GV: Nguyễn Thành Thủy Nhóm 10

<dt> Xác định một thuật ngữ (một mục) trong một danh
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
<dir> Cũ. Thay vì sử dụng <ul>
<menu> Cũ. Thay vì sử dụng <ul>
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ế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 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.
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
được định nghĩa trong thuộc tính action và nó sẽ được xử lý
24
Lab 2_ GV: Nguyễn Thành Thủy Nhóm 10
• Các thẻ :
Thẻ Mô tả
<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)
<optgroup> Xác định một nhóm lựa chọn
<option> Xác định một tùy chọn trong hộp thả xuống
<button> Xác định một nút nhấn
<isindex> Cũ. Thay vì sử dụng <input>
XIV.Màu HTML
• 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 #
25

Tài liệu liên quan

Tài liệu bạn tìm kiếm đã sẵn sàng tải về

Tải bản đầy đủ ngay
×