Tải bản đầy đủ

Xây dựng website giới thiệu công ty TNHH một thành viên MVB hải phòng

LỜI CẢM ƠN
Trong quá trình làm đề tài mặc dù đã có nhiều cố gắng nhưng kinh nghiệm
còn chưa nhiều nên thiết kế của em không thể tránh khỏi những thiếu sót. Em rất
mong nhận được sự chỉ bảo, đóng góp ý kiến của toàn thể các thầy cô giáo để thiết
kế của em ngày càng hoàn thiện hơn nữa.
Đầu tiên em xin gửi lời cảm ơn chân thành đến thầy Bùi Anh Tú giảng viên
bộ môn Công Nghệ Phần Mềm - Khoa Công Nghệ Thông Tin - Trường Đại
Học Công Nghệ Thông Tin và Truyền Thông người đã hết lòng giúp đỡ, hướng
dẫn và chỉ bảo tận tình trong quá trình em làm đồ án tốt nghiệp này.
Em xin gửi lời cảm ơn chân thành đến các thầy cô trong trường Đại học
Công Nghệ Thông Tin và Truyền Thông đã tận tình giảng dạy quan tâm và tạo
điều kiện thuận lợi để chúng em học tập, rèn luyện và truyền đạt cho em những
kiến thức vô cùng quý báu trong suốt thời gian em theo học tại trường.
Em xin gửi lời cảm ơn đến anh Lê Đức Tuấn – Phó giám đốc công ty
TNHH MVB và các anh chị nhân viên tại công ty đã tạo điều kiện và nhiệt tình
giúp đỡ em trong việc thu thập dữ liệu để thực hiện đồ án này.

Em xin chân thành cảm ơn !

Sinh viên thực hiện
Nguyễn Yến Đường


1


LỜI CAM ĐOAN
Sau thời gian nỗ lực thực hiện đồ án tốt nghiệp dưới sự dẫn dắt của giáo
viên hướng dẫn em đã hoàn thành đúng thời gian quy định và hoàn thành được yêu
cầu của đồ án, bản thân em đã cố gắng tìm hiểu và nghiên cứu, học tập và thực
hiện trong thời gian làm đồ án tốt nghiệp. Em đã tham khảo một số tài liệu được
nêu trong phần “Tài liệu tham khảo” và các website thông tin và giới thiệu , cùng
các diễn đàn tin học trên Internet.
Nội dung đồ án hoàn toàn không sao chép từ các đồ án khác, không vi
phạm bản quyền tác giả. Toàn bộ đồ án là do bản thân em tìm hiểu, nghiên cứu và
sản phẩm của đồ án là của chính bản thân xây dựng nên.
Em xin cam đoan những lời trên là đúng, nếu có thông tin sai lệch em xin
hoàn toàn chịu trách nhiệm trước Hội đồng.
Thái nguyên, ngày 01 tháng 06 năm 2015.
Sinh viên
Nguyễn Yến Đường

2


MỤC LỤC
LỜI CẢM ƠN
1
LỜI CAM ĐOAN 2
MỤC LỤC 3
DANH MỤC HÌNH ẢNH 5
LỜI MỞ ĐẦU
7
CHƯƠNG 1. CƠ SỞ LÝ THUYẾT
8
1.1. HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
1.1.1. Định nghĩa về HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
1.1.2. Thành phần của HTML. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
1.1.3. Cơ bản về các thẻ HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
1.1.4. Điểm khác biệt giữa HTML và HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
1.2 CSS. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
1.2.1 Giới thiệu về CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

1.2.2 CSS3. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
1.3 Giới thiệu về UML. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
1.3.1 Khái niệm và đặc điểm của UML. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
1.3.2 Mô hình khái niệm của UML. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
1.4 Tổng quan về SEO . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
1.4.1 Các khái niệm liên quan . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
1.4.2 Ưu điểm của SEO . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
1.4.3 Cơ chế hoạt động của Search Engine:. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
CHƯƠNG 2 : KHẢO SÁT PHÂN TÍCH THIẾT KẾ HỆ THỐNG 35
2.1 Khảo sát hiện trạng hệ thống . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
2.1.1 Tìm hiểu hiện trạng. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
2.1.2 Mô tả bài toán. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
2.1.3 Phân tích yêu cầu bài toán . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
2.1.4 Thông tin đầu vào, đầu ra của bài toán. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
2.1.5 Mục đích của đề tài . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
2.1.6 Khảo sát sơ bộ về công ty TNHH một thành viên MVB. . . . . . . . . . . . . . 37
2.2 Các tác nhân và Use Case của hệ thống. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
2.3 Biểu đồ Usecase . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
2.3.1 Biểu đồ Usecase Tổng quát. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
2.3.2 Biểu đồ Usecase mức chi tiết Người dùng . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
3


2.3.3 Biểu đồ Usecase mức chi tiết Quản trị viên . . . . . . . . . . . . . . . . . . . . . . . . . . 40
2.4 Đặc tả Usecase . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
2.4.1 Đặc tả Usecase Đăng nhập hệ thống . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
2.4.2 Usecase Quản lý tài khoản. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
2.4.3 Đặc tả Usecase Quản lý liên kết website. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
2.4.4 Đặc tả Usecase Quản lý banner. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
2.4.5 Đặc tả Usecase Quản lý thông tin. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
2.4.6 UC Quản lý thư viện ảnh . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
2.4.7 UC Quản lý liên hệ. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
2.4.8 UC Xem thông tin. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
2.4.9 UC Liên hệ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
2.4.10 Đặc tả Usecase Quản lý SEO . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
2.4.11 Biểu dồ lớp thực thể . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
CHƯƠNG 3 : XÂY DỰNG WEBSITE GIỚI THIỆU CÔNG TY TNHH MỘT
THÀNH VIÊN MVB
57
3.1 Giới thiệu website. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
3.1.1 Bố cục website . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
3.1.2 Hướng dẫn cài đặt. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
3.2 Giao diện website . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
3.2.1 Giao diện trang chủ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
3.2.2 Giao diện trang giới thiệu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
3.2.3 Giao diện trang sản phẩm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
3.2.4 Giao diện trang dịch vụ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
3.2.5 Giao diện trang tin tức . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
3.2.6 Giao diện trang Tuyển dụng . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
3.2.7 Giao diện trang Liên hệ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
3.2.8 Giao diện trang Lĩnh vực . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
KẾT LUẬN 67
TÀI LIỆU THAM KHẢO 68
DANH MỤC HÌNH ẢNH
Hình 1.4.1: Search Engine Google . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
Hình 1.4.2: Ví dụ minh họa về backlink . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
Hình 1.4.3: App store optimization . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
Hình 1.4.4: Nguyên lý hoạt động của Search Engine. . . . . . . . . . . . . . . . . . . . . . . . . . . 32
Hình 2.3.1 Biểu đồ Usecase mức tổng quát . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
4


Hình 2.3.2 BIểu đồ UC mức chi tiết người dùng . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
Hình 2.3.3 Biểu đồ UC mức chi tiết Quản trị viên . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
Hình 2.4.1 Biểu đồ trình tự UC đăng nhập hệ thống . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
Hình 2.4.2 biểu đồ cộng tác UC đăng nhập hệ thống . . . . . . . . . . . . . . . . . . . . . . . . . . 42
Hình 2.4.3 Biểu đồ trình tự UC Quản lý tài khoản . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
Hình 2.4.4 Biểu đồ cộng tác UC Quản lý tài khoản . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
Hình 2.4.5 UC quản lý liên kết website . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
Hình 2.4.6 UC quản lý liên kết website . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
Hình 2.4.7 UC quản lý banner trên website . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
Hình 2.4.8 UC quản lý banner trên website . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
Hình 2.4.9 UC quản lý thông tin trên website. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
Hình 2.4.10 UC quản lý thông tin trên website . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
Hình 2.4.11 Biểu đồ trình tự UC quản lý thư viện ảnh . . . . . . . . . . . . . . . . . . . . . . . . . 49
Hình 2.4.12 Biểu đồ cộng tác UC quản lý thư viện ảnh . . . . . . . . . . . . . . . . . . . . . . . . 49
Hình 2.4.13 Biểu đồ trình tự UC quản lý liên hệ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
Hình 2.4.14 Biểu đồ cộng tác UC quản lý liên hệ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
Hình 2.4.15 Biểu đồ trình tự UC xem thông tin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
Hình 2.4.16 Biểu đồ cộng tác UC xem thông tin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
Hình 2.4.17 Biểu đồ trình tự UC liên hệ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
Hình 2.4.18 Biểu đồ cộng tác UC liên hệ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
Hình 2.4.19 UC quản lý liên kết website. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
Hình 2.4.20 UC quản lý liên kết website . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
Hình 2.4.21 Biểu đồ lớp thực thể . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
Hình 3.2.1 Giao diện trang chủ của website . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
Hình 3.2.2 Giao diện trang Giới thiệu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
Hình 3.2.3 Giao diện trang Sản phẩm. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
Hình 3.2.4 Giao diện trang Dịch vụ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
Hình 3.2.5 Giao diện trang Tin tức . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
5


Hình 3.2.6 Giao diện trang Tuyển dụng. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
Hình 3.2.7 Giao diện trang Liên hệ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
Hình 3.2.8 Giao diện trang Lĩnh vực . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66

6


LỜI MỞ ĐẦU
Ngày nay ứng dụng công nghệ thông tin và việc tin học hóa được xem là
một trong những yếu tố mang tính quyết định trong hoạt động của các chính phủ,
tổ chức, doanh nghiệp, cũng như các trường đại học, cao đẳng, các trang thông tin,
giải trí, nó đóng vai trò hết sức quan trọng có thể tạo ra những bước đột phá mạnh
mẽ.
Đối với các công ty, xí nghiệp, công nghệ thông tin càng trở nên quan trọng
hơn. Việc áp dụng công nghệ thông tin vào việc kinh doanh, quảng bá, giới thiệu
mang lại hiệu quả rất to lớn. Tuy nhiên không phải công ty, doanh nghiệp nào cũng
có thể áp dụng tin học hóa vào công ty mình. Chính vì vậy em đã xin được xây
dựng website giới thiệu cho công ty TNHH một thành viên MVB
Là một sinh viên ngành Công nghệ phần mềm đang học tập trong Trường
Đại Học Công Nghệ Thông Tin Và Truyền Thông Thái Nguyên em luôn cố gắng
học hỏi và trang bị cho mình những kỹ năng cần thiết. Với mục đích tổng hợp
những kiến thức đã học và tìm hiểu để vận dụng vào giải quyết các công việc thực
tiễn, đặc biệt dưới sự hướng dẫn nhiệt tình của thầy giáo Bùi Anh Tú bộ môn
Công nghệ phần mềm đã giúp em hoàn thành đề tài của mình đúng thời gian.
Mục tiêu nghiên cứu: Tổng hợp, vận dụng các kiến thức đã học và tìm hiểu
để khảo sát, phân tích, thiết kế và xây dựng ứng dụng trong thực tế. Để xây dựng
được một Website theo đúng yêu cầu cần giải quyết một số công việc sau:
 Tìm hiểu và khảo sát để thu thập các thông tin, tài liệu, tư liệu về công
ty TNHH một thành viên MVB.
 Phân tích, thiết kế và xây dựng Website quản lý các thông tin thu thập được
một cách khoa học và cung cấp thông tin này đến các khách hàng của công ty.
Nội dung chính của đề tài bao gồm:
Chương 1: Cơ sở lý thuyết.
Chương 2: Khảo sát phân tích thiết kế hệ thống
7


Chương 3: Xây dựng website giới thiệu công ty TNHH một thành viên
MVB-Hải Phòng
CHƯƠNG 1. CƠ SỞ LÝ THUYẾT
 HTML

 Định nghĩa về HTML
 HTML được biết đến là một loại ngôn ngữ dùng để mô tả hiển thị các
trang web.
 Hyper Text Markup Language chính là HTML (Viết tắt)
 Nhiều người nhầm tưởng HTML là ngôn ngữ lập trình nhưng sự thực
không phải như vậy, nó là một ngôn ngữ đánh dấu
 Một ngôn ngữ đánh dấu là một bộ các thẻ đánh dấu
 Để có thể miêu tả trang web ta cần đánh dấu các thẻ HTML

 Thành phần của HTML
 Các dạng thẻ HTML
 Thẻ HTML dùng để viết lên những thành tố HTML
 Thẻ HTML được bao quanh bởi hai dấu lớn hơn < và > nhỏ hơn.
 Những thẻ HTML thường có một cặp giống như
 Thẻ thứ nhất là thẻ mở đầu và thẻ thứ hai là thẻ kết thúc.
 Dòng chữ ở giữa hai thẻ bắt đầu và kết thúc là nội dung.
 Những thẻ HTML không phân biệt in hoa và viết thường, ví dụ dạng
đều như nhau,
 Thành phần HTML
 Thành phần của HTML bắt đầu với thẻ:  Nội dung của nó là: web design resource
 Thành phần của HTML kết thúc với thẻ:
 Mục đích của thẻ là để xác định một thành phần của HTML phải

8


được thể hiện dưới dạng in đậm
 Phần này bắt đầu bằng thẻ bắt đầu và kết thúc bằng thẻ kết thúc
. Mục đích của thẻ là xác định thành phần của HTML bao gồm
nội dung của tài liệu.


9


 Các thuộc tính của thẻ HTML
 Những thẻ HTML đều có những thuộc tính riêng. Những thuộc tính này cung
cấp thông tin về thành phần HTML của trang web. Tag này xác định thành phần
thân của trang HTML: . Với một thuộc tính thêm vào là bgcolor, chúng ta
có thể báo cho trình duyệt biết rằng màu nền của trang này là màu đỏ, giống như
sau: hoặc (#E6E6E6 là giá trị
hex của màu)
 Thẻ này sẽ xác định dạng bảng HTML: với một thuộc tính
đường viền
(border), bạn có thể báo cho trình duyệt biết rằng bảng sẽ không có đường
viền:
.
 Thuộc tính luôn luôn đi kèm một cặp như name/value: name="value"
(tên="giá trị") thuộc tính luôn luôn được thêm vào thẻ mở đầu của thành
phần HTML.
Dấu ngoặc kép, "red" hoặc 'red'.
Ví dụ: name='ban"tay"den'.

 Cơ bản về các thẻ HTML
Những thẻ quan trọng nhất trong HTML là những thẻ xác định Heading,
đoạn văn và xuống dòng.
 Headings
Headings được định dạng với hai thẻ

đến

.

xác định heading lớn
nhất.

xác định heading nhỏ nhất

Đây là heading


Đây là heading


HTML sẽ tự động thêm một dòng trắng trước và sau mỗi heading.
 Đoạn văn – paragraphs
10


Paragraphs được định dạng bởi thẻ

.

Đây là đoạn văn


Đây là một đoạn văn khác



HTML sẽ tự động thêm một dòng trắng trước và sau mỗi heading.

 Line Breaks - xuống dòng
Thẻ
được sử dụng khi muốn kết thúc một dòng nhưng lại không muốn bắt
đầu một đoạn văn khác. Thẻ
sẽ tạo ra một lần xuống dòng khi viết nó.

Đây
là một đoạn
đoạn văn với thẻ xuống hàng


Thẻ
là một thẻ trống, nó không cần thẻ đóng dạng


 Lời chú thích trong HTML
Thẻ chú thích được sử dụng để thêm lời chú thích trong mã nguồn của HTML.
Một dòng chú thích sẽ được bỏ qua bởi trình duyệt. Chúng ta có thể sử dụng
chú thích để giải thích về code của ta, để sau này ta có phải quay lại chỉnh sửa gì
thì cũng dễ nhớ hơn.

Chúng ta cần một dấu chấm than ! ngay sau dấu nhỏ hơn nhưng không cần
ở dấu lớn hơn.
 Các ký tự đặc biệt trong HTML
Một vài ký tự tương tự như dấu nhỏ hơn <, có một ý nghĩa đặc biệt trong
HTML, và do đó không thể được sử dụng như là chữ được
Một ký tự đặc biệt có 3 phần: Ký hiệu (&), tên của ký tự hoặc một dấu # và
một dãy số và cuối cùng là dấu chấm phẩy ;
Để hiển thị được dấu nhỏ hơn trong HTML bạn phải viết là < hoặc &#
60;

11


Non-breaking space:
Ký tự được dùng nhiều nhất trong HTML có lẽ là nbsp (non-breaking
space) Thường thì HTML cắt bớt khoảng trống trong chữ của bạn. Ví
dụ nếu bạn viết 10 chỗ trống trong text của bạn thì HTML sẽ loại bỏ 9
trong số đó. Để thêm khoảng trống vào chữ của bạn, bạn phải sử dụng
ký tự đặc biệt là  

12


 Thẻ Anchor và thuộc tính Href
HTML sử dụng thẻ (anchor) để tạo đường liên kết đến một tài liệu
khác. Thẻ anchor có thể liên kết đến bất cứ một tài nguyên nào trên internet, chúng
có thể là một trang HTML, một tấm hình, một file nhạc, một bộ phim .v.v.
Cú pháp để tạo một thẻ anchor
Chữ mong muốn ở đây
Thẻ được sử dụng để tạo một điểm neo và liên kết bắt đầu từ đó, thuộc
tính href được sử dụng để chỉ ra tài liệu sẽ được liên kết đến, và chữ ở xuất hiện ở
giữa hai tag < và > sẽ được hiển thị dưới dạng siêu liên kết.
Thuộc tính đích đến:
Với thuộc tính đích đến, bạn có thể xác định liên kết đến tài liệu khác sẽ
được mở ra ở đâu. Dòng code dưới đây sẽ mở tài liệu được liên kết trong một cửa
sổ trình duyệt mới.
Mời bạn vào
diễn đàn của niemvui.net

Thẻ anchor và thuộc tính tên
Dưới đây là cú pháp của điểm neo được đặt tên trước:
Chữ mong muốn hiển thị ở đây
Thuộc tính tên được sử dụng để tạo điểm neo. Tên của điểm neo có thể là
bất cứ thứ gì ta mong muốn.
Dòng code sau xác định điểm neo được đặt tên trước.
Tất cả tutorial ở đây
Chúng ta có thể nhận ra rằng thẻ anchor được đặt tên trước được hiển thị
không có gì đặc biệt. Để trực tiếp liên kết phần Photoshop Tutorial, ta chỉ phải
thêm dấu # và tên của điểm neo và cuối cùng của một URL. Xem ví dụ sau
Quay lại trang tutorials
Một đường liên kết đến phần Quay lại trang tutorials từ trang
13


"html_chuong_3.htm" sẽ như sau:
Quay lại trang tutorials
Nếu trình duyệt không tìm được điểm neo được chỉ ra từ trước, nó sẽ quay
lên phần trên cùng của tài liệu.
 Thẻ frameset
Thẻ xác định rằng sẽ chia cửa sổ trình duyệt thành những frame
như thế nào. Môi một frame xác định một tập hợp các hàng hoặc cột. Giá trị của
hàng hoặc cột chỉ ra diện tích của màn hình mà frame đó sẽ chiếm.

 Thẻ Frame
Thẻ xác định tài liệu HTML nào sẽ được chèn vào mỗi frame.
Ví dụ:





Bảng HTML
Với HTML bạn cũng có thể tạo bẳng cho trang web của mình.
Bảng được định dạng bởi thẻ
. Một bảng được chia ra làm nhiều hàng với
thẻ , môi hàng được chia ra làm nhiều cột dữ liệu với thẻ
. Cbữ td là chữ
viết tắt của "table data", là nội dung của cột dữ liệu v.v.
Đoạn code trên sẽ hiển thị như thế này trong cửa sổ trình duyệt
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

 Bảng và thuộc tính đường biên
Để hiển thị đường biên của một bảng, bạn phải sử dụng thuộc tính đường biên.

14






Row 1, cell 1Row 1, cell 2

 Heading trong bảng
Heading trong một bảng được xác định bằng thẻ
Cột trống trong bảng
Cột trống không có nội dung thì không được hiển thị tốt lắm ở hầu hết các
trình duyệt.







row 1, cell 1row 1, cell 2
row 2, cell 1

Nó sẽ có dạng thế này trên trình duyệt
row 1, cell 1 row 1, cell 2
row 2, cell 1
Cần chú ý rằng đường biên bao quanh cột trống bị mất. Để tránh điều này
xảy ra, chúng ta nên thêm một non-breaking space ( ) vào cột trống đó, để
làm cho đường biên của nó được hiện thỉ.









row 1, cell 1row 1, cell 2
row 2, cell 1 


15


Nó sẽ hiển thị như sau ở trình duyệt
row 1, cell 1 row 1, cell 2
row 2, cell 1
Thẻ table
Tag

Mô Tả



Vẽ bảng



hàng trong bảng



nhóm các cột



Định các thuộc tính của cột



Hàng Đầu bảng



Thân của bảng



Hàng cuối bảng

 HTML form và trường nhập liệu.
HTML form được sử dụng để chọn những dữ liệu nhập vào khác nhau của
người dùng.
 Form




 Text field

16



First name:



Last name:


Nó sẽ xuất hiện như sau trong trình duyệt
First name:
Last name:

Male


Female

 Nó sẽ xuất hiện như sau trên trình duyệt
Male
Female
Chú ý rằng chỉ có một lựa chọn có thể được chọn.
 Hộp kiểm
 Hộp kiểm được sử dụng khi bạn muốn người chọn có thể chọn nhiều lựa
chọn hơn.


I have a bike



I have a car
17



Nó sẽ như sau trong trình duyệt
I have a bike
I have a car
method="get">
Username:



Trong trình duyệt nó nhìn như sau
Username:
Hình ảnh trong HTML
Với HTML bạn có thể thể hiện hình ảnh trong tài liệu.
 Thẻ Image và thuộc tính src
Cú pháp để xác định một tấm hình

Địa chỉ URL chỉ đến điểm mà hình ảnh được lưu trữ. Một file hình có tên là
"boat.gif" được đặt ở thư mục images trên www.niemvui.net có địa chỉ URL
là: http://www.niemvui.net/images/boat.gif
 Thuộc tính Alt
Thuộc tính alt được sử dụng để xác định chữ thay cho hình. Bởi vì nếu hình
đó không hiện được thì một dòng chữ sẽ xuất hiện để báo cho người đọc biết. Gía
trị của thuộc tính alt là một dòng chữ như sau:
Big Boat
 HTML Background
 Một background đẹp có thể làm cho trang của bạn nhìn đẹp mắt hơn.

18





 Background
Thuộc tính background thiết lập một tấm hình làm hình nền. Giá trị của thuộc tính
này là địa chỉ URL của tấm hình ta muốn sử dụng. Nếu một tấm hình nhở hơn so
với cửa sổ trình duyệt, tấm hình đó sẽ tự nhân lên đến khi nào nó che phủ hết cửa
sổ trình duyệt.



 Điểm khác biệt giữa HTML và HTML5
Khả năng tương thích: HTML5 vẫn giữ lại các cú pháp truyền thống trước
đây, và nếu một vài tính năng mới nào đó của HTML5 chưa được trình duyệt hỗ
trợ thì nó phải có một cơ chế fall back để render trong các trình duyệt cũ. Đương
nhiên là, HTML5 không thể xóa bỏ tất cả những gì đã có suốt hơn 20 năm chỉ
trong một ngày.
Khả năng hoạt động xuyên suốt giữa các trình duyệt: HTML5 cung cấp các
khai báo đơn giản hơn và một API mạnh mẽ. Một ví dụ dễ thấy là khai báo
DOCTYPE:
HTML4: Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd“>
HTML5:
So với các phiên bản trước, đặc tả HTML5 dài hơn đáng kể nhằm chi tiết
hóa mọi hành vi để đảm bảo chúng thống nhất giữa các trình duyệt khác nhau.
Khả năng truy xuất rộng rãi: HTML5 mang lại sự hỗ trợ tốt hơn cho các
ngôn ngữ và cho người khuyết tật, đồng thời cũng có thể hoạt động trên các
thiết bị và nền tảng khác nhau.
19


Điểm đặc trưng đầu tiên của một ngôn ngữ đánh dấu (markup language) là
các thẻ. Và ở mặt này thì HTML5 được bổ sung rất nhiều cái mới, từ các thẻ tổ
chức nội dung (article, aside, title…) đến các thẻ hỗ trợ tương tác và multimedia
(video, audio…). Ngoài sự rõ ràng, sử dụng các semantic markup còn có thể đem
lại lợi thế khi các công cụ tìm kiếm trong tương lai tận dụng chúng để phân loại
kết quả.
Không chỉ dừng lại ở các tag, HTML5 bao gồm một tập các API hấp
dẫn. Vài API thú vị có thể kể đến như:
 Canvas
 Geolocation
 WebSocket
 Web Storage
 WebWorkers
 ......
 CSS

 Giới thiệu về CSS
CSS là chữ viết tắt của cụm từ tiếng Anh “Cascading Style Sheet”, là kiểu thiết
kế sử dụng nhiều lớp định dạng chồng lên nhau. CSS được tổ chức World
Wide Web (W3C) giới thiệu vào năm 1996. Cách đơn giản nhất để hiểu CSS là
hãy coi nó như một phần mở rộng của HTML để giúp đơn giản hóa và cải tiến việc
thiết kế cho các trang web.
Mỗi khi chúng ta bắt đầu một Style Sheets, thì bắt buộc mở bằng
và kết
thúc bằng và tiếp theo sau đó là khai báo và sau những bước trên thì bạn có thể nhìn thấy nguyên đoạn
code như sau


20




 Cấu trúc của CSS
Tag {definition1; definition2;.....; definition n}
ví dụ sau đây về dòng lệnh của CSS:
H2 {font-size: 16pt; font-style: italic; font-family: arial}
 Ưu điểm của CSS
 CSS có thể tách riêng phần định dạng ra khỏi nội dung một trang web,
do đó nó sẽ rất thuận tiện khi ta muốn thay đổi giao diện của một trang web.
 CSS là một sợi chỉ xuyên suốt trong quá trình thiết kế một website bởi vì
nó cho phép nhà thiết kế kiểm soát toàn bộ giao diện, kiểu cách và sự sắp đặt của
nhiều trang hay nhiều đối trong một lần định nghĩa.
 Các đặc tính cơ bản của CSS
 CSS quy định cách hiển thị của các thẻ HTML bằng cách quy định các
thuộc tính của các thẻ đó (font chữ, màu sắc).
 Có thể khai báo CSS bằng nhiều cách khác nhau. Chúng ta có thể đặt
đoạn CSS của mình ở phía trong thẻ …, hoặc ghi nó ra một file
riêng với phần mở rộng “.css”, ngoài ra ta còn có thể đặt chúng trong từng thẻ
HTML riêng biệt.
 Thứ tự xếp lớp
1. Style nội tuyến – Style đặt trong từng thẻ HTML riêng biệt.
2. Stylet bên trong – Style đặt bên trong cặp thẻ … .
3. Style bên ngoài – Style đặt trong các file riêng có đuôi “.css”.
4. Style theo mặc định của trình duyệt.
 CSS có tính kế thừa và tính kết hợp
21


 Tính kế thừa
Giả sử rằng ở đầu file styleshet.css bạn khai báo cho Body có các thuộc
tính sau:
body {
font: Arial, Verdana;
background: #FF6600;
}
Nhưng trong trường hợp ta muốn khai báo cho các đối tượng nhỏ hơn nằm
trong đó như Sidebar:
#sidebar {
with: 300px;
padding: 10px;
font: Tahoma, Verdana;
}
Sau đoạn khai báo này thì Sidebar sẽ có thuộc tính:
#sidebar {
background: #FF6600;
with: 300px;
padding: 10px;
font: Tahoma, Verdana;
}
 Tính kết hợp
Có thể định nghĩa nhiều CSS cùng một thuộc tính thay vì phải định nghĩa
riêng lẻ từng cái một.
 CSS3
 Sự ra đời của CSS3
Ngày 23/5/2001 W3C đã giới thiệu CSS3 tới cộng đồng người phát triển
web, trong những năm đầu đang phát triển CSS3 nó vẫn còn mới lạ đối với người
phát triển web, mãi cho tới thời điểm những năm 2007 đến 2010 và thời điểm hiện
tại thì CSS3 đã thật sự tạo nên một sức hút lớn với những tính năng mạnh mẽ của
nó.
 Multiple background
22


CSS3 cho phép bạn áp dụng nhiều hình nền lên một phần tử (element).
Tương tự như việc áp dụng đổ bóng , bạn có thể dùng tất cả các thuộc tính như
background-image, background-repeat, background-position và background-size
Body
{
background:
url(../images/2.png) no-repeat left top,
url(../images/1.png) no-repeat right top,
url(../images/3.png) no-repeat left bottom,
url(../images/4.png) no-repeat right bottom;
background-color:#ffffff;
}

23


 Selectors
CSS3 selectors cho phép chúng ta chọn các phần tử HTML dễ dàng hơn.
Cách chọn của CSS3 không những giúp tiết kiệm thời gian viết CSS, giảm dung
lượng file mà còn giúp cho mã HTML dễ nhìn hơn.
 Resize
Với CSS3 ta có thể thay đổi kích thước phần tử với thuộc tính resize.
div#ntuts {
resize: both;
}

1.3 Giới thiệu về UML
1.3.1 Khái niệm và đặc điểm của UML
UML là ngôn ngữ mô hình hóa thống nhất(Unified Modeling Language),
trước hết nó là mô tả ký pháp thống nhất, ngữ nghĩa và các định nghĩa về
metamodel(mô tả định nghĩa chính ngôn ngữ mô hình hóa), nó không mô tả
phương pháp phát triển. UML được sử dụng để hiển thị, đặc tả, xây dựng và làm
tài liệu các vật phẩm của quá trình phân tích xây dựng hệ thống phần mềm theo
hướng đối tượng.UML là ngôn ngữ chuẩn để viết các kế hoạch chi tiết phần mềm.
Nó phù hợp cho việc mô hình hóa các hệ thông tin doanh nghiệp, các ứng dụng
phân tán trên nền Web, hệ thống nhúng thời gian thực.
Đặc điểm của UML
 UML là ngôn ngữ.
 UML là ngôn ngữ để hiển thị.
 UML làm ngôn ngữ đặc tả
 UML là ngôn ngữ dễ xây dựng
 UML là ngôn ngữ tài liệu
24


1.3.2 Mô hình khái niệm của UML
 Phần tử mô hình UML
Các khối hình thành mô hình UML gồm ba loại như sau: phần tử, quan hệ
và biểu đồ. Phần tử là trừu tượng căn bản trong mô hình, các quan hệ gắn các phần
tử này lại với nhau, còn biểu đồ nhóm tập hợp các phần tử.
Phần tử cấu trúc là các danh từ trong mô hình UML. Chúng là bộ phận tĩnh
của mô hình để biểu diễn các thành phần khái niệm hay vật lý. Có bảy loại phần tử
cấu trúc, đó là: lớp, giao diện, phần tử cộng tác, trường hợp sử dụng(Use Case),
lớp tích cực(active class), thành phần, nút(node).
 Phần tử hành vi là bộ phận động của mô hình UML. Chúng là các động
từ của mô hình, biểu diễn hành vi theo thời gian và không gian. Có hai loại chính
là tương tác và máy trạng thái.
 Phần tử nhóm là bộ phận tổ chúc của mô hình UML. Chỉ có một phần tử
thuộc nhóm này có tên là gói(package).
 Các quan hệ trong UML
Có bốn loại quan hệ trong UML, bao gồm quan hệ phụ thuộc, kết hợp, khái
quát và hiện thực hóa.Chúng là cơ sở để xây dựng mọi quan hệ trong UML.
 Phụ thuộc(dependency). Phụ thuộc là quan hệ ngữ nghĩa hai phần tử trong đó
thay đổi phần tử độc lập sẽ tác động đến ngữ nghĩa của phần tử phụ thuộc.
 Kết hợp(association). Kết hợp là quan hệ cấu trúc để mô tả tập liên kết.
Khi đối tượng của lớp này gửi/nhận thông điệp đến/từ đối tượng của lớp kia thì gọi
đó là quan hệ kết hợp.
 Khái quát hóa(generalization). Khái quát hóa là quan hệ đặc biệt
háo/khái quát hóa mà trong đó đối tượng cụ thể sẽ kế thừa các thuộc tính và
phương pháp của đối tượng tổng quát.
 Hiện thực hóa(realization). Hiện thực hóa là quan hệ ngữ nghĩa giữa
giao diện và lớp(hay thành phần) hiện thực lớp, giữa UC và hợp tác hiện thực UC.

25




hàng đầu của bảng



ô trong hàng



nhãn của bảng