Slide tổng quan về ngôn ngữ lập trình web: HTML doc
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (2.42 MB, 191 trang )
1
LẬP TRÌNH TRÊN NỀN WEB
2
Nội dung môn học
Giới thiệu
Ngôn ngữ HTML (HyperText Markup
Language )
Style sheet (CSS)
Java script
ADO.NET (Ngôn ngữ lập trình C#)
Giớ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
3
Giới thiệu (tiếp)
Mạng là một nhóm các máy tính kết nối với
nhau. Internet là mạng của các mạng. Giao
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.
4
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à:
Giao thức: Người dùng tuân theo các giao thức này
để truy cập tài nguyên trên Web. HyperText Transfer
Protocol(HTTP) là giao thức được WWW sử dụng.
Địa chỉ: WWW tuân theo một cách thức đặt tên
thố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 HTML. File được lưu trên Web server với đuôi .htm
hoặc .html.
5
6
Ngô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
văn bản đơn giản.
7
Cá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.
8
Gõ vào trình soạn thảo như sau:
<html>
<head>
<title>Title of page</title>
</head>
<body>
This is my first homepage. <b>This text is
bold</b>
</body>
</html>
Lưu tập tin với tên "mypage.htm".
9
Mở trình duyệt Internet đang sử dụng.
Chọn mục “Open” (hoặc “Open Page”) trong mục
chọn File của trình duyệt.
Một hộp thoại sẽ xuất hiện.dẫn
Chọn “Browse” (hoặc “Choose File”) và chỉ đường
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”.
Bây giờ ta có thể thấy một địa chỉ xuất hiện trong
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.
10
Giả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.
Nội dung bên trong cặp thẻ <b> và </b> sẽ được in đậm.
11
Đuôi mở rộng là HTM hay HTML?
Khi lưu một tập tin HTML, bạn có thể lưu với đuôi mở
rộng .htm hoặc .html.
Trong ví dụ trước, ta đã lưu tập tin mypage với đuôi mở
rộng là .htm.
Lí do có thể là do thói quen cũ, trước đây thông thường hầu
hết các phần mềm đều chỉ chấp nhận đuôi mở rộng gồm 3
chữ cái.
Đố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.
12
Lưu ý với các trình soạn thảo HTML
Bạn có thể dễ dàng soạn thảo các tập tin HTML với
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.
Mặc dù vậy, nếu bạn muốn trở thành một người
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.
13
Cá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.
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.
15
Cấ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
>
16
Các thành phần cơ bản của trang Web
Các trang web thông thường có hai thành phần:
<head> … </head>
<body> … </body>
<
head>
<title>
<body>
Nội dung tài liệu
Trong một tài liệu chỉ có thể có duy nhất một thẻ
<body>
và một thẻ
<head>.
17
Các thành phần của HTML
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.
Các thành phần HTML được định nghĩa bằng cách
sử dụng các thẻ HTML.
19
Cá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>
20
Thẻ
Các thẻ nằm bên trong < và >
Ví dụ :
<html>
là một “thẻ html”
Các thẻ thường đi theo cặp, một sẽ ở trước
và một ở sau đoạn văn bản.
Ví dụ : <b>text</b>
<b>
là thẻ mở
</b>
là thẻ đóng
Thẻ đóng có dạng: </tag>
21
Các thuộc tính của thẻ
Mô tả các chi tiết của một thẻ
Thông thường có dạng:
Thuộc tính =“giá trị”
Đặt trong thẻ như sau:
<thẻ thuộc tính=“giá trị”>
Một thẻ có thể có nhiều thuộc tính:
<thẻ thuộc tính1=“giá trị1” thuộc tính2=“giá trị2”>
Thẻ đóng không có thuộc tính
22
Các thành phần HTML
Xem xét ví dụ sau đây:
<html>
<head>
<title>Title of page</title>
</head>
<body>
This is my first homepage. <b>This text is bold</b>
</body>
</html>
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>
Thẻ <b> được dùng để định nghĩa một thành
phần HTML sẽ được in đậm.
24
Đây cũng là một thành phần HTML:
<body>
This is my first homepage. <b>This text is bold</b>
</body>
Thành phần này bắt đầu bởi thẻ <body>, và kết thúc bởi thẻ
</body>.
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.
25
Tạ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.
