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

Chia sẻ: quanghip

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...

Bạn đang xem 7 trang mẫu tài liệu này, vui lòng download file gốc để xem toàn bộ.

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 "", 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 f i le HTML có dạng:





Phần mô tả tài l iệu và các thông tin đầu tài l iệu
khác



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ẻ < 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ụ :
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 < 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 :
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
. . < / 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 ); just i fy ( canh
đều )

Ví dụ :
Kết quả :
Đề thi vào lớp 10 môn Toán |  Đáp án đề thi tốt nghiệp |  Đề thi Đại học |  Đề thi thử đại học môn Hóa |  Mẫu đơn xin việc |  Bài tiểu luận mẫu |  Ôn thi cao học 2014 |  Nghiên cứu khoa học |  Lập kế hoạch kinh doanh |  Bảng cân đối kế toán |  Đề thi chứng chỉ Tin học |  Tư tưởng Hồ Chí Minh |  Đề thi chứng chỉ Tiếng anh
Theo dõi chúng tôi
Đồng bộ tài khoản