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

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ọ.. Hiện trên Internet có hơn 40 triệu website với hơn 8 tỷ trang web. hoặc nhận được câu trả lời không rõ ràng. Song. công dụng. cung cấp thông tin theo yêu cầu của từng người. 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”. Đây chính là việc marketing website. 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. do đó.site của doanh nghiệp sẽ hầu như vô dụng. xử lý đơn hàng. bổ ích. Nhưng như thế chưa đủ để mang lại thành công cho website của doanh nghiệp. 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 đó. Để khai thác hiệu quả của website tốt. đáp ứng đúng nhu cầu người xem. 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.. đầu tư. 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. Vì là website của DN nên đa số chỉ có mục đích trưng bày thông tin. Nếu không marketing.. cách thức pha trà ngon v. có thể tìm thấy trên website này những thông tin bổ ích cho họ. Được khách hàng biết đến (Customer Awareness) Để website hoạt động mang lại hiệu quả kinh tế. 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.... DN chỉ cần cung cấp đầy đủ thông tin về những gì mình bán. Doanh nghiệp sau khi xây dựng xong website và đưa vào hoạt động.. hình ảnh sản phẩm.. đố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. 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à. Điều còn thiếu là: chất lượng dịch vụ hỗ trợ người xem (khách hàng)... không đầy đủ. Marketing website hiệu quả là một việc không dễ. nếu không nỗ lực mar. cập nhật. thời gian. và đòi hỏi nhiều công sức.dụng. trên website của doanh nghiệp cần phải có những thông tin đầy đủ. hữu ích như thế nào cho người sử dụng. thì chắc chắn doanh nghiệp sẽ bị mất nhiều khách hàng tiềm năng. Do đó. tức tốc độ phục vụ trả lời email.v.keting. cần phải đầu tư cho marketing website. với văn phong cẩu thả. 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. những điều họ đang đi tìm. 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 .. nhưng rất cần thiết đối với sự thành công của website. 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. web. dịch vụ..

người xem thoát ra khỏi website. doanh nghiệp phải cung cấp thông tin. địa chỉ mua. không do dự nữa. số điện thoại bàn. đã 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”. chức năng tiện ích sao cho khách hàng có thể dễ dàng mua nhất. chức năng mua qua mạng với thao tác gọn nhất. Tính tiện lợi (Convenience) Khi người xem đã quyết định mua. “hấp dẫn” để làm cho người xem cảm thấy nên quyết định mua ngay. Ví dụ: cung cấp email.. 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. nhanh nhất. số điện thoại di động. địa chỉ công ty. 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 .. hướng dẫn cụ thể từng bước cho khách hàng mua qua mạng. Nếu không.Khi người xem đã quan tâm.

Toàn bộ nội dung của tài liệu được đặt giữa cặp thẻ này.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ó> . 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. Phần mở đầu (HEADER) của tài liệu được đặt ở đây </HEAD> c....1.. TITLE 7 . HEAD Thẻ HEAD được dùng để xác định phần mở đầu cho tài liệu. 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. hình ảnh Các thẻ định dạng bảng biểu 2. Nội dung của tài liệu </BODY> </HTML> a. Cú pháp: <HEAD> . Các th đ nh c u trúc tài li u 2.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..1. Cú pháp: <HTML> . b.. tức là nó có sử dụng các thẻ HTML để trình bày.

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

. 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. 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.. </H1> <H2> .Hầu hết các thẻ HTML đều có dạng như trên.2.. nó có tác dụng chuyển sang dòng mới. </H4> <H5> . bạn phải sử dụng thẻ <BR> 2.2. Để xuống dòng trong tài liệu.2. ký tự xuống dòng đều được coi như một khoảng trắng. Chú ý: Tên thẻ không phân biệt chữ in hoa..>. 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.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>. Lưu ý. gọi là thẻ mở đầu. Đề mục cấp 1 là cao nhất và giảm dần đến cấp 6. 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. Chú ý rằng đề mục chỉ là các chỉ dẫn định dạng về mặt logic..1. 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). </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. các khoảng trắng liền nhau.3 Thẻ xuống dòng BR Thẻ này không có thẻ kết thúc tương ứng (</BR>).2. cuối cùng là thẻ đóng </tên_thẻ>.. Dưới đây là các thẻ dùng để định dạng văn bản ở dạng đề mục: <H1> . </H3> <H4> .. tiếp đó là nội dung của đoạn văn bản mà thẻ đó tác động. 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 . Các th đ nh d ng kh i 2.. in thường Một số thẻ không cần thẻ kết thúc 2. Cú pháp: <P>Nội dung đoạn văn bản</P> 2. </H5> <H6> . </H2> <H3> .2.. nó bắt đầu bởi <tên_thẻ thuộc_tính = “giá_trị” ...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. 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.

3. in đậm..4.4. văn bản khi được thể hiện trên trình duyệt.. • Danh sách thực đơn <MENU> • Danh sách phân cấp <DIR> Với nhiều trình duyệ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>.. circle (vòng tròn). III. Các th đ nh d ng ký t 2.. cho các ký tự. 2. =A Các mục được sắp xếp theo thứ tự A.. có thể dùng lẫn với nhau. C. 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ố. =I Các mục được sắp xếp theo thứ tự I. iii. =i Các mục được sắp xếp theo thứ tự i. 2. Thuộc tính này có thể nhận các giá trị : disc (chấm tròn đậm). 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. 10 .1.Cú pháp: <PRE>Văn bản đã được định dạng</PRE> 2... II. ii. =a Các mục được sắp xếp theo thứ tự a. 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. b. 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.. c. square (hình vuông). B. mỗi mục trong danh sách được sắp xếp thứ tự. gạch chân.. Ngoài ra còn thuộc tính START= xác định giá trị khởi đầu cho danh sách.

Chúng thường được in nghiêng hoặc thể hiện qua một kiểu đặc biệt nào đó.. </I> <EM> .. Chọn kiểu chữ hiển thị.. Đị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.) so với font chữ hiện tại. Kích thước có thể là tuyệt đối (nhận giá trị từ 1 đến 7) hoặc tương đối (+2. 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ẻ. Việc sử dụng các thẻ <SMALL>lồng nhau tạo ra hiệu ứng chữ giảm dần. 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. 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. </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ừ.. Thẻ này chỉ có một tham số size= xác định cỡ chữ. Việc sử dụng các thẻ <BIG>lồng nhau tạo ra hiệu ứng chữ tăng dần. </SMALL> <SUP> . </S> <STRIKE> . 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. vượt quá giới hạn này. </STRONG> <I> . </FONT> 2... các thẻ <SMALL> sẽ không có ý nghĩa. các thẻ <BIG> sẽ không có ý nghĩa. </SUB> <BASEFONT> <FONT> . vượt quá giới hạn này. </EM> <U> . Một số các thẻ định dạng như P.-4. 11 ......4..... 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ữ.. </B> <STRONG> .<B> . In chữ bị gạch ngang..... 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ữ. Hn..2. <S> .. </SUP> <SUB> ..... Thẻ <BASEFONT> không có thẻ kết thúc. </STRIKE> <BIG> . </BIG> <SMALL> .

GG .4. Với tên tiếng Anh. Xanh nước biển (Blue).IMG.4. Ký tự .3. Màu sắc có thể được xác định qua thuộc tính bgcolor hay color. 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.4. 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ự Mã ASCII Tên chuỗi < &#060 &lt > &#062 &gt & &#038 &amp 2. chúng ta có thể sử dụng thẻ CENTER để căn giữa trang một khối văn bản. Xanh lá cây (Green).. BB .là giá trị màu Xanh nước biển. 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. 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 Xanh lá cây.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ẻ đó. được sử dụng để tách các ký tự trong một từ. đó là: Đỏ (Red). 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ú pháp: <CENTER>Văn bản sẽ được căn giữa trang</CENTER> 2.. 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.

.. 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 .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 > ..

Có nhiều dịch vụ như http.edu. Quy tắc đặt tên đó là URL (Universal Resource Locator). • Tên hệ thống: Là thành phần bắt buộc của URL. Do WWW cấu thành từ Dịch vụ Cổng Tên file http://selab.6..4. 14 .5. </FONT> = font-name = color =n> 2. telnet.Xác định có hay không thanh cuộn Lề trên Lề phải Lề trái 2. biến.vnuh. wais. truy vấn nhiều hệ thống khác nhau. 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. 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.4. 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. gopher. ftp. Tuy nhiên nên sử dụng đường dẫn đầy đủ. Chọn kiểu chữ cho văn bản Cú pháp: <FONT FACE COLOR SIZE .vn:8080 /~dir1/dir2/dir3/index. 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ừ. 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..HTML#chapter001 Tên hệ thống Đường dẫn Ví dụ về URL Các tham số. 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.SCROLL TOPMARG IN RIGHTMA RGIN LEFTMAR GIN YES/NO . 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.

• Tên file : Không là thành phần bắt buộc của URL. Địa chỉ tương đối sử dụng sự khác biệt tương đối giữa 15 . Cổng là địa chỉ socket của mạng dành cho một giao thức cụ thể.4. Để 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. là một URL nào đó. 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. Địa chỉ tương đối URL được trình bày ở trên là URL tuyệt đối. File này thường có tên là index. 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. Cú pháp: <A HREF NAME TABINDEX TITLE TARGET > = url = name =n = title = _blank / _self . Giao thức http ngầm định nối với cổng 8080. Tuy nhiên có thể rút gọn đường dẫn bằng cách đặt biệt danh (alias). trong một frame (tên frame). 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ụ. 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.htm.html. index. 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). Đặt tên cho vị trí đặt thẻ..URL cũng có thể trả lại thông tin được thu thập từ form. default. 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.7. 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.htm. 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. Thứ tự di chuyển khi ấn phím Tab 2.html hay default. đó chính là đoạn mã đằng sau dấu chấm hỏi (?). Các thư mục trong đường dẫn cách nhau bởi dấu gạch chéo (/).• Cổng : 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.

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

5. Các th chèn âm thanh.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. 2. Phần mở rộng của file phải cho biết kiểu của file. Tuy vậy phải đặt tên đúng cho file đa phương tiện.jpeg Viết tắt của Joint Photographic Expert Group.1. Tất cả các trình duyệt 17 . Thẻ này giống như thẻ BR. 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).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. Mở rộng của chuẩn này là GIF89. Nhược điểm của nó là chỉ thể hiện được 256 màu. Là khuôn dạng ảnh khác nhưng có thêm khả năng nén. Nó được sử dụng trên tất cả các hệ thống hỗ trợ giao diện đồ hoạ. hình nh 2. Image/J PEG . nó cũng không có thẻ kết thúc tương ứng. Nó là cơ sở cho khuôn dạng MPEG. căn phải. đượ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 .5.gif Mô tả Viết tắt của Graphics Interchange Format.Ư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. Định dạng GIF là định dạng chuẩn cho mọi trình duyệt WEB. 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. 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. Kiểu Image/G IF Phần mở rộng .

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

5. bạn có thể sử dụng thẻ IMG.VRML . . Đư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>).jpg.mpg.avi) vào tài liệu HTML. Chèn một hình ảnh. .3.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).5. 2. 2. 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. Đối với trình duyệt có khả năng hỗ trợ đồ hoạ.bmp) hoặc video (. Các file theo định dạng này cũng giống như HTML. một đoạn video vào tài liệu HTML Để chèn một file ảnh (. . Để chơi lặp lại vô hạn cần chỉ định LOOP = -1 hoặc LOOP = INFINITE.2. 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ạ. Văn bản này còn được gọi là nhãn của ảnh. dòng văn bản này sẽ hiện 19 .gif.

. 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.. Chỉ định kích thước của ảnh được hiển thị. phải. 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... TITLE = title LOOP = n/INFINITE 2. </TD> <TH> . BORDER = n SRC = url WIDTH/HEIGHT HSPACE/VSPACE Đặt kích thước đường viền được vẽ quanh ảnh (tính theo pixel). 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. trái.. </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 . Chỉ định khoảng trống xung quanh hình ảnh (tính theo pixel) theo bốn phía trên..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.. Chỉ định số lần chơi. </TR> <TD> . Chỉ định file video sẽ được chơi khi tài liệu được mở hay khi trỏ con chuột vào nó... </TABLE> <TR> . </TH> cột <CAPTION> .6. dưới. 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..

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

địa chỉ. 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. Tạo Form Để tạo ra một form trong tài liệu HTML. số điện thoại. đị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 đó. 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. nó chứa các phần tử đặc biệt gọi là các điều khiển.1. Cung cấp công cụ tìm kiếm cho web site. Ngoài việc xây dựng mối quan hệ với khách hàng. Đị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. 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.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. 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. ví dụ. HTML Forms Form HTML là một phần của tài liệu. 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.7.2. 2. 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. địa chỉ gửi thư.7. đây còn là một nguồn thông tin để trao đổi hoặc cải tiến dịch vụ. phương thức thanh toán và các thông tin liên quan khác.7. khi muốn mua một cuốn sách trên Internet. Sau đây là một số cách sử dụng thông thường: Thu thập tên. Thu thập thông tin phản hồi về một web site. ta phải điền tên. FORM 2.

) 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.....7. Tên của form. một trang ASP. Phương thức gửi dữ liệu. ô kiểm tra.Các phần tử điều khiển của form được đặt ở đây --> <INPUT .> </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.<FORM ACTION METHOD NAME TARGET > <!-. 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 <!-.. nút bấm...).. Đặt các đối tượng điểu khiển (như hộp văn bản.> <INPUT . Chỉ định cửa sổ sẽ hiển thị kết quả sau khi gửi dữ liệu từ form đến server.3.Danh sách các mục chọn --> </SELECT> 23 .

2 Cách sử dụng khung Một tài liệu HTML chuẩn có phần HEAD và BODY. Ta không thể sử dụng phần tử BODY và FRAMESET cùng với nhau. 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. FRAME Khung chia một cửa sổ trình duyệt thành nhiều vùng riêng biệt. Ví dụ.8. Các thuộc tính như sau: 24 . 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. 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. một làm biểu ngữ (banner).7. 2.4. IE phiên bản 2. Một tài liệu HTML sử dụng khung thì có phần HEAD và phần FRAMESET. nếu bạn sử dụng phần tử BODY. một làm menu điều hướng và một để hiển thị dữ liệu.8. Phần FRAMESET xác định cách trình bày trong cửa sổ người dùng. ta có thể sử dụng ba khung trong trang Web. thay đổi và cuốn độc lập nhau.2 hoặc trước đó. thì phần tử FRAMESET sau đó sẽ bị bỏ qua và ngược lại. 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.1 Tại sao sử dụng khung ? Một trang có thể có một hoặc nhiều khung.0 hoặc trước đó và Netscape 1. ví dụ. Mỗi khung là một cửa sổ trong cửa sổ chính. Nghĩa là. Mỗi khung có thể được tạo. Khung được tạo ra bằng cách sử dụng phần tử FRAMESET. mà mỗi vùng có thể hiển thị một trang riêng biệt có thể cuốn được. 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. Để 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.2. 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.8.

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

Ta có thể tạo và chèn một khung vào một khối văn bản. Khi trình duyệt không hỗ trợ khung thì nội dung nằm trong thẻ IFRAME bị trả lại. Khung trên dòng (inline frame) không thể thay đổi kích thước.html" width="100" height="150" scrolling=auto frameborder=1> [The browser does not support frames or is currently configured not to display frames. You have been learning about frames <BR><BR> <IFRAME src="x. 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.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).8.</FRAMESET> </HTML> 2. These are the <A href="x.

Số &#160. &#60. &lt.<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 .

&#215. Giao diện cửa số Deamweaver Khi nhấp Shortcut hiện ra Bảng WorkSpace Setup > Chọn Designer > Ok. &#34. Ra 3 Mục để bạn chọn lựa. &reg.1. &yen. &quot. &#38. &pound. &#169. &times. (does not work in IE) Tên của ký tự &cent. &#167. Số &#162. &sect. &#39. &apos. 31 . &#247. &#174.> & " ' 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. 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. &divide. S D NG DREAMWEAVER 3. Nếu thay đổi chọn lựa trên > Menu Window > WorkSpace LayOut . &amp. 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.1. Sử dụng FrontPage và Dreamweaver 3. &#165.1. &#163. &copy.

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

1.3. 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. Hiện ra gồm các Table – Div – ấp Tables Layer – Khung (Frame) . (H6). ằm HTML : Ít hữu dụng .2. Các thanh công cụ c Thanh INSERT : Dưới Thanh Menu. Nút và Hộp kiểm (H5). LAYOUT : nhấp nút xổ xuống chọn Layout . 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 . ớ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. à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 ).

FLASH ELEMENTS : Chỉ chứa 1 Đối tượng bộ xem ảnh Flash. Để 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 .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 . ững t ợc 34 . (H11). dùng để chứa những g àr ể gì bạn muốn nó có .

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. ề 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 .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 đó . đổi sắc. Nhấp Nút xổ xuống kế bên ra chức năng phụ. 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. thay đ màu ới Ví ào. ả b ức (H12).3. 3. 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. nếu ủa Ví trong Normal view bạn chèn vào một table thì trong HTML view. bạn có thể biên t trang web n tập dưới dạng WYSIWYG. • 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 tr • Lưu trang web: Chọn chức năng File/Save hay chọn icon Save tr Chọn trên Toolbar. V dụ. Thi t k web s d ng MS FrontPage 3. V dụ bạn có thể gõ văn bản vào. Để 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.2. Các chế độ xem cửa sổ c 3. kích thước chữ. … ớc o Nếu bạn chọn HTML view. Nên lưu trang web trư khi ển mà n trước chọn chức năng này.1.2.1.

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

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

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. 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. Đó thật sự sẽ là một công việc buồn chán và tốn nhiều thời gian. trong lĩnh vực thẩm mỹ làm đẹp.Chương 4.… 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. 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 đó. CSS (Cascading Style Sheets. chúng ta có kỹ thuật make-up. XHTML. picture. Ngoài ra. … nhưng nó không thật sự phong phú và chính xác như nhau trên mọi hệ thống. table. 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ả. 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 đó. còn trong lĩnh vực thiết kế web chúng ta có CSS. máy in. chúng ta có trang trí nội thất. Ngoài ra. 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 .1. 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. Khái ni m. 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.Mỗi trình duyệt đều có thể hiển thị các trang web theo cách riêng của nó.… 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: . 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. Cascading Style Sheets (CSS) 4. hiện tại CSS đã được hỗ trợ bởi tất cả các trình duyệt. 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. 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. Chẳng hạn. 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. điện thoại. tác d ng c a CSS Trong lĩnh vực xây dựng. 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. Nhưng với việc sử dụng CSS việc đó là hoàn toàn đơn.

. 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. } 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. Khai báo có hai phần. Đ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. RuleSelector {Declarations property: value.Stylesheet phân cấp là một tập hợp các qui tắc. Qui tắc định nghĩa kiểu của tài liệu. 4. 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.. 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. 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 (Style Rule). . Tuy nhiên. 39 . property: value. Phần đầu của qui tắc gọi là bộ chọn (Selector). 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. nó được gọi là stylesheet nhúng. Đ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ị. Trong trường hợp đó. Đ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.2. chúng ta có thể kết nối tất cả các trang trên website đến stylesheet.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. Lần lượt thay thế. 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. Khi sử dụng các biện pháp liên quan trong stylesheet của bạn. Đ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. 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. Các qui tắc (Rules) – Bảng kiểu có thể có một hay nhiều qui tắc. Mỗi bộ chọn có các thuộc tính và các giá trị liên quan đến nó. chúng ta có thể nhúng stylesheet bên trong tài liệu HTML. Ví dụ. 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. Sử dụng lại các stylesheet – Môt khi đã định nghĩa kiểu thông tin. 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 đó. 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. Vì vậy. Tất cả những tài liệu sẽ có diện mạo giống nhau. 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. Ví dụ. 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.

color: blue là khai báo Trong phạm vi khai báo: {Property: Value} Color là thuộc tính. Mỗi qui tắt có thể tách rời nhau trong phạm vi thẻ STYLE. blue là giá trị.} </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 . Ta nên đặt dấu chấm phẩy sau lần khai báo cuối cùng. H2{color:limegreen.). H1 là bộ chọn.font-family:Arial. 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.Các khai báo được phân cách bởi dấu chấm phẩy (. Ví dụ như H1 {color: blue} Ở đây. Mỗi khai báo được tách ra bởi dấu chấm phẩy.

Trong trường hợp đó. Vì vậy. Bộ nhận dạng tiêu đề H1 là một điển hình. 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. thẻ <P> trong HTML trở thành P và khi đó. </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. 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). Ví dụ. 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. Selector lớp có dấu chấm (.3. Sau đây là một số kiểu của selector đơn. theo sau là tên lớp do chúng ta chọn. Có hai kiểu selector cơ bản: 4. Ví dụ. 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. Selector đơn Đây là những selector dễ sử dụng nhất.4. font-weight:bold.1. color:limegreen} </STYLE> </HEAD> <Body> <P> These selectors use the names of HTML elements. chúng dùng những thông tin bên ngoài để tác động đến việc định dạng.) đứng trước gọi là ký tự cờ (flag). 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 . Ta có thể gán một tên lớp duy nhất cho mọi phần tử khác. nó được xem như là một selector. The only difference is that you remove the brackets. ta có thể muốn <H2> xuất hiện với nhiều màu khác nhau. ta sử dụng định danh lớp cho <H2>. Ngoài ra. Về cơ bản. với việc sử dụng lớp giả. 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”. Ví dụ sau đây minh họa điều đó Ví dụ 3: <HTML> <HEAD> <STYLE TYPE="text/css"> P{font-style:italic. 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 .3.

} H5.không nên chọn tên mô tả màu sắc hay kiểu của chúng.hotpink {color:hotpink. Ví dụ 5: <HTML> <HEAD> <STYLE type="text/css"> all.BLUE {color:blue. để tất các các phần tử đều có thể sử dụng nó. Chúng ta nên sử dụng từ khóa all.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> <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 . những đoạn khác thì hiển thị theo kiểu khác.slant Ví dụ 4: <HTML> <HEAD> <STYLE TYPE=”text/css”> . font-weight:bold. Trong trường hợp đó.} P.} </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. đoạn A có thể có bộ nhận dạng lớp là . ta có thể xác định được phần tử HTML nào có thể sử dụng kiểu này. Ví dụ. ta có thể muốn đoạn A hiển thị chữ nghiêng. font-weight:bold.RED {color:red.water { color:blue } .

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 . 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"> . Đ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 đó.Selector ID Selector ID sử dụng thuộc tính ID của phần tử HTML. Selector ID được bắt đầu bằng dấu thăng (#). 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 đó. 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>. Ví dụ.forest {color:green} . nếu không được xác định. 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.

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

Phần tử STYLE 2. 4.} P {color:hotpink. Ví dụ: <H2 style="color: green. 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ử. thì stylesheet của ta phải là một tài liệu riêng. Thuộc tính Style 3.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 . Ví dụ trên là cách sử dụng thuộc tính STYLE.} </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ử.4. tất cả các quy tắc được định nghĩa giữa thẻ mở và thẻ đóng. thì chỉ tài liệu nào có nhúng STYLE mới được tác động.của selector BODY. 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. Phần tử Link Nếu ta muốn sử dụng phần tử LINK. Ví dụ 9: 45 . 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"> . vì thế các thuộc tính của OL kế thừa từ selector BODY. K t h p. </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 đó. Ví dụ: <Style Type = "text/css"> H1 {color:maroon. 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. Khi hiển thị các trang. Không có selector OL trong style sheet. Ví dụ. <LINK REL = stylesheet HREF= “stylesmine. Sau đó chúng ta phải thêm địa chỉ Web của stylesheet vào.. Một style sheet có thể nhỏ như một luật.

font-style:italic. Bảng dưới đây cho thấy nhiều thuộc tính có thể được sử dụng trong stylesheet.htm <HTML> <HEAD> <TITLE>Linking external style sheets</TITLE> <LINK REL=STYLESHEET TYPE="text/css" HREF="sheet1.css H2 {color:blue.} P {color: limegreen.Sheet1. 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.5.} 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 .css"> </HEAD> <H2>This is an H2 element</H2> <BR> <BODY> <P>This is a paragraph </BODY> </HTML> 4.

Trong JavaScript . Javascript là một ngôn ngữ có đặc tính: • Đơn giản. 5. anchor.1. 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. Các đối tượng được cung cấp bởi môi trường Netscape.tên đặc tính) Ví dụ :Một đối tượng airplane có các thuộc tính như sau: Airplane. Khi file được load trong Browser (có hỗ trợ cho JavaScript).Chương 5.price Airplane. b. là một ngôn ngữ thông dịch (interpreter). 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).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ó.Property-name (tên đối tượng. Giới thiệu ngôn ngữ Javascript 5. • Động (Dynamic). • Hướng đối tượng (Object Oriented). Đây là một đối tượng được sử dụng nhiều nhất. Browser sẽ thông dịch các Script và thực hiện các công việc xác định. 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ó.2. Cơ bản về Javascript 5.seating Airplane. Netscape Navigator cung cấp các đối tượng cho phép JavaScript tương tác với file HTML. 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). 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ở. 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ác Object được nhìn theo 2 khía cạnh: a.model Airplane. link. bao gồm các đối tượng cho mỗi frame. Đặc tính của ngôn ngữ Javascript: Javascript là một ngôn ngữ do hãng Netscape Navigator tạo ra. Các Object đã tồn tại. applet. Các Object do người lập trình xây dựng. Các Object này cho phép người lập trình sử dụng để phát triển ứng dụng. Nó chứa đựng các Đối tượng.1. 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ị.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. 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.1.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. Định nghĩa thuộc tính của đối tượng: (Object Properties) Cú pháp : Object-name.maxspeed Thêm các phương pháp cho đối tượng:( Method to Object) 47 .

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 .1</TITLE> </HEAD> <BODY> Here is result: <SCRIPT LANGUAGE="Javascript"> <!-document.vn/scroll.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. Ẩn các Scripts đối với các Browser không cung cấp JavaScript: <SCRIPT LANGUAGE=”JavaScript”> <!.VBScript).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. Ví dụ: document.> </SCRIPT> Thêm chương trình vào tập tin HTML: <HTML> <HEAD> <TITLE>Listing 2.hcmuns.các phát biểu.js”> <!.. 5. 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 (*.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 . Một số câu lệnh cơ bản 1.3.2 vv… . --> </SCRIPT> </BODY> </HTML> 5. 2.. 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 .writeln("It work<BR>").> </SCRIPT> Sử dụng tập tin JavaScript bên ngoài : <SCRIPT LANGUAGE=”JavaScript” SRC=”http://www.description() 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 .edu.1. Cú pháp cơ bản của lệnh : JavaScript xây dựng các hàm.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 đó..JavaScript .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 .writeln("It work<BR>").

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

document.").writeln("Two. .write("Three"). document.document. . document.alert("Welcome to JS").gif">').-> </SCRIPT> </BODY> 8..write('<IMG SRC="welcome. Ví dụ: <HTML> <HEAD> <TITLE>Example 2. 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.write("Your favorite color is:").6</TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE="Javascript"> <!.write(".-> </SCRIPT> </PRE> </BODY> </HTML> 6. document.")."Blue")).writeln("It work!\n").5 </TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE="Javascript"> <!.writeln(prompt("enter your favorite color:". . 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.-> </SCRIPT> </BODY> </HTML> Ví dụ 2: <HTML> <HEAD> 50 .document.. 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. Ví dụ 1: <HTML> <HEAD> <TITLE>Listing 2. 7.

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

write("<H1>Greeting .-> </SCRIPT> </HEAD> <BODY> <SCRIPT LANGUAGE="Javascript"> <!-document. sau đó gán kết quả cho bên trái phép toán Ví dụ: cho x=10. .2</TITLE> <SCRIPT LANGUAGE="Javascript"> var name=prompt("enter your name:". document.gán kết quả lại cho bên trái 52 ."name"). </SCRIPT> </HEAD> <BODY> <SCRIPT LANGUAGE="Javascript"> <!-document." + name + " Welcome to JS </H1>")."name"). alert ("greeting " + name + " . document.gif">').write('<IMG SRC="Welcome. 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.y=5 x+=y => x=15 -= Trừ bên trái cho bên phải .var name=prompt("enter your name:".write('<IMG SRC="Welcome. name=prompt("enter your friend's name:"."friend's name"). --> </SCRIPT> </BODY> </HTML> 11.1</TITLE> <SCRIPT LANGUAGE="Javascript"> <!. ").<HTML> <HEAD> <TITLE>Example 3.write("<H1>Greeting . --> </SCRIPT> </BODY> </HTML> Ví du 2: tạo lại một giá trị mới cho biến <HTML> <HEAD> <TITLE>Example 3.gif">')." + name + " Welcome to JS </H1>").

y=2 .gán kết quả cho bên trái x*=y => x=50 /= Chia bên trái cho phải .z=6. (=> 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.y=6.x-=y => x=5 *= Nhân bên trái cho bên phải. y=++x.và dấu Ví dụ: x=5.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 .3 12 % 5 Dấu ++ và dấu -.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.5 * 72. Ví dụ: x=5. x=-x => x=-5 • Phép toán Logic && : và ||: hoặc ! not Ví dụ: x=5 . (=> y=6 vì x tăng lên 6) z=x++.

var incorrect='<IMG SRC="incorect.3</TITLE> <SCRIPT LANGUAGE="Javascript"> var question="What is 10+10 ?". } Ví dụ: if (day==”Saturday”) { document. alert(“ It’s the weekend”).write(output).writeln(“It‘s the weekend”). --> </SCRIPT> </BODY> </HTML> 12.writeln(“It‘s the weekend”). var correct='<IMG SRC="correct.gif">'. } if (day!=”Saturday”) { 54 .gif">'.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. var response=prompt(question. </SCRIPT> </HEAD> <BODY> <SCRIPT LANGUAGE="Javascript"> <!-document. Cấu trúc điều kiện if – else if điều kiện lệnh ."0"). if (điều kiện) { Mã JavaScript } Ví dụ: if (day==”Saturday”) { document. var answer=20. var output = (response==answer) ? correct:incorrect.

gif">'.write(output)."0").3</TITLE> <SCRIPT LANGUAGE="Javascript"> var question="What is 10+10 ?". var response=prompt(question. } var output = (response ==answer ) ? correct:incorrect . } Sử dụng cấu trúc else – if cho ví dụ ở trên if (day==”Saturday”) { document. var incorrect='<IMG SRC="incorect. </SCRIPT> </HEAD> <BODY> <SCRIPT LANGUAGE="Javascript"> <!-document."0").document. var answer=20. } else { document. --> </SCRIPT> </BODY> </HTML> Ví dụ 2 : Sử dụng phương pháp confirm() với phát biểu if . } 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.writeln(“It‘s not Saturday”).else <HTML> 55 . var correct='<IMG SRC="correct.gif">'.writeln(“It‘s the weekend”).writeln(“It‘s not Saturday”).

if (response != answer) { if (confirm("Wrong ! press OK for a second change")) response=prompt(question.3. }else { if (confirm("Correct ! press OK for a second question")) { question="What is 10*10". var incorrect='<IMG SRC="incorect.gif">'. var answer=20. --> </SCRIPT> </BODY> </HTML> 5."0").write(). document. document. arguments) { command block } Truyền tham số: function printName(name) { document."0"). 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”. 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().write(“<HR>Your Name is <B><I>”). var correct='<IMG SRC="correct. var response=prompt(question.3</TITLE> <SCRIPT LANGUAGE="Javascript"> var question = "What is 10+10 ?". 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 đó."0"). 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.gif">'. } } var output = (response ==answer ) ? correct:incorrect . answer=100. để định nghĩa hàm bạn theo cú pháp sau: function function_name(parameters. document.write(“</B></I><HR>”).write(name). 56 . </SCRIPT> </HEAD> <BODY> <SCRIPT LANGUAGE="Javascript"> <!-document.write(output). response=prompt(question. } Ví dụ: Gọi hàm printName()với lệnh sau printName(“Bob”).<HEAD> <TITLE>Example 3.

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

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

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

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

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

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. Các sự kiện. 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. “> 62 .write(" .value) <= 5) { alert(‘Please enter a number greater than 5. confirm(‘Do you want to continue?’).arial'>" + ampmhour + "" + myminutes + ampm). document. </script> </body> 5. // End --> </script> Trong phần body bạn có thể xuất ra dạng như sau: <body> <script> 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.’)." + day + " ngày " + myweekday +" "). Xãy ra khi User rời khỏi trang Web. Xãy ra khi User chọn 1 trường của thành phần Form.’).else if(mymonth ==10) month = "tháng mười một ". 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.write( month + " . 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.5. }”> Ví dụ: <INPUT TYPE=”text” onChange=” alert(‘Thanks for the entry. năm " + year + "</font>"). 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.write("<b><font color=#0000ff face='VNI-Times. document. Xãy ra khi User xác nhận đã nhập xong dữ liệu. else if(mymonth ==11) month = "tháng mười hai ". Xãy ra khi giá trị của Form Field bị thay đổi bởi user. Xãy ra khi User di chuyển mouse qua một Hyperlink.helvetica.

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

<SCRIPT LANGUAGE=”JavaScript”> <!-. } // STOP HIDING FROM OTHER BROWSERS --> </SCRIPT> </HEAD> <BODY onLoad=”hello(). } function getExpression(form) { form. calculate(form).methodName() và this. 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.entry. welcome to my page!’). Ví dụ: <INPUT TYPE=text NAME=”test” VALUE=”test” onBlur=”alert(‘Thank You!’).HIDE FROM OTHER BROWSERS function calculate(form) { form.value). Ví dụ: <HTML> <HEAD> <TITLE>Example 5. sorry to see you go!’).propertyName.””).’Name’).HIDE FROM OTHER BROWSERS // DEFINE GLOBAL VARIABLE var name = “”. và onChange. } //STOP HIDING FROM OTHER BROWSERS --> </SCRIPT> </HEAD> <BODY> <FORM METHOD=POST> Enter a JavaScript mathematical expression: <INPUT TYPE=text NAME=”entry” 64 .” onChange=”check(this). function hello() { name = prompt(‘Enter Your Name:’. alert(‘Greetings ‘ + name + ‘.entry.3</TITLE> <SCRIPT LANGUAGE=”JavaScript”> <!-. onSubmit.entry.results.”> <IMG SRC=”title.” onUnload=”goodbye().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 goodbye() { alert(Goodbye ‘ + name + ‘. form.value = eval(form. onFocus. onBlur.blur().value = prompt(“Please enter a JavaScript mathematical expression”.”> Khi giá trị thay đổi function check() sẽ được gọi.

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

linkColor i . close() c . Đâ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. for ( var j=0 . location k .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. 1) Các thuộc tính (properties) của đối tượng document a . cookies e . } Ví dụ: var answer=” “ . alink b . write() e . form. j++) this[j]=0. vlinkColor 2) Các hành vi (Methods) của đối tượng document a . 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. lastModified h . Tạo mảng với vòng lặp for: function createArray(num) { this.num++. Để 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. bgColor d . links j . open() d . fgColor f . writeln() 66 . 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. clear() b . anchor c . link). var question=” what is 10*10 ?” . } 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 . j<num. referrer l .”0”). title m . while(answer!=correct) { answer=prompt(question. var correct=100. } 3.length=num. form g . history.

status).return true . 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 .status là một chuổi (hoặc window.return true . “WindowName” .3) Các thuộc tính của đối tượng Window a . top : Đỉnh cao nhất của cửa sổ cha g . d . 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.htm” onMouseOver=”self. Ví dụ: <HTML> <HEAD> <TITLE>Status Example</TITLE> <BODY> <A HREF=”plc. self : Cửa sổ hiện hành . close() : Đóng cửa sổ hiện hành. b .htm” onMouseOver=”self. setTimeout() : f . 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. “ >Lop chuyen dề PLC </A> <A HREF=”tkweb. status : Giá trị của chuỗi văn bản được hiển thị tại thanh status bar. “featureList”) . alert() : Hiện 1 thông báo trong hộp thoại với OK button.Dùng để hiển thi các thông báo cho người sử dụng . window 4) Các hành vi (Methods) của đối tượng window a . parent : Được sử dụng trong FRAMSET d . defaultStatus : Giá trị mặt nhiên được hiển thị ở thanh trạng thái b . open (“URL” .status=’Thiet Ke Trang Web’ . 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.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. c . 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 . prompt() : Hiện một hộp thông báo nhập e . e .status=’Chuyen de PLC’ . • 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 . 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 .

blink() d . Các hành vi (Methods) của đối tượng string a . menubar=1. Ví dụ: <HTML> <HEAD> <TITLE>WINDOWS</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-function openWindow(url. "scrollbars=yes.”toolbar=yes. name.status=yes.'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.scroolbar=yes.return false"><IMG ALIGN="middle" SRC=".open( “plc.width=200. fontsize(size) i .resizable=0./chuyende/plc. <a href="javascript:openWindow('. heigth=200 ").Ví dụ: window.gif" WIDTH="16" HEIGHT="16" BORDER="0"></A> <A HREF="#" ONCLICK="self.copyhistory=1. fixed() g .name) { popupWin = window. bold() e .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./demo.open(url.location=1.”newWindow”.height=200”). } --> </SCRIPT> </HEAD> <BODY> <a href="javascript:openWindow('.htm'.close(). indexOf(character. charAt(index) f .. 1.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 . Anchor (nameAttribute) b .'Win')">PLC</a>. big() c .[fromIndex]) j .directories=yes.width=800.'stoogeWin')">Sua chua</a>.. fontcolor(color) h ./chuyende/suachuaw. <a href="javascript:openWindow('.htm'../chuyende/tkweb.. italics() 68 .return false">Close This Sample</A> </BODY > </HTML> Đối tượng string String là một đối tượng của JavaScript. Các thuộc tính của đối tượng string Thuộc tính length giữ số kí tự của string.htm”.close().htm'. 2.

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

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. nhấn OK hộp thoại sau xuất hiện : 70 . Một thông báo như hình 1 hiện ra.net/cpanel . Ví dụ để truy cập vào Cpanel của maytinh. Quản lý Website 6. bạn cần nhập vào user và password mà người quản trị Server cấp cho bạn. Hình 1 Sau khi nhập đúng User và Password.Chương 6.net ta gõ vào maytinh.1.

password mới. * Đổi Password Cpanel : Để đổi password của Cpanel ta làm như sau : chọn Change Password .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ẽ. Khi cần chỉnh sửa mục nào thì ta bấm vào Icon đó. xác nhận password mới lần nữa rồi nhấn vào Change your password new ! 71 . Ở đâ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. 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ũ .

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 ). 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 .

+ Đổ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á . 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). password và dung lượng hộp thư.sửa : 73 .

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 . thư mục riêng cho User đó.

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

Trước tiên các bạn tạo 1 database. 76 .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.ms sẽ tự giải nén ra.zip cho dễ upload. 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 .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. 78 .

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.

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.ms/install.vnn.anhcoo. ví dụ www. đây là bước 1 80 .

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.ms/admin 85 .anhcoo.Hình dưới là trang đăng nhập vào quyền quản trị www.

86 .

Sign up to vote on this title
UsefulNot useful