HTML cơ bản (Mới)

Một file có định dạng HTML là gì?

- HTML là chữ viết tắt của Hyper Text Markup Language (Ngôn ngữ hiển thị siêu văn bản).

- Một file HTML là một file text bao gồm những tag nhỏ

- Những tag hiển thị nói cho trình duyệt biết nó phải hiển thị trang đó như thế nào

- Một file HTML phải có phần mở rộng là .htm hoặc .html

- Một file HTML có thể được tạo bởi một trình soạn thảo đơn giản.

Bạn có muốn thử không?

Nếu bạn sử dụng Window hãy mở Notepad, nếu bạn sử dụng Mac mở ứng dụng Simple Text. Với OSX

bạn mở TextEdit và thay đổi lựa chọn sau: Select (trong cửa sổ preference) > Plain Text thay vì Rich

Text và chọn "Ignore rich text commands in HTML files". Việc này rất quan trọng bởi vì nếu bạn không

làm vậy thì code HTML có thể không đúng.

pdf19 trang | Chuyên mục: HTML | Chia sẻ: yen2110 | Lượt xem: 515 | Lượt tải: 2download
Tóm tắt nội dung HTML cơ bản (Mới), để xem tài liệu hoàn chỉnh bạn click vào nút "TẢI VỀ" ở trên
iện thỉ.
row 1, cell 1
row 1, cell 2
row 2, cell 1
 
Nó sẽ hiển thị như sau ở trình duyệt
row 1, cell 1 row 1, cell 2
row 2, cell 1 
Mẹo nhỏ giúp bạn
Loại thẻ , and ít khi được sử dụng, bởi vì nó không phải là tính năng được
Một vài ví dụ nữa
Bảng không có đường biên
Headings trong bảng
Cột trống
Ví dụ này chỉ cho bạn cách sử dung " " để hiển thị cột không có nội dung.
Bảng với viền ngoài
Cột chiếm hơn một cột hoặc hàng
Thẻ trong bảng
Ví dụ này hướng dẫn bạn cách hiển thị nội dung ở trong nội dung khác.
Cell padding
Ví dụ này hướng dẫn bạn cách tạo cellpadding để tạo ra nhiều khoảng trắng hơn giữa nội dung và đường biên
của nó.
Cell spacing
Cách sử dụng cellspacing để tăng khoảng cách giữa các cột.
Thêm màu nền hoặc hình nền cho bảng
Thêm màu nền hoặc hình nền cho cột
Căn chỉnh nội dung của cột
Hướng dẫn cách sử dụng thuộc tính "align" để căn chỉnh nội dung của cột, và tạo ra một bảng nhìn đẹp mắt
hơn.
Thuộc tính frame
Chỉ cách sử dụng thuộc tính "frame" để điều khiển đường biên của bảng.
Thẻ table
Tag Mô Tả
 Vẽ bảng
 hàng đầu của bảng
 hàng trong bảng
 ô trong hàng
 ô trong hàng
 nhãn của bảng
 nhóm các cột
 Định các thuộc tính của cột
 Hàng Đầu bảng
 Thân của bảng
 Hàng cuối bảng
Danh sách HTML
HTML hỗ trợ những dạng danh sách theo thứ tự, không theo thứ tự và định nghĩa.
Ví dụ
Danh sách không theo thứ tự
Danh sách theo thứ tự
Danh sách không theo thứ tự
Danh sách không theo thứ tự là một danh sách các mục. Danh sách của các mục sẽ được đánh dấu bởi
những bullet (dạng như gạch đầu dòng nhưng là một vòng tròn màu đen).
Danh sách không theo thứ tự bắt đầu với thẻ . Mỗi một mục được bắt đầu với một thẻ .
www.bantayden.com
www.vietphotoshop.com
Nó sẽ xuất hiện như thế này trong trình duyệt.
www.bantayden.com
www.vietphotoshop.com
Ở giữa những mục trên bạn có thể chèn thêm chữ vào như là xuống hàng, hình ảnh, đường liên kết thậm chí
là một danh sách khác.
Danh sách theo thứ tự
Danh sách theo thứ tự cũng là một dạng danh sách của các mục. Nhưng những mục trong đó được đánh
dấu bởi số. Một danh sách theo thứ tự bắt đầu với thẻ . Mỗi mục được bắt đầu với thẻ .
www.bantayden.com
www.vietphotoshop.com
Nó sẽ xuất hiện như thế này trong trình duyệt.
1. www.bantayden.com
2. www.vietphotoshop.com
Ở giữa những mục trên bạn có thể chèn thêm chữ vào như là xuống hàng, hình ảnh, đường liên kết thậm chí
là một danh sách khác.
Danh sách dạng định nghĩa
Một danh sách dạng định nghĩa không phải là danh sách của các hạng mục. Nó là một danh sách của các
thuật ngữ và những lời giải thích của thuật ngữ đó. Một danh sách định nghĩa bắt đầu với thẻ . Mỗi một
thuật ngữ được bắt đầu với thẻ . Mỗi định nghĩa trong danh sách định nghĩa được bắt đầu bằng thẻ
.
.
www.bantayden.com
Tiền thân của vietphotoshop
www.vietphotoshop.com
Trang web chuyên về Photoshop cho người Việt
Nó sẽ xuất hiện như sau trong trình duyệt
www.bantayden.com
 Tiền thân của vietphotoshop
www.vietphotoshop.com
 Trang web chuyên về Photoshop cho người Việt
Ở giữa những mục trên bạn có thể chèn thêm chữ vào như là xuống hàng, hình ảnh, đường liên kết thậm chí
là một danh sách khác.
Một vài ví dụ nữa
Một vài dạng khác của danh sách theo thứ tự
Một vài dạng khác của danh sách không theo thứ tự
Nested list
Nested list 2
Danh sách dạng định nghĩa
Những thẻ danh sách
Tag Mô Tả
 Danh sách có sấp xếp
 Danh sách không sáp xếp
 1 phần tử trong danh sách
,, Kiểu danh sách
 Hết hỗ trợ. Dùng thay thế
 Hết hỗ trợ. Dùng thay thế
HTML form và trường nhập liệu.
HTML form được sử dụng để chọn những dữ liệu nhập vào khác nhau của người dùng.
Ví dụ
Text fields
Cách tạo những trường chữ trong một trang HTML. Người dùng có thể viết chữ trong trường chữ.
Trường mật khẩu
Form
Một form là một vùng mà nó bao gồm những thành phần của form. Thành phần của form là những thành
phần cho phép người dùng có thể điền thông tin như là trường chữ, menu thả xuống, nút radio, và các hộp
kiểm vào một form.
Một form được xác định bởi thẻ 
Nhập liệu
Thẻ form được sử dụng nhiều nhất là thẻ . Loại dữ liệu nhập vào sẽ được xác định bởi thuộc tính của
nó. Những trường nhập liệu được sử dụng nhiều nhất được giải thích ở dưới đây.
Text field
Text field được sử dụng khi bạn muốn người dùng đánh chữ, số v.v.. vào một form.
First name: 
Last name: 
Nó sẽ xuất hiện như sau trong trình duyệt
First name: 
Last name: 
Bạn chú ý rằng bản thân của form thì bị ẩn đi. Hơn nữa trên hầu hết các trình duyệt trường text được mặc
định là 20 ký tự.
Nút radio
Nút radio được sử dụng khi bạn muốn người dùng chọn một trong những lựa chọn bạn đưa ra.
 Male
 Female
Nó sẽ xuất hiện như sau trên trình duyệt
 Male 
 Female 
Chú ý rằng chỉ có một lựa chọn có thể được chọn.
Hộp kiểm
Hộp kiểm được sử dụng khi bạn muốn người chọn có thể chọn nhiều lựa chọn hơn.
I have a bike
I have a car
Nó sẽ như sau trong trình duyệt
 I have a bike 
 I have a car
Thuộc tính hoạt động cùa form và nút Submit.
Khi người dùng nhấp chuột vào nút "submit", nội dung của form đó sẽ được gửi đến một tệp tin khác.
Thuộct ính hoạt động của form xác định tên của file mà nó sẽ gửi nội dung đến. Tệp tin đó được xác định
trong thuộc tính hoạt động của form và thường thì nó sẽ có những hành động với dữ liệu nó nhận được.
<form name="input" action="html_form_action.asp"
method="get">
Username: 
Trong trình duyệt nó nhìn như sau
Username: Submit 
Khi bạn gõ tên bạn vào trường chữ ở trên và nhấp vào nút Submit, bạn sẽ gửi thông tin đó vào một trang
gọi là "html_form_action.asp". Trang đó sẽ chỉ cho bạn thấy dữ liệu nhận được.
Thêm một vài ví dụ
Hộp kiểm
Radio buttons
Menu thả xuống
Một dạng menu thả xuống khác
Vùng chữ
Tạo một nút bấm
Fieldset xung quanh dữ liệu
Ví dụ về form
Form với trường nhập liệu và nút Submit
Cách chèn form vào một trang, form chứa 2 trường nhập liệu và một nút submit.
Form với hộp kiểm
Form với radio buttons
Gửi email từ một form
Thẻ của form
Tag Mô Tả
 Kiểu form để nhập thông tin
 Một ô nhập liệu
 Vùng nhập liệu có nhiều hàng
 Nhãn
 Nhóm các vùng nhập với nhau
 nhản của 1 fieldset
 Danh sách chọn
 nhóm các phần tử trong danh sách chọn
 1 phần tử trong danh sách chọn
 Nút bấm
 Hết hỗ trợ. Dùng thay thế
Hình ảnh trong HTML
Với HTML bạn có thể thể hiện hình ảnh trong tài liệu.
Ví dụ
Chèn hỉnh ảnh
Cách cho hiển thị một tấm hình trên trang web.
Chèn hình ảnh từ những vị trí khác
Cách hiện một hoặc nhiều tấm hình từ một thư mục khác hoặc từ một server khác trên trang web của bạn.
Thẻ Image và thuộc tính src
Trong HTML, hình ảnh được xác định bởi thẻ . Để hiển thị một hình trên trang web, bạn cần phải sử
dụng thuộc tính src. Src là chữ viết tắt của source. Giá trị của thuộc tính src là địa chỉ URL của hình ảnh mà
bạn muốn hiển thị trên trang web.
Cú pháp để xác định một tấm hình
Địa chỉ URL chỉ đến điểm mà hình ảnh được lưu trữ. Một file hình có tên là "boat.gif" được đặt ở thư mục
images trên www.bantayden.com có địa chỉ URL là: 
Trình duyệt sẽ hiển thị hình ảnh nơi mà có thẻ image được chèn trong tài liệu. Nếu bạn muốn thêm thẻ
image vào giữa một đoạn văn, trình duyệt sẽ hiển thị đoạn văn thứ nhất trước, sau đó đến hình và sau cùng
là đoạn văn thứ hai.
Thuộc tính Alt
Thuộc tính alt được sử dụng để xác định chữ thay cho hình. Bởi vì nếu hình đó không hiện được thì một
dòng chữ sẽ xuất hiện để báo cho người đọc biết. Gía trị của thuộc tính alt là một dòng chữ như sau:
Thuộc tính alt báo cho người đọc biết họ không xem được hình gì khi mà trình duyệt không load được hình
đó. Trình duyệt sau đó sẽ hiển thị dòng chữ thay vì hình ảnh. Bạn nên tạo cho mình thói quen thêm thuộc
tính "alt" vào mỗi tấm hình trên một trang, để tăng khả năng hiển thị và giúp những người lướt web mà
không dùng hình ảnh.
Một vài ví dụ
Hình nền
Căn chỉnh hình ảnh
Để hình ảnh "bơi lội" tự do
Điều chỉnh hình với kích cỡ khác nhau
Hiển thị chữ thay thế cho tấm hình
Tạo siêu liên kết cho tấm hình
Tạo image map
Cách tạo một image map, với những vùng có thể click được. Mỗi một vùng của hình là một đường liên kết.
Biến tấm hình thành image map
Cách biến một tấm hình thành một image map. Bạn sẽ thấy nếu bạn di chuyển con chuột lên trên tấm hình,
góc phần tư sẽ xuất hiện trên thanh trạng thái.
Thẻ Image
Tag Mô Tả
 Hình ành
 Định nghĩa map ( sơ đồ trên 1 hình)
 Định Area, 1 vùng nhỏ tương ứng trên sơ đồ
HTML Background
Một background đẹp có thể làm cho trang của bạn nhìn đẹp mắt hơn.
Ví dụ
Hình nền đẹp
Hình nền đẹp 2
Hình nền xấu
Backgrounds
Thẻ có hái thuộc tính nơi mà bạn có thể chọn loại background cho mình. Background có thể là một
màu hoặc là một tấm hình.
Bgcolor
Thuộc tính bgcolor thiết lập hình nền là một màu. Giá trị của thuộc tính này là hệ số hexadecimal, một giá trị
màu RGB hoặc một tên màu
Dòng code trên cùng thiết lập hình nền thành màu đen.
Background
Thuộc tính background thiết lập một tấm hình làm hình nền. Giá trị của thuộc tính này là địa chỉ URL của tấm
hình bạn muốn sử dụng. Nếu một tấm hình nhở hơn so với cửa sổ trình duyệt, tấm hình đó sẽ tự nhân lên
đến khi nào nó che phủ hết cửa sổ trình duyệt.
Địa chỉ URL có thể là tương đối như là ở dòng code thứ nhất hoặc tuyệt đối như là ở dòng thứ 2.
Chú ý: nếu bạn muốn sử dụng hình nền, bạn nên nhớ rằng:
Hình nền đó có làm giảm tốc độ load của trang nhiều không? thường thì hình được chọn làm hình nền
không nên vượt quá 10K.
Hình nền đó có hợp với các hình khác trên trang không?
Hình nền đó có hợp với chữ không?
Hình nền đó nhìn có đẹp không nếu nó chỉ có một mình
Hình nền đó có làm cho người đọc mất tập trung không?
Mẹo nhỏ giúp bạn
Một số ít những trang web có sử dụng hình nền bằng hình ảnh
Hầu hết các site sử dụng hình nền là màu trắng, đen hoặc xám.
© www.vietphotoshop.com - Dịch bởi Bá tước Monte Cristo
|Trang chủ| |HTML cơ bản| |HTML nâng cao| |Diễn Đàn|
© Copyright 2004-2005 bantayden.com, All rights reserved. Ghi rõ nguồn khi bạn phát hành lại thông tin từ trang này.

File đính kèm:

  • pdfhtml_co_ban_moi.pdf
Tài liệu liên quan