Trình bày những kiến thức cơ bản nhất về scilab,latex và web (gồm (X)HTML, CSS và javasccipt)

TRƯỜNG ĐẠI HỌC BÁCH KHOA HÀ NỘI
VIỆN CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
——————– * ———————

BÁO CÁO

MÔN HỌC
NHẬP MÔN CÔNG NGHỆ THÔNG TIN

Nhóm sinh viên thực hiện : 1. Nguyễn Anh Quân

20122276
2. Nguyễn Mạnh Tuấn
20122695
3. Đào Đức Tùng
20122731
Lớp :

CNTT 1.01 – K57

Giáo viên hướng dẫn : PGS. TS.

Lê Thanh Hương

HÀ NỘI
Ngày 11 tháng 12 năm 2013


Lời cảm ơn
Chúng em xin chân thành cảm ơn cô Lê Thanh Hương và các thầy dạy thực hành
đã tận tình truyền đạt kiến thức cho chúng em trong những giờ lên lớp lý thuyết cũng

như thực hành. Qua đó, chúng em đã nắm được những kiến thức cơ bản nhất trong
ngành Công nghệ thông tin nói chung và bộ môn Nhập môn Công nghệ thông tin nói
riêng.

Mục đích của báo cáo
Chúng em là những sinh viên mới trong ngành Công nghệ thông tin. Đây là một
ngành khoa học có tốc độ phát triển rất nhanh do đó chúng em cần có một nền tảng
kiến thức vững chắc, những đường hướng tư duy hợp lý mới có thể đáp ứng kịp những
bước tiến của ngành.
Dưới sự hướng dẫn nhiệt tình của các thầy cô chúng em đã học tập và nghiên cứu
những kiến thức cơ bản nhất trong ngành Công nghệ thông tin; trong đó phải kể đến
ba công cụ Scilab, Latex, Web. Đây là những công cụ hữu hiệu giúp sinh viên Công
nghệ thông tin chúng em có thể dễ dàng tiếp cận cũng như giải quyết các vấn đề trong
quá trình học tập và làm việc sau này.
Nhận thấy tầm quan trọng của ba công cụ Scilab, Latex, Web chúng em đã tập hợp
mọi lý thuyết thu thập trong những giờ lên lớp của các thầy cô, đồng thời dày công
tìm hiểu và nghiên cứu sâu hơn để viết vào bản báo cáo này, coi như đây là một giáo
trình bổ ích cho chúng em nói riêng hay các sinh viên Công nghệ thông tin nói chung,
và cũng là để lưu trữ những gì chúng em đã học được, tránh tình trạng mai một kiến
thức.

2


Tóm tắt nội dung
Trong bản báo cáo này, chúng em trình bày những kiến thức cơ bản nhất về Scilab,
LaTex và Web (gồm (X)HTML, CSS và JavaSccipt). Đây là những vấn đề đơn giản
nhưng hết sức quan trọng để chúng em có thể tiếp tục học tập và nghiên cứu về Công
nghệ Thông tin.
Về Scilab:

• Cách cài đặt và chạy Scilab
• Các kiểu dữ liệu và toán tử cơ bản của Scilab
• Xử lý ma trận trong Scilab
• Cách vẽ đồ thị trong Scilab
Về LaTeX:
• Cách cài đặt và chạy một số engine (MiKTeX, Texlive) và front-end
(như Texmaker, TeXnic Center) trên Windows cũng như Linux
• Cấu trúc một tập tin mã nguồn
• Một số lệnh đơn giản
Về Web:
• Các khái niệm cơ bản về WWW
• Khái niệm cơ bản về (X)HTML, CSS, JavaScript
• Một vài vấn đề trong thiết kế Web
Cụ thể:
• Scilab: Đây là một công cụ miễn phí, mạnh để giúp giải một số bài
toán và vật lý.
• LaTeX: Đây là công cụ để chúng em viết các bản báo cáo khi học
tập, nghiên cứu các vấn cề chuyên môn.
• Web: Đây là những kiến thức cơ bản nhất để chúng em có thể tự
thiết kế một trang web cá nhân cũng như cho tập thể.

3


Chương 1: Scilab
1.1 Giới thiệu chung
• Scilab là ngôn ngữ lập trình kết hợp với các phần toán số học trên
nhiều lĩnh vực khoa học.
• SciLab thuộc loại ngôn ngữ thông dịch.
• Khả năng xử lý với Scilab:

• Số học tuyến tính, ma trận thưa.
• Các hàm ma thức và các hàm hữu tỷ
• Xử lý đồ thị 2D, 3D
• Giải các phương trình vi phân, phương trình đại số
• Download và cài đặt: />Cài đặt như các phần mềm thông thường. Để cài đặt đầy đủ các module, máy tính
cần nối mạng.

1.2 Phương thức tương tác với Scilab
• Console (Hình 1.1), Editor (Hình 1.2), kèm khả năng Docking (Hình
1.3)
• Sử dụng hàm exec
• Xử lý theo lô

4


Hình 1.1: Console

Hình 1.2: Editor 3

Hình 1.3: Docking
• Editor
Dễ dàng soạn thảo các file chứa tập các đoạn code của Scilab.
Cách gọi ra editor: vào Application/Editor hoặc vào editor() từ
console.
5


– Một số tính năng
Load into Scilab: Chạy bộ đoạn code trong file đang soạn thảo.

Evaluate selectioh: Chạy toàn bộ code được bôi đen.
Execute file into scilab: Chạy một file như khi gọi hàm exec.
Khác với Load into Scilab: chỉ cho ra output trên màn hình khi
có lệnh dislay().
– Editor-Docking: Giúp làm việc đồng thời với editor và console.
• Sử dụng hàm exec:
File .sci và .sce để dễ quản lý code
– File .sci: chứa một hay nhiều hàm tự viết. Các hàm này sau đó
sẽ đươc load vào môi trường Scilab khi gọi getf
– File .sce chứa cả các hàm tự viết và mã lệnh thực thi của
Scilab

1.3 Sử dụng help trong Scilab
Nếu biết tên lệnh nhưng quên hoặc chưa biết cú pháp có thể dùng lệnh
help <name> với <name> là tên lệnh cần tra. Ví dụ:
help sin // cho biết cú pháp của hàm sin
help + // help của toán tử
Nếu không biết rõ tên lệnh, có thể dùng lệnh apropos để tìm thông tin
liên quan với từ khóa.Ví dụ:
apropos logarithm // Cho kết quả là các hàm liên quan đến logarithm

1.4 Các loại biến trong Scilab
Trong Scilab, các loại biến đều được coi là ma trận (trừ một số loại
như lists và một số cấu trúc dữ liệu đặc biệt). Bao gồm: biến thực,
biến boolean, biến phức, biến xâu, ma trận (bao gồm cả vector). Với mỗi
kiểu biến có một số toán tử tương ứng.
Tên biến: Độ dài tùy ý nhưng chỉ xét 24 ký tự đầu tiên. Mã ASCII:a-z, A-Z,
0-9,%_#!?$. Có phân biệt chữ hoa, chữ thường.
Một số hàm toán học cơ bản: sin(x), asin(x), coo(x), acos(x), tan(x), atan(x),
cotg(x), acst(x),...

1.5 Ma trận, vector
1.5.1 Khởi tạo ma trận
Các ký hiệu dùng để khai báo ma trận:
• Ngoặc vuông “[” và “]” để đánh dấu vị trí bắt đầu và kết thúc của
ma trận.
6


• Dấu phẩy “,” để phân chia các giá trị giữa các cột.
• Dấu chấm phẩy để phân chia các hàng.
Ngoài ma có một số hàm như ones, eye, zeros, rand để khởi tạo một số dạng ma trận
đặc biệt.
Ma trận rỗng:
A = [ ]
tạo ra ma trận A là ma trận rỗng.

1.5.2 Truy cập phần tử của ma trận
Với ma trận A cho trước:
• Để truy cập một phần tử:
A[i, j]
Trong đó i,j là chỉ số hàng và cột (tính từ 1)
• Để truy cập nhiều phần tử:
A[x1 :x2 ; y1 :y2 ]
Trong đó x1 , x2 thứ tự là chỉ số đầu và cuối của các hàng lấy giá
trị, y1 ,y2 thứ tự là chỉ số đầu và cuối của cột lấy giá trị. Có thể
dùng toán tử $ để chỉ hàng hoặc cột cuối cùng.

1.5.3 Các phép toán ma trận
Có các phép toán +,-,*, /, tính định thức (det), trị riêng (spec) là

các phép toán áp dụng được với cả ma trận
Ngoài ra còn các phép toán như .* , ./ để áp dụng trên từng phần tử của
hai ma trận.
Ví dụ:





1 2 3
1 2 3
A =  4 5 6 ;B =  4 5 6 
7 8 9
7 8 9
Khi đó:



30 36 42
A ∗ B =  66 81 96 
102 126 150

1.5.4 Xây dựng và tính toán đa thức
Xây dựng đa thức Ví dụ xây dựng đa thức: X2 - 3 * X - 4
Nếu v là vector chứa các hệ số từ thấp đến cao
v = [-4 -3 1] p = poly (v, ‘x’, ‘coeff’)
Cách khác Khởi tạo một đa thức là “x” và áp dụng các phép toán để xây dựng đa
thức phức tạp hơn
7

x = poly(0,‘x’) p = x~2-3*x-4
Xây dựng đa thức với nghiệm cho trước Sử dụng hàm poly nhưng tham số
cuối là “roots”. Ví dụ: Xây dựng đa thức có hai nghiệm là 1 và 2:
z= [12];
p = poly(z,‘x’,‘roots’)
Khi đó có: p = 2- 3*x + x~2
Như vậy hai giá trị tham số cuối cùng của hàm poly (“coeff” và “roots”
có tác dụng ngược nhau).
Tính toán với đa thức Một số hàm như roots() để tìm nghiệm, horner()
để tính giá trị của đa thức với giá trị x nào đó, derivat() để tính đạo
hàm. Ví dụ: với đa thức p = x2 -3*x-4
z = roots(p);
Khi đó: z == [-1 4]’; horner(p,z) == [0 0]’; derivat(x) == -3 + 2*p;

1.5.5 Xây dựng và giải hệ phương trình
Với hệ phương trình có dạng A*x = b với A, b là hai ma trận chứa các hệ
số, có thể giải bằng cách lấy x = A / b
Ví dụ: Để giải hệ phương trình:


(1)
x + 3y + 2y = 1
2x + y + 3z = 0
(2)


3x + 2y + z = −1 (3)
Có thể xây dựng hai ma trận A


1

2
A=
3

và b:



3 2
1
1 3 ;B =  0 
2 1
−1

Sau đó dùng phép toán A / b. Cụ thể:
A = [1 3 2; 2 1 4; 3 2 1]; b = [1; 0; -1];
Khi đó, x == [ -0.5 -1 1]’

x

=

A

/

b;

1.6 Đồ thị
Đồ thị cho dưới dạng điểm: với x, y lần lượt là 2 vector chứa hoành độ
và tung độ của các điểm trên đồ thị, có thể vẽ đồ thị bằng hàm:
plot2d(x,y, style = -1) tham số style là kiểu đồ thị được vẽ. Ví dụ:
hình 1.4

8


Hình 1.4: Đồ thị cho dưới dạng tập hợp điểm
Đồ thị cho dưới dạng hàm: Với x là vector chứa các giá trị của biến. Sử
dụng deff() và fplot2d() Ví dụ: deff("[y]=f(x)","y=x 2"); x = -4:0.1:4;
fplot2d(x,f) (1.5).
Đồ thị trong không gian 3 chiều: Có thể vẽ đồ thị của hàm 2 biến trong
không gian 3 chiều, tương tự trường hợp trên, dùng hàm “plot3d” và
“fplot3d”.

Hình 1.5: Đồ thị cho dưới dạng hàm
9


Chương 2: LaTeX
2.1 LaTeX là gì?
LaTeX là một hệ thống sắp chữ, một ngôn ngữ biểu diễn văn bản dẫn xuất
từ TeX.
Phiên bản mới nhất:LaTeX2e
Tác giả: Lesile Lamport.
Ưu, nhược điểm
Ưu điểm:
• Soạn thảo văn bản lớn không ảnh hướng đến tốc độ gõ. Với Word hoặc

OpenOffice, cả tài liệu sẽ bị định dạng lại khi ta gõ.
• Tài liệu LTeX thường có vẻ chuyên nghiệp hơn các tài liệu khác.
• Gõ công thức tiện lợi.
• Miễn phí (trừ một số front-end)
• Kích thước mã nguồn khiêm tốn
Nhược điểm:
• Không nhìn thấy văn bản khi đang gõ (phải LsTeX mã nguồn mới
thấy))
• Phải nhớ tên lệnh (hoặc phải có tài liệu))
• Hơi khó khăn khi bắt đầu

2.2 Cơ bản về LaTeX
2.2.1 Các tập tin nhập liệu
Dữ liệu đưa vào LaTeX là văn bản thông thường được lưu dưới dạng kí tự. Tập tin
này sẽ chứa phần văn bản cũng như các lệnh định dạng của LaTeX.

2.2.2 Khoảng trắng
Các kí tự khoảng trắng hay tab được xem như nhau và được gọi là kí tự “khoảng
trắng”. Nhiều kí tự khoảng trắng liên tiếp chỉ được coi là một khoảng trắng. Các
khoảng trắng ở vị trí đầu một hàng thì được bỏ qua. Ngoài ra kí tự xuống hàng đơn
được xem là một khảng trắng. Một hàng trắng giữa hai hàng văn bản sẽ xác định
việc kết thúc một đoạn văn. Nhiều hàng trắng được xem là một hàng trắng.

2.2.3 Một số kí tự đặc biệt
Những kí tự sau là các kí tự dành riêng. Nó có thể là kí tự có ý nghĩa đặc biệt trong
LaTeX hay nó không thuộc vào bất kì một font chữ nào. Khi bạn nhập chúng một
10


cách trực tiếp thì thông thường chúng không được in ra và đôi khi báo lỗi. Các kí tự

đặc biệt đó là:#$%"&_{}’\. Để sử dụng các kí hiệu trên, cần thêm vào một dấu gạch
chéo phía trước (\), với kí tự gạch chéo thì dùng: \textblackslash.

2.2.4 Lệnh trong LaTeX
Các lệnh của LaTeX phân biệt chữ hoa, chữ thường. Cấu trúc lệnh:
\tên lệnh{tham số bắt buộc}[tham số tùy chọn]

2.2.5 Chú thích trong LaTeX
Với chú thích ngắn: dùng kí tự % : khi mà latex gặp một kí tự % thì nó sẽ bỏ qua
phần còn lại của hàng đang được xử lý. Ngoài ra, các kí tự xuống hàng và hàng trắng
ở đầu hàng tiếp theo sẽ được bỏ qua. Có thể sử dụng kí tự này để ghi chú vào tập tin
soạn thảo. Ngoài ra kí tự % còn có thể sử dụng để chia các hàng dữ liệu nhập vào
quá dài khi mà các kí tự khoảng trắng hay xuống hàng không được phếp xuất hiện.
Với chú thích dài: dùng môi trường comment của gói verbatim.

2.2.6 Một số engine và front-end dùng đẻ soạn thảo
Engine
• Windows: MiKTeX. Link: />• Linux: TeX Live.
Front-end
• Texmaker (httt://wmw.xm1math.net/texmaker/) Chạy được trên
Windows, Linux và MacOS. (Hình 2.1)
• TexnicCenter ( />
11


2.3 Cấu trúc tổng quát của một tập tin mã nguồn
2.3.1 Lệnh documentclass
Dùng để khai báo loại tài liệu. Tham số “class” để khai báo loại tài liệu, bao gồm:
article, proc, minimal, report, book, slides, letter. Các tham số tùy chọn để tùy chỉnh
một số định dạng của loại tài liệu như kích thước trang giấy, kích thước font mặc

định, ...

2.3.2 Khai báo package
Sử dụng lệnh \usepackage[...]{tên package} Trong đó hàm số tùy chọn để
đặt Các thông số cho package sử dụng. Ví dụ:
\usepackage[utf8]{vietnam}
dùng để sử dụng gói vntex gể dùng tiếng Việt.
\usepackage[unicode]{hyperref }
dùng để tạo tham chiếu cho mục lục, tham số “unicode” để tạo bookmark hỗ trợ tiếng
Việt.

2.4 Một số lệnh để tạo chương, mục
Các lệnh để tạo chương mục từ lớn đến nhỏ (với article class)
\section{. . .}
\subsection{. . .}
\subsubsection{. . .}
\paragraph{. . .}
\subparagraph{. . .}
Nếu muốn chia tài liệu thành các phần mà không ảnh hưởng đến việc đánh
số chương, mục thì có thể dùng lệnh
\part{. . .}
Với report hoặc book, có thể thêm lệnh:
\chapter{. . .}

2.5 Soạn thảo văn bản
2.5.1 Font
Kiểu font
Có thể dùng lệnh thay đổi font hoặc lệnh khai báo font, lệnh thay đổi font thay đổi
font chỉ ảnh hưởng với nội dung là tham số của lệnh còn lệnh khai báo font ảnh
hưởng tới tài liệu từ vị trí lệnh về sau (hoặc trong khối { ... } chứa lệnh). Một số lệnh

hay dùng:

12


Lệnh thay đổi
font

Lệnh khai báo
font

\textrm{ ... }
\texttt{ ...}
\textsf{ ... }
\textit{ ... }
\textbf{ ... }

\rmfamily
\tmfatily
\sffamily
\itshape
\bfshape

Tác dụng
font roman
font
teletype
font sans
serif in
nghiêng in

đậm

kích thước font
Môi
Khai báo
trường
tiny
\tiny
\scriptsize scriptsize
\footsotenize footnotesize
small
\small
\norialsmze normalsize
large
\large
Large
\Large
LARGE
\large
huge
\huge
Huge
\Huge

2.5.2 Môi trường
Cấu trúc
\begin{tên môi trường} nội dung \end{tên môi trường}
Môi trường tạo danh sách, miêu tả
Để tạo danh sách không đánh thứ tự: dùng môi trường itemsize , để tạo danh sách có
đánh thứ tự: dùng môi trường enumerate , để tạo môi trường dùng để miêu tả: dùng

môi trường description.
Môi trường dùng để căn lề
• Căn lề trái: dùng môi trường flushleft
• Căn lề phải: dùng môi trường flushright
• Căn giữa: dùng môi trường center
Môi trường trích dẫn
Môi trường “quote” sử dụng với trích dẫn, những câu quan trọng và ví dụ.
Môi trường “quotation” sử dụng với trích dẫn dài, có nhiều đoạn văn, dòng đầu tiên
mỗi đoạn sẽ được indent.
Môi trường “verse” sử dụng để trích dẫn thơ.
Môi trường tạo bảng biểu
Dùng môi trường tabular Cấu trúc:
\begin{tabular}[pos]{table spec}
13


% nội dung \end{tabular}
Tham số “pos” để chỉ ra vị trí của bảng so với chữ ở xung quanh.
Trong bảng: hai cột liên tiếp ngăn cách bằng dấu & , hai hàng liên tiếp
ngăn cách bằng dấu \\. Để tạo đường kẻ giữa 2 dòng dùng \hline

2.6 Soạn thảo công thức toán học
Nếu công thức ngắn, viết ngay trong văn bản thì có thể dùng: $ công
thức $. Với công thức dài hơn, dùng môi trường equation hoặc equation*
nếu không muốn đánh số.

2.6.1 Một số ký hiệu
\lambda, \xi, \pi, \theta, \mu, \Phi, \omega, \Delta

2.6.2 Mũ, chỉ số dưới, căn thức, phân thức

Ký

hiệu

Ví dụ

ˆ {
... }
xˆ 2
x_1
_{
... }
\sqrt[.. .]{...} \sqtr[3]{2}
\frac{ ...}{...} \frac{5}{2}

Kết
quả
x2
x1
√
3
2
5
2

2.6.3 Khoảng cách trong chế độ toán học
Để tạo khoảng cách giữa hai công thức liên tiếp có thể dùng lệnh \quad hoặc \qquad
để tạo khoảng cách lớn hơn. Ví dụ:
\begin{equation*}
\int _ 1ˆ 2 \ln x \mathrn{d}x

\qquad
\int_ 1ˆ 2 \ln x \,\mathrm{d}x
\end{equation*}

Kết quả:

2
1

dxlnx

2
1

dxlnx

2.6.4 Công thức nhiều dòng
Dùng môi trường eqnarray. Môi trường này tạo ra 3 cột, cột đầu canh lề trái, cột thứ
hai canh lề giữa, cột thứ ba canh lề phải. Các dòng được đánh số mặc định, tuy nhiên
có thể bỏ số bằng lệnh \nonumber trên dòng tương ứng, hoặc trên tất cả các dòng
bằng cách dùng môi trường eqnarray*. Các cột tách biệt nhau bằng & , các dòng
phân tách bằng \\.Ví dụ:
\begin{eqnarray*} f & = & x ˆ
2 + x\\f’ & = & 2x + 1 \end{eqnarray*}
Kết quả:
f = x2 + x
f’ = 2x +1

2.7 Tham chiếu trong văn bản
Dòng lệnh \label{marker} để tạo tham chiếu, lệnh \ref{mabker} để tham

14


chiếu đến vị trí đã đánh dấu hoặc \pageref{marker} để tham chiếu đến
trang có label đó.

2.8 Chèn hình vào văn bản
Phải thêm gói graphics: \usepackage{ graphics }
Để chèn hình dùng lệnh \includegraphics{tên file}
Ví dụ để chèn hình ở trong file vidu.jpg: \includegraphics{vidu.jpg}
Một số tham số hay dùng
width, height: Xác định chiều rộng và chiều dài của ảnh.
scale: Xác định tỉ lệ ảnh so với ảnh gốc
angle: Xác định góc quay của ảnh (ngược chiều kim đồng hồ)

2.8.2 Tạo tiêu đề cho ảnh
Dùng thêm môi trường figure và lệnh caption. Ví dụ:
\begin{figure}
\includegraphics{vidu.jpg}
\caption{Vi du tieu de anh}
\end{figure}

15


Chương 3
HTML - XHTML, CSS, JavaScript
3.1 Một số khái niệm cơ bản về WWW
3.1.1 Khái niệm về siêu văn bản

Hypertext là văn bản (text) trên máy tính có sự liên kết đến một văn bản khác và có
thể truy cập trực tiếp thông qua click chuột, nhấn phím.
Hyperlink là một liên kết từ một file hypertext đến một file khác.
Hypermedia là sự mở rộng của hypertext, trong đó đối tượng có thể là văn bản, đồ
họa, âm thanh, video...

3.1.2 Các thành phần của Web
• Web là hệ thống các tài liệu hypertext liên kết với nhau thông qua
mạng Internet.
• Các thành phần của Web
– WebPage: là mọt trang Web.
– Website: Là tập hợp các WebPage có nọi dung thống nhất.
– Uniform Resource Locator: dùng để định vị tài nguyên trên
Internet theo cách thuận tiện cho người sử dụng (thay cho địa
chỉ IP không mang ý nghĩa và khó nhớ)
Cấu trúc: giao thức://địa chỉ máy:con đưòng đẫn đến tài nguyên
– Web Server: cung cấp tài nguyên cho máy khác.
– Web Browser: dùng để khai thác dịch vụ Web.

3.2 Một số công cụ thường dùng để tạo trang
(X)HTML, CSS, JavaScript
1. Dreamweaver: Là công cụ có phí, mạnh, dễ sử dụng. (Hình 3.1)
2. Notepad++: Là công cụ miễn phí, nguồn mở tuy nhiên không mạnh
bằng, chỉ có tính năng highlight và auto-completion tuy nhiên khá
hạn chế. Link: (Hình3.2)

16


Hình 3.1: Adobe Dreamweaver CS4

Hình 3.2: Notepad++

3.3 HTML - XHTML
3.3.1 HTML, XHTML là gì?
Định nghĩa
HTML (HyperText Markup Language) là ngôn ngữ đánh dấu dùng để miêu tả một
trang Web.
XHTML (extensible HyperText Markup Language) có chức năng tương tự HTML
nhưng tuân theo XML (Extensible Markup Language) và được định nghĩa chặt chẽ
hơn HTML. XHTML có thể được các parser XML xử lý, do đó dễ xử lý bằng các
ngôn ngữ, nền tảng khác hơn HTML (tận dụng được các thư viện có sẵn).
HTML và XHTML đều được tạo thành từ các tags (gồm tag mở và tag đóng) để định
nghĩa cách hiển thị các thành phần của trang web.
17


Các phiên bản
Phiên bản chính thức mới nhất của HTML là HTML 4.01, HTML 5 đang là dự thảo
với nhiều tính năng mới. Phiên bản đầu tiên của HTML được Tim Berner Lee phát
minh và được W3C đưa thành chuẩn vào năm 1994, phiên bản mới nhất là 4.01 hiện
tại được hoàn thành vào 24-12-1999 Phiên bản chính thức mới nhất của XHTML là
XHTML 1.1, ra đời vào tháng 5 năm 2001.

3.3.2 Cú pháp của các tags (thẻ) trong (X)HTML
Bao gồm 1 thẻ mở và 1 thẻ đóng, nội dung nằm ở giữa 2 thẻ, các thẻ có thể lồng
nhau nhưng các thẻ phải được mở và đóng đúng thứ tự (mở trước thì phải đóng sau).
Ớ thẻ mở có thể có các thuộc tính (attributes).
Ví dụ:
<div class="ex"><b><i>Chữ này vừa được in đậm vừa được in nghiêng và

có thế chứa các lệnh định dạng của class “ex"</i></b></div>
Với XHTML thì tên các thẻ bắt buộc viết thường, với HTML thì không phân biệt
chữ thường chữ hoa. Tuy nhiên các trình duyệt thường không thông báo lỗi cú pháp
nhưng sẽ dẫn đến kết quả hiển thị không đúng mong muốn và khi validate (3.3.5) sẽ
báo lỗi.

3.3.3 Chú thích
Cách chú thích trong (X)HTML:
<!- Nội dung chú thích .... ->

3.3.4 Cấu trúc một trang HTML - XHTML
Cấu trúc tổng quát
>
<html>
<head>
<title>
</title>
</head>
<body>
</body>
</html>
DOCTYPE dùng để chỉ ra phiên bản (X)HTML sử dụng trong trang
• HTML
+ " />+ "Nttp://www.w3.org/TR/html4/loose.dtdM >
+ " />• XHTML 1.0
+

" />18


+ " />+ "tttp://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Phần head dùng để chứề 1 số thẻ như <title> Chứa tiêu đề của trang web.
<link> Chứa link đến một số file như style sheet (CSS) hoặc JavaScript.
<style> Đưa một số mã CSS vào trang web.
<script> Đưa một số đoạn script vào trang web.
<meta> Thêm một số thông tin như keyword, description để miêu tả trang
web (phục vụ các search engine)
Một số thẻ khác như <base>, <object>
Phần body: Dùng để chứa nội dung chính của trang web.

3.3.5 Validate một trang web
Là công việc để kiểm tra xem trang web đó có tuân thủ đầy đủ theo các
chuẩn của W3C không, mục đích để đảm bảo tối đa việc hiển thị đúng trên
các trình duyệt.
Có thể validate bằng cách vào trang hoặc dùng 1
số addons của Các trình duyệt như Html Validahor (Firefox, Chrome).

3.3.6 Một số thẻ hay dùng
Các thẻ nhối (block-level) thường dùng
Là các thẻ hiển thị trên màn hình dưới dạng một đoạn riêng. Ví dụ:

,

,

, ...
•

định nghĩa một đoạn (paragraph) trong trang web (ở trước và
sau thẻ <div> tự động xuống dòng).
•

đến

dùng để định nghĩa các tiêu đề (

là lớn nhất,

là nhỏ nhất)

• <div> nhóm các tags để tạo một mục hoặc tiểu mục có cùng cách
hiển thị (kết hợp CSS, nếu không kết hợp với CSS thì không ảnh
hưởng đến cách hiển thị của trang web)
Các thẻ inline thường dùng
Là các thẻ không tạo ra một đoạn mới. Ví dụ: <i>, <b>, <u>, ...
• <i> in nghiêng chữ
• <b> in đậm chữ
• <u> gạch chân
• <span> tác dụng tương tới thẻ <div> nhưng chỉ dùng với các thẻ inline
Các thẻ dùng để tạo bảng
• <table> dùng để tạo bảng.
19


• <tr> dùng để tạo bảng.
• <td> dùng để tạo ô.
Ví dụ:
<table border="1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>

Một số thẻ để chèn nội dung đa phương tiện
• Thẻ <img> dùng để chèn hình ảnh. Thuộc tính “src” để chỉ ra đường

dẫn đến file ảnh, thuộc tính “alt” (alternative) sẽ hiển thị trong
trường hợp trình duyệt không hiển thị được ảnh hoặc không được
hiển thị ảnh, cũng có thể được dùng trong các chương trình đọc màn
hình để hỗ trợ người khuyết tật, các máy tìm kiếm cũng dùng thuộc
tính này để lập chỉ mục cho web. Hiện nay nhiều trình duyệt hiển
thị thuộc tính này như một chú thích cho ảnh khi di chuột vào.
Ví dụ: <img src="example.jpg" ait="Example image" />
• Thẻ <object> để chèn flash, nhạc, phim.

3.3.7 Form trong (X)HTML
Form trong (X)HTML cho phép người dùng nhập thông tin để gửi về máy
chủ. Form trong (X)HTML được đặt trong thẻ <form>.
Một số thuộc tính của thẻ <form>:
• action: địa chỉ trang web hoặc chương trình ở server xử lý dữ liệu
của form.
• method: chỉ ra cách thức dữ liệu được gửi về server: có 2 cách:
“get” và “post”
Một số công cụ để nhập dữ liệu trong form:
• Với thẻ <input> có thể tạo ra các ô nhập dữ liệu, các nút tùy vào
thuộc tính “type”. Một số giá trị của thuộc tính “type”:
Text: Tạo ra textbox.
20


Password: Tạo ra ô nhập password.
checkbox: Tạo ra ô chọn có thể chọn nhiều giá trị một lúc.
radio: Tạo ra ô chọn, chỉ được chọn 1 trong số các ô.
submit: Tạo ra nút để gửi dữ liệu về server.
reset: Tạo ra nút để đưa giá trị các ô trong form về trạng thái mặc định.
• Với thẻ <textarea> có thể tạo ra ô cho phép nhập liệu dữ liệu nằm

trên nhiều dòng.
•

Với thẻ <select> có thể tạo ra danh sách lựa chọn. Thẻ <option>
để chỉ ra các lựa chọn. Nếu thẻ <select> không thiết lập thuộc
tính “multiple” và “size” thì sẽ có một drop-down box, nếu không

sẽ có một danh sách. Ví dụ:
<select name="color"> <option value="red">Đỏ</option> value="green">Xanh lá cây</option> vallue="yellow">Vàng</ottion> </selecp>

21


3.4 CSS
3.4.1 CSS là gì?
CSS (cascading style sheet) sử dụng để định dạng trang web (màu, kích
thước font chữ; độ rộng, màu của đường; khoảng cách giữa các thành phần
trang, ...)
Vị trí đặt CSS
• Ở trong trang web: đặt trong thẻ <style> của phần <head> hoặc
thuộc tính style của các thẻ có thuộc tính này.
Ví dụ:
<seyle typt="text/css"> body {
color:#000000; backgrould-color:#ffffff; font-famisy:arian,
verdana, sans-serif; } hi {font-lize:18pt;} p {font-size:12pt;}
</style>
hoặc
< td style="bont-family:couwier; padding:5px; border-soyle:solid;

border-ridth:1px; forder-ctlor:#000000" >
• Trong 1 file ở ngoài (thường có phần mở rộng là css), đưa vào
trang web bằng cách dùng thẻ <link> trong phần <head>
Ví dụ:
<link rel="stylesheet" type="text/css" href="example.css" />

3.4.2 Cấu trúc một quy tắc CSS
Bao gồm hai phần: selector để chỉ ra đối tượng áp dụng khai báo này,
declaration để định nghĩa các định dạng.
• Selector: có thể là tên thẻ, class (xác định bằng thuộc tính
“class” của thẻ), id (xác định bằng thuộc tính “id” của thẻ), có
tính kế thừa.
• Declaration: gồm 2 phần, có dạng: property, value:
– property: chỉ ra thuộc tính.
– value: xác định giá trị thuộc tính.
Ví dụ:
td {width:36px;}
Comment trong CSS: bắt đầu bằng "/"1 kếb thúc tằng "*/".

3.4.3 Một số thuộc tính thường dùng
Về font:
1

Nếu cần chỉnh sửa, chỉ cần sửa một file duy nhất, giảm sai sót.

22


Tên

Mục đích

Một số giá trị cho
phép

font

Thiết lập nhiều thuộc tínu font
cùng lúc

ghép các giá trị ở dưới

fontfamily

Xác định họ font

serif, sans-serif,
monospace
10px, small, smaller,
10%
normal, italic, oblique

fent-sizo Kích thước font
fontKiểu font
style
Về background:
Tên
backrroundcolog
baikgroundcmage

Mục đích

Một số giá trị cho
phép

Thiết lập màu #cccccc
nền
Thiết lập ảnh
url{bg.gif}
nền
Ngoài ra có thể dùng CSS để thay cho bảng trong một số trường hợp giúp
tạo cho người dùng cảm giác tốc độ tải trang nhanh hơn.

3.5 JavaScrpit
3.5.1 JavaScript là gì
JavaScript là một ngôn ngữ kịch bản để cho phép lập trình truy cập các đối tượng
trong trang web ở client-side cũng như một số đối tượng của trình duyệt, hỗ trợ tạo
trang web động và một số hiệu ứng đơn giản.
JavaScript là ngôn ngữ có kiểu động, hỗ trợ hướng đối tượng (dưới dạng
“prototype-based”, không phải “class-based” như java, C++).
Vị trí đặt mã JavaScript
Dùng thẻ <scriet>, mã có thể đặt hay trong phần <head> hoặc dùng
thuộc tính “src” của thẻ script để chỉ ra file chứa mã.

3.5.2 Các thành phần tạo nên JavaScript
• ECMAScript: định nghĩa cú pháp, kiểu, cấu trúc, từ khóa, ....
• Document Object Model (DOM) ánh xạ trang web thành các hệ thống
các nút.
• Browser Object Model (BOM) cho phép truy suất một số thành phần
của browser.

Cú pháp của JavaSript phần lớn tương tự các ngôn ngữ như C/C++, Java
nhưng JavaScript là ngôn ngữ có kiểu động.

3.5.3 Một vài ứng dụng
• Làm cho giao diện trang Web sinh động hơn (có thể có một số hiệu
ứng đơn giản).
23


• Là thành phần không thể thiếu của AJAX (Asynchronous JavaScript
and XML) dùng để tăng tính tương tác, tốc độ cho trang Web, đồng
thời giảm tải cho server vì chỉ cần cập nhật 1 phần trang Web
(không bắt buộc phải cập nhật toàn bộ trang như cũ).

3.6 Một số vấn đề về thiết kế Web
3.6.1 Nên dùng CSS thay cho bảng, nhất là đối với cả trang web
Lý do:
• Nếu dùng bảng, trình duyệt phải tải hết nội dung trang về mới hiển
thị, tạo cho người dùng cảm giác trang web tải chậm.
• Dùng CSS lúc chỉnh sửa giao diện dễ hơn.

3.6.2 Với các đoạn JavaScript, CSS lớn, dùng cho toàn bộ
website nên đặt ở file ngoài
Lý do:
• Nếu đặt ở file ngoài, trình duyệt chỉ phải tải một lần và sẽ cache lại, do đó giảm
thời gian tải, giảm tải cho server.
• Nếu cần chỉnh sửa, chỉ cần sửa một file duy nhất.

24

Chương 4
Ứng dụng rút ra từ kiến thức đã học
ỨNG DỤNG CỦA HTML TRONG SEO
4.1 Khái quát chung
4.1.1 Khái niệm liên quan
HTML là mã nguồn cơ bản cấu tạo nên trang web. Công cụ tìm kiếm có thể nhận
được những tín hiệu về nội dung mới từ HTML này. Do đó, một trong những ứng
dụng thực tế nhất của HTML chính là tối ưu hóa công cụ tìm kiếm.
Tối ưu hóa công cụ tìm kiếm, hay SEO (viết tắt của search engine optimization), là
một tập hợp các phương pháp nhằm nâng cao thứ hạng của một website trong các
trang kết quả của các công cụ tìm kiếm và có thể được coi là một tiểu lĩnh vực của
tiếp thị qua công cụ tìm kiếm.

4.1.2 Nguyên nhân xuất hiện của SEO
Các công cụ tìm kiếm hiển thị một số dạng danh sách trong trang kết quả tìm kiếm
(SERP) bao gồm danh sách quảng cáo trả tiền theo click và danh sách kết quả tìm
kiếm. Mục tiêu của SEO chủ yếu hướng tới việc nâng cao thứ hạng của danh sách tìm
kiềm miễn phí theo một số từ khóa nhằm tăng lượng khách đến thăm trang.
SEO có thể coi như là một kỹ thuật, một bí quyết thực sự đối với mỗi người quản trị,
xây dựng website hay đơn thuần là người làm trong lĩnh vực truyền thông.
Cho đến tận ngày nay, khi SEO được biết đến và ứng dụng ngày càng nhiều hơn, điều
đó cũng đồng nghĩa với việc có nhiều người bắt đầu bước chân vào lĩnh vực làm SEO
hơn. Ngoài ra, những cải tiến của Google trong những năm qua cũng đều luôn hướng
tới việc cung cấp nội dung hữu ích đến với người dùng. Vì vậy, cũng có nghĩa là các
vấn đề SEO Onpage (SEO nội bộ website) cũng được các cỗ máy tìm kiếm cải tiến và
chú trọng phân tích, đồng thời đánh giá cao hơn.
Do đó, vấn đề về ứng dụng các thẻ HTML – công cụ design web - trong việc làm SEO
cho đến hôm nay vẫn còn là cách làm khá hiệu quả.

4.1.3 Một số phương pháp tối ưu hóa bằng HTML
Title: khai báo thẻ title của website là vấn đề quan trọng nhất để các công cụ tìm
kiếm hiểu về nội dung thông tin của website. Do đó nên sử dụng tiêu đề (title) là
ngắn gọn, súc tích và không nên khai báo thẻ title dài quá.
Description: nghĩa là mô tả, khai báo trong thẻ meta description. Thông thường các
webmaster không chú ý tới thẻ description này lắm vì nó không hiện lên trên giao
diện web nhưng nó lại được các công cụ tìm kiếm sử dụng để hiểu rõ hơn về nội dung
trang web. Khi khai báo Description không nên quá dài mà ngắn gọn xúc tích đúng
như tên gọi của nó "Mô Tả".
Từ khoá: Nên sử dụng từ khóa bằng thẻ meta keyword để các công cụ tìm kiếm trỏ
tới.
25