HTML căn bản
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.
row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 Cột trống trong bảngCột trống không có nội dung thì không được hiển thị tốt lắm ở hầu hết các trình duyệt. row 1, cell 1row 1, cell 2row 2, cell 1 Nó sẽ có dạng thế này trên trình duyệt row 1, cell 1 row 1, cell 2 row 2, cell 1 Bạn chú ý rằng đường biên bao quanh cột trống bị mất (nhưng trong trình duyệt Mozilla Firefox nó sẽ hiển thị đường biên) Để tránh điều này xảy ra, bạn thêm một non-breaking space ( ) vào cột trống đó, để làm cho đường biên của nó được hiện thỉ. row 1, cell 1row 1, cell 2row 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ạnLoạ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ốngVí 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ảngVí dụ này hướng dẫn bạn cách hiển thị nội dung ở trong nội dung khác. Cell paddingVí 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 spacingCá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ộtHướ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 frameChỉ 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 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 HTMLHTML 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.comwww.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.comwww.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 dạng định nghĩaMộ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.comTiền thân của vietphotoshopwww.vietphotoshop.comTrang web chuyên về Photoshop cho người Việt Nó sẽ xuất hiện như sau trong trình duyệtwww.bantayden.comTiền thân của vietphotoshopwww.vietphotoshop.comTrang 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 fieldsCá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ẩuFormMộ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ệuThẻ 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 fieldText 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ệtFirst 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 radioNú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ểmHộ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 bikeI have a car Nó sẽ như sau trong trình duyệt I have a bike I have a carThuộ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. Username: Trong trình duyệt nó nhìn như sauUsername: 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 SubmitCá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 HTMLVới HTML bạn có thể thể hiện hình ảnh trong tài liệu.Ví dụ Chèn hỉnh ảnhCá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ácCá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 srcTrong 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 AltThuộ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 mapCá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 mapCá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 BackgroundMộ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 đẹpHình nền đẹp 2 Hình nền xấuBackgroundsThẻ 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.BgcolorThuộ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.BackgroundThuộ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?
File đính kèm:
- HTML căn bản.doc