Bài giảng Siêu văn bản và Ngôn ngữ HTML

Bài giảng cung cấp cho người học các kiến thức: Siêu văn bản và Ngôn ngữ HTML. Hi vọng đây sẽ là một tài liệu hữu ích dành cho các bạn sinh viên đang theo học môn dùng làm tài liệu học tập và nghiên cứu.

Siêu văn Ngôn ngữ HTML  Đặng Thành Trung Giới thiệu siêu văn • Siêu văn (HyperText) luồng liệu có định dạng ASCII text bao gồm “dấu hiệu” (thẻ) thông tin cần biểu diễn • Các tệp siêu văn thường có quy ước htm hay html • Tập hợp thẻ, cách sử dụng trình diễn chúng làm thành ngôn ngữ đánh dấu gọi ngôn ngữ đánh dấu siêu văn Hypertext Markup Language - HTML Giới thiệu siêu văn (tt) • Cấu trúc chung siêu văn Tiêu đề trang Các khai báo khác Nội dung cần thể Ngơn ngữ HTML • Một số quy ước ngơn ngữ – Thẻ soạn thảo chữ thường hay chữ hoa Có hai loại thẻ thẻ đơn thẻ đóng mở – Thuộc tính thẻ có giá trị khơng Nếu có giá trị chúng viết ‘ ’ “ ” không cần ngoặc – Các ký tự trống (dấu cách, enter, tab) liền Web Browser xử lý lần coi khoảng trống – Các ký tự “đặc biệt” phải soạn thảo theo dạng &mã; , & ; ký tự khoá, mã ấn định theo quy tắc định trước – Chú thích đặt cặp thẻ 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à thẻ xác định thành phần cấu trúc siêu văn bản: – – , – • Một số thuộc tính thẻ … – Background: Ảnh nền, hiển thị theo kiểu xếp gạch – Bgcolor, text, link, alink, vlink: Tương ứng 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 hoạt động, màu liên kết thực duyệt – Leftmargin, topmargin: Căn lề trái, lề tài liệu theo pixel 2.2 Lớp thẻ định dạng • Các thẻ định dạng vật lý – , , • Các thẻ định dạng logic – – , – • Các thẻ định dạng khối –

– Heading • Thẻ - hN, N  (1 6) Heading 1 • Thuộc tính Heading 2 - align Heading 3 - title Heading 4 Heading 5 Heading 6 Align • Thẻ - div

Left

- center

Right

• Thuộc tính - align

Center

Justify

DIV Center Center Format (physic) • Thẻ -i Italic -b Bold -u - tt - blockquote Underline TypeWriter BlockQuote 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 loại danh sách – – – – – • : Danh sách thư mục : Danh sách đị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 lồng List • Ds không thứ tự • Ds định nghĩa - ul (unordered lists) - dl (definition lists) - li - dt (title) • Ds có thứ tự - dd (detail) - ol (ordered lists) - li • Thuộc tính - type DISC | CIRCLE | SQUARE A | a | I | i | 2.5 Lớp thẻ tạo bảng • Bao gồm thẻ – – – – – : : : : : Giới hạn bảng Đặc tả dòng bảng Đặc tả ô liệu bảng Đặc tả ô tiêu đề bảng Đặc tả tên bảng Table Table • Thẻ - table • Thuộc tính - border - bgcolor - bordercolor - width - cellspacing - height - cellpadding - style - background - 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 liệu • – Danh sách chọn • … – Mục chọn danh sách • – Trường nhập liệu nhiều dịng … • • • Có thể có nhiều form tài liệu Form khơng lồng Thuộc tính – Action: vị trí tài nguyên truy nhập form đăng ký – Method = “POST | GET”: phương thức gửi liệu từ form – Enctype: cách thức liệu mã hóa để gửi • Là trường form cho phép người dùng nhập liệu theo nhiều dạng • Thuộc tính: – Name: Dùng để định danh – Type: Có thể nhận giá trị sau text|radio|checkbox|password|file|hidden|image|submit|reset|button – – – Value Size, maxlength, src, align Checked … • Dùng danh sách lựa chọn • Mỗi phần tử danh sách đặc tả thẻ … • Thuộc tính – Name – Size – Multiple … • Nằm thẻ • Mỗi mục chọn danh sách bao cặp thẻ • Thuộc tính – Value – Selected … • Hộp nhập liệu vă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ị trang web thành nhiều vùng theo chiều dọc, ngang • Mỗi vùng frame có đặc điểm: – – – Có thể truy cập tới URL độc lập với frame khác Mỗi frame đặ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 • 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ình duyệt – – – Cols = n | * | n% Rows = n | * | n% Border, bordercolor • Frame: Nằm frameset dùng để định nghĩa vùng – – – Src: URL chứa nội dung vùng Name, bordercolor, noresize, marginwidth, marginheight Scrolling = ‘yes|no|auto’ ... dụng trình diễn chúng làm thành ngôn ngữ đánh dấu gọi ngôn ngữ đánh dấu siêu văn Hypertext Markup Language - HTML Giới thiệu siêu văn (tt) • Cấu trúc chung siêu văn Tiêu đề...1 Giới thiệu siêu văn • Siêu văn (HyperText) luồng liệu có định dạng ASCII text bao gồm “dấu hiệu” (thẻ) thông tin cần biểu diễn • Các tệp siêu văn thường có quy ước htm hay html • Tập hợp... bảng • Bao gồm thẻ – – – – – : : : : : Giới hạn bảng Đặc tả dòng bảng Đặc tả ô liệu bảng Đặc tả ô tiêu đề bảng Đặc tả tên bảng