THIẾT KẾ VÀ QUẢN TRỊ NỘI

DUNG WEBSITE

Ths. Đặng Trần Long

Đặng Trần Long Khoa Thông Tin Thư Viện 1

 THIẾT KẾ VÀ QUẢN TRỊ NỘI DUNG WEBSITE

• Thông tin
• Giảng viên: Ths Đặng Trần Long
• Email: tranlong.hus@gmail.com
• Phone: 0988465312 (Zalo)
• Điểm thành phần
• Chuyên cần: 10%
• Giữa kỳ: 30%
• Cuối kỳ: 60%

Đặng Trần Long Khoa Thông Tin Thư Viện 2

 MỤC TIÊU MÔN HỌC

• Môn học cung cấp những kiến thức cơ bản về world wide web, các giao thức, ngôn ngữ đánh dấu và một
số ngôn ngữ khác dùng để tạo website. Thông qua việc giới thiệu một số công cụ thiết kế và trợ giúp việc
xây dựng website, giúp học viên nắm được những yêu cầu, qui trình thiết kế, triển khai và quản trị một
website thực tế.

Đặng Trần Long Khoa Thông Tin Thư Viện 3

 MỤC TIÊU TUẦN 4

• Thiết kế được bảng trong HTML

• Thiết kế được Form
• Thiết kế được danh sách
• Thiết kế được khung (Frame)
• Thiết kế được iFrame, Marquee

Đặng Trần Long Khoa Thông Tin Thư Viện 4

 ĐỊNH DẠNG BẢNG (TABLE)

• <table > và </table>: Tạo bảng

• <tr> và </tr>: Tạo một hàng
• <td> và <td>: Tạo một ô
• Cú pháp:

Đặng Trần Long Khoa Thông Tin Thư Viện 5

 CÁC THUỘC TÍNH CỦA BẢNG (TABLE)

• align=(“left”,“right”...): Căn lề dữ liệu (theo chiều ngang)

• background = “url”: địa chỉ ảnh nền của bảng
• bgcolor= “color-type”: màu của bảng
• width= “n”: Chiều rộng của bảng
• height=”n”: Chiều cao của bảng
• border=” n”: đường viền của bảng
• bordercolor = “ color-type” : màu đường viền
• cellpadding=” n “: khoảng cách từ ô tới nội dung của ô
• cellspacing=”n “: khoảng cách giữa các ô trong bảng

Đặng Trần Long Khoa Thông Tin Thư Viện 6

 CÁC THUỘC TÍNH CỦA <TR>

• align = (“left”, “right”...): căn lề dữ liệu (theo chiều ngang)

• valign = (“top”, “bottom”...): căn lề dữ liệu (theo chiều dọc)
• bgcolor= “color-type:”: màu của hàng
• background= url: địa chỉ ảnh nền của hàng

Đặng Trần Long Khoa Thông Tin Thư Viện 7

 CÁC THUỘC TÍNH CỦA Ô <TD>

• align= (“left” ,”right”...): căn lề dữ liệu (theo chiều ngang)

• valign= (“top”, “bottom”...): căn lề dữ liệu (theo chiều dọc)
• bgcolor= "color-type”: màu của hàng
• background= “url”: địa chỉ ảnh nền của hàng
• colspan="n”: ô trải rộng trên n cột
• rowspan="n”: ô trải dài trên n hàng
• height ="n": chiều cao của ô
• width= "n”: chiều rộng của ô

Đặng Trần Long Khoa Thông Tin Thư Viện 7

 TẠO FORM TRONG HTML

• Form: Một mẫu biểu (form) trong HTML bao gồm nhiều thành phần khác nhau. Các thành phần có thể
là ô văn bản, ô kéo thả, ô danh sách, nút bấm, hay các ô check ... form dùng để nhận thông tin từ người
sử dụng, hay phản hồi thông tin đến người sử dụng.
• Cấu trúc:
• method : Thuộc tính này có 2 giá trị POST hoặc GET
• Action: gửi đến đâu
• Name: tên form

Đặng Trần Long Khoa Thông Tin Thư Viện 8

 CÁC PHẦN TỬ NHẬP DỮ LIỆU TRONG FORM

• Cú pháp

Trong đó:
• Type:
• Text (phần tử textbox)
• Password (phần tử mật khẩu
• Name: tên của phần tử
• Value: giá trị của phần tử
• Size: chiều dài
• Maxlengt: chiều dài tối đa nhập dữ liệu
Đặng Trần Long Khoa Thông Tin Thư Viện 9
 PHẦN TỬ NHẬP ĐOẠN VĂN BẢN(TEXTAREA)

• Cú pháp: <textarea cols = “n” rows=”m”></textarea>

• Trong đó:
• Cols: số ký tự một dòng
• Rows: Số dòng
• Name: tên của phần tử

Đặng Trần Long Khoa Thông Tin Thư Viện 10

 CÁC PHẦN TỬ NÚT NHẤN (FORM)

• Cú pháp: <input type = “loại phần tử” name=”tên” value=”giá trị”>

• Trong đó:
• Type:
• Button
• submit
• Name: tên của phần tử
• Value: giá trị phần tử

Đặng Trần Long Khoa Thông Tin Thư Viện 11

 PHẦN TỬ CHỌN LỰA TRONG FORM

• Cú pháp: <input type = “loại phần tử” name=”tên” value=”giá trị” checked >
• Trong đó:
• Type:
• Checkbox
• radio
• Name: tên của phần tử
• Value: giá trị
• Checked: mặc định chọn / không chọn

Đặng Trần Long Khoa Thông Tin Thư Viện 12

 PHẦN TỬ DANH SÁCH(LISTBOX)

• Cú pháp:

Trong đó:
• <select>: Bắt đầu của 1 listbox
• <option>: Mỗi dòng trong listbox
• Multiple: Cho phép chọn nhiều hàng
• Selection: Mặc định chọn
• Size: Số hàng hiện thị
• Value: Giá trị của phần tử

Đặng Trần Long Khoa Thông Tin Thư Viện 13

 TẠO HIỆU ỨNG CHUYỂN ĐỘNG MARQUEE

• Cú pháp: <MARQUEE> Đối tượng áp dụng hiệu ứng </MARQUEE>

• Trong đó:
• Align: sắp xếp canh chỉnh lề với các giá trị left/right/top/middle/bottom
• Behavior: Chỉ định phương pháp cuộn với giá trị scroll/slide/alternate
• BGColor: màu nền khung
• Direction: hướng cuộn văn bản với các giá trị left/right
• Height: Chiều cao khung
• Width: Chiều rộng khung
• HSpace, Vspace: Khoảng cách ngang và dọc (align)
• Loop: Chỉ định số lần lặp lại của dòng Marquee
• ScrollDelay: Chỉ định khoảng thời gian chờ sau mỗi lần cuộn
• ScrollAmount: Chỉ định số Pixel giữa mỗi lần trượt.

Đặng Trần Long Khoa Thông Tin Thư Viện 14

 FARME

• Frame dùng để chia cửa sổ trình duyệt thành nhiều phần khác nhau, mỗi phần có thể hiển thị được một
trang web riêng biệt. Các trang web có thể liên kết với nhau.
• Frame được sử dụng khi: Tạo liên kết chỉ mục, những thành phần có giao diện cố định, giao diện dạng
xem tài liệu.
• Cú pháp:

Đặng Trần Long Khoa Thông Tin Thư Viện 15

 FARME
Thuộc tính Mô tả
Rows Xác định độ rộng của khung, được tính theo điểm (pixels), phần trăm hoặc độ rộng tương
đối. Giá trị mặc định là 100%, nghĩa là 1 dòng
Cols Xác định độ cao của khung, được tính theo điểm (pixels), phần trăm hoặc độ cao tương
đối. Giá trị mặc định là 100%. Nó xác định chỉ có 1 cột
Border Độ dày của đường viền khung
Name Thuộc tính này gán tên cho khung hiện thời
src Thuộc tính này xác định vị trí tài liệu ban đầu được chứa trong khung
Noresize Đây là thuộc tính logic. Nó qui định cửa sổ khung không được thay đổi kích thước
Scrolling Thuộc tính này xác định kiểu cuộn cho cửa sổ khung. Các giá trị có thể là: Auto/yes/no
Frameborder Xác định viền của khung (ẩn/hiện đường viền khung). Các giá trị có thể là: 1/0
Marginwidth Xác định khoảng cách giữa nội dung trong khung với lề trái và lề phải của khung. Giá trị
phải lớn hơn một
Marginheight Xác định khoảng cách giữa nội dung trong khung với lề trên và lề dưới của khung. Giá
trị phải lớn hơn một
Đặng Trần Long Khoa Thông Tin Thư Viện 16
 IFRAME

• Đây là một hình thức frame dễ xử dụng hơn rất nhiều, ta có thể chèn frame này vào bất cứ đâu trên
trang web html bình thường, giống như một phần tử. Để làm được điều đó, bạn dùng tag <iframe> với
các thuộc tính sau:
• Src: Đường dẫn tới tệp tin cần hiển thị
• Name: Tên của khung
• width: Chiều rộng của khung, giá trị % màn hình hay px
• height: Chiều cao của khung, giá trị % màn hình hay px
• Scrolling: Xác định kiểu cuộn cho cửa sổ khung(yes/ no/ Auto)

Đặng Trần Long Khoa Thông Tin Thư Viện 17

 CẢM ƠN

Đặng Trần Long Khoa Thông Tin Thư Viện 26