\documentclass[12pt,a4paper]{report}
\usepackage[utf8x]{vietnam}
\usepackage{graphicx}
\usepackage{fancybox}
\usepackage[left=2.50cm, right=2.00cm, top=2.00cm, bottom=2.00cm]{geometry}
%định dạng trang và căn lề
\begin{document}
\thispagestyle{empty} %xóa header và footer
\thisfancypage{
\setlength{\fboxsep}{0pt}
\fbox}{} %đóng khung trang
\begin{center}
\begin{large}
TRƯỜNG ĐẠI HỌC BÁCH KHOA HÀ NỘI
\end{large} \\
\begin{large}
VIỆN CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
\end{large} \\
\textbf{ * }\\[1cm] %xuống dòng 7cm
\begin{center}
\includegraphics[scale=0.04]{bach_khoa.png}\\[2cm]
\end{center}
{\fontsize{32pt}{1}\selectfont BÁO CÁO MÔN HỌC}\\
{\fontsize{20pt}{1}\selectfont NHẬP MÔN CÔNG NGHỆ THÔNG TIN \& TT}\\[3cm]
\end{center}
\hspace{3cm} Nhóm sinh viên thực hiện :
\textbf{\hspace{4cm} Nguyễn Văn A}\hspace{14pt} - CN CNTT 01 K58 - 20133333
\textbf{\hspace{4cm} Nguyễn Thành B} - CN CNTT 01 K58 - 20134444
\textbf{\hspace{4cm} Trần Văn C}\hspace{33pt} - CN CNTT 01 K58 - 20135555
\textbf{\hspace{4cm} Nguyễn Thạc D}\hspace{9pt} - CN CNTT 01 K58 - 20136666 \\
\\

\newpage
\addcontentsline{toc}{chapter}{Tóm tắt nội dung }
\begin{center}
{\LARGE \textbf{Tóm tắt nội dung}}
\end{center}
\quad 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ề
\LaTeX , Scilab và lập trình Web
\\[30pt]
{\Large \textbf{1. \LaTeX}} \\[7pt]
-Cách download, cài đặt và chạy phần mềm soạn thảo MiKTeX, Texmaker trên
window
\\[7pt]
-Cấu Trúc một tập tin mã nguồn
\\[7pt]
-Một số lệnh đơn giản
\\[30pt]
{\Large \textbf{2. Scilab}} \\[7pt]
-Cách download, cài đặt và chạy phần mềm Scilab trên Window \\[7pt]
-Các kiểu dữ liệu và toán tử cơ bản của Scilab \\[7pt]
-Ví dụ về giải phương trình bậc hai bằng Scilab \\[7pt]
-Xử lý ma trận trong Scilab \\[30pt]
{\Large \textbf{3. Thiết kế Web}}
\newpage
\addcontentsline{toc}{chapter}{Mục lục}
\tableofcontents
\newpage
\addcontentsline{toc}{chapter}{Giới thiệu }
\begin{center}
\textbf{{\LARGE Giới thiệu}}
\end{center}

\newline
\section{Cơ bản về \LaTeX}
\subsection{Cài đặt \LaTeX}

\quad Để soạn thảo được văn bản \LaTeX{} cần tiến hành tải về và cài đặt một
số engine và front-end. Toàn bộ quá trình cài đặt và sử dụng chúng em tiến
hành trên hệ điều hành Window 8.1 \\[7pt]

-Engine: MiKTeX 2.9 (http://miktex.org/)\\[5pt]

-Front-end: Texmaker 4.3 (http://www.xm1math.net/texmaker/)\\[5pt]

\quad \textit{Ngoài ra có thể sử dụng các công cụ khác tuy nhiên do yêu cầu
môn học nên chúng em không trình bày thêm ở đây.}\\

\quad Sau khi tải về những phần mềm cần thiết tiến hành cài đặt như bình
thường. Chương trình soạn thảo Texmaker sẽ xuất hiện như hình
\begin{center}
\includegraphics[scale=0.3]{Fily005.jpg}
\end{center}

\quad Tuy nhiên để có thể soạn thảo văn bản bằng tiếng Việt, cần tải thêm gói
ngôn ngữ vntex được chia sẻ trên internet. Lưu thư mục ngôn ngữ vntex vào 1
vùng trên ổ cứng. Sau đó nhấn tổ hợp Window + S và tìm kiếm với từ khóa
"Setting", chọn kết quả "Setting(Admin)" sẽ xuất hiện cửa sổ cài đặt MiKTeX\\

\begin{center}
\includegraphics[scale=0.6]{Fily001.jpg}
\end{center}
\quad Chọn thẻ Roots, add thư mục vntex vừa tải về. Sau đó chọn thẻ General và

\textit{\% Nội dung tập tin \\}
\textbackslash end\{document\}
\subsection{Lệnh documentclass}
\quad Là lệnh bắt buộc dùng để khai báo loại tài liệu. Tham số tùy chọn để tùy
chỉnh định dạng của tài liệu như kích cỡ trang giấy,kích cỡ chữ, font chữ
Tham số "class" để khai báo loại tài liệu như article, report, book
\subsection{Lệnh usepackage}
\quad Khai báo \textbackslash usepackage[tham số tùy chọn]\{package\} để thêm
vào các tính năng mở rộng không có sẵn trong \LaTeX bằng việc đưa vào các gói
bổ sung. Trong đó tham số tùy chọn để thiết đặt các thông số cho package sử
dụng. Ví dụ như việc sử dụng trong tài liệu này: \\[2pt]
\textbackslash usepackage[utf8x]\{vietnam\} \\[9pt]
Để sử dụng gói ngôn ngữ vntex hỗ trợ tiếng Việt. Hoặc: \\[2pt]
\textbackslash usepackage\{graphicx\}\\[9pt]
Để thực hiện chèn hình ảnh vào tài liệu.
\section{Tựa đề, các chương và các mục}
\quad Giúp cho người đọc dễ dàng tìm ra những phần cần thiết trong tài liệu.
Các lệnh sau có sẵn dành cho lớp tài liệu dạng article:\\[9pt]
\textbackslash section\{ \}\\
\textbackslash subsection\{ \}\\
\textbackslash subsubsection\{ \}\\
\textbackslash paragraph\{ \}\\
\textbf{•} subparagraph\{ \}\\
Với lớp tài liệu report như ở bản báo cáo này thì cấu trúc chia lớn nhất là:
\\[9pt]
\textbackslash chapter\{ \}\\[2pt]
\section{Soạn thảo văn bản}
\subsection{Font}
\quad Có thể dùng lệnh thay đổi font hoặc lệnh khai báo font. Lệnh 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

Cũng có thể sử dụng môi trường để tạo bảng biết với cấu trúc:\\[9pt]
\textit{\textbackslash begin\{tabular\}[pos]\{table spec\}\\
\%nội dung\\
\textbackslash end\{tabular\}\\[3pt]
}
Tham số "pos" để chỉ ra vị trí của bảng so với chữ ở xung quanh\\
Tham số "table spec" định nghĩa cấu trúc cột của bảng: "l" để chỉ ra một cột
căn lề trái, "c" để chi ra một cột căn giữa, "r" để chỉ ra một cột căn lề
phải. Và ký hiệu "|" để chỉ ra một đường kẻ giữa 2 cột. Ví dụ:\\[9pt]
\textbackslash begin\{tabular\}[t]\{|l|c|r|\} \\
\textbackslash hline Máy tính bỏ túi \& Máy tính để bàn \& Máy tính xách tay
\textbackslash \textbackslash \\
\textbackslash hline Giá rẻ \& Giá trung bình \& Giá cao \textbackslash
\textbackslash \\
\textbackslash hline
\textbackslash end\{tabular\} \\[9pt]
\quad sẽ in ra
\begin{tabular}[t]{|l|c|r|}
\hline Máy tính bỏ túi & Máy tính để bàn & Máy tính xách tay\\
\hline Giá rẻ & Giá trung bình & Giá cao \\
\hline
\end{tabular}\\[9pt]
\quad Trong bảng, hai cột liên tiếp ngăn cách nhau bằng dấu "\&". Để tạo đường
kẻ giữa 2 dòng dùng "\textbackslash hline"
\section{Soạn thảo công thức toán học}
\quad Phần nội dung toán học trong văn bản có thể được soạn thảo giữa cặp dấu
\$ \$ hoặc \textbackslash( \textbackslash ) hoặc \textbackslash begin\
{math\} \textbackslash end\{math\}. Để tách các công thức lớn khỏi đoạn
biên soạn có thể sử dụng cặp \textbackslash [ \textbackslash ]. Và để đánh
số các phương trình có thể sử dụng môi trường "equation". Ví dụ: \\[9pt]

\subsection{Mũ, chỉ số, căn thức, phân thức }
\begin{tabular}{|l|l|c|}
\hline Cấu trúc & Khai báo & Hiển thị \\
\hline \^{}\{ \} & x\^{}2 & $x^2$ \\
\_\{ \} & x\_ 2 & $x_2$ \\
\textbackslash sqrt[ ]\{ \} & \textbackslash sqrt[3]\{4\} & $\sqrt[3]{4}$
\\
\textbackslash frac\{ \}\{ \} & \textbackslash frac\{3\}\{4\} & $\frac{3}
{4}$ \\ \hline
\end{tabular}
\subsection{Khoảng cách trong văn bản toán học}
\quad Để tạo khoảng cách giữa hai công thức liên tiếp có thể dùng lệnh
\textbackslash quad hoặc \textbackslash qquad để tạo khoảng cách lớn hơn. Ví
dụ: \\[9pt]
\textit{\$ \textbackslash sqrt[3]\{x\} = 2\$ \textbackslash quad \$x\^{}2 - x
= 0\$ \textbackslash \textbackslash \\
\$ \textbackslash sqrt[3]\{x\} = 2\$ \textbackslash qquad \$x\^{}2 - x = 0\$
\\}
Sẽ in ra: \\[9pt]
$\sqrt[3]{x} = 2$ \quad $x^2 - x = 0$\\
$\sqrt[3]{x} = 2$ \qquad $x^2 - x = 0$
\section{Chèn hình ảnh vào văn bản}
\quad Để có thể chèn hình ảnh vào văn bản cần phải thêm gói graphicx: \\[3pt]
\textbackslash usepackage\{graphicx\} \\[3pt]
Để chèn hình dùng lệnh \\[2pt]
\textbackslash includegraphics[tham số tùy chọn]\{ tên file\} \\[3pt]
và cần lưu ý \textbf{file hình ảnh phải ở cùng thư mục với file .tex đang được
soạn thảo}. Trong đó tham số tùy chọn để xác định thuộc tính hình ành, như: \\
[3pt]
\begin{tabular}{|l|l|}

\end{center}
\section{Các phương thức tương tác với Scilab}
$\bullet$ Console (Hình 1.1) , Editor (Hình 1.2) \\[9pt]
-Console: \\
\begin{center}
\includegraphics[scale=0.4]{Fily109.jpg} \\
Hình 2.1
\end{center}
-Editor: Dễ dàng soạn thảo các file chưa tập các đoạn code của Scilab. Để gọi
ra editor vào Application/Editor hoặc vào editor() từ console \\
\begin{center}
\includegraphics[scale=0.5]{Fily110.jpg} \\
Hình 1.2
\end{center}
\section{Sử dụng help trong Scilab}
\quad Vào chức năng help từ thanh công cụ (Hình 2.3) \\
\begin{center}
\includegraphics[scale=0.36]{Fily108.jpg} \\
Hình 2.3
\end{center}
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ụ:\\
Câu lệnh "help sqrt" cho biết cú pháp hàm căn bậc hai trong toán tử \\
\begin{center}
\includegraphics[scale=0.37]{Fily107.jpg}\\
Hình 2.4 \\
\end{center}
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í dụ: \\

\item {Ngoặc vuông ``['' và ``]'' để đánh dấu vị trí bắt đầu và kết
thúc của ma trận.}
\item {Dấu phẩy ``,'' để phân chia các giá trị giữa các cột.}
\item {Dấu chấm phẩy``;'' để phân chia các hàng.}
\end{itemize}
Ngoài ra có một số hàm như
\begin{flushleft}
\hspace{1cm}{ones, eye, zeros, rand}
\end{flushleft}
để khởi tạo một số dạng ma trận đặc biệt.\\
Ma trận rỗng:
\begin{flushleft}
\hspace{1cm}{A = [ ]}
\end{flushleft}
tạo ra ma trận A là ma trận rỗng.
\\subsection{Truy cập phần tử của ma trận}
Với ma trận A cho trước:
\begin{itemize}
\item {Để truy cập một phần tử:}
\begin{flushleft}
\hspace{0.5cm}{A[i,j]}
\end{flushleft}
Trong đó i,j là chỉ số hàng và cột (tính từ 1)
\item {Để truy cập nhiều phần tử:}
\begin{flushleft}
\hspace{0.5cm}{A[$x_{1}$:$x_{2}$ , $j_{1}$:$j_{2}$]}
\end{flushleft}
Trong đó $x_{1}$ , $x_{2}$ thứ tự là chỉ số đầu và cuối của
các hàng lấy giá trị, $y_{1}$ , $y_{2}$ 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

49 & 64 & 81\end{array} \right]$
\end{center}
\chapter[Chương 3. HTML - XHTML, CSS, JavaScript]{HTML - XHTML, CSS,
JavaScript}
\section{Một số khái niệm cơ bản về WWW}
\textbf{World Wide Web}, gọi tắt là \textbf{Web} hoặc \textbf{WWW}, mạng lưới
toàn cầu là một không gian thông tin toàn cầu mà mọi người có thể truy nhập
(đọc và viết) qua các máy tính nối với mạng Internet. Thuật ngữ này thường
được hiểu nhầm là từ đồng nghĩa với chính thuật ngữ Internet. Nhưng Web thực
ra chỉ là một trong các dịch vụ chạy trên Internet, ngoài Web ra còn các dịch
vụ khác như thư điện tử hoặc FTP.
\subsection{Các thành phần của Web}
\begin{itemize}
\item WebPage: là một trang Web.
\item Website: Là tập hợp các WebPage có nội dung thống nhất
\item 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:cổng/đường dẫn đến tài nguyên
\item Web Server: cung cấp tài nguyên cho máy khác.
\item Web Browser: dùng để khai thác dịch vụ Web.
\end{itemize}
\section{Một số công cụ thường dùng để tạo trang (X)HTML, CSS,JavaScript}
\subsection{Cách tạo file HTML}
Trước tiên ta tạo một file index.txt đơn giản bằng notepad trong Window với
nội dung sau:\\
<p>Hello</p>
Sau đó "Save As" lại file với định dạng mới là .html\\
Ngoài cách tạo đơn giản trên, chúng ta cũng có thể tạo file HTML trực tiếp
thông qua một số ứng dụng như: notepad++, Dreamweaver, \\

\end{center}
Là trình soạn code cũng hỗ trợ nhiều ngôn ngữ như HTML, CSS, JavaScript, Perl,
PHP, Ruby, Django v.v Nó cũng có những tính năng như auto-complete, menu hỗ
trợ, kiểm tra cú pháp, xem trước code HTML, code snippet (dạng làm trước),
edit nhiều trang cùng một lúc và cả Project Management.
\end{enumerate}
\section{HTML - XHTML}
\subsection{HTML, XHTML là gì?}
\textbf{Đị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.
\textbf{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
\newpage
\subsection{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

\item Phần đầu: header, có thể chứa logo, câu slogan, các liên kết, các banner
liên kết, các button, đoạn flash, hoặc các form ngắn như form tìm kiếm,
\item Phần liên kết toàn cục: global navigation, dùng để chứa các liên kết đến
những trang quan trọng trong toàn bộ trang, trong phần này có thể chứa thêm
các liên kết con (sub navigation).
\item Phần thân của trang: page body, phần này chứa phần nội dung chính
(content) và phần nội dung phụ (sidebar).
Phần nội dung chính: content, phần này chứa nội dung chính cần thể hiện cho
người dùng xem.
\item Phần nội dung phụ: sidebar, phần này có thể chứa liên kết phụ của từng
trang (local navigation), hoặc các banner chứa liên kết liên quan, hoặc có thể
dùng để chứa các liên kết quảng cáo,
\item Phần cuối trang web: footer, phần này thường chứa phần liên hệ như: tên
công ty, địa chỉ, số điện thoại, mail liên hệ, và đặc biệt là copyright,
hoặc có thể chứa các liên kết toàn trang, các banner liên kết,
\end{itemize}
\subsection{Một số thẻ hay dùng}
\textbf{Các thẻ khố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ụ: <p>, <h1>,
<h2>,
\begin{itemize}
\item <p> định nghĩa một đoạn (paragraph) trong trang web (ở trước và sau thẻ
<div> tự động xuống
dòng).
\item <h1> đến <h6> dùng để định nghĩa các tiêu đề (<h1> là lớn nhất, <h6> là
nhỏ nhất)
\item <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)
\end{itemize}

đế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" alt="Example image" />
\item Thẻ <object> để chèn flash, nhạc, phim.
\end{itemize}
\subsection{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>.\\
$<form action="action_page.php">\\
Username:\\
<br>\\
<input type="text" name="user">\\
<br><br>\\
Encryption:\\
<br>\\
<keygen name="security">\\
<br><br>\\
<input type="submit">\\
</form>$\\
\includegraphics[scale=1]{summit.png}
Một số thuộc tính của thẻ <form>:
\begin{itemize}

</select>$
\begin{figure}[hbtp]
\caption{Example}
\centering
\includegraphics[scale=1]{select.png}
\end{figure}
\section{CSS}
\subsection{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
\begin{itemize}
\item Ở 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ụ:
<style type="text/css">
body {
color:\#000000;\\
background-color:\#ffffff;\\
font-family:arial, verdana, sans-serif; }\\
h1 {font-size:18pt;}\\
p {font-size:12pt;}\\
</style>\\
hoặc\\
< td style="font-family:courier; padding:5px;\\
border-style:solid; border-width:1px; border-color:\#000000" >\\
\item 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>

\subsection{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.\begin{itemize}
\item 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.
\item Declaration: Gồm 2 phần, có dạng: property:value;
\begin{itemize}
\item property: chỉ ra thuộc tính.
\item value: xác định giá trị thuộc tính
Ví dụ:
td {width:36px;}
Comment trong CSS: bắt đầu bằng “/* ” kết thúc bằng “*/”.

\end{itemize}
\end{itemize}
\subsection{Một số thuộc tính thường dùng}
\textbf{Về font}
\begin{tabular}{llll}
Tên& Mục Đích &Một số giá trị cho phép & \\
font&Thiết lập nhiều thuộc tính font cùng & ghép các giá trị ở dưới & \\
font-family &Xác định họ font &serif, & sans-serif, monospace \\
font-size ,Kích thước font &Kích thước font & 10px, small, smaller & \\
\end{tabular}
\textbf{Về background:}
\begin{tabular}{lll}
Tên &Mục đích &Một số giá trị cho phép \\
background-color & Thiết lập màu nền & \# cccccc\\
background-image url{bg.gif} & Thiết lập ảnh nền &url{bg.gif} \\

\begin{itemize}
\item ECMAScript: định nghĩa cú pháp, kiểu, cấu tr•úc, từ khóa,
\item Document Object Model (DOM) ánh xạ trang web thành các hệ thống các nút.
\item Browser Object Model (BOM) cho phép truy suất một số thành phần của
browser.
\end{itemize}
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.
\subsection{ Một vài ứng dụng}
\begin{itemize}
\item Làm cho giao diện trang Web sinh động hơn (có thể có một số hiệu ứng đơn
giản)
\item 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ũ)
\end{itemize}
\section{Một số vấn đề về thiết kế Web}
\subsection{Nên dùng CSS thay cho bảng, nhất là đối với cả trang web}
\textbf{Lý do:}
\begin{itemize}
\item 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.
\item Dùng CSS lúc chỉnh sửa giao diện dễ hơn.
\end{itemize}
\subsection{Với các đoạn JavaScript, CSS lớn, dùng cho toàn bộ website nên đặt
ở file ngoài}