HTML: Ngôn ngữ đánh dấu siêu văn bản HTML được sử dụng để tạo các tài liệu có thể truy cập trên Web.. Thẻ cuối cùng của tài liệu là Thẻ này sẽ báo cho trình duyệt biết đã kết thúc
Trang 1LẬP TRÌNH TRÊN NỀN WEB
Trang 2Nội dung môn học
Trang 3Giới thiệu
Internet là mạng máy tính lớn nhất trên thế giới, được xem như là mạng của các
mạng.
World Wide Web là một tập con của
Internet World Wide Web gồm các Web
Servers có mặt khắp mọi nơi trên thế giới
Web server chứa thông tin mà bất kỳ
người dùng nào trên thế giới cũng có thể truy cập được
Trang 4Giới thiệu (tiếp)
thức TCP/IP (Transmission Control
Protocol/Internet Protocol) cung cấp việc kết
nối tất cả các máy tính trên thế giới.
Trang 5 WWW hoạt động dựa trên 3 cơ chế để đưa các
tài nguyên có giá trị đến với người dùng Đó là:
truy cập tài nguyên trên Web HyperText Transfer
Protocol(HTTP) là giao thức được WWW sử dụng
nhất để truy cập vào các tài nguyên trên Web URL
được sử dụng để nhận dạng các trang và các tài
nguyên trên Web
HTML: Ngôn ngữ đánh dấu siêu văn bản (HTML) được sử dụng
để tạo các tài liệu có thể truy cập trên Web Tài liệu HTML
được tạo ra bằng cách sử dụng các thẻ và các phần tử của
Trang 6Ngôn ngữ HTML
HTML là viết tắt của HyperText Markup Language (Ngôn ngữ đánh dấu siêu văn bản)
HyperText – Văn bản có thể kết nối đến văn bản khác
Sử dụng các “thẻ” để “đánh dấu” văn bản, giúp trình duyệt xác định được cách biểu diễn trang web đến người sử
dụng
Một tập tin HTML là một tập tin văn bản trong đó có chứa các
thẻ đánh dấu.
Các thẻ đánh dấu này sẽ giúp trình duyệt Web xác định cách
trình bày trang Web.
Một tập tin HTML phải có đuôi mở rộng là htm hoặc html.
Một tập tin HTML có thể được viết trên một trình soạn thảo
Trang 7Các bước để soạn thảo một tập tin HTML?
Nếu đang sử dụng hệ điều hành Windows, hãy mở trình
Notepad
Nếu là hệ điều hành Mac, hãy khởi động trình Simple Text
Trong OSX thì chọn trình TextEdit, nhưng phải có một số thay đổi như sau: mở mục chọn “Format” và sau đó chọn “Plain text” thay vì là “Rich text”
Mở cửa sổ “Preferences” phía dưới mục chọn “Text Edit” và chọn “Ignore rich text commands in HTML files”
Lưu ý rằng nếu không có những thay đổi trên thì đoạn mã
HTML của bạn sẽ không thực hiện được
Trang 8 Gõ vào trình soạn thảo như sau:
Trang 9 Mở trình duyệt Internet đang sử dụng.
chọn File của trình duyệt.
dẫn đến tập tin HTML đã tạo - "mypage.htm” – kích chọn vào tập tin này và nhấn “Open”.
hộp thoại, ví dụ như "C:\MyDocuments\
mypage.htm” Hãy kích chọn nút OK và trình duyệt
sẽ hiển thị trang Web.
Trang 10Giải thích ví dụ
Thẻ đầu tiên trong tài liệu HTML là <html>.
Thẻ này sẽ báo cho trình duyệt biết bắt đầu tập tin HTML.
Thẻ cuối cùng của tài liệu là </html>
Thẻ này sẽ báo cho trình duyệt biết đã kết thúc tập tin HTML.
Nội dung giữa cặp thẻ <head> và </head> là những thông tin header.
Những thông tin header này sẽ không được hiển thị trong cửa sổ trình
duyệt.
Trong cặp thẻ <title> sẽ là tiêu đề của trang Tiêu đề này sẽ được hiển thị
trên thanh tiêu đề của trình duyệt.
Giữa cặp thẻ <body> là nội dung của trang web sẽ được hiển thị trong
trình duyệt.
Trang 11 Đối với các phần mềm mới sau này, bạn nên sử dụng đuôi
mở rộng là html thì an toàn hơn
Trang 12Lưu ý với các trình soạn thảo HTML
các trình soạn thảo WYSIWYG (what you see is
what you get) như là FrontPage hay Dreamweaver thay vì gõ trong một tập tin văn bản thông thường.
phát triển web xuất sắc, thì lời khuyên là bạn nên
sử dụng trình soạn thảo văn bản thông thường để ghi nhớ những cơ bản của HTML.
Trang 13Các câu hỏi thường gặp
H: Sau khi soạn thảo một tập tin HTML, tại sao tôi vẫn không thấy được kết quả trong trình duyệt của mình?
Đ: Hãy chắc chắn rằng tập tin của bạn đã được lưu với một tên gọi
và một đuôi mở rộng, như là "c:\mypage.htm" Và cũng chắc chắn rằng bạn phải chọn đúng tên này khi bạn mở nó trong trình duyệt
H: Tôi đã chỉnh sửa tập tin HTML, nhưng tại sao
những thay đổi này tôi không thấy được trên trình
duyệt?
Đ: Trình duyệt chỉ là nơi nơi thể hiện trang web, vì vậy nó không có nhiệm vụ phải đọc một trang web tới hai lần Khi đã bạn thay đổi tập tin của mình, thì trình duyệt không thể nào biết được.Hãy bấm nút refresh/reload trên trình duyệt để trình duyệt thể hiện lại trang của
b ạn.
Trang 14 H: Tôi nên dùng trình duyệt nào?
Đ: Bạn có thể dùng tất cả các trình duyệt, như là Internet Explorer,
Firefox, Netscape, hay Opera Tuy nhiên, có một số ví dụ nâng cao mà bạn cần phải dùng các phiên bản mới nhất của trình duyệt.
Q: Máy tính của tôi có bắt buộc phải chạy Windows
hay không? Nếu là Mac thì có được không ?
Đ: Bạn không nhất thiết phải chạy Windows Bạn vẫn có thể dùng các
hệ điều hành khác, như Mac chẳng hạn.
Trang 15Cấu trúc một tài liệu HTML
<html> <! Bắt đầu tài liệu HTML >
<head> <! Bắt đầu phần Heading >
<title>…</title> <!–- Tiêu đề tài liệu >
</head> <! Kết thúc phần Heading >
<body> <! Bắt đầu phần thân tài liệu >
… <!–- Thân tài liệu >
</body> <! Kết thúc phần thân tài liệu >
</html> <! Kết thúc tài liệu HTML >
Trang 16Các thành phần cơ bản của trang Web
Nội dung tài liệu
<body> và một thẻ <head>.
Trang 17Các thành phần của HTML
Trang 18 Tài liệu HTML là những tập tin văn bản được cấu thành từ các thành phần HTML.
sử dụng các thẻ HTML.
Trang 19Các thẻ HTML
Thẻ HTML được dùng để tạo nên các thành phần HTML
Thẻ HTML được bao quanh bởi hai ký tự < và >
Các ký tự này được gọi là các dấu ngoặt góc
Các thẻ HTML thông thường đi theo cặp, ví dụ như <b> và
</b>
Thẻ thứ nhất trong cặp thẻ trên được gọi là thẻ bắt đầu, và thẻ thứ hai được gọi là thẻ kết thúc
Đoạn văn bản bên trong cặp thẻ này là nội dung thành phần
Thẻ HTML không phân biệt chữ hoa chữ thường, <b> cũng giống như <B>
Trang 20 Ví dụ : <html> là một “thẻ html”
một ở sau đoạn văn bản.
Ví dụ : <b>text</b>
<b> là thẻ mở
</b> là thẻ đóng
Trang 23 Đây là một thành phần HTML:
<b>This text is bold</b>
Thành phần HTML được bắt đầu bởi một thẻ bắt đầu
element starts with a start tag: <b>
Nội dung của thành phần HTML là: This text is bold
Thành phần HTML kết thúc bằng một thẻ kết thúc: </b>
phần HTML sẽ được in đậm
Trang 24 Thẻ <body> được dùng để định nghĩa thành phần HTML
chứa nội dung của tài liệu HTML
Trang 25Tại sao chúng ta sử dụng chữ
thường để viết các thẻ?
Chúng ta đã biết rằng các thẻ HTML không phân biệt chữ
hoa, chữ thường: <B> thì cũng giống như <b> Nếu xem
mã nguồn của một trang web, thì bạn có thể thấy rằng hầu hết các trang web đếu sử dụng chữ hoa để trình bày các thẻ Chúng ta thì luôn luôn dùng chữ thường Vì sao vậy?
Nếu bạn muốn sử dụng các chuẩn web cũ, thì bạn chắc chắn phải dùng chữ thường World Wide Web Consortium (W3C) khuyến cáo sử dụng chữ thường trong HTML 4, và XHTML (thế hệ tiếp theo của HTML) cũng yêu cầu chữ thường
Trang 26Các thuộc tính của thẻ
Thẻ có thể có các thuộc tính Các thuộc tính này sẽ cung cấp thêm thông tin cho thành phần HTML Thẻ sau định nghĩa
một bảng trong HTML: <table> Khi thêm vào thuộc tính
border như sau, bạn có thể cho trình duyệt biết thêm là bảng này không có đường viền: <table border="0">
Thuộc tính luôn đi theo cặp tên/giá trị dưới dạng: tên=“giá trị”.
Thuộc tính phải luôn được đặt trong thẻ bắt đầu của một
thành phần HTML
Trang 27 Thuộc tính và giá trị thuộc tính cũng không phân biệt chữ
hoa-chữ thường
Tuy nhiên, World Wide Web Consortium (W3C) khuyến cáo
sử dụng chữ thường trong HTML 4, và XHTML (thế hệ tiếp theo của HTML) cũng yêu cầu chữ thường
Trang 28Luôn dùng dấu trích dẫn cho giá trị thuộc tính
Các giá trị thuộc tính nên luôn luôn đặt trong các dấu trích
dẫn Thông thường người ta hay sử dụng dấu trích dẫn đôi, nhưng dấu trích dẫn đơn vẫn được chấp nhận
Trong một số trường hợp đặc biệt, ví dụ như khi trong giá trị thuộc tính lại có chứa dấu trích dẫn, thì trong trường hợp này cần phải dùng dấu trích dẫn đơn:
name='John "ShotGun" Nelson'
Trang 29Các thẻ cơ bản trong HTML
Trang 30 Các thẻ quan trọng nhất trong HTML là các thẻ dùng để định nghĩa headings, paragraphs và line breaks
Cách tốt nhất để học HTML là làm việc với các ví dụ Chúng tôi đã xây dựng cho các bạn một trình soạn thảo HTML rất tốt Với trình soạn thảo này, bạn có thể soạn thảo mã nguồn HTML, và kích vào nút kiểm tra để xem kết quả
Trang 31Các thẻ HTML cơ bản
Thẻ Mô tả
<html> Khai báo một tài liệu HTML
<body> Khai báo phần thân cho tài liệu
<h1 to h6> Khai báo header 1 đến header 6
<br> Chèn một ký tự kết thúc dòng
Trang 32Thẻ <html>
Thành phần này sẽ cho trình duyệt biết rằng đây là một tài liệu HTML
Trang 33Thẻ <body>
Dùng để khai báo phần nội dung của tài liệu
Nó chứa toàn bộ nội dung của tài liệu (như văn bản, hình ảnh, màu sắc, đồ hoạ, …)
Trang 35Các thuộc tính tuỳ chọn
Thuộc tính Giá trị Mô tả
dùng style để thay thế
#xxxxxx colorname
Màu nền của tài liệu Thường dùng style
để thay thế
#xxxxxx colorname
Màu chữ trong tài liệu Thường dùng style
để thay thế
Trang 38 Thuộc tính hình nền
<html>
<body background="background.jpg">
<h3>A background image!!!</h3>
<p>Both gif and jpg files can be used as
background images.</p>
</body>
</html>
Trang 40Thẻ <br> - Ngắt dòng
hàng, nhưng không muốn bắt đầu một đoạn mới
Trang 41Thẻ <p> - Đoạn văn bản
Các đoạn được khai báo bởi thẻ <p>.
<p>This is a paragraph Tag</p>
<p>This is another paragraph Tag</p>
Trang 43Thẻ <! >
Định nghĩa và cách sử dụng
Thẻ comment được dùng để chèn một chú thích vào mã nguồn
Trình duyệt sẽ không thực hiện các chú thích này
Bạn có thể dùng chú thích để giải thích mã lệnh, điều này sẽ giúp bạn trong việc sửa mã lệnh trong những lần sau đó
Bạn cũng có thể đưa những thông tin riêng của chương trình vào bên trong chú thích.
Trong trường hợp này, người dùng sẽ không thấy được chúng nhưng chương trình vẫn thấy được
Tốt hơn là hãy ghi chú thích bên trong các phần tử script và style để ngăn chặn các trình duyệt cũ không hiển thị chúng, vì các trình duyệt này không hỗ trợ script và style
Trang 44 Ví dụ
Mã nguồn Kết quả
<! This text is a comment >
<p>This is a regular paragraph</p> This is a regular paragraph
Trang 45Định dạng văn bản và các liên kết
trong HTML
Trang 46Định dạng văn bản trong HTML
HTML định nghĩa rất nhiều phần tử cho phép định dạng văn bản, như là in đậm hay in
nghiêng ký tự
Trang 47Các loại thẻ được dùng trong định dạng văn bản
<b> Khai báo chữ in đậm
<i> Khai báo chữ in nghiêng
<big> Khai báo cỡ chữ lớn
<small> Khai báo cỡ chữ nhỏ
<strong> Khai báo chữ đậm
<sub> Khai báo chỉ số dưới
<sup> Khai báo chỉ số trên
<em> Khai báo đoạn văn bản cần nhấn mạnh
<ins> Khai báo định dạng cho chữ mới chèn thêm
<del> Khai báo chữ bị gạch xoá
<s> Ít dùng, thường dùng thẻ <del>
<strike> Ít dùng, thường dùng thẻ <del>
<u> Ít dùng, thường dùng style
Trang 48Các thẻ <i> <b> <big> <small>
Trang 50<strong> Nhấn mạnh bằng cách in đậm đoạn văn bản
<em>Emphasized text</em><br>
<strong>Strong text</strong><br> Emphasized text
Strong text
Trang 51Các thẻ <sub> và <sup>
Thẻ <sub> khai báo ký tự dưới dạng chỉ số dưới
Thẻ <sup> khai báo ký tự dưới dạng chỉ số trên.
Trang 52Các thẻ <del>, <ins>
Khai báo định dạng cho ký tự thêm vào
Khai báo định dạng cho ký tự bị xoá trong tài liệu
Ví dụ
a dozen is <del>20</del> <ins>12</ins>
pieces! a dozen is 20 12 pieces!
Trang 53A new version is <strike>not yet
available.</strike> now available!
A new version is not yet available now available!
A new version is not yet available now available!
Trang 54Thẻ <u>
Thẻ <u> khai báo ký tự gạch dưới.
Lưu ý: Nên tránh gạch dưới ký tự, vì nó sẽ làm cho người dùng nhầm lẫn với các siêu liên kết
Ví dụ
A new version is <u>now available!</u> A new version is now available!
Trang 55Liên kết trong HTML
HTML sử dụng siêu liên kết để kết nối đến
một tài liệu khác trên mạng
Trang 56Thẻ liên kết
<a> Khai báo một thẻ neo
Trang 57Thẻ Anchor và thuộc tính Href
HTML sử dụng thẻ <a> (anchor) để thiết lập kết nối đến
một tài liệu khác
Một thẻ neo có thể chỉ đến bất kỳ một nguồn nào trên
mạng, đó có thể là : một trang web, một hình ảnh, một tập tin âm thanh, một bộ phim…
Cú pháp để khai báo một thẻ neo như sau:
<a href="url">Text to be displayed</a>
Trang 58 Thẻ <a> được dùng để thiết lập một neo để liên kết,
thuộc tính href được dùng để xác định địa chỉ mà tài liệu liên kết tới, và những từ giữa cặp thẻ đóng và thẻ mở của thẻ này sẽ được hiển thị dưới dạng một siêu liên kết
<a href="http://www.yahoo.com/">Visit Yahoo!!</a>
Dòng trên sẽ xuất hiện trong trình duyệt như sau:
Visit Yahoo!!
Trang 59Thuộc tính Target
Với thuộc tính target, bạn có thể xác định vị trí mà tài liệu liên kết tới sẽ được mở ra
Dòng sau sẽ mở tài liệu đích trong một cửa sổ trình duyệt mới:
<a href="http://www.yahoo.com/" target="_blank">Visit Yahoo!!!</ a>
Trang 60Thẻ Anchor và thuộc tính Name
Thuộc tính name được dùng để thiết lập một neo được đặt tên Khi sử dụng neo này, chúng ta có thể thiết lập liên kết đến một phần cụ thể trong trang web, thay vì là phải đọc từ đầu đến cuối tài liệu để tìm phần đó.
Sau đây là cú pháp của một thẻ neo được gắn tên:
<a name="label">Text to be displayed</a>
Thuộc tính name được dùng để thiết lập một neo được đặt tên Tên của neo có thể là bất kỳ ký tự nào
Trang 61 Dòng sau sẽ khai báo một neo được đặt tên:
<a name="tips">Useful Tips Section</a>
Lưu ý rằng neo được đặt tên sẽ không được hiển thị theo
một cách đặc biệt nào cả
Để kết nối trực tiếp đến phần chỉ định, hãy thêm một ký hiệu
# và tên của neo vào cuối của địa chỉ URL
Một siêu liên kết đến phần Tips bên trong tập tin
"html_links.asp" sẽ có dạng như sau:
<a href="#tips">Jump to the Useful Tips Section</a>
Trang 62Ví dụ
Trang 63Thiết lập một kết nối mailto
Trang 64Thẻ nền và danh sách
Trang 651 Nền trong HTML
Trang 66thuộc tính cho nền
Trang 67Thuộc tính màu nền
Thuộc tính bgcolor sẽ chỉ định màu nền cho trang HTML
Giá trị của thuộc tính này có thể là một số thập lục phân, một giá trị RGB, hay một tên màu:
Trang 68Thuộc tính hình nền
Thuộc tính background xác định hình ảnh nền cho trang web
Giá trị của thuộc tính này là URL của hình ảnh mà bạn muốn dùng làm hình nền
Nếu hình ảnh bạn chọn nhỏ hơn cửa sổ trình duyệt thì hình ảnh này sẽ được lặp đi lặp lại cho đến khi nó đầy cửa sổ trình duyệt
<body background="clouds.gif">
<body background="http://www.yahoo.com/clouds.gif">
URL có thể là địa chỉ tương đối (như dòng trên) hoặc tuyệt đối (như dòng sau)
Trang 69 Chú ý : Nếu muốn sử dụng một hình ảnh làm nền,
bạn nên lưu ý những điều sau:
Hình nền liệu có làm chậm đi quá trình tải nhiều không?
Hình nền liệu có phù hợp với những hình khác trong trang không?
Hình nền liệu có phù hợp với màu chữ trong trang không?
Liệu hình nền bạn chọn có phù hợp khi đưa lên trang web hay không?
Hình nền có làm mất tiêu điểm của văn bản hay không?