Báo cáo nhập môn CNTT Đại học Bách Khoa Hà Nội

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:
Tạ Hữu Công - CNTT2.04 - 20130458
Phạm Thế Hào - CNTT1.01 - 20131205
Lê Thị Anh Phương - CNTT2.04 - 20133018
Vũ Xuân Trường - CNTT2.04 - 20134239
Giáo viên hướng dẫn: Trần Hoàng Hải
Trần Thị Thúy
Nguyễn Thanh Hùng
HÀ NỘI - Ngày 20 tháng 12 năm 2014
Lời cảm ơn
Chúng em xin chân thành cảm ơn thầy Trần Hoàng Hải, cô Lê Thị Thúy và thầy
Nguyễn Thanh Hùng đã cung cấp cho chúng em những kiến thức rất bổ ích và
thực tiễn khi chúng em bắt đầu tìm hiểu về Công nghệ Thông tin cũng như đã
giúp đỡ chúng em rất nhiều trong quá trình viết bản báo cáo này.
1
Lời nói đầu
Chúng em là những sinh viên năm hai mới bắt đầu làm quen với 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, thay
đổi từng ngày từng giờ, do đó chúng em cần có một nền tảng kiến thức thật vững
chắc, cùng phương pháp nghiên cứu hợp lý mới có thể theo kịp những bước tiến
của ngành. Dưới sự hướng dẫn của các thầy cô giảng dạy môn “Nhập môn Công
nghệ Thông tin” chúng em đã có cơ hội tìm hiểu những kiến thức cơ bản nhất về
Scilab, L
A
T

E
X , Web. Đây là những công cụ hữu ích để sinh viên Công nghệ thông
tin chúng em có thể tiếp tục nâng cao trình độ và tiếp thu kiến thức mới.
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, L
A
T
E
X và Web (gồm HTML, CSS và JavaScript)
1. 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
2. L
A
T
E
X :
• Cách cài đặt và chạy một số engine (MiKTeX, Texlive) và front-end (như
Texmaker, TeXnicCenter) 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
3. Scilab :
• Cách cài đặt và chạy phần mềm Scilab trên Windows cũng như Linux
• 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
3

Mục lục
1 HTML, CSS, JavaScript 8
1.1 Một số khái niệm cơ bản về WWW . . . . . . . . . . . . . . . . . 8
1.1.1 Khái niệm về siêu văn bản . . . . . . . . . . . . . . . . . . 8
1.1.2 Các thành phần của Web . . . . . . . . . . . . . . . . . . . 8
1.2 Một số công cụ thường dùng để tạo trang HTML, CSS, JavaScript 9
1.3 HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
1.3.1 Giới thiệu về HTML . . . . . . . . . . . . . . . . . . . . . . 10
1.3.2 Làm quen với việc viết code HTML . . . . . . . . . . . . . 11
1.3.3 Thẻ HTML – HTML Tag . . . . . . . . . . . . . . . . . . . 13
1.3.4 Các thẻ HTML cấu trúc . . . . . . . . . . . . . . . . . . . 14
1.3.5 Các thẻ định dạng văn bản (Text) . . . . . . . . . . . . . . 15
1.3.6 Các ký tự đặc biệt trong HTML . . . . . . . . . . . . . . . 16
1.3.7 Các thẻ định dạng danh sách (list) . . . . . . . . . . . . . . 17
1.3.8 Hình ảnh trong HTML . . . . . . . . . . . . . . . . . . . . 18
1.3.9 Thẻ tạo bảng . . . . . . . . . . . . . . . . . . . . . . . . . 19
1.3.10 HTML Frames . . . . . . . . . . . . . . . . . . . . . . . . . 21
1.3.11 Thẻ Frame . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
1.3.12 HTML form và trường nhập liệu. . . . . . . . . . . . . . . . 22
1.3.13 Backgrounds . . . . . . . . . . . . . . . . . . . . . . . . . . 24
1.4 CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
1.4.1 CSS là gì? . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
1.4.2 Thứ tự xếp lớp . . . . . . . . . . . . . . . . . . . . . . . . . 25
1.4.3 Cú pháp CSS . . . . . . . . . . . . . . . . . . . . . . . . . 25
1.4.4 Nhóm các phần tử với nhau (Grouping) . . . . . . . . . . . 26
1.4.5 Bộ chọn Lớp(The class Selector) . . . . . . . . . . . . . . . 27
1.4.6 Bộ chọn Mã (The id Selector) . . . . . . . . . . . . . . . . 28
1.4.7 Lời chú thích trong CSS . . . . . . . . . . . . . . . . . . . . 28
1.4.8 Làm thế nào để chèn một Style Sheet . . . . . . . . . . . . 29
1.4.9 Các thuộc tính Border trong CSS . . . . . . . . . . . . . . 30

1.4.10 Thuộc tính Font trong CSS . . . . . . . . . . . . . . . . . . 31
1.4.11 Thuộc tính List trong CSS . . . . . . . . . . . . . . . . . . 32
1.4.12 Thuộc tính Text trong CSS . . . . . . . . . . . . . . . . . . 32
1.4.13 Thuộc tính Padding . . . . . . . . . . . . . . . . . . . . . . 32
1.4.14 Các thuộc tính Background trong CSS . . . . . . . . . . . . 33
1.4.15 Thuộc tính Margin trong CSS . . . . . . . . . . . . . . . . 33
1.5 JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
1.5.1 JavaScript là gì? . . . . . . . . . . . . . . . . . . . . . . . . 34
1.5.2 Các thành phần tạo nên JavaScript . . . . . . . . . . . . . 34
4
1.5.3 Một vài ứng dụng . . . . . . . . . . . . . . . . . . . . . . . 34
1.6 Một số vấn đề về thiết kế Web . . . . . . . . . . . . . . . . . . . . 35
1.6.1 Nên dùng CSS thay cho bảng, nhất là đối với cả trang web . 35
1.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 . . . . . . . . . . . . . . . . . . . . . . 35
2 L
A
T
E
X 36
2.1 Những kiến thức cơ bản về L
A
T
E
X . . . . . . . . . . . . . . . . . . 36
2.1.1 T
E
X . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
2.1.2 L
A

T
E
X . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
2.1.3 Những điểm mạnh và điểm yếu của L
A
T
E
X . . . . . . . . . 37
2.1.4 Một số engine và front-end dùng để soạn thảo . . . . . . . . 37
2.1.5 Cài đặt và sử dụng L
A
T
E
X . . . . . . . . . . . . . . . . . . 39
2.2 Cấu trúc của tập tin nhập liệu . . . . . . . . . . . . . . . . . . . . 40
2.3 Cách trình bày một tài liệu . . . . . . . . . . . . . . . . . . . . . . 41
2.3.1 Các lớp tài liệu . . . . . . . . . . . . . . . . . . . . . . . . 41
2.3.2 Các gói . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
2.3.3 Các định dạng trang của trang văn bản . . . . . . . . . . . 42
2.4 Soạn thảo văn bản . . . . . . . . . . . . . . . . . . . . . . . . . . 42
2.4.1 Định dạng việc xuống hàng và sang trang . . . . . . . . . . 42
2.4.2 Các chuỗi kí tự sẵn có trong L
A
T
E
X . . . . . . . . . . . . . 44
2.4.3 Tựa đề, các chương và các mục . . . . . . . . . . . . . . . . 44
2.4.4 Canh trái , canh phải, và canh giữa . . . . . . . . . . . . . 45
2.4.5 Môi trường bảng . . . . . . . . . . . . . . . . . . . . . . . . 46
2.4.6 Một số kí tự đặc biệt . . . . . . . . . . . . . . . . . . . . . 46

2.4.7 Thay đổi kích thước chữ. . . . . . . . . . . . . . . . . . . . 47
3 Scilab 48
3.1 Tổng quan về Scilab . . . . . . . . . . . . . . . . . . . . . . . . . . 48
3.1.1 Giới thiệu Scilab . . . . . . . . . . . . . . . . . . . . . . . . 48
3.1.2 Phương thức tương tác với Scilab . . . . . . . . . . . . . . . 49
3.1.3 Sử dụng help trong Scilab (Hình 3.3) . . . . . . . . . . . . . 50
3.2 Ứng dụng của Scilab trong việc giải toán . . . . . . . . . . . . . . 51
3.2.1 Các loại biến trong Scilab . . . . . . . . . . . . . . . . . . . 51
3.2.2 Tính toán với ma trận và vector . . . . . . . . . . . . . . . 51
3.2.3 Đồ thị . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
3.2.4 Đồ thị cho dưới dạng hàm . . . . . . . . . . . . . . . . . . 54
5
Danh sách hình vẽ
1.1 Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
1.2 Notepad++ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
1.3 Gedit . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
1.4 Notepad . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
1.5 Lưu trữ . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
1.6 Mở bằng trình duyệt . . . . . . . . . . . . . . . . . . . . . . . . . 12
1.7 Trang html đầu tiên . . . . . . . . . . . . . . . . . . . . . . . . . . 13
1.8 Thẻ HTML cấu trúc . . . . . . . . . . . . . . . . . . . . . . . . . . 14
2.1 Texmaker . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
2.2 TeXnicCenter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
2.3 Cài đặt MiKTeX . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
2.4 Cài đặt MiKTeX: Tiếng Việt . . . . . . . . . . . . . . . . . . . . . 40
3.1 In chuỗi . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
3.2 Editor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
3.3 Help . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
6
Giới thiệu

Chúng em nhận thấy các vấn đề này là cơ bản và hết sức quan trọng để có thể
tiếp tục học tập và nghiên cứu chuyên sâu về Công nghệ Thông tin.
Cụ thể:
• Scilab: Đây là một phần mềm miễn phí và mạnh mẽ để giúp giải một số bài
liên quan đến Toán học và Vật lý.
• L
A
T
E
X : Đây là công cụ giúp chúng em có thể viết các bản báo cáo với chất
lượng tốt nhất khi học tập, nghiên cứu các vấn đề 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 hay hơn nữa, đó là một trang Web cho tập thể, cho
cộng đồng.
7
Chương 1
HTML, CSS, JavaScript
HTML là ngôn ngữ cơ bản nhất của tất cả các website. Kể cả những trang web
động được viết bằng PHP nhưng trong nó vẫn có code HTML. Do vậy dù cho
có thể sở hữu trong tay những chương trình làm web WYSIWYG hàng đầu như:
Frontpage và Dreamweaver, nhưng điều đó vẫn chưa phải là đầy đủ nếu không
biết chút gì về HTML.
1.1 Một số khái niệm cơ bản về WWW
1.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. . .
1.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:cổng/đường dẫ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.
8
1.2 Một số công cụ thường dùng để tạo trang HTML,
CSS, JavaScript
1. Dreamweaver: Là công cụ có phí, mạnh, dễ sử dụng. (Hình 1.1)
Hình 1.1: Dreamweaver
2. Notepad++: Là công cụ miễn phí, nguồn mở tuy nhiên không mạnh bằng
Dremweaver, chỉ có tính năng highlight và auto-completion tuy nhiên khá hạn
chế.(Hình 1.2) Link: />Hình 1.2: Notepad++
9
3. Gedit: Là công cụ miễn phí, nguồn mở, ban đầu viết cho Linux, đi kèm hầu
hết các bản phân phối dùng GNOME.(Hình 1.3)
Hình 1.3: Gedit
1.3 HTML
1.3.1 Giới thiệu về HTML
- HTML – HyperText Markup Language: Ngôn ngữ đánh dấu siêu văn bản
- Ngôn ngữ đánh dấu là dãy các thành phần được phân cách nhau bởi các ký tự
đặc biệt xác định cách hiển thị văn bản hay các mục khác trong thành phần đó
- Trong HTML, các ký tự đặc biệt đó là các thẻ HTML – HTML tag
- File HTML là file văn bản (text) chứa các thẻ định dạng HTML quy định cho

trình duyệt biết cách hiển thị các thành phần của trang Web
- File HTML có phần mở rộng là .htm hoặc .html
Sau đây là ví dụ về một file HTML :
< html >
< head >
< title > My first HTML page </title>
</ head >
< body >
Hello World! <br>
</ body >
</html>
10
1.3.2 Làm quen với việc viết code HTML
Có nhiều công cụ được tích hợp sẵn trên máy tính nhằm hỗ trợ cho việc soạn
thảo HTML, nếu sử dụng hệ điều hành Windows hãy mở Notepad, nếu sử dụng
Mac mở ứng dụng Simple Text. Với OSX mở TextEdit và thay đổi lựa chọn sau:
Select (trong cửa sổ preference) > Plain Text thay vì Rich Text và chọn "Ignore
rich text commands in HTML files". Việc này rất quan trọng bởi vì nếu không
làm vậy thì code HTML có thể không đúng.
Ngoài ra còn có nhiều trình soạn thảo hữu ích khác như: Notepad++, e-Texteditor,
Eclipse, Aptana,
Sau đây sẽ giới thiệu khái quát việc biên soạn HTML trên công cụ Notepad -
Trình soạn thảo cơ bản được tích hợp sẵn trên Windows
Mở Notepad trên Window: Từ Windows, click Start/ chọn All Programs/ chọn
Accessories/ Chọn Notepad, chương trình Notepad được mở ra với giao diện như
hình dưới:
Hình 1.4: Notepad
• Viết Codes vào NotePad:
Gõ vào Notepad các dòng codes sau đây:
<html>

<head>
<title>My first webpage</title>
</head>
<body>
Đây là trang Web đầu tiên của tôi!!!
</body>
</html>
• Lưu trang Notepad Untilted: Tạo một thư mục để chứa các trang mà bạn
tạo ra trong suốt quá trình thực hành, đặt tên cho thư mục này là html.
Nên để thư mục này là thư mục gốc C:\html.
Click File/ chọn Save hoặc dùng tổ hợp phím Ctrl + S
Cửa sổ Save as mở ra, chọn nơi chứa thư mục html
11
Hình 1.5: Lưu trữ
1. Tại ô Filename: gõ vào tên file myfirstpage.html (nhớ rằng phần mở rộng
là .html)
2. Tại ô Save as type: chọn All files
3. Tại ô Encoding chọn: UTF-8 (Unicode Transformation Format-8)
Xong click Save.
• Mở trang Myfirstpage.html bằng một trình duyệt web bất kì
Click chuột phải vào trng html vừa tạo, chọn Open with rồi lựa chọn trình
duyệt mà bạn muốn mở, chẳng hạn Google Chrome
Hình 1.6: Mở bằng trình duyệt
Trang html sẽ được hiển thị tương ứng
12
Hình 1.7: Trang html đầu tiên
1.3.3 Thẻ HTML – HTML Tag
- Được dùng để đánh dấu các thành phần HTML Được bao bởi 2 ký tự < và >
- Thường đi theo cặp: thẻ mở <tag> và thẻ đóng </tag>
- Phần đặt giữa thẻ mở và đóng là nội dung của thành phần HTML

- Các thẻ HTML không phân biệt chữ hoa chữ thường
- Các thẻ có thể có thuộc tính – attribute
- Thuộc tính của thẻ quy định thêm những thông tin tiết cho việc hiển thị thành
phần HTML
- Các thuộc tính luôn có dạng:
tên thuộc tính = “giá trị thuộc tính”
- Thuộc tính luôn nằm trong thẻ mở
13
* NOTE:
1.3.4 Các thẻ HTML cấu trúc
Sơ đồ dưới đây cho ta biết các thẻ cấu trúc cơ bản và chức năng của chúng:
Hình 1.8: Thẻ HTML cấu trúc
1. Thẻ bắt đầu file HTML
<HTML> và </HTML>
2. Thẻ đánh dấu tiêu đề file HTML
• <HEAD> và </HEAD>
• Không được hiển thị trên trình duyệt
3. Thẻ tên tiêu đề file HTML
<TITLE> và </TITLE>
4. Thẻ mô tả nội dung file HTML
• <META>
14
• Thuộc tính:
- NAME: tên của thông tin mô tả
- CONTENT: nội dung thông tin mô tả
5. Thẻ chú thích – comment
<! chú thích ở đây, không được hiển thị>
6. Thẻ đánh dấu phần nội dung file HTML
• <BODY> và </BODY>
• Thuộc tính:

Attribute Value Description
Alink rgb(x, x, x)#xxxxxx colorname Màu của các liên kết sau khi đã click vào.
Background file_name Ảnh nền của trang web.
Bgcolor rgb(x, x, x)#xxxxxx colorname Màu nền.
Link rgb(x, x, x)#xxxxxx colorname Màu của các liên kết trước khi click vào.
Text rgb(x, x, x)#xxxxxx colorname Màu của chữ trong trang web.
Vlink rgb(x, x, x)#xxxxxx colorname Quy định màu của liên kết đã từng đến.
1.3.5 Các thẻ định dạng văn bản (Text)
1. Thẻ ngăn cách đoạn paragraph
• <P> và </P>
• Tự động thêm vào ký tự xuống dòng ở trước và sau đoạn paragraph
• Thuộc tính:
align = left | center | right | justify
2. Thẻ đề mục Heading
• <Hn> và </Hn> với n = 1 6
• Đề mục Heading 1 là lớn nhất và 6 là bé nhất
• Thuộc tính:
align = left | center | right | justify căn lề
3. Thẻ xuống dòng: line BReak
• <BR>
• Chỉ có thẻ mở, không có thẻ đóng
15
4. Thẻ đường kẻ ngang: Horizontal Rule
• <HR>
• Chỉ có thẻ mở, không có thẻ đóng
• Thuộc tính:
align = {left | center | right | justify} : căn lề đường kẻ
size = {n pixels | n%} : độ dầy của đường kẻ
width = {n pixels | n%} : chiều dài đường kẻ
5. Các thẻ định dạng chữ

Không có thuộc tính
Tag Exampled Output Desciption
<b> <b>Bold text</b> Bold text Chữ đậm
<big> <big>Big text</big> Big text Chữ to
<em> <em>Emphasized text</em> Emphasized text Chữ nhấn mạnh
<i> <i>Italic</i> Italic text Chữ nghiêng
<small> <small>Small text</small> small text Chữ nhỏ
<strong> <strong>Strong text</strong> Strong text Chữ đậm
<sub> Contains _subscript Contains
subscript
Chỉ số dưới
<sub> Contains _superscript C ontains
subscript
Chỉ số trên
6. Thẻ định dạng font chữ
• <font> và </font>
• Thuộc tính :
color: màu chữ
face: tên font chữ
size = {n | +n}: kích thước font chữ, n=1 7
1.3.6 Các ký tự đặc biệt trong HTML
Một vài ký tự tương tự như dấu nhỏ hơn <, có ý nghĩa đặc biệt trong HTML, và
do đó không thể được sử dụng như là chữ. Để hiển thị được dấu nhỏ hơn < trong
HTML chúng ta phải sử dụng những ký tự đặc biệt. Bởi vì dấu < xác định điểm
bắt đầu của một thẻ HTML nên để trình duyệt hiển thị ký tự đó bạn phải thêm
vào code của nó những ký tự đặc biệt.
Một ký tự đặc biệt có 3 phần: Ký hiệu (&), tên của ký tự hoặc một dấu # và
một dãy số và cuối cùng là dấu chấm phẩy ;
Để hiển thị được dấu nhỏ hơn trong HTML, cần viết là &lt; hoặc &#60;
Bảng dưới đây sẽ liệt kê một vài kí tự đặc biệt khác

16
Kết quả Loại Tên của ký tự Số
một khỏang trắng &nbsp; &#160;
< nhỏ hơn &lt; &#60;
> lớn hơn &gt; &#62;
& dấu và &amp; &#38;
" ngoắc kép &quot; &#34;
’ ngoặc đơn &apos; &#39;
§ section &sect; &#167;
c
 copyright &copy; &#169;
R
 registered trademark &reg; &#174;
1.3.7 Các thẻ định dạng danh sách (list)
HTML hỗ trợ những dạng danh sách theo thứ tự, không theo thứ tự và định nghĩa
Danh sách không theo thứ tự
Danh sách không theo thứ tự là một danh sách các mục. Danh sách của các mục
sẽ được đánh dấu bởi những bullet (dạng như gạch đầu dòng nhưng là một vòng
tròn màu đen). Danh sách không theo thứ tự bắt đầu với thẻ <ul>. Mỗi một mục
được bắt đầu với một thẻ <li>.
VD:
<ul>
<li>www.google.com</li>
<li>www.youtube.com</li>
</ul>
Nó sẽ xuất hiện như thế này trong trình duyệt.
• www.google.com
• www.youtube.com
Ở giữa những mục trên có thể chèn thêm chữ vào như là xuống hàng, hình ảnh,
đường liên kết thậm chí là một danh sách khác.

Danh sách theo thứ tự
Danh sách theo thứ tự cũng là một dạng danh sách của các mục. Nhưng những
mục trong đó được đánh dấu bởi số. Một danh sách theo thứ tự bắt đầu với thẻ
<ol>. Mỗi mục được bắt đầu với thẻ <li>.
VD:
<ol>
<li>www.google.com</li>
<li>www.youtube.com</li>
</ol>
Nó sẽ xuất hiện như thế này trong trình duyệt:
1. www.google.com
2. www.youtube.com
Ở giữa những mục trên có thể chèn thêm chữ vào như là xuống hàng, hình ảnh,
đường liên kết thậm chí là một danh sách khác.
17
Danh sách dạng định nghĩa
Một danh sách dạng định nghĩa không phải là danh sách của các hạng mục. Nó là
một danh sách của các thuật ngữ và những lời giải thích của thuật ngữ đó. Một
danh sách định nghĩa bắt đầu với thẻ <dl>. Mỗi một thuật ngữ được bắt đầu
với thẻ <dt>. Mỗi định nghĩa trong danh sách định nghĩa được bắt đầu bằng thẻ
<dd>.
VD:
<dl>
<dt>www.google.com</dt>
<dd>Công cụ tìm kiếm phổ hữu ích</dd>
<dt>www.youtube.com</dt>
<dd>Kênh chia sẻ video hàng đầu</dd>
</dl>
Nó sẽ xuất hiện như sau trong trình duyệt
www.google.com

Công cụ tìm kiếm phổ hữu ích
www.youtube.com
Kênh chia sẻ video hàng đầu
Ở giữa những mục trên có thể chèn thêm chữ vào như là xuống hàng, hình ảnh,
đường liên kết thậm chí là một danh sách khác.
Bảng sau thống kê lại những thẻ danh sách cơ bản:
Tag Mô Tả
<ol> Danh sách có sấp xếp
<ul> Danh sách không sáp xếp
<li> 1 phần tử trong danh sách
<dl>,<dt>,<dd> Kiểu danh sách
<dir> Hết hỗ trợ. Dùng<ul> thay thế
<menu> Hết hỗ trợ. Dùng<ul> thay thế
1.3.8 Hình ảnh trong HTML
Với HTML bạn có thể thể hiện hình ảnh trong tài liệu.
Thẻ Image và thuộc tính src
Trong HTML, hình ảnh được xác định bởi thẻ <img>. Để hiển thị một hình trên
trang web, bạn cần phải sử dụng thuộc tính src. Src là chữ viết tắt của source.
Giá trị của thuộc tính src là địa chỉ URL của hình ảnh mà bạn muốn hiển thị
trên trang web.
Cú pháp để xác định một tấm hình:
<img src="url">
18
Địa chỉ URL chỉ đến điểm mà hình ảnh được lưu trữ. Một file hình có tên là
"images.jpg" được đặt ở thư mục Baocao trong thư mục mẹ documents của ổ C
có địa chỉ là:
C:\Users\Envy15\Documents\Baocao
Hình được hiển thị là:
Trình duyệt sẽ hiển thị hình ảnh nơi mà có thẻ image được chèn trong tài liệu.
Nếu bạn muốn thêm thẻ image vào giữa một đoạn văn, trình duyệt sẽ hiển thị

đoạn văn thứ nhất trước, sau đó đến hình và sau cùng là đoạn văn thứ hai.
Thuộc tính Alt
Thuộc tính alt được sử dụng để xác định chữ thay cho hình. Bởi vì nếu hình đó
không hiện được thì một dòng chữ sẽ xuất hiện để báo cho người đọc biết. Gía
trị của thuộc tính alt là một dòng chữ như sau:
<img src="boat.gif" alt="Big Boat">
Thuộc tính alt báo cho người đọc biết họ không xem được hình gì khi mà trình
duyệt không load được hình đó. Trình duyệt sau đó sẽ hiển thị dòng chữ thay vì
hình ảnh. Nên thêm thuộc tính "alt" vào mỗi tấm hình trên một trang, để tăng
khả năng hiển thị và giúp những người lướt web mà không dùng hình ảnh.
1.3.9 Thẻ tạo bảng
Với HTML cũng có thể tạo bẳng cho trang web của mình.
Bảng
Bảng được định dạng bởi thẻ <table>. Một bảng được chia ra làm nhiều hàng
với thẻ <tr>, môi hàng được chia ra làm nhiều cột dữ liệu với thẻ <td>. Cbữ td
là chữ viết tắt của "table data", là nội dung của cột dữ liệu. Một cột dữ liệu có
thể bao gồm chữ, hình ảnh, danh sách, đoạn vắn, form và bảng v.v.
VD:
19
<table border= " 1 " >
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
Đoạn code trên sẽ hiển thị như thế này trong cửa sổ trình duyệt:

row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2
Bảng và thuộc tính đường biên
Nếu không thiết lập thuộc tính đường biên cho bảng thì bảng sẽ hiển thị mà
không có đường biên. Đôi khi nó có thể hữu dụng nhưng thường bảng được tạo
cần có đường biên.
Để hiển thị đường biên của một bảng, bạn phải sử dụng thuộc tính đường biên.
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
Heading trong bảng
Heading trong một bảng được xác định bằng thẻ <th>
<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
Nó sẽ hiển thị như thế này ở trên trình duyệt

Heading Another Heading
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2
20
Cột trống trong bảng
Cột trống không có nội dung thì không được hiển thị tốt lắm ở hầu hết các trình
duyệt.
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td></td>
</tr>
</table>
Nó sẽ có dạng thế này trên trình duyệt
row 1, cell 1 row 1, cell 2
row 2, cell 1
Tag Mô Tả
<table> Vẽ bảng
<th> hàng đầu của bảng
<tr> hàng trong bảng
<td> ô trong hàng
<caption> nhãn của bảng
<colgroup> nhóm các cột
<col> Định các thuộc tính của cột
<thead> Hàng Đầu bảng
<tbody> Thân của bảng

<tfoot> Hàng cuối bảng
1.3.10 HTML Frames
Với frame bạn có thể hiển thị nhiều trang web trên cùng một cửa sổ trình duyệt.
Mỗi một tài liệu HTML được gọi là một frame, và mỗi frame đều độc lập với
những frame khác.
Những nhược điểm khi sử dụng frame:
• Người làm web phải theo dõi nhiều tài liệu HTML
• Khó có thể in ấn toàn bộ trang web.
Thẻ frameset
Thẻ <frameset> xác định bạn sẽ chia cửa sổ trình duyệt thành những frame như
thế nào. Môi một frame xác định một tập hợp các hàng hoặc cột. Giá trị của
hàng hoặc cột chỉ ra diện tích của màn hình mà frame đó sẽ chiếm.
21
1.3.11 Thẻ Frame
Thẻ <frame> xác định tài liệu HTML nào sẽ được chèn vào mỗi frame.
Ở ví dụ dưới đây bạn có một frameset với hai cột. Cột thứ nhất được thiết lập là
chiếm 25% độ rộng của cửa sổ trình duyệt. Cột thứ hai được thiết lập sẽ chiếm
75% độ rộng của cửa sổ trình duyệt. Tài liệu html tên là "frame_a.htm" được
chèn vào cột thứ nhất, và "frame_b.htm" được chèn vào cột thứ hai.
< frameset cols = "25%, 75% " >
< frame src = " frame_a.htm " >
< frame src = " frame_b.htm " >
< /frameset >
1.3.12 HTML form và trường nhập liệu.
HTML form được sử dụng để chọn những dữ liệu nhập vào khác nhau của người
dùng.
Form
Một form là một vùng mà nó bao gồm những thành phần của form. Thành phần
của form là những thành phần cho phép người dùng có thể điền thông tin như là
trường chữ, menu thả xuống, nút radio, và các hộp kiểm vào một form.

Một form được xác định bởi thẻ <form>
<form>
<input>
<input>
</form>
Nhập liệu
Thẻ form được sử dụng nhiều nhất là thẻ <input>. Loại dữ liệu nhập vào sẽ được
xác định bởi thuộc tính của nó. Những trường nhập liệu được sử dụng nhiều nhất
được giải thích ở dưới đây.
Text field
Text field được sử dụng khi bạn muốn người dùng đánh chữ, số v.v vào một
form.
VD:
<form>
First name:
<input type="text" name="firstname">
<br>
Last name:
<input type="text" name="lastname">
</form>
22
Nút radio
Nút radio được sử dụng khi bạn muốn người dùng chọn một trong những lựa chọn
bạn đưa ra.
<form>
<input type="radio" name="giới tính" value="male"> Male
<br>
<input type="radio" name="giới tính" value="female"> Female
</form>
Hộp kiểm

Hộp kiểm được sử dụng khi bạn muốn người chọn có thể chọn nhiều lựa chọn hơn.
<form>
<input type="checkbox" name="bike">
I have a bike
<br>
<input type="checkbox" name="car">
I have a car
</form>
Thuộc tính hoạt động cùa form và nút Submit.
Khi người dùng nhấp chuột vào nút "submit", nội dung của form đó sẽ được gửi
đến một tệp tin khác. Thuộct ính hoạt động của form xác định tên của file mà
nó sẽ gửi nội dung đến. Tệp tin đó được xác định trong thuộc tính hoạt động của
form và thường thì nó sẽ có những hành động với dữ liệu nó nhận được.
<form name="input" action="html_form_action.asp" method="get">
Username:
<input type="text" name="user">
<input type="submit" value="Submit">
</form>
Khi bạn gõ tên vào trường chữ ở trên và nhấp vào nút Submit, thông tin đó sẽ
gửi vào một trang gọi là "html_form_action.asp". Trang đó sẽ chỉ cho ta thấy
dữ liệu nhận được.
Ta có bảng sau:
23
Tag Mô Tả
<form> Kiểu form để nhập thông tin
<input> Một ô nhập liệu
<textarea> Vùng nhập liệu có nhiều hàng
<label> Nhãn
<fieldset> Nhóm các vùng nhập với nhau
<legend> nhãn của 1 fieldset

<select> Danh sách chọn
<optgroup> nhóm các phần tử trong danh sách chọn
<option> 1 phần tử trong danh sách chọn
<button> Nút bấm
<isindex> Hết hỗ trợ. Dùng <input> thay thế
1.3.13 Backgrounds
Thẻ <body> có hai thuộc tính nơi mà bạn có thể chọn loại background cho mình.
Background có thể là một màu hoặc là một tấm hình.
Bgcolor
Thuộc tính bgcolor thiết lập hình nền là một màu. Giá trị của thuộc tính này là
hệ số hexadecimal, một giá trị màu RGB hoặc một tên màu
<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">
Dòng code trên cùng thiết lập hình nền thành màu đen.
Background
Thuộc tính background thiết lập một tấm hình làm hình nền. Giá trị của thuộc
tính này là địa chỉ URL của tấm hình muốn sử dụng. Nếu một tấm hình nhở hơn
so với cửa sổ trình duyệt, tấm hình đó sẽ tự nhân lên đến khi nào nó che phủ hết
cửa sổ trình duyệt.
<body background="clouds.gif">
<body background=" />Địa chỉ URL có thể là tương đối như là ở dòng code thứ nhất hoặc tuyệt đối như
là ở dòng thứ 2.
* NOTE: nếu muốn sử dụng hình nền, nên nhớ rằng:
• Hình nền đó có làm giảm tốc độ load của trang nhiều không? thường thì
hình được chọn làm hình nền không nên vượt quá 10K.
• Hình nền đó có hợp với các hình khác trên trang không?
• Hình nền đó có hợp với chữ không?
24