Học phần: Thiết kế Web GV: Đinh Nguyễn Trọng Nghĩa

Học phần: Thiết kế Web
GV: Đinh Nguyễn Trọng Nghĩa
Zalo: 0986 94 23 89
Website: http://thongthai.work
© Đinh Nguyễn Trọng Nghĩa

Nội dung chi tiết học phần
Thiết kế được giao diện web bằng các
ngôn ngữ và công cụ sau
- HTML
- CSS
- Javascript
- Bootstrap

Tài liệu
* Tài liệu:
[1] Bài giảng Thực hành Thiết kế Web, Khoa CNTT, 2022
[2] Bộ video bài giảng Lập trình Web,
https://www.youtube.com/playlist?list=PLf5IPckgFwFXY
4gneSWT2Tadyr4J3ihX6
[3] Bộ video bài giảng Thiết kế Web,
https://www.youtube.com/playlist?list=PLf5IPckgFwFXvu
29E7aRymzxBeIVEInlR

Đánh giá học phần
- Đồ án (30%)
- Bài tập – Kiểm tra (70%)
➢ Về nhà: Trắc nghiệm (20%). Lưu ý:
Nộp trễ: 0đ
➢ Kiểm tra trên lớp (50%)
• Lần 1 (B6): 10%
• Lần 2 (B10): 20%
• Lần 3 (B14): 20%

Đánh giá học phần
Điểm thái độ: Cộng và trừ vào điểm 70%. Cụ thể:

• Vắng (-1đ) – Trễ (-0.5đ) – Trốn nghỉ sớm xem như
vắng. Có tham gia lớp sẽ có cộng điểm.
• Mỗi buổi học thầy sẽ đặt một số câu hỏi và hỏi ngẫu
nhiên. Trả lời được sẽ được cộng điểm, không được
sẽ được trừ điểm.
• Chép bài khi kiểm tra (giống code, lấy bài người
khác nộp, …): 0đ môn học

Phương thức trao đổi thông tin
- Mã lớp 22260106
- Google Classroom: Dùng để lấy tài liệu, nộp bài

tập. Không trao đổi và đặt câu hỏi trên đây.
- Zalo: Thông báo và trao đổi thông tin
- Thắc mắc: nhắn vào group zalo. Những câu hỏi

liên quan đến môn học không nhắn tin cá nhân.
Sẽ không được phản hồi.
Phần mềm sử dụng
• Môi trường lập trình:
Visual Studio Code - https://vscode.dev/

Chia nhóm thực hiện đồ án
• Lưu ý
✓ Nhóm đã tạo không được thêm thành viên. Đề tài

được giao không thể thay đổi.
✓ Số lượng thành viên nhóm: 1 thành viên.
✓ Đề tài của các nhóm sẽ được giao vào buổi số 2.
✓ Nộp vào tuần 14

Thắc mắc ?
Đặt câu hỏi !!!

Chương 1.
HTML & CSS
1. Giới thiệu
2. Ngôn ngữ HTML
3. CSS

Giới thiệu về HTML
 HTML (Hyper Text Markup Language - Ngôn ngữ đánh dấu
siêu văn bản)
 Là một ngôn ngữ dùng để xây dựng một trang Web.
 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 ở trên hiển thị trên trình duyệt.
google “HTML tag“ hoặc
http://www.w3schools.com/html/DEFAULT.asp
◦Các thẻ không phân biệt chữ hoa hay chữ thường
HTML file có thể được tạo từ một trình soạn thảo văn bản bất kỳ
Cấu trúc trang HTML
<html>
<head>
Phần đầu
<title>Tiêu đề </title>
trang HTML
</head> Bắt đầu và
Kết thúc của
<body> trang HTML
Nội dung 1 Nội dung
Nội dung 2 trang HTML
Nội dung 3
</body>
</html>

Cấu trúc tag (thẻ) HTML
 <Tag> Dữ liệu </Tag>
 Tên Tag thường bắt nguồn từ một từ tiếng Anh
Ví dụ: <b> ~ Bold, <i> ~ Italic, <p> ~ Paragraph
Các thẻ không cần Tag đóng <br />, <hr />
Cú pháp: (giống bánh mì kẹp thịt)

<tentag ThuocTinh1=“GiaTri1” ThuocTinh2=“GiaTri2” …>
Dữ liệu
</tentag>
VD:
<p style="color:black; font-size:15px">Đoạn văn bản đầu tiên</p>
<body style="background-color:aquamarine;">…. </body>

Ví dụ

HTML
• Các Tag xử lý văn bản

• Tag hình ảnh
• Tag tạo danh sách
• Tag tạo liên kết

Các tag xử lý văn bản
Các thẻ định dạng khối văn bản
Tiêu đề (Heading) : <h1>, <h2>, <h3>, <h4>,
<h5>, <h6>
Đoạn văn bản (Paragraph): <p>
Tạo danh sách: <ul> <ol>
Các mục Danh sách (List Items): <li>
Đường kẻ ngang (Horizontal Rules): <hr>
Các thẻ định dạng chuổi văn bản
Định dạng chữ : <i> <b> <sub> <sup> …
Tạo liên kết : <a>
Xuống dòng : <br>

Ví dụ

Các tag xử lý văn bản
Các ký tự đặc biệt ?
•Dấu <, >, & Dấu nháy kép “ Các ký tự đặc biệt : @ ©
Ký tự Mô tả Tên Mã
“” Khoảng trống (non-breaking
space)
© Bản quyền © ©
® Thương hiệu đã được đăng ký ® ®
™ Thương hiệu ™
€ Đồng Euro €
£ Bảng Anh &puond; £
< Ký tự nhỏ hơn (less than) < <
> Ký tự lớn hơn (greater than) > >
& Ký hiệu & (ampersand) & &

Tag hình ảnh
Tag hình ảnh <img>
•<img /> : Không có thẻ đóng
•Các thuộc tính của tag <img>:
−src : Đường dẫn đến file hình ảnh
−alt : Chú thích cho hình ảnh
•Đặt ảnh nền cho trang web

−Sử dụng thẻ
<body style="background-image: url(url)">

Tag danh sách <ol>

Tag danh sách <ul>

Tag liên kết
Tag liên kết
•Cú pháp:
<A href=“URL”> nhãn </A>
URL : địa chỉ của trang liên kết
Nhãn : có thể là text, hình ảnh
hay button

Tag liên kết
Thuộc tính TARGET của thẻ <A>
<A HREF=“URL” TARGET=“…”> hypertext </A>
◦_blank: Tải trang web vào cửa sổ mới
◦_parent: Tải trang web vào cửa sổ cha của nó
◦_self: Tải trang web vào chính cửa sổ hiện hành
◦_top: Tải trang web vào cửa số cao nhất

Tag liên kết
Nếu nội dung của trang quá dài thì nên tạo các Bookmark để
khi xem, người dùng click vào bookmark để nhảy đến một phần
cụ thể nào đó trên chính trang đó: gồm 2 bước
◦Đánh dấu vị trí liên kết nội (Tạo BookMark) :
<a name=”tên Bookmark”> Tiêu đề </A> Nội dung phần văn bản
◦Tạo liên kết nội (Tạo liên kết đến Bookmark):
<a href =”#tên Bookmark”>Nhãn của liên kết</A>
Hoặc
<a href =”URL#tên Bookmark”>Nhãn của liên kết</A>

Thẻ <div>
Thẻ <div>: tạo ra một khu vực.
Ví dụ thường thì một website sẽ có 4 phần chính
là header (hiển thị banner, logo), content (hiển thị nội
dung), sidebar (cột bên cạnh nội dung) và footer (khu
vực chân website).

Thẻ <div>

Thẻ <div>

Bài tập

Bài tập 1
Tạo file alignment.html
Yêu cầu
• Đổi màu chữ
➢ H1: Red; H2: Yellow, H3: Green, H4: Blue
• Đổi màu nền cho trang

Bài tập 2
Tạo file externallink.html

Bài tập 3
Tạo file DS1.html
Yêu cầu
• Tiêu đề <h3>, đỏ
• Các dòng nội dung là danh sách có thứ tự, màu xanh

Bài tập 4
Tạo file BT4.html
Yêu cầu
• Tạo trang Web có 2
phần như hình
• Phần trên xanh lá,
chiếm 30%
• Phần dưới xanh dương,
chiếm 70%

Bài tập 5
Tạo file BT5.html
Yêu cầu
• Chiều cao của khung bên ngoài thiết lập auto
• Nội dung Website liên kết đến externallink.html của Bài2
• Điền Họ tên và MSSV vào footer. Liên kết đến trang Sinh
viên của trường

Bài tập 6
Tạo file hoatuoi.html
Yêu cầu
• Liên kết ở footer đến http://fit.hufi.edu.vn

Bài tập 7
Tạo file DS2.html

Bài tập 8
Tạo file QC1.html
Yêu cầu
• Liên kết tùy ý

Bài tập 9
Tạo file QC2.html
Yêu cầu

Bài tập 10
Tạo file QC3.html
Yêu cầu

Học phần: Thiết kế Web GV: Đinh Nguyễn Trọng Nghĩa

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Học phần: Thiết kế Web GV: Đinh Nguyễn Trọng Nghĩa

Uploaded by

Copyright:

Available Formats

Học phần: Thiết kế Web

GV: Đinh Nguyễn Trọng Nghĩa

© Đinh Nguyễn Trọng Nghĩa

© Đinh Nguyễn Trọng Nghĩa

© Đinh Nguyễn Trọng Nghĩa

© Đinh Nguyễn Trọng Nghĩa

Điểm thái độ: Cộng và trừ vào điểm 70%. Cụ thể:

© Đinh Nguyễn Trọng Nghĩa

- Google Classroom: Dùng để lấy tài liệu, nộp bài

- Zalo: Thông báo và trao đổi thông tin

- Thắc mắc: nhắn vào group zalo. Những câu hỏi

• Môi trường lập trình:

Visual Studio Code - https://vscode.dev/

© Đinh Nguyễn Trọng Nghĩa

✓ Nhóm đã tạo không được thêm thành viên. Đề tài

✓ Số lượng thành viên nhóm: 1 thành viên.

✓ Đề tài của các nhóm sẽ được giao vào buổi số 2.

✓ Nộp vào tuần 14

© Đinh Nguyễn Trọng Nghĩa

Đặt câu hỏi !!!

© Đinh Nguyễn Trọng Nghĩa

HTML & CSS

2. Ngôn ngữ HTML

© Đinh Nguyễn Trọng Nghĩa

© Đinh Nguyễn Trọng Nghĩa

Cú pháp: (giống bánh mì kẹp thịt)

© Đinh Nguyễn Trọng Nghĩa

© Đinh Nguyễn Trọng Nghĩa

• Các Tag xử lý văn bản

© Đinh Nguyễn Trọng Nghĩa

© Đinh Nguyễn Trọng Nghĩa

© Đinh Nguyễn Trọng Nghĩa

© Đinh Nguyễn Trọng Nghĩa

•Đặt ảnh nền cho trang web

© Đinh Nguyễn Trọng Nghĩa

© Đinh Nguyễn Trọng Nghĩa

© Đinh Nguyễn Trọng Nghĩa

© Đinh Nguyễn Trọng Nghĩa

© Đinh Nguyễn Trọng Nghĩa

© Đinh Nguyễn Trọng Nghĩa

© Đinh Nguyễn Trọng Nghĩa

© Đinh Nguyễn Trọng Nghĩa

© Đinh Nguyễn Trọng Nghĩa

© Đinh Nguyễn Trọng Nghĩa

© Đinh Nguyễn Trọng Nghĩa

© Đinh Nguyễn Trọng Nghĩa

© Đinh Nguyễn Trọng Nghĩa

© Đinh Nguyễn Trọng Nghĩa

© Đinh Nguyễn Trọng Nghĩa

© Đinh Nguyễn Trọng Nghĩa

© Đinh Nguyễn Trọng Nghĩa

© Đinh Nguyễn Trọng Nghĩa

© Đinh Nguyễn Trọng Nghĩa

© Đinh Nguyễn Trọng Nghĩa

You might also like