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
-<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
-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
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
<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
-Đố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,
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>
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:
Copyright: Tài liệu đại học ©