Giáo trình lập trình web

Nội DungGiới thiệu Internet và dịch vụ WWW Các thành phần của dịch vụ WWW Giao thức HTTP Định vị tài nguyên trên WWW Các loại siêu văn bản... Giới thiệu Internet và dịch vụ WWWGiới thiệu

Trang 1

CT428 Lập Trình Web

Chương 1 Giới Thiệu Dịch Vụ WWW

Giảng viên: Trần Công Án (tcan@cit.ctu.edu.vn) https://sites.google.com/site/tcanvn/

Bộ môn Mạng máy tính và Truyền thông

Khoa Công Nghệ Thông Tin & Truyền Thông

Đại học Cần Thơ

2014

Trang 2

Nội Dung

Giới thiệu Internet và dịch vụ WWW

Các thành phần của dịch vụ WWW

Giao thức HTTP

Định vị tài nguyên trên WWW

Các loại siêu văn bản

Trang 3

Mạng Internet là gì?

Internet Là Gì?

I là một mạng toàn cầu , nối kết các mạng máy tính sử dụng bộ giao thức (protocol) TCP/IP

I tiền thân là mạng ARPANET của Bộ quốc phòng Mỹ (60s)

I mục tiêu ban đầu là dùng để

Trang 4

Các Đặc Điểm Cơ Bản Của Mạng Internet

I [hầu như] không có sự kiểm soát tập trung ( không có ai sở hữu

toàn bộ mạng Internet)

⇒ các “mạng con” có thể hoạt động độc lập (tương đối)

I được xây dựng dựa trên các chuẩn “mở”

⇒ tất cả mọi người đều có thể tạo ra các thiết bị hay dịch vụ

Trang 5

Các Thuật Ngữ/Viết Tắt Thường Gặp

giao thức Internet.

I DNS (Domain Name System): hệ thống tên miền.

Trang 6

Các Tổ Chức Quan Trọng Của Internet

I Internet Engineering Task Force (IETF): quản lý giao thức chuẩn của Internet.

I Internet Corporation for Assigned Names and Numbers (ICANN): quản lý hệ thống tên miền cấp cao nhất.

I World Wide Web Consortium (W3C): quản lý chuẩn của dịch vụ

Trang 7

Giới thiệu dịch vụ WWW

World Wide Web (WWW) Là Gì?

I là một dịch vụ trên Internet, dùng để trao đổi hay chia sẻ thông tin

dưới dạng siêu văn bản (hypertext)

I được tạo ra bởi Tim

Berners-Lee (CERN)

vào đầu những năm

90s (1989-1991)

I là hình thức trao

đổi/chia sẻ thông tin

tiện lợi và phổ biến

trên Internet

TS Trần Công Án (Khoa CNTT&TT) [CT428] Chương 1 Giới thiệu WWW 7

Trang 8

Giới thiệu dịch vụ WWW

Siêu Văn Bản, Trang Web, Website

I Siêu văn bản: là các văn bản có chứa các siêu liên kết

(hyperlink), cho phép:

I liên kết đến các siêu văn bản hay các nguồn tài nguyên khác (văn bản, hình ảnh, âm thanh, ) trên Internet

I truy xuất đến các siêu văn bản khác theo cách không tuần tự

I [thông thường] có phần mở rộng là html hoặc htm

I Trang web (web page): là một siêu văn bản.

I Website: là một hệ thống các trang web có liên quan với nhau

(của một tổ chức hay cá nhân) VD: website Trường ĐHCT,

website Khoa CNTT&TT,

Trang 9

Các Thành Phần Của Dịch Vụ WWW

WWW, cũng như tất cả các dịch vụ khác trên Internet, được tổ chức theo mô hình client/server (khách hàng/phục vụ)

I Server: là một chương trình cung cấp dịch vụ trên Internet

I “lắng nghe” yêu cầu từ các clients

I xử lý và phản hồi các yêu cầu của các clients

I server trong dịch vụ WWW được gọi là web server

I Client: là một chương trình sử dụng dịch vụ trên Internet

I gửi yêu cầu đến server

I nhận và xử ký kết quả trả về (hiển thị cho người dùng, )

I một client trong dịch vụ WWW được gọi là web browser

Trang 10

Web server

Web Server

I là một chương trình phục vụ yêu cầu về web (yêu cầu trang web)

I lưu trữ các trang web

I nhận yêu cầu về web từ web client (web browser)

I xử lý và gửi kết quả (trang web) về cho web client

I một số web server thông dụng: Apache, Microsoft Internet

Information Service (IIS)

Trang 11

Web browser

Web Browser (Trình Duyệt Web)

I là chương trình sử dụng dịch vụ WWW :

I gửi yêu cầu trang web (của người dùng) đến web server

I nhận và hiển thị trang web trả về từ web server

I một số trình duyệt web thông dụng: Internet Explore, Chrome,

Firefox, Safari, Opera,

Trang 12

Giao thức HTTP

Giao Thức HTTP

I viết tắt của HyperText Transfer Protocol, là giao thức của dịch

I qui định cách thức “giao tiếp” giữa web server và web browser

I bao gồm một tập các lệnh và “qui ước” chung giữa web server và web browser dùng để trao đổi dữ liệu

I dữ liệu trao đổi chủ yếu là các siêu văn bản

I trãi qua nhiều phiên bản: HTTP 0.9, HTTP 1.0, HTTP 1.1

Trang 13

Giao thức HTTP

Thông điệp yêu cầu (HTTP Request Message)

Cấu Trúc Thông Điệp Yêu Cầu

request line

header fields

I method: phương thức yêu cầu

I URL: đường dẫn đến đối tượng liên quan đến yêu cầu

I version: HTTP version mà client muốn giao tiếp với server (1.0, 1.1)

I header fields: mô tả các thông tin khác liên quan đến yêu cầu của client

Trang 14

Giao thức HTTP

Các Phương Thức Yêu Cầu Cơ Bản

số cung cấp cho web server (nếu có) sẽ được truyền thông qua

I POST: yêu cầu một trang web từ server (chỉ định bằng URL).

Đối số cung cấp cho web server (nếu có) sẽ được truyền tách

biệt với URL, đặt bên trong thông điệp yêu cầu (message body)

định bởi URL.

Trang 15

Giao thức HTTP

Các Header Fields Thông Dụng

I dùng để chỉ định một số ràng buộc đối với web server trong việc phục vụ yêu cầu của web browser

I cú pháp của mỗi field: <tên field>: <giá trị> [,<giá trị>] ∗

I một số fields cơ bản (phân biệt chữ hoa, chữ thường):

I Accept: loại media được chấp nhận bởi browser (text/html,

image/jpeg)

I Content-Length: kích thước của message body (bytes)

I Content-Encoding: mã hóa của message body (gzip, )

I Accept-Language: ngôn ngữ chấp nhận bởi browser (vn, en)

Trang 16

Giao thức HTTP

Thông điệp đáp ứng (Response Message)

Cấu Trúc Thông Điệp Đáp Ứng

status line header fields

I status: bao gồm 3 chữ số, cho biết trạng thái phục vụ yêu cầu của web browser

I header fields: chứa thông tin về web server và các thông tin liên quan đến trang web được yêu cầu (tương tự thông điệp yêu cầu)

Trang 17

Giao thức HTTP

Thông điệp đáp ứng (Response Message)

Một Số Mã Trạng Thái Cơ Bản

lý hay đã được chấp nhận

server có thể hoàn tất phục vụ yêu cầu

ứng

Trang 18

-blank line (CRLF) - CRLF (empty body) request message

HTTP/1.1 200 OK Date: Sun, 01 Dec 2013 01:52:57 GMT

Trang 19

Tài nguyên trên WWW

Tài Nguyên Trên WWW

I Tài nguyên trong dịch vụ WWW:

I các trang web

I dữ liệu đa phương tiện (multimedia) như: âm thanh, hình ảnh,

Trang 20

Bộ định vị tài nguyên đồng dạng (URL)

Bộ Định Vị Tài Nguyên Đồng Dạng (URL)

I Bộ định vị tài nguyên đồng dạng (Uniform Resource Locator

-URL) được dùng để định vị các tài nguyên trên WWW (và

Internet).

I Một URL cơ bản của dịch vụ WWW có dạng như sau:

giao thức đường dẫn địa chỉ

Trang 21

Cú Pháp URL Của Một Số Dịch Vụ Cơ Bản

Trang 22

URL Tương Đối

I là địa chỉ không đầy đủ tới một tài nguyên

I chỉ bao gồm đường dẫn đến tài nguyên cần truy xuất, không có giao thức và địa chỉ host

I giao thức và địa chỉ host được suy ra từ trang web chứa URL

Trang 23

Các Loại Siêu Văn Bản

I Web tĩnh (static web):

I là những trang web có nội dung cố định, không thay đổi theo ngữ cảnh

I có phần mở rộng là html hoặc htm

I Web động (dynamic web):

I là những trang web có nội dung thay đổi tùy theo ngữ cảnh (đối

số kèm theo yêu cầu của người dùng)

I nội dung được tạo ra bởi một ngôn ngữ script, bao gồm 2 loại:

application server)

Trang 24

Web động

Ngôn Ngữ Script Client-Side

I được “nhúng” vào trong tập tin html

Trang 25

Web động

Ngôn Ngữ Script Server-Side

I là đoạn script dùng để tạo ra một trang web

I sau khi script được thực thi, trang web tạo ra bởi script sẽ được web server gửi trả về cho web browser

I một số ngôn ngữ script server-side: ASP(.NET), JSP, PHP,

web browser

(1)

(2)

(2’) (3)

(4)

Internet

Trang 27

CT428 Lập Trình Web

Chương 2 - Ngôn Ngữ HTML

Giảng viên: Trần Công Án (tcan@cit.ctu.edu.vn) https://sites.google.com/site/tcanvn/

Bộ môn Mạng máy tính và Truyền thông

Khoa Công Nghệ Thông Tin & Truyền Thông

Đại học Cần Thơ

2014

Trang 28

Mục Tiêu

Giới thiệu ngôn ngữ HTML (HyperText Markup Language), ngôn ngữ đánh dấu siêu băn bản, dùng để tạo các trang web.

Trang 29

Nội Dung

Giới Thiệu HTML

Công cụ tạo trang web

Định nghĩa thông tin chung của trang web

Định nghĩa và định dạng thành phần nội dung

Các thuộc tính form mới

Thành phần nội dung mới

Các chức nămg mới

TS Trần Công Án (Khoa CNTT&TT) [CT428] Chương 2 Ngôn ngữ HTML 3

Trang 30

Giới Thiệu HTML

Ngôn Ngữ HTML

I do Tim Berner Lee phát minh và được W3C đưa thành chuẩn năm 1994

I bao gồm một tập các thẻ (tag) cho phép:

I định nghĩa cấu trúc trang web

I định dạng các phần tử thông tin trong trang web

I tạo các siêu liên kết để liên kết đến các trang web khác

I liên kết các đối tượng thông tin khác (hình ảnh, âm thanh, ) vào trang web

Trang 32

Giới Thiệu HTML

Ngôn Ngữ HTML

Thẻ (Tag) Trong HTML

I Mỗi thẻ là 1 từ khóa (tên) , được bao quanh bởi cặp ngoặc nhọn

và không phân biệt chữ hoa/thường, ví dụ: <html> , ,

I Mỗi thẻ HTML thường bao gồm 1 cặp: thẻ mở (bắt đầu định

dạng) và thẻ đóng (kết thúc định dạng)

dụ: </html> , ,

I Ví dụ: Đây là một đoạn văn bản

Trang 33

Giới Thiệu HTML

Ngôn Ngữ HTML

Thẻ (Tag) Trong HTML

I Các thẻ bao gồm cặp thẻ đóng/mở được gọi là thẻ kép

I Các thẻ chỉ có thẻ mở được gọi là thẻ đơn

I Các thẻ có thể lồng nhau nhưng không được chéo nhau, ví dụ:

some text, some more and more

I Một số thẻ có thêm các thuộc tính :

I dùng để chỉ định một số thuộc tính khác liên quan đến thẻ

I nếu có, sẽ được khai báo trong thẻ mở

I ví dụ: (align là 1 thuộc tính, dùng để canh lề đoạn văn bản)

Trang 34

Giới Thiệu HTML

Cấu trúc một tài liệu HTML

Tài Liệu HTML

I là một tập tin text có chứa các thẻ HTML

I còn được gọi là một trang web

I có phần mở rộng là html hoặc htm

I cú pháp sai, nếu có, thường không bị báo lỗi bởi trình duyệt mà kết quả sẽ hiển thị không đúng như mong muốn

Trang 35

Giới Thiệu HTML

Cấu trúc một tài liệu HTML

Cấu Trúc Một Tài Liệu HTML

Trang 36

Các Công Cụ Tạo Trang Web

I trình soạn thảo thuần văn bản (text editor):

I dùng trực tiếp thẻ HTML để tạo và trình bày trang web

I phù hợp cho việc học HTML (phải nhớ các thẻ HTML)

I một số chương trình thông dụng: NotePad, NotePad++ (PC),

TextEdit, TextWrangler (Mac), Sublime Text (PC+Mac+Linux)

I thiết kế trang web trực quan, không cần nhớ các thẻ HTML

I công cụ sẽ tự động sinh ra mã HTML tương ứng

I phù hợp cho việc thiết kế web thực tế (tiết kiệm tgian, công sức)

I một số công cụ: Adobe Dreamweaver, CoffeeCup (PC+Mac)

Trang 37

Trình Soạn Thảo Thuần Văn Bản

Trang 38

Công Cụ Thiết Kế Web - Dreamweaver

Trang 39

Công Cụ Thiết Kế Web - CoffeeCup

Trang 40

Công Cụ Thiết Kế Web - CoffeeCup

Trang 41

Định nghĩa thông tin chung của trang web

Định Nghĩa Thông Tin Chung Của Trang Web

I các thẻ này được đặt trong cặp thẻ <head> </head>

I các thẻ cơ bản:

I <title> : tiêu đề trang web (xuất hiện trên thanh tiêu đề cửa sổ

trình duyệt hay tab)

I <meta> : dùng để định nghĩa metadata cho trang web như bảng mã (charset), từ khóa (keywords), Các thuộc tính cơ bản:

VD: <meta name=“keywords” content=“html,css,javascript”>

I <base> : đ/nghĩa URL mặc định cho các liên kết trong trang web

Trang 42

Định nghĩa thành phần nội dung cơ bản

Định Nghĩa Thành Phần Nội Dung Cơ Bản

I <h1> <h2> (heading): các đề mục từ 1 (cao nhất) đến 6

(thấp nhất).

I (paragraph): định nghĩa 1 đoạn

I (line break): xuống dòng trong cùng paragraph

I <hr> (horizontal line): vẽ 1 đường ngang

I <! chú thích >

Thuộc tính align (=left/right/center): dùng để canh lề cho các phần tử (element) của các thẻ này.

Trang 43

Định nghĩa thành phần nội dung cơ bản

Ví Dụ

Trang 44

I , <big> : chữ nhỏ/to

I <del> , <strike> : gạch giữa

(khoảng trắng), < (<), >

(>), & (&), " (”)

Trang 45

I <ul> (unordered list): tạo một danh sách không thứ tự

I <ol> (ordered list): tạo một danh sách có thứ tự

I <li> (list item): tạo một mục/phần tử trong danh sách

I các danh sách có thể lồng nhau tạo thành danh sách nhiều cấp

Trang 46

Danh sách (List)

Các Thuộc Tính Của Danh Sách

I type ( <ul> , <ol> ): chỉ định kiểu của ký hiệu đánh dấu/số cho các phần tử trong danh sách

I giá trị cho <ul> : disc (•), circle (◦), square ()

I giá trị cho <ol> : 1, A, a, I, i

I start ( <ol> ): chỉ định giá trị bắt đầu cho danh sách

Trang 47

Danh sách (List)

Ví Dụ

Trang 48

Danh sách (List)

Danh Sách Các Định Nghĩa (Definition List)

I Danh sách các định nghĩa có dạng như sau:

HTML

a makeup language for creating web pages

HTTP

an application protocol for the web service

I Các thẻ dùng để tạo danh sách các định nghĩa:

I <dl> (definition list): tạo danh sách cách định nghĩa

I <dt> (definition term): tạo một khái niệm/từ khóa

I <dd> (definition): định nghĩa của khái niệm/từ khóa

Trang 49

Liên kết (Hyperlink)

Tạo Liên Kết

cho phép chuyển đến một trang web (hay một nguồn tài nguyên) khác.

I thuộc tính href dùng để chi định địa chỉ trang web cần liên kết

I URL có thể là một địa chỉ tuyệt đối hay tương đối (xem Ch1)

I thuộc tính taget dùng để chỉ định nơi sẽ mở tài liệu liên kết:

Trang 50

Ví Dụ

Trang 51

Liên Kết Trong

I là một liên kết tới một vị trí bên trong một trang web

I vị trí đó phải được “đánh dấu” (bookmark/anchor) bằng thẻ <a> với thuộc tính name : <a name=“tên bookmark”/>

I liên kết trong tới một vị trí đã được đánh dấu trong cùng tài liệu:

I liên kết tới một bookmark trong một tài liệu khác :

Tiêu đề	Giới thiệu dịch vụ www
Người hướng dẫn	TS. Trần Công Án
Trường học	Đại học Cần Thơ
Chuyên ngành	Mạng máy tính và Truyền thông
Thể loại	Giáo trình
Năm xuất bản	2014
Thành phố	Cần Thơ

Định dạng
Số trang	276
Dung lượng	12,44 MB