Ngôn ngữ đánh dấu siêu văn bản_ HTML

Bùi Vũ Anh - Bài giảng HTML “li 1 Highper Text Markup Language — HTML Ths.. arkup anguage đề mô tả nội dung... - Tén font sử dụng: font viết trước quy định So dùng nêu máy đã cài đặ

Trang 1

Bùi Vũ Anh - Bài giảng HTML

“li 1

(Highper Text Markup Language — HTML)

Ths Bui VG Anh Khoa Toan — Co - Tin hoc vuanh(@®vnu.edu.vn

¢ Internet Explorer, Nescape, FireFox

¢ Kich ban (script): C6 2 loai, chay trén may

chủ (server script) va may khach — may duyét web (Si) S0): script) Đó là dạng lập

¢« Khái niệm cơ bản

¢ Cau tric trang Web

° Một số thẻ thông dụng

‹ Một số thẻ đặc biệt

Hà Nội 08-08-2005

Bùi Vũ Anh - Bài giảng về HTML

* Web (World Wide Web): Mang toan cau,

sử dụng ngôn ngữ đánh dâu siêu văn bản (HTML — ~ighper ext arkup anguage)

đề mô tả nội dung

°Ổ Có 2 loại trang Web: Tĩnh và động

Hà Nội 08-08-2005 Bùi Vũ Anh - Bài giảng về HTML

BVA5

08-08-2005

¢ Trinh chủ (web server): Nơi cung cấp dich

vụ web, đặt và chạy trên máy tính

° Môi trường chạy trình chủ:

—Windows: IIS (Internet Information Server),

* Client script không phụ thuộc vào Server script và Web server (tương đôi)

°Ổ Có thê dùng nhiéu loai client script trong

cùng một trang Web nhưng không được

trình dùng dé nang cao hiệu quả, tính

Apache

Hà Nội 08-08-2005

Bùi Vũ Anh - Bài giảng về HTML

khai báo lẫn lộn

Bộ môn Tin hoc, Khoa Toán - Cơ - Tin học, Truong DH Khoa học Tự nhiên

Trang 3

‹ Là một file text có cấu trúc

° Tên file lưu trữ: ,.Jhtm, phim

‹ Tên thẻ không phân biệt chữ hoa/thường

<html>

<head>

08-08-2005

Thông tin không xuất hiện trên : Canh lê đoạn văn bản

</div>

s.<blockquote> </blockquote>

Hà Nội 08-08-2005 Bùi Vũ Anh - Bài giảng về HTML Hà Nội 08-08-2005 Bùi Vũ Anh - Bài giảng về HTML

: Quy định font cho đoạn văn bản

</font>

- Tén font sử dụng: font viết trước quy định So dùng nêu máy đã cài đặt, font thứ 2 được dùng nêu font

thứ nhất không cài đặt

red, blue

#FFFFFF

chân

Một số thẻ khác làm thay đổi hình thức của chữ

ia ia SIlver

Hà Nội 08-08-2005 Bùi Vũ Anh - Bài giảng về HTML lại

Trang 4

- Dấu trăng, dâu ngắt đoạn trên trình duyệt chỉ - Định dạng bảng

—Tr: Khai bao hang

—Td: Khai bao cét

<table =n

=|> BVAG

được tính 1 lần

° Đề tách đoạn, dùng thé p, div

>4

tr

td

Hà Nội 08-08-2005 Bùi Vũ Anh - Bài giảng về HTML 13 Hà Nội 08-08-2005 Bùi Vũ Anh - Bài giảng về HTML Hệ,

: Khai báo cột

=> ¡ Khai báo hàng

Hà Nội 08-08-2005 Bùi Vũ Anh - Bài giảng về HTML 15

circle | square | disc <dt> description title1

=U circle | square | disc > Item 1 <dd> description description

<dd> description description2

(order ist)

Hà Nội 08-08-2005 Bùi Vũ Anh - Bài giảng về HTML 16 Hà Nội 08-08-2005 Bùi Vũ Anh - Bài giảng về HTML 17

* <imag align="top | bottom | middle | left | right” scr =

“đường dan URL/UNC” border=n height=x width=y border=m alt="x">

Imag không có thẻ đóng, dùng để dóng văn bản so

tạ

border m=0 elit

Trang 5

Slide 14

BVA6 Độ đậm đường viền, 0 tức là không có viền Đơn vị là điểm

Bui Vu Anh, 8/2/2005

BVA7 Khoảng cách giữa các hàng và cột Đơn vị là điểm

Bui Vu Anh, 8/2/2005

Slide 15

BVA8 Độ rộng của cột so với bảng tính theo %

Bui Vu Anh, 7/23/2005

Trang 6

° Dấu xuống dòng: <br clear='left | right | center’> Clear ‹ Gắn với văn bản:

dung dé xoá việc căn dòng văn bản bao quanh hình ảnh do

thẻ imag tạo ra

° - &gf (>), &lt (<), &amp (&),   (dáu trắng không bị trình duyệt huỷ

ce), &CODy; (©), ® (®), &-acute; (-)

http://www uni-passau.de/~ramsch/iso8859-1.html

¢ Gan với ảnh

- non breacking spa

border=n height=x width=y>

</a>

“mailto:dia-chi-email”

Hà Nội 08-08-2005 Bùi Vũ Anh - Bài giảng về HTML 19 Hà Nội 08-08-2005 Bùi Vũ Anh - Bài giảng về HTML

20

¢ Gọi phương thức của JavaScript:

¢« Khai báo nhưữ một Bookmark trong chính trang

name=<dia chi trang> tên tham khảo

BVA18

°Ổ Cho phép người dùng nhập dữ liệu - _ Nhập dữ liệu dạng text

¢ Quy dinh chiêu dài lớn nhất (maxlength) và kích thước (size) trên trang web

- Phù hợp (không lớn hơn) chiều dài của điều

khiên/thẻ chứa nó

° Thực hiện chỉ thị hay hành động

reset, checkbox, radio, hidden, image

23

1 1 ((1

<input type=" name~=” value=

size=20 maxlength=10>

<input type=" " name="

value="" size=20 maxlength=10>

Trang 7

Slide 20

BVA16 URL: Universal Relate Link - dia chi internet, mail hay intranet

UNC: Dia chỉ mạng cục bộ

Bui Vu Anh, 7/23/2005

Slide 21

BVA17 Máy cần hỗ trợ Java Virtual Machine

Bui Vu Anh, 7/23/2005

Slide 22

BVA18 Cac thé này dùng để khai báo dữ liệu nhằm kết nối đến kịch ban chạy trên trình chủ

Bui Vu Anh, 7/23/2005

Trang 8

Dùng cho tuỳ chọn

* Quan tém dén thuéc tinh

dung Client Script

Server side tham eat thẻ dưới dạng giá trị của thẻ thông qua tên nên cân định nghĩa giá trị trước

Khi khai báo trùng tên, chuỗi giá trị nhận được cách nhau bởi dâu phảy (,)

(true/false) khi sử

checked

""

Hà Nội 08-08-2005 Bùi Vũ Anh - Bài giảng Vee 25

Dung cho chon 1 trong nhiéu lwa chon

Cac radio phai có cùng tên, khác nhau về giá trị Chỉ một mục được checked, ưu tiên mục cuỗi cùng nêu cô tình check nhiêu mục

Khi tham chiếu bằng Server Script sẽ nhận được giá trị của tuỳ chọn được chọn

radio checked

óc

> Dung chap nhận những dữ liệu nhap trong input

phía trình chủ bằng phương thức (trong thẻ form) hay (trong QueryString)

> Chuyên các giá trị lên , Khai bảo thẻ form với phương thức ; muon

từ thẻ form, khai báo thẻ form với phương Post

submit

Hà Nội 08-08-2005 Bùi Vũ Anh - Bài giảng vê HTML 27

° Chấp nhận những dữ liệu nhập trong các thẻ

input lên trình khách (nêu dùng phương thức

submit(), nút sẽ gửi thẻ form lên trình chủ

web) Muốn tính toán trên trang web => dùng

thẻ này

button

—“

¢ Phuc hoi dữ liệu nhập trong các thẻ input, select, textarea

°Ồ Được khai báo trong thé form dung dé reset

dữ liệu trên trang web

reset

¢ Twong tu thé text nhưng không hiễn thị trên

trang web, không cho phép người dùng nhập

dữ liệu mà cần định nghĩa trước giá trị cho

nó, nhằm thực hiện mục đích tiềm ẩn

hidden

Trang 9

° Hình ảnh trên trang web gắn với một chức

năng (ví dụ gắn kèm các nút submit, reset,

button)

<input type="

" name= “imgGo” scr=“đường dẫn đến

08-08-2005

° Nhập dữ liệu trên nhiều dòng (không giới ° Chọn các phân tử trong danh sách (ListBox,

°ồ Hạn định số dòng (rows) và cột (cols) phục ¢ Cho chon một (ComboBox) hoặc nhiều mục

37 Hà Nội 08-08-2005 Bùi Vũ Anh - Bài giảng về HTML 32 Hà Nội 08-08-2005 Bùi Vũ Anh - Bài giảng về HTML 33

<option value="" selected>(Select a city)</option>

</select>

- Nếu không chi dinh dia chi (URL/UNC) cho action, trang web chuyên đên là trang hiện tại

° Phương thức Gef chuyển dữ liệu trong thẻ nhập lên chuôi QueryString (chuôi gôm nhiêu cặp tham

sô cùng với giá trị đi kèm nêu có kê từ sau dâu 2, cách nhau bởi dâu &, tham số và giá trị cách nhau

° Dùng đề gửi dữ liệu trong trang web từ phía Client lên Server

* Post: Gửi dữ liệu lên, Get: Gửi yêu câu lây

CIV IT-1U Y=

34 Hà Nội 08-08-2005 Bùi Vũ Anh - Bài giảng về HTML 35 Hà Nội 08-08-2005 Bùi Vũ Anh - Bài giảng về HTML 36

Trang 10

Cac input nam @ day

hoac

</form>

Cung cấp thông tin cho các Search Engine khi trang web được đăng ký sử dụng trên internet

<META NAME="description” CONTENT = “Mô

tả ”>

HO ON EL ete Oe tO Ct

"

Khai bao thé form dé Upload lén Server tty Client, dung the form:

<FORM ENCTYPE = “multipart/form-data” ACTION

= “download.php” name = “form1” METHOD =

° Tự động chuyên đến URL/UNC sau một thời

gian:

Meta: Khai bao trong thé head dung khai bao

loai font st dung, tim kiếm, xoá cache,

chuyên trang

“text/html; charset = UTF-8”>

¢ Xoa cache:

-Trang web duoc nap vao cache để truy nhập

nhanh khi duyét

—Khi có sự thay đổi cấu trúc trang web => mạng cục bộ dùng Proxy Server và người quản trị có

Trang 11

Bùi Vũ Anh - Bài giảng HTML 08-08-2005

-Quảng cáo, gây sự chú ý direction=up scrolldelay=2 scrollamount=1 width= 100% — Dinh dang cac ndi dung trinh SN

: _ > ™ EỊ

<marquee direction = right scrolldelay = 2 scrollamount = 1 <br>Hà Nội <br>Huê <br>Đà Nẵng <br>Sài Gòn ị ị

face KÌPÁ< color

<br>

Hà Nội 08-08-2005 Bùi Vũ Anh - Bài giảng vê HTML Ki Hà Nội 08-08-2005 Bùi Vũ Anh - Bài giảng vê HTML 44 Hà Nội 08-08-2005 Bùi Vũ Anh - Bài giảng vê HTML 45

Định nghĩa chung dé dùng lại font-family : Danh sách tên font border-top, border-bottom, border-left,

— Chèn vào trang web muốn sử dụng style

font-size: kích thước (px), border 1px #788 a ee

border-color: black black #7885AF:

font-weight: bold, italic, underline

ị ' : : tr : ` a : ti margin-left:1px ! Important border-top-width, border-bottom-width,

-bg

class="text_normal"

Sử dụng

Gl os bo nui Ie

Hà Nội 08-08-2005 Bùi Vũ Anh - Bài giảng về HTML 46 Hà Nội 08-08-2005 Bùi Vũ Anh - Bài giảng về HTML d4 Hà Nội 08-08-2005 Bùi Vũ Anh - Bài giảng về HTML 48

Trang 12

- Kiểm soát các hành động của người dùng

* Khai bao va sw dụng các phương thức, thuộc tính của

Client Script Vi du 2 loai script

¢ Khai bao phuong thtvc dung cu phap [ap trinh cua JavaApplet

/I khai báo biễn

Function Tén(tham s6):kiéu tra lai {

¢ Khai bao phuong thtvc dung cu phap [ap trinh cua Visual Basic for Application

- biến không cần khai báo kiểu Function Tên(tham só) as Kiểu trả lại

Begin

# code

</script>

Cac script co thé dé bat ky dau nhưng nên dé trong thé head

— @) ib

Hà Nội 08-08-2005

Bùi Vũ Anh - Bài giảng về HTML 50 — @) ib

‹ Giới thiệu về ngôn ngữ HTML

‹ồ Các thẻ mô tả cơ bản tạo nên trang web tĩnh

° Các thẻ phục vụ việc nhập dữ liệu

‹Ổ Các thẻ đặc biệt dùng tăng tuy chon cho

trang web

Bai tap: Tao trang web ca nhan minh hoa viéc

ShinCi Nn CA GaltienenitG Gr:

Tiêu đề	Ngôn ngữ đánh dấu siêu văn bản_ HTML
Tác giả	Bùi Vũ Anh
Người hướng dẫn	Ths. Bui VG Anh
Chuyên ngành	Tin học
Thể loại	Bài giảng
Năm xuất bản	2005
Thành phố	Hà Nội

Định dạng
Số trang	12
Dung lượng	262,22 KB