Giáo trình Thiết kết web cơ bản (Ngành Thiết kết và quản lý website - Trung cấp)

- Sử dụng được các thẻ lệnh HTML để tạo và định dạng văn bản, danh sách, hình ảnh, liên kết, bảng biểu, biểu mẫu trên trang web.. - Vận dụng được CSS để định dạng các đối tượng văn bản,

Trang 1

TRƯỜNG CAO ĐẲNG KINH TẾ KỸ THUẬT

THÀNH PHỐ HỒ CHÍ MINH



Trang 2

TRƯỜNG CAO ĐẲNG KINH TẾ KỸ THUẬT

THÀNH PHỐ HỒ CHÍ MINH



GIÁO TRÌNH

MÔ ĐUN: THIẾT KẾ WEB CƠ BẢN NGÀNH: THIẾT KẾ VÀ QUẢN LÝ WEBSITE

TRÌNH ĐỘ: TRUNG CẤP

THÔNG TIN CHỦ NHIỆM ĐỀ TÀI

Họ tên: Lê Thị Thu Thảo

BỘ MÔN CHỦ NHIỆM ĐỀ TÀI

Lê Thị Thu Thảo HIỆU TRƯỞNG

DUYỆT

Thành phố Hồ Chí Minh, năm 2020

Trang 3

TUYÊN BỐ BẢN QUYỀN

Tài liệu này thuộc loại sách giáo trình nên các nguồn thông tin có thể được phép dùng nguyên bản hoặc trích dùng cho các mục đích về đào tạo và tham khảo

Mọi mục đích khác mang tính lệch lạc hoặc sử dụng với mục đích kinh doanh thiếu lành mạnh sẽ bị nghiêm cấm

Trang 4

LỜI GIỚI THIỆU

Giáo trình “Thiết kế web cơ bản” được biên soạn nhằm phục vụ cho việc học tập môn học “Thiết kế web cơ bản” đang được giảng dạy tại khoa Công nghệ thông tin, trường Cao Đẳng Kinh tế Kỹ Thuật TP.HCM

Nội dung giáo trình gồm 5 bài được biên soạn bám sát theo đề cương môn học “Thiết kế web cơ bản” và dựa theo các tiêu chuẩn thiết kế web hiện hành Mục đích của giáo trình là cung cấp cho sinh viên các kiến thức cơ bản về ngôn ngữ HTML, CSS, JavaScript, sử dụng phần mềm DreamWeaver để áp dụng vào việc thiết kế web

Xin chân thành cảm ơn các ý kiến đóng góp từ các đồng nghiệp đã giúp tôi hoàn thành giáo trình này

TP.HCM, ngày……tháng 08 năm 2020

Lê Thị Thu Thảo

Trang 5

MỤC LỤC

BÀI 1 - PHÁC THẢO WEBSITE 1

1.1 Các khái niệm 1

1.1.1 Internet và Word Wide Web 1

1.1.2 Web server, web browser và webpage 1

1.1.3 Search Engine 2

1.1.4 Xuất bản web 2

1.2 Lập kế hoạch thiết kế website 3

1.3 Thiết kế bố cục trang web 4

1.4 Bài tập áp dụng 5

BÀI 2 - THIẾT KẾ TRANG WEB VỚI HTML 6

2.1 Tạo trang web đầu tiên 6

2.1.1 Khái niệm HTML 6

2.1.2 Các thẻ của tập tin HTML 6

2.1.3 Tạo trang web 7

2.1.4 Các thẻ định cấu trúc tài liệu HTML 10

2.2 Làm việc với văn bản trên trang web 12

2.2.1 Thẻ <b> 12

2.2.2 Thẻ <strong> 12

2.2.3 Thẻ <i> 12

2.2.4 Thẻ <em> 13

2.2.5 Thẻ <u> 13

2.2.6 Thẻ <sup> 13

2.2.7 Thẻ <sub> 13

2.2.8 Thẻ <pre> 14

2.2.9 Thẻ <p> 14

2.2.10 Thẻ <h1> đến <h6> 15

2.2.11 Thẻ <br > 16

Thẻ <hr> 16

Trang 6

Làm việc với danh sách trên trang web 16

2.3.1 Danh sách không có thứ tự 16

2.3.2 Danh sách có thứ tự 17

2.4 Làm việc với các đối tượng media trên trang web 19

2.4.1 Thẻ <img> 19

2.4.2 Thẻ <audio> 20

2.4.3 Thẻ <video> 21

2.4.4 Thẻ <object> 22

2.5 Làm việc với liên kết trên trang web 23

2.5.1 Tạo liên kết đến tài liệu khác 24

2.5.2 Tạo liên kết đến các phần trong cùng một tài liệu 25

2.6 Làm việc với bảng biểu trên trang web 26

2.6.1 Tạo bảng đơn giản 26

2.6.2 Tạo bảng có gộp ô 28

2.7 Làm việc với biểu mẫu trên trang web 29

2.7.1 Khái quát về Form 29

2.7.2 Thẻ <form> 30

2.7.3 Thẻ <input> 32

2.7.4 Thẻ <select> 36

2.7.5 Thẻ <textarea> 37

2.7.6 Thẻ <label> 39

2.7.7 Thẻ <fieldset> 40

2.8 Tạo Bố cục trang 42

2.8.1 Thẻ <header> 43

2.8.2 Thẻ <footer> 43

2.8.3 Thẻ <main> 43

2.8.4 Thẻ <nav> 43

2.8.5 Thẻ <section> 44

2.8.6 Thẻ <article> 44

Thẻ <aside> 44

Trang 7

Thẻ <div> 44

2.8.9 Thẻ <span> 45

BÀI 3 - THIẾT KẾ TRANG WEB VỚI DREAMWEAVER 47

3.1 Tạo và quản lý website 47

3.1.1 Tạo một website 47

3.1.2 Quản lý website 50

3.1.3 Đưa website lên internet 51

3.1.4 Kiểm tra và sửa lỗi trang web 51

3.2 Tạo và định dạng các đối tượng trên trang web 53

3.2.1 Môi trường làm việc của Dreamweaver 53

3.2.2 Các thao tác cơ bản 54

3.2.3 Làm việc với văn bản 55

3.2.4 Làm việc với hình ảnh 57

3.2.5 Làm việc với multimedia 58

3.2.6 Liên kết trang 58

3.2.7 Làm việc với bảng 59

3.2.8 Làm việc với form 63

3.2.9 CSS 68

BÀI 4 - ĐỊNH DẠNG TRANG WEB VỚI CSS 77

4.1 Tạo css cho trang web 77

4.1.1 Khái niệm 77

4.1.2 Cú pháp CSS 77

4.1.3 Đơn vị đo trong CSS 79

4.1.4 Phân loại CSS 80

4.1.5 Tạo và sử dụng Internal style sheet 80

4.1.6 Tạo và sử dụng External style sheet 82

4.1.7 Tạo và sử dụng Inline style 83

Lớp (Class) 84

Trang 8

Định danh (ID) 86

4.2 Định dạng văn bản bằng css 87

4.2.1 Thuộc tính font 87

4.2.2 Thuộc tính text 90

4.3 Định dạng danh sách bằng css 93

4.3.1 Thuộc tính list-style-type: 93

4.3.2 Thuộc tính list-style-image: 94

4.3.3 Thuộc tính list-style-position: 94

4.4 Định dạng thành phần 95

4.4.1 Thuộc tính background 96

4.4.2 Thuộc tính border 99

4.4.3 Thuộc tính box-shadow 102

4.4.4 Thuộc tính margin 102

4.4.5 Thuộc tính padding 105

4.4.6 Thuộc tính height và width 107

4.5 Định dạng hình ảnh bằng css 110

4.6 Tạo bố cục trang web bằng mô hình hộp 113

4.7 Tạo thanh điều hướng cho trang web 120

4.7.1 Pseudo-classes cho liên kết 120

4.7.2 Tạo thanh điều hướng dọc 122

4.7.3 Tạo thanh điều hướng ngang 123

4.8 Định dạng bảng biểu bằng css 125

4.9 Định dạng biểu mẫu bằng css 127

BÀI 5 - Ngôn ngữ JavaScript 132

5.1 Giới thiệu về JavaScript 132

5.2 Nhúng JavaScript vào trang web 132

5.2.1 Đặt mã lệnh JavaScript trực tiếp vào trang web 133

5.2.2 Đặt mã lệnh JavaScript bên trong một tập tin js 134

Tạo tương tác cơ bản với trang web 134

Trang 9

Hiển thị dữ liệu ra màn hình trong JavaScript 134

5.3.2 Sử dụng biến, kiểu dữ liệu, biểu thức, toán tử trong JavaScript 137

5.3.3 Sử dụng câu lệnh điều kiện trong JavaScript 138

5.3.4 Sử dụng câu lệnh lặp trong JavaScript 140

5.3.5 Sử dụng hàm, mảng trong JavaScript 142

5.3.6 Sử dụng các đối tượng cơ bản trong JavaScript 144

5.3.7 DOM 147

5.4 Làm việc với web form 149

5.4.1 Xử lý sự kiện 149

5.4.2 Kiểm tra tính hợp lệ của dữ liệu trong form bằng JavaScript 152

TÀI LIỆU THAM KHẢO 154

PHỤ LỤC 155

DANH MỤC HÌNH 156

DANH MỤC BẢNG 160

Trang 10

GIÁO TRÌNH MÔ ĐUN

Tên mô đun: THIẾT KẾ WEB CƠ BẢN

Mã mô đun: MĐ2101411

Vị trí, tính chất của mô đun:

- Vị trí: là mô đun được bố trí ở học kỳ II (THCS), học kỳ I (THPT)

- Tính chất: là mô đun tích hợp thuộc nhóm mô đun chuyên ngành

Mục tiêu của mô đun:

- Lập được kế hoạch thiết kế của một website

- Sử dụng được các thẻ lệnh HTML để tạo và định dạng văn bản, danh sách, hình ảnh, liên kết, bảng biểu, biểu mẫu trên trang web

- Tạo và quản lý được website bằng Dreamweaver

- Vận dụng được Dreamweaver để tạo và định dạng các đối tượng trên trang web

- Tạo và sử dụng được các kiểu CSS

- Vận dụng được CSS để định dạng các đối tượng văn bản, hình ảnh, liên kết, bảng biểu, biểu mẫu trên trang web

- Tạo được bố cục trang web bằng mô hình hộp

- Tạo được thanh định hướng cho trang web

- Nhúng được đoạn mã JavaScript vào trang web

- Tạo được tương tác cơ bản với trang web bằng JavaScript

- Sử dụng được JavaScript để viết kịch bản đơn giản cho trang web

Về năng lực tự chủ và trách nhiệm:

Trang 11

- Làm việc một cách tỉ mỉ và cẩn thận trong ngôn ngữ HTML

- Rèn luyện khả năng tự học, tư duy sáng tạo

- Phối hợp làm việc theo nhóm

Trang 12

BÀI 1 - PHÁC THẢO WEBSITE

Giới thiệu:

Trong bài học đầu tiên sẽ cung cấp cho người học một số kiến thức cơ bản

về internet và web Bài học này cũng đồng thời giúp người học có cái nhìn tổng quan về quá trình thiết kế một website

Mục tiêu:

- Trình bày được các bước lập kế hoạch thiết kế website

- Lập được kế hoạch thiết kế của một website

- Thiết kế được bố cục của trang web

1.1 CÁC KHÁI NIỆM

1.1.1 Internet và Word Wide Web

- Internet: Internet là một hệ thống thông tin toàn cầu có thể được truy nhập

công cộng gồm các mạng máy tính được liên kết với nhau

- World Wide Web (WWW): là một hệ thống liên kết giữa các tài liệu siêu

văn bản, được truy cập trên internet thông qua trình duyệt web và được cung cấp bởi web server

1.1.2 Web server, web browser và webpage

- Web server đơn giản là một máy tính nối vào Internet và chạy các phần

mềm được thiết kế để truyền tải nội dung dưới dạng trang HTML

Máy chủ phải đủ mạnh để đáp ứng nhiều kết nối Internet đồng thời Thông qua trình duyệt web máy chủ sẽ cung cấp các dịch vụ được yêu cầu đến máy dịch vụ

- Web Browser: Web browser còn được gọi là trình duyệt web - là một phần

mềm được dùng để xem, quản lý và truy cập vào các trang web Mỗi trình duyệt có những đặc điểm khác nhau do đó những trang web được hiển thị trên các trình duyệt khác nhau là không hoàn toàn giống nhau Các trình duyệt phổ biến hiện nay là: Microsoft Internet Explorer, Mozilla Firefox, Apple Safari, Google Chrome, Opera

- Webpage: trang web – một file văn bản chứa dữ liệu và các thẻ HTML hoặc

những đoạn mã mà trình duyệt web có thể hiểu và thông dịch được lưu với phần mở rộng là html hoặc htm

Trang 13

- Website: là 1 tập hợp gồm nhiều trang web thể hiện thông tin của tổ chức, 1

chủ đề nào đó

- Home page: trang chủ của 1 website

- Hyperlink: 1 liên kết chỉ đến trang web khác

- URL (Uniform Resource Locator): là địa chỉ của 1 website, 1 webpage trên

Internet

Có dạng: protocol://domain_name/path

 Protocol: tên giao thức http, ftp, file,…

 Domain name: tên miền - là tên giao dịch của công ty hay tổ chức trên Internet Thường có dạng: yourcompany.com

- Trang web tĩnh: trang web chứa nội dung cố định (thường là HTML, để

cập nhật nội dung phải cập nhật trực tiếp trên HTML), không cho phép sử dụng tương tác, cập nhật dữ liệu trên trang web

- Trang web động: trang web có khả năng tương tác với người sử dụng

Trang web có kết hợp HTML và mã lệnh Mã được thực thi trực tiếp trên server, gửi kết quả là HTML về người sử dụng

1.1.3 Search Engine

- Là công cụ tìm kiếm nhằm tìm ra các trang trên mạng Internet có nội dung

theo yêu cầu người dùng dựa vào các thông tin mà chúng có

- Một số công cụ tìm kiếm mạnh trên thế giới hiện nay: Google.com,

Trang 14

+ Tải website lên internet

+ Cập nhật các trang web và đăng các nội dung trực tuyến

1.2 LẬP KẾ HOẠCH THIẾT KẾ WEBSITE

Các bước lập kế hoạch thiết kế website:

Bước 1: Xác định mục đích của website

- Xác định mục tiêu cơ bản của website: mục tiêu đề ra phải khái quát, ngắn gọn, rõ ràng Mục tiêu phải dài hạn, bao trùm toàn bộ kế hoạch phát triển Đây chính là công cụ hữu hiệu để đánh giá sự thành công của một website

- Xác định đối tượng phục vụ: để có thể thiết kế cấu trúc website phù hợp với nhu cầu, mong muốn của người dùng thì cần phải xác định loại người dùng chính của website Cần tìm hiểu về sự hiểu biết, trình độ, sở thích, kinh nghiệm duyệt web, lứa tuổi…của người dùng Một hệ thống được thiết kế tốt sẽ thích hợp cho một dải rộng trình độ, nhu cầu người dùng

- Xác định thể loại website: việc xác định thể loại website giúp định hướng cho nhà thiết kế Các thể loại website thường gặp: giáo dục, huấn luyện (online trainning), tin tức, giải trí, diễn đàn, trao đổi thảo luận, mua bán, quản lý…

Bước 2: Xác định sơ đồ của website (sitemap)

- Việc xác định sơ đồ website giúp có cái nhìn tổng quát về thông tin của website và các mối liên kết giữa các trang trên website

- Sơ đồ website thường được phác thảo dưới dạng cấu trúc cây

Hình 1.1 Sơ đồ website

Trang 15

Bước 3: Chuẩn bị nội dung website

- Chuẩn bị nội dung cho từng trang: nội dung phải viết ngắn gọn, súc tích,

sử dụng từ ngữ dễ hiểu, đúng chính tả Nên đưa những thông tin mới, có ích cho người xem

- Hình ảnh đẹp, rõ, sắc nét Phải lựa chọn hình ảnh phù hợp với nội dung

Bước 4: Bố cục cho trang web

- Lựa chọn bố cục phù hợp cho trang chủ và các trang con

Bước 5: Lựa chọn màu sắc cho trang web

- Màu sắc nên lựa chọn dựa theo nội dung trang web, nên sử dụng màu sắc tương phản để làm nổi bật nội dung cần thể hiện Không nên sử dụng quá nhiều màu sắc

Bước 6: Chi tiết hóa trang web

- Phác thảo chi tiết cụ thể giao diện cho từng trang web

1.3 THIẾT KẾ BỐ CỤC TRANG WEB

• Bố cục phổ biến của một trang web

HEADER

NAVIGATION

FOOTER Hình 1.2 Bố cục thông thường của một trang web

- Header: là thành phần nằm ở vị trí đầu trên trang web, thường chứa tên

công ty, logo, câu khẩu hiệu, hình ảnh tiêu biểu…

- Navigation (điều hướng):là hệ thống menu liên kết giúp người dùng có

thể duyệt toàn bộ các trang trong một Website Tùy từng bố cục, có thể đặt menu này dạng ngang hoặc đứng

- Content: là phần hiển thị nội dung chính của trang web

- Sidebar: là phần hiển thị nội dung phụ của trang web như các menu phụ,

các bài viết liên quan, quảng cáo,… Tùy theo bố cục mà một website có thể có một hoặc nhiều hơn một sidebar

Trang 16

- Footer: là thành phần nằm ở vị trí cuối trên trang web và được hiển thị ở

tất cả các trang trong website, thường chứa các thông tin về Website: bản quyền, điều khoản sử dụng, tác giả, địa chỉ liên hệ,… Ngoài ra, Footer còn được dùng như một menu liên kết cuối trang để tạo sự tiện lợi cho người dùng

Hình 1.3 Trang web có bố cục thông thường

1.4 BÀI TẬP ÁP DỤNG

1 Phác thảo website giới thiệu Khoa Công nghệ thông tin

2 Phác thảo website bán hàng online

Trang 17

BÀI 2 - THIẾT KẾ TRANG WEB VỚI HTML

- Sử dụng được các thẻ lệnh HTML để tạo và định dạng văn bản, danh sách,

hình ảnh, liên kết, bảng biểu và biểu mẫu trên trang web

2.1 TẠO TRANG WEB ĐẦU TIÊN

2.1.1 Khái niệm HTML

- HTML (Hyper Text Markup Language) là ngôn ngữ đánh dấu siêu văn bản

được thiết kế để xây dựng các trang web HTML tồn tại như là các tập tin văn bản có phần mở rộng là htm hoặc html được chứa trên các máy tính nối vào mạng Internet Các file này chứa các thành phần định dạng để báo cho trình duyệt web biết cách để hiển thị một trang web

- Một trang web thông thường gồm có 2 thành phần chính:

+ Dữ liệu của trang web (văn bản, âm thanh, hình ảnh )

+ Các thẻ (tag) HTML dùng để định dạng mô tả cách thức các dữ liệu hiển thị trên trình duyệt

2.1.2 Các thẻ của tập tin HTML

 Cấu trúc thẻ

- Thẻ HTML là 1 tập các ký hiệu được định nghĩa trong HTML, mỗi thẻ html

có ý nghĩa riêng Các thẻ này dùng để điều khiển nội dung và hình thức trình bày tài liệu HTML

- Cấu trúc thẻ HTML thông thường gồm 2 phần: thẻ mở <tên thẻ> và thẻ

đóng </tên thẻ>

<tên thẻ [thuộc tính]> nội dung </tên thẻ>

+ Tên thẻ và thuộc tính thẻ không phân biệt chữ thường và hoa Tuy nhiên theo khuyến nghị của W3C để tài liệu chặt chẽ hơn thì tên thẻ và thuộc tính nên viết bằng chữ thường

Trang 18

+ Mỗi thẻ có thể không có hoặc có nhiều thuộc tính, các thuộc tính viết cách nhau ít nhất một khoảng trắng Thuộc tính được nhập ngay trước ngoặc đóng „>‟ của thẻ mở Giá trị thuộc tính của thẻ đặt trong dấu nháy đơn hoặc nháy kép

+ Trình duyệt sẽ bỏ qua các khoảng trắng thừa và các dấu ngắt dòng, xuống dòng trong phần nội dung

 Phân loại thẻ

- Thẻ chứa: gồm thẻ mở và thẻ đóng Dữ liệu bị tác động nằm giữa thẻ mở và thẻ đóng

<tên thẻ [thuộc tính] > nội dung </tên thẻ>

- Thẻ rỗng: chỉ gồm một thẻ mở, không có nội dung Có thể có thuộc tính

<strong><em> Thiết kế Web </em></strong >

2.1.3 Tạo trang web

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

Cấu trúc cơ bản của tài liệu HTML thông thường gồm 3 phần:

- <!DOCTYPE>: Phần khai báo chuẩn phiên bản HTML sử dụng

Với những phiên bản HTML khác nhau thì sẽ có DOCTYPE khác nhau: HTML5: <!DOCTYPE html>

- <head></head>: Phần khai tất cả thông tin của tài liệu HTML như khai báo

về meta, title, css, javascript

Trang 19

- <body></body>: Phần chứa nội dung của trang web, tất cả nội dung mà người dùng nhìn thấy sẽ được khai báo ở đây

Hình 2.1 Cấu trúc của tài liệu html

 Tạo trang web

Để tạo tài liệu html, chỉ cần sử dụng một chương trình soạn thảo văn bản

để soạn thảo và sau đó lưu lại với tên tập tin có phần mở rộng htm hoặc html

Có nhiều chương trình soạn thảo tài liệu html từ đơn giản đến chuyên nghiệp như: Notepad, Notepad++, EditPlus, FrontPage, Dreamweaver,…

Ví dụ 1: Tạo trang web bằng Notepad++

- Mở Notepad++ và nhập vào nội dung sau:

Trang 20

Hình 2.3 Trình soạn thảo Notepad++

- Lưu tập tin: chọn File  Save As

+ Save in: chọn thư mục lưu trữ + File name: nhập tên file (vidu1) + Save As Type: chọn Hyper Text Markup Language file

 Save

Hình 2.4 Hộp thoại Save As

- Hiển thị trang web trên trình duyệt:

+ Chọn Run  chọn trình duyệt muốn hiển thị trang web

Hình 2.5 Menu lệnh Run

Trang 21

2.1.4 Các thẻ định cấu trúc tài liệu HTML

Cấu trúc cơ bản của tài liệu HTML gồm:

<!DOCTYPE html>: phần khai báo chuẩn của HTML5

<html></html>: phần khai báo tài liệu HTML

<head></head>: phần mở đầu của tài liệu HTML

<body></body>: phần chứa nội dung của trang web, phần sẽ được hiển thị trên trình duyệt

Trang 22

<title>Tiêu đề của tài liệu HTML </title>

Thẻ <meta> phải được đặt trong cặp thẻ <head>

- Cú pháp:

Ví dụ 2:

Trang 23

<title> Welcome to HTML </title>

2.2 LÀM VIỆC VỚI VĂN BẢN TRÊN TRANG WEB

Các thẻ dùng định dạng ký tự như: <i>, <u>, <b>, <em>, <strong>,

<sup>, <sub>… dùng phổ biến trong html4, tuy nhiên khuyến cáo sử dụng css

<b> Nội dung văn bản </b>

<strong> Nội dung văn bản </strong>

<i> Nội dung văn bản </i>

Trang 24

<em> Nội dung văn bản </em>

<u> Nội dung văn bản </u>

<sup> Nội dung văn bản </sup>

<sub> Nội dung văn bản </sub>

Trang 25

Hiển thị trên trình duyệt:

Hình 2.7 Kết quả ví dụ 4

2.2.8 Thẻ <pre>

Thẻ <pre> được dùng khi muốn hiển thị đúng dạng văn bản đã soạn thảo (không bỏ qua khoảng trắng, ngắt dòng)

- Cú pháp:

Ví dụ 5:

Hình 2.8 Kết quả ví dụ 5 2.2.9 Thẻ <p>

Thẻ <p> được sử dụng để định nghĩa một đoạn văn bản

Thẻ <p> tự động tạo một khoảng trắng trước và sau nó, khoảng trắng này tùy trình duyệt sẽ khác nhau

<pre> Văn bản đã được định dạng </pre>

Trang 26

<h1> nội dung</h1> Định dạng tiêu đề cấp 1

<h2> nội dung </h2> Định dạng tiêu đề cấp 2

Trang 27

Thẻ <hr > dùng tạo đường phân cách giữa các thành phần trong trang web

- Cú pháp:

<hr>

2.3 LÀM VIỆC VỚI DANH SÁCH TRÊN TRANG WEB

Các kiểu danh sách thường dùng:

- Danh sách không có thứ tự

- Danh sách có thứ tự

2.3.1 Danh sách không có thứ tự

Thẻ <ul> sử dụng để tạo danh sách không có thứ tự Ký hiệu đầu dòng

Thẻ <ul> được sử dụng kèm với thẻ <li>

Trang 28

- Cú pháp:

Ví dụ 8:

<ul>

<li>Coffee</li>

</ul>

Hình 2.11 Kết quả ví dụ 8 2.3.2 Danh sách có thứ tự

Thẻ <ol> sử dụng để tạo danh sách có thứ tự Ký hiệu đầu dòng đứng

Trang 29

Ví dụ 9:

<ol>

<li>Coffee</li>

Trang 30

2.4 LÀM VIỆC VỚI CÁC ĐỐI TƢỢNG MEDIA TRÊN TRANG WEB

alt Text alt="logo CTy" Xác định văn bản thay thế

khi hình ảnh không hiển thị

src URL src="img/ logo.gif" Địa chỉ của tập tin ảnh cần

chèn vào tài liệu

title Text title = "trang chủ" Văn bản hiển thị khi di

chuyển chuột trên hình ảnh

Ví dụ 11: chèn hình html5.gif vào tập tin index.html Hình html5.gif chứa

trong thư mục image và index.html chứa trong thư mục html, thư mục image và thư mục html ngang cấp nhau

Sử dụng địa chỉ tương đối:

<img src=" /image/html5.gif" alt="HTML5 Icon"

width="128px" height="128px">

Ví dụ 12: chèn hình w3schools_green.jpg từ website w3schools

Sử dụng địa chỉ tuyệt đối:

Trang 31

Thẻ <audio> dùng chèn âm thanh vào tài liệu HTML

Hỗ trợ các định dạng file: MP3, Wav, Ogg (tùy trình duyệt)

đoạn âm thanh

Ví dụ 13:

<audio src="hello.mp3" controls="controls">

Trình duyệt bạn sử dụng không hỗ trợ thẻ audio

</audio>

Trang 32

2.4.3 Thẻ <video>

Hỗ trợ các định dạng file: MP4, WebM, Ogg (tùy trình duyệt)

thanh

video

không

Trang 33

Hình 2.15 Kết quả ví dụ 14 2.4.4 Thẻ <object>

Thẻ <object> dùng chèn các đối tượng (plug-in) vào trang HTML Các đối tượng có thể là trang HTML, hình ảnh, audio, video, Java applets, ActiveX, PDF, Flash

Thẻ <object> được hầu hết các trình duyệt hỗ trợ

Tuy nhiên, để chèn ảnh nên dùng thẻ <img>, chèn trang HTML nên dùng thẻ <iframe>, chèn video nên dùng thẻ <video>, chèn âm thanh nên dùng thẻ

Trang 34

Ví dụ 15: chèn flash vào trang web

</object>

Ví dụ 16: chèn một tập tin HTML vào trang web

data=" /resources/html5.html">

</object>

2.5 LÀM VIỆC VỚI LIÊN KẾT TRÊN TRANG WEB

Khả năng chính của HTML là hỗ trợ liên kết Một liên kết là sự kết nối đến tài liệu hay tập tin khác hoặc đến một phần khác trong cùng tài liệu đó Các địa chỉ đặt liên kết đến có thể là:

- Một phần khác trong cùng tài liệu

- Một tài liệu khác

- Một phần trong tài liệu khác

- Các tập tin khác: văn bản, hình ảnh, âm thanh,

Bảng 2.5 Ký hiệu đường dẫn

/ Trở về thư mục gốc của website / Thư mục hiện tại của trang web sử dụng link (mặc định) / Quay ra thư mục cha / đi ngược lại 1 cấp thư mục

Trang 35

Mặc định trong tất cả các trình duyệt các vị trí có liên kết đều được gạch chân, liên kết chưa thăm có màu xanh, liên kết đã thăm có màu tím và liên kết đang nhấn chọn sẽ có màu đỏ

2.5.1 Tạo liên kết đến tài liệu khác

- Cú pháp:

<a [thuộc tính] > siêu văn bản </a>

- Thuộc tính:

Bảng 2.6 Các thuộc tính thẻ <a>

href URL href="index.html" Địa chỉ đến liên kết

target

_blank _parent _self _top

Target="_blank"

Xác định nơi để mở tài liệu

_blank: mở tài liệu ở cửa

sổ mới _parent: mở tài liệu ở cửa

sổ cha của trang hiện hành

_self: mở tài liệu ở cửa sổ hiện hành

_top: mở tài liệu vào cửa

sổ cao nhất

chuyển chuột trên liên kết

Ví dụ 17: tạo liên kết từ baihoc1.html đến baihoc2.html; baihoc1.html và

baihoc2.html đều nằm trong cùng thư mục baihoc

<a href="baihoc2.html">

Bài học 2

</a>

Trang 36

Ví dụ 18: tạo liên kết từ baihoc1.html đến baitap1.html; baihoc1.html nằm

trong thư mục baihoc, baitap1.html nằm trong thư mục baitap

Baitap va baihoc có cùng thư mục cha là thietkeweb

Ví dụ 19: tạo liên kết đến trang web ở máy chủ khác

<a href="http://www.intel.com"> Intel Home Page

</a>

Ví dụ 20: tạo liên kết đến email

<a href="mailto:hotec@hotec.edu.vn"> email Hotec

</a>

Ví dụ 21: mở (hay download) một file (file word, excel, pdf, image, )

<a href="doc/vidu.doc"> Mở file vidu.doc trong thư mục "doc"</a>

2.5.2 Tạo liên kết đến các phần trong cùng một tài liệu

Để tạo liên kết đến các phần trong cùng một tài liệu thực hiện qua 2 bước:

+ Bước 1: đánh dấu vị trí neo bằng cách thêm thuộc tính

id=“TenViTriNeo” vào thẻ đóng vai trò là điểm tham chiếu (thẻ <p>, thẻ tiêu đề

<h1>, <h2>, …)

+ Bước 2: tạo liên kết đến vị trí neo bằng thẻ với thuộc tính href=“#TenViTriNeo”

<a href=“#TenViTriNeo”> Text đại diện </a>

Ví dụ 22: người dùng nhấn vào vị trí „Về Chương 1‟ thì trình duyệt sẽ chuyển

đến vị trí neo của Chương 1 trong cùng trang web

<h2 id="Chuong1"> Chương 1 </h2>

<! Nội dung chương 1 >

<a href="#Chuong1"> Về Chương 1</a>

Ví dụ 23: người dùng nhấn vào vị trí „Đén Chương 1‟ thì trình duyệt sẽ

chuyển đến vị trí neo của Chương 1 trên trang web baihoc.html

<h2 id="Chuong1"> Chương 1 </h2>

<! Nội dung chương 1 >

<a href=" baihoc.html#Chuong1"> Đến Chương 1</a>

Trang 37

2.6 LÀM VIỆC VỚI BẢNG BIỂU TRÊN TRANG WEB

2.6.1 Tạo bảng đơn giản

Các thẻ thường dùng trong tạo bảng:

<th> Định nghĩa ô chứa tiêu đề của cột hoặc dòng

<caption> Tiêu đề của bảng Thẻ <table> chứa bên trong nó các thẻ <caption>,<tr>, <th> và <td> Thẻ <tr> chứa bên trong nó các thẻ <th>,<td>

Thẻ <td> chứa bên trong nó là nội dung của ô

Có thể tạo một bảng con trong một bảng bằng cách thêm thẻ <table> vào bên trong thẻ <td>

Trang 38

Ví dụ 24:

* Ghi chú: HTML5 không hỗ trợ hầu hết các thuộc tính định dạng bảng do đó dùng các thuộc tính css để thay thế (xem bài 3)

Trang 39

2.6.2 Tạo bảng có gộp ô

Sử dụng thuộc tính colspan, rowspan trong thẻ <td>, <th> để gộp ô

- Gộp các ô theo chiều ngang:

- Gộp các ô theo chiều dọc:

Ví dụ 25:

Trang 40

2.7 LÀM VIỆC VỚI BIỂU MẪU TRÊN TRANG WEB

2.7.1 Khái quát về Form

Form dùng để nhận thông tin từ người dùng hoặc phản hồi thông tin đến người dùng

Qua form người dùng có thể có các yêu cầu như:

- Nhập vào câu trả lời, ý kiến

- Chọn câu trả lời từ danh sách

- Chọn câu trả lời từ một hoặc một số tùy chọn

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