Chương 1: Giới thiệu chung về thiết kế Web

1.1. Website là gì? Chúng ta có thể hiểu website tương tự như quảng cáo trên các trang vàng, nhưng có điểm khác ở chỗ nó cho phép người truy cập có thể trực tiếp thực hiện nhiều việc trên website như giao tiếp, trao đổi thông tin với người chủ website và với những người truy cập khác, tìm kiếm, mua bán vv... chứ không phải chỉ xem như quảng cáo thông thường. Hàng triệu người trên khắp thế giới có thể truy cập website - nhìn thấy nó chứ không giới hạn trong phạm vi lãnh thổ nào cả. Đối với một doanh nghiệp, website là một cửa hàng ảo với hàng hoá và dịch vụ được giới thiệu và rao bán trên thị trường toàn cầu. Cửa hàng đó mở cửa 24 giờ một ngày, 7 ngày một tuần, quanh năm, cho phép khách hàng của bạn tìm kiếm thông tin, xem, mua sản phẩm và dịch vụ của bạn bất cứ lúc nào họ muốn. Khi bạn xem thông tin trên một trang Web thì trang Web đó đến từ một Website, có thể là một Website đến từ Mỹ, từ Việt Nam, hay bất cứ nơi nào khác trên thế giới. Website có tên và chính là địa chỉ mà bạn đã gọi nó ra, tên đó người ta gọi là tên miền hay domain name. Mỗi Website được sở hữu bởi một cá nhân hoặc tổ chức nào đó. Website là một văn phòng ảo của doanh nghiệp, tổ chức trên mạng Internet. Website bao gồm toàn bộ thông tin, dữ liệu, hình ảnh về các sản phẩm, dịch vụ và hoạt động sản xuất kinh doanh mà doanh nghiệp muốn truyền đạt tới người truy cập Internet. Với vai trò quan trọng như vậy, có thể coi Website chính là bộ mặt của Công ty, là nơi để đón tiếp và giao dịch với các khách hàng trên mạng. Website không chỉ đơn thuần là nơi cung cấp thông tin cho người xem, cho các khách hàng và đối tác kinh doanh của doanh nghiệp, nó còn phải phản ánh được những nét đặc trưng của doanh nghiệp, đảm bảo tính thẩm mỹ cao, tiện lợi, dễ sử dụng và đặc biệt phải có sức lôi cuốn người sử dụng để thuyết phục họ trở thành khách hàng của doanh nghiệp. 1.2. Các yêu c u t i thi u c a 1 Webiste Đối với một doanh nghiệp trong đời thường, để thành lập và hoạt động, doanh nghiệp đó phải đáp ứng được tối thiểu 3 yếu tố căn bản sau: Tên doanh nghiệp Trụ sở hoạt động của doanh nghiệp Các yếu tố vật chất kỹ thuật, máy móc và con người Website của doanh nghiệp cũng như doanh nghiệp trong đời thường, để thiết lập và đưa vào hoạt động Website cũng phải đáp ứng được tối thiểu 3 yếu tố cơ bản như doanh nghiệp là: Tên miền (hay còn gọi là Tên miền ảo hoặc Domain name) tương ứng với Tên doanh nghiệp trong đời thường. Web Hosting (hay còn gọi là nơi lưu giữ trên máy chủ Internet) tương ứng với Trụ sở doanh nghiệp trong đời thường.
1

Các trang web tương ứng với yếu tố vật chất kỹ thuật, máy móc của doanh nghiệp trong đời thường và con người để quản lý và vận hành Website đó. 1.3. Website đ ng và website tĩnh Website động có thêm các phần xử lý thông tin và truy xuất dữ liệu còn website tĩnh thì không. 1.3.1. Web Động Web "ĐỘNG" là thuật ngữ được dùng để chỉ những website được hỗ trợ bởi một phần mềm cơ sở web, nói đúng hơn là một chương trình chạy được với giao thức http. Thực chất, website động có nghĩa là một website tĩnh được "ghép" với một phần mềm web (các modules ứng dụng cho Web). Với chương trình phần mềm này, người chủ website thực sự có quyền điều hành nó, chỉnh sửa và cập nhật thông tin trên website của mình mà không cần phải nhờ đến những người chuyên nghiệp. Bạn hãy tưởng tượng website như một công cụ quảng cáo luôn có thể tiếp cận với khách hàng tiềm năng, cũng như khách hàng hiện tại của bạn bất cứ lúc nào, bất cứ ở đâu, không hạn chế về mặt thời gian và không gian. Giả sử cửa hàng của Bạn là một phòng trưng bày về mẫu mốt thời trang với nhiều cô ma-nơ-canh đứng trưng bày các mẫu mốt mới. Nếu Bạn làm web tĩnh, cũng giống như các cô ma-nơ-canh này đã được chế tạo rất hoàn thiện nhưng sẽ không bao giờ thay đổi tư thế, về cả những bộ quần áo mà các cô mặc. Nếu muốn làm lại kiểu dáng mới, Bạn phải HOÀN TOÀN PHỤ THUỘC NHÀ CHẾ TẠO, hoặc Bạn phải mất chi phí mua mới. Còn nếu Bạn làm web động, thì cũng giống như các cô ma-nơ-canh này chỉ được dựng lên như một bộ khung mà tự Bạn luôn có thể thay đổi từ dáng đứng, cách ăn mặc, dù là thời trang mùa xuân, mùa hè, mùa thu hay mùa đông, các mẫu mốt luôn hợp thời đại, mà KHÔNG MẤT THÊM MỘT KHOẢN CHI PHÍ NHỎ NÀO cho người tạo ra chúng. Hiểu cách khác, những bộ mốt mới trưng bày chính là những thông tin, thông báo về tình hình phát triển các sản phẩm - dịch vụ mà bạn luôn muốn cập nhật để khách hàng được rõ. Hãy tưởng tượng tiếp, các modules của một website động cũng giống như những thành phần của một bộ khung ma-nơ-canh. Bạn có thể chỉnh sửa cẳng tay của những bộ khung này, nâng chúng lên hoặc hạ chúng xuôi xuống, điều chỉnh thành chân bước hay chân đứng thẳng, thành tư thế ngồi hoặc đứng, đó là khả năng tuỳ biến của một chương trình phần mềm điển hình. Hoặc Bạn có thể tháo rời hay lắp lại đôi tay, đôi chân của ma-nơ-canh, đó là khả năng tương thích của từng module với tổng thể một chương trình. 1.3.2. Web Tĩnh Nếu Bạn đã đọc phần tìm hiểu về website 'ĐỘNG', chắc Bạn sẽ tự hỏi: Vậy thì tại sao người ta vẫn thiết kế website tĩnh?

2

Không hẳn một website tĩnh không có lợi thế hơn so với một website động. Với web tĩnh, Bạn có thể có một giao diện được thiết kế tự do hơn. Vì vậy, nhiều khi một website tĩnh có cách trình bày đẹp mắt và cuốn hút hơn. Đối với những website chỉ nhằm đăng tải một số ít thông tin và chúng không có nhiều thay đổi theo thời gian thì việc dùng hình thức website tĩnh là phù hợp hơn cả. Ngoài ra, website tĩnh còn có một lợi thế vô song: website tĩnh thân thiện với các cơ chế tìm kiếm (search engine) hơn nhiều so với website động. Bởi vì địa chỉ URL của các .html trong web tĩnh không chứa dấu chấm hỏi (?) như trong web động. 1.4. M t s khái ni m k thu t liên quan đ n website Tên miền (domain): tên miền chính là địa chỉ website. Website bắt buộc phải có tên miền. Tên miền có nhiều dạng như www.abc.com, www.abc.net hay www.abc.com.vn... Có những website không mua tên miền riêng mà dùng tên miền con (sub-domain) dạng www.abc.com/xyz hay www.xzy.abc.com (xzy là tên miền con của tên miền abc.com). Dạng tên miền con như vậy không phải tốn tiền mua mà trên nguyên tắc là website “mẹ” (tức www.abc. com) có thể “mở” hàng trăm, hàng nghìn tên miền con như thế. Chi phí trả cho một tên miền dạng www.abc.com khi mua trên mạng là khoảng 10 đô-la Mỹ/năm. Dịch vụ lưu trữ (hosting, hay host): muốn những trang web được hiện lên khi người ta truy cập vào website thì dữ liệu phải được lưu trữ trên một máy tính (máy chủ - server) luôn hoạt động và kết nối với mạng Internet, máy tính này chính là host server. Một host server có thể lưu trữ rất nhiều website cùng một lúc. Nếu máy tính này có sự cố bị tắt trong một thời điểm nào đó thì lúc đó không ai truy cập được những website lưu trữ trên máy tính đó. Tùy theo nhu cầu mà doanh nghiệp có thể chọn mua host với dung lượng 10MB (tức chứa được tối đa 10MB dữ liệu), 20MB, 50MB, 100MB hay nhiều hơn. Giá hosting hiện nay cũng rất thấp, chỉ từ vài chục nghìn đến một hai trăm nghìn đồng mỗi tháng, tùy theo cấu hình host và ngôn ngữ lập trình và cơ sở dữ liệu mà host hỗ trợ. Dung lượng host và dung lượng truyền (transfer): dung lượng host là số MB dành để chứa dữ liệu. Ví dụ host 100MB cho doanh nghiệp 100MB để chứa file, cơ sở dữ liệu, email... Dung lượng truyền của host là tổng số MB dữ liệu, file... truyền ra truyền vào (download, upload) máy chủ nơi host website trong mỗi tháng. Khi doanh nghiệp mua host cho website, cần ước tính dung lượng truyền theo công thức sau: Dung lượng truyền trong tháng (transfer/month) (GB) = số lượt truy cập website trong tháng x số trang bình quân mỗi lượt người xem x số KB mỗi trang web / 1.000.000 (đổi từ KB sang GB). Ví dụ: ước tính website của doanh nghiệp sẽ có khả năng đón 10.000 lượt người xem trong tháng, mỗi lượt người sẽ xem bình quân 10 trang, mỗi trang web nặng bình quân 100KB, vậy doanh nghiệp cần dung lượng truyền là (10.000 x 10 x 100)/1.000.000 = 10GB/tháng. Hacker/Hacking: hacker là những người thích nghiên cứu về bảo mật trên Internet và “thực tập” bằng cách đi “đánh phá” những website nào sơ hở về bảo mật.
3

Nói chung, không một website nào trên thế giới dám tuyên bố bảo mật tuyệt đối. Hacker có thể cướp tên miền của website, có thể thay đổi nội dung của website, có thể tấn công ồ ạt (các lệnh yêu cầu server hoạt động) làm cho website bị “tê liệt” trong một khoảng thời gian. Những việc này doanh nghiệp nên hỏi nhà cung cấp dịch vụ host của mình xem họ có chính sách phục hồi sau khi bị hack như thế nào. Web Browser 1.5. Nh ng y u t t o nên tính hi u qu cho website: Nhiều doanh nghiệp có website than phiền rằng website của họ không mang lại hiệu quả cho việc kinh doanh. Đây là một thực trạng chung cho các doanh nghiệp Việt Nam. Nguyên nhân cũng rất đơn giản và hiển nhiên như sau: Website xây xong thì “bị bỏ quên”, không chú trọng marketing cho website: Nếu doanh nghiệp sản xuất ra một sản phẩm mới mà không có một hoạt động marketing nào để quảng bá sản phẩm đó thì liệu thị trường có biết đến sản phẩm đó không? Vì thế, sau khi có website, doanh nghiệp phải chú trọng marketing cho website của mình, cả marketing trên mạng và marketing truyền thống (như in địa chỉ website lên danh thiếp, bao gồm địa chỉ website trong các mẩu quảng cáo, bao bì, tài liệu giao dịch của doanh nghiệp). Nội dung nghèo nàn, không cập nhật, thiết kế không chuyên nghiệp, chức năng không tiện lợi: Nếu làm tốt marketing, có nhiều người truy cập nhưng phần nội dung, hình thức, chức năng website lại nghèo nàn, không chuyên nghiệp thì sẽ khó có khả năng người ta quay lại xem lần thứ hai. Hơn nữa, nguy cơ bị đối tượng khách hàng đánh giá thấp mức độ chuyên nghiệp của doanh nghiệp nếu website của doanh nghiệp không được chăm sóc kỹ làm cho doanh nghiệp bị mất nhiều cơ hội bán hàng. Để website mang lại hiệu quả, có 03 yếu tố phải thỏa mãn: chất lượng website, marketing website, và chất lượng dịch vụ hỗ trợ người xem. Chất lượng website: là yếu tố chính để giữ chân và tạo ấn tượng tốt cho người xem một khi họ đã vào xem website của doanh nghiệp. Chất lượng website được đánh giá thông qua các yếu tố sau: Trình bày thiết kế, bố cục: trình bày trang nhã, ấn tượng, bố cục rõ ràng, đơn giản, không bề bộn, không có quá nhiều thông tin trên một trang... Thông tin: thông tin phải chính xác, đầy đủ, súc tích, được cập nhật thường xuyên. Quan trọng hơn là thông tin phải hữu dụng cho người xem. Tốc độ hiển thị: tốc độ hiển thị trang web phải nhanh, nếu không người xem sẽ chán và bỏ qua, đặc biệt là ở Việt Nam tốc độ truy cập Internet bằng điện thoại rất chậm. Các chức năng tiện ích phục vụ người xem: website phải có các chức năng tiện ích phục vụ người xem như form liên hệ, chức năng tìm kiếm, chức năng chọn hàng, đặt hàng v.v... để tránh làm mất thời gian, gây phiền phức cho người xem. Marketing website: đây là khâu quan trọng nhất để thu hút người vào xem website (chủ yếu là lần đầu). Nếu không marketing, không ai biết đến địa chỉ website này, từ đó, hàng năm chỉ có một số rất ít người vào xem, làm cho website trở nên vô
4

. có thể tìm thấy trên website này những thông tin bổ ích cho họ.. Nhưng như thế chưa đủ để mang lại thành công cho website của doanh nghiệp. hoặc nhận được câu trả lời không rõ ràng.. trước hết doanh nghiệp cần làm cho thật nhiều người biết đến website của mình.. Hiện trên Internet có hơn 40 triệu website với hơn 8 tỷ trang web.. cập nhật. Nếu một người quan tâm gửi câu hỏi từ trang liên hệ của website mà phải chờ vài ngày không thấy câu trả lời. nếu được thì nên cung cấp vài thông tin bổ sung để thu hút người xem và tạo ấn tượng tốt cho họ. Hỗ trợ khách hàng: nếu DN đã làm tốt khâu marketing và từ đó có nhiều người biết đến và ghé qua thăm viếng website. Nếu không marketing.. hình ảnh sản phẩm. Được khách hàng biết đến (Customer Awareness) Để website hoạt động mang lại hiệu quả kinh tế. xử lý đơn hàng. Song. đối tượng người xem cũng chỉ là những ai đã có chủ ý tìm thông tin hay có nhu cầu về mặt hàng hay dịch vụ mà DN đang bán. cần phải đầu tư cho marketing website. Nếu DN đã làm tốt khâu chất lượng website để cho những ai đã ghé qua thăm viếng website đều có ấn tượng tốt. những điều họ đang đi tìm. bổ ích. nếu không nỗ lực mar. thời gian. web. Marketing website hiệu quả là một việc không dễ.. Điều còn thiếu là: chất lượng dịch vụ hỗ trợ người xem (khách hàng). hữu ích như thế nào cho người sử dụng. Do đó. DN chỉ cần cung cấp đầy đủ thông tin về những gì mình bán. nhưng rất cần thiết đối với sự thành công của website. doanh nghiệp nên chú ý các đặc tính bên dưới của website và đảm bảo rằng website của mình phải thỏa những yêu cầu đó. giới thiệu DN chứ không có nhiều thông tin mang tính thời sự hay bổ ích thú vị đối với người xem. Vì là website của DN nên đa số chỉ có mục đích trưng bày thông tin. Đây chính là việc marketing website.dụng..v. trên website của doanh nghiệp cần phải có những thông tin đầy đủ. đáp ứng đúng nhu cầu người xem. website của doanh nghiệp sẽ chìm sâu trong “đại dương” Internet và những đầu tư cho website sẽ là “công dã tràng”. tức tốc độ phục vụ trả lời email.keting. và đòi hỏi nhiều công sức. Để khai thác hiệu quả của website tốt. không đầy đủ. thì chắc chắn doanh nghiệp sẽ bị mất nhiều khách hàng tiềm năng.. với văn phong cẩu thả.. Ví dụ: website của DN sản xuất trà thì nên có phần giới thiệu về các loại trà. cung cấp thông tin theo yêu cầu của từng người. đầu tư. công dụng.. do đó.site của doanh nghiệp sẽ hầu như vô dụng. Quan trọng nhất là DN cần có thông tin thuyết phục được người xem rằng “Tại sao quý vị nên mua sản phẩm hay dịch vụ của chúng tôi mà không mua của ai khác?” Quyết định mua (Decision to buy) 5 . Doanh nghiệp sau khi xây dựng xong website và đưa vào hoạt động.. dịch vụ. Tính hấp dẫn người xem (Stickiness) Nếu người xem chỉ xem một lần rồi không bao giờ vào xem nữa thì website của DN cũng thực sự không mang lại lợi ích nhiều. cách thức pha trà ngon v.

địa chỉ mua. chức năng mua qua mạng với thao tác gọn nhất. “hấp dẫn” để làm cho người xem cảm thấy nên quyết định mua ngay. địa chỉ công ty. Tính tiện lợi (Convenience) Khi người xem đã quyết định mua. nhanh nhất. không do dự nữa. Ví dụ: cung cấp email.Khi người xem đã quan tâm. người xem thoát ra khỏi website. doanh nghiệp phải cung cấp thông tin. Nếu không.. số điện thoại bàn. hoặc đi tìm thông tin ở website khác thì doanh nghiệp sẽ bị mất khách hàng tiềm năng này. đã cảm thấy muốn mua sản phẩm/dịch vụ của doanh nghiệp thì điều quan trọng là trên website của doanh nghiệp phải có những thông tin “bắt mắt”. số điện thoại di động. Thật đáng tiếc nếu người xem đã quyết định mua nhưng lại “bất lực” vì không biết phải làm sao để mua! 6 . chức năng tiện ích sao cho khách hàng có thể dễ dàng mua nhất. hướng dẫn cụ thể từng bước cho khách hàng mua qua mạng..

..1 Cấu trúc chung một trang HTML Một tài liệu HTML cơ bản có cấu trúc như sau: <HTML> <HEAD> <TITLE>Tiêu đề của tài liệu</TITLE> </HEAD> <BODY Các tham số nếu có> . b. Cú pháp: <HEAD> . HEAD Thẻ HEAD được dùng để xác định phần mở đầu cho tài liệu.. Toàn bộ nội dung của tài liệu được đặt giữa cặp thẻ này. Nội dung của tài liệu </BODY> </HTML> a. Các th đ nh c u trúc tài li u 2..1. TITLE 7 ..Chương 2: HTML căn bản Cấu trúc của một trang HTML Các thẻ định dạng cấu trúc dữ liệu Các thẻ định dạng khối Các thẻ định dạng danh sách Các thẻ định dạng ký tự Các thẻ chèn âm thanh. Toàn bộ nội của tài liệu được đặt ở đây </HTML> Trình duyệt sẽ xem các tài liệu không sử dụng thẻ <HTML> như những tệp tin văn bản bình thường. HTML: Cặp thẻ này được sử dụng để xác nhận một tài liệu là tài liệu HTML. Phần mở đầu (HEADER) của tài liệu được đặt ở đây </HEAD> c. Cú pháp: <HTML> . hình ảnh Các thẻ định dạng bảng biểu 2.1.. tức là nó có sử dụng các thẻ HTML để trình bày.

phần nội dung của tài liệu được đặt ở đây </BODY> Trên đây là cú pháp cơ bản của thẻ BODY. Nếu kích thước ảnh nhỏ hơn cửa sổ trình duyệt thì toàn bộ màn hình cửa sổ trình duyệt sẽ được lát kín bằng nhiều ảnh. BGCOLOR= Đặt mầu nền cho trang khi hiển thị.1.2 thì có nhiều thuộc tính được sử dụng trong thẻ BODY.. Trong phần thân có thể chứa các thông tin định dạng nhất định để đặt ảnh nền cho tài liệu.. Cú pháp: <BODY> . LINK= 2. alink (active link) là liên kết đang được kích hoạt . tức là nó phải nằm trong thẻ phạm vi giới hạn bởi cặp thẻ <HEAD>. sau đó mới tải ảnh lên phía trên.. phần nội dung của tài liệu được đặt ở đây </BODY> 8 . Sau đây là các thuộc tính chính: BACKGROUND= Đặt một ảnh nào đó làm ảnh nền (background) cho văn bản. Cú pháp: <TITLE>Tiêu đề của tài liệu</TITLE> d. màu văn bản siêu liên kết.tức là khi đã được kích chuột lên.2 Cấu trúc chung một thẻ HTML Xét cú pháp thẻ body <BODY bgclolor = “pink”> . Nếu cả hai tham số BACKGROUND và BGCOLOR cùng có giá trị thì trình duyệt sẽ hiển thị mầu nền trước. màu nền. vlink (visited link) chỉ liên kết đã từng được kích hoạt. Xác định màu sắc cho các siêu liên kết trong văn bản. kể cả các đề mục..VLINK=.. BODY Thẻ này được sử dụng để xác định phần nội dung chính của tài liệu .Cặp thẻ này chỉ có thể sử dụng trong phần mở đầu của tài liệu. Tương ứng. Xác định màu chữ của văn bản. Giá trị của tham số này (phần sau dấu bằng) là URL của file ảnh.phần thân (body) của tài liệu. đặt lề cho trang tài liệu. tuy nhiên bắt đầu từ HTML 3.. Những thông tin này được đặt ở phần tham số của thẻ. TEXT= ALINK=...

. Đề mục cấp 1 là cao nhất và giảm dần đến cấp 6. </H1> <H2> . Các thẻ định dạng đề mục H1/H2/H3/H4/H5/H6 HTML hỗ trợ 6 mức đề mục.. các ký tự tab.. tức là mỗi trình duyệt sẽ thể hiện đề mục dưới một khuôn dạng thích hợp.1.2. </H2> <H3> . in thường Một số thẻ không cần thẻ kết thúc 2... Có thể ở trình duyệt này là font chữ 14 point nhưng sang trình duyệt khác là font chữ 20 point. gọi là thẻ mở đầu.2. nó có tác dụng chuyển sang dòng mới. Văn bản ở giữa hai thẻ này sẽ được thể hiện giống hệt như khi chúng được đánh vào. </H6> Định dạng đề mục cấp 1 Định dạng đề mục cấp 2 Định dạng đề mục cấp 3 Định dạng đề mục cấp 4 Định dạng đề mục cấp 5 Định dạng đề mục cấp 6 2...2.3 Thẻ xuống dòng BR Thẻ này không có thẻ kết thúc tương ứng (</BR>).2... Chú ý rằng đề mục chỉ là các chỉ dẫn định dạng về mặt logic. Thông thường văn bản ở đề mục cấp 5 hay cấp 6 thường có kích thước nhỏ hơn văn bản thông thường. Lưu ý.Hầu hết các thẻ HTML đều có dạng như trên. Dưới đây là các thẻ dùng để định dạng văn bản ở dạng đề mục: <H1> . ví dụ dấu xuống dòng trong đoạn văn bản giới hạn bởi thẻ <PRE> sẽ có ý nghĩa chuyển sang dòng mới (trình duyệt sẽ không coi chúng như dấu cách) 9 ..2. Để xuống dòng trong tài liệu.>.. nó bắt đầu bởi <tên_thẻ thuộc_tính = “giá_trị” . Các th đ nh d ng kh i 2... cuối cùng là thẻ đóng </tên_thẻ>. Cú pháp: <P>Nội dung đoạn văn bản</P> 2. ký tự xuống dòng đều được coi như một khoảng trắng. nội dung văn bản trong tài liệu HTML sẽ được trình duyệt Web thể hiện liên tục.. </H3> <H4> . </H5> <H6> .2. tiếp đó là nội dung của đoạn văn bản mà thẻ đó tác động. Thẻ P Thẻ <P> sử dụng để định dạng một đoạn văn bản (thẻ này không cần thẻ kết thúc).4 Thẻ PRE Để giới hạn đoạn văn bản đã được định dạng sẵn bạn có thể sử dụng thẻ <PRE>. bạn phải sử dụng thẻ <BR> 2. các khoảng trắng liền nhau. Chú ý: Tên thẻ không phân biệt chữ in hoa. </H4> <H5> .

.. =i Các mục được sắp xếp theo thứ tự i. b.. danh sách phân cấp và danh sách thực đơn giống danh <OL TYPE=1/a/A/i/I> <LI>Muc thu nhat <LI>Muc thu hai <LI>Muc thu ba </OL> sách không đánh số.. circle (vòng tròn). Ngoài ra còn thuộc tính START= xác định giá trị khởi đầu cho danh sách. Thuộc tính này có thể nhận các giá trị : disc (chấm tròn đậm). cho các ký tự. 2..4. mỗi mục trong danh sách được sắp xếp thứ tự. Các th đ nh d ng danh sách <UL> <LI> Mục thứ nhất <LI> Mục thứ hai </UL> Cú pháp: Có 4 kiểu danh sách: • Danh sách không sắp xếp ( hay không đánh số) <UL> • Danh sách có sắp xếp (hay có đánh số) <OL>. 2.Cú pháp: <PRE>Văn bản đã được định dạng</PRE> 2. c. Các thẻ định dạng in ký tự Sau đây là các thẻ được sử dụng để quy định các thuộc tính như in nghiêng.4. gạch chân. • Danh sách thực đơn <MENU> • Danh sách phân cấp <DIR> Với nhiều trình duyệt. =a Các mục được sắp xếp theo thứ tự a. III.. II... Các th đ nh d ng ký t 2. =A Các mục được sắp xếp theo thứ tự A.. 10 . 3. in đậm. iii.. Với thẻ OL ta có cú pháp sau: trong đó: TYPE =1 Các mục được sắp xếp theo thứ tự 1. có thể dùng lẫn với nhau. =I Các mục được sắp xếp theo thứ tự I... C. square (hình vuông).1. Thẻ < LI > có thuộc tính TYPE= xác định ký hiệu đầu dòng (bullet) đứng trước mỗi mục trong danh sách.3. ii. B. văn bản khi được thể hiện trên trình duyệt.

4.. </FONT> 2. Việc sử dụng các thẻ <SMALL>lồng nhau tạo ra hiệu ứng chữ giảm dần. vượt quá giới hạn này. </SUP> <SUB> .. Căn lề văn bản trong trang Web Trong trình bày trang Web của mình các bạn luôn phải chú ý đến việc căn lề các văn bản để trang Web có được một bố cục đẹp.. Tuy nhiên đối với mỗi trình duyệt có giới hạn về kích thước đối với mỗi font chữ.) so với font chữ hiện tại... Chọn kiểu chữ hiển thị... Kích thước có thể là tuyệt đối (nhận giá trị từ 1 đến 7) hoặc tương đối (+2..<B> ... In chữ lớn hơn bình thường bằng cách tăng kích thước font hiện thời lên một. Hn. Thẻ này chỉ có một tham số size= xác định cỡ chữ.. </U> <DFN> In chữ đậm In chữ nghiêng In chữ gạch chân Đánh dấu đoạn văn bản giữa hai thẻ này là định nghĩa của một từ.. Một số các thẻ định dạng như P. </B> <STRONG> . Thẻ <BASEFONT> không có thẻ kết thúc. In chữ nhỏ hơn bình thường bằng cách giảm kích thước font hiện thời đi một. </BIG> <SMALL> ...2... </I> <EM> .. 11 . </SUB> <BASEFONT> <FONT> ... Việc sử dụng các thẻ <BIG>lồng nhau tạo ra hiệu ứng chữ tăng dần. các thẻ <SMALL> sẽ không có ý nghĩa. Chúng thường được in nghiêng hoặc thể hiện qua một kiểu đặc biệt nào đó.. các thẻ <BIG> sẽ không có ý nghĩa. </SMALL> <SUP> .. Định dạng chỉ số trên (SuperScript) Định dạng chỉ số dưới (SubScript) Định nghĩa kích thước font chữ được sử dụng cho đến hết văn bản... </STRIKE> <BIG> . </EM> <U> . <S> .. </S> <STRIKE> . Tuy nhiên đối với mỗi trình duyệt có giới hạn về kích thước đối với mỗi font chữ.-4.. In chữ bị gạch ngang. Trong thẻ này có thể đặt hai tham số size= hoặc color= xác định cỡ chữ và màu sắc đoạn văn bản nằm giữa hai thẻ. </STRONG> <I> . vượt quá giới hạn này..

BB . Sử dụng màu sắc trong thiết kế các trang Web Một màu được tổng hợp từ ba thành phần màu chính. Các giá trị cho tham số ALIGN: LEFT CENTER RIGHT Căn lề trái Căn giữa trang Căn lề phải Ngoài ra. Ký tự Mã ASCII Tên chuỗi < &#060 &lt > &#062 &gt & &#038 &amp 2.3.là giá trị màu Xanh lá cây.4.4. đó là: Đỏ (Red). Cú pháp: <CENTER>Văn bản sẽ được căn giữa trang</CENTER> 2.là giá trị màu Xanh nước biển. Xanh nước biển (Blue). GG . Với tên tiếng Anh. được sử dụng để tách các ký tự trong một từ. chúng ta có thể sử dụng thẻ CENTER để căn giữa trang một khối văn bản. Trong HTML một giá trị màu là một số nguyên dạng hexa (hệ đếm cơ số 16) có định dạng như sau: #RRGGBB trong đó: RR . Ký tự ..IMG. Xanh lá cây (Green). Sau dấu bằng có thể là giá trị RGB hay tên tiếng Anh của màu. ta chỉ có thể chỉ ra 16 màu trong khi với giá trị RGB ta có thể chỉ tới 256 màu.là giá trị màu Đỏ. đều có tham số ALIGN cho phép bạn căn lề các văn bản nằm trong phạm vi giới hạn bởi của các thẻ đó.. Màu sắc có thể được xác định qua thuộc tính bgcolor hay color. Sau đây là một số giá trị màu cơ bản: Màu sắc Giá trị Tên tiếng Anh Đỏ #FF0000 RED Đỏ sẫm #8B0000 DARKRED Xanh lá cây #00FF00 GREEN Xanh nhạt #90EE90 LIGHTGREEN Xanh nước biển #0000FF BLUE 12 . Các ký tự đặc biệt Ký tự & được sử dụng để chỉ chuỗi ký tự đi sau được xem là một thực thể duy nhất.4.

..Vàng Vàng nhạt Trắng Đen Xám Nâu Tím Tím nhạt Hồng Da cam Màu đồng phục hải quân #FFFF00 #FFFFE0 #FFFFFF #000000 #808080 #A52A2A #FF00FF #EE82EE #FFC0CB #FFA500 #000080 #4169E1 #7FFFD4 YELLOW LIGHTYELLOW WHITE BLACK GRAY BROWN MAGENTA VIOLET PINK ORANGE NAVY ROYALBLUE AQUAMARINE Cú pháp: <BODY LINK ALINK VLINK BACKGROUND BGCOLOR TEXT TOPMARGIN RIGHTMARGIN LEFTMARGIN > .. phần nội dung của tài liệu được đặt ở đây </BODY> = color = color = color = url = color = color = pixels = pixels = pixels Sau đây là ý nghĩa các tham số của thẻ BODY: Các tham số LINK ALINK VLINK BACKGRO UND BGCOLOR TEXT Chỉ định màu nền Chỉ định màu của văn bản trong tài liệu 13 ý nghĩa Chỉ định màu của văn bản siêu liên kết Chỉ định màu của văn bản siêu liên kết đang đang chọn Chỉ định màu của văn bản siêu liên kết đã từng mở Chỉ định địa chỉ của ảnh dùng làm nền .

telnet.. Chọn kiểu chữ cho văn bản Cú pháp: <FONT FACE COLOR SIZE .Xác định có hay không thanh cuộn Lề trên Lề phải Lề trái 2.HTML#chapter001 Tên hệ thống Đường dẫn Ví dụ về URL Các tham số. Khái niệm văn bản siêu liên kết Văn bản siêu liên kết hay còn gọi là siêu văn bản là một từ.5. truy vấn nhiều hệ thống khác nhau. Có nhiều dịch vụ như http.edu.vn:8080 /~dir1/dir2/dir3/index. một cụm từ hay một câu trên trang Web được dùng để liên kết tới một trang Web khác.SCROLL TOPMARG IN RIGHTMA RGIN LEFTMAR GIN YES/NO .4.vnuh. 14 . Siêu văn bản là môi trường trong đó chứa các liên kết (link) của các thông tin. gopher. Có thể là tên miền đầy đủ của máy phục vụ hoặc chỉ là một phần tên đầy đủ – trường hợp này xảy ra khi văn bản được yêu cầu vẫn nằm trên miền của bạn. </FONT> = font-name = color =n> 2. Tuy nhiên nên sử dụng đường dẫn đầy đủ.6. wais. Các thành phần của URL được minh hoạ ở hình trên. • Dịch vụ: Là thành phần bắt buộc của URL.4. cần phải có một quy tắc đặt tên thống nhất cho tất cả các văn bản trên Web.. Quy tắc đặt tên đó là URL (Universal Resource Locator). Do WWW cấu thành từ Dịch vụ Cổng Tên file http://selab. Nó xác định cách thức trình duyệt của máy khách liên lạc với máy phục vụ như thế nào để nhận dữ liệu. ftp. • Tên hệ thống: Là thành phần bắt buộc của URL. biến.

htm.htm.4.. Có thể đường dẫn trong URL khác với đường dẫn thực sự trong hệ thống máy phục vụ. Mở trang Web được liên trong một cửa sổ mới (_blank) hoặc trong cửa sổ hiện tại (_self). Nếu cũng không có các file này thì thường kết quả trả về là danh sách liệt kê các file hay thư mục con trong thư mục được yêu cầu • Các tham số : Không là thành phần bắt buộc của URL. Cú pháp: <A HREF NAME TABINDEX TITLE TARGET > = url = name =n = title = _blank / _self .7. Đặt tên cho vị trí đặt thẻ. Nếu URL là yêu cầu tìm kiếm trên một cơ sở dữ liệu thì truy vấn sẽ gắn vào URL. trong một frame (tên frame). index. Trong trường hợp dấu thăng (#) xuất hiện đoạn mã đăng sau là tên của một vị trí (location) trong file được chỉ ra. Tuy nhiên có thể rút gọn đường dẫn bằng cách đặt biệt danh (alias). đó chính là đoạn mã đằng sau dấu chấm hỏi (?). Cổng là địa chỉ socket của mạng dành cho một giao thức cụ thể. default. Phải chỉ ra đường dẫn tới file yêu cầu khi kết nối với bất kỳ hệ thống nào.. siêu văn bản </A> Ý nghĩa các tham số: HREF NAME TABLEIND EX TITLE TARGET Văn bản hiển thị khi di chuột trên siêu liên kết.URL cũng có thể trả lại thông tin được thu thập từ form. Ngoài ra còn có URL tương đối hay còn gọi là URL không đầy đủ. • Đường dẫn thư mục : Là thành phần bắt buộc của URL. Thứ tự di chuyển khi ấn phím Tab 2.• Cổng : Không là thành phần bắt buộc của URL. Giao thức http ngầm định nối với cổng 8080. là một URL nào đó. Địa chỉ tương đối URL được trình bày ở trên là URL tuyệt đối.html hay default. Địa chỉ tương đối sử dụng sự khác biệt tương đối giữa 15 . File này thường có tên là index. Để tạo ra một siêu văn bản chúng ta sử dụng thẻ <A>. Địa chỉ của trang Web được liên kết. Các thư mục trong đường dẫn cách nhau bởi dấu gạch chéo (/).html. • Tên file : Không là thành phần bắt buộc của URL. Thông thường máy phục vụ được cấu hình sao cho nếu không chỉ ra tên file thì sẽ trả về file ngầm định trên thư mục được yêu cầu.

chỉ thư mục cha của thư mục hiện tại).htm của thư mục Javascript trên máy phục vụ www.edu. đầu tiên phải sử dụng ký tự ngăn cách.itdepartment.vn. chỉ thư mục hiện tại còn . Ví dụ.htm ở trong thư mục HTML của máy phục vụ www. các thành phần bên phải được thay thế bằng thành phần URL tương đối. Các thành phần trong URL được ngăn cách bằng ký tự ngăn cách (ký tự gạch chéo /). URL cơ sở có thể được xác định bằng thẻ <BASE>.vnuh. Ký tự đầu tiên sau dấu bằng sẽ xác định các thành phần nào của URL hiện tại sẽ tham gia để tạo nên URL mới.vn. URL đầy đủ hiện tại sẽ được sử dụng để tạo nên URL đầy đủ mới. nếu URL đầy đủ là: http://it-department..it-department.9.4. Do đường dẫn được xem là đơn vị độc lập nên có thể sử dụng phương pháp đường dẫn tương đối như trong UNIX hay MS-DOS (tức là .fpt.edu. 2. Kết nối mailto Nếu đặt thuộc tính href= của thẻ <a> giá trị mailto:address@domain thì khi kích hoạt kết nối sẽ kích hoạt chức năng thư điện tử của trình duyệt. chỉ thay đổi vị trí trong file. đường dẫn và cả tên file giữ nguyên.4. • Không có dấu phân cách chỉ có tên file là thay đổi.htm thì: • Dấu hai chấm (:) chỉ dịch vụ giữ nguyên nhưng thay đổi phần còn lại. nó bổ sung vào URL cơ sở đã xác định trước thành phần URL tương đối xác định sau thuộc tính href=.com với cùng dịch vụ http.com/ sẽ tải trang chủ của máy phục vụ www. Vẽ một đường thẳng nằm ngang Cú pháp: <HR ALIGN = LEFT / CENTER / RIGHT 16 . Chú ý rằng trình duyệt không gửi URL tương đối.văn bản hiện thời và văn bản cần tham chiếu tới.htm sẽ tải file index.htm sẽ tải file index1. <ADDRESS> Trang WEB này được <A href=”mailto:webmaster@vnuh.fpt. Ví dụ http://www. • Dấu thăng (#): chỉ dịch vụ.vnuh.edu. máy phuc vụ.8.vn” > WEBMASTER </A> bảo trì </ADDRESS> 2. Nguyên tắc là các thành phần bên trái dấu ngăn cách của URL hiện tại được giữ nguyên. Ví dụ index1.vn/HTML/index.edu. • Dấu gạch chéo (/) chỉ dịch vụ và máy phục vụ giữ nguyên nhưng toàn bộ đường dẫn thay đổi. Để tạo ra URL tương đối. Ví dụ /Javascript/index.vnuh.

Là khuôn dạng ảnh khác nhưng có thêm khả năng nén.jpeg Viết tắt của Joint Photographic Expert Group.gif Mô tả Viết tắt của Graphics Interchange Format. 2. Giới thiệu Liên kết với file đa phương tiện cũng tương tự như liên kết bình thường. Các th chèn âm thanh. Khuôn dạng này xuất hiện khi mọi người có nhu cầu trao đổi ảnh trên nhiều hệ thống khác nhau. nó cũng không có thẻ kết thúc tương ứng. căn phải. Phần mở rộng của file phải cho biết kiểu của file. Kiểu Image/G IF Phần mở rộng . căn giữa) Đặt màu cho đường thẳng Không có bóng Độ dày của đường thẳng Chiều dài (tính theo pixel hoặc % của bề rộng cửa sổ trình duyệt).5. Nhược điểm của nó là chỉ thể hiện được 256 màu. Nó là cơ sở cho khuôn dạng MPEG. được thêm nhiều chức năng cho các ứng dụng đặc biệt như làm ảnh nền trong suốt .COLOR NOSHADE SIZE WIDTH > = color =n = width ý nghĩa các tham số: ALIGN COLOR NOSHADE SIZE WIDTH Căn lề (căn trái.tức là ảnh có thể nổi bằng cách làm màu nền giống với màu nền của trình duyệt. Image/J PEG . Tất cả các trình duyệt 17 . Định dạng GIF là định dạng chuẩn cho mọi trình duyệt WEB. Thẻ này giống như thẻ BR. Mở rộng của chuẩn này là GIF89. Nó được sử dụng trên tất cả các hệ thống hỗ trợ giao diện đồ hoạ.Ưu điểm nổi bật của khuôn dạng này là lưu trữ được hàng triệu màu và độ nén cao nên kích thước file ảnh nhỏ hơn và thời gian download nhanh hơn. hình nh 2. Tuy vậy phải đặt tên đúng cho file đa phương tiện.1.5.

. Một bất tiện khi sử dụng các định dạng khác là file âm thanh thường có kích thước lớn . Do Apple Computer đưa ra. Là khuôn dnạg phim do Microsoft đưa ra.do vậy thời gian tải xuống lâu. Được Microsoft thiết kế để quét ảnh từ máy quét cũng như tạo các ấn phẩm. Acrobat cũng sử dụng các siêu liên kết ngay trong văn bản cũng giống như HTML.Mặc dù file theo định dạng này không nhỏ hơn so với các định dạng khác song chính khả năng dòng đã khiến định dạng này phù hợp với khả năng chơi ngay lập tức. Image/TI FF Text/HT ML PostScri pt Adobe Acrobat .tiff Viết tắt của Tagged Image File Format. Viết tắt của Motion Picture Expert Group. Định dạng audio theo dòng. 18 Sound/R ealAudio .mov Sound/A U Sound/M IDI .ps . . Ưu điểm lớn nhất của nó là khả năng WYSISYG.pdf Được tạo ra để hiển thị và in các văn bản có chất lượng cao. Từ phiên bản 2.HTM L. Đây là khuôn dạng thông dụng nhất dành cho phim trên WEB.0.au .avi . chuẩn video này được cho là có nhiều ưu điểm hơn MPEG và AVI. Video/M PEG .đều có khả năng xem ảnh JPEG. File Midi được tổng hợp số hoá trực tiếp từ máy tính. là định dạng dành cho các loại phim (video).mpeg Video/A VI Video/Q uickTime .eps.htm .ram . các sản phẩm của Acrobat cho phép liên kết giữa nhiều văn bản. Mặc dù đã được tích hợp vào nhiều trình duyệt nhưng vẫn chưa phổ biến bằng hai loại định dạng trên. Trái lại audio dòng bắt đầu chơi ngay khi tải được một phần file trong khi vẫn tải về các phần khác. Viết tắt của Portable Document Format. .mid Là khuôn dạng dành cho âm nhạc điện tử hết sức thông dụng được nhiều trình duyệt trên các hệ thống khác nhau hỗ trợ.

5. 2. . . Văn bản này còn được gọi là nhãn của ảnh. Để chơi lặp lại vô hạn cần chỉ định LOOP = -1 hoặc LOOP = INFINITE. Chèn một hình ảnh. một đoạn video vào tài liệu HTML Để chèn một file ảnh (. Đối với trình duyệt có khả năng hỗ trợ đồ hoạ. bạn có thể sử dụng thẻ IMG.jpg.gif. Các file theo định dạng này cũng giống như HTML. . Tuy nhiên do trình duyệt có thể hiển thị được cửa sổ 3 chiều nên người xem có thể cảm nhận được cảm giác ba chiều.2.5. dòng văn bản này sẽ hiện 19 .vrml Viết tắt của Virtual Reality Modeling Language. Thẻ BGSOUND phải được đặt trong phần mở đầu (tức là nằm trong cặp thẻ HEAD).VRML .avi) vào tài liệu HTML.3. 2.mpg.bmp) hoặc video (. Đưa âm thanh vào một tài liệu HTML Cú pháp: <BGSOUND SRC = url LOOP = n> Thẻ này không có thẻ kết thúc tương ứng (</BGSOUND>). Cú pháp: <IMG ALIGN = TOP/MIDDLE/BOTTOM ALT BORDER SRC WIDTH = width HEIGHT HSPACE VSPACE TITLE DYNSRC LOOP > = height = vspace = hspace = title = url =n = text =n = url START = FILEOPEN/MOUSEOVER Trong đó: ALIGN = TOP/ MIDDLE/ BOTTOM/ LEFT/ RIGHT ALT = text Căn hàng văn bản bao quanh ảnh Chỉ định văn bản sẽ được hiển thị nếu chức năng show picture của browser bị tắt đi hay hiển thị thay thế cho ảnh trên những trình duyệt không có khả năng hiển thị đồ hoạ.

. Chỉ định số lần chơi.. Chỉ định file video sẽ được chơi khi tài liệu được mở hay khi trỏ con chuột vào nó. TITLE = title LOOP = n/INFINITE 2.lên khi di chuột qua ảnh hay được hiển thị trong vùng của ảnh nếu ảnh chưa được tải về hết. </TD> <TH> . Các th đ nh d ng b ng bi u Sau đây là các thẻ tạo bảng chính: <TABLE> . Địa chỉ của file ảnh cần chèn vào tài liệu.. BORDER = n SRC = url WIDTH/HEIGHT HSPACE/VSPACE Đặt kích thước đường viền được vẽ quanh ảnh (tính theo pixel). Chỉ định kích thước của ảnh được hiển thị. </TH> cột <CAPTION> ... Chú ý phải đặt văn bản trong hai dấu nháy kép nếu triong văn bản chứa dấu cách hay các ký tự đặc biệt trong trường hợp ngược lại có thể bỏ dấu nháy kép. phải.... dưới.6. trái. </TR> <TD> . </CAPTION> Tiêu đề của bảng Định nghĩa một bảng Định nghĩa một hàng trong bảng Định nghĩa một ô trong hàng Định nghĩa ô chứa tiêu đề của Cú pháp: <TABLE ALIGN BORDER BORDERCOLOR BORDERCOLORDARK BORDERCOLORLIGHT = LEFT / CENTER / RIGHT =n = color = color = color 20 . Có thể kết hợp cả hai giá trị này nhưng phải phân cách chúng bởi dấu phẩy.. Chỉ định khoảng trống xung quanh hình ảnh (tính theo pixel) theo bốn phía trên. Nếu LOOP = INFINITE thì file video sẽ được chơi vô hạn lần.. Văn bản sẽ hiển thị khi con chuột trỏ trên ảnh DYNSRC = url START = FILEOPEN/MOUSEOVER Địa chỉ của file video. </TABLE> <TR> .

. Màu đường kẻ BORDERCOLOR 21 . Kích thước đường kẻ chia ô trong bảng.. Giá trị 0 có nghĩa là không xác định lề.. giữa các ô trong bảng chỉ có một khoảng trắng nhỏ để phân biệt. Với những bảng có cấu trúc phức tạp... nên đặt lề để người xem có thể phân biệt rõ các dòng và cột. Định nghĩa các ô trong dòng <TD ALIGN VALIGN BORDERCOLOR BORDERCOLORDARK BORDERCOLORLIGHT BACKBROUND BGCOLOR COLSPAN ROWSPAN > . </TR> .... Định nghĩa các dòng <TR ALIGN = LEFT/CENTER/RIGHT VALIGN = TOP/MIDDLE/BOTTOM> . </TABLE> = LEFT / CENTER / RIGHT = TOP / MIDDLE / BOTTOM = color = color = color = url = color =n =n ý nghĩa các tham số: ALIGN / VALIGN BORDER Căn lề cho bảng và nội dung trong mỗi ô... Nếu chỉ để border thì ngầm định border=1. được đo theo pixel. Nội dung của ô </TD> .BACKGROUND BGCOLOR CELLSPACING CELLPADDING > = url = color = spacing = pading <CAPTION>Tiêu đề của bảng biểu</CAPTION> .

Ngoài việc xây dựng mối quan hệ với khách hàng. Chỉ định ô sẽ kéo dài trong bao nhiêu cột Chỉ định ô sẽ kéo dài trong bao nhiêu hàng 2.2. chúng ta sử dụng thẻ FORM với cú pháp như sau: Cú pháp: 22 . Việc sử dụng biểu mẫu trên World Wide Web là khá nhiều và liên tục tăng lên.7. khi muốn mua một cuốn sách trên Internet. nó chứa các phần tử đặc biệt gọi là các điều khiển. Dữ liệu do người dùng nhập vào có thể được xác nhận hợp lệ nhờ các kịch bản phía máy khách (client-side scripts) và được chuyển đến máy chủ để xử lý thêm. địa chỉ e-mail và các thông tin khác để người dùng đăng ký cho một dịch vụ hay một sự kiện nào đó Thu thập thông tin dùng để đăng ký mua một mặt hàng nào đó. địa chỉ gửi thư.7. Thu thập thông tin phản hồi về một web site. Tạo Form Để tạo ra một form trong tài liệu HTML.1. FORM 2. HTML Forms Form HTML là một phần của tài liệu. Sau đây là một số cách sử dụng thông thường: Thu thập tên. 2. số điện thoại. Hầu hết các site cung cấp một dịch vụ nào đấy đều khuyến khích khách hàng gửi thông tin phản hồi. ta phải điền tên. địa chỉ. phương thức thanh toán và các thông tin liên quan khác. Cung cấp công cụ tìm kiếm cho web site.7. đây còn là một nguồn thông tin để trao đổi hoặc cải tiến dịch vụ. Các điều khiển được sử dụng để nhập thông tin từ người dùng và cung cấp một số tương tác. ví dụ. Địa chỉ tới tệp ảnh dùng làm nền cho bảng Màu nền Khoảng cách giữa các ô trong bảng Khoảng cách giữa nội dung và đường kẻ trong mỗi ô của bảng. Các site cung cấp nhiều thông tin khác nhau thường cung cấp cho người dùng hộp tìm kiếm để cho phép họ tìm kiếm thông tin nhanh hơn.BORDERCOLORDAR K BORDERCOLORLIG HT BACKGROUND BGCOLOR CELLSPACING CELLPADDING COLSPAN ROWSPAN Màu phía tối và phía sáng cho đường kẻ nổi.

> <INPUT .Danh sách các mục chọn --> </SELECT> 23 ...<FORM ACTION METHOD NAME TARGET > <!-.3...).7. Đặt các đối tượng điểu khiển (như hộp văn bản. Tạo một danh sách lựa chọn Cú pháp: <SELECT NAME="tên danh sách" SIZE="chiều cao"> <OPTION VALUE=value1 SELECTED> Tên mục chọn thứ nhất <OPTION VALUE=value2> Tên mục chọn thứ hai <!-.. Phương thức gửi dữ liệu. Chỉ định cửa sổ sẽ hiển thị kết quả sau khi gửi dữ liệu từ form đến server. ô kiểm tra.> </FORM> = ulr = GET | POST = name = frame_name | _blank | _self Trong đó ACTION METHOD NAME TARGET Địa chỉ sẽ gửi dữ liệu tới khi form được submit (có thể là địa chỉ tới một chương trình CGI. Tên của form.) vào trang Web Cú pháp thẻ INPUT: <INPUT ALIGN = LEFT | CENTER | RIGHT TYPE = BUTTON | CHECKBOX | FILE | IMAGE | PASSWORD | RADIO | RESET | SUBMIT | TEXT VALUE = value > 2. một trang ASP.. nút bấm.Các phần tử điều khiển của form được đặt ở đây --> <INPUT ...

2. người thiết kế cần phải cung cấp một cách khác để truy cập vào nội dung. Tạo hộp soạn thảo văn bản Cú pháp: <TEXTAREA COLS=số cột ROWS=số hàng NAME=tên > Văn bản ban đầu </TEXTAREA> 2. Nhiều cách hiển thị cho phép người thiết kế giữ một số thông tin tĩnh nào đó trong khi cuộn hay thao tác đối với những nội dung khác trên trang Web Tuy nhiên. thay đổi và cuốn độc lập nhau.0 hoặc trước đó và Netscape 1. Trình duyệt chỉ nhận phần tử đầu tiên xuất hiện trong tài liệu và bỏ qua phần tử sau. mặt hạn chế của việc sử dụng khung trong trang Web là: không phải tất cả các trình duyệt đều hỗ trợ khung. Các thuộc tính như sau: 24 . Khung được tạo ra bằng cách sử dụng phần tử FRAMESET. IE phiên bản 2.8.8. Mỗi khung là một cửa sổ trong cửa sổ chính.8. Ví dụ.7.2. Ta không thể sử dụng phần tử BODY và FRAMESET cùng với nhau. ta có thể sử dụng ba khung trong trang Web. ví dụ.2 hoặc trước đó. Phần FRAMESET xác định cách trình bày trong cửa sổ người dùng. một làm menu điều hướng và một để hiển thị dữ liệu. thì phần tử FRAMESET sau đó sẽ bị bỏ qua và ngược lại. Một tài liệu HTML sử dụng khung thì có phần HEAD và phần FRAMESET. Để nội dung vẫn hợp lệ mà người sử dụng không cần quan tâm đến trình duyệt có hỗ trợ khung hay không. một làm biểu ngữ (banner). nếu bạn sử dụng phần tử BODY. FRAME Khung chia một cửa sổ trình duyệt thành nhiều vùng riêng biệt. Một số lý do sử dụng khung: Hiển thị một biểu tượng (logo) hoặc thông tin tĩnh trên một vị trị cố định trên trang Web Đối với bảng nội dung trong trang mà ở đó người dùng có thể kích vào và di chuyển quanh web site mà không cần phải liên tục quay lại trang nội dung. Nghĩa là.1 Tại sao sử dụng khung ? Một trang có thể có một hoặc nhiều khung.2 Cách sử dụng khung Một tài liệu HTML chuẩn có phần HEAD và BODY. 2. mà mỗi vùng có thể hiển thị một trang riêng biệt có thể cuốn được. Mỗi khung có thể được tạo.4.

Thuộc tính ROWS

Mô tả Xác định độ rộng của khung, được tính theo điểm(pixels), phần trăm hoặc độ rộng tương đối. Giá trị mặc định là 100%, nghĩa là một dòng Xác định độ cao của khung, được tính theo điểm(pixels), phần trăm hoặc độ cao tương đối. Giá trị mặc định là 100%. Nó xác định chỉ có một cột

COLS

Phần tử FRAME xác định hình thức và nội dung của một khung trong FRAMESET. Ví dụ sau đây tạo hai khung bằng nhau, chia đôi cửa sổ. Ví dụ 1: <HTML> <HEAD> <TITLE>Two Equal Frames</TITLE> </HEAD> <FRAMESET COLS=”50%,*”> <FRAME SRC=x.htm> <FRAME SRC=y.htm> </FRAMESET> </HTML> Chú ý: File x.html và y.html được lưu cùng thư mục với file .html chính Các thuộc tính của FRAME bao gồm:
Thuộc tính NAME SRC NORESIZE SCROLLING Mô tả Thuộc tính này gán tên cho khung hiện thời Thuộc tính này xác định vị trí tài liệu ban đầu được chứa trong khung Đây là thuộc tính logic. Nó quy định cửa sổ khung không được thay đổi kích thước Thuộc tính này xác định kiểu cuộn cho cửa sổ khung. Các giá trị có thể là: Auto - Xuất hiện thanh cuộn khi cần thiết. Đây là giá trị mặc định Yes - Luôn luôn xuất hiện thanh cuộn trong cửa sổ của khung No - Không xuất hiện thanh cuộn trong cửa sổ của khung Xác định viền của khung. Các giá trị có thể là: 1 - Là giá trị mặc định. Có sự phân cách giữa khung hiện thời với các khung xung quanh 0 - Không có sự phân cách giữa khung hiện thời với các khung lân cận. Tuy nhiên, nếu các khung lân cận có thiết lập thì vẫn
25

FRAMEBOR DER

xuất hiện sự phân cách này.

MARGINWID TH MARGINHEI GHT

Xác định khoảng cách giữa nội dung trong khung với lề trái và lề phải của khung. Giá trị phải lớn hơn một Xác định khoảng cách giữa nội dung trong khung với lề trên và lề dưới của khung. Giá trị phải lớn hơn một

Ta không thể đóng cửa sổ của khung. Khung được đóng khi cửa sổ tạo ra nó bị đóng lại. Khung không có thanh trạng thái vì vậy ta phải sử dụng thanh trạng thái của khung chính trong tài liệu. Ví dụ 2: <HTML> <HEAD> <TITLE>Scrolling in Frames</TITLE> </HEAD> <FRAMESET ROWS=”50%,*”> <FRAME SRC=”x.html” SCROLLING=no> <FRAME SRC=”y.html” SCROLLING=yes> </FRAMESET> </HTML> Ví dụ 3: <HTML> <HEAD> <TITLE>Resizing Frames</TITLE> </HEAD> <FRAMESET cols=”20%, 80%”> <FRAMESET rows=”100, 200”> <FRAME src=”x.html” noresize> <FRAME src=”y.html”> </FRAMESET> <FRAME src=”flowers.jpg”> </FRAMESET> </HTML> Đoạn mã sau tạo 3 cột: Cột 2 có độ rộng là 250 pixel, cột 1 chiếm 25% khoảng còn lại và cột 3 chiếm 75% khoảng còn lại Ví dụ 4: <HTML>
26

<HEAD> <TITLE>Using Frames</TITLE> </HEAD> <FRAMESET cols=”1*, 250, 3*”> <FRAME src = “x.html” frameborder = 0> <FRAME src = “y.html” frameborder = 0 marginwidth=25> <FRAME src = “flowers.jpg”> </FRAMESET> </HTML> Chú ý trong ví dụ 3, ta sử dụng phần tử FRAMESET lồng nhau (Nested framesets). Ta có thể tạo ra các frameset (tập khung) lồng nhau ở bất kỳ mức nào như ví dụ minh họa dưới đây: Ví dụ 5: <HTML> <HEAD> <TITLE>Nested Frames</TITLE> </HEAD> <FRAMESET cols="33%, 33%, 34%"> <FRAME src = "flowers.jpg"> <FRAMESET rows="40%, 50%"> <FRAME src = "x.html"> <FRAME src = "y.html"> </FRAMESET> <FRAME src = "flowers.jpg"> </FRAMESET> </HTML> Liên kết các khung Khi tạo liên kết trong trang Web, ta có thể thiết lập một khung như một mục tiêu của liên kết (link). Trình duyệt tuân theo các bước sau: Nếu ta xác định một khung trong thuộc tính đích (TARGET) của phần tử, thì tài liệu được phần tử chỉ ra sẽ được tải vào khung đó khi phần tử được kích hoạt. Nếu thuộc tính TARGET không được thiết lập thì thuộc tính TARGET của phần tử BASE sẽ được sử dụng để xác định khung Nếu cả phần tử và phần tử BASE không đề cập đến TARGET, thì tài liệu được tải vào khung chứa phần tử đó. Nếu không tìm thấy khung thì trình duyệt tạo một cửa sổ và khung mới sau đó tải tài liệu vào khung mới này.

27

Thuộc tính TARGET được sử dụng để xác định tên khung mà tài liệu được mở trong đó. Khi tạo khung, ta cần phải đặt thuộc tính tên. Tên này được dùng khi tạo liên kết. Sau khi thay đổi nội dung của một khung thì định nghĩa frameset ban đầu bị mất đi. Nếu có nhiều liên kết đến cùng một đích, ta có thể thiết lập một TARGET mặc định trong phần tử BASE . Sau đó, việc xác định thuộc tính TARGET trong mỗi phần tử sẽ không cần thiết nữa. Ví dụ 6: <HTML> <FRAMESET COLS=”40%, 60%”> <FRAME SRC=”FLOWERS.JPG” NAME=”Flowers” SCROLLING=”yes”> <FRAME SRC=”LINK.HTML” NAME=”Links” SCROLLING=”no” FRAMEBORDER=”no”> </FRAMESET> </HTML> Link.html <HTML> <BODY> <BASE TARGET=”Main”> <P><A HREF=”X.HTML”>The file, X</A><P> <P><A HREF=”Y.HTML”>The file, Y</A><P> </BODY> </HTML> Phần tử NOFRAMES Nếu trình duyệt không hỗ trợ khung, với tư cách là người phát triển ứng dụng ta nên cung cấp một cách khác để hiển thị nội dung. Phần tử NOFRAMES được sử dụng để làm việc đó. Nó chỉ hoạt động trong trình duyệt không hỗ trợ khung. Ví dụ 7: <HTML> <FRAMESET COLS=”40%,60%”> <FRAME SRC=”Flowers.jpg” NAME=”Flowers” SCROLLING=yes> <FRAMESET ROWS=”60,*”> <FRAME SRC=”x.html” NAME=”x” SCROLLING=no FRAMEBORDER=no> <FRAME SRC=”y.html” NAME=”y”> <NOFRAMES> Frames are not being displayed. Click here <A href=”main.htm”>for a nonframes version</A> </NOFRAMES> </FRAMESET>
28

html" width="100" height="150" scrolling=auto frameborder=1> [The browser does not support frames or is currently configured not to display frames. Thuộc tính NAME WIDTH HEIGHT Mô tả Gán tên cho khung hiện thời Xác định độ rộng của khung trên dòng Xác định chiều cao của khung trên dòng Ví dụ 8: <HTML> <P>It has been good fun.</FRAMESET> </HTML> 2.html">contents</A>] </IFRAME> <BR> <P><FONT color = hotpink>The above is an inline frame </HTML> T ng h p m t s th HTML Tag <html> <body> <h1> to <h6> <p> <br> <hr> <!--> Mô Tả Xác định một văn bản dạng HTML Xác định phần thân của tài liệu Xác định header từ 1 đến 6 Xác định một đoạn văn Chèn một dòng trắng Xác định một đường thẳng Xác định vùng chú thích Tag <b> <big> Mô Tả Định dạng chữ đậm Định dạng chữ lớn 29 .3 Phần tử IFRAME – khung trên dòng (inline frame) Phần tử IFRAME được sử dụng để tạo khung trên dòng (inline frame) hay khung nổi (floating frame). Khung trên dòng (inline frame) không thể thay đổi kích thước.8. Khi trình duyệt không hỗ trợ khung thì nội dung nằm trong thẻ IFRAME bị trả lại. Ta có thể tạo và chèn một khung vào một khối văn bản. These are the <A href="x. You have been learning about frames <BR><BR> <IFRAME src="x.

Số &#160.<em> <i> <small> <strong> <sub> <sup> <ins> <del> <u> Tag <code> <kbd> <samp> <tt> <var> <pre> Tag <abbr> <acronym> <address> <bdo> <blockquote> <q> <cite> <dfn> Định dạng kiểu chữ được nhấn mạnh Chữ in nghiêng Chữ nhỏ Chữ đậm định dạng subscripted (chữ nhỏ) Định dạng superscripted (chữ lên cao) Dạng chữ mới chèn thêm Dạng chữ bị xóa Gạch dưới Mô Tả Định dạng code Kiểu keyboard text Kiểu sample computer code Kiểu teletype text Kiểu a variable Kiểu preformatted text Mô Tả Kiểu tóm tắt Kiểu viết tắt Kiểu địa chỉ Kiểu chữ định hướng Kiểu trích dẫn dài Kiểu trích dẫn ngắn 1 kiểu trích dẫn khác Kiểu định nghĩa Loại một khỏang trắng Tên của ký tự &nbsp. 30 Ký tự đặc biệt Kết quả < nhỏ hơn . &lt. &#60.

&pound. &#163. &#169. &#39. Số &#162. Font chữ Thuộc tính size="number" size="+number" size="-number" face="face-name" color="color-value" color="color-name" face="Times" color="#eeff00" color="red" Chương 3.1. &#167. &#247.1. Mục đích Xác định kích cỡ Tăng kích cỡ font Giảm kích cỡ font Xác định tên font Xác định màu chữ Xác định màu chữ &#62.> & " ' Kết quả ¢ £ ¥ § © ® × ÷ lớn hơn dấu và ngoắc kép ngoặc đơn Loại cent pound yen section copyright registered trademark nhân chia Ví dụ size="2" size="+1" size="-1" &gt. (does not work in IE) Tên của ký tự &cent. &#34. Ra 3 Mục để bạn chọn lựa. &copy. &divide. Giao diện cửa số Deamweaver Khi nhấp Shortcut hiện ra Bảng WorkSpace Setup > Chọn Designer > Ok. S D NG DREAMWEAVER 3. 31 . &apos. &yen. Nếu thay đổi chọn lựa trên > Menu Window > WorkSpace LayOut . &sect. &times. &quot. &reg.1. &#215. &amp. &#174. &#165. Sử dụng FrontPage và Dreamweaver 3. &#38.

(H2). ợp Nếu mở nhiều Files cùng lúc. Có nhiều lực chọn b ột bên dưới cột. ề gì 32 . bạn sẽ thấy các Tables nằm dọc ở phần tr cùng ùng b ằm trên cửa sổ. Ban có thể chỉnh sửa nó để thích hợp với những thói quen của bạn.Cột Create New giúp bạn tạo 1 Trang hoặc 1 Site mới . Bạn nhấp vào 1 Table để chỉnh sửa. ấp ấp Thanh Menu : Nói về những g mà bạn mong đợi thấy trên nền. ào đ ạn Nhấp Nút Restore Down (Góc Phải trên) > Trở lại nhấp Nút Maximize. ệu đ ỉnh Đây là 1 Cửa sổ tài liệu Dreamweaver đơn giản. Bạn có thể Delate Table.

ành phần ộp TEXT : Giúp tạo Style cho Text đã nằm trên Trang tốt hơn là dùng Property ạo T ơn Inspector ( Nằm ở đáy ). Hiện ra gồm các Table – Div – ấp Tables Layer – Khung (Frame) . ới COMMON: Chứa các Đối Tượng thường được sử dụng nhiều nhất nh các liên ứa T ợc như kết với ảnh. Các thanh công cụ c Thanh INSERT : Dưới Thanh Menu. (H6). ằm HTML : Ít hữu dụng . Các Đối tượng nầy giúp bạn mô tả cách bạn muốn tr ) Đ ạn trình bày trang. LAYOUT : nhấp nút xổ xuống chọn Layout .1. Nút và Hộp kiểm (H5).2. FORM: Gồm các thành ph Form như Trường Text . cho phép bạn chèn các đối tượng như Table – Khung – ữu ch ư Script vốn được thực hiện tốt h ở nơi khác ợc hơn APPLICATION : Giúp cho bạn làm việc với các cơ sở dữ liệu bên ngoài b 33 .3.

FLASH ELEMENTS : Chỉ chứa 1 Đối tượng bộ xem ảnh Flash. ững t ợc 34 .Nếu muốn th ợng thêm các thành phần Flash như Nút Flash – Text – Video hãy quay về Common > Nút ư ề Media FAVORITES : Chỉ là rổng không . (H11). dùng để chứa những g àr ể gì bạn muốn nó có . Để làm điều nầy > Chọn Tập hợp Favorites > Nhấp Phải > Cho phép àm điều bạn chọn lựa để thêm những đối tượng thường được sử dụng nhiều nhất. Dùng để chỉnh sửa .

thay đ màu ới Ví ào. Lúc này cửa sổ trình duyệt Internet Explorer (IE) sẽ L ệt hiển thị trang web m chúng ta đang soạn thảo. Các thao tác chí khi soạn thảo một trang web ính • Tạo mới một trang web: Chọn chức năng File/New/Page /Normal Page ạo hay chọn icon New trên Toolbar. bạn có thể biên t trang web n tập dưới dạng WYSIWYG. V dụ. ọn tr • Lưu trang web: Chọn chức năng File/Save hay chọn icon Save tr Chọn trên Toolbar. bạn sẽ thấy đ ếu được các mã HTML tương ứng với cách trình bày của trang web của bạn.2.1. kích thước chữ. ề o Nếu bạn chọn Normal view. b sẽ b bạn thấy các tag tương ứng như sau: c <table border="1" width="100%"> 35 . Thi t k web s d ng MS FrontPage 3.1. • Cửa sổ màn hình soạn thảo trang web cung cấp 3 cách “hi àn h ch “hiểu” (view) khác nhau về 1 trang web. nếu ủa Ví trong Normal view bạn chèn vào một table thì trong HTML view. 3.2.Chức năng của từng Nút và nút xổ xuống kế bên : Để con trỏ lên Nút sẽ thấy ức v ên s Text mô tả chức năng của Nút đó . Để lưu trang web dưới dạng một tên khác chọn chức năng File/Save ưu dư ọn As… • Xem trước hiển thị của trang web đang thiết kế: Chọn chức năng ớc thị File/Preview in Browser. Nhấp Nút xổ xuống kế bên ra chức năng phụ. V dụ bạn có thể gõ văn bản vào. ả b ức (H12). đổi sắc. Nên lưu trang web trư khi ển mà n trước chọn chức năng này. Các chế độ xem cửa sổ c 3. … ớc o Nếu bạn chọn HTML view.3.

1. …. Alignment 2. ta chọn Tabe rồi chọn Split /Merge Cells. . . bạn hãy chọn các dạng bullet và numbering tương ứng. Để thay đổi. o Trình bày (layout) các văn bản (text) và các ảnh đồ họa (graphics). • Để thêm hoặc xóa các cell. tương tự với chức năng Preview in Browser 2.<tr><td width="100%">&nbsp. Khi hộp hội thoại tạo bảng hiện ra. Height. Thời gian cập nhật (Time stamp) • Chọn Insert/Date and Time. Tạo các thành phần của trang web 2. số cột. • Sau khi hộp hội thoại xuất hiện.</td></tr> </table> o Nếu bạn chọn Preview view. ta có thể dựng một trong hai cách: o Chọn Table/Insert Table. • Chọn định dạng ngày tháng và thời gian phù hợp với nhu cầu của bạn 2. 2. ta cũng có thể chọn hình ảnh để thay cho các kiểu bullet thông thường. ta chọn Format/Bullets and Numbering/Picture bullets. Đường kẻ ngang (Horizontal line) • Chọn Insert/Horizotal line. Với chức năng này. rồi chọn ảnh dùng để làm bullet • Để bỏ định dạng bullets. ví dụ như số dòng. thông tin sản phẩm.3. ví dụ như bảng thời khóa biểu. ta click phải chuột lên table. o Chọn Table/Draw Table. kích thước. chọn Table Properties/Border/Sizes bằng 0. kiểu chữ. List • Chọn Format/Bullets and Numbering. Sau đó chọn các thông số về Width. Tables • Người ta thường dùng table để: o Hiển thị các thông tin có dạng dòng/cột. • Để tạo một bảng. ta chọn Format/Bullets and Numbering/Plain Bullets. cột • Để không hiện (hide) border của bảng. ta chọn Format/Bullets and Numbering/Style • Ngoài ra.. Color.4. • Đặt các thuộc tính cho đường kẻ ngang bằng cách double click chuột lên nó. bạn phải cung cấp các thông tin chi tiết cho việc tạo bảng.. 36 .2. ta chọn Table rồi chọn Insert/Delete Cells. bạn sẽ dùng bút vẽ để tạo các dòng. • Để tách một cell hay trộn nhiều cell lại. • Để thay đổi các thuộc tính của bullet như màu sắc..

Sau đó bạn có thể chọn các màu theo ý muốn. chọn Background/ Colors/ Hyperlink • Để đặt tiêu đề cho trang chọn General/Title. 3. • Để đặt các thông số về màu sắc cho hyperlink. • Để tạo các hotspot hyperlink. • Đặt nhạc nền cho trang Background/Sound 37 .com o Liên kết tới một trang trong site. Sau khi hộp thoại hiện ra.yahoo.7. đặt bằng bookmark. font chữ. Chèn hyperlink • Chọn chức năng Insert/Hyperlink. ta chọn hình vẽ tương ứng (hình chữ nhật.5. chọn Background/Formatting/Background picture. 2.2. chọn Background/Colors/Background • Để đăt ảnh nền cho trang./images/shopping. • Để đặt màu nền cho trang. …) trên thanh toolbar pictures.6. Ví dụ: . rồi điền thông tin của hyperlink vào 2. click phải chuột lên ảnh. Chèn ảnh • Chọn chức năng Insert/Picture/From File. gõ vào hyperlink tương ứng. có dạng: /thư mục/tên tập tin.. có dạng: http://… Ví dụ: http:// www. … • Thêm hiệu ứng font chữ cho các hyperlink: Chọn Format/Background. Một số hiệu ứng đặc biệt • Chuyển trang (Page transition): Chọn Format/Page Transition… • Hiệu ứng chữ chuyển động theo chiều ngang (Marquees): Chọn Insert/Component/Marquee. Định dạng trang • Click phải chuột lên trang. Có 3 dạng: o Địa chỉ Internet. check vào Enable hyperlink rollover effects. chọn Page Properties. bạn gõ vào dòng chữ cần chuyển động và đặt các thuộc tính khác như màu sắc. rồi chọn Picture Properties. • Đặt thuộc tính và kích thước của ảnh. Chọn vùng trên ảnh. • Sau khi hộp thoại hiện ra.htm o Liên kết ngay chính trong trang. ellipse.

1. tác d ng c a CSS Trong lĩnh vực xây dựng. Sử dụng các mã định dạng trực tiếp trong HTML tốn hao nhiều thời gian thiết kế cũng như dung lượng lưu trữ trên đĩa cứng. hiện tại CSS đã được hỗ trợ bởi tất cả các trình duyệt. trong lĩnh vực thẩm mỹ làm đẹp. Đó thật sự sẽ là một công việc buồn chán và tốn nhiều thời gian. Ngoài ra. Nó thật sự có hiệu quả đồng bộ khi bạn tạo một website có hàng trăm trang hay cả khi bạn muốn thay đổi một thuộc tính trình bày nào đó. Chẳng hạn. Ngoài ra. Cascading Style Sheets (CSS) 4. chúng ta có trang trí nội thất. điện thoại. Suy cho cùng bạn không biết trình duyệt nào mà người dùng cách nửa vòng trái đất sử dụng. Trước đây các nhà phát triển không kiểm soát được các trang web hiển thị trên trình duyệt. Nhưng với việc sử dụng CSS việc đó là hoàn toàn đơn.Chương 4. Trong khi đó CSS đưa ra phương thức “tờ mẫu ngoại” giúp áp dụng một khuôn mẫu chuẩn từ một file CSS ở ngoài. máy in. picture. table.… Nếu bạn đã từng học qua HTML thì cũng biết HTML cũng hỗ trợ một số thuộc tính định dạng cơ bản cho text. Nhờ có các stylesheet bạn có thể nạp chồng các qui ước của trình duyệt và đặt theo cách riêng của chúng ta. nên bạn hoàn toàn có thể tự tin trang web của mình có thể hiển thị hầu như “như nhau” dù trên một hệ thống sử dụng Windows. Linux hay trên một máy Mac miễn là bạn đang sử dụng một phiên bản trình duyệt mới nhất. XHTML. tạm dịch là tờ mẫu theo Style) 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. Khái ni m.Mỗi trình duyệt đều có thể hiển thị các trang web theo cách riêng của nó. chúng ta có kỹ thuật make-up. bạn có thể xác định kiểu mà trong đó một phần tử <H1> cần hiển thị: <H1><FONT SIZE=3 COLOR=AQUA> <B>Overriding the browser</B></FONT></H1> 38 . CSS còn cho phép bạn áp đặt những kiểu trình bày thích hợp hơn cho các phương tiện khác nhau như màn hình máy tính. CSS cung cấp cho bạn hàng trăm thuộc tính trình bày dành cho các đối tượng với sự sáng tạo cao trong kết hợp các thuộc tính giúp mang lại hiệu quả. còn trong lĩnh vực thiết kế web chúng ta có CSS. CSS (Cascading Style Sheets. … nhưng nó không thật sự phong phú và chính xác như nhau trên mọi hệ thống. Hãy thử tưởng tượng bạn có một website với hàng trăm trang và bạn muốn thay đổi font chữ hay màu chữ cho một thành phần nào đó.… Tác dụng của các stylesheet – Các stylesheet có thể được dùng để: Nạp chồng trình duyệt: .

Vì vậy. Mỗi bộ chọn có các thuộc tính và các giá trị liên quan đến nó. Điều này chắc chắn rằng các trang web của chúng ta đều có cùng diện mạo thông tin khi được hiển thị.Bố cục trang (Page layout) – Những stylesheet có thể dùng để hiển thị font thay đổi màu mà không làm thay đổi cấu trúc của trang web. Chỉ cần làm một lần thật tốt – Chúng ta có thể tạo một stylesheet và được liên kết đến nhiều tài liệu. Style Sheet – Là một danh mục các qui tắc kiểu và có thể nhúng vào bên trong tài liệu HTML. Qui t c stylesheet Stylesheet phân cấp (cascading style sheet) định nghĩa các kiểu có thể được áp dụng vào các trang hoặc các phần tử của trang. Sử dụng lại các stylesheet – Môt khi đã định nghĩa kiểu thông tin. Trong trường hợp đó. 4. Ví dụ. bạn có thể có được nền chung của trang ví dụ như logo của trang và một số thông tin chuẩn(cho các trang) trong một stylesheet. chúng ta có thể kết nối tất cả các trang trên website đến stylesheet.. chúng ta có thể tạo ra một qui tắc kiểu được xác định cho tất cả phần tiêu đề <H1> hiển thị màu vàng xanh. Qui tắc kiểu có thể ứng dụng vào các thành phần được chọn của trang web. Lần lượt thay thế. Điều này có nghĩa là với tư cách là một nhà thiết kế bây giờ bạn có thể tách biệt những yêu cầu về thiết kế hình ảnh trực quan từ cấu trúc logic của trang web và địa chỉ là hai chuyện hoàn toàn khác nhau. 39 . property: value. Ví dụ. Qui tắc kiểu (Style Rule). Tất cả những tài liệu sẽ có diện mạo giống nhau. Điều này sẽ đảm bảo được cách nhìn và cảm nhận thông dụng về trang website.Stylesheet phân cấp là một tập hợp các qui tắc. } Phần của qui tắc được kèm theo trong phạm vi các dấu ngoặc móc được gọi là khai báo. Phần đầu của qui tắc gọi là bộ chọn (Selector). quan trọng nhất là khi bạn thực hiện thay đổi stylesheet thì tất cả các tài liệu được kết nối vào stylesheet sẽ bị thay đổi theo. Tuy nhiên. . nó được gọi là stylesheet nhúng.. bạn có thể thể hiện các tài liệu sao cho đẹp mắt trên bất kỳ màn hình nào và theo bất kỳ độ phân giải nào. chúng ta có thể nhúng stylesheet bên trong tài liệu HTML.2. Các qui tắc (Rules) – Bảng kiểu có thể có một hay nhiều qui tắc. RuleSelector {Declarations property: value. Stylesheet cũng có thể được tạo ra bằng một file bên ngoài và được liên kết với tài liệu HTML. Khi sử dụng các biện pháp liên quan trong stylesheet của bạn. phần trước dấu hai chấm (:) là thuộc tính và phần nằm sau dấu hai chấm là giá trị của thuộc tính đó. Cứ thử hình dung xem có vài trăm trang web và bạn phải xác định kiểu của mỗi trang một cách độc lập. Qui tắc định nghĩa kiểu của tài liệu. Điều này được gọi là khai báo kiểu có sẵn mà nhờ đó các kiểu được áp dụng vào các phần tử HTML đơn lẻ trên một trang web. Khai báo có hai phần. chúng ta có thể xác định một đoạn văn bản bất kỳ in đậm và in nghiêng trên trang.

). Ví dụ 1: <HTML> <HEAD> <STYLE TYPE=”text/css”> H1 {color:limegreen} H1 {font-family:Arial} H2 {color:limegreen} H2 {font-family:Arial} </STYLE> </HEAD> <H1>This is the H1 element</H1> <H2>This is the H2 element</H2> <H3>This is the H3 element with its default style as displayed in the browser</H3> </HTML> Lưu ý: text/css chỉ ra kiểu ‘style’ được dùng ở đây là stylesheet phân cấp ‘cascading style sheet’ Hoặc chúng ta có thể nhóm các qui tắc. Ví dụ 2: <HTML> <HEAD> <STYLE TYPE=”text/css”> H1. H1 là bộ chọn. H2{color:limegreen.Các khai báo được phân cách bởi dấu chấm phẩy (. Mỗi khai báo được tách ra bởi dấu chấm phẩy. Mỗi qui tắt có thể tách rời nhau trong phạm vi thẻ STYLE. Ví dụ như H1 {color: blue} Ở đây.} </STYLE> </HEAD> <H1>This is the H1 element</H1> <H2>This is the H2 element</H2> <H3>This is the H3 element with its default style as displayed in the browser</H3> </HTML> 40 . blue là giá trị. color: blue là khai báo Trong phạm vi khai báo: {Property: Value} Color là thuộc tính. Ta nên đặt dấu chấm phẩy sau lần khai báo cuối cùng.font-family:Arial.

chúng dùng những thông tin bên ngoài để tác động đến việc định dạng. Selector đơn mô tả một phần tử bất chấp vị trí của nó ở đâu trong cấu trúc tài liệu. Sau đây là một số kiểu của selector đơn. nó được xem như là một selector. Selector HTML Những selector này sử dụng tên của phần tử HTML và bỏ đi dấu móc . Selector lớp có dấu chấm (. Bộ nhận dạng tiêu đề H1 là một điển hình. Trong trường hợp đó. Ngoài ra. Các Selector (selector ) trong style sheet (hay các gi l p) Ta có thể dùng các giả lớp trong các selector nhưng không thể dùng chúng trong HTML.1.4. Vì vậy.) đứng trước gọi là ký tự cờ (flag).3. Ví dụ. </P> </BODY> </HTML> Selector lớp Những selector này sử dụng thuộc tính CLASS của các phần tử HTML. font-weight:bold. ta cũng có thể gán định danh lớp cho nhiều phần tử cùng loại khi ta muốn hiển thị các trạng thái khác nhau so với dạng chuẩn.3. Ví dụ sau đây minh họa điều đó Ví dụ 3: <HTML> <HEAD> <STYLE TYPE="text/css"> P{font-style:italic. Có hai kiểu selector cơ bản: 4. theo sau là tên lớp do chúng ta chọn. ta có thể muốn <H2> xuất hiện với nhiều màu khác nhau. Mọi phần tử khi hiển thị có một thuộc tính CLASS được sử dụng để gán vào một định danh (identifier). The only difference is that you remove the brackets. các liên kết đã được ghé qua có thể hiển thị khác đi so với các liên kết chưa được ghé qua như sau: A:link { color: red } A:visited { color: blue } A:active { color: lime } /* unvisited link */ /* visited links */ /* active links */ Selector có thể định nghĩa như là “một chuỗi kí tự xác định ra các phần tử và các quy tắc tương ứng áp dụng cho các phần tử ấy”. Selector đơn Đây là những selector dễ sử dụng nhất. thẻ <P> trong HTML trở thành P và khi đó. ta sử dụng định danh lớp cho <H2>. Ta có thể gán một tên lớp duy nhất cho mọi phần tử khác. color:limegreen} </STYLE> </HEAD> <Body> <P> These selectors use the names of HTML elements. Ví dụ. Tốt hơn hết nên chọn những tên lớp theo mục đích của chúng chứ 41 . với việc sử dụng lớp giả. Về cơ bản.

ta có thể muốn đoạn A hiển thị chữ nghiêng. Ví dụ 5: <HTML> <HEAD> <STYLE type="text/css"> all. những đoạn khác thì hiển thị theo kiểu khác.RED {color:red. Chúng ta nên sử dụng từ khóa all. đoạn A có thể có bộ nhận dạng lớp là . Trong trường hợp đó.water { color:blue } .} P.danger { color:red } </STYLE> </HEAD> <BODY> <P class=water>test water <P class=danger>test danger <P> no style <BR> <EM class=danger>italic</EM> </BODY> </HTML> Khi xác định một lớp kiểu.} H5. ta có thể xác định được phần tử HTML nào có thể sử dụng kiểu này. font-weight:bold.</H5> <BODY bgColor=lavender> <P CLASS=BLUE>This paragraph uses the class BLUE</P> <P>This paragraph does not use the class BLUE</P> <P CLASS=hotpink>This paragraph is hotpink </BODY> </HTML> 42 .hotpink {color:hotpink. font-weight:bold.} </STYLE> </HEAD> <H5 CLASS=RED>This is an H5 element that uses the RED class</H5> <H5 CLASS=hotpink>This is an H5 element that has been allowed to use hotpink style.BLUE {color:blue.slant Ví dụ 4: <HTML> <HEAD> <STYLE TYPE=”text/css”> .không nên chọn tên mô tả màu sắc hay kiểu của chúng. để tất các các phần tử đều có thể sử dụng nó. Ví dụ.

Selector ID được bắt đầu bằng dấu thăng (#).Selector ID Selector ID sử dụng thuộc tính ID của phần tử HTML. ta có thể sử dụng một selector ID để áp dụng một kiểu đặc biệt nào đó cho phần tử <H2>. nếu không được xác định. Ví dụ. Ví dụ 6: <HTML> <HEAD> <TITLE> ID Selectors</TITLE> <STYLE TYPE="text/css"> #control {color:red} </STYLE> </HEAD> <BODY> <P id="control">Fire is of this color</H2> <BR> <P>This paragraph has no style applied </BODY> </HTML> Ví dụ 7: <HTML> <HEAD> <TITLE> Combining ID and Class Selectors</TITLE> <STYLE TYPE="text/css"> . Selector ID được dùng để áp dụng một kiểu vào riêng một phần tử nào đó trên trang Web.forest {color:green} .danger {color:red} #control {color:blue} </STYLE> </HEAD> <BODY> <P class=forest>green things <P class=danger>fire hazards </P> <EM class=forest>more green things</EM> <BR> <EM class=danger>more fire hazards</EM> <UL> <LI class=danger>things that burn <LI class=forest>things that don't burn </UL> 43 . Tương tự với việc sử dụng kiểu nội tuyến mà nhờ đó có thể áp dụng riêng cho một phần tử nào đó. Điều đó không có nghĩa là một kiểu tương tự được áp dụng cho một phần tử <H2> khác trên trang đó.

màu đỏ từ khai báo UL. Bây giờ làm sao để kiểm soát điều đó? Suy cho cùng. Để thay đổi kiểu của phần tử con. thì mỗi phần tử bên trong sẽ kế thừa các kiểu của <BODY>. font-family:Arial. background:lavender. phần tử con kế thừa kiểu được gán cho thẻ cha. Ví dụ 8: <HTML> <HEAD> <TITLE>Contextual selectors</TITLE> <STYLE TYPE="text/css"> BODY{color:blue. ta không muốn tất cả các phần tử trên trang Web xuất hiện cùng một kiểu. Điều này dựa trên khái niệm kế thừa. thỉnh thoảng ta có hai phần tử cùng giá trị.} UL {color:red } </STYLE> <HEAD> <BODY> <UL> <LI>mangoes <LI>oranges <LI>apples </UL> <OL> <LI>mangoes <LI>oranges <LI>apples </OL> </BODY> </HTML> Selector UL trong style sheet xác định các mục trong danh sách(list item) được hiển thị màu đỏ. Chúng kế thừa phông chữ Arial từ khai báo BODY. nói một cách khác đó là sự nạp chồng kế thừa. ta phải sử dụng selector theo ngữ cảnh. Một ví dụ điển hình là phần tử <BODY>. Khi thêm một phần tử vào thẻ <BODY>.<P id=control> water </P> </BODY> </HTML> Selector ngữ cảnh Selector ngữ cảnh liên quan đến ngữ cảnh của phần tử. Ví dụ. Phần tử chính hay phần tử cha có một phần tử con bên trong nó. chúng ta phải có sự thay đổi đặc biệt đối với các phần tử con. nó sẽ nạp chồng lên khai báo 44 . Trong trường hợp đó. Nếu ta xác định font-family trong khai báo UL.

} </Style> Ví dụ trên là cách sử dụng phần tử <STYLE> Thuộc tính STYLE Thuộc tính STYLE được sử dụng để áp dụng style sheet cho từng phần tử. liên k t và chèn m t style sheet vào tài li u HTML Có một số cách ta có thể kết hợp style sheet với HTML 1. font-family: Arial"> . Khi sử dụng thuộc tính Style ta có thể bỏ qua phần tử STYLE và đặt khai báo trực tiếp vào thuộc tính Style trong thẻ mở của phần tử. font-family:Arial. Ví dụ. Ví dụ: <Style Type = "text/css"> H1 {color:maroon. 4. Ví dụ trên là cách sử dụng thuộc tính STYLE. Khi hiển thị các trang. Một style sheet có thể nhỏ như một luật. Phần tử STYLE 2. thì stylesheet của ta phải là một tài liệu riêng.css" Type= "text/css"> Thuộc tính “rel=stylesheet” phải được khai báo nếu không thì trình duyệt sẽ không tải được stylesheet . Nếu ta có dự định áp dụng cùng kiểu trên khắp tài liệu thì lúc ấy đây không phải là cách hay. Ví dụ 9: 45 . Ví dụ: <H2 style="color: green. Thuộc tính Style 3. thì chỉ tài liệu nào có nhúng STYLE mới được tác động. <LINK REL = stylesheet HREF= “stylesmine. </H2> Rõ ràng là chúng ta chỉ nên dùng kiểu này khi thay đổi kiểu cho một phần tử đặc biệt nào đó.của selector BODY. tất cả các quy tắc được định nghĩa giữa thẻ mở và thẻ đóng. K t h p. Phần tử Link Nếu ta muốn sử dụng phần tử LINK. Sau đó chúng ta phải thêm địa chỉ Web của stylesheet vào.} P {color:hotpink. vì thế các thuộc tính của OL kế thừa từ selector BODY.. Không có selector OL trong style sheet. Phần tử Link Phần tử STYLE Phần tử STYLE được chèn vào phần tử <HEAD> của tài liệu.4..

Thi t l p thu c tính trong stylesheet Chúng ta có thể thiết lập nhiều thuộc tính trong stylesheet. Bảng dưới đây cho thấy nhiều thuộc tính có thể được sử dụng trong stylesheet.css"> </HEAD> <H2>This is an H2 element</H2> <BR> <BODY> <P>This is a paragraph </BODY> </HTML> 4.} P {color: limegreen.Sheet1.} Tệp . Thuộc tính Các thuộc tính font Tên CSS Font font-size font-style Các thuộc tính văn bản text-align text-indent vertical-align Các thuộc tính hộp border border-width border-bottom border-color Các thuộc tính về vị trí Clip height Left Top z-index 46 .htm <HTML> <HEAD> <TITLE>Linking external style sheets</TITLE> <LINK REL=STYLESHEET TYPE="text/css" HREF="sheet1. font-style:italic.5.css H2 {color:blue.

Nó chứa đựng các Đối tượng. Javascript là một ngôn ngữ có đặc tính: • Đơn giản.các Object được nhìn theo 2 khía cạnh: a. • Động (Dynamic). Trong các Object đã tồn tại được chia thành 2 kiểu: Các Object của JavaScript (JavaScript Built-in Object).Các đối tượng này bao gồm các phương pháp (Method) làm việc với các thuộc tính (Properties) của nó. Các Object đã tồn tại.1.maxspeed Thêm các phương pháp cho đối tượng:( Method to Object) 47 . Định nghĩa thuộc tính của đối tượng: (Object Properties) Cú pháp : Object-name.1. JavaScript cung cấp 1 bộ các Built-in Object để cung cấp các thông tin về sự hiện hành của các đối tượng được load trong trang Web và nội dung của nó.Chương 5. • Hướng đối tượng (Object Oriented).tên đặc tính) Ví dụ :Một đối tượng airplane có các thuộc tính như sau: Airplane. Cơ bản về Javascript 5. Cung cấp các tính chất và phương pháp làm việc với các địa chỉ URL hiện hành được mở. Đây là một đối tượng được sử dụng nhiều nhất.1. Browser sẽ thông dịch các Script và thực hiện các công việc xác định.model Airplane. Chương trình nguồn JavaScript được thông dịch trong trang HTML sau khi toàn bộ trang được load nhưng trước khi trang được hiển thị.price Airplane. Các Object do người lập trình xây dựng. b. Các Object này cho phép người lập trình sử dụng để phát triển ứng dụng. các đối tượng này cho phép chúng ta điều khiển việc hiển thị thông tin và đáp ứng các sự kiện trong môi trường Navigator. Đặc tính của ngôn ngữ Javascript: Javascript là một ngôn ngữ do hãng Netscape Navigator tạo ra.tính chất và các phương pháp làm việc với các thành phần của tài liệu như các form.2.1.Ví dụ Đối tượng Mô tả Window Location History Document Cung cấp các phương pháp và các tính chất cho cửa sổ hiện hành của trình duyệt. applet. anchor. Netscape Navigator cung cấp các đối tượng cho phép JavaScript tương tác với file HTML. là một ngôn ngữ thông dịch (interpreter). Các đối tượng được cung cấp bởi môi trường Netscape.seating Airplane. Trong JavaScript . chương trình nguồn của nó được nhúng (embedded) hoặc tích hợp (integated) vào tập tin HTML chuẩn. bao gồm các đối tượng cho mỗi frame. 5.Property-name (tên đối tượng. Khi file được load trong Browser (có hỗ trợ cho JavaScript). Ngôn ngữ JavaScript: Một trong những đặc tính quan trọng của ngôn ngữ JavaScript là khả năng tạo và sử dụng các đối tượng (Object). link. Các đối tượng history cung cấp thông tin về các danh sách cũ và có thể giới hạn sự tương tác với danh sách. Giới thiệu ngôn ngữ Javascript 5.

2.Sau khi đã có các thông tin về airplane ta tiếp tục xây dựng phương pháp để sử dụng thông tin này. 5. Các khối lệnh: Nhiều dòng lệnh có thể được liên kết với nhau và được bao bởi { } Ví dụ: 48 .Ví dụ bạn muốn in ra mô tả của airplane hoặc tính toán khoảng cách tối đa của cuộc hành trình với nhiên liệu đã có: Airplane.js) + LANGUAGE: Chỉ định ngôn ngữ được sử dụng trong Script và các phiên bản sử dụng (ví dụ như :JavaScript .các toán tử và các biểu thức trên cùng một dòng và kết thúc bằng . Cú pháp cơ bản của lệnh : JavaScript xây dựng các hàm.3. Ví dụ: document..Dòng dấu Script đối với các Browser không cung cấp (support) JavaScript Program //Dòng kết thúc việc dấu Script và chú thích . --> </SCRIPT> </BODY> </HTML> 5. Một số câu lệnh cơ bản 1..JavaScript ..VBScript). Nhúng JavaScript vào trong tập tin HTML: Cú pháp: <SCRIPT LANGUAGE=”JavaScript”> JavaScript Program </SCRIPT> Thuộc tính của thẻ SCRIPT + SRC :Địa chỉ URL chỉ đến tập tin chương trình JavaScript (*.1.1</TITLE> </HEAD> <BODY> Here is result: <SCRIPT LANGUAGE="Javascript"> <!-document.hcmuns.vn/scroll.> </SCRIPT> Sử dụng tập tin JavaScript bên ngoài : <SCRIPT LANGUAGE=”JavaScript” SRC=”http://www.js”> <!. 2.writeln("It work<BR>").> </SCRIPT> Thêm chương trình vào tập tin HTML: <HTML> <HEAD> <TITLE>Listing 2.2 vv… .các phát biểu.writeln("It work<BR>")..1.Dòng dấu Script đối với các Browser không cung cấp (support) JavaScript Program //Dòng kết thúc việc dấu Script và chú thích .edu. Ẩn các Scripts đối với các Browser không cung cấp JavaScript: <SCRIPT LANGUAGE=”JavaScript”> <!.distance() Tạo một instance của đối tượng: Trước khi thao tác với một đối tượng của JavaScript ta phải tạo một instance cho đối tượng đó.description() Airplane.

writeln(“Test”). Xuất dữ liệu ra cửa sổ trình duyệt: Dùng 2 phương pháp document."). .write(“Test”).writeln("One.{ document.gif">').4 </TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE="Javascript"> <!.write("This is text bold </B>").document.document.writeln("It work!").-> </SCRIPT> </BODY> </HTML> Ví dụ 2: <HTML> <HEAD> <TITLE>Example 2. 4.write('<IMG SRC="welcome.document.-> </SCRIPT> </BODY> </HTML> 5. document.writeln() Ví dụ: document. document.writeln("Does It work"). } 3. 49 . Xuất các thẻ HTML từ JavaScript Ví dụ 1: <HTML> <HEAD> <TITLE>Outputting Text</TITLE> </HEAD> <BODY> This is text plain <BR> <B> <SCRIPT LANGUAGE="Javascript"> <!. document. .write() và document. Sử dụng phương pháp writeln() với thẻ PRE: <HTML> <HEAD> <TITLE>Outputting Text</TITLE> </HEAD> <BODY> <PRE> <SCRIPT LANGUAGE="Javascript"> <!.write("<BR><H1>WELCOME TO JAVASCRIPT</H1>").

document. document. Các kí tự đặc biệt trong chuổi: \n : New line \t : Tab \r : carriage return \f : form feed \b: backspace Ví dụ: document. document.document.6</TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE="Javascript"> <!.-> </SCRIPT> </BODY> 8.writeln(prompt("enter your favorite color:". Ví dụ: <HTML> <HEAD> <TITLE>Example 2.").write("Your favorite color is:").writeln("Two. document. Ví dụ 1: <HTML> <HEAD> <TITLE>Listing 2.5 </TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE="Javascript"> <!. 7. Làm việc với các Hộp thoại (dialog boxes) Sử dụng hàm alert() để hiển thị một hộp thông báo.. .gif">').writeln("It work!\n").write(". document. .").-> </SCRIPT> </PRE> </BODY> </HTML> 6.write("Three")."Blue")).write('<IMG SRC="welcome.. .-> </SCRIPT> </BODY> </HTML> Ví dụ 2: <HTML> <HEAD> 50 .alert("Welcome to JS"). Tương tác với người sử dụng: Sử dụng phương pháp promt() để tương tác với người sử dụng.

"name") + " Welcome to JS </H1>"). Dữ liệu kiểu số: + Số nguyên: ví dụ 720 + Số Octal: ví dụ :056 + Số Hexa:ví dụ:0x5F + Số thập phân :ví dụ :7. -34. để xuất nội dung của biến. .write('<IMG SRC="welcome. Dữ liệu kiểu văn bản (giống như kiểu chuổi) 10. .").-> </SCRIPT> </BODY> </HTML> 9. document.6</TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE="Javascript"> <!. Ta có thể dùng document.2 .-> </SCRIPT> </BODY> </HTML> Sử dụng dấu + để cộng 2 chuổi đơn lại: Ví dụ 3: <HTML> <HEAD> <TITLE>Listing 2.6</TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE="Javascript"> <!. document. d." + prompt("enter your name:". Dữ liệu kiểu Boolean: Kết quả trả về là true hoặc false. document.document.24 . Dữ liệu kiểu null: Trả về giá trị rỗng. Dữ liệu kiểu chuỗi: ví dụ: ” Hello” ’245’ ““ c.2E3 b."name")).write("<H1>Greeting . Ví dụ 1: dùng từ khóa var để khai báo biến 51 . Var example=”Hello”. Các kiểu dữ liệu trong JavaScript: a.write("<H1>Greeting .write(example). document.write('<IMG SRC="welcome.write("Welcome to JS </H1>").<TITLE>Listing 2.gif">').gif">'). Tạo biến trong JavaScript: Var example.document. e.writeln(prompt("enter your name:".

write('<IMG SRC="Welcome. document.write('<IMG SRC="Welcome. name=prompt("enter your friend's name:". document.write("<H1>Greeting .var name=prompt("enter your name:".gif">').-> </SCRIPT> </HEAD> <BODY> <SCRIPT LANGUAGE="Javascript"> <!-document. . </SCRIPT> </HEAD> <BODY> <SCRIPT LANGUAGE="Javascript"> <!-document. --> </SCRIPT> </BODY> </HTML> 11.gif">')."friend's name").y=5 x+=y => x=15 -= Trừ bên trái cho bên phải .1</TITLE> <SCRIPT LANGUAGE="Javascript"> <!. "). sau đó gán kết quả cho bên trái phép toán Ví dụ: cho x=10.gán kết quả lại cho bên trái 52 ." + name + " Welcome to JS </H1>")."name")."name"). alert ("greeting " + name + " . Biến và biểu thức: • Thiết lập biểu thức: Cú pháp: <biến> <toán tử > <biểu thức> * Toán tử: = Thiết lập giá trị bên phải cho bên trái Ví dụ :x=5 += Cộng trái và phải.2</TITLE> <SCRIPT LANGUAGE="Javascript"> var name=prompt("enter your name:".write("<H1>Greeting .<HTML> <HEAD> <TITLE>Example 3." + name + " Welcome to JS </H1>"). --> </SCRIPT> </BODY> </HTML> Ví du 2: tạo lại một giá trị mới cho biến <HTML> <HEAD> <TITLE>Example 3.

Ví dụ: x=5. (=> z=6 vì sau đó x gán cho z) sau đó x tăng 1 => x=7 Do đó ta có kết quả cuối cùng là: x=7.5 * 72. x=-x => x=-5 • Phép toán Logic && : và ||: hoặc ! not Ví dụ: x=5 .3 12 % 5 Dấu ++ và dấu -.c=3 (x>y) && (x>c) false && anything is always false (x>y) || (c<x) => true !x • Toán tử so sánh trong JavaScript: == != > < >= <= Ví dụ: 1==1 => true 3<1 =>false 5 >=4 =>true “the” != “he” => true 4==”4” =>true • Toán tử điều kiện: Cú pháp: (điều kiện ) ? giá trị 1 : giá trị 2 Nếu điều kiện đúng thì trả về giá trị 1 53 . y=++x.y=6.và dấu Ví dụ: x=5.x-=y => x=5 *= Nhân bên trái cho bên phải.z=6.y=2 .gán kết quả lại cho bên trái x/=y => x=2 %= Chia bên trái cho bên phải và lấy số dư gán lại cho bên trái x%=y => x=0 * Các toán tử khác: Ví dụ: x+=15+3 => x=18 8+5 32.gán kết quả cho bên trái x*=y => x=50 /= Chia bên trái cho phải . (=> y=6 vì x tăng lên 6) z=x++.

var response=prompt(question.writeln(“It‘s the weekend”). if (điều kiện) { Mã JavaScript } Ví dụ: if (day==”Saturday”) { document. var output = (response==answer) ? correct:incorrect.Nếu điều kiện sai thì trả về giá trị 2 Ví dụ: (day=”Saturday”) ? “Weekend” : “Not Saturday” • Toán tử chuổi: “ Welcome to “ + “ Netscape Navigator” Ví dụ: Var welcome=”Welcome to” Welcome += “ Netscape Navigator” ! welcome= “Welcome to Netsacpe Navigator” Ví dụ : Sử dụng toán tử điều kiện để kiểm tra ngỏ vào <HTML> <HEAD> <TITLE>Example 3. alert(“ It’s the weekend”). var correct='<IMG SRC="correct.writeln(“It‘s the weekend”). var answer=20. </SCRIPT> </HEAD> <BODY> <SCRIPT LANGUAGE="Javascript"> <!-document. --> </SCRIPT> </BODY> </HTML> 12.write(output)."0"). } if (day!=”Saturday”) { 54 . var incorrect='<IMG SRC="incorect. Cấu trúc điều kiện if – else if điều kiện lệnh . } Ví dụ: if (day==”Saturday”) { document.gif">'.3</TITLE> <SCRIPT LANGUAGE="Javascript"> var question="What is 10+10 ?".gif">'.

var correct='<IMG SRC="correct.writeln(“It‘s the weekend”). } Sử dụng cấu trúc else – if cho ví dụ ở trên if (day==”Saturday”) { document. var answer=20.writeln(“It‘s not Saturday”).gif">'.else <HTML> 55 .write(output). } else { document. </SCRIPT> </HEAD> <BODY> <SCRIPT LANGUAGE="Javascript"> <!-document.document."0"). } var output = (response ==answer ) ? correct:incorrect . } Cấu trúc kết hợp : if điều kiện 1 { Các lệnh JavaScript if điều kiện 2 { Các lệnh JavaScript } else { các lệnh khác } Các lệnh JavaScript } else { Các lệnh khác } Ví dụ 1 : Sử dụng phương pháp confirm() với phát biểu if <HTML> <HEAD> <TITLE>Example 3. if (response != answer) { if (confirm("Wrong ! press OK for a second change")) response=prompt(question. var incorrect='<IMG SRC="incorect. --> </SCRIPT> </BODY> </HTML> Ví dụ 2 : Sử dụng phương pháp confirm() với phát biểu if .gif">'. var response=prompt(question.writeln(“It‘s not Saturday”)."0").3</TITLE> <SCRIPT LANGUAGE="Javascript"> var question="What is 10+10 ?".

--> </SCRIPT> </BODY> </HTML> 5.3.gif">'. Khi hàm printName()được thi hành giá trị của name là "Bob" nếu gọi hàm printName()với đối số là một biến var user = “John”.write().write(name). document. } Ví dụ: Gọi hàm printName()với lệnh sau printName(“Bob”)."0"). để định nghĩa hàm bạn theo cú pháp sau: function function_name(parameters. var correct='<IMG SRC="correct. Hàm và đối tượng Trong kỹ thuật lập trình các lập trình viên thường sử dụng hàm để thực hiện một đoạn chương trình thể hiện cho một module nào đó để thực hiện một công việc nào đó. response=prompt(question. document. var response=prompt(question.3</TITLE> <SCRIPT LANGUAGE="Javascript"> var question = "What is 10+10 ?".write(“<HR>Your Name is <B><I>”).gif">'. }else { if (confirm("Correct ! press OK for a second question")) { question="What is 10*10".write(output). document. </SCRIPT> </HEAD> <BODY> <SCRIPT LANGUAGE="Javascript"> <!-document. answer=100. } } var output = (response ==answer ) ? correct:incorrect ."0").<HEAD> <TITLE>Example 3. Trong Javascript có các hàm được xây dựng sẵn để giúp bạn thực hiện một chức năng nào đó ví dụ như hàm alert(). var incorrect='<IMG SRC="incorect. parseInt() và bạn cũng có thể định nghĩa ra các hàm khác của mình để thực hiện một công việc nào đó của bạn. 56 .write(“</B></I><HR>”). if (response != answer) { if (confirm("Wrong ! press OK for a second change")) response=prompt(question. arguments) { command block } Truyền tham số: function printName(name) { document. var answer=20."0").

printName(user).1</TITLE> <SCRIPT LANGUAGE=”JavaScript”> <!-. document.write(result). Phạm vi của biến: Biến toàn cục (Global variable) Biến cục bộ (Local variable) Trả về các giá trị: Ví dụ: Dùng return để trả về giá trị của biến cube. return cube.gif”>’.”0"). function cube(number) { var cube = number * number * number. Nếu bạn muốn thay đổi giá trị của name bạn có thể làm như sau : name = “Mr. //CHECK THE RESULT return (response == answer) ? correct : incorrect. } Ví dụ: <HTML> <HEAD> <TITLE>Example 4. var correct=’<IMG SRC=”correct. eval(“10*10”) trả về giá trị là 100 Hàm gọi lại hàm: Ví dụ: <HTML> <HEAD> <TITLE>Example 4.HIDE FROM OTHER BROWSERS //DEFINE FUNCTION testQuestion() function testQuestion(question) { //DEFINE LOCAL VARIABLES FOR THE FUNCTION var answer=eval(question).gif”>’. var incorrect=’<IMG SRC=”incorrect.HIDE FROM OTHER BROWSERS //ASK QUESTION AND OUTPUT RESULTS var result=testQuestion(“10 + 10”). “ + name. Khi đó name là “John”. //STOP HIDING FROM OTHER BROWSERS --> </SCRIPT> </BODY> </HTML> Hàm eval dùng chuyển đổi giá trị chuổi số thành giá trị số. var output=”What is “ + question + “?”. } // STOP HIDING FROM OTHER BROWSERS --> </SCRIPT> </HEAD> <BODY> <SCRIPT LANGUAGE=”JavaScript”> <!-.2</TITLE> 57 . //ASK THE QUESTION var response=prompt(output.

2</TITLE> <SCRIPT LANGUAGE=”JavaScript”> <!-.gif”>’.write(result). //CHECK THE RESULT if (chances > 1) { return (response == answer) ? correct : testQuestion(question. //CHECK THE RESULT return (response == answer) ? correct : testQuestion(question). document. //ASK THE QUESTION var response=prompt(output. //ASK THE QUESTION var response=prompt(output. //STOP HIDING FROM OTHER BROWSERS --> </SCRIPT> </BODY> </HTML> Ví dụ 2: <HTML> <HEAD> <TITLE>Example 4.<SCRIPT LANGUAGE=”JavaScript”> <!-. } // STOP HIDING FROM OTHER BROWSERS --> </SCRIPT> </HEAD> <BODY> <SCRIPT LANGUAGE=”JavaScript”> <!-. var incorrect=’<IMG SRC=”incorrect. var incorrect=’<IMG SRC=”incorrect. } } // STOP HIDING FROM OTHER BROWSERS --> </SCRIPT> </HEAD> 58 .gif”>’. } else { return (response == answer) ? correct : incorrect. var output=”What is “ + question + “?”.”0"). var correct=’<IMG SRC=”correct.gif”>’.HIDE FROM OTHER BROWSERS //DEFINE FUNCTION testQuestion() function testQuestion(question) { //DEFINE LOCAL VARIABLES FOR THE FUNCTION var answer=eval(question).chances) { //DEFINE LOCAL VARIABLES FOR THE FUNCTION var answer=eval(question).”0").gif”>’.chances-1).HIDE FROM OTHER BROWSERS //ASK QUESTION AND OUTPUT RESULTS var result=testQuestion(“10 + 10”). var correct=’<IMG SRC=”correct.HIDE FROM OTHER BROWSERS //DEFINE FUNCTION testQuestion() function testQuestion(question. var output=”What is “ + question + “?”.

77).bobGrade).age = age. this.9. Thêm phương pháp cho đối tượng: function displayProfile() { document.75). } Đối tượng là thuộc tính của đối tượng khác Ví dụ: function grade (math.82).grade.10.name + “<BR>”).math = math.age.science: dùng lấy điểm môn Khoa học của student2 2.75).9. } Để tạo một Object ta sử dụng phát biểu new. 59 .mother = “Susan”.grade = grade. Tạo đối tượng 1.4. student1.80. 3 thuộc tính của đối tượng student1 là : student1. //STOP HIDING FROM OTHER BROWSERS --> </SCRIPT> </BODY> </HTML> 5.3).grade = grade.write(“Name: “ + this. this. mother) { this.<BODY> <SCRIPT LANGUAGE=”JavaScript”> <!-. grade. Để thêm thuộc tính cho student1 bạn có thể làm như sau: student1. Định nghĩa thuộc tính của đối tượng: function student(name.age = age. science) { this. hoặc bạn có thể định nghĩa lại hàm student function student(name.science = science.mother = mother.10. grade) { this.name student1.age student1.grade Ví dụ để tạo đối tượng student2 student2 = new student(“Jane”.name = name.janeGrade). this.math:dùng để lấy điểm Toán của student1 student2.write(result). this. } bobGrade = new grade(75. this.Ví dụ để tạo đối tượng student1 student1 = new student(“Bob”. english.name = name. student1 = new student(“Bob”. age.HIDE FROM OTHER BROWSERS //ASK QUESTION AND OUTPUT RESULTS var result=testQuestion(“10 + 10”. this. this.88. document. janeGrade = new grade(82. student2 = new student(“Jane”.english = english.grade.

socsec). this.grade.socsec=prompt(“Enter Social Security Number for “ + this.age.name. this.HIDE FROM OTHER BROWSERS //DEFINE METHOD function displayInfo() { document. document.write(“</PRE>”).number=prompt(“Enter Employee Number for “ + this.displayInfo=displayInfo.mother = mother. } //DEFINE OBJECT function employee() { this. document. this. // STOP HIDING FROM OTHER BROWSERS --> </SCRIPT> </BODY> </HTML> Vi du: <script LANGUAGE="JavaScript"> <!-.grade.name.name=prompt(“Enter Employee’s Name”. document.Begin 60 . grade) { this.displayProfile().write(“English Grade: “ + this.salary). } student1.displayInfo().write(“<H1>Employee Profile: “ + this.name.”000-000").name = name.writeln(“Annual Salary: “ + this. document.english + “<BR>”).math + “<BR>”). } newEmployee=new employee().science + “<BR>”). this.grade.writeln(“Social Security Number: “ + this.HIDE FROM OTHER BROWSERS newEmployee. document.write(“Age: “ + this. } function student(name.write(“Science Grade: “ + this.000"). this.name + “</H1><HR><PRE>”).age + “<BR>”).grade = grade. this.3</TITLE> <SCRIPT LANGUAGE=”JavaScript”> <!-. Ví du: <HTML> <HEAD> <TITLE>Example 4.”$00.”Name”).write(“Math Grade: “ + this. document.document.number).displayProfile = displayProfile.salary=prompt(“Enter Annual Salary for “ + this. document. // STOP HIDING FROM OTHER BROWSERS --> </SCRIPT> </HEAD> <BODY> <SCRIPT LANGUAGE=”JavaScript”> <!-.”000-00-0000").age = age.mother + “<BR>”).write(“Mother’s Name: “ + this. this.writeln(“Employee Number: “ + this. this. document.

var day="". myhours = mydate. ampmhour = (myhours > 12) ? myhours .getYear().getHours(). else if(mymonth ==2) month = "tháng ba ". else if(myday == 6) day = " Thứ bảy . myweekday= mydate. else if(myday == 4) day = " Thứ năm. 61 . else if(mymonth ==3) month = "tháng tư ". myminutes = ((mytime < 10) ? ':0' : ':') + mytime. myday = mydate. mymonth = mydate.getMonth().getDate(). mydate = new Date(). ". ".getMinutes(). if(mymonth == 0) { month = "tháng một ". var ampmhour="". mytime = mydate. else if(mymonth ==7) month = "tháng tám ". var ampm="". var year="". ". ". else if(mymonth ==9) month = "tháng mười ".getDay(). myyear= mydate. ". else if(myday == 5) day = " Thứ sáu . year = myyear.} else if(mymonth ==1) month = "tháng hai ".12 : myhours. else if(myday == 1) day = " Thứ hai. ampm = (myhours >= 12) ? 'Buổi Chiều ' : ' Buổi Sáng '. var month="". ". else if(myday == 3) day = " Thứ tư. ". else if(mymonth ==8) month = "tháng chín ". else if(mymonth ==6) month = "tháng bảy ". else if(mymonth ==4) month = "tháng năm. var myweekday="". weekday= myweekday. else if(mymonth ==5) month = "tháng sáu ". else if(myday == 2) day = " Thứ ba. if(myday == 0) day = " Chủ Nhật . ".

</script> </body> 5. // End --> </script> Trong phần body bạn có thể xuất ra dạng như sau: <body> <script> document. }”> Ví dụ: <INPUT TYPE=”text” onChange=” alert(‘Thanks for the entry. Xãy ra khi giá trị của Form Field bị thay đổi bởi user. document. Cú pháp của một bộ quản lý sự kiện: <HTML_TAG OTHER_ATTRIBUTES eventHandler=”JavaScript Program”> Ví dụ: <INPUT TYPE=”text” onChange=”checkField(this)”> Ví dụ: <INPUT TYPE=”text” onChange= “if (parseInt(this.write("<b><font color=#0000ff face='VNI-Times. confirm(‘Do you want to continue?’).5.’).write( month + " . Xãy ra khi User xác nhận đã nhập xong dữ liệu.else if(mymonth ==10) month = "tháng mười một ". Xãy ra khi ngõ vào tập trung vào thành phần của Form Xãy ra khi một trang được Load vào trong bộ duyệt.value) <= 5) { alert(‘Please enter a number greater than 5. Xãy ra khi User chọn 1 trường của thành phần Form." + day + " ngày " + myweekday +" "). năm " + year + "</font>"). “> 62 . document.helvetica. Bộ quản lý sự kiện (Event Handler) Để quản lý các sự kiện trong javascript ta dùng các bộ quản lý sự kiện.’). xử lý sự kiện Các sự kiện cung cấp các tương tác với cửa sổ trình duyệt và tài liệu hiện hành đang được load trong trang web. else if(mymonth ==11) month = "tháng mười hai ". các hành động của user khi nhập dữ liệu vào form và khi click vào các button trong form. Khi sử dụng bộ quản lý sự kiện bạn có thể viết các hàm để biểu diễn cho các hành động dựa vào các sự kiện đựoc chọn Bảng sự kiện trong Javascript Tên sự kiện Mô tả blur click change focus load mouseover select submit unload Xãy ra khi điểm tập trungcủa ngõ vào được di chuyển ra khỏi một thành phần của Form (Khi user click ra ngoài một trường) Khi user Click vào 1 link hoặc thành phần của Form. Xãy ra khi User di chuyển mouse qua một Hyperlink.write(" .arial'>" + ampmhour + "" + myminutes + ampm). Xãy ra khi User rời khỏi trang Web. Các sự kiện.

” onUnload=”alert(‘Goodbye! Sorry to see you go!’). radio buttons. buttons.’Name’).Các thành phần của Form bao gồm text fields. checkboxes. alert(‘Greetings ‘ + name + ‘.Từ khóa this: quy cho đối tượng hiện hành. onFocus. onUnload onLoad.1</TITLE> <SCRIPT LANGUAGE=”JavaScript”> <!-.1</TITLE> 63 . onSelect onBlur. và selection lists. onUnload Form onSubmit Cách dùng bộ quản lý sự kiện onLoad & onUnload <HTML> <HEAD> <TITLE>Example 5. onSelect OnClick onClick OnClick onClick. Selection list Text element Textarea element Button element Checkbox Radio button Hypertext link Reset button Submit button Document Window onBlur.”> <IMG SRC=”title. onChange. welcome to my page!’). sorry to see you go!’).1</TITLE> </HEAD> <BODY onLoad=”alert(‘Welcome to my page!’). onFocus onBlur.HIDE FROM OTHER BROWSERS var name = “”.gif”> </BODY> </HTML> Vi du: <HTML> <HEAD> <TITLE>Example 5. Ví dụ: <INPUT TYPE=”text” onChange=”checkField(this)”> Các bộ quản lý sự kiện trong Javascript Đối tượng Bộ quản lý sự kiện tương ứng.gif”> </BODY> </HTML> Vi du <HTML> <HEAD> <TITLE>Example 5. // STOP HIDING FROM OTHER BROWSERS --> </SCRIPT> </HEAD> <BODY onLoad=” name = prompt(‘Enter Your Name:’. onMouseOver OnClick OnClick onLoad. onChange. onChange. onFocus.Trong Javascript Form là mộ đối tượng.” onUnload=” alert(Goodbye ‘ + name + ‘.”> <IMG SRC=”title.

””).value = prompt(“Please enter a JavaScript mathematical expression”. và onChange. onFocus.”> <IMG SRC=”title.entry. welcome to my page!’).’Name’).value).” onUnload=”goodbye(). alert(‘Greetings ‘ + name + ‘.” onChange=”check(this). calculate(form).blur().value = eval(form. } //STOP HIDING FROM OTHER BROWSERS --> </SCRIPT> </HEAD> <BODY> <FORM METHOD=POST> Enter a JavaScript mathematical expression: <INPUT TYPE=text NAME=”entry” 64 .entry. Ta dùng từ khóa this để chuyển đối tượng của trường hiện hành đến hàm check() Bạn cũng có thể dựa vào các phương pháp và các thuộc tính của đối tượng bằng phát biểu sau: this.results.HIDE FROM OTHER BROWSERS // DEFINE GLOBAL VARIABLE var name = “”. onSubmit.methodName() và this. sorry to see you go!’). Ví dụ: <HTML> <HEAD> <TITLE>Example 5.3</TITLE> <SCRIPT LANGUAGE=”JavaScript”> <!-.entry.”> Khi giá trị thay đổi function check() sẽ được gọi.propertyName. } function getExpression(form) { form.gif”> </BODY> </HTML> Các sự kiện và Form Cac sự kiện được sử dụng để truy xuất Form như: OnClick. function hello() { name = prompt(‘Enter Your Name:’.<SCRIPT LANGUAGE=”JavaScript”> <!-. onBlur. } function goodbye() { alert(Goodbye ‘ + name + ‘. form. } // STOP HIDING FROM OTHER BROWSERS --> </SCRIPT> </HEAD> <BODY onLoad=”hello().HIDE FROM OTHER BROWSERS function calculate(form) { form. Ví dụ: <INPUT TYPE=text NAME=”test” VALUE=”test” onBlur=”alert(‘Thank You!’).

document. } Ví dụ: var num=1.write("<H1>" + name + " 's 10 favorite foods </H1> ").blur().”> </FORM> </BODY> </HTML> formObjectName. var query= " " .value: dùng lấy giá trị của trường form hiện hành.i<=10.fieldname:Dùng để chỉ tên trường của hiện hành trong Form. for (var i=1 . formObjectName. 65 . i < 5 . Vòng lặp while : Cú pháp: While ( điều kiện) { lệnh JavaScript . } --> </SCRIPT> </BODY> </HTML> 2 .VALUE=”” onFocus=”getExpression(this. Sử dụng vòng lặp trong JavaScript 1 . condition .fieldname. update expression ) Ví dụ : for (i = 0 . Vòng lặp for : Cú pháp : for ( init value .i++) { document.writeln(num).form). } Ví dụ: <HTML> <HEAD> <TITLE> for loop Examle </TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> <!-var name=prompt("What is your name?" . i++) { lệnh ."name").”> <BR> The result of this expression is: <INPUT TYPE=text NAME=”results” VALUE=”” onFocus=”this. while(num<=10) { document. 'food' ) + '<BR>').write(i + " " + prompt('Enter food number ' + i.

while(answer!=correct) { answer=prompt(question. Tạo mảng với vòng lặp for: function createArray(num) { this. alink b . var correct=100. form g . j<num. } 3. anchor c . location k . var question=” what is 10*10 ?” . title m . form. write() e . open() d . các đối tượng đó là: • Các frame đã được tạo • Các đối tượng location và histtory • Đối tượng document Đối tượng document chứa (encompasses) tất cả các thành phần trong trang HTML.”0”). 1) Các thuộc tính (properties) của đối tượng document a . bgColor d . referrer l . for ( var j=0 . j++) this[j]=0. link). ngoài các thuộc tính Window đối tượng window còn giữ các đối tượng khác mà có thể được xem như là các thành phần (member) của window.num++. } Ví dụ: var answer=” “ .Hầu như mọi chương trình JavaScript đều có sử dụng đối tượng này để tham khảo đến các thành phần trong trang HTML. history. } Hàm sẽ tạo một mảng có giá trị index bắt đầu là 0 và gán tất cả các giá trị của mảng về 0 . linkColor i . Để sử dụng đối tượng mảng ta có thể làm như sau: newArray= new createArray(4) Sẽ tạo ra một mảng gồm 4 thành phần newArray[0] … NewArray[3] Sử dụng đối tượng Windows Window là đối tượng của môi trường Navigator. lastModified h . writeln() 66 . Đây là một đối tượng hoàn hảo có các đối tượng khác của JavaScript gán (attached) vào nó (như là anchor.length=num. cookies e . links j . fgColor f . vlinkColor 2) Các hành vi (Methods) của đối tượng document a . clear() b . close() c .

status=’Chuyen de PLC’ . open (“URL” . close() : Đóng cửa sổ hiện hành. open() : Mở một cửa sổ mới với 1 tài liệu được chỉ ra hoặc mở một tài liệu trong một tên cửa sổ được chỉ định. “ >Lop chuyen dề PLC </A> <A HREF=”tkweb. setTimeout() : f . defaultStatus : Giá trị mặt nhiên được hiển thị ở thanh trạng thái b .3) Các thuộc tính của đối tượng Window a .return true .Ngoài ra đối tượng window có thể thực hiện event handler : onLoad=statement Làm việc với status bar Khi user di chuyển qua một hyperlink ta có thể hiện ra một thông báo tại thanh status bar của bowser dựa vào event handler onMouseOver và bằng cách đặt self.Dùng để hiển thi các thông báo cho người sử dụng . prompt() : Hiện một hộp thông báo nhập e . d .status=’Thiet Ke Trang Web’ .htm” onMouseOver=”self.return true . parent : Được sử dụng trong FRAMSET d .status). top : Đỉnh cao nhất của cửa sổ cha g . Các đặc điểm trong phương pháp open() gồm có: • toolbar : tạo một toolbar chuẩn • location: tạo một vùng location • directories: tạo các button thư mục chuẩn • status: tạo thanh trạng thái. self : Cửa sổ hiện hành . Ví dụ: <HTML> <HEAD> <TITLE>Status Example</TITLE> <BODY> <A HREF=”plc. clearTimeout() : Hành vi này cung cấp cách gọi phát biểu JavaScript sau một khoảng thời gian trôi qua . dùng để phân biệt giữa các cửa sổ hiện hành và các forms có cùng tên . • menubar : tạo thanh menu tại đỉnh của cửa sổ • scrollbars: tạo thanh scroll bar • resizable: cho phép user thay đổi kích thước cửa sổ • width : chỉ định chiều rộng cửa sổ theo đơn vị pixel • height : chỉ định chiều cao cửa sổ theo đơn vị pixel 67 . f . “ >Thiet Ke Web</A> </BODY> </HTML> Mở và đóng các cửa sổ Sử dụng phương pháp open() và close() ta có thể điều khiển việc mở và đóng cửa sổ chứa tài liệu. status : Giá trị của chuỗi văn bản được hiển thị tại thanh status bar. “WindowName” . c . “featureList”) . e . frames : Mảng các đối tượng chứa đựng một mục cho mỗi frame con trong một frame tài liệu c . alert() : Hiện 1 thông báo trong hộp thoại với OK button.status là một chuổi (hoặc window. b .htm” onMouseOver=”self. window 4) Các hành vi (Methods) của đối tượng window a .

/chuyende/tkweb.'stoogeWin')">Sua chua</a>.. Các hành vi (Methods) của đối tượng string a ...htm”.khi dùng đối tượng string chúng ta không cần các phát biểu để tạo một instance (thể nghiệm) của đối tượng ..status=yes.”toolbar=yes.width=200.htm'.width=800.[fromIndex]) j .scroolbar=yes.return false">Close This Sample</A> </BODY > </HTML> Đối tượng string String là một đối tượng của JavaScript. bold() e . fontsize(size) i .directories=yes. blink() d .copyhistory=1. "scrollbars=yes.open( “plc.open(url. Các thuộc tính của đối tượng string Thuộc tính length giữ số kí tự của string. heigth=200 ")./chuyende/suachuaw.gif" WIDTH="16" HEIGHT="16" BORDER="0"></A> <A HREF="#" ONCLICK="self. <a href="javascript:openWindow('. Ví dụ: <HTML> <HEAD> <TITLE>WINDOWS</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-function openWindow(url. } --> </SCRIPT> </HEAD> <BODY> <a href="javascript:openWindow('. italics() 68 ./demo. big() c . menubar=1.location=1. charAt(index) f . 2. fixed() g .htm'.return false"><IMG ALIGN="middle" SRC=". 1.'stoogeWin')">Thiet ke web</a> </BODY> </HTML> Để đóng cửa sổ ta có thể dùng phương pháp close() Ví dụ: <HTML> <HEAD> <TITLE>Close Example</TITLE> </HEAD> <BODY > <A HREF="#" ONCLICK="self. fontcolor(color) h . <a href="javascript:openWindow('.close().htm'.”newWindow”.height=200”).bất kỳ lúc nào ta đặt text giữa hai dấu ngoặc kép và gán nó đến một biến hoặc một thuộc tính thì ta đã tạo một đối tượng string.resizable=0.'Win')">PLC</a>./chuyende/plc.Ví dụ: window.close(). name. indexOf(character.name) { popupWin = window. Anchor (nameAttribute) b .

[fromIndex]) l . sup() r . toUpperCase() 69 . sub() p . link(URL) m . substring(startIndex. lastIndexOf(character.endIndex) q . toLowerCase() s .k . strike() o . small() n .

Một thông báo như hình 1 hiện ra. Hình 1 Sau khi nhập đúng User và Password.net ta gõ vào maytinh. bạn cần nhập vào user và password mà người quản trị Server cấp cho bạn. Hướng dẫn sử dụng Cpanel Hướng dẫn sử dụng CPANEL CPANEL : Phần mềm điểu khiển Hosting Truy cập vào Cpanel ta mở trình duyệt web lên và gõ vào thanh Address của trình duyệt theo cú pháp domain/cpanel. Quản lý Website 6. nhấn OK hộp thoại sau xuất hiện : 70 .net/cpanel .Chương 6. Ví dụ để truy cập vào Cpanel của maytinh.1.

Khi cần chỉnh sửa mục nào thì ta bấm vào Icon đó. Ở đây tôi chỉ giới thiệu và hướng dẫn thao tác sử dụng những chức năng cơ bản thường được sử dụng.Hình 2 Tại đây thấy đuợc tất cả các thông tin về Hosting của mình và có thể chỉnh sửa theo các Icon (biểu tuợng) như hình vẽ. xác nhận password mới lần nữa rồi nhấn vào Change your password new ! 71 . Mỗi Icon thể hiện cho việc quản lí những chức năng riêng. Nhập vào lần lượt password cũ . password mới. * Đổi Password Cpanel : Để đổi password của Cpanel ta làm như sau : chọn Change Password .

Hộp thọai mới hiện ra (hình 5) cho biết thông tin các Account có sẵn Hình 5 Trong phần Quản lí Accounts người Admin có thể : + Xoá mail ( Delete ) + Đọc email ( Read Webmail ) + Tăng / giảm dung lượng hosting cho email ( Change Quota ) 72 .Hình 3 * Tạo Email plus (webmail) : Chọn Email ở trang Homepage ( tham khảo hình 2 ) Hình 4 Chọn Manager / Add / Remove Accounts ( tuỳ theo phiên bản Cpanel có thể hơi khác biệt một chút ).

password và dung lượng hộp thư.+ Đổi mật khẩu hộp thư ( Change password ) + Tạo Accounts mới : Add Accounts Hình 6 Nhập thông tin : Nhập tên account . Bấm Create để tạo. Chọn FTP Accounts để tạo – xoá .sửa : 73 . Khi thành công sẽ có hộp thọai mới hiện ra như hình 7 Hình 7 * FTP Manager: Trở về trang Homepage (xem hình 2).

thư mục riêng cho User đó.Nhập vào tên User. bấm Create để tạo mới hoàn thành việc tạo mới một Account FPT 74 . Password.Hình 8 Hình 9 Tạo mới : Add FPT Account .

75 .2.1 Lên Hosting VNN. Cài đặt NukeViet 3.Hình 10 6.ms tại địa chỉ www.MS ( hosting miễn phí) Trước tiên các bạn đăng nhập vào Vistapanel của vnn.0 Hướng Dẫn Cài Đặt Nukeviet 3.vnn.vnn.ms và đăng nhập với tên và mật khẩu của bạn. Trang web hiện lên như bên dưới là đăng nhập thành công.cpanel. Trước tiên các bạn tạo 1 database. Trước tiên các bạn đăng nhập vào Vistapanel của vnn.ms tại địa chỉ www.cpanel.ms và đăng nhập với tên và mật khẩu của bạn.

76 . Trước tiên các bạn tạo 1 database.Trang web hiện lên như bên dưới là đăng nhập thành công.

77 .Hình dưới là database vừa được tạo xong.

cpanel vnn. 78 .Tiếp theo các bạn quay trở lại trang quản lí và vào mục Online File Manager Chọn thư mục htdocs hoặc chọn tên miền mà bạn muốn dùng và vào thư mục htdocs.zip cho dễ upload.ms sẽ tự giải nén ra. Click vào upload ( các bạn có thể dùng phần mềm upload FPT) Nén tất cả các file trong thư mục nukeviet lại thành nhiều phần nhỏ với duôi .

Và click vào biểu tượng hình chữ V 79 .Các bạn chọn hết lên như trong hình.

đây là bước 1 80 .anhcoo.ms/install.vnn.Và đây là quá trình upload thành công. Tiếp theo các bạn mở trình duyệt web lên và chạy đường dẫn cài đặt. ví dụ www.

Bước 2 Bước 3 81 .

Bước 4 82 .

Bước 5 83 .

Các bạn chú ý phần tên host ( đối với host mua có cpanel thì điền là localhost) Bước 6 Bước 7 thông báo cài đặt thành công. 84 .

vnn.Hình dưới là trang đăng nhập vào quyền quản trị www.anhcoo.ms/admin 85 .

86 .

Sign up to vote on this title
UsefulNot useful