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
Trang 1về web như 1 hang động để ta vào thám hiểm”, vì vậy tôi cũngmuốn trở thành 1 nhà thám hiểm, để tìm hiểu sự hiền bí củacá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ácngôn ngữ lập trình hỗ trợ như HTML, JavaSript, và CSS Ngoàicác ngôn ngữ trên ta cũng cần 1 phần mềm diễn dịch, và theotôi nên dùng notepad++, tuy không hổ trợ quá nhiều cho việclậ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ạchnày để tổng kết những gì mình đã có được Tôi xin chân thànhcảm ơn giảng viên Nguyễn Ngọc Dũng và giảng viên Lê ThanhHươ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
Trang 2NỘI DUNG PHẦN 1 :HTML
1.Định nghĩa
-HTML (Hyper Text Markup Language): ngôn ngữ đánh dấusiê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ơichứ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
Trang 3-<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
-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
-<menu> : Danh sách thực đơn
-<dir> : Danh sách phân cấp
Trang 5PHẦ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
-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â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
Trang 6Câu lệnh này cho phép bạn kiểm tra điều kiện và thực hiện mộtnhó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ỉ ranhóm lệnh phải thực hiện nếu điều kiện là sai.
r được đánh giá lại
Cú pháp:
For (initExpr; <điều kiện> ; incrExpr)
Trang 7//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">
while (<điều kiện>)
//Các câu lệnh thực hiện trong khi lặp
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
Trang 8số câu lệnh làm việc với các đối tượng.
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)
Trang 9Ví 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ượngperson được tạo bằng lệnh New
person1 = newperson(”T huy”, ”DauBich”, ”23”, ”F emale”);
person2 = newperson(”Chung”, ”N guyenBao”, ”24”, ”M ale”);person3 = newperson(”Binh”, ”N guyenN hat”, ”24”, ”M ale”);person4 = newperson(”Hon”, ”ŒV n”, ”24”, ”M ale”);
Trang 10được gọi thờng là đối tượng hiện thời trong Phương thức hoặctrong hàm Cú pháp
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
Trang 11-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 *.css1.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
Trang 12trì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àomộ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ôngcầ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:
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 trongthẻ 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ộctí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ộtfile vidu.html có nội dung như sau:
Trang 13<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>
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ànhphần trên trang web Các giá trị mã màu của background-colorcũng giống như color nhưng có thêm giá trị transparent để tạonền trong suốt
Bây giờ chúng ta sẽ cùng làm một ví dụ minh họa để xem thuộctính background-image sẽ hoạt động ra sao Đầu tiên hãy tìmmột tấm ảnh mà bạn thích, ở đây Pearl sẽ lấy tấm ảnh logo củablog Pearl Sau đó, chúng ta sẽ viết CSS để đặt logo này làm ảnhnền trang web như sau:
Trang 14Nế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 ảnhnề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áttrì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ộidung trang web, đây là giá trị mặc định + fixed: Cố định ảnhnề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êntrái màn hình Tuy nhiên với thuộc tính background-positionbạn sẽ có thể đặt ảnh nền ở bất cứ vị trí nào (trong không giancủ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ằngCSS.Trong bài này, chúng ta sẽ tiếp tục tìm hiểu thêm về cácthuộc tính CSS liên quan tới font chữ của các thành phần trongmộ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
Trang 15ưu tiên các font sẽ được dùng để hiển thị một thành phần trangweb Theo đó,thì font đầu tiên được liệt kê trong danh sách sẽđược dùng để hiển thị trang web Nếu như trên máy tính truycập chưa cài đặt font này thì font thứ hai trong danh sách sẽđược ưu tiên cho đến khi có một font phù hợp Có hai loạitên font được dùng để chỉ định trong font-family: family-names
và generic families + Family-names: Tên cụ thể của một font
Ví dụ: Arial, Verdana, Tohama, + Generic families: Tên củamột họ gồm nhiều font Ví dụ: sans-serif, serif, Khi lên danhsách font dùng để hiển thị một trang web bạn sẽ chọn nhữngfont mong muốn trang web sẽ được hiển thị để đặt ở các vị trí
ưu tiên Tuy nhiên, có thể những font này sẽ không thông dụnglắm nên bạn cũng cần chỉ định thêm một số font thông dụng dựphần như Arial, Tohama hay Times New Roman và bạn cũngđược đề nghị đặt vào danh sách font của mình một generic fam-ilies (thường thì nó sẽ có độ ưu tiên thấp nhất) Thực hiện theocách này thì sẽ đảm bảo trang web của bạn có thể hiển thị tốttrên bất kỳ hệ thống nào Ví dụ sau chúng ta sẽ viết CSS đểquy định font chữ dùng cho cả trang web là Times New Ro-man, Tohama, sans-serif, và font chữ dùng để hiển thị các tiêu
đề h1, h2, h3 sẽ là Arial, Verdana và các font họ serif body {font-family:”Times New Roman”,Tohama,sans-serif } h1, h2, h3{ font-family:arial,verdana,serif }
3.2 Thuộc tính font-style:
Thuộc tính font-style định nghĩa việc áp dụng các kiểu in thường(normal), in nghiêng (italic) hay xiên (oblique) lên các thànhphần trang web Trong ví dụ bên dưới chúng ta sẽ thử thực hiện
áp dụng kiểu in nghiêng cho thành phần h1 và kiểu xiên cho h2.h1 { font-style:italic; } h2 { font-style:oblique; }
3.3 Thuộc tính font-variant:
Thuộc tính font-variant được dùng để chọn giữa chế độ bìnhthường và small-caps của một font chữ Một font small-caps làmột font sử dụng chữ in hoa có kích cỡ nhỏ hơn in hoa chuẩn
Trang 16để thay thế những chữ in thường Nếu như font chữ dùng đểhiển thị không có sẵn font small-caps thì trình duyệt sẽ hiệnchữ in hoa để thay thế Trong ví dụ sau chúng ta sẽ sử dụngkiểu small-caps cho phần h1
h1 { font-variant:small-caps }
3.4 Thuộc tính font-weight:
Thuộc tính font-weight mô tả cách thức thể hiện của font chữ là
ở dạng bình thường (normal) hay in đậm (bold) Ngoài ra, một
số trình duyệt cũng hỗ trợ mô tả độ in đậm bằng các con số từ
Ví dụ trang web của bạn phục vụ chủ yếu là những người già,thị lực kém hay những người dùng sử dụng các màn hình máytính kém chất lượng thì bạn có thể cân nhấc sử dụng các đơn vịqui đổi như em hay % Như vậy sẽ đảm bảo font chữ trên trangweb của bạn luôn ở kích thước phù hợp Ở ví dụ sau trang web
sẽ có kích cỡ font là 20px, h1 là 3em = 3 x 20 = 60px, h2 là2em = 40px body { font-size:20px } h1 { font-size:3em } h2 {font-size:2em}
4.Text
Định dạng và thêm vào các kiểu định dạng đặc biệt cho phầnnội dung một trang web là một vấn đề quan trọng cho bất cứnhà thiết kế web nào Như đã nói, ở bài học này chúng ta sẽđược tìm hiểu về các thuộc tính CSS về định dạng văn bản.4.1 Màu chữ (thuộc tính color):
Để định màu chữ cho một thành phần nào đó trên trang webchúng ta sử dụng thuộc tính color Giá trị của thuộc tính này là
Trang 17các giá trị màu CSS hỗ trợ Ví dụ sau chúng ta sẽ viết CSS đểđịnh màu chữ chung cho một trang web là đen, cho tiêu đề h1màu xanh da trời, cho tiêu đề h2 màu xanh lá chúng ta sẽ làmnhư body { color:000 } h1 { color:0000FF } h2 { color:00FF00}
4.2 Thuộc tính text-indent :
Thuộc tính text-indent cung cấp khả năng tạo ra khoảng thụtđầu dòng cho dòng đầu tiên trong đoạn văn bản Giá trị thuộctính này là các đơn vị đo cơ bản dùng trong CSS Trong ví dụsau chúng ta sẽ định dạng thụt đầu dòng một khoảng 30px chodòng văn bản đầu tiên trong mỗi đoạn văn bản đối với các thànhphần <p> p { text-indent:30px }
4.3 Thuộc tính text-align :
Thuộc tính text-align giúp bạn thêm các canh chỉnh văn bảncho các thành phần trong trang web Cũng tương tự như cáclựa chọn canh chỉnh văn bản trong các trình soạn thảo văn bảnthông dụng như MS Word, thuộc tính này có tất cả 4 giá trị: left (canh trái – mặc định), right (canh phải), center (canhgiữa) và justify (canh đều) Trong ví dụ sau chúng ta sẽ thựchiện canh phải các thành phần h1, h2 và canh đều đối với thànhphần <p> h1, h2 { text-align:right } p { text-align:justify}4.4 Thuộc tính letter-spacing:
Thuộc tính letter-spacing được dùng để định khoảng cách giữacác ký tự trong một đoạn văn bản Muốn định giữa các ký
tự trong thành phần h1,h2 là 7px và thành phần <p> là 5pxchúng ta sẽ viết CSS sau: h1, h2 { letter-spacing:7px } p{ letter-spacing:5px}
Trang 184.6 Thuộc tính text-transform:
Text-transform là thuộc tính qui định chế độ in hoa hay inthường của văn bản mà không phụ thuộc vào văn bản gốc trênHTML Thuộc tính này có tất cả 4 giá trị: uppercase (in hoa),lowercase (in thường), capitalize (in hoa ở ký tự đầu tiên trongmỗi từ) và none (không áp dụng hiệu ứng – mặc định) Trong
ví dụ dưới đây chúng ta sẽ định dạng cho thành phần h1 là inhoa, h2 là in hoa đầu mỗi ký tự h1 { text-transform:uppercase} h2 { text-transform:capitalize }
5 For Links
Một thành phần rất quan trọng trong mọi website chính là liênkết.Cũng như một đối tượng văn bản thông thường, chúng tahoàn toàn có thể áp dụng các thuộc tính định dạng đã học ở 2bài trước như định font chữ, gạch chân, màu chữ, cho một liênkết Hơn nữa, CSS còn cung cấp một điều khiển đặc biệt đượcgọi là pseudo-classes Pseudo-classes cho phép bạn xác định cáchiệu ứng định dạng cho một đối tượng liên kết ở một trạng tháixác định như khi liên kết chưa được thăm (a:link), khi rê chuộtlên liên kết (a:hover), khi liên kết được thăm (a:visited) hay khiliên kết đang được kích hoạt – đang giữ nhấn chuột (a:active).Với điều khiển pseudo-classes cùng với các thuộc tính CSS đãhọc chắc chắn sẽ mang lại rất nhiều ý tưởng về trang trí liên kếtcho trang web Sau đây chúng ta sẽ tiến hành một số ví dụ đểtìm hiểu thêm về các khả năng trang trí cho một liên kết dựatrên pseudo-classes Ví dụ 1: Ví dụ này chúng ta sẽ áp dụng 4màu sắc khác nhau cho từng trạng thái liên kết: các liên kết chưathăm có màu xanh lá; các liên kết mouse over sẽ có màu đỏ tươi;các liên kết đã thăm sẽ có màu đỏ và các liên kết đang kích hoạt
có màu tím a:link { color:00FF00 } a:hover { color:FF00FF }a:visited { color:FF0000 } a:active { color: 662D91 }
Ví dụ 2: Tạo các hiệu ứng tương ứng với trình trạng liên kết: