Giáo trình thiết kế web

Chia sẻ bởi Nguyễn Anh Tùng | Ngày 10/05/2019 | 49
Chia sẻ tài liệu: Giáo trình thiết kế web thuộc Tin học 12

Nội dung tài liệu:

Siêu văn bản và Ngôn ngữ HTML


Đặng Thành Trung
1. Giới thiệu siêu văn bản
Siêu văn bản (HyperText) là một luồng dữ liệu có định dạng ASCII text bao gồm các “dấu hiệu” (thẻ) và thông tin cần biểu diễn.
Các tệp siêu văn bản thường có đuôi quy ước là htm hay html
Tập hợp các thẻ, cách sử dụng và trình diễn chúng làm thành một ngôn ngữ đánh dấu gọi là ngôn ngữ đánh dấu siêu văn bản

Hypertext Markup Language - HTML
1. Giới thiệu siêu văn bản (tt)
Cấu trúc chung của một siêu văn bản


Tiêu đề trang
... Các khai báo khác ở đây


... Nội dung cần thể hiện ở đây


2. Ngôn ngữ HTML
Một số quy ước của ngôn ngữ
Thẻ có thể soạn thảo bằng chữ thường hay chữ hoa. Có hai loại thẻ là thẻ đơn và thẻ đóng mở
Thuộc tính của thẻ có thể có giá trị hoặc không. Nếu có giá trị thì chúng có thể được viết giữa ‘ ’ hoặc “ ” hoặc không cần ngoặc.
Các ký tự trống (dấu cách, enter, tab) liền nhau sẽ được Web Browser xử lý chỉ một lần và được coi là một khoảng trống duy nhất
Các ký tự “đặc biệt” phải được soạn thảo theo dạng &mã; , ở đây & và ; là các ký tự khoá, mã được ấn định theo quy tắc định trước
Chú thích được đặt trong cặp thẻ
2. Ngôn ngữ HTML (tt)
Các lớp thẻ
Cấu trúc (structure)
Định dạng (formatting)
Ảnh (image)
Danh sách (list)
Bảng (table)
Form
Khung hiển thị (frame)
2.1. Lớp thẻ cấu trúc
Là các thẻ xác định các thành phần trong cấu trúc của một siêu văn bản:
...
... , ...
...
Một số thuộc tính của thẻ …
Background: Ảnh nền, được hiển thị theo kiểu xếp gạch
Bgcolor, text, link, alink, vlink: Tương ứng là các thuộc tính quy định màu nền, màu văn bản, màu siêu liên kết, màu liên kết đang hoạt động, màu liên kết đã thực sự được duyệt.
Leftmargin, topmargin: Căn lề trái, lề trên của tài liệu theo pixel
2.2. Lớp thẻ định dạng
Các thẻ định dạng vật lý như
..., ... , ...
Các thẻ định dạng logic như
...

... , ...
...
Các thẻ định dạng khối như

..


..
Heading
Thẻ
- hN, N  (1.. 6)
Thuộc tính
align
title

Heading 1


Heading 2


Heading 3


Heading 4


Heading 5

Heading 6


Align
Thẻ
- div
- center
Thuộc tính
align

Left


Right


Center


Justify


DIV Center

Center


Format (physic)
Thẻ
- i
- b
- u
- tt
- blockquote

Italic

Bold

Underline

TypeWriter

BlockQuote


Format (logic)
Thẻ
- em
- strong
- u
- code
- blockquote

Emphasis

Strong

Underline

Code

BlockQuote


Font & Color
Thẻ
- font
Thuộc tính
- face
- size
- color
- style

Arial

Size 1

Size 7

Red

Blue

72pt

Link & URL & Bookmark
Thẻ
- a
Thuộc tính
- href
- title
- name
+ WEB Resource
+ File System
+ Bookmark

2.3. Lớp thẻ hiện ảnh
Chèn hình ảnh vào trang web
thẻ không có thẻ kết thúc, gồm các thuộc tính:
Src: Đường dẫn đến file ảnh
Alt: Đoạn văn bản hiển thị khi không có ảnh
Width, height: Độ rộng, chiều cao của ảnh khi hiển thị
Border: Độ đậm của đường viền xung quanh ảnh
Vspace, hspace: Khoảng cách theo chiều dọc và theo chiều ngang của ảnh với các phần tử khác
Lowsrc: Đường dẫn đến file ảnh thứ 2’ (cho phép hiển thị 2 ảnh trong 1 không gian)
2.3. Lớp thẻ hiện ảnh (tt)
Chèn hình ảnh vào trang web
thẻ không có thẻ kết thúc, gồm các thuộc tính:
align = ‘left | right’: căn lề trái | phải
align = ‘top | texttop’: phần trên của ảnh ở vị trí cao nhất của phần tử | phần tử text trên nó
align = ‘middle | absmiddle’: đường căn giữa của ảnh trùng với đường cơ sở | đường căn giữa của dòng hiện thời
align = ‘baseline’: biên dưới của ảnh trùng với đường cơ sở của dòng hiện thời
align = ‘bottom | absbottom’: biên dưới của ảnh trùng với đường cơ sở | biên dưới của dòng hiện thời
2.3. Lớp thẻ hiện ảnh (tt)
Chèn file hình ảnh/âm thanh
thẻ không có thẻ kết thúc, gồm các thuộc tính:
Src: Đường dẫn đến file cần chạy
Width, height: Kích thước khung điều khiển
Autoplay: Tự động bật hay không
Controller: Có hiện thị bảng điều khiển không
Loop: Có tự động lặp lại khi hết không
Image & Sound & Video
Thẻ (Image)
- img
Thuộc tính
- src
- width, height
- alt
- title
- border, align
- vspace, hspace
Thẻ (Sound & Video)
- embed
Thuộc tính
- src
- width
- height
- autoplay
- loop
- controller
2.4. Lớp thẻ tạo danh sách
Gồm các loại danh sách
... : Danh sách thư mục
...
: Danh sách được định nghĩa
... : Danh sách thực đơn
    ...
: Danh sách có thứ tự
    ...
: Danh sách không có thứ tự
Các loại danh sách có thể lồng nhau
List
Ds không thứ tự
- ul (unordered lists)
- li
Ds có thứ tự
- ol (ordered lists)
- li
Thuộc tính
- type

Ds các định nghĩa
- dl (definition lists)
- dt (title)
- dd (detail)
DISC | CIRCLE | SQUARE
A | a | I | i | 1
2.5. Lớp thẻ tạo bảng
Bao gồm các thẻ
...
: Giới hạn bảng
... : Đặc tả các dòng của bảng
...: Đặc tả ô dữ liệu của bảng
...: Đặc tả ô tiêu đề của bảng
...: Đặc tả tên bảng
Table
Table
Thẻ
- table
Thuộc tính
- border
- bordercolor
- cellspacing
- cellpadding
- background



- bgcolor
- width
- height
- style
- align
Table
Thẻ
- tr
Thuộc tính
- align, valign
- width, height
- background
- bgcolor
Thẻ
- td
Thuộc tính
- align, valign
- width, height
- background
- bgcolor
- colspan
- rowspan
2.6. Lớp thẻ tạo form
...

Định nghĩa form

Trường nhập dữ liệu

Danh sách chọn

Mục chọn trong danh sách

Trường nhập dữ liệu nhiều dòng
…

Có thể có nhiều form trong một tài liệu
Form không được lồng nhau
Thuộc tính
Action: vị trí của tài nguyên được truy nhập khi form được đăng ký.
Method = “POST | GET”: phương thức gửi dữ liệu từ form
Enctype: cách thức dữ liệu được mã hóa để gửi


Là một trường của form cho phép người dùng nhập dữ liệu theo nhiều dạng
Thuộc tính:
Name: Dùng để định danh
Type: Có thể nhận một trong các giá trị sau
text|radio|checkbox|password|file|hidden|image|submit|reset|button
Value
Size, maxlength, src, align
Checked

Dùng một danh sách lựa chọn
Mỗi phần tử của danh sách được đặc tả bởi thẻ
Thuộc tính
Name
Size
Multiple

Nằm trong thẻ
Hộp nhập dữ liệu văn bản nhiều hàng, cột
Thuộc tính
Name
Cols
Rows
2.7. Lớp thẻ tạo khung
Chia vùng hiển thị của trang web thành nhiều vùng con theo chiều dọc, ngang
Mỗi vùng con là một frame có đặc điểm:
Có thể truy cập tới một URL độc lập với frame khác.
Mỗi frame có thể được đặt tên.
Có thể thay đổi kích thước khung nhìn, cho phép hay không cho phép người dùng thay đổi kích thước này
Tài liệu có cấu trúc frame, không có phần tử body

…
Frameset: dùng để phân vùng hiển thị trên trình duyệt
Cols = n | * | n%
Rows = n | * | n%
Border, bordercolor
Frame: Nằm trong frameset dùng để định nghĩa từng vùng
Src: URL chứa nội dung của vùng
Name, bordercolor, noresize, marginwidth, marginheight
Scrolling = ‘yes|no|auto’
* Một số tài liệu cũ có thể bị lỗi font khi hiển thị do dùng bộ mã không phải Unikey ...
Người chia sẻ: Nguyễn Anh Tùng
Dung lượng: | Lượt tài: 2
Loại file:
Nguồn : Chưa rõ
(Tài liệu chưa được thẩm định)
Tải tài liệu