xuất bản trang diện tử

05/10/2021
Chương IV
XUẤT BẢN TRANG TIN ĐIỆN TỬ
NỘI DUNG
1. Các khái niệm và thuật ngữ chính
- Khái niệm website
- Các khái niệm chính trong sử dụng website
- Giao thức
2. Xuất bản website
3. Thiết kế website
- Cơ bản về HTML
- Cơ bản về CSS
- Hoạch định và thiết kế website
1
05/10/2021
KHÁI NIỆM VÀ THUẬT NGỮ

KHÁI NIỆM WEBSITE
1. Nguồn gốc
- Website có nhiều tên gọi khác như: web,
WWW – World Wide Web, trang tin điện tử, trang
web… Do sự phổ biến, nhiều người con lầm tưởng
Web chính là Internet.
- Web được biết đến bắt đầu từ năm 1980 ở
CERN và do Tim Berner Lees sáng tạo ra.
- Để sử dụng Web cần có một client được gọi là
trình duyệt Web.

KHÁI NIỆM WEBSITE
2. Cấu trúc
- Web là những kho tài liệu với các trang Web.
Các trang này không những chứa văn bản mà còn có
thể bao gộp các hình ảnh, âm thanh, video, ...
- Trang Web: là tài liệu sử dụng HTML
(HyperText Markup Language) để mô tả và được lưu
trữ thành những tập tin dạng văn bản có phần mở
rộng là HTML hay HTM.
2
05/10/2021

CÁC KHÁI NIỆM CHÍNH
1. Máy chủ web - Web Server
- La một trong những thành phần không thể
thiếu giúp mọi người truy cập vào website một cách
đơn giản, dễ dàng.
- Mỗi web server đều có một địa chỉ IP hoặc
cũng có thể có một domain name. Bất kỳ máy tính
nào cũng có thể trở thành web server bởi việc cài đặt
lên nó một chương trình phần mềm server software và
sau đó kết nối vào Internet.

3
05/10/2021

2. Trình duyệt (Web Browser)
- Là một ứng dụng phần mềm giúp người dùng
truy cập các thông tin có trên World Wide Web
(WWW). Tại mỗi địa chỉ WWW sẽ là một trang web
chứa đựng các hình ảnh, video và văn bản được xác
định bằng một URL riêng biệt.
- Các trình duyệt web sẽ dùng định dạng
HTML để hiển thị nội dung, thế nên một trang web sẽ
có thể được hiển thị khác nhau trên những trình duyệt
khác nhau.
7

4
05/10/2021

3. Tên miền (Domain)
- Tên miền là địa chỉ trang web, thứ mà mọi người gõ
vào thanh URL của trình duyệt để truy cập website.
- Nói một cách đơn giản, nếu website là một ngôi nhà
thì tên miền là địa chỉ của nó.
TLD - Top level domain

4. Bộ định vị tài nguyên (URL)
- Để sử dụng các tài nguyên trên Internet, người
ta cần chỉ ra địa chỉ của nó bằng các URL.
- URL là một sự qui ước chuẩn cho việc chỉ
định vị trí mỗi tài nguyên trên Internet, tài nguyên đó
hoặc là một tài hiệu hoặc là một dịch vụ.
10
5
05/10/2021

11

5. Siêu liên kết (HyperLink)
- Là một đường dẫn mà khi người dùng nhấp
chuột vào sẽ được chuyển đến một vị trí nào đó trên
trang khác hoặc bất kỳ trang web nào khác mà người
dùng chèn vào.
12
6
05/10/2021

6. Web Hosting
- Hosting (hay web hosting) là một dịch vụ
online giúp xuất bản website hoặc ứng dụng web lên
Internet. Khi đăng ký dịch vụ hosting, tức là thuê một
chỗ đặt trên server chứa tất cả các files và dữ liệu cần
thiết để website chạy được.
- Server là máy tính vật lý chạy không gián
đoạn để website có thể hoạt động mọi lúc cho tất cả
mọi người truy cập vào. Nhà cung cấp Web Hosting
chịu trách nhiệm cho việc giữ server hoạt động.
13

14
7
05/10/2021

7. Bộ máy tìm kiếm (Search Engine)
- Là một phần mềm nhằm cho phép người dùng
tìm kiếm và đọc các thông tin có trong nội phần mềm
đó, trên một trang web, một tên miền, nhiều tên miền
khác nhau, hay trên toàn bộ Internet.
15

GIAO THỨC
1. HTTP (HyperText Transfer Protocol)
- Protocol HTTP (1990) được sử dụng để trao
đổi thông tin giữa web client và web server. Protocol
này định nghĩa cách client định dạng những yêu cầu
và cách web server đáp ứng cho những yêu cầu đó.
- Protocol HTTP là một giao thức thuần văn
bản. Một trình duyệt web gởi yêu cầu đến web server
và đến lượt web server gởi trả lời cho trình duyệt web
tương ứng.
16
8
05/10/2021

GIAO THỨC
2. TCP/IP (Transmission Control Protocol/Internet
Protocol)
- Là một bộ các giao thức trao đổi thông tin
được sử dụng để kết nối các thiết bị mạng trên
Internet. TCP/IP có thể được sử dụng như là một giao
thức trao đổi thông tin trong một mạng riêng
(intranet hoặc extranet)
- Sử dụng mô hình giao tiếp máy khách/máy
chủ, trong đó người dùng (máy khách) được máy tính
khác (máy chủ) cung cấp một dịch vụ trong mạng.
17

GIAO THỨC
3. FTP (File Transfer Protocol)
- FTP - Giao thức truyền tải tập tin được dùng
trong việc trao đổi dữ liệu trong mạng thông qua giao
thức TCP/IP
- Các máy client trong mạng có thể truy cập
đến máy chủ FTP để gửi hoặc lấy dữ liệu. Điểm nổi
bật là người dùng có thể truy cập vào máy chủ FTP để
truyền và nhận dữ liệu dù đang ở xa.
18
9
05/10/2021
XUẤT BẢN WEBSITE
1. Xây dựng website

- Phương pháp thủ công: Lập trình sử dụng
ngôn ngữ HTML, JavaScript, Css và PHP.
- Sử dụng FrameWork có sẵn: Wordpress,
Laravel,…
19
XUẤT BẢN WEBSITE
2. Xuất bản trên Internet

- Mua Hosting.
- Mua tên miền.
- Cài phần mềm FTP như: FileZilla, WinSCP,
Cyberduck,…
20
10
05/10/2021
THIẾT KẾ WEBSITE
CƠ BẢN VỀ HTML
1. Giới thiệu
HTML (HyperText Markup Language) là một
sự định dạng để Web browser hiển thị những tài liệu
multimedia. Bản thân những tài liệu chỉ là những tập
tin văn bản đơn giản (ASCII) với những tag hoặc
những đoạn mã đặc biệt mà một Web browser biết
cách thông dịch và hiển thị nó trên màn hình của bạn.
21
CƠ BẢN VỀ HTML
2. Tag HTML
- Khi một Web browser hiển thị một trang
chẳng hạn như trang bạn đang xem ở đây, Web
browser sẽ đọc từ một file văn bản đơn giản và tìm
kiếm những đoạn mã đặc biệt hay những tag được
đánh dấu bởi ký hiệu < và > . Dạng chung của một tag
HTML là:
<tag_name>string of text</tag_name>
Trong đó tag_name không phân biệt chữ thường và
chữ hoa
22
11
05/10/2021
CƠ BẢN VỀ HTML
Ví dụ: Tiêu đề của phần này sử dụng tag header:
<h3>Tag HTML là gì?</h3>, Tag này báo cho Web
browser hiển thị dòng chữ Tag HTML là gì? ở dạng
của mức độ tiêu đề thứ ba.
- Điều quan trọng cần nhớ là trong tag kết thúc
</tag_name> có chứa ký tự "/". Ký tự "/" này báo cho
Web browser biết là hiệu ứng của tag được kết thúc
tại đây.
23
CƠ BẢN VỀ HTML
3. Tạo trang HTML
Một trang HTML gồm hai phần riêng biệt, phần
đầu (head) và phần thân (body). Phần đầu chứa đựng
những thông tin về tài liệu và không được hiển thị lên
màn hình. Phần thân thì chứa đựng mọi thứ được trình
bày lên màn hình như là một phần của trang Web.
Trang HTML được lưu trong tập tin dạng *.htm
hay *.html và được mở trong Web browser.
24
12
05/10/2021
CƠ BẢN VỀ HTML
Cấu trúc cơ bản
25
CƠ BẢN VỀ HTML
4. Định dạng trang HTML
- Tiêu đề trang (heading tag): có 6 tag
<h1>Volcano Web</h1>
<h2>Introduction</h2>
<h3>Volcano Terminology</h3>
<h4>Volcanic Places in the USA</h4>
<h5>Mount St Helens</h5>
<h6>Long Valley</h6>
26
13
05/10/2021
CƠ BẢN VỀ HTML
- Chia đoạn: HTML tag cho công việc chèn một sự
chia đoạn là:
<p>your paragraph</p>
Ví dụ:
<p>A volcano is a location where magma, or hot
melted rock from within a planet. It may happen
violently, in a massive supersonic explosion, or more
quietly, as a sticky, slow lava flow. </p>
27
CƠ BẢN VỀ HTML
your paragraph<br>
Hiển thị your paragraph và xuống dòng
your paragraph<hr>\
Hiển thị your paragraph và gạch ngang phía dưới
28
14
05/10/2021
CƠ BẢN VỀ HTML
- Các HTML tag hỗ trợ việc định dạng này như:
<b>your content</b> tạo hiệu ứng đậm chữ
<i>your content</i> tạo hiệu ứng nghiên chữ
<u>your content</u> tạo hiệu ứng gạch dưới chữ
<tt>your content</tt> tạo hiệu ứng chữ có dạng như
từ máy đánh chữ
29
CƠ BẢN VỀ HTML
- Thay đổi kích cở phông chữ:
<font size=N color=C face=F>...</font>
+ Phông chữ với N từ 1 (nhỏ nhất) tới 7 (lớn nhất) với
cở 3 là kích cở bình thường, C là tên màu hay mã màu
(theo hệ GRB và có dạng #rrggbb với r, g, b từ 00 đến
FF), và F là tên font chữ cần dùng (nếu không dung
tên font chữ thì trang HTML sẽ sử dụng font chữ mặc
định của browser).
+ Lưu ý là kích cở thật của chữ còn phụ thuộc vào
phông chữ trên máy tính.
30
15
05/10/2021
CƠ BẢN VỀ HTML
- Màu nền và hình nền cho tài liệu HTML:
<BODY BGCOLOR=#XXXXXX TEXT=#XXXXXX
LINK=#XXXXXX ALINK=#XXXXXX>
+ BGCOLOR = mau sac cua nen
+ TEXT = màu của chữ trong thân văn bản
+ LINK = Màu sắc của một mục liên kết siêu văn bản
+ALINK = Màu sắc của mục siêu văn bản đã xem.
<BODY BGCOLOR=#000000 TEXT=#EEEEBB
LINK=#33CCFF ALINK=#CC0000>
31
CƠ BẢN VỀ HTML
- Escape Sequences của HTML:
+ < thay cho <
+ > thay cho >
+ & thay cho &
+ "khoảng trắng không bị phá hủy" (non-
breaking space)
32
16
05/10/2021
CƠ BẢN VỀ HTML
- Tag HTML cho Inline Graphics:
<img src=“filename.gif” alt=“…” border=N
width=X height=Y align=xxx>
+ filename.gif là tên của một tập tin GIF để ở cùng
directory/folder với tài liệu HTML, N để xác định độ
dầy của đường viền, X và Y để xác định kích thước
của hình. Từ "inline" có nghĩa là web browser sẽ hiển
thị hình ảnh ngay trong văn bản.
+ Để một hình ảnh xuất hiện trên một dòng riêng biệt,
<p> <img src="filename.gif"> <p>
33
CƠ BẢN VỀ HTML
Tag <img...> có thể thêm thuộc tính để điều
khiển vị trí của văn bản so với hình ảnh trong hàng.
Thuộc tính align được thêm vào trong tag <img....> có
thể đem lại những hiệu quả sau:
+ align=top: <img align=top src="filename.gif">
+ align=middle: <img align=middle
src="filename.gif">
+ align=bottom (mặc định):<img align=bottom
src="filename.gif">
34
17
05/10/2021
CƠ BẢN VỀ HTML
5. Xử lý danh sách và tạo bảng
5.1 Xử lý danh sách
- Danh sách không thứ tự (Unordered List): Lệnh UL
và LI.
Ví dụ: My Unordered List:
 Item 1
 Item 2
 Item 3
35
CƠ BẢN VỀ HTML
Và dạng HTML cho kết quả trên là:
<B>My Unordered List:</B>
<UL>
<LI> Item 1 </LI>
<LI> Item 2 </LI>
<Li> Item 3 </LI>
</UL>
36
18
05/10/2021
CƠ BẢN VỀ HTML
- Danh sách có thứ tự (Ordered List): Lệnh OL và LI.
Ví dụ: My Ordered List:
1. Item 1
2. Item 2
3. Item 3
37
CƠ BẢN VỀ HTML
Và dạng HTML cho kết quả trên là:
<B>My Ordered List:</B>
<OL>
<LI> Item 1 </LI>
<LI> Item 2 </LI>
<Li> Item 3 </LI>
</OL>
38
19
05/10/2021
CƠ BẢN VỀ HTML
- Danh sách lồng nhau: <UL> <OL> <LI> <LI> <LI>
<LI> </UL> </OL>
Ví dụ 1: Tạo Merge list như sau
39
CƠ BẢN VỀ HTML
Mã HTML
40
20
05/10/2021
CƠ BẢN VỀ HTML
Ví dụ 2: Tạo Merge list như sau
41
CƠ BẢN VỀ HTML
Mã HTML
42
21
05/10/2021
CƠ BẢN VỀ HTML
5.2 Tạo bảng
- Các bảng được xây dựng bắt đầu từ phần tử cao nhất
bên trái, tiếp theo xây dựng các phần tử của hàng đầu
tiên, xong chuyển đến hàng thứ hai, xây dựng các
phần tử của hàng thứ hai....
--> --> --> --> --> -->
___________________________|
|
--> --> --> --> -->
43
CƠ BẢN VỀ HTML
- Tag cơ bản: <table> , <tr>, <td>
Ví dụ: Tạo bảng như sau
44
22
05/10/2021
CƠ BẢN VỀ HTML
Mã HTML
45
CƠ BẢN VỀ HTML
- Định dạng trong bảng:
+ Border: vẽ đường viền bảng độ dày tùy chọn.
+ Chỉnh lề theo chiều ngang
* td align=left> Sắp xếp tất cả các thành phần về
bên trái của cell (đây là thuộc tính mặc định)
* <td align=right> Sắp xếp tất cả các thành phần
về bên phải của cell
* <td align=center> Sắp xếp tất cả các thành phần
vào giữa cell
46
23
05/10/2021
CƠ BẢN VỀ HTML
=> Bạn có thể kết hợp các thuộc tính này lại với nhau:
<td align=left valign=bottom>
=> Dạng HTML này sẽ hiển thị một phần tử với các
thành phần dọc theo bên trái và từ dưới lên.
47
CƠ BẢN VỀ HTML
=> Bạn có thể kết hợp các thuộc tính này lại với nhau:
<td align=left valign=bottom>
=> Dạng HTML này sẽ hiển thị một phần tử với các
thành phần dọc theo bên trái và từ dưới lên.
Bảng ở ví dụ trên trông rất đơn giản và vuông vức -

ba hàng và ba cột. Vấn đề cần quan tâm hơn là sử
dụng các tag thuộc tính colspan và rowspan trong tag
<td>...</td>.
48
24
05/10/2021
CƠ BẢN VỀ HTML
Ví du: tạo bảng sau
49
CƠ BẢN VỀ HTML
Mã HTML
50
25
05/10/2021
CƠ BẢN VỀ HTML
6. Tạo liên kết giữa các trang web
<a href="filename.htm">text that responds to
link</a>
Trong đó “a” là anchor, còn “href” là hypertext

reference, và tên tập tin phải là một tập tin HTML
khác. Bất cứ văn bản nào xuất hiện sau ký hiệu > và
trước ký hiệu </a> sẽ là “siêu văn bản”, nó được hiển
thị bằng gạch dưới và “hyper”.
51
CƠ BẢN VỀ HTML
6. Tạo liên kết giữa các trang web
<a href="filename.htm">text that responds to
link</a>
Trong đó “a” là anchor, còn “href” là hypertext
reference, và tên tập tin phải là một tập tin HTML
khác. Bất cứ văn bản nào xuất hiện sau ký hiệu > và
trước ký hiệu </a> sẽ là “siêu văn bản”, nó được hiển
thị bằng gạch dưới và “hyper”.
Ví dụ: <a href="../../home.htm">return to home</a>
52
26
05/10/2021
CƠ BẢN VỀ HTML
- Liên kết đến hình ảnh: là liên kết đến một tập tin
trong cùng một directory/folder với tài liệu gọi nó.
Ví dụ:<a href = "hinh1.jpg"> Liên kết đến hình ảnh
cô gái <br></a>
- Liên kết đến URL: <a href="URL">Text to Activate

Link</a>
Ví dụ: <a href="https://ctuet.edu.vn/"> Liên kết đến
URL CTUT </a>
53
CƠ BẢN VỀ HTML
- Button siêu liên kết, hình liên kết: Có thể làm cho
hình ảnh inline hoạt động theo cách giống như
"hyper". Cách để làm được điều này là đặt các tag
HTML sao cho các hình ảnh inline ở bên trong phần
siêu văn bản của tag anchor:
<a href="fileX.htm"><img src="graphic.gif">Go to
Document X</a>
54
27
05/10/2021
CƠ BẢN VỀ HTML
- Thẻ div – viết tắt của division – là thẻ được dùng để
nhóm nhiều phần tử HTML lại với nhau. Mỗi thẻ
trong HTML đều có mục đích khác nhau. Ví dụ như
thẻ <p> (viết tắt của paragraph) được dùng để chỉ
định một đoạn văn bản nhất định, hay thẻ <br> dùng
để ngắt đoạn văn bản trong HTML. Thẻ <div> là thẻ
đánh dấu một khối (block) gồm nhiều thẻ khác trong
khối. Như tên gọi, thẻ <div> giúp các tài liệu HTML
được chia thành các phần (khối) riêng biệt.
55
CƠ BẢN VỀ HTML
7. Phân vùng tài liệu
- Để phân chia vùng client của browser thành nhiều
phần độc lập nhau, không thể dùng <table> để thực
hiện mà phải dùng <frameset> và <frame> để xử lý.
- Tag <frameset> dùng để khai báo việc phân chia
vùng, tag <frame> dùng để khai báo vùng con thành
phần trong vùng đã phân chia.
56
28
05/10/2021
CƠ BẢN VỀ HTML
<frameset cols=“xxxx” rows=“yyyy” frameboder=N>
<frame name= “name_1” src=“URL1” scrolling=zzzz
noresized=vvvv>
<frame name= “name_2” src=“URL2” scrolling=zzzz
noresized=vvvv >
..
<frame name= “name_K” src=“URLK” scrolling=zzzz
noresized=vvvv >
</frameset>
57
CƠ BẢN VỀ HTML
Trong đó:
+ cols khai báo độ rộng của các phân vùng theo chiều
dọc (columns)
+ rows khai báo độ rộng của các phân vùng theo chiều
ngang (rows)
+ frameborder khai báo độ dày của đường phân chia
vùng, source khai báo trang web được mở trong mỗi
vùng con
+ scrolling khai báo trạng thái thanh cuộn - có thể là no,
yes hay auto, noresized.
58
29
05/10/2021
CƠ BẢN VỀ HTML
Ví dụ: Muốn chia trang HTML như sau:
59
CƠ BẢN VỀ HTML
Mã HTML
60
30
05/10/2021
CƠ BẢN VỀ HTML
8. Fom và các thành phần
- Form là một dạng đối tượng chứa đựng các thành
phần (control) như textbox, button, combobox, … và
lưu trữ dữ liệu của các thành phần đó để gửi lên
server.
- Để tạo 1 thành phần (textbox, combobox,
radiobutton…) và cho chúng hiển thị trong trang web,
cần phải tạo form chứa đựng chúng.
61
CƠ BẢN VỀ HTML
Cú pháp:
<form name=“tên_form” action=“URL” method=
“xxx”>
…..
….
</form>
62
31
05/10/2021
CƠ BẢN VỀ HTML
Trong đó:
+ Tên form dùng để truy xuất đến các thành phần của
form hay của các control trong JavaScript.
+ URL chỉ đến địa chỉ của trang web (hoạt động trên
server) xử lý các dữ liệu có trong form/control được
gửi lên và phản hồi sự đáp ứng yêu cầu
+ xxx là dạng thức gửi dữ liệu từ form trong trang
web lên server theo đường truyền – có thể là post hay
là get, giá trị mặc định của xxx là get.
63
CƠ BẢN VỀ HTML
- Các Control trong HTML:
+ Textbox:
<input type=text name=tên_textbox [value =
“giá_trị_mặc_định”]>
Ví dụ: <input type=text name = txt_hoten value=
"Nguyễn Văn A">
64
32
05/10/2021
CƠ BẢN VỀ HTML
- Các Control trong HTML:
+ Password:
<input type=password name=tên_password
[value=“giá_trị_mặc_định”]>
Ví dụ: <input type=password name = txt_pass value
= "123456">
65
CƠ BẢN VỀ HTML
+ Textbox ẩn:
<input type=hidden name=tên_hidden
[value=“giá_trị_mặc_định”]>
Ví dụ: <input type=hidden name = txt_hidden value
= "123456">
66
33
05/10/2021
CƠ BẢN VỀ HTML
+ Radio:
<input type=radio name=tên_radio
[value=“giá_trị_mặc_định”] [checked]>
Lưu ý: Chung group thì name giống nhau

67
CƠ BẢN VỀ HTML
+ Checkbox:
<input type=checkbox name=tên_checkbox
[value=“giá_trị_mặc_định”] [checked]>
68
34
05/10/2021
CƠ BẢN VỀ HTML
+ Button:
<input type=button name=tên_button
[value=“nhãn_button”]>
Ví dụ: <input type=button id=1 name=btn_1
value="Tải tại đây">
69
CƠ BẢN VỀ HTML
+ Reset: Dùng để khởi tạo lại dữ liệu trên form
<input type=reset name=tên_reset_button
Ví dụ: <input type=reset id=1 name=RSbtn_1
value="Tải tại đây"> </p>
70
35
05/10/2021
CƠ BẢN VỀ HTML
+ Submit: Dùng để xác nhận dữ liệu trên form
<input type=submit name=tên_button
Ví dụ: <input type=submit id=3 name=SMbtn_1
value="Submit">
71
CƠ BẢN VỀ HTML
+ Combobox:
<select name=tên_combobox>
<option [value=“giá_trị_phần_từ”]>
nội_dung_phần_từ</option>
…
</select>
72
36
05/10/2021
CƠ BẢN VỀ HTML
Ví dụ:
73
CƠ BẢN VỀ HTML
+ Listbox:
<select name=tên_listbox size=N [multiple]>
<option [value=“giá_trị_phần_từ”]>
nội_dung_phần_từ</option>
…
</select> trong đó N > 1
74
37
05/10/2021
CƠ BẢN VỀ HTML
Ví dụ:
75
CƠ BẢN VỀ HTML
+ TextArea:
<textarea name=tên_textarea cols=N rows=M>
nội_dung_mặc_định</textarea>
Ví dụ:
76
38
05/10/2021
CƠ BẢN VỀ CSS
CSS (Cascading Style Sheets) đượ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.
77
CƠ BẢN VỀ CSS
1. Một số đặ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). Để cho thuận tiện bạn có thể đặt toàn bộ các
thuộc tính của thẻ vào trong một file riêng có phần
mở rộng là ".css"
- CSS nó phá vỡ giới hạn trong thiết kế Web, bởi chỉ
cần một file CSS có thể cho phép bạn quản lí định
dạng và layout trên nhiều trang khác nhau.
78
39
05/10/2021
CƠ BẢN VỀ CSS
- Có thể khai báo CSS bằng nhiều cách khác nhau.
Bạn có thể đặt đoạn CSS của bạn phía trong thẻ
<head>...</head>, hoặc ghi nó ra file riêng với phần
mở rộng ".css", ngoài ra bạn còn có thể đặt chúng
trong từng thẻ HTML riêng biệt.
Ví dụ: Khai báo css
#vidu {
width: 200px;
height: 300px;}
79
CƠ BẢN VỀ CSS
2. Cú pháp của CSS
- Cú pháp của CSS được chia làm 3 phần. phần
thẻ chọn (selector), phần thuộc tính (property),
phần nhãn (value).
selector {property: value}
80
40
05/10/2021
CƠ BẢN VỀ CSS
- Nếu nhãn của bạn có nhiều từ bạn nên đặt nhãn của
bạn vào trong dấu nháy kép
p {font-family: "sans serif"}
- Trong trường hợp thẻ chọn của bạn nhiều thuộc tính
thì các thuộc tính sẽ được ngăn cách bởi dấu (;).
p {text-align:center;color:red}
=> Khi thẻ chọn có nhiều thuộc tính thì chúng ta nên
để mỗi thuộc tính ở trên một dòng riêng biệt.
81
CƠ BẢN VỀ CSS
3. Cách chèn CSS vào web
- Bạn đã có một file CSS của bạn, bây giờ công việc
tiếp theo là làm thế nào để chèn những đoạn CSS của
bạn vào trong trang, Và xem chúng hoạt động như thế
nào. Trong phần này chúng ta sẽ đi tìm hiểu chi tiết về
cách chèn một đoạn style trong trang HTML hay liên
kết tới một file CSS viết sẵn.
- Khi trình duyệt đọc đến CSS, thì toàn bộ Website sẽ
được định dạng theo các thuộc tính đã được khai báo
trong phần CSS.
82
41
05/10/2021
CƠ BẢN VỀ CSS
3. 1 CSS khai báo tại 1 file riêng
Toàn bộ mã CSS được chứa trong file riêng có
phần mở rộng .css là một ý tưởng được dùng khi một
file CSS sẽ được áp dụng cho nhiều trang khác nhau.
Bạn có thể thay đổi cách hiển thị của toàn bộ site mà
chỉ cần thay đổi một file CSS. Trong cách này thì file
CSS sẽ được chèn vào văn bản HTML thông qua thẻ
<link>...</link>
83
CƠ BẢN VỀ CSS
Ví dụ:
<html>
<head>
<link rel="stylesheet" type="text/css"
href="mystyle.css" />
</head>
<body>
</body>
</html>
84
42
05/10/2021
CƠ BẢN VỀ CSS
File CSS có thể được soạn thảo bằng một số
trình duyệt khác nhau. Trong file không được chứa
mã HTML, khi ghi lại chúng ta bắt buộc phải ghi lại
với phần mở rộng là .css. Giả sử chúng trong file
mystyle.css ở trên chứa đoạn mã sau:
+ hr {color: sienna}
+ p {margin-left: 20px}
+ body{background-image:url("images/back40.gif")}
85
CƠ BẢN VỀ CSS
3.2 Chèn CSS trong tài liệu HTML
Chèn thẳng CSS trong tài liệu được áp dụng
trong trường hợp những định dạng CSS này chỉ giành
riêng cho tài liệu HTML đó. Khi bạn chèn trực tiếp thì
đoạn mã của bạn phải đặt trong thẻ <style> và đặt
trong phần <head>.
86
43
05/10/2021
CƠ BẢN VỀ CSS
Ví dụ:
<head>
<style type="text/css">
hr {color: sienna}
p {margin-left: 20px}
body {background-image:
url("images/back40.gif")}
</style>
</head>
87
CƠ BẢN VỀ CSS
3.3 Chèn CSS trực tiếp trong thẻ HTML (Inline style)
Inline style được sử dụng nhiều trong trường
hợp một thẻ HTML nào đó cần có style riêng cho nó.
Inline style được áp dụng cho chính thẻ HTML
đó, cách này sẽ có độ ưu tiên lớn nhất so với hai cách
trên. Dưới đây là một ví dụ mà ta dùng Inline style:
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>
88
44
05/10/2021
CƠ BẢN VỀ CSS
3.4 Nhiều StyleSheet
Trong trường hợp mà có một số thẻ có cùng
định dạng, chúng ta có thể gộp chúng lại với nhau.
Giả sử như sau:
h1, h2, h3 {
margin-left: 10px;
font-size: 150%;
...
}
Cả ba thẻ h1, h2, h3 đều có cùng 3 thuộc tính.
89
CƠ BẢN VỀ CSS
4. Cách định dạng
- Để đặt màu cho một đoạn văn bản chúng ta có thể
dùng thuộc tính: color: #mã màu;
p{
color: #333333;
}
90
45
05/10/2021
CƠ BẢN VỀ CSS
- Đặt màu nền (background) cho đoạn văn bản bằng
thuộc tính background-color: #mã màu;
p{
background-color: #FFFF00;
}
91
CƠ BẢN VỀ CSS
- 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;
}
92
46
05/10/2021
CƠ BẢN VỀ CSS
- 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.
p{
line-height: 150%; // line-height: 15px;
}
93
CƠ BẢN VỀ CSS
- Canh lề cho một đoạn văn bản chúng ta sẽ dùng
thuộc tính text-align: vị trí;
p{
text-align: left; /* left | center | right */
}
94
47
05/10/2021
CƠ BẢN VỀ CSS
- 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 */
}
95
CƠ BẢN VỀ CSS
h2 {
text-decoration: line-through; /* Gạch ngang */
}
h1 {
text-decoration: overline; /* kẻ trên */
}
96
48
05/10/2021
CƠ BẢN VỀ CSS
- 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: -2000px; /* text-indent: 30px; */
}
97
CƠ BẢN VỀ CSS
- Điều kiển các ký tự trong một đoạn văn bản.
p.uppercase {
text-tranform: uppercase;
}
p.lowercase {
text-tranform: lowercase;
}
p.capitalize {
text-tranform: capitalize;
}
98
49
05/10/2021
CƠ BẢN VỀ CSS
6. Các thuộc tính của font
- Để đặt một loại font chữ nào đó cho đoạn văn bản
thì chúng ta sẽ sử dụng thuộc tính font-family:
p{
font-family: Arial, Tahoma, Verdana, sans-serif;
}
99
CƠ BẢN VỀ CSS
- Khi chúng ta muốn những đoạn văn bản hoặc tiêu đề
có kích thước của 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;
}
100
50
05/10/2021
CƠ BẢN VỀ CSS
- Chữ đậm, chữ nghiêng, ... được đặt với thuộc tính
font-style:
p{
font-style: italic; /* normal | italic | oblique */
}
101
CƠ BẢN VỀ JAVASCRIPT
1. Đặt tính
Javascript là một ngôn ngữ thông dịch
(interpreter), chương trình nguồn của nó được nhúng
(embedded) hoặc tích hợp (integated) vào tập tin
HTML chuẩn. Khi file được load trong Browser (có
support cho JavaScript), Browser sẽ thông dịch các
Script và thực hiện các công việc xác định. Chương
trình nguồn JavaScript được thông dịch trong trang
HTML sau khi toàn bộ trang được load nhưng trước
khi trang được hiển thị.
102
51
05/10/2021
Một trong những đặc tính quan trọng của ngôn
ngữ JavaScript là khả năng tạo và sử dụng các đối
tượng (Object). Các Object này cho phép người lập
trình sử dụng để phát triển ứng dụng.
103
2. Nhúng javascript vào HTML
<HTML>
<HEAD> <TITLE>Listing 2.1</TITLE> </HEAD>
<BODY>
Here is result:
<SCRIPT LANGUAGE="Javascript">
<!—
document.writeln("It work<BR>");
-->
</SCRIPT>
</BODY>
</HTML>
104
52
05/10/2021
3. Sử dung JS
3.1 Cú pháp cơ bản
JavaScript xây dựng các hàm, các phát biểu,
các toán tử và các biểu thức trên cùng một dòng và
kết thúc bằng ‘;’
Ví dụ:
document.writeln("It work<BR>");
105
3.2 Các khối lệnh
Nhiều dòng lệnh có thể được liên kết với nhau
và được bao bởi { }
Ví dụ:
{
document.writeln("Does It work");
document.writeln("It work!");
}
106
53
05/10/2021
3.4 Xuất dữ liệu ra cửa sổ trình duyệt
Dùng 2 phương pháp:
document.write() và document.writeln()
Ví dụ:
document.write(“Test”);
document.writeln(“Test”);
107
3.5 Xuất tag HRML ra trình duyệt
document.write(‘<IMG SRC="welcome.gif">’);
108
54
05/10/2021
3.6 Làm việc với các dialog boxes
Sử dụng hàm alert() để hiển thị thông báo
trong một hộp.
Ví dụ:
alert("Welcome to Netscape Navigator 21");
109
3.7 Các kiểu dữ liệu
Kiểu số
Kiểu chuỗi
Kiểu Boolean
Kiểu null
Kiểu văn bản (giống chuỗi)
=> Nối chuỗi sử dụng dấu “+”
110
55
05/10/2021
3.8 Tương tác với người sử dụng
Sử dụng phương pháp promt() để tương tác với
người sử dụng.
Ví dụ:
<SCRIPT LANGUAGE="Javascript">
<!- -
document.write("Your favorite color is:");
document.writeln(prompt("enter your favorite color:", Blue"));
- ->
</SCRIPT>
111
3.9 Làm việc với biểu thức
Cú pháp:
<biến> <toán tử > <biểu thức>
Ví dụ: answer=100
112
56
05/10/2021
3.9 Toán tử
= Thiết lập giá trị bên phải cho bên trái
++ Tăng trị hiện hành của biến thêm 1
-- Giảm trị hiện hành của biến bới 1
+= Cộng trái và phải, sau đó gán kết quả cho bên
trái phép toán
-= Trừ bên trái cho bên phải, gán kết quả lại cho bên
trái
113
*= Nhân bên trái cho bên phải, gán kết quả cho bên
trái
/= Chia bên trái cho phải , gán kết quả lại cho bên
trái
%= Chia bên trái cho bên phải và lấy số dư gán lại
cho bên trái
114
57
05/10/2021
- Phép toán Logic: && || !
- Toán tử so sánh trong JavaScript:
== != < <= > >=
- Toán tử điều kiện:
(điều kiện ) ? giá trị 1: giá trị 2
Nếu điều kiện đúng thì trả về giá trị 1 Nếu điều
kiện sai thì trả về giá trị 2.
Ví dụ: (day==“Saturday”) ? “Weekend”: “Not
Saturday”
115
- Phép toán Logic: && || !
- Toán tử so sánh trong JavaScript:
== != < <= > >=
- Toán tử điều kiện:
(điều kiện ) ? giá trị 1: giá trị 2
Nếu điều kiện đúng thì trả về giá trị 1 Nếu điều
kiện sai thì trả về giá trị 2.
Ví dụ: (day==“Saturday”) ? “Weekend”: “Not
Saturday”
116
58
05/10/2021
3.10 Cấu trúc điều kiện if – else
if (điều_kiện)
{
Lệnh
}
else
{
Lệnh
}
117
Ví dụ:
if (day==“Saturday”)
{
document.writeln(“It‘s the weekend”);
}
else
{
document.writeln(“It’s not the weekend”);
}
118
59
05/10/2021
3.11 Cấu trúc vòng lặp For
Cú pháp:
for ( init value ; condition ; update expression )
Ví dụ:
for (i = 0 ; i < 5 ; i++)
{
lệnh ;
}
119
3.12 Cấu trúc vòng lặp For
Cú pháp:
for ( init value ; condition ; update expression )
Ví dụ:
for (i = 0 ; i < 5 ; i++)
{
lệnh ;
}
120
60
05/10/2021
HOẠCH ĐỊNH VÀ THIẾT KẾ WEB
1. Hoạch định
1.1 Mục tiêu & Tính năng
Vai trò của website là gì (thông tin, bán hàng,
tuyển dụng, CSKH…)? Người dùng có thể thao tác gì
trên trang (đọc tin, đăng ký, đặt hàng, thanh toán)?
Các tính năng tối thiểu cần có là gì (thành viên, viết
bài, giỏ hàng).
121
1.2 Ai là người sử dụng
Ai sẽ là những người sử dụng website (Khách
hàng, Đối tác, Cổ đông, Ứng viên tìm việc), họ chiếm
tỷ lệ bao nhiêu? Họ có hành vi, sở thích, nhân khẩu
học như thế nào? Họ tìm kiếm và cần những gì khi
truy cập website?
Việc hiểu rõ người dùng giúp bạn có thể điều
chỉnh thiết kế, giao diện người dùng... phù hợp và tối
ưu với đối tượng chính, nhưng cũng đảm bảo dễ sử
dụng đối với các nhóm đối tượng còn lại.
122
61
05/10/2021
1.3 Tiến trình người dùng
Hay còn gọi là User Flow. Nếu website của bạn
là một thành phố thì User Flow là những con đường
trong thành phố đó. Để người dùng đến được một
trang họ cần, họ phải đi qua những trang nào?
Khi thực hiện một hành động trên website, hãy
xác định số bước mà người dùng phải làm, bước nào
chính yếu, bước nào có thể giản lược? Ví dụ, để mua
hàng, KH cần đọc thông tin sản phẩm, chọn Mua
hàng, vào Giỏ hàng, Xác nhận Đơn hàng, Thanh toán.
123
1.4 Bản đồ trang
Có thể hiểu Bản đồ trang trông giống như một
Gia phả bao gồm các trang mẹ, trang con, cô dì chú
bác của trang... Bản đồ trang giúp cho cả người dùng
và Công cụ Tìm kiếm dễ dàng truy xuất và định
hướng trên trang.
Bản đồ trang thường là một danh sách tất cả
trang (các link), sắp xếp theo thứ bậc, chủ đề, chuyên
mục… Bạn cũng có thể tự vẽ bản đồ trang bằng các
phần mềm đơn giản như MS Office, Mindmap
124
62
05/10/2021
2. Thiết kế web
Sau khi sơ đồ trang web được thiết lập, đã đến
lúc bắt đầu giai đoạn quan trọng nhất trong qui trình
thiết kế web: Sáng tạo và xây dựng nội dung website.
Sử dụng các công cụ để xây dựng nội dung bao
gồm thiết kế web thủ công (Code tay), Sử dụng
FrameWork có sẵn (Laravel, Wordpress,…) hoặc các
phần mềm khác.
Bên cạnh đó phải tối ưu hóa với công cụ tiềm
kiếm (SEO).
125
Sau khi thiết kế xong, phải thực hiện cài đặt và
kiểm thử.
Khi mọi thứ đã được kiểm tra kỹ lưỡng, bạn hài
lòng với cả về nội dung và hình thức, đã đến lúc cho
ra mắt trang web. Đừng quá hi vọng là trang web của
bạn sẽ vận hành một cách hoàn hảo, tất nhiên vẫn sẽ
có những lỗi nhỏ cần phải sửa chữa. Thiết kế web là
một quá trình liên tục, đòi hỏi ta phải luôn thường
xuyên bảo trì nó.
126
63
05/10/2021
127
64

xuất bản trang diện tử

Uploaded by

Copyright:

Available Formats

You might also like

xuất bản trang diện tử

Uploaded by

Document Information

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

xuất bản trang diện tử

Uploaded by

Copyright:

Available Formats

05/10/2021

KHÁI NIỆM VÀ THUẬT NGỮ

KHÁI NIỆM VÀ THUẬT NGỮ

KHÁI NIỆM VÀ THUẬT NGỮ

KHÁI NIỆM VÀ THUẬT NGỮ

KHÁI NIỆM VÀ THUẬT NGỮ

KHÁI NIỆM VÀ THUẬT NGỮ

KHÁI NIỆM VÀ THUẬT NGỮ

TLD - Top level domain

KHÁI NIỆM VÀ THUẬT NGỮ

KHÁI NIỆM VÀ THUẬT NGỮ

KHÁI NIỆM VÀ THUẬT NGỮ

KHÁI NIỆM VÀ THUẬT NGỮ

KHÁI NIỆM VÀ THUẬT NGỮ

KHÁI NIỆM VÀ THUẬT NGỮ

KHÁI NIỆM VÀ THUẬT NGỮ

KHÁI NIỆM VÀ THUẬT NGỮ

KHÁI NIỆM VÀ THUẬT NGỮ

XUẤT BẢN WEBSITE

1. Xây dựng website

XUẤT BẢN WEBSITE

2. Xuất bản trên Internet

Bảng ở ví dụ trên trông rất đơn giản và vuông vức -

Trong đó “a” là anchor, còn “href” là hypertext

- Liên kết đến URL: <a href="URL">Text to Activate

Lưu ý: Chung group thì name giống nhau

selector {property: value}

You might also like