PHÂN TÍCH THIẾT KẾ WEBSITE GIỚI THIỆU và hỗ trợ bán hàng cho cửa hàng hoa tươi

MỞ ĐẦU

Ngày nay, với sự phát triển mạnh mẽ của Công nghệ thông tin đã ảnh hưởng
sâu rộng tới mọi mặt trong đời sống. Nó là nền tảng của nền kinh tế tri thức và là
thước đo trình độ phát triển của một quốc gia. Và nó cũng là yếu tố hàng đầu quyết
định đến sự phát triển của công ty hay tổ chức đó.
Xã hội và kinh tế phát triển đòi hỏi công nghệ cũng phải phát triển. Công
nghệ phát triển con người càng phát minh ra nhiều thiết bị công nghệ số để phục vụ
về nhiều mặt trong cuộc sống. Nhất là trong thời đại hiện nay khi Việt Nam đã hội
nhập vào WTO cùng với sự phát triển mạnh mẽ của công nghệ thông tin được áp
dụng mạnh mẽ trong mọi lĩnh vực cuộc sống.
Việc xây dựng website để phục vụ nhu cầu riêng của cá nhân, tổ chức đã
không lấy gì làm xa lạ. Với một vài thao tác đơn giản bạn đã có thể làm chủ một
website mà bạn yêu thích: website xe hơi, website giới thiệu về gia đình, bạn
bè,...Đối với một hoạt động của một công ty kinh doanh có quy mô lớn sẽ được tăng
cường, mở rộng hơn nữa nếu xây dựng một website tốt quảng bá hình ảnh công ty
cùng các dịch vụ, các sản phẩm đến với khách hàng có nhu cầu. Xuất phát từ ý
tưởng đó cùng với sở thích kinh doanh nhóm em đã quyết định chọn đề tài :”Xây
dựng website giới thiệu và hỗ trợ bán hàng cho cửa hàng hoa tươi ngọc anh” .
Bài báo cáo gồm:
Chương 1: Tổng quan về ngôn ngữ HTML, CSS, mã nguồn mở Wordpress.
Chương 2: Phân tích thiết kế website giới thiệu và hỗ trợ bán hàng cho cửa
hàng hoa tươi ngọc anh.
Chương 3: Xây dựng website mô phỏng.
Kết luận: Tổng kết những việc đã làm được và hướng phát triển.

1


CHƯƠNG 1: TỔNG QUAN VỀ NGÔN NGỮ HTML VÀ CSS,
MÃ NGUỒN MỞ WORDPRESS

1.1 Tìm hiểu về HTML.
1.1.1 Giới thiệu về HTML.

HTML( HyperText Markup Language ) là ngôn ngữ đánh dấu siêu văn bản
được thiết kế để tạo nên các trang web với các mẫu thông tin được trình bày
trên World Wide Web. HTML được định nghĩa như là một ứng dụng đơn giản của
SGML và được sử dụng trong các tổ chức cần đến các yêu cầu xuất bản phức tạp.
Tên gọi ngôn ngữ đáng dấu siêu văn bản có ý nghĩa như sau:
Đánh dấu(Markup): HTML là ngôn ngữ của các thẻ đánh dấu(tag). Các thẻ
này xác định cách thức trình bày đoạn văn bản tương ứng trên màn hình.
Ngôn ngữ(Language): HTML là một ngôn ngữ tương tự như các ngôn ngữ
lập trình, tuy nhiên đơn giản hơn. Nó có cú pháp chặt chẽ để viết các lệnh thực hiện
việc trình diễn văn bản. Các từ khóa có ý nghĩa xác định được cộng đồng Internet
thừa nhận và sử dụng lại. Ví dụ b= bold, ul= unordered list,…
Siêu văn bản(HyperText): HTML cho phép liên kết nhiều trang văn bản rải
rác ở khắp mọi nơi trên Internet. Nó có tác dụng che dấu sự phức tạp của Internet
đối với người sử dụng. Người dùng Internet có thể đọc văn bản mà không cần biết
đến văn bản đó nằm ở đâu, hệ thống được xây dựng phức tạp như thế nào, HTML
thực sự đã vượt ra ngoài khuân khổ khái niệm văn bản cổ điền.
1.1.2 Các phiên bản của HTML.
HTML được Tim Berners-Lee phát triển vào năm 1989 ở viện thí nghiệm
CERN- Thụy Sĩ. Điều này đã đánh dấu một bước phát triển mới cho xã hội thông
tin. Ban đầu, ông làm việc cho viện thí nghiệm CERN mà việc thí nghiệm phải hợp
tác nghiên cứu với nhiều viện khác trên thế giới. Tim đã nảy ra ý tưởng là cho phép
các nhà nghiên cứu có thể tham khảo dữ liệu từ một nơi mà dữ liệu được tập hợp và

2


tổ chức lại sao cho khi đang đọc tài liệu này, nhà nghiên cứu có thể xem tài liệu liên

quan bằng cách nhấn vào một liên kết được hiển thị trên màn hình.
HTML được phát triển dựa trên ngôn ngữ Standard Generalized Markup
Language(SGML). SGML là một hệ thống tổ chức và găn thẻ cơ bản của một tài
liệu. Ngôn ngữ này không quy định những định dạng, nguyên tắc mà nó chỉ quy
định cụ thể các quy tắc cho các thẻ.
Tuy nhiên, đến năm 1990, phiên bản HTML đầu tiên mới được tung ra và
gần như sau một năm, ngôn ngữ HTML đầu tiên mới được ứng dụng. Tháng 4 năm
1993, trình duyệt đầu tiên Mosaic xuất hiện và nhóm Mosaic đã mở rộng thêm một
số thẻ mới như images,…
HTML đã trải qua 4 phiên bản gồm: HTML phiên bản đầu tiên(1990),
HTML2(1994), HTML3(1995),HTML4(1997).
Vào năm 1994, tập đoàn tài chính World Wide Web(W3c) được thành lập với
người đứng đầu là Tim Bernes-Lee đã đứng ra hỗ trợ cho sự phát triển của HTML.
Qua các phiên bản phát triển, HTML ngày càng có nhiều thẻ mới, tính năng mới
cũng như tính đơn giản hóa ngày càng cao.
HTML4 đươc phát triển vào năm 1997 và là phiên bản thành công nhất được
sử dụng phổ biến cho đến hiện nay. Với rất nhiều thẻ mới như Button, FieldSet,
Frame, Iframe,Span,... Ngoài ra, HTML4 còn hỗ trợ hiển thị hầu hết ngôn ngữ trên
thế giới dựa theo chuẩn Universal Character Set. Thay vì các phiên bản trước chỉ
hiện thị theo chuẩn ISO-8859-1. HTML4 còn hỗ trợ một số tính năng quan trọng
như sau:
-

Đã hỗ trợ ngôn ngữ lập trình của client-script và có thể nhúng thêm các tập tin

script bên ngoài vào. Hỗ trợ các sự kiện client-script như onclick, onchange,… cho các
thẻ.
-

Đặc biệt là HTML4 hỗ trợ CSS với các thuộc tính ID,Class và Style. Ba

thuộc tính này giúp các thẻ liên kết với các style được khai báo trong CSS.
Ví dụ: ta có 1 CSS là :
3


.header{
font-size: small;
-

}
Việc tích hợp với CSS này có ý nghĩa rất quan trọng cho các nhàthiết kế web.

Họ có thể sử dụng CSS chung cho các kiểu hiện thị như nhau và có thể thoải mái
sáng tạo giao diện mà không cần tốn công sức như trước đây(khai báo các thuộc tính
kiểu cho từng thẻ).
-

HTML4 còn hỗ trợ nhiều hơn cho thẻ table nhất là các thẻ table mới nhứ

<THead>, <TFood>, <TBody>.
1.1.3 Các thẻ HTML.
Để biểu diễn thông tin trên trang web, nhà thiết kế sử dụng ngôn ngữ HTML
để trình bày thông tin. Mỗi thông tin chi tiết sẽ đươc trình bày và định dạng dựa vào
một cặp thẻ(tag) HTML tương ứng.
-

Mỗi cặp thẻ bao gồm: thẻ mở và thẻ đóng. Tên thẻ mở và thẻ đóng giống
nhau và được đặt trong cặp dấu <tên thẻ>.

-

Trong thẻ mở có thể thêm các tham số phía sau tên thẻ.

-

Trong thẻ đóng có thêm dấu / phía trước tên thẻ.

-

Dữ liệu cần trình bày đặt trong cặp thẻ mở và đóng.

-

Có một số thẻ không nhất thiết phải viết cả thẻ đóng.

-

Có thể đặt trong các cặp thẻ HTML lồng nhau.

-

Cấu trúc chung của một thẻ HTML như sau:
< Ten_The thamso1= giatri1 thamso2= giatri2 …>Thông tin cần trình

bày</Ten_the>
Ví dụ:
<b>chữ đậm</b>
<i>chữ nghiêng</i>
<u>chữ gạch chân</u>

<b><i>chữ vừa đậm vừa in nghiêng</i></b>

4


1.1.4 Cấu trúc của một trang HTML.
<html>
<head>
<title>Tiêu đề trang web</title>
</head>
<body>
Nội dung trang web
</body>
</html>
1.1.5 Các thẻ định dạng cấu trúc tài liệu.

-

<html></html>

-

<head></head>

-

<title></title>

-

<body></body>

Các tham số của thẻ :
Tham số
link
alink
Vlink
Background
Bgcolor
Text
Scroll
Topmargin
Rightmargin

Ý nghĩa
Chỉ định màu của văn bản liên kết
Chỉ định màu của văn bản siêu liên kết đang chọn
Chỉ định màu của văn bản siêu liên kết đã mở
Chỉ định địa chỉ ảnh dùng làm nền
Chỉ định màu nền
Chỉ định màu của văn bản trong tài liệu
Có hay không có thanh cuộn
Lề trên
Lề phải

1.1.6 Các thẻ định dạng

-

Các thẻ định dạng đề mục:
5


-




-

<b>, <i>, <u>, <s>.

-

^{chỉ số trên}, _{chỉ số dưới}

Căn lề văn bản trên trang web: tham số align, thẻ.
Định dạng font chữ:
Thẻ<font></font>:
<font size=”2” face=”Verdana”>This is a paragraph</font>
Khi muốn thay đổi cỡ font thì dùng:
<font size=X>…</font>
Trong đó X là cỡ font có giá trị 1(nhỏ nhất) đến 7(lớn nhất)
Để làm cho trang web thêm sinh động, nhiều khi bạn muốn trình bày nó bằng nhiều
kiểu font khác nhau, bạn hãy sử dụng thuộc tính face của tag<font> để thực hiện
việc đổi font chữ.
<font face=”fontname”>…</font>
Trong đó fontname là tên của font chữ có trên máy tính của người đọc trang web.
Muốn thêm màu sắc cho chữ, ta thêm thuộc tính color vào tag font.

Ví dụ:
<font face=”Arial” color=”#ffffff”>…</font>
<font face=”.vn3dh” color=”#EEBBBB”>…</font>
Sáu mức tiêu đề:
Khi trình bày một trang web, đôi khi bạn phải cần đến các tiêu đề theo các
kích cỡ, phông chữ khác nhau. HTML có các tag để thực hiện việc này. Để tạo một
tiêu đề chúng ta dùng:
<hx> Tên tiêu đề <hx>
Trong đó x là các giá trị từ 1 đến 6 chỉ kích cỡ tiêu đề. Sau đây là một số ví dụ:

Tiêu đề cỡ 1
Tiêu đề cỡ 2
6


Tiêu đề cỡ 3
Tiêu đề cỡ 4
Tiêu đề cỡ 5
Tiêu đề cỡ 6
1.1.7Thẻ tạo link.

frame> dòng văn bản</a>
Trong đó:
-

Href: địa chỉ của vùng trang web được liên kết, là một url nào đó.

-

Name: đặt tên cho vị trí đặt thẻ.

-

Tabindex: thứ tự di chuyển khi ấn phím Tab.

-

Title: văn bản hiển thị khi di chuyển chuột trên siêu liên kết.

-

Target: mở trang web được hiện trong một cửa sổ mới(_blank) hoặc trong
cửa sổ hiện tại(_self) trong một frame(tên frame).

Ghi chú:
-

Nếu đặt trong thuộc tính hreft= thẻ <a> giá trị mail to: address@domain
thì khi kích hoạt kết nối sẽ kích hoạt chức năng thư điện tử của trình
duyệt.
Ví dụ:
<address>
Liên hệ: Đại học Công Nghệ Thông Tin và Truyền Thông Thái Nguyên.
<a href= “mail to: ”>
Email:
</a>
Điện thoại: 02803456789
</address>

7


Khi nhấn vào dòng chữ Email: (dòng chữ này sẽ xuất
hiện giống như các siêu liên kết khác) chức năng thư tín của trình duyệt sẽ được
kích hoạt và địa chỉ thư điện tử đã được chèn vào địa chỉ nhận
thư của chương trình gửi thư.
1.1.8 Thẻ chèn ảnh.

Tag <img/ > dùng để nhúng một image vào văn bản HTML.
Tag <img/ > có 2 thuộc tính cần thiết là src và alt, trong đó src: đường truyền
tham chiếu đến image, alt: được sử dụng như một văn bản thay thế khi di chuyển
chuột lên image, muốn văn bản hiển thị khi di chuyển chuột lên image thì dùng
thuộc tính title thay thế.
Ví dụ: để chèn một hình ảnh có tên là doiche.jpg ta làm như sau:

Hình 1.1. Hiển thị hình ảnh trong trang HTML với thẻ img.
Tag <img..> còn có thể có thêm các thuộc tính để hiện thị văn bản so với
hình ảnh. Thuộc tính align với các giá trị khác nhau sẽ cho ta hiệu ứng như sau:
1. align = top
8


2. align= middle
3. align= bottom
Ví dụ:
<img src=”a.jpg” alt=”Chè Phú Thọ” align=”top” />
Tag img với thuộc tính là align = top


<img src=”a.jpg” alt=”Chè Phú Thọ” align=”middle” />

Tag img với thuộc tính là align = middle


<img src=”a.jpg” alt=”Chè Phú Thọ” align=”bottom” />
Tag img với thuộc tính là align = bottom



Hình 1.2. Thuộc tính align trong thẻ img với các giá trị khác nhau.
1.1.9 Thẻ tạo danh sách.

Danh sách được dùng để trình bày thông tin thành một dạng dễ đọc hơn.
Chẳng hạn để tạo ra các bảng chỉ mục, nội dung của một dãy các tài liệu hay các
chương trình HTML có hai kiểu danh sách, danh sách có thứ tự(ordered) và danh
sách không có thứ tự(unorder).

9


Danh sách không có thứ tự có các mục bắt đầu bằng các “butllet” hoặc các kí
hiệu đánh dấu ở trước. Để tạo ra danh sách không có thứ tự ta dùng các tag sau:
<ul>
<li>Chỉ mục thứ nhất</li>
…
<li> Chỉ mục cuối </li>
</ul>

Ví dụ: khi trong phần body của file HTML của bạn có đoạn sau:

Các bộ môn khoa Công nghệ thông tin

Trường Đại học Công Nghệ Thông Tin và Truyền Thông Thái Nguyên

<ul>
<li>Bộ môn Công nghệ phần mềm</li>

<li>Bộ môn Hệ thống thông tin</li>
<li>Bộ môn Mạng và Truyền Thông</li>
<li>Bộ môn Khoa học máy tính</li>
</ul>

10


Hình 1.3. Danh sách không có thứ tự thẻ ul li.

11


Danh sách có thứ tự là danh sách mà mỗi mục của danh sách được đánh số từ
“1”. Để tạo ra danh sách ta sử dụng các tag sau:
<ol>
<li> Chỉ mục thứ nhất</li>
…-22<li> Chỉ mục cuối cùng</li>
</ol>
Danh sách có thứ tự chỉ khác danh sách không có thứ tự ở chỗ thay tag <ul>
bằng tag <ol>.
Ví dụ: nếu trong phần body của file HTML có đoạn:

Các bước chuẩn bị để học HTML

<ol>
<li>Chương trình soạn thảo văn bản trơn(như Notepad của Window) </li>
<li>Trình duyệt Web(như Internet Explorer hoặc Firefox)</li>
<li>Bộ sách về HTML của tạp chí Internet Today</li>
</ol>

Hình 1.4. Danh sách có thứ tự thẻ ol li

1.1.10 Thẻ tạo form

Form là một yếu tố không thể thiếu được để có thể giao tiếp với máy chủ. Nó
được dùng để nhập dữ liệu, lựa chọn các khoản mục,… Trong quá trình liên kết với

12


CGI Script, form cho phép lựa chọn thông tin từ người dùng và lưu trữ nó cho lần
sau sử dụng. Khi tạo form, ta cần lưu ý hai phần đó là tên nhận dạng (identifier) và
giá trị (value) của form đó.
Tag : <form METHOD=”” ACTION=””><…các tag khác …></font>nằm
giữa hai tag BODY.
Trong đó thuộc tính METHOD có hai giá trị POST và GET. Nếu giá trị là
POST, nó cho phép gửi dữ liệu từ máy Client đến Sever(thường được sử dụng trong
form nhập liệu). Còn với GET thì chỉ được sử dụng trong form vấn tin. Còn Action
thì chỉ ra vị trí CGI Script trên Sever sẽ được thực hiện.
Các tag trong Form thường dùng chủ yếu là <input>, <select>, <option>.
Chúng ta sẽ lần lượt xét một số form đơn giản như sau:
• Text Blocks: Tạo ra vùng văn bản, có thể nhập nhiều dòng.
• Text Boxes: để nhập vào một dòng đơn.
• Password Boxes: form này giống Text Boxes nhưng không hiển thị các kí tự.
• Radio Buttons: Các nút lựa chọn một.
• Check Boxes: Hộp Check Boxes.
• Menus: Tạo ra hộp menu đẩy xuống.
• Submit, Reset Buttoms : Các Buttom để nhận thông tin và khởi tạo lại thông
tin.
• Hidden Elements: Các yếu tố.
• Active Images: tạo bức ảnh kích hoạt.
• CGI Script: Common Gateway Interface Script

1.1.11 Các thẻ tạo bảng.

Việc trình bày web theo dạng bảng sẽ làm cho trang Web của bạn chuyên
nghiệp hơn. Với dạng bảng bạn có thể chia trang Web thành nhiều phần, bạn có thể
áp dụng các kiến thức đã học trang trí cho từng phần… Khi xây dựng bảng, bạn hãy

13


nhớ quy tắc sau: bắt đầu từ ô cao nhất bên trái tiếp theo xây dựng các ô cửa hàng
đầu tiên, sau đó chuyển xuống hàng thứ hai, xây dựng các phần tử hàng thứ 2…
Ví dụ:
<table boder=1>
<tr>
<td>hàng 1 cột 1 </td>
<td>hàng 2 cột 2 </td>
</tr>
<tr>
<td>hàng 2 cột 1</td>
<td>hàng 2 cột 2 </td>
</tr>
</table>
1.2 Tổng quan về CSS.
1.2.1 Giới thiệu về CSS.

CSS được dùng để miêu tả cách trình bày các tài liệu viết bằng ngôn ngữ
HTML và XHTML. CSS viết tắt của Cascading Style Sheets. CSS được hiểu một
cách đơn giản đó là cách mà chúng ta thêm các kiểu hiện thị(font chữ, kích thước,
màu sắc,.. ) cho một tài liệu Web.
Tác dụng:

- Hạn chế tối thiểu việc làm rối mã HTML của trang Web bằng các thẻ quy
định kiểu dáng(chữ đậm, chữ in nghiêng, chữ có gạch chân, chữ màu,…) khiến mã
nguồn của trang web được gọn gàng hơn, tách nội dung của trang web và định dạng
hiển thị, dễ dàng cho việc cập nhật nội dung.
- Tạo ra các kiểu dáng có thể áp dụng cho nhiều trang Web, giúp tránh lặp lại
việc định dạng cho các trang Web giống nhau

14


1.2.2 Các phiên bản của CSS.

Khi HTML phiên bản đầu tiên được phát hành, CSS đã không được tích hợp
vào HTML. Đến năm 1996, phiên bản CSS đầu tiên đã được chính thức phát hành.
Phiên bản này bao gồm các chức năng cơ bản như font, color, background images,
…Hầu hết các trình duyệt trong giai đoạn này đều hỗ trợ CSS1.
Năm 1998, CSS2 ra đời và đã thêm vào rất nhiều tính năng mới cho CSS.
CSS2 cho phép canh chỉnh vị trí cho các thẻ của HTML, cho phép thay đổi font
chữ trong trang web và cho phép định dạng kiểu in. Hầu hết các trình duyệt
ngày nay đều hỗ trợ CSS2.
1.2.3 Các thuộc tính cơ bản trong CSS.

1.2.3.1 Các vấn đề về văn bản và cách định dạng văn bản.
Thuộc tính CSS text cho phép bạn hoàn toàn có thể quản lí được các thuộc
tính của văn bản, bạn có thể quản lí được sự ẩn hiện của nó, thay đổi màu sắc, tăng
hoặc giảm khoảng cách giữa các kí tự trong một đoạn, căn chỉnh dóng hàng.
1.2.3.2 Các thuộc tính của text mà CSS hỗ trợ.
Đặt màu cho một đoạn văn bản. Để đặt màu cho văn bản chúng ta dùng thuộc
tính: color:#mã màu;
p{color:#333333; }

Đặt màu nền cho đoạn văn bản. Để đặt màu nền (background) cho đoạn văn
bản chúng ta dùng thuộc tính: background-color:#mã màu;
p{background-color:#FFFF00; }
Căn chỉnh khoảng cách giữa các kí tự. Khoảng cách giữa các kí tự trong một
đoạn văn bản có thể được tăng hoặc giảm bởi thuộc tính letter-spacing: khoảng
cách;
h3{letter- spacing: 2em;}
h1{letter- spacing:-3em;}
Căn chỉnh khoảng cách giữa các dòng. Thuộc tính line-height: khoảng cách,
sẽ giúp bạn căn chỉnh khoảng cách giữa các dòng trong một đoạn văn bản.

15


p{line-height:150%; // lineheight:15px;}
Thêm đoạn văn bản. Một đường gạch chân hoặc đường gạch ngang dòng văn
bản sẽ làm cho đoạn văn bản của bạn thêm sinh động. Để tô điểm thêm cho đoạn
văn bản chúng ta sẽ dùng thuộc tính text-decoration: thuộc tính;
h3{text-decoration: underline; /* gạch chân */}
h2{text-decoration: line-through;/* gạch ngang */}
h1{text-decoration: overline; /* kẻ trên */}
Chỉnh vị trí của đoạn văn bản(indent). Thuộc tính text-indent: vị trí, sẽ căn
chỉnh vị trí của dòng văn bản theo chiều ngang.
h1{text-indent:-200px;/*text-indent:30px; */}
Điều khiển các kí tự trong một đoạn văn bản. Bạn có thể điều khiển toàn bộ
đoạn văn bản là chữ hoa hay chữ thường bởi thuộc tính text-transform: kiểu chữ;
p.uppercase {text-tranform: uppercase; }
p.lowercase {text-tranform: lowercase; }
p.capitalize {text-tranform: capitalize; }
Các thuộc tính của font chữ. Các thuộc tính về font chữ cho phép bạn thay

đổi họ font(font family), độ đậm(boldness), kích thước(size)và kiểu font(style).
Đặt font cho đoạn văn bản. Để đặt font chữ nào đó cho văn bản thì ta sử dụng
thuộc tính font-family; lưu ý bạn phải khai báo họ của font ở cuối vì trong trường
hợp máy của người duyệt Web không có các font thì nó sẽ lấy font mặc định của họ
font trên,…
p{font- family:Arial, Tohoma, Verdana, sans-serif; }
Đặt đoạn văn bản sử dụng font nhãn caption.
p.caption {font:caption }
Đặt kích thước font cho đoạn văn bản. Khi chúng ta muốn những đoạn văn
bản hoặc tiêu đề có kích thước cỡ chữ khác nhau, chúng ta có thể sử dụng thuộc tính
font-size:
h1{font-size: 20px; }
h3{font-size: 12px; }

16


Đường viền và các thuộc tính đường viền. Các thuộc tính đường viền sẽ cho
phép đặt các giá trị đặc biệt cho đường viền như kiểu đường viền, kích thước, màu
sắc. Thuộc tính này sẽ được áp dụng cho các thẻ HTML như <div>, <li>, <table>,…
Trong thuộc tính đường viền chúng ta có 3 giá trị cơ bản: border-color, borderwidth, border-style,…
Thuộc tính màu của đường viền. Để đặt màu cho đường viền chúng ta sẽ đặt
thông số màu cho thuộc tính bordercolor:
div.color {border-color: #CC0000; }
Đặt chiều rộng cho đường viền. Nếu muốn đặt chiều rộng cho đường viền
chúng ta sẽ đặt các giá trị cho thuộc tính border-width:
div.borderwidth {border- width:2px; }
Chọn kiểu đường viền. Bạn có thể sử dụng thuộc tính border-style để đặt kiểu
cho đường viền. chúng ta có thể gán cho thuộc tính này 9 giá trị khác nhau tương
ứng với 9 kiểu đường viền khác nhau.

div.borderstyle {border- style: solid; }
Về 4 phía của đối tượng có 4 thuộc tính border tương ứng: border-top, border-right,
border-bottom, border-left. Ứng với đường viền của mỗi phía đều có 3 giá trị: color,
width, style.
1.3 Giới thiệu về Wordpress
1.3.1 Khái niệm về Wordpress

WordPress là một dạng phần mềm mã nguồn mở được Christine Selleck đề
xuất . Mọi người biết đến WordPress đơn giản là để viết Blog, để đăng tải thông tin
của mình lên mạng nhưng không đơn giản như vậy, WordPress còn có chức năng
như mọi Website khác. Nó có thể làm site tin tức, đánh giá, bán hàng… thậm chí
là… mạng xã hội. Các bạn có thể ứng dụng wordpress để tạo cho mình 1 website
trên nền wordpress, 1 website được tạo ra nhanh chóng đơn giản mà lại tiện cho việc
quảng bá sản phẩm , thông tin , kiến thức ….WordPress được viết bằng ngôn ngữ
lập trình PHP và sử dụng MySQL database. WordPress là “con” của B2 / Cafelog,
được xây dựng trên sự tiện dụng, cùng các định dạng chuẩn của web. Phiên bản mới
17


nhất của WordPress tính đến tháng 1/2014 là 3.8. Rất nhiều Website nổi tiếng đang
sử dụng WordPress làm nền tảng để phát triển như CNN, ebay, bata,….
Những đặc điểm nổi bật của WordPress:
Cài đặt đơn giản và cực kì nhanh chóng, với trình cài đặt 5 phút nổi tiếng .

•
•

Hệ thống Plugin phong phú và cập nhật liên tục, bạn cũng có thể tự viết

plugin cho mình.

•

Hỗ trợ nhiều ngôn ngữ ( bao gồm cả tiếng Việt )

•

Được cập nhật, vá lỗi và hỗ trợ liên tục.

•

Có rất nhiều Theme miễn phí, chuyên nghiệp và SEO rất tốt.

•

Dễ dàng quản lý và thao tác, việc quản lý blog, bài viết giống như các phần

mềm thiết kế web chuyên nghiệp.
•

Tích hợp sẵn Latex – công cụ soạn thảo công thức toán học, bạn có thể viết

công thức toán học ngay trong bài viết.
•

Upload và quản lý hình ảnh một cách dễ dàng, đặc biệt là chức năng tạo

thumbnail rất hay.
•

Có một hệ thống Widget đa dạng ( ứng dụng tạo thêm ) như Thống kê số

người truy cập, Danh sách các bài viết mới, các bài viết nổi bật, được xem nhiều,
được comment nhiều, Liệt kê các chuyên mục, Liệt kê các trang, Bài viết theo ngày
tháng, … có đến trên 23 Widget để bạn tha hồ lựa chọn.
•

Thống kê số truy cập từng ngày đối với mỗi bài viết của blog. Trên cơ sở đó

bạn sẽ có định hướng nên viết gì tiếp theo.
•

Hệ thống quản lý và duyệt Comment rất hay, có thể chặn spam theo IP.

•

Hệ thống phân quyền với nhiều cấp độ khác nhau như: Administrator,

Author, Editor, Contributer, Subcriber. Mỗi phân quyền sẽ có các quyền hạn khác
nhau như được phép đăng bài viết, sửa bài viết, xóa bài viết, duyệt comment …
•

Sao lưu dữ liệu một cách dễ dàng để backup hoặc chuyển nhà sang một nơi

khác.

18


•

Hỗ trợ import đa năng từ các blog khác như Blogspot, Tumblr, Blogger,

LiveJournal …
•

WordPress hỗ trợ 3 GB để lưu trữ hình ảnh và văn bản.

•

Hàng ngày WordPress sẽ thống kê 100 bài viết trên các blog tiếng Việt

được nhiều người đọc nhất. Nhờ đó bạn biết được các thông tin quan trọng nhất
đang diễn ra.
•

Và đặc biệt mới đây nhất WordPress hỗ trợ việc quản lý blog qua mobile rất

thuận tiện và dễ dàng.
1.3.2 Cài đặt webserver chạy Wordpress

Để chạy được Wordpress ta cần phải có một WebServer với Apache,
MySQL, PHP and Perl, việc cấu hình và cài đặt WebServer gặp nhiều khó khăn và
tốn kém thời gian. Hiện nay có nhiều phần mềm cấu hình sẳn và ứng dụng như một
WebServer như Xamp, Wamp,…Trong phần này tôi sử dụng WebServer Xampp để
chạy Joomla..
Cài đặt Web Server - Cài đặt XAMPP
Nếu muốn một trang web viết bằng ngôn ngữ PHP có thể chạy được trên máy
tính cục bộ và trên máy chủ thì cần phải có một web server là Apache, bộ thông dịch
ngôn ngữ PHP, ngôn ngữ truy vấn cơ sở dữ liệu là mySQL.
Đây là ba thành phần độc lập với nhau nhưng là bộ tam không thể thiếu nhau.

Với người bình thường nếu muốn 3 thành này chạy với nhau một cách tốt đẹp thì
bạn phải có nhiều kiến thức sâu rộng về chúng vì thế sẽ gây khó khăn cho người mới
học.
Từ nhu cầu đó mà một gói phần mềm tích hợp 3 thành phần trên đã ra đời.
Có nhiều phần mềm tích hợp 3 thành phần này. Nhưng hiện nay, gói phần mềm
chạy ổn định nhất đó là XAMPP.
XAMPP tích hợp các gói phần mềm: Apache (web server), PHP (Ngôn ngữ lập trình
web), mySQL (hệ quản trị cơ sở dữ liệu dành cho PHP)…

19


1.3.3 Cài đặt XAMPP

Gói phần mềm XAMPP là miễn phí, bạn có thể tải về bản mới nhất tại địa chỉ:
/>1. Sau khi tải về, bạn kích hoạt tập xampp-win32-1.6.8-installer.exe.
2. Chương trình sẽ yêu cầu bạn chọn 1 ngôn ngữ cài đặt, bạn hãy để ngôn ngữ mặc
định và nhấn OK.

Hình 1.5. Chọn ngôn ngữ cài đặt
3. Cửa sổ mới mở ra, bạn nhấn Next để tiếp tục
4. Cửa sổ mới mở ra yêu cầu bạn chọn một đường dẫn để lưu cài đặt. Bạn có thể đặt
chương trình ở phân vùng khác trên ổ cứng của bạn như là D, E , …. Nếu không có
gì thay đổi, bạn nhấn Next để chuyển sang cửa sổ mới.

20


Hình 1.6. Chọn thư mục cài đặt
5. Cửa sổ mới mở ra, bạn chọn tất cả các dịch vụ của chương trình.

Hình 1.7. Tùy chọn cài đặt
6. Chương trình sẽ bắt đầu công việc cài đặt XAMPP lên ổ cứng

21


Hình 1.8. Tiến trình cài đặt Xampp
7. Cửa sổ cuối cùng sẽ thông báo cho chúng ta biết quá trình cài đặt đã thành công.
Bạn nhấn Finish để kết thúc cài đặt.

Hình 1.9. Cài đặt hoàn tất
8. Tiếp theo, chương trình sẽ gọi tất cả các dịch vụ của web server ra chạy. Sau khi
hoàn thành, chương trình sẽ mở hộp thoại thông báo. Bạn nhấn OK để tiếp tục.

22


Hình 1.10. Thông báo cài đặt thành công
9. Sau đó, một hộp thoại mới mở ra, bạn chọn Yes để tiếp tục. Trong hộp hội thoại
mới kế tiếp, bạn chọn mở hết các dịch vụ Apache, MySQL bằng cách check vào ô
vuông dịch vụ và chọn Start như hình sau:

Hình 1.11. Control Panel của Xampp
Đến đây quá trình cài đặt một web server chạy dạng trên máy tính cá nhân đã
hoàn thành.
Tất cả mọi máy tính cá nhân cài web server đều có chung một tên miền để
truy cập là: http://localhost hoặc địa chỉ IP là http://127.0.0.1
Sau khi cài đặt, web server sẽ tự động mở cổng 80 để phục vụ việc trình bày
trang web trên các trình duyệt web.

Việc cài đặt web server không yêu cầu máy tính của bạn phải có một card
mạng gắn sẵn. Nếu máy tính không có card mạng, bạn vẫn có thể tạo được
webserver để phục vụ lập trình web.

23


10. Sau khi cài đặt, bạn cần kiểm tra lại xem web server có đang chạy hay không.
Mở một trình duyệt web và gõ vào địa chỉ htt://localhost

Hình 1.12. Chọn ngôn ngữ để vào phpmyadmin
11. Nếu trình duyệt của bạn mở ra như hình sau thì bạn đã thành công. Tiếp theo,
bạn chọn English để vào trang chủ của XAMPP

Hình 1.13. Trang chủ Xampp sau khi cài đặt
1.3.4 Cài đặt Wordpress trên localhost

Về phần localhost bạn phải có XAMPP, WAMP5 hay Appserv ... bất cứ phần nềm
nào cho phép giả lập locahost.
Database:
1. Bạn hãy gõ vào address bar: localhost/phpmyadmin
1. Tạo mới 1 database .
Sau đó tiến hành:
1. Bạn giải nén và copy toàn bộ code của wordpress vào thư mục htdocs của
localhost.
2. Mở file wp-config-sample.php và thực hành.
Tìm những giá trị như hình dưới:

24

25