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.
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:
- html_co_ban_moi.pdf