Nghiên cứu về web tĩnh với các ngôn ngữ lập trình hỗ trợ như HTML, JavaSript và CSS
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (182.79 KB, 36 trang )
Lời mở đầu
Hiện nay, internet đã qua quen thuộc với chúng ta, và một
trong những ứng dụng hàng đầu của internet là web. Web là nơi
để chia sẻ thông tin về mọi mặt, có thể nói web là nền tảng để
phát triển internet. Ngày càng có nhiều người yêu thích công
việc tạo ra các trang web, đây là một công việc đòi hỏi bạn ngoài
kiến thức chuyên môn còn phải có sự kiên nhẫn, tính thẩm mỹ. . .
Nói chung việc học lập trình web không khó, chỉ đòi hỏi bạn tập
trung và có tính sáng tạo. Xét trên phương diện nhập môn có
thể nói: “Người lập trình như 1 nhà thám hiểm, và các kiến thức
về web như 1 hang động để ta vào thám hiểm”, vì vậy tôi cũng
muốn trở thành 1 nhà thám hiểm, để tìm hiểu sự hiền bí của
các trang web.
Có rất nhiều các ngôn ngữ dùng để lập trinh web, nhưng xét về
phương diện nhập môn, ta chỉ nghiên cứu về web tĩnh với các
ngôn ngữ lập trình hỗ trợ như HTML, JavaSript, và CSS. Ngoài
các ngôn ngữ trên ta cũng cần 1 phần mềm diễn dịch, và theo
tôi nên dùng notepad++, tuy không hổ trợ quá nhiều cho việc
lập trình web nhưng nó có đủ các yêu cầu cần có.
Sau một thời gian nghiên cứu và tìm hiểu, tôi làm bài thu hoạch
này để tổng kết những gì mình đã có được. Tôi xin chân thành
cảm ơn giảng viên Nguyễn Ngọc Dũng và giảng viên Lê Thanh
Hương đã giúp đỡ và hướng dẫn tôi làm bài báo cáo này.
Tôi xin chân thành cảm ơn
1
NỘI DUNG
PHẦN 1 :HTML
1.Định nghĩa
-HTML (Hyper Text Markup Language): ngôn ngữ đánh dấu
siêu văn bản
-Là một ngôn ngữ để xây dựng một trang web
-Một trang web thông thường gồm có 2 thành phần chính:
-Dữ liệu của trang web(văn bản, âm thanh, hình ảnh. . . )
-Các thẻ(tag) HTML dùng để định dạng mô tả cách thức các
dữ liệu trên hiển thị trên trình duyệt
2.Các tag thông dụng
Các tag mở đầu :
-<html>. . . </html> : Định nghĩa phạm vi của văn bản
-<head>. . . </head> : Định nghĩa các mô tả về trang
-<title>. . . </title> : Mô tả tiêu đề trang web
-<body>. . . </body>: Xác định vùng thân của trang web,nơi
chứa các thông tin
Các tag xử lý văn bản :
Các thẻ định dạng khối văn bản
-Tiêu đề(Heading): <h1>,<h2>,<h3>,<h4>,<h5>,<h6>
-Đoạn văn bản(Paragraph): <p>
-Danh sách (List Items): <li>
-Đường kẻ ngang(Horizontal Rules): <hr>
Các thẻ định dạng chuỗi văn bản
-Định dang chữ : <em>, <i>, <b> ,<b> ,<font>
-Tạo siêu liên kết : <a>
-Xuống dòng : <hr>
Các thẻ định dạng ký tự
-<b>. . . </b>,<strong>. . . </strong> : In chữ đậm
-<i>. . . </i> ,<em>. . . </em>,<dfn> : In chữ nghiêng
-<u>. . . </u> :In chữ gạch chân
2
-<s>. . . </s>,<strike>. . . </strike> : In chữ bị gạch ngang
-<big>. . . </big> : In chữ lớn hơn bình thường
-<smail>. . . </smail> : In chữ nhỏ hơn bình thường
-<sup>. . . </sup> : Chỉ số trên ( SuperScript )
-<sub>. . . </sup> : Chỉ số dưới(SuperScript)
-<basefont> : Định nghĩa kích thước font chữ đượcsử dụng cho
đến hết văn bản. Thẻ nàychỉ có tham số size. Thẻ này không có
kết thúc
-<font>. . . </font> :chọn kiểu chữ hiển thị. Có hai tham số Size
và color.
Các tag hình ảnh
-<img> : tag hinh anh co các thuộc tính
-Src : Đường dẫn dến file hình ảnh
-Alt : chú thích cho hình ảnh
-Position : Top Bottom, Middle
-Border : Độ dày nét viền quang ảnh
-<body background=’Image Path’
Các tag âm thanh
<bgsound> : Không có tag đóng, có các thuộc tính sau :
-Src : Đường dẫn đến file âm thanh
-Loop : Số lần lặp
-Thường đặt trong tag <head> của trang web
Các thẻ định dạng danh sách
-<ul> : Danh sách không có sắp xếp
-<ol> : Danh sách có sắp xếp
-<menu> : Danh sách thực đơn
-<dir> : Danh sách phân cấp
Thẻ tạo liên kết
<a Href = url
Name=name
Tabindex= n
Title = title
Target =_blank/_self>
3
Siêu văn bản
</a>
Thẻ tạo kết nối mailto
<address>
Mọi chi tiêt xin liên hệ với chúng tôi qua
<a href=mailto:>
WEBMASTER</a></address>
Thẻ marquee : dùng để tạo hiệu ứng chữ chạy trên màn hình
trình duyệt
< marquee
Behavior=alternate|scroll|slide
Direction=Down|left| Right|up
Loop=string
Scroollamount=long
Scroolldelay=long> dòng chữ cần chạy
</marquee>
Thẻ tự động refresh/redirect trang web
<head>
<meta http-equiv=”refresh”
Content=”t”; url=”url”>
</head>
4
PHẦN 2 JAVASCRIPT
1.Định nghĩa
-Script là ngôn ngữ dạng thông dịch
-Cho phép Web tương tác với người dùng
-Các ngôn ngữ thông dụng
-Javascipt
-Jscipt
-VBScript
-PHP,CGI
-web động ->Netscape ->Scipt Languae : LiveScipt=>Javascipt
-javascipt là ngôn ngữ dự trên đối tượng : math, document,windows,. . .
-JavaScipt không phải là ngôn ngữ hướng đối tượng như C++,
Java. . .
-thiết kế độc lập với hệ điều hành
2.Vị trí của JavaScript trong HTML
-Sử dụng các câu lệnh và các hàm trong cặp thẻ : <script>. . . </script>
-Đặt giữa tag <head> và </head> : đoạn script sẽ thực thi ngay
khi trang web được mở
-Đặt giữa tag <body> và </body> : đoạn script trong phần
body được thực thi khi trang web đang mở
-Số lượng đoạn script không hạn chế.
-Xử dụng một file nguồn JavaScipt
Cú pháp
<SCRIPT SRC="file_name.js">
....
</SCRIPT>
3.Các lệnh trong JavaScript
3.1.Lệnh điều kiện
Câu lệnh điều kiện cho phép Chương trình ra quyết định và thực
hiện công việc nào đấy dựa trên kết quả của quyết định. Trong
JavaScript, câu lệnh điều kiện là:
if ... else
5
Câu lệnh này cho phép bạn kiểm tra điều kiện và thực hiện một
nhóm lệnh nào đấy dựa trên kết quả của điều kiện vừa kiểm tra.
Nhóm lệnh sauelse không bắt buộc phải có, nó cho phép chỉ ra
nhóm lệnh phải thực hiện nếu điều kiện là sai.
Cú pháp
if ( <điều kiện> )
//Các câu lệnh với điều kiện đúng
else
//Các câu lệnh với điều kiện sai
Ví dụ:
if (x==10)
document.write(“x bằng 10, đặt lại x bằng 0.”);
x = 0;
else
document.write(“x không bằng 10.”);
3.2. Câu lệnh lặp
Câu lệnh lặp thể hiện việc lặp đi lặp lại một đoạn mã cho đến
khi biểu thức điều kiện được đánh giá là đúng. JavaScipt cung
cấp hai kiểu câu lệnh lặp:
for loop
while loop
a.Vòng lặp for
Vòng lặp for thiết lập một biểu thức khởi đầu -initExpr, sau đó
lặp một đoạn mã cho đến khi biểu thức<điều kiện> được đánh
giá là đúng. Sau khi kết thúc mỗi vòng lặp, biểu thức in cr Exp
r được đánh giá lại.
Cú pháp:
For (initExpr; <điều kiện> ; incrExpr)
6
//Các lệnh được thực hiện trong khi lặp
Ví dụ:
<HTML> <HEAD>
<TITLE>For loop Example </TITLE>
<SCRIPT LANGUAGE= "JavaScript">
for (x=1; x<=10 ; x++)
y=x*25;
document.write("x ="+ x +";y= "+ y + "<BR>");
</SCRIPT
</HEAD>
<BODY></BODY>
</HTML>
Vòng lặp này sẽ thực hiện khối mã lệnh cho đến khi x>10.
b.WHILE
Vòng lặp while lặp khối lệnh chừng nào <điều kiện> còn được
đánh giá là đúng
Cú pháp:
while (<điều kiện>)
//Các câu lệnh thực hiện trong khi lặp
Ví dụ:
x=1;
while (x<=10)
y=x*25;
document.write("x="+x +"; y = "+ y + "<BR>");
x++;
Kết quả của ví dụ này giống như ví dụ trước.
3.3. Các câu lệnh thao tác trên đối tượng
JavaScript là một ngôn ngữ dựa trên đối tượng, do đó nó có một
7
số câu lệnh làm việc với các đối tượng.
a.For. . . in
Câu lệnh này được sử dụng để lặp tất cả các thuộc tính (prop-
erties) của một đối tượng. Tên biến có thể là một giá trị
bất kỳ, chỉ cần thiết khi bạn sử dụng các thuộc tính trong vòng
lặp. Ví dụ sau sẽ minh hoạ điều nà
y Cú pháp
for (<variable> in <object>)
//Các câu lệnh
Ví dụ sau sẽ lấy ra tất cả các thuộc tính của đối tượng Window
và in ra tên của mỗi thuộc tính
<HTML>
<HEAD>
<TITLE>For in Example </TITLE>
<SCRIPT LANGUAGE= "JavaScript">
document.write("The properties of the Window object are: <BR>");
for (var x in window)
document.write(" "+ x + ", ");
</SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
b.New
Biến New được thực hiện để tạo ra một thể hiện mới của một
đối tượng
Cú pháp
objectvar = new object
t
ype(param1[, param2] . . . [, paramN])
8
Ví dụ sau tạo đối tượng person có các thuộc tính firstname,
lastname, age, sex. Chú ý rằng từ khoá this được sử dụng để chỉ
đối tượng trong hàm person. Sau đó ba thể hiện của đối tượng
person được tạo bằng lệnh New
<html>
<head>
<title>New example</title>
<script languge=”javascript”
function person(first_name, last_name, age, sex)
this.first_name=first
n
ame;
this.last_name = last
n
ame;
this.age = age;
this.sex = sex;
person1 = newperson(”T huy”, ”DauBich”, ”23”, ”F emale”);
person2 = newperson(”Chung”, ”NguyenBao”, ”24”, ”Male”);
person3 = newperson(”Binh”, ”NguyenNhat”, ”24”, ”Male”);
person4 = newperson(”Hon”, ”ŒV n”, ”24”, ”Male”);
document.write(”1.”+person1.last
n
ame+””+person1.first
n
ame+
” < BR > ”);
document.write(”2.”+person2.last
n
ame+””+person2.first
n
ame+
” < BR > ”);
document.write(”3.”+person3.last
n
ame+””+person3.first
n
ame+
” < BR > ”);
document.write(”4.”+person4.last
n
ame+””+person4.first
n
ame+
” < BR > ”);
< /script >
< /head >
< body >
< /body >
< /html >
c.This
Từ khoá this được sử dụng để chỉ đối tượng hiện thời. Đối tượng
9
được gọi thờng là đối tượng hiện thời trong Phương thức hoặc
trong hàm. Cú pháp
This [.property]
Có thể xem ví dụ của lệnh new.
d.With
Lệnh này được sử dụng để thiết lập đối tượng ngầm định cho
một nhóm các lệnh, bạn có thể sử dụng các thuộc tính mà không
đề cập đến đối tượng.
Cú pháp
with (object)
// statement
4.Các đối tượng trong JavaScript
-Đối tượng navigator
-Đối tượng window
-Đối tượng location
-Đối tượng frame
-Đối tượng document
-Đối tượng anchors
-Đối tượng forms
-Đối tượng history
-Đối tượng links
-Đối tượng math
-Đối tượng date
-Đối tượng string
-Các phần tử của đối tượng form
-Thuộc tính type
-Phần tử button
-Phần tử checkbox
-Phần tử File Upload
-Phần tử hidden
-Phần tử Password
-Phần tử radio
-Phần tử reset
10
-Phần tử select
PHẦN 3 : CSS
1.Giới thiệu CSS
1.1. Mở đầu
Trong lĩnh vực xây dựng, chúng ta có trang trí nội thất; trong
lĩnh vực thẩm mỹ - làm đẹp, chúng ta có kỹ thuật make-up; còn
trong lĩnh vực thiết kế web chúng ta có CSS. CSS (Cascading
Style Sheets) tạm dịch là tờ mẫu theo Style Sheets) là một ngôn
ngữ quy định cách trình bày cho các tài liệu viết bằng HTML,
XHTML, XML, SVG, hay UML,. . .
-Dùng để mô tả cách hiển thị các thành phần trên trang web
-Sử dụng tương tự như dạng TEMPLATE
-Có thể sử dụng lại cho các trang web khác
-Có thể thay đổi thuộc tính từng trang hoặc cả site nhanh chóng
-CSS được lưu trong:
-Bảng kiểu nhúng trong file HTML
-Bảng kiểu ngoại trú trong File bảng kiểu riêng có đuôi *.css
1.2. Ưu nhược điểm của CSS
a.Ưu điểm :
-Kiểm soát bố cục trang, kỹ thuật thiết kế phông và dạng chữ
tốt hơn
-Dễ duy trì hoạt động của site hơn
-Thông tin kiểu được tách ra khỏi cấu trúc site
b.Khuyết điểm :
Không được hỗ trợ rộng rãi, hoặc hỗ trợ không hết
1.3.Quy tắc tạo CSS :
Cú pháp :
Selector{property: value;}
Trong đó
Selector: Các đối tượng mà chúng ta sẽ áp dụng các thuộc tính
11
trình bày. Nó là các tag HTML, class hay id (chúng ta sẽ học về
2 thành phần này ở bài học sau). Ví dụ: body, h2, p, img, title,
content, .username,. . .
property: Chính là các thuộc tính quy định cách trình bày. Ví
dụ: background-color, font-family, color, padding, margin,. . .
value: Giá trị của thuộc tính. Ví dụ: như ví dụ trên value chính
là FFF dùng để định màu trắng cho nền trang.
2.Vị trí đặt CSS:
Cách 1: Nội tuyến (kiểu thuộc tính)
Đây là một phương pháp nguyên thủy nhất để nhúng CSS vào
một tài liệu HTML bằng cách nhúng vào từng thẻ HTML muốn
áp dụng. Và dĩ nhiên trong trường hợp này chúng ta sẽ không
cần selector trong cú pháp.
Ở ví dụ sau chúng ta sẽ tiến hành định nền màu trắng cho trang
và màu chữ xanh lá cho đoạn văn bản như sau:
<html>
<head> <title>Ví dụ</title> </head>
<body style=”background-color=#FFF;”>
<p style=”color:green”> Welcome To WallPearl’s Blog </p>
</body> </html>
Cách 2: Bên trong (thẻ style)
Thật ra nếu nhìn kỹ chúng ta cũng nhận ra đây chỉ là một
phương cách thay thế cách thứ nhất bằng cách rút tất cả các
thuộc tính CSS vào trong thẻ style .
Cách 3: Bên ngoài (liên kết với một file CSS bên ngoài)
Tương tự như cách 2 nhưng thay vì đặt tất cả các mã CSS trong
thẻ style chúng ta sẽ đưa chúng vào trong một file CSS (có phần
mở rộng .css) bên ngoài và liên kết nó vào trang web bằng thuộc
tính href trong thẻ link. Đây là cách làm được khuyến cáo, nó
đặc biệt hữu ích cho việc đồng bộ hay bảo trì một website lớn
sử dụng cùng một kiểu mẫu. Đầu tiên chúng ta sẽ tạo ra một
file vidu.html có nội dung như sau:
12
<html> <head>
<title>Ví dụ</title>
<link rel=”stylesheet” type=”text/css” href=”style.css” /> </head>
<body> <p>Welcome To WallPearl’s Blog </p> </body>
</html>
Sau đó hãy tạo một file style.css với nội dung:
body { background-color:#FFF }
p { color:#00FF00 }
2.Các định dạng trong CSS
2.1. Màu nền (thuộc tính background-color):
Thuộc tính background-color giúp định màu nền cho một thành
phần trên trang web. Các giá trị mã màu của background-color
cũng giống như color nhưng có thêm giá trị transparent để tạo
nền trong suốt.
Ví dụ :
body { background-color:cyan }
h1 { background-color:red }
h2 { background-color:orange}
2.2. Ảnh nền (thuộc tính background-image):
Việc sử dụng ảnh nền giúp trang web trông sinh động và bắt
mắt hơn. Để chèn ảnh nền vào một thành phần trên trang web
chúng ta sử dụng thuộc tính background-image.
Bây giờ chúng ta sẽ cùng làm một ví dụ minh họa để xem thuộc
tính background-image sẽ hoạt động ra sao. Đầu tiên hãy tìm
một tấm ảnh mà bạn thích, ở đây Pearl sẽ lấy tấm ảnh logo của
blog Pearl Sau đó, chúng ta sẽ viết CSS để đặt logo này làm ảnh
nền trang web như sau:
body { background-image:url(logo.png)}
h1 { background-color:red }
h2 { background-color:orange }
p { background-color: FDC689 }
2.3. Lặp lại ảnh nền (thuộc tính background-repeat):
13
Nếu sử dụng một ảnh có kích thước quá nhỏ để làm nền cho một
đối tượng lớn hơn thì theo mặc định trình duyệt sẽ lặp lại ảnh
nền để phủ kín không gian còn thừa. Thuộc tính background-
repeat cung cấp cho chúng ta các điều khiển giúp kiểm soát
trình trạng lặp lại của ảnh nền. Thuộc tính này có 4 giá trị:
+ repeat-x: Chỉ lặp lại ảnh theo phương ngang. + repeat-y: Chỉ
lặp lại ảnh theo phương dọc.
+ repeat: Lặp lại ảnh theo cả 2 phương, đây là giá trị mặc định.
+ no-repeat: Không lặp lại ảnh.
2.4. Khóa ảnh nền (thuộc tính background-attachment):
Background-attachment là một thuộc tính cho phép bạn xác
định tính cố định của ảnh nền so với với nội dung trang web.
Thuộc tính này có 2 giá trị: + scroll: Ảnh nền sẽ cuộn cùng nội
dung trang web, đây là giá trị mặc định. + fixed: Cố định ảnh
nền so với nội dung trang web. Khi áp dụng giá trị này, ảnh nền
sẽ đứng yên khi bạn đang cuộn trang web.
2.5. Định vị ảnh nền (thuộc tính background-position):
Theo mặc định ảnh nền khi được chèn sẽ nằm ở góc trên, bên
trái màn hình. Tuy nhiên với thuộc tính background-position
bạn sẽ có thể đặt ảnh nền ở bất cứ vị trí nào (trong không gian
của thành phần mà nó làm nền).
Background-position sẽ dùng một cặp 2 giá trị để biểu diễn tọa
độ đặt ảnh nền. Có khá nhiều kiểu giá trị cho thuộc tính position.
Như đơn vị chính xác như centimeters, pixels, inches,. . . hay các
đơn vị qui đổi như %, hoặc các vị trí đặt biệt như top, bottom,
left, right.
3.Font Chữ
Chúng ta đã được tìm hiểu về cách định dạng màu chữ bằng
CSS.Trong bài này, chúng ta sẽ tiếp tục tìm hiểu thêm về các
thuộc tính CSS liên quan tới font chữ của các thành phần trong
một trang web.
3.1. Thuộc tính font-family:
Thuộc tính font-family có công dụng định nghĩa một danh sách
14
