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

Chia sẻ: Dang Xuan Quang | Ngày: | Loại File: DOC | Số trang:19

Thêm vào BST

Báo xấu

1.077
lượt xem 336
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

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 l iệ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...

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: 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 t rong các tà i l i ệu siêu văn bản. Đừng choáng. Nó cũng chỉ là các tà i l i ệ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à t r ì 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 t r ì 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 th iệ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 t rong 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 f i le 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ở f i le 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 l iệu này) - Dấu "
Phần thân tài l iệ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 l iệ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 l iệu HTML đầu t iê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 f i le vừa tạo ( f i le trangdautien.html ) , bạn sẽ có kết quả .
Chúc mừng bạn đã tạo thành công 1 tài l iệ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 TH ỘC TÍ N TH H L U H Ẻ TM 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 t iế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 : < Tên_thẻ_html Tên_thuộc_tinhs1 Tên_thuộc_tinhs2 . . . . .> 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 l ink="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 N ỆM ĐƯỜN D I G ẪN 1. Đường dẫn t uyệ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 l iệ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 t in 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 l iệ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ó Fi le vidu.html và ảnh good.jpg như cấu trúc D : / TAI LIEU / vidu.html D : / TAI LIEU / good.html Từ f i le vidu.html ta có thể truy cập ảnh good.jpg thông qua đường dẫn " . / good. j pg" Bây giờ, giã sử trong ổ D có thêm ảnh good2.jpg như cấu trúc D : / good2.jpg Từ f i le 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Ẻ < body > 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 < body bgcolor="x"> 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 < body background = "Đường dẫn đến hình">
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 l iệ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 t iêu đề cho trang web, bạn chỉ cần sử dụng cặp thẻ < ti t le > Nội dung t iêu đề < /t i t l e > Cặp thẻ này đặt bên trong < head> và < /head > 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 < tt> 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 l iệ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 ); just i fy ( canh đều ) Ví dụ :
Kết quả :