Tài liệu học HTML căn bản

Giới Thiệu HTML: HyperText Markup Language. Đây là một ngôn ngữ đơn giản được sử dụng trong các tài liệu siêu văn bản. Đừng choáng. Nó cũng chỉ là các tài liệu văn bản bình thường nhưng có chứa các thành phần đặc biệt gọi là các thẻ (hoặc các cặp thẻ) đánh dấu. Dựa theo các cặp thẻ này mà trình duyệt có thể biết được nó phải thực hiện cái gì. Bản chất của HTML không phải là một ngôn ngữ lập trình nên các bạn cũng chẳng cần lo lắng đến những thuật toán lằng nhằng. Nó chỉ là một "ngôn ngữ" để đánh dấu văn bản thôi. Thẻ HTML Hãy lấy một ví dụ đơn giản như sau mà giới thiệu về thẻ HTML Code:  Xin chào, tôi là Đặng Văn Lel Các bạn chú ý: dòng chữ Xin chào, tôi là Đặng Văn Lel được đặt trong cặp chữ "" và "" Cặp chữ này chính là ký hiệu của một cặp thẻ trong ngôn ngữ HTML, mà khi biên dịch ra, trình duyệt sẽ hiểu là: Khi gặp thẻ "", nó phải có trách nhiệm in tất cả các chữ sau đó thành chữ đậm cho đến khi gặp thẻ "". Các bạn có thể hiểu các thẻ trong HTML như là các từ khoá trong Pascal vậy. Cũng đừng nên lo lắng quá, vì bản thân HTML chỉ có khoảng hơn 20 thẻ thông dụng thôi. Trong HTML, các thẻ có thể tồn tại đơn lẻ, hoặc tồn tại dưới dạng một cặp thẻ. Nếu tồn tại dưới dạng 1 cặp thì thẻ bắt đầu gọi là thẻ mở và thẻ kết thúc gọi là thẻ đóng. Sau này khi các bạn vào sâu hơn thì sẽ biết nhiều hơn. Để soạn thảo một file HTML, các bạn có thể sử dụng bất kỳ trình soạn thảo nào, chẳng hạn như NotePad hay thậm chí Turbo Pascal cũng được. miễn là sau đó các bạn Save As dưới dạng đuôi *.htm hoặc *.html. Còn để mở file này thì cứ việc kích đúp chuột vào đó, trình duyệt sẽ tự động mở ra cho bạn. Tất nhiên cũng có nhiều chương trình soạn thảo cho phép sinh tự động mã HTML, nhưng để cho các bạn nắm vững ngôn ngữ này, tôi yêu cầu các bạn phải tự soạn bằng tay trên NotePad. Cấu trúc thẻ HTML bao gồm các thành phần sau : {} ( Phần đặt trong cập {} là bắt buộc có, phần trong [] có thể có hoặc không , đây là quy ước trong tài liệu này) - Dấu "", dấu kết thúc mô tả thẻ Ví dụ : Với b, html, body là tên thẻ background="blue" là thuộc tính ( Sẽ nói công dụng cụ thể hơn sau , giờ các bạn chỉ cần biết cấu trúc là đủ ) Cấu trúc của một file HTML có dạng:   Phần mô tả tài liệu và các thông tin đầu tài liệu khác   Phần thân tài liệu - Nội dung sẽ hiển thị lên trình duyệt   Đó là cấu trúc mặc định của 1 tài liệu HTML. Chúng ta quan tâm đến khu vực ở giữa cập thẻ , đây là cặp thẻ chưa nội dung sẽ hiên thị lên màn hình trình duyệt. Các bước tạo 1 tài liệu HTML đầu tiên Bước 1 : Mở Notepad lên ( Start - Run Gõ Notepad.exe ) Hoặc Ở đường dẫn ( Start - All Program - Accessories - Notepad ) xem hình dưới . Màn hình giao diện notepad : Bạn gõ vào nội dung như sau :     TAC PHAM DAU TIEN CUA TOI   Sau đó lưu lại vào một thư mục nào đó với tên "trangdautien.html", chú ý là cần luôn cả cặp dấu " " trong đặt tên , xem hình .. Vào thư mục đã lưu, chạy file vừa tạo ( file trangdautien.html ) , bạn sẽ có kết quả . Chúc mừng bạn đã tạo thành công 1 tài liệu thml Bạn có thể làm lại với nội dung tùy ý bạn, chỉ cần nguyên cấu trúc và sữa lại nội dung. Dĩ nhiên tên đặt cũng tùy bạn, miễn là nó có phần mở rộng *.html THUỘC TÍNH THẺ HTML Bạn đã biết , thẻ HTML có tác dụng mô tả thực thi một tác vụ nào đó. Nhưng cái mô tả đó rất chung chung và khó quyết định nhiều thứ. Lấy ví dụ , bạn đang nói về 1 chiếc xe đạp. Chỉ đơn gian bạn nói là xe đạp, ai cũng biết. Nhưng nếu bạn thêm vào các chi tiết như màu xe, kiểu xe,... có phải sẽ gần hơn và chính xác hơn. Thuộc tính của thẻ html cũng như vậy, nó sẽ bổ sung thêm các thông tinh cho thẻ html, giúp nó đa dạng hơn và làm nhiều việc hơn. Nguyên tắc thêm thuộc tính vào thẻ html như sau :  Mõi 1 thuộc tính cách nhau 1 khoảng cách. Ví dụ : Trong đó :+ body là tên thẻCác phần : bgcolor="11111" text=blue link="222222" là 3 thuộc tính của thẻ body ( sẽ giải thích sau, giờ chỉ cần biết cấu túc và cách thêm thuộc tính như thế nào là đúng) 4 dvlel94, on 04/11/2009 at 15:04 KHÁI NIỆM ĐƯỜNG DẪN 1. Đường dẫn tuyệt đối. Là một địa chỉ đến một đối tượng. Địa chỉ này mô tả rất rõ ràng và chính xác từ ổ đĩa gốc đến các thư mục thành phần và cuối cùng là đối tượng cần trỏ đến. Ví dụ : D : / Tài liệu/Học HTML/bai_2.html C : / Luu_tru/Bai_1.doc Là 2 đường dẫn tuyệt đối. 2. Đường dẫn tương đối. Để hiểu rõ ràng về khái niệm đường dẫn tương đối này ta cần có thêm một khái niệm, đó là khái niệm thành phần chứa đường dẫn. Thành phần chứa đường dẫn là gì ?  Lấy ví dụ, ở trangdautien.html do chúng ta tạo ra. Đó là 1 tập tin html, chắc chắn chúng ta phải đặt nó vào một vị trí nào đó trên ổ đĩa hệ thống máy tính. Như vậy nếu ta mô tả một đường dẫn bên trong tài liệu trangdautien.html thì trangdautien.html trở thành thành phần chứa đường dẫn. Và tác dụng của thành phần chứa đường dẫn này là làm mốc cho các mô tả trong đường dẫn tương đối. Đường dẫn tương đối là một kiểu đường dẫn mô tả không chính xác từng phần một. Mà nó sẽ mô tả vị trí của đối tượng cần trỏ đến so với vị trí của thành phần chứa nó.Cách mô tả như sau : + Để ám chỉ nằm cùng thư mục ta có cấu trúc  . / Tên đối tương.mở rộng + Để ám chỉ thoát ra ngoài 1 thư mục ta có cấu trúc  .. / Tên đối tương.mở rộng Ví dụ :  Ở cùng thư mục TÀI LIỆU trong ổ D ta có File vidu.html và ảnh good.jpg như cấu trúc D : / TAI LIEU / vidu.html D : / TAI LIEU / good.html Từ file vidu.html ta có thể truy cập ảnh good.jpg thông qua đường dẫn   ". / good.jpg" Bây giờ, giã sử trong ổ D có thêm ảnh good2.jpg như cấu trúc D : / good2.jpg Từ file vidu.html trên, để truy cập ảnh good2.jpg ta có thể dùng đường dẫn " . . / good2.jpg " Các bạn chỉ cần hiểu như thế là đủ. Vào ứng dụng cụ thể của loại đường dẫn tương đối này các bạn sẽ hiểu rõ hơn. 5 nvthang30, on 08/11/2009 at 13:45 Tiếp đi you 6 dvlel94, on 01/12/2009 at 02:37 GIỚI THIỆU MỘT SỐ THUỘC TÍNH THẺ   1. Chọn màu nền : Để thêm màu nền vào ta dùng thuộc tính bgcolor như sau    Với x là mô tả màu, có thể mô tả bằng anh văn ( blue,green,red,....) hay bằng mã màu (#124565,#AB4587,...) Mã màu là bộ tổng hợp 6 màu trong tổng số 16 màu cơ bản được biểu diễn bằng các số từ 0 đến 15, trong đó số 10,11,12,13,14,15 được thay bằng A,B,C,D,E,F để tránh nhầm lẫn giữa số 12 và hai số 1 và 2 Ví dụ , ta có đoạn code của 1 trang html như sau : Khi save lại bạn có kết quả : 1. Chọn hình nền : Để chọn một hình làm hình nền cho html, ta dùng thuộc tính background như sau  Trong đó, đường dẫn bạn có thể làm tương đối hoặc tuyệt đối. Nếu làm tuyệt đối, khả năng sử dụng ở các máy khác rất thấp, thậm chi là không được. Vậy nên tôi khuyến cáo các bạn chỉ dùng đường dẫn tương đối. Lấy ví dụ , với cấu trúc thư mục sau : Trong thư mục con nguoimau có chứa ảnh dep.jpg bây giờ ta sẽ lấy ảnh này làm hình nền cho tài liệu html mang tên hoc_html.html nằm trong thư mục html bằng cách sau : Save lại, và đây là kết quả :  7 dvlel94, on 01/12/2009 at 02:44 TIÊU ĐỀ CHO TRANG WEB Để thêm tiêu đề cho trang web, bạn chỉ cần sử dụng cặp thẻ  Nội dung tiêu đề Cặp thẻ này đặt bên trong và Ví dụ : Kết quả :  8 nvthang30, on 05/12/2009 at 08:51 Mình cũng học xong nữa rù i, úp tiếp đi Lel 9 dvlel94, on 10/12/2009 at 06:09 Định dạng văn bản trong HTML 1. Sử dụng thẻ Tác dụng : In đậm thành phần chứa nó Ví dụ : Kết quả : 2. Sử dụng tương tự với các thẻ sau :  in nghiên  Gạch chân  In kiểu đánh máy Ví dụ : Kết quả : 3. Ngoài ra, bạn có thể sử dụng tổng hợp các thẻ định dạng trên với nhau. Ví dụ : Kết quả :  10 dvlel94, on 10/12/2009 at 06:34 Định dạng văn bản trong HTML (2) 1. Vấn đề ngắt hàng, điều chỉnh đoạn văn Bạn có để ý khi bạn viết Nhưng kết quả lại là : Nguyên nhân là do trình duyệt website không hiểu dấu ENTER và những khoảng trắng thừa ( 2 khoảng trắng trở lên gọi là thừa ). Mà trình duyệt chỉ hiểu và thực hiện theo sự chỉ dẫn của các thẻ HTML. Vì vậy mà nếu bạn muốn định dạng văn bản xuống hàng theo ý muốn, bạn cần dùng thẻ ngắt , thẻ này báo cho trình duyệt biết là tại điểm đó, ta xuống hàng và không có thẻ đóng. Ví dụ trên , ta viết lại : Kết quả sẽ là : ..... Bạn có đặt câu hỏi tại sao tôi có thể đánh các khoảng trắng thừa không? Ah, tôi chỉ để cho các bạnu thấy,với mã nguồn , các bạn có thể đánh và điều chỉnh xuống dòng, kho0ảng trắng như thế nào là tùy thích. Còn khi hiển thị, nó chỉ hiểu các thẻ HTML mà thôi. 2. Đoạn văn Để phân biệt giữa các đoạn văn, để dễ định dạng và quản lý việc sắp xếp văn bản cùng với các tài liệu khác như hình ảnh .. Người ta dùng khái niệm đoạn văn và gán các tác dụng đó vào thẻ định dạng .. Tác dụng tích cực nhất của là việc canh lề văn bản và canh vị trí với hình ảnh chèn theo ( sẽ học sau) bằng thuộc tính mở rông align="x". Với x là một trong các giá trị : center ( canh giữa ); left ( canh trái ); right ( canh phải ); justify ( canh đều ) Ví dụ : Kết quả :