P. 1
Thiet Ke Web

Thiet Ke Web

|Views: 590|Likes:
Published by huynhsp2

More info:

Published by: huynhsp2 on Jun 10, 2011
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as PDF, TXT or read online from Scribd
See more
See less

01/11/2013

pdf

text

original

Sections

  • 1.1. Website là gì?
  • 1.2. Các yêu c u t i thi u c a 1 Webiste
  • 1.3.1. Web Động
  • 1.3.2. Web Tĩnh
  • 1.4. M t s khái ni m k thu t liên quan đ n website
  • 1.5. Nh ng y u t t o nên tính hi u qu cho website:
  • 2.1.1 Cấu trúc chung một trang HTML
  • 2.1.2 Cấu trúc chung một thẻ HTML
  • 2.2.1. Thẻ P
  • 2.2.2. Các thẻ định dạng đề mục H1/H2/H3/H4/H5/H6
  • 2.2.3 Thẻ xuống dòng BR
  • 2.2.4 Thẻ PRE
  • 2.3. Các th đ nh d ng danh sách
  • 2.4.1. Các thẻ định dạng in ký tự
  • 2.4.2. Căn lề văn bản trong trang Web
  • 2.4.3. Các ký tự đặc biệt
  • 2.4.4. Sử dụng màu sắc trong thiết kế các trang Web
  • 2.4.5. Chọn kiểu chữ cho văn bản
  • 2.4.6. Khái niệm văn bản siêu liên kết
  • 2.4.7. Địa chỉ tương đối
  • 2.4.8. Kết nối mailto
  • 2.4.9. Vẽ một đường thẳng nằm ngang
  • 2.5.1. Giới thiệu
  • 2.5.2. Đưa âm thanh vào một tài liệu HTML
  • 2.5.3. Chèn một hình ảnh, một đoạn video vào tài liệu HTML
  • 2.6. Các th đ nh d ng b ng bi u
  • 2.7.1. HTML Forms
  • 2.7.2. Tạo Form
  • 2.7.3. Tạo một danh sách lựa chọn
  • 2.7.4. Tạo hộp soạn thảo văn bản
  • 2.8.1 Tại sao sử dụng khung ?
  • 2.8.2 Cách sử dụng khung
  • 2.8.3 Phần tử IFRAME – khung trên dòng (inline frame)
  • 3.1.1. Giao diện cửa số Deamweaver
  • 3.1.2. Các thanh công c
  • 3.1.3. Các chế độ xem c
  • 3.2. Thi t k web s d ng
  • 4.1. Khái ni m, tác d ng c a CSS
  • 4.2. Qui t c stylesheet
  • 4.3.1. Selector đơn
  • 4.4. K t h p, liên k t và chèn m t style sheet vào tài li u HTML
  • 4.5. Thi t l p thu c tính trong stylesheet
  • 5.1. Giới thiệu ngôn ngữ Javascript
  • 6.1. Hướng dẫn sử dụng Cpanel
  • 6.2. Cài đặt NukeViet 3.0

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

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

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

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

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

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

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

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

đề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ẻ đó.3.là giá trị màu Đỏ.là giá trị màu Xanh lá cây. 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. Sau dấu bằng có thể là giá trị RGB hay tên tiếng Anh của màu. 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. Với tên tiếng Anh. đó là: Đỏ (Red).4. Ký tự . BB . 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. 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.. Màu sắc có thể được xác định qua thuộc tính bgcolor hay color. chúng ta có thể sử dụng thẻ CENTER để căn giữa trang một khối văn bản. 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 nước biển.4. Xanh lá cây (Green). Xanh nước biển (Blue). GG .4.IMG. Sử dụng màu sắc trong thiết kế các trang Web Một màu được tổng hợp từ ba thành phần màu chính. được sử dụng để tách các ký tự trong một từ.

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

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

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

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

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

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

3. Các file theo định dạng này cũng giống như HTML. Tuy nhiên do trình duyệt có thể hiển thị được cửa sổ 3 chiều nên người xem có thể cảm nhận được cảm giác ba chiều. Chèn một hình ảnh. 2. . Để chơi lặp lại vô hạn cần chỉ định LOOP = -1 hoặc LOOP = INFINITE.mpg. . bạn có thể sử dụng thẻ IMG. Văn bản này còn được gọi là nhãn của ảnh.vrml Viết tắt của Virtual Reality Modeling Language.5. 2.bmp) hoặc video (. Đưa âm thanh vào một tài liệu HTML Cú pháp: <BGSOUND SRC = url LOOP = n> Thẻ này không có thẻ kết thúc tương ứng (</BGSOUND>).VRML . 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ạ. Thẻ BGSOUND phải được đặt trong phần mở đầu (tức là nằm trong cặp thẻ HEAD).5.2. một đoạn video vào tài liệu HTML Để chèn một file ảnh (. dòng văn bản này sẽ hiện 19 . Đối với trình duyệt có khả năng hỗ trợ đồ hoạ.gif.avi) vào tài liệu HTML.jpg. .

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

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

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

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

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

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

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

<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. Số &#160. &#60. &lt. 30 Ký tự đặc biệt Kết quả < nhỏ hơn .

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

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

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

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

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

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

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

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

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

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

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

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

Selector ID Selector ID sử dụng thuộc tính ID của phần tử HTML. 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. 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"> . Ví dụ. Đ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 đó. 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 đó.forest {color:green} .danger {color:red} #control {color:blue} </STYLE> </HEAD> <BODY> <P class=forest>green things <P class=danger>fire hazards </P> <EM class=forest>more green things</EM> <BR> <EM class=danger>more fire hazards</EM> <UL> <LI class=danger>things that burn <LI class=forest>things that don't burn </UL> 43 . 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>. Selector ID được bắt đầu bằng dấu thăng (#).

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

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

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

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

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

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

document.write("Your favorite color is:").document. Các kí tự đặc biệt trong chuổi: \n : New line \t : Tab \r : carriage return \f : form feed \b: backspace Ví dụ: document. . Ví dụ 1: <HTML> <HEAD> <TITLE>Listing 2.writeln(prompt("enter your favorite color:". 7.. document.").write("Three").-> </SCRIPT> </BODY> </HTML> Ví dụ 2: <HTML> <HEAD> 50 .write('<IMG SRC="welcome.document.5 </TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE="Javascript"> <!."Blue")). document.-> </SCRIPT> </PRE> </BODY> </HTML> 6. document.writeln("It work!\n").gif">').write(". 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. . .. 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.6</TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE="Javascript"> <!.-> </SCRIPT> </BODY> 8.writeln("Two.alert("Welcome to JS")."). Ví dụ: <HTML> <HEAD> <TITLE>Example 2.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Hình 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 .

sửa : 73 . Bấm Create để tạo. Chọn FTP Accounts để tạo – xoá . password và dung lượng hộp thư. 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).+ Đổ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 .

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

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

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

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

78 . cpanel vnn.ms sẽ tự giải nén ra.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. 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 .zip cho dễ upload.

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

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

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

Bước 4 82 .

Bước 5 83 .

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

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

86 .

You're Reading a Free Preview

Download
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->