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.. Thẻ HTML Hãy lấy một ví dụ đơn giản như sau mà giới thiệu
Trang 1Giớ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:
<B> Xin chào, tôi là Đặng Văn Lel </B>
Các bạn chú ý: dòng chữ Xin chào, tôi là Đặng Văn Lel được đặt trong cặp chữ "<B>" và "</B>" 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ẻ "<B>", 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ẻ "</B>"
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
Trang 2kí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 :
{<} {Tên Thẻ} [Các thuộc tính] {>}
( 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 "<" Nếu là thẻ đóng thì sẽ bắt đầu bằng "</"
- Tên thẻ, cái tên nói lên tác dụng thẻ
- Các tham số - thuộc tính khác nếu có Nếu là thẻ đóng thì không cần tham số
- Dấu ">", dấu kết thúc mô tả thẻ
Ví dụ : <b> <html> <body> <body background="blue"> 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:
<HTML>
<HEAD>
Phần mô tả tài liệu và các thông tin đầu tài liệu khác
</HEAD>
<BODY>
Phần thân tài liệu - Nội dung sẽ hiển thị lên trình duyệt
</BODY>
</HTML>
Trang 3Đó 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ẻ <BODY> </BODY>, đâ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 :
Trang 4Bạn gõ vào nội dung như sau :
<html>
<head>
</head>
<body>
TAC PHAM DAU TIEN CUA TOI
</body>
</html>
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ả
Trang 5Chú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 :
< 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ụ : <body bgcolor="111111" text=blue link="222222"> 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
Trang 6KHÁ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
Trang 7Từ 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Ẻ < 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 :
Trang 8Khi 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
Trang 9Lấy ví dụ , với cấu trúc thư mục sau :
Trang 10Trong 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 :
Trang 11Save 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ẻ
< title > Nội dung tiêu đề < /title >
Cặp thẻ này đặt bên trong < head> và < /head >
Ví dụ :
Trang 12Kế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
Trang 13Định dạng văn bản trong HTML
1 Sử dụng thẻ < B>
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 :
< i> in nghiên
< u> Gạch chân
< tt> In kiểu đánh máy
Ví dụ :
Trang 14Kế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ụ :
Trang 15Kế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
Trang 16Như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 < br>, 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 :
Trang 17Kế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
Trang 18Để 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 < p> < /p>
Tác dụng tích cực nhất của < p> 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ả :