TỔNG QUAN VỀ DỊCH VỤ WORLD WIDE WEB
Một số dịch vụ quan trọng trên Internet
1.1 Dịch vụ truyền file FTP
Dịch vụ truyền tệp (FTP) là một công cụ quan trọng cho phép chuyển giao dữ liệu giữa các máy tính trên mạng, hỗ trợ mọi loại tệp, từ văn bản mã ASCII đến tệp nhị phân Với cấu hình máy chủ FTP, người quản trị có thể thiết lập quyền truy cập cho người dùng đối với từng thư mục và tệp, cũng như giới hạn số lượng người dùng truy cập đồng thời vào cùng một vị trí lưu trữ.
1.2 Dịch vụthư điện tử Email
Dịch vụ thư điện tử là một trong những dịch vụ phổ biến nhất trên Internet, cho phép người dùng gửi thông điệp đến cá nhân hoặc nhóm qua mạng Ngoài việc gửi văn bản, người dùng còn có thể đính kèm tệp tin Sự phổ biến của dịch vụ này đến từ nhiều ưu điểm nổi bật.
Hệ thống thư điện tử nổi bật với tốc độ cao và khả năng chuyển tải toàn cầu, cho phép người dùng gửi thư gần như ngay lập tức Người nhận có thể tiếp cận thư điện tử từ bất kỳ đâu, chỉ cần có kết nối Internet.
Gửi thông tin qua thư điện tử có giá thành rất thấp, chỉ cần chi phí cho Internet là bạn có thể sử dụng các hệ thống thư điện tử miễn phí toàn cầu So với hệ thống thư tín truyền thống, đặc biệt là gửi thư quốc tế, việc sử dụng thư điện tử không chỉ rẻ hơn mà còn tiện lợi hơn rất nhiều.
Gọi điện cho người quen ở Mỹ vào lúc 12 giờ trưa có thể không nhận được phản hồi do sự khác biệt về múi giờ Điều này cho thấy sự linh hoạt về mặt thời gian là rất quan trọng khi kết nối với bạn bè hoặc người thân ở nước ngoài.
Sử dụng thư điện tử mang lại sự tiện lợi, cho phép bạn gửi thông điệp vào bất kỳ thời điểm nào mà không làm phiền người nhận, ngay cả khi họ đang nghỉ ngơi Để gửi và nhận thư điện tử, mỗi người dùng cần có một tài khoản, có thể đăng ký miễn phí hoặc nhận từ các nhà cung cấp dịch vụ Địa chỉ thư điện tử được cấu trúc theo định dạng: Tênđăngký@tênmiền.
Ví dụ địa chỉ thư: nva@topica.edu.vn, nve@neu-edutop.edu.vn Tên đăng ký: nva, nve
Ký tự @ là phần không thể thiếu trong địa chỉ email, phân tách giữa tên đăng ký và tên miền Ví dụ, các tên miền như topica.edu.vn và neu-edutop.edu.vn đại diện cho website của tổ chức cung cấp dịch vụ email Hệ thống email bao gồm hai thành phần chính: UA (Mail User Agent) và MTA (Message Transfer Agent) UA tương tác trực tiếp với người dùng, cho phép họ nhận, soạn thảo, lưu trữ và gửi email, trong khi MTA có nhiệm vụ định tuyến và xử lý các email để đảm bảo chúng đến đúng đích.
Hình 1.10 Cấu trúc hệ thống thư điện tử
Telnet là dịch vụ Internet cho phép người dùng truy cập và điều khiển thiết bị từ xa thông qua kết nối mạng, giống như đang ngồi trực tiếp tại máy Một máy trạm có thể mở nhiều phiên telnet đến các địa chỉ IP khác nhau cùng lúc Telnet hoạt động theo phiên, với mỗi phiên là một kết nối dữ liệu qua giao thức TCP trên cổng 23, theo mô hình khách/chủ.
Client/Server là mô hình trong đó Client là phần mềm trên máy người dùng, cung cấp giao diện cho lệnh điều khiển Server là dịch vụ từ xa, lắng nghe và xử lý kết nối cũng như lệnh từ máy trạm Dịch vụ Telnet thường được sử dụng để điều khiển và cấu hình từ xa các thiết bị như bộ định tuyến và bộ chuyển mạch Để kết nối từ xa đến một thiết bị, câu lệnh sử dụng là: Telnet IP_address.
• IP_address là địa chỉ IP của thiết bị
Web, hay World Wide Web, là dịch vụ phổ biến nhất của Internet, cho phép truy cập vào các trang thông tin siêu văn bản ở nhiều vị trí khác nhau Dịch vụ này hoạt động theo mô hình Khách/Chủ (Client/Server), trong đó máy chủ web là máy tính chạy phần mềm Web server, lưu trữ nội dung và phản hồi yêu cầu từ máy khách Máy khách web, là máy tính của người dùng với trình duyệt web như Internet Explorer, Netscape Navigator hay Firefox, gửi yêu cầu và hiển thị thông tin nhận được từ máy chủ.
Dịch vụ web sử dụng giao thức HTTP (Hyper Text Transfer Protocol): Giao thức truyền siêu văn bản
Để truy cập một trang web, người dùng chỉ cần nhập địa chỉ của trang đó vào thanh địa chỉ của trình duyệt web.
Để truy cập vào trang web của Chương trình đào tạo cử nhân theo phương thức Elearning (NEU-EDUTOP), bạn chỉ cần gõ địa chỉ: http://www.neu-edutop.edu.vn hoặc http://www.topica.edu.vn.
1.5 Bộđịnh vị tài nguyên URL
URL, viết tắt của Uniform Resource Locator (Định vị Tài nguyên thống nhất), là một công cụ quan trọng dùng để tham chiếu tới các tài nguyên trên Internet Nó cung cấp khả năng siêu liên kết cho các trang mạng, cho phép người dùng dễ dàng truy cập vào các nội dung khác nhau Mỗi tài nguyên được xác định bằng một địa chỉ duy nhất, được gọi là URL, hay còn được biết đến với tên gọi là địa chỉ mạng hoặc liên kết mạng.
Về mặt kỹ thuật, URL là một loại URI, nhưng trong nhiều tài liệu và cuộc thảo luận, thuật ngữ URL thường được sử dụng như một từ đồng nghĩa với URI.
Cấu trúc và hoạt động của dịch vụ WWW
World Wide Web (gọi tắt là Web hay WWW)
Dịch vụ Internet cho phép người dùng truy cập vào một kho tàng thông tin khổng lồ, được tổ chức dưới dạng các trang web liên kết chặt chẽ với nhau.
Mỗi trang web là một tài liệu siêu văn bản, bao gồm văn bản, âm thanh và hình ảnh, được mã hóa bằng ngôn ngữ đánh dấu siêu văn bản HTML Ngôn ngữ này cho phép tác giả nhúng các liên kết siêu văn bản (hyperlink) vào tài liệu, tạo nên nền tảng cho World Wide Web.
Khi truy cập một trang web, người dùng có thể nhấp vào từ hoặc hình ảnh được mã hóa dưới dạng liên kết siêu văn bản, dẫn đến một vị trí khác trong tài liệu hoặc một trang web khác Trang thứ hai này có thể tồn tại trên cùng một máy tính hoặc ở bất kỳ đâu trên Internet.
Một website là một tập hợp các trang web liên quan, được lưu trữ trên một máy chủ web Các máy chủ này trên Internet có khả năng lưu trữ hàng ngàn trang web riêng lẻ Quá trình đưa một trang lên máy chủ web được gọi là tải lên (uploading).
Hình 1.7 Hình ảnh của một trang Web
Web cung cấp thông tin đa dạng bao gồm văn bản, hình ảnh, âm thanh và video, phục vụ cho việc phân phối tin tức, dịch vụ giáo dục, thông tin sản phẩm và nhiều mục đích khác Các trang web tương tác cho phép người dùng tra cứu cơ sở dữ liệu, đặt hàng sản phẩm và thực hiện thanh toán trực tuyến Để cung cấp dịch vụ web, cần có một máy chủ web, là một máy tính cài đặt phần mềm phục vụ web, thường được gọi là Web Server.
Tất cả các Web Server đều có khả năng xử lý các file *.htm và *.html, nhưng mỗi loại Web Server lại hỗ trợ các định dạng file chuyên biệt khác nhau; ví dụ, IIS của Microsoft phục vụ cho các file *.asp và *.aspx, trong khi Apache hỗ trợ *.php, và Sun Java System Web Server của SUN phục vụ cho *.jsp Trình duyệt Web là phần mềm ứng dụng được cài đặt trên máy tính người dùng, cho phép họ tìm kiếm và mở các tài liệu siêu văn bản trên Web.
2.2 Web tĩnh và Web động
Web tĩnh là loại website không có hệ thống quản lý nội dung, khiến người dùng không thể chỉnh sửa hoặc chỉ có thể thay đổi dữ liệu một cách hạn chế Hiện nay, web tĩnh ngày càng ít phổ biến, chủ yếu tồn tại trong các công ty thiết kế website, nơi mà việc chỉnh sửa nội dung trở nên dễ dàng nhờ vào kiến thức chuyên môn.
Web tĩnh được làm từ gì?
Về kiến thức cơ bản thì web tĩnh thường được xây dựng từ CSS, HTML,
JavaScript (DHTML) hiện nay đã được nâng cấp với công nghệ HTML5 và CSS3, mang đến những trải nghiệm web đẹp mắt và hấp dẫn Tuy nhiên, một trang web có vẻ lung linh và nội dung thay đổi không nhất thiết phải là web động, vì DHTML cũng có thể được sử dụng để thay đổi nội dung trực tiếp trên client.
Nếu bạn chạy trên máy tính, web tĩnh có thể hoạt động ở bất kỳ đâu vì nó chỉ là một tệp tin thông thường Một trong những ưu điểm nổi bật của web tĩnh là tính đơn giản và dễ triển khai.
Về giao diện Designer có thẻ thiết kế theo kiểu mới lạ
Tốc độ truy cập nhanh bởi nó chỉ là những file HTML
Chi phí đầu tư thấp bởi bạn không phải trả tiền nhiều cho Coder
Thân thiện với bộ máy tìm kiếm bởi bạn có thể đặt tên file tùy ý (ten-file.html, tieu-de-tin-tuc.html)
Nhược điểm của web tĩnh:
Khó quản lý nội dung
Khó nâng cấp bảo trì
Mỗi khi thay đổi phải vào file HTML, CSS hoặc JAVASCRIPT để chỉnh sửa
Khi nào nên sử dụng web tĩnh?
Nếu bạn là doanh nghiệp muốn tự mình làm website thì bạn có thể học các kiến thức căn bản và tự làm một Web tĩnh cho mình
Nội dung website ít khi cập nhật và ít nên bạn muốn tiết kiệm chi phí
Website bạn nhỏ và bạn thuê luôn người chuyên về web để quản trị
Hiện nay, chỉ có các công ty thiết kế web mới có khả năng tạo ra các trang web tĩnh, trong khi khách hàng thường không có kỹ năng chỉnh sửa Ngoài ra, các trang web ONE PAGE với hiệu ứng slide độc đáo cũng có thể sử dụng web tĩnh hoặc kết hợp tĩnh một phần.
Web động khác với web tĩnh ở chỗ nó có hệ thống quản lý nội dung cho phép người dùng chỉnh sửa và cập nhật thông tin Một ví dụ tiêu biểu cho loại hình này là trang vnexpress.net.
24h.com.vn thì đó là những web động bởi vì họ có thể đăng tin mới, chỉnh sửa tin mới và chỉnh sửa danh mục menu,
Web động được làm từ gì?
Web động sử dụng các công nghệ như HTML, CSS, HTML5, CSS3 và JAVASCRIPT, cùng với ngôn ngữ lập trình server như PHP và hệ quản trị cơ sở dữ liệu MySQL, nên cần phải chạy trên máy chủ Để sử dụng trên máy tính cá nhân, bạn cần cài đặt các web server ảo như Vertrigo, XAMPP hoặc WAMP Ưu điểm của web động là khả năng tương tác cao và cập nhật nội dung linh hoạt.
Dễ dàng quản lý nội dung
Dễ dàng nâng cấp và bảo trì
Có thể xây dụng được web lớn
Thường sử dụng tương tác với người dùng cao
Hiện nay vẫn SEO tốt bởi ta có thể sử dụng chức năng Rewrite URL để chuyên URL thân thiện
Nhược điểm của web động:
Chi phí xây dựng cao
Nếu web lớn có thể cần thêm nhân sự chuyên ngành
Khi nào nên sử dụng web động?
Bạn làm website thương mại điện tử bán hàng
Bạn làm web giới thiệu sản phảm công ty
Bạn làm web tin tức, blog cá nhân
Web bạn tầm cỡ lớn
Nhưng chung quy lại thì hiện nay đa số bạn nên chọn giải pháp làm web động sẽ tốt hơn
Web server là một loại máy chủ lớn và nhanh, có chức năng lưu trữ thông tin trên internet, tương tự như một ngân hàng dữ liệu Nó chứa các website đã được thiết kế cùng với các thông tin và tài khoản liên quan, giúp người dùng truy cập và sử dụng các dịch vụ trực tuyến một cách hiệu quả.
Tất cả các website đều cần một chương trình máy tính để phân phối nội dung khi người dùng yêu cầu, và chương trình này chạy trên một web server Khi người dùng muốn truy cập một website, họ sẽ gửi yêu cầu qua internet để xem trang đó Mỗi thiết bị kết nối internet được xác định bằng một địa chỉ IP duy nhất, cho phép các máy tính tìm kiếm và kết nối với nhau.
Mỗi website có một địa chỉ duy nhất gọi là URL (Uniform Resource Locator) Khi người dùng nhập URL vào trình duyệt, ví dụ: https://longvan.net/, máy khách sẽ gửi yêu cầu truy cập đến IP của web server Web server nhận yêu cầu và gửi nội dung trang web, bao gồm bài viết, hình ảnh và video, qua giao thức HTTP đến máy khách Mỗi web server có một địa chỉ IP hoặc tên miền, và bất kỳ máy tính nào cũng có thể trở thành web server bằng cách cài đặt phần mềm server và kết nối Internet.
Lịch sử phát triển các hệ thống WebServer-WebBrowser
Ngày 6/8/1991 đánh dấu một cột mốc quan trọng khi mã máy tính đầu tiên cho www được công bố trên alt.hypertext, cho phép mọi người tải xuống và khám phá Sự kiện này đã mở ra kỷ nguyên công nghệ web, đưa Internet đến gần hơn với toàn thế giới.
Jeff Groff, người đồng sáng lập web cùng với Berners-Lee, chia sẻ rằng ý tưởng về web ra đời từ một khái niệm đơn giản: "Chúng tôi tin rằng người dùng không nên phải đối mặt với những vấn đề kỹ thuật phức tạp." Web được ví như một tấm khăn trải giường, có nhiệm vụ che giấu sự phức tạp của dữ liệu lưu hành trên Internet.
Paul Kunz, nhà khoa học đã thiết lập máy chủ web đầu tiên ở châu Âu vào tháng 12 năm 1991, chia sẻ rằng vào đầu thập niên 90, máy tính hoạt động như những "ốc đảo" thông tin Mỗi lần đăng nhập chỉ cho phép truy cập vào tài nguyên của một hệ thống duy nhất, và việc chuyển sang máy tính khác đồng nghĩa với việc người dùng phải đăng nhập lại và sử dụng các bộ lệnh khác nhau để truy xuất dữ liệu.
Web đã thu hút sự chú ý của Kunz khi ông xem Berners-Lee trình diễn khả năng của nó trên hệ thống IBM Sau đó, Kunz đã thiết lập một máy chủ web, giúp các chuyên gia vật lý truy cập và rà soát hơn 200.000 dữ liệu một cách dễ dàng hơn bao giờ hết.
Mặc dù các nhà vật lý bị cuốn hút bởi web, hầu hết mọi người lại không nhận ra tiềm năng của nó Kunz cho rằng điều này xảy ra do nhiều tổ chức đang phát triển những ý tưởng tương tự Công nghệ nổi tiếng nhất lúc bấy giờ là Gopher của Đại học Minnesota, với mục tiêu đơn giản hóa việc sử dụng máy tính kết nối Internet Gopher được ra mắt vào mùa xuân năm 1991 và đã thu hút lưu lượng truy cập cao hơn đáng kể so với web trong vài năm tiếp theo.
Sự phát triển của công nghệ web so với Gopher Nguồn: MIT
Trong thời gian đó, Berners-Lee, Jeff Groff và đồng nghiệp cũng tích cực giới thiệu phát minh của họ tại các hội thảo, cuộc gặp gỡ
Dự án www đã đạt được bước đột phá quan trọng khi chuyên gia Marc Andreessen từ Đại học Illinois (Mỹ) ra mắt trình duyệt web máy tính đầu tiên vào tháng 4 năm 1993 Trình duyệt này đã mở ra kỷ nguyên mới cho việc truy cập thông tin trên Internet.
Mosaic đã đạt được thành công vượt bậc và nhiều tính năng của nó vẫn được xem là tiêu chuẩn trong công nghệ web hiện nay Năm 1993, Đại học Minnesota bắt đầu thu phí dịch vụ Gopher, điều này đã thúc đẩy người dùng tìm kiếm các giải pháp thay thế.
Theo Ed Vielmetti, nhà nghiên cứu tại Đại học Michigan, từ những năm đầu, web đã chứng tỏ tính hữu ích cho người dùng thông thường, cho phép họ tự bộc lộ bản thân qua các trang web, điều mà các công nghệ khác không thể thực hiện Hình thức hiện đại của sự tự bộc lộ này chính là blog.
Cuối năm 1994, lưu thông web đã vượt qua Gopher và không ngừng phát triển Hiện tại, đã có gần 100 triệu website ra đời, cho thấy công nghệ web đã trở thành một phần không thể tách rời của Internet.
Kunz nhấn mạnh rằng ý tưởng ra đời của www nhằm tạo cơ hội cho mọi người không chỉ đọc mà còn đóng góp nội dung Những công cụ hiện đại như trang chia sẻ ảnh, mạng xã hội, blog và các trang wiki đang dần thực hiện lời hứa ban đầu của nhóm phát triển web.
Và như thế, theo Kunz, web bây giờ mới chỉ bắt đầu những bước đi đầu tiên
Lịch sử trình duyệt Web bắt đầu vào cuối thập niên 1980 với sự ra đời của WorldWideWeb, trình duyệt đầu tiên do Tim Berners-Lee phát triển vào năm 1991 Sự phát triển này không chỉ dựa trên các công nghệ phần mềm và phần cứng hiện có mà còn mở ra nhiều công nghệ mới, đánh dấu bước tiến quan trọng trong lĩnh vực Internet.
Ted Nelson and Douglas Engelbart pioneered the concept of hypertext long before Tim Berners-Lee and CERN The web browser has since become central to the functionality of the World Wide Web.
Berners-Lee thừa nhận sự đóng góp của Engelbart
Sự ra mắt của trình duyệt Mosaic NCSA Web vào năm 1993, một trong những trình duyệt web đồ họa đầu tiên, đã thúc đẩy sự bùng nổ trong việc sử dụng Internet Marc Andreessen, người đứng đầu đội ngũ Mosaic tại NCSA, đã thành lập công ty riêng mang tên Netscape và phát hành các phiên bản mới của trình duyệt này.
Mosaic Netscape Navigator ra mắt vào năm 1994 và nhanh chóng trở thành trình duyệt web phổ biến nhất thế giới, chiếm tới 90% thị phần sử dụng Internet vào thời kỳ đỉnh cao của nó.
Microsoft đã đáp trả bằng trình duyệt Internet Explorer của mình trong năm
Vào năm 1995, Internet Explorer ra mắt và nhanh chóng trở thành một phần quan trọng trong cuộc chiến trình duyệt đầu tiên, nhờ vào việc tích hợp với hệ điều hành Windows Điều này giúp Microsoft tận dụng lợi thế của mình trong thị trường hệ điều hành để thống trị thị trường trình duyệt web Đến năm 2002, Internet Explorer đã chiếm hơn 95% thị phần người dùng, và đến tháng 4 năm 2010, tỷ lệ sử dụng của trình duyệt này vẫn đạt khoảng 60% theo thống kê từ Net Applications.
TẠO CÁC TRANG HTML
Tạo và thực thi trang web HTML
Khi học thiết kế web bằng ngôn ngữ HTML, việc soạn thảo tài liệu nên được thực hiện bằng các trình soạn thảo văn bản đơn giản như Notepad, Notepad++ trên Windows hoặc TextEdit trên Mac Sử dụng những công cụ này giúp rèn luyện tính cẩn thận, tỉ mỉ và kiên nhẫn, những phẩm chất quan trọng trong quá trình học Các đoạn mã minh hoạ trong giáo trình sẽ được soạn thảo bằng Notepad++ Để tạo một trang HTML, chúng ta cần tuân theo ba bước cơ bản.
Bước 1: Mở Notepad++ (nếu chưa có phần mềm này trên máy tính, có thể download miễn phí tại https://notepad-plus-plus.org/);
Ví dụ đoạn mã HTML đơn giản sau:
Đây là trang web đầu tiên của tôi.
Viết trong Notepad++ sẽ có giao diện như sau:
Bước 3: Lưu đoạn mã HTML đã soạn thảo thành tập tin HTML bằng cách vào mục File > Save As hoặc chọn biểu tượng Save nếu chưa lưu trước đó, lưu ý chọn đúng tên tập tin và phần mở rộng.
Sau khi chọn Save As sẽ hiện ra hộp thoại Save As như sau:
To save your file, enter a name (for example, myfirstpage) with an HTML or HTM extension in the File name field Choose "All types (*.*)" in the Save as type dropdown menu, and select the desired location for your file in the Save in section.
Sau khi lưu, nội dung tập tin HTML trong Notepad++ sẽ trông như sau:
–Mở trang HTML đầu tiên bằng trình duyệt web (web browser) như Firefox,
Chrome hay Internet Explorer như sau:
+ Nhấp chuột phải vào tập tin HTML vừa tạo;
+ Chọn mục Open with và chọn trình duyệt web dùng để hiển thị trang HTML
Ví dụ mở trang HTML vừa tạo (myfirstpage.html) bằng trình duyệt web Chrome như hình sau:
Kết quả chúng ta có:
Chúng ta thấy lỗi font chữ xuất hiện ở đây Vì sao lại như thế chúng ta sẽ tìm hiểu và khắc phục trong những bài sau
Để chỉnh sửa lại nội dung của tập tin HTML, chúng ta nhấp chuột phải vào tập tin, chọn Open withvà chọn trình soạn thảo văn bản (Notepad++)
Cách học HTML hiệu quả nhất là xem mã HTML từ các trang web Đối với các trình duyệt phổ biến, bạn có thể thực hiện như sau: Trong Chrome, nhấp chuột phải và chọn "View page source"; trong Internet Explorer, nhấp chuột phải và chọn "View source"; trong Firefox, nhấp chuột phải và chọn "View page source"; và trong Safari, nhấp chuột phải và chọn "Show page source".
C ấ u trúc trang web HTML
HTML là một ngôn ngữ đánh dấu mô tả các tài liệu web (web pages)
+ HTML là viết tắt của Hyper Text Markup Language
+ Là một tập hợp các thẻ đánh dấu
+ Tài liệu HTML được mô tả bằng các thẻ HTML
+ Mỗi thẻ HTML mô tả nội dung tài liệu khác nhau
Cấu trúc cơ bản của một trang HTML như sau:
+ Khai báo DOCTYPE định nghĩa kiểu tài liệu là HTML
+ Thẻ và mô tả một tài liệu HTML
+ Thẻ và cung cấp thông tin về tài liệu như: diễn giải ý nghĩa trang web, từ khóa
+ Thẻ và mô tả nội dung trang cần hiển thị (tất cả nội dung cần hiển thị sẽ nằm trong cặp thẻ này)
Tạo một trang HTML cơ bản
Định dạng văn bản
Thẻ
được sử dụng để định dạng một đoạn văn bản
Nội dung đoạn văn bản
3.1.2 Các th ẻ đị nh d ạng đề m ụ c h1/h2/h3/h4/h5/h6
HTML hỗ trợ 6 mức đề mục, từ cấp 1 đến cấp 6, với cấp 1 là cao nhất Đề mục chỉ là hướng dẫn định dạng logic, do đó, cách hiển thị có thể khác nhau giữa các trình duyệt; ví dụ, một trình duyệt có thể hiển thị đề mục với font chữ 14 point, trong khi trình duyệt khác có thể sử dụng font chữ 20 point.
5 hay cấp 6 thường có kích thước nhỏ hơn văn bản thông thường
Dưới đây là các thẻ dùng để định dạng văn bản ở dạng đề mục:
Đị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
3.1.3 Th ẻ xu ố ng dòng br
Thẻ trong HTML không có thẻ kết thúc tương ứng và được sử dụng để chuyển sang dòng mới Lưu ý rằng trong tài liệu HTML, trình duyệt Web sẽ hiển thị nội dung liên tục, coi các khoảng trắng, ký tự tab và ký tự xuống dòng như một khoảng trắng duy nhất Để tạo dòng mới trong tài liệu, bạn cần sử dụng thẻ .
3.1.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ẻ
Nội dung giữa hai thẻ sẽ được hiển thị chính xác như cách nhập vào, bao gồm cả dấu xuống dòng, mà không bị coi là dấu cách bởi trình duyệt.
Văn bản đã được định dạng
3.2 Các thẻđịnh dạng danh sách
_ Danh sách không sắp xếp ( hay không đánh số)
- Muc thu nhat
- Muc thu hai
- Muc thu ba
TYPE =1 Các mục được sắp xếp theo thứ tự 1,
=a Các mục được sắp xếp theo thứ tự a, b, c
Các mục được sắp xếp theo thứ tự A,
=i Các mục được sắp xếp theo thứ tự i, ii, iii
=I Các mục được sắp xếp theo thứ tự I,
Ngoài ra còn thuộc tính START= xác định giá trị khởi đầu cho danh sách
Thẻ < LI > với thuộc tính TYPE= được sử dụng để xác định kiểu ký hiệu đầu dòng cho mỗi mục trong danh sách Các giá trị có thể cho thuộc tính này bao gồm: disc (chấm tròn đậm), circle (vòng tròn) và square (hình vuông).
3.3 Các thẻđịnh dạng ký tự
Các thẻ HTML được sử dụng để quy định thuộc tính định dạng cho văn bản bao gồm in nghiêng, in đậm và gạch chân Những thẻ này giúp cải thiện cách hiển thị ký tự và văn bản trên trình duyệt, tạo ra sự chú ý và nhấn mạnh cho nội dung.
In chữ nghiêng
Đoạn văn bản nằm giữa hai thẻ được coi là định nghĩa của một từ, thường được in nghiêng hoặc thể hiện qua kiểu dáng đặc biệt nào đó.
In chữ bị gạch ngang
Thẻ giúp tăng kích thước chữ lên một cấp so với kích thước font hiện tại, tạo ra hiệu ứng chữ lớn hơn Việc sử dụng các thẻ lồng nhau có thể tạo ra hiệu ứng chữ tăng dần Tuy nhiên, mỗi trình duyệt đều có giới hạn về kích thước font chữ, nên nếu vượt quá giới hạn này, các thẻ sẽ không còn tác dụng.
Sử dụng thẻ để giảm kích thước font chữ, tạo hiệu ứng chữ nhỏ hơn bình thường bằng cách giảm kích thước hiện tại đi một Việc lồng ghép các thẻ sẽ tạo ra hiệu ứng chữ giảm dần.
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ữ, vượt quágiới hạn này, các thẻ sẽ không có ý nghĩa
Định dạng chỉ số trên (SuperScript)
Định dạng chỉ số dưới (SubScript)
Thẻ được sử dụng để định nghĩa kích thước font chữ cho toàn bộ văn bản, với tham số size= để xác định cỡ chữ Lưu ý rằng thẻ không có thẻ kết thúc.
Chọn kiểu chữ hiển thị bằng cách sử dụng thẻ FONT, trong đó có thể thiết lập hai tham số size= và color= để xác định cỡ chữ và màu sắc cho đoạn văn bản Kích thước chữ có thể là tuyệt đối, với giá trị từ 1 đến 7, hoặc tương đối so với font chữ hiện tại, ví dụ như +2 hoặc -4.
Địa chỉ tương đối và tuyệt đối
URL được trình bày là URL tuyệt đối, trong khi đó còn có URL tương đối, hay còn gọi là URL không đầy đủ URL tương đối sử dụng sự khác biệt giữa văn bản hiện tại và văn bản cần tham chiếu, với các thành phần được ngăn cách bằng ký tự gạch chéo (/) Để tạo URL tương đối, cần sử dụng ký tự ngăn cách, giữ nguyên các thành phần bên trái và thay thế các thành phần bên phải bằng URL tương đối Lưu ý rằng trình duyệt không gửi URL tương đối mà bổ sung vào URL cơ sở đã xác định trước, với ký tự đầu tiên sau dấu "=" xác định các thành phần của URL hiện tại tham gia vào việc tạo URL mới.
Ví dụ, nếu URL đầy đủ là: http://it-department.vnuh.edu.vn/HTML/index.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ụ
://www.fpt.com/ sẽ tải trang chủ của máy phục vụ www.fpt.com với cùng dịch vụ http
Dấu gạch chéo (/) trong đường dẫn chỉ dịch vụ và máy phục vụ vẫn giữ nguyên, tuy nhiên, toàn bộ đường dẫn sẽ được thay đổi Ví dụ, khi truy cập /Javascript/index.htm, hệ thống sẽ tải file index.htm từ thư mục Javascript trên máy phục vụ www.it-department.vnuh.edu.vn.
Không có dấu phân cách, chỉ có tên file được thay đổi Chẳng hạn, file index1.htm sẽ được tải từ thư mục HTML trên máy chủ www.it-department.vnuh.edu.vn.
• Dấu thăng (#): chỉ dịch vụ, máy phuc vụ, đường dẫn và cả tên file giữ nguyên, chỉ thay đổi vị trí trong file
Đường dẫn được coi là đơn vị độc lập, cho phép áp dụng phương pháp đường dẫn tương đối giống như trong UNIX hay MS-DOS, trong đó dấu chấm (.) đại diện cho thư mục hiện tại và dấu hai chấm ( ) biểu thị thư mục cha của thư mục hiện tại.
URL cơ sở có thể được xác định bằng thẻ .
Siêu liên kết
Trong khoa học máy tính, siêu liên kết (hyperlink) là một tham chiếu cho phép người dùng nhấp vào để truy cập tài liệu Siêu liên kết có thể dẫn đến toàn bộ tài liệu hoặc một phần cụ thể trong tài liệu đó Siêu văn bản là thuật ngữ chỉ văn bản đi kèm với siêu liên kết.
Việc bấm vào siêu liên kết có thể tạo ra những tác động khác nhau trong hệ thống siêu văn bản, tùy thuộc vào loại liên kết Trên World Wide Web, hầu hết các siêu liên kết sẽ hiển thị tài liệu mục tiêu, thay thế cho tài liệu cũ Tuy nhiên, một số liên kết được đánh dấu sẽ mở tài liệu mục tiêu trong một cửa sổ mới.
Siêu liên kết là một phần của tổ chức sáng lập World Wide Web được thành lập bởi Tim Berners-Lee
5.1 Liên kết đến các file, thư mục
Vào ổ đĩa D tạo một thư mục có tên là laptrinhweb Vào thư mục laptrinhweb, lần lượt tạo các thư mục và tập tin như sau: laptrinhweb
Ví dụ 1: Giả sử bạn đang ở trang1.html muốn đến trang2.html thì đường đi sẽ là:
Liên kết đến trang 2
Ví dụ 2: Giả sử bạn đang ở trang1.html muốn đến trang6.html thì đường đi sẽ là:
Liên kết đến trang 6;
Ví dụ 3: Giả sử bạn đang ở trang4.html muốn đến trang2.html thì đường đi sẽ là:
1 Đi ngược về thư mục cha (Để đi ngược về thư cha, ta dùng dấu hai chấm )
Liên kết đến trang 2
Ví dụ 4:Giả sử bạn đang ở trang4.html muốn đến trang8.html thì đường đi sẽ là:
1 Đi ngược về thư mục cha
2 Đi ngược về thư mục cha
Liên kết đến trang 8
Ví dụ 5: Giả sử bạn đang ở trang5.html muốn đến trang6.html thì đường đi sẽ là:
1 Đi ngược về thư mục cha
Liên kết đến trang 6
Ví dụ 6: Giả sử bạn đang ở trang3.html muốn đến trang4.html thì đường đi sẽ là:
1 Đi ngược về thư mục cha
Liên kết đến trang 4
Ví dụ 7: Giả sử bạn đang ở trang1.html muốn đến trang8.html thì đường đi sẽ là:
Liên kết đến trang 8
5.2 Liên kết đến các phần khác của cùng trang
Liên kết neo là một loại liên kết trong siêu văn bản, cho phép người dùng di chuyển đến một vị trí cụ thể trong cùng tài liệu mà không cần tải lại hay mở tài liệu mới Liên kết này bao gồm hai phần chính.
Khu vực được neo, được khai báo bằng thẻ bất kỳ với thuộc tính id (ví dụ:
)Liên kết neo được định nghĩa qua thẻ với thuộc tính href, trong đó giá trị chứa dấu # theo sau là tên id của khu vực cần truy cập (ví dụ: xem nội dung).
5.3 Liên kết đến các site trên internet Để liên kết đến một tài liệu khác, ta cần phải biết địa chỉ URL của tài liệu đích Cũng cần phải chỉ chỗ, thường là một nhóm vài từ để làm đầu mối liên kết Nhóm từ này sẽ đổi màu để phân biệt, con chuột trỏ vào sẽ có hình bàn tay và khi nhấn chuột thì trang siêu văn bản đích sẽ được hiển thị
Khi chọn từ làm đầu mối, hãy đảm bảo chúng gợi tả và tự nhiên, không làm ảnh hưởng đến nội dung và ý nghĩa của câu Nên tránh việc lặp lại cụm từ "nhấn vào đây" khi tạo liên kết.
Cú phápđể tạo ra một mối liên kết tới tài liệu khác - liên kết ra ngoài - là như sau:
Nhóm từ đầu mối liên kết
Âm thanh - Hình ảnh
Liên kết đến file đa phương tiện giống như liên kết thông thường, nhưng cần phải đặt tên chính xác cho file Phần mở rộng của file cần phản ánh đúng loại file đó.
GIF, viết tắt của Graphics Interchange Format, là một định dạng hình ảnh được phát triển để phục vụ nhu cầu chia sẻ ảnh trên nhiều hệ thống khác nhau Định dạng này tương thích với tất cả các hệ thống hỗ trợ giao diện đồ họa và trở thành chuẩn cho mọi trình duyệt web Tuy nhiên, nhược điểm lớn của GIF là chỉ có khả năng hiển thị tối đa 256 màu.
Chuẩn GIF89 mở rộng đã được bổ sung nhiều chức năng đặc biệt, cho phép tạo ra hình ảnh nền trong suốt, giúp ảnh nổi bật hơn bằng cách đồng bộ màu nền với màu nền của trình duyệt.
JPEG, viết tắt của Joint Photographic Expert Group, là một định dạng ảnh nổi bật với khả năng nén cao, cho phép lưu trữ hàng triệu màu sắc Ưu điểm của JPEG là kích thước file ảnh nhỏ hơn, giúp thời gian tải nhanh hơn Định dạng này cũng là nền tảng cho định dạng MPEG và được tất cả các trình duyệt hỗ trợ xem.
Image/TIFF tiff Viết tắt của Tagged Image File Format Được
Microsoft thiết kế để quét ảnh từ máy quét cũng như tạo các ấn phẩm
PostScript eps, ps Được tạo ra để hiển thị và in các văn bản có chất lượng cao
PDF là viết tắt của Portable Document Format, cho phép người dùng tạo và chia sẻ tài liệu dễ dàng Acrobat hỗ trợ siêu liên kết trong văn bản tương tự như HTML, và từ phiên bản 2.0, sản phẩm của Acrobat đã cho phép liên kết giữa nhiều tài liệu khác nhau Một trong những ưu điểm nổi bật của PDF là khả năng WYSIWYG, giúp người dùng xem trước tài liệu giống như khi in ra.
Video/MPEG (.mpeg) là viết tắt của Motion Picture Expert Group, một định dạng phổ biến dành cho các loại phim và video Đây là khuôn dạng được sử dụng rộng rãi nhất cho phim trên web.
Video/AVI avi Là khuôn dnạg phim do Microsoft đưa ra
Định dạng video mov do Apple Computer phát triển được cho là ưu việt hơn so với MPEG và AVI Mặc dù đã được tích hợp vào nhiều trình duyệt, nhưng định dạng này vẫn chưa đạt được mức độ phổ biến như hai định dạng video kia.
Âm thanh/MIDI mid là định dạng phổ biến cho âm nhạc điện tử, được nhiều trình duyệt trên các hệ thống khác nhau hỗ trợ Tệp Midi được tổng hợp và số hóa trực tiếp từ máy tính, mang lại sự tiện lợi cho người dùng trong việc tạo ra và chia sẻ âm nhạc.
Âm thanh định dạng RealAudio (.ram) cho phép phát nhạc trực tuyến mà không cần tải toàn bộ file Một trong những bất tiện của các định dạng âm thanh khác là kích thước file lớn, dẫn đến thời gian tải lâu Ngược lại, định dạng âm thanh dòng cho phép bắt đầu phát ngay khi tải được một phần file, mặc dù kích thước file không nhỏ hơn các định dạng khác Khả năng phát ngay lập tức đã làm cho định dạng này trở nên phù hợp và tiện lợi hơn cho người sử dụng.
VRML vrml Viết tắt của Virtual Reality Modeling Language
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
6.2 Đưa âm thanh vào một tài liệu HTML Cú pháp:
Thẻ BGSOUND cần được sử dụng trong phần đầu của tài liệu HTML, nằm trong cặp thẻ HEAD, và không có thẻ kết thúc tương ứng Để thiết lập chế độ lặp vô hạn, bạn cần chỉ định LOOP = -1 hoặc LOOP = INFINITE.
6.3 Chèn một hình ảnh, một đoạn video vào tài liệu HTML Để chèn một file ảnh (.jpg, gif, bmp) hoặc video (.mpg, avi) vào tài liệu HTML, bạn có thể sử dụng thẻ IMG
ALIGN = TOP/MIDDLE/BOTTOM ALT = text
WIDTH = width HEIGHT = height HSPACE = vspace VSPACE = hspace TITLE = title
DYNSRC = url START = FILEOPEN/MOUSEOVER LOOP = n
Căn hàng văn bản bao quanh ảnh
ALT là văn bản hiển thị khi chức năng hiển thị hình ảnh của trình duyệt bị tắt hoặc không hỗ trợ đồ họa Văn bản này được coi là nhãn của ảnh và sẽ xuất hiện khi người dùng di chuột qua ảnh hoặc trong khu vực của ảnh nếu ảnh chưa tải xong Cần lưu ý rằng văn bản phải được đặt trong hai dấu nháy kép nếu chứa khoảng trắng hoặc ký tự đặc biệt; ngược lại, có thể không cần dấu nháy kép.
BORDER = n Đặt kích thước đường viền được vẽ quanh ảnh
SRC = url Địa chỉ của file ảnh cần chèn vào tài liệu
WIDTH/HEIGHT Chỉ định kích thước của ảnh được hiển thị
HSPACE/VSPACE Chỉ định khoảng trống xung quanh hình ảnh
(tính theo pixel) theo bốn phía trên, dưới, trái, phải
TITLE = title Văn bản sẽ hiển thị khi con chuột trỏ trên ảnh
DYNSRC = url Địa chỉ của file video
FILEOPEN/MOUSEOVER là chỉ định cho file video sẽ được phát khi tài liệu được mở hoặc khi con trỏ chuột di chuyển đến nó Bạn có thể kết hợp cả hai giá trị này, nhưng cần phân cách chúng bằng dấu phẩy.
LOOP = n/INFINITE Chỉ định số lần chơi Nếu LOOP = INFINITE thì file video sẽ được chơi vô hạn lần.
Bảng biểu
Sau đây là các thẻ tạo bảng chính:
Đị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ột
Tiêu đề của bảng
Tiêu đề của bảng biểu
Định nghĩa các ô trong dòng
Ý nghĩa các tham số:
ALIGN / VALIGN Căn lề cho bảng và nội dung trong mỗi ô
Kích thước đường kẻ chia ô trong bảng được đo bằng pixel, với giá trị 0 nghĩa là không có lề và chỉ có khoảng trắng nhỏ giữa các ô Nếu chỉ định border, mặc định sẽ là border=1 Đối với các bảng có cấu trúc phức tạp, việc đặt lề là cần thiết để người xem dễ dàng phân biệt các dòng và cột.
BORDERCOLORLIGHT Màu phía tối và phía sáng cho đường kẻ nổi
BACKGROUND Địa chỉ tới tệp ảnh dùng làm nền cho bảng
CELLPADDING Khoảng cách giữa nội dung và đường kẻ trong mỗi ô của bảng
COLSPAN Chỉ định ô sẽ kéo dài trong bao nhiêu cột
ROWSPAN Chỉ định ô sẽ kéo dài trong bao nhiêu hàng
Tạo Form
Các HTML Form có thể có các hộp văn bản, hộp danh sách lựa chọn, nút bấm, nút chọn
8.2 TẠO FORM Để tạo ra một form trong tài liệu HTML, chúng ta sử dụng thẻ FORM với cú pháp như sau:
TARGET = frame_name | _blank | _self
ACTION Đị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, một trang ASP )
METHOD Phương thức gửi dữ liệu
Cửa sổ TARGET sẽ hiển thị kết quả sau khi dữ liệu từ biểu mẫu được gửi đến máy chủ Đặt các điều khiển như hộp văn bản, ô kiểm tra và nút bấm vào trang web để tối ưu hóa trải nghiệm người dùng.
TYPE = BUTTON | CHECKBOX | FILE | IMAGE | PASSWORD |
8.3 TẠO MỘT DANH SÁCH LỰA CHỌN
Tên mục chọn thứ nhất
Tên mục chọn thứ hai
8.4 TẠO HỘP SOẠN THẢO VĂN BẢN
THIẾT KẾ WEBSITE VỚI DREAM WEAVER
T ạo thư mụ c ch ứ a b ộ web
Trước khi bắt đầu thiết kế một trang web, người thiết kế cần tạo một thư mục để lưu trữ tất cả các tài liệu liên quan, chẳng hạn như webserver.
Trong thư mục đó, bạn sẽ tạo tiếp các thư mục khác dùng để chứa dữ liệu như:
Thư mục Image dùng để chứa toàn bộ hình ảnh của trang web
Thư mục Flash dùng để chứa những tập tin flash, video clip, …
Thư mục Data dùng để chứa dữ liệu
Và các thư mục khác tùy theo mục đích của người tạo web.
Tạo mới một trang web
Khởi động Dreamweaver và chọn HTML trong cửa sổ đầu tiên để mở trang tài liệu mới Bạn cũng có thể vào menu File, chọn New, sau đó trong mục Blank Page chọn HTML và bấm nút Create để tạo trang mới.
Hình 3.1 Khởi tạo trang web
Lưu một trang web
Trước khi bắt đầu thiết kế website, hãy lưu trang web bằng cách vào menu File và chọn Save hoặc Save as Lưu trang web vào thư mục chứa bộ web với định dạng *.html Đặc biệt, trang chủ của website phải được đặt tên là index.html và lưu trong thư mục chứa bộ web.
Định dạng trang web
Hình 3.2 Thuộc tính trang web
Sau khi lưu lại trang web thành công, vào menu Modify chọn Page
Properties để cài đặt định dạng cho trang web
Trong hộp thoại Page Properties bạn chỉnh các thông số sau (hình 2):
+ Background image: Chọn Browse và duyệt đến tập tin ảnh dùng làm nền cho trang web
+ Background: Bấm vào nút bảng màu và chỉ ra màu nền cho trang web
+ Text: Chỉ định màu chữ mặc định
+ Link: Chỉ định màu chữ mặc định khi bạn tạo liên kết cho nó
+ Left margin: Nhập vào khoảng cách lề trái so với nội dung trang web
+ Top margin: Nhập vào khoảng cách lề trên so với nội dung trang web
+ Margin width: nhập vào độ rộng của trang web
+ Margin height: nhập vào độ cao của trang web
Hình 3.3 Tiêu đề và bảng mã
+ Title: Nhập tiêu đề của trang web
+ Các mục khác cứ để mặc định
Sau khi tinh chỉnh định dạng trang web xong, chọn OK để thiết lập (hình 3).
Xem trang web trên trình duyệt
Để xem trang web trên trình duyệt trong quá trình làm việc, bạn có thể nhấn Ctrl+S để lưu lại trang, sau đó nhấn phím F12 để mở trên trình duyệt mặc định Ngoài ra, bạn cũng có thể chọn biểu tượng hình trái đất ở phía trên và chọn trình duyệt mà bạn muốn sử dụng.
Tạo bảng trong trang web
Để xây dựng một trang web với nội dung được sắp xếp hợp lý và dễ dàng tìm thấy trên các công cụ tìm kiếm, bạn cần tạo một bảng trước khi nhập nội dung Để thực hiện điều này, hãy vào Menu Insert và chọn Table.
Hình 3.4 Thiết lập thuộc tính bảng
Hộp thoại Table hiện ra, nhập số dòng trong mục Rows, số cột trong mục
Columns, độ rộng của Table trong mục Table width và trong mục Border thickness nhập vào giá trị độ lớn của khung trong bảng sau đó bấm OK (hình
- Định dạng bảng Bấm chuột vào đường khung của bảng, khung thuộc tính của bảng hiện ra bên dưới như hình 5
Thiết lập bảng thuộc tính gồm các nội dung sau:
W, H: Chiều rộng và chiều cao của bảng
CellPad: khoảng cách từ văn bản đến bảng
CellSpace: khoảng cách giữa các ô của bảng
Align: chế độ canh lề của bảng
BgColor: màu nền của bảng hay ô
- Thay đổi cấu trúc bảng
Hình 3.6 Thêm dòng vào bảng
Trong quá trình làm việc, bảng tạo ra có thể chưa phù hợp Bạn có thể thay đổi cấu trúc của bảng với những nội dung sau:
Thêm dòng: chọn dòng mà bạn muốn chèn thêm một dòng mới phía sau nó Chọn Modify > Table > Insert Rows or Columns
Trong cửa sổ hiện ra, đánh dấu chọn trước mục Rows và Below the Selection Trong mục Number of rows, đánh số dòng muốn chèn và bấm OK (hình 6)
Để thêm cột vào bảng, bạn cần chọn cột mà bạn muốn chèn cột mới bên phải Sau đó, thực hiện các bước tương tự như khi thêm dòng, nhưng nhớ đánh dấu chọn trước chữ "Columns".
Xóa dòng: chọn dòng muốn xóa, chọn Modify > Table > Delete row (hoặc bấm chuột phải vào dòng muốn xóa, chọn Table > Delete row)
Xóa cột: chọn cột muốn xóa, vào Modify > Table > Delete column (hoặc bấm chuột phải vào cột muốn xóa, chọn Table > Delete column)
- Trộn ô: chọn các ô muốn trộn, chọn Modify > Table > Merge cells (hoặc bấm vào biểu tượng trộn ô ở dưới khung thuộc tính)
- Tách ô: chọn vào ô muốn tách, chọn Modify > Table > Splits cells (hoặc bấm vào biểu tượng tách ô ở dưới khung thuộc tính)
- Canh lề văn bản trong ô
Để định dạng văn bản trong ô, bạn hãy chọn văn bản hoặc các ô cần định dạng, sau đó nhấp chuột phải vào vùng chọn và chọn "Align" Tiếp theo, bạn có thể chọn một trong bốn kiểu canh lề: Left (canh trái), Right (canh phải), Center (canh giữa) hoặc Justify (canh đều).
Hình 3.7 Canh lề cho văn bản trong ô
Chèn hình vào trang web
Trước khi chèn hình ảnh vào trang web, hãy sao chép tất cả hình ảnh cần thiết vào thư mục Image của bộ web Cần lưu ý đến số lượng và kích thước hình ảnh để tránh làm tăng dung lượng trang web, gây chậm tốc độ tải Để chèn hình ảnh, vào Insert, chọn Image và tìm đến hình ảnh muốn chèn.
Sau khi chèn hình ảnh vào trang web, bạn tiến hành thiết lập các thuộc tính cho hình ảnh vừa mới chèn ở khung Properties (hình 8)
Hình 3.8 Thuộc tính của hình ảnh
Rollover Images là hình ảnh thay đổi khi con trỏ di chuyển qua Để tạo Rollover Images, hai ảnh cần có kích thước bằng nhau; nếu không, Dreamweaver sẽ tự động điều chỉnh kích thước cho phù hợp.
Trước tiên bạn đặt con trỏ ở vị trí muốn chèn Sau đó chọn Insert > Image objects > Rollover Image
Hộp thoại Insert Image Rollover xuất hiện ta thiết lập các nội dung sau:
Hình 3.9 Tạo hiệu ứng ảnh động khi di chuyển trỏ chuột
- Image name: đặt tên cho Image
- Original image: bấm vào nút Browse chỉ định hình đầu tiên xuất hiện
- Rollover Images: bấm vào nút Browse chỉ định hình sẽ thay đổi khi di chuyển chuột qua nó
- When Clicked, Go to URL: bấm vào nút Browse chỉ ra trang web liên kết đến khi bấm vào nó
Chọn OK để hoàn tất (hình 9).
Chèn ảnh động flash, video clip vào trang web
Vào Insert > media > chọn SWF hoặc FLV tùy theo định dạng tập tin cần chèn Sau đó duyệt đến File flash hoặc File Video và bấm OK
Hình 3.10 Chèn tập tin đa phương tiện
Tạo menu cho trang web
Menu là yếu tố thiết yếu cho mọi trang web, giúp liên kết các trang khác nhau thành một hệ thống thống nhất Nhiều nhà thiết kế web mong muốn tạo ra menu đẹp và chuyên nghiệp Phần mềm thiết kế web Dreamweaver cung cấp công cụ SothinkDHTMLMenu, hỗ trợ người dùng thiết kế menu chuyên nghiệp cho trang web của họ.
SothinkDHTMLMenu được cung cấp bản dùng thử tại trang chủ http://www.sothink.com/product/dhtmlmenu Sau khi cài đặt thành công phần mềmSothinkDHTMLMenu, trên thanh menu của Adobe
Dreamweaver sẽ có thêm menu Sothink và với menu này bạn sẽ tạo ra một menu bóng bẩy cho website của mình (hình 11)
Để khởi động DHTML Menu trong Adobe Dreamweaver, đầu tiên mở trang web cần tạo menu và đặt con trỏ ở vị trí mong muốn Sau đó, chọn menu Sothink và trong bảng hiện ra, chọn DHTML Menu (hoặc sử dụng tổ hợp phím Alt+Shift+D) Lưu ý rằng bạn cần lưu trang web trước khi bắt đầu quá trình tạo menu.
Trong SothinkDHTMLMenu, bạn có thể chọn "Blank Menu" để thiết kế menu mới hoặc "From Template" để sử dụng một kiểu menu có sẵn Trong cửa sổ Menu Tree bên trái, bạn có thể thực hiện các thao tác như cắt, dán các chủ đề và chuyên mục cho menu thông qua các nút lệnh trên thanh công cụ.
Quá trình thiết kế trong SothinkDHTMLMenu chủ yếu dựa vào các khung tính năng như Popup Menu và Menu Item Bên cạnh đó, bạn cũng có thể khám phá thêm các cửa sổ như Scrolling và Global Setting để nâng cao trải nghiệm thiết kế.
Hình 3.12 Các tác vụ thiết kế - Khung Menu Item: Cửa sổ này cho phép bạn định dạng cho từng chủ đề, từng mục trong menu (hình 13)
Trong cửa sổ này, bạn có thể điều chỉnh các mục như sau:
Hình 3.13 Thuộc tính của menu
+ Chọn nhãn General để nhập các mục cho menu:
+ Chọn Text để nhập tên chủ đề
+ Chọn mục HTML để nhập tên chủ đề được định dạng trong các cặp thẻ HTML
+ Để chèn ảnh vào menu, bạn chọn Image, xác định ảnh từ nút lệnh
+ Căn chỉnh vị trí hiển thị nội dung trên các mục menu với Align (left, right, center) hoặc Valign (top, middle, bottom)
+ Đặt liên kết cho các mục menu thông qua mục Link
In the Menu Item window, you can format various aspects of your menu, including font type, text color, background color, background image, border style, and menu style These options are available under the corresponding labels: Font, Icon, Background, Border, Condition, Style, and Advanced.
Hình 3.14 Cửa sổ Popup Menu
Sau khi hoàn thành việc tạo menu, cửa sổ này cho phép bạn thiết kế màu sắc và kiểu hiển thị của menu Quan trọng hơn, bạn có thể thêm những hiệu ứng đặc biệt cho menu để tăng tính hấp dẫn.
Các bước thực hiện như sau:
Trong nhãn Genaral của Popup Menu, chọn Horizontally trong khung Display để hiển thị menunằm ngang hoặc chọn Vertically cho kiểu menu dọc
Để thiết lập nền cho menu, trước tiên chọn kiểu hiển thị, sau đó vào nhãn Background Tại mục Bg color, nhấn nút để chọn màu nền từ bảng màu, hoặc nếu muốn menu có nền trong suốt, hãy đánh dấu chọn vào mục Transparent Ngoài ra, bạn cũng có thể chọn ảnh nền cho menu bằng cách nhấn nút trong mục Bg image.
Để tùy chỉnh màu nền cho menu, bạn cần chọn nhãn Border và nhấn vào nút mũi tên để thiết lập màu cho từng cạnh của menu Bên cạnh đó, bạn cũng có thể điều chỉnh các hiệu ứng trong nhãn Effects từ cửa sổ.
Popup Menu, bạn sẽ đặt hiệu ứng cho menu (hình 16) Các hiệu ứng trong mục như sau:
Để tạo hiệu ứng đổ bóng cho menu, bạn cần chọn tùy chọn Simple hoặc Complex từ menu con của Drop shadow Tiếp theo, hãy điều chỉnh đường nét, độ dày và màu sắc của bóng để đạt được kết quả mong muốn.
+ Hiệu ứng hiển thị menu (Effects for showing): bấm chọn menu và chọn một hiệu ứng đặc biệt từ danh sách
+ Hiệu ứng đặc biệt để ẩn menu (Effect for Hiding): bấm chọn mũi tên, chọn hiệu ứng để ẩn menu
+ Effect Speed: Nhập giá trị vào ô text đặt tốc độ hiển thị cho hiệu ứng menu
Nếu menu chứa quá nhiều mục con, bạn có thể điều chỉnh để các mục này cuộn lại trong cửa sổ Scrolling, giúp tiết kiệm không gian hiển thị trên màn hình.
Hình 3.17 Tùy chỉnh kiểu dáng thanh cuộn
+ Tuỳ chỉnh kiểu dáng cho thanh cuộn theo chiều ngang (Horizontal Popup Menus) hoặc theo chiều dọc (Vertical Popup Menus)
+ Đánh dấu chọn Enable Scrolling
Sau khi hoàn tất thiết lập menu, bạn chọn lệnh "Save and close" để lưu công việc SothinkDHTMLMenu sẽ tự động tích hợp menu vào trang web mà không cần chỉnh sửa mã Tuy nhiên, SothinkDHTMLMenu gặp vấn đề với font tiếng Việt Unicode khi chạy menu trên trình duyệt, và số lượng tập tin do chương trình tạo ra khá nhiều, gây khó khăn cho việc tổ chức thiết kế Dù vậy, hai vấn đề này có thể được khắc phục dễ dàng thông qua việc chỉnh sửa mã.
Để khắc phục lỗi font trong Dreamweaver, bạn cần tìm và chỉnh sửa các từ bị lỗi trong đoạn code do chương trình tạo ra Ngoài ra, cần xử lý các tập tin được tạo ra bởi Sothink DHTML Menu để đảm bảo tính tương thích và hiển thị chính xác.
Để khắc phục tình trạng "mất trật tự" trong thư mục chứa trang web, bạn cần tạo một thư mục mới, chẳng hạn như thư mục Menu Sau đó, hãy sao chép tất cả các tập tin mà SothinkDHTMLMenu đã tạo ra vào thư mục này Cuối cùng, mở cửa sổ soạn thảo code và thêm phần "menu\" vào trước các đường dẫn cũ, tương ứng với tên các tập tin do SothinkDHTMLMenu tạo ra, để hoàn tất quá trình.
Tạo liên kết cho trang web
Một trang web hiệu quả không chỉ cung cấp thông tin nội bộ mà còn cần liên kết với nhiều trang web khác để làm phong phú thêm nội dung Bạn có thể tạo liên kết từ hình ảnh hoặc văn bản, tùy theo sở thích của người thiết kế Dưới đây là các bước thực hiện để tạo liên kết hiệu quả.
- Chèn hình hoặc nhập dòng chữ cần tạo liên kết
- Bấm chọn hình hoặc chọn dòng chữ cần tạo liên kết
Nhập vào ô Link ở khung Properties địa chỉ trang web cần liên kết tới
Hình 3.18 Thuộc tính địa chỉ liên kết
Lưu ý rằng khi nhập địa chỉ trang web liên kết, bạn cần ghi đầy đủ tên miền của trang web đó Chẳng hạn, để truy cập vào trang tìm kiếm Google, bạn phải nhập chính xác địa chỉ http://www.google.com.vn.
Hình 3.19 Tạo template cho Website
Trong thiết kế web, việc tạo ra một trang chủ và hệ thống các trang con có cấu trúc nhất quán là rất quan trọng Để đạt được điều này, bạn cần xây dựng một trang template Khi có template, việc thay đổi nội dung cho toàn bộ website trở nên dễ dàng, chỉ cần cập nhật nội dung ở trang template là bạn có thể đồng bộ hóa mọi thay đổi cho toàn bộ website một cách nhanh chóng và hiệu quả.
Tập tin template tạo ra sẽ có phần đuôi là dwt và nó sẽ mặc định đặt trong Templates folder Để tạo một template, bạn tiến hành như sau:
Khởi động Dreamweaver Vào menu File, chọn New Ở Page Type > chọn HTML template sau đó bấm vào nút Create để mở một trang mới lên (hình 19)
Để khai báo thông tin cho website mới, bạn vào mục Site, chọn Manage Sites, và sau đó nhấn New trong cửa sổ tiếp theo Bạn cần cung cấp ít nhất một số thông tin cơ bản, bao gồm tên website (Site name).
- Local root folder: thư mục gốc trên máy
- Default images folder: thư mục mặc định dành cho hình ảnh
Hình 3.20 Chọn thư mục lưu trữ Website
Sau khi hoàn tất khai báo, hãy chọn "Save" và bắt đầu tạo template Để xác định những thành phần không thay đổi trong website, bạn cần tạo trang web với các thành phần đó, sau đó chọn "File > Save as Template".
Bạn có thể tạo một template từ một trang web đã thiết kế trước đó bằng cách mở trang web đó trong Dreamweaver và thực hiện các khai báo cần thiết.
Site mới cho trang web đó và chọn File > Save as template Sau đó đặt tên cho template vừa tạo
Tiếp theo, bạn xác định các vùng có thể thay đổi được như sau:
- Chọn vùng có thể thay đổi được bằng cách bấm chuột vào bảng của vùng đó (vùng được chọn sẽ có viền màu đen đậm bao quanh)
- Chọn Insert > Tenplate > Editable Region (hình 21)
Hình 3.21 Chọn vùng thay đổi trên template
- Đặt tên cho vùng vừa chọn và bấm OK trong cửa sổ tiếp theo
Cuối cùng, chọn File > Save để lưu lại trang template vừa tạo.
Tạo trang web mới từ template
Bây giờ, bạn có thể tạo ra trang web đầu tiên từ template vừa tạo
Chọn File > New Trong cửa sổ hiện ra, chọn Page from Template và chọn File Templatevừa tạo sau đó bấm nút Create (hình 22)
Lưu ý rằng các tập tin được tạo từ template chỉ có thể chỉnh sửa trong vùng Editable Region mà bạn đã chọn khi tạo template Các vùng khác sẽ không được phép thay đổi.
Hình 3.22 Tạo trang web mới từ template
Sau khi hoàn thành việc tạo template với đầy đủ nội dung và liên kết, bạn cần lưu lại các thay đổi Dreamweaver sẽ hiển thị hộp thoại hỏi bạn có muốn cập nhật các thay đổi này trên các trang sử dụng template hay không.
Đưa website lên hosting
Sau khi hoàn thành thiết kế trang web, bạn cần đưa trang web lên Internet để thử nghiệm và chia sẻ thông tin Đối với trang web được thiết kế bằng Dreamweaver, bạn có thể thực hiện các bước sau để đưa website lên mạng.
Sử dụng phần mềm FileZilla FTP Client để đưa trang web lên hosting là một bước quan trọng Đầu tiên, khởi động FileZilla FTP Client và nhập các thông tin cần thiết để kết nối với hosting Trong giao diện của chương trình, bạn sẽ thấy bốn khung chính giúp quản lý và truyền tải dữ liệu hiệu quả.
Hình 3.23 Cửa sổ chương trình FileZilla
- Trong khung số 1, tìm đến đường dẫn chứa bộ web (trong hình là thư mục Web server)
- Trong khung số 2, tìm và duyệt đến thư mục htdocs (đối với byethost) hoặc thư mục public_ html đối với 000webhost,…
- Trong khung thứ 3, lần lượt bấm chuột phải vào từng tập tin, thư mục
Để tải lên trang web, bạn chỉ cần nhấn Ctrl + A để chọn tất cả và sau đó chọn Upload Thời gian tải lên sẽ phụ thuộc vào dung lượng và số lượng tập tin cần tải.
Lưu ý rằng trên Byethost có nhiều thư mục htdocs, vì vậy bạn cần truy cập vào thư mục htdocs nằm trong thư mục tên miền của mình, và đảm bảo rằng tập tin index.html được đặt trong thư mục htdocs.
Sau khi chương trình tải xong, bạn mở trình duyệt lên và nhập vào địa chỉ web đã đăng ký, sẽ thấy được thành quả lao động của mình
CÂU HỎI VÀ BÀI TẬP CHƯƠNG 3
1.Sử dụng Dreamwaver Thiết kế trang web sau:
2.Thiết kế Website giới thiệu cửa hàng sách với cấu trúc trang chủ như sau:
Phần banner: hình ảnh, giới thiệu cửa hàng sách, hình ảnh quảng cáo (nếu có)
Ngày tháng năm Các liên kết nhanh: quay lại trang chủ/Sách bán chạy/Sách giảm giá
Phần trang chính, hiển thị các nội dung khi nhấn chuột vào các liên kết
Tạo form tìm kiếm thông tin
- các loại sách bán chạy.(tối đa 5 đầu sách)
- các loại sách giảm giá.(tối đa 5
(giới thiệu các chủ đề của sách) Kinh tế
Thông tin về bản quyền Website
1) Sử dụng công cụ thiết kế phần mềm Dreamwaver 8.0
2)Sử dụng tư liệu và ảnh qua CD
3) Tạo Website lưu trữ tại ổ đĩa: D:/Tên sinh viên 4) Tạo trang chủ
- theo cấu trúc yêu cầu, hình thức dễ nhìn, cóliên kết đầy đủ đến các trang liên kết ở câu 5
5) Tạo các trang liên kết (giống phần banner, menu chính và phần phụ, chỉ thay đổi nội dung ở phần trang chính):
-Trang giới thiệu sách Kinh tế khi nhấn chuột vào chủ đề Kinh tế ở menu chính
-Trang giới thiệu sách Pháp luật khi nhấn chuột vào chủ đề Pháp luật ở menu chính
-Trang giới thiệu sách Tin học khi nhấn chuột vào chủ đề Tin học ở menu chính
- Trang giới thiệu chi tiết thông tin về sách bán chạy khi nhấn chuột chọn 1 sách bán chạy tại phần phụ (thực hiện 1 trang về 1 loại sách)
-Trang giới thiệu chi tiết thông tin về sách giảm giá khi nhấn chuột chọn 1 sách giảm giá tại phần phụ (thực hiện 1 trang về 1 loại sách)
-Trang giới thiệu sách bán chạy trong cửa hàng (tối đa 10 sách) khi nhấn chuột vào liên kết nhanh dưới phần banner
- Trang giới thiệu sách giảm giá trong cửa hàng (tối đa 10 sách) khi nhấn chuột vào liên kết nhanh dưới phần banner.
LẬP TRÌNH WEB VỚI NGÔN NGỮ PHP
Tổng quan về PHP
PHP, viết tắt của "Hypertext Preprocessor", là ngôn ngữ lập trình kịch bản chạy ở phía server để tạo ra mã HTML cho client Qua nhiều phiên bản, PHP đã được tối ưu hóa cho ứng dụng web với cú pháp rõ ràng, tốc độ nhanh và dễ học, trở thành ngôn ngữ lập trình web phổ biến và được ưa chuộng.
PHP hoạt động trên môi trường Webserver và quản lý dữ liệu thông qua hệ quản trị cơ sở dữ liệu, thường được kết hợp với Apache, MySQL và hệ điều hành Linux, tạo thành bộ công nghệ LAMP.
Apache là phần mềm máy chủ web, có chức năng nhận yêu cầu từ trình duyệt của người dùng, sau đó chuyển giao yêu cầu đó cho PHP để xử lý và cuối cùng gửi kết quả trở lại trình duyệt.
MySQL cũng tương tự như các hệ quản trị cơ sở dữ liệu khác (Postgress,
Oracle, SQL server ) đóng vai trò là nơi lưu trữ và truy vấn dữ liệu.
Linux là hệ điều hành mã nguồn mở phổ biến, thường được sử dụng cho các webserver Các phiên bản được ưa chuộng nhất bao gồm RedHat Enterprise Linux và Ubuntu.
Tải PHP Windows Binary tại: www.php.net/downloads.php
Sau đó unzip theo đường dẫn C:\PHP
Cài đặt webserver
2.1 Cấu hình IIS Để cài đặt IIS, chon Server Manager> Roles> Add Roles
Chọn thêm các mục như hình để hỗ trợ chạy ASP > Next
Chọn Install và chờ để hệ thống cài đặt IIS
2.2 Cài đặt Apache Web Servr
Bước 1: Download Apache từ source
Download Apache source từ Apache Lounge phiên bản 64 bit hoặc 32 bit Phiên bản mới nhất của Apache hiện tại là 2.4.33, file cần download là httpd-2.4.33-win64-
The Apache VC15 version is built on the Visual C++ Redistributable for Visual Studio 2017, requiring installation on Windows using VC_redist.x64.exe for 64-bit or VC_redist.x86.exe for 32-bit systems For users wanting to install Apache on Windows XP, it is recommended to use the Apache VC10 version, as VC15 does not support Windows XP.
Sau khi tải xuống Apache từ nguồn, hãy giải nén thư mục Apache24 vào ổ C Phiên bản này được cấu hình mặc định cho ổ C, nếu bạn muốn cài đặt trên ổ D, USB hoặc vị trí khác, cần thay đổi cấu hình cho DocumentRoot Tuy nhiên, do cấu hình có phần phức tạp, tôi khuyên bạn nên giữ lại ở ổ C và giữ tên thư mục là Apache24 theo mặc định.
Như vậy là quá trình cài đặt Apache đã hoàn thành Để khởi động Apache, vào thư mục C:\Apache24\bin và chạy file httpd.exe
Bây giờ bạn có thể vào http://localhost để kiểm tra Nếu như bạn nhìn thấy dòng “It works!” là bạn đã cài đặt và chạy Apache thành công
Truy cập vào PHP Manager và chọn Register New PHP version
Chọn tới file php-cgi.exe trong thư mục php đã giải nén
2.4 In kết quả trên trang PHP
Tiến hành Kiểm tra phiên bản PHP đã được hoạt động chưa bằng cách vào PHP
Chọn Site là Url để test, ví dụ:
Như vậy PHP đã được cài đặt hoàn tất
Nền tảng của PHP
- Một đoạn mã php có thể đặt ở bất kỳ nơi nào trong page
- Đoạn mã php bắt đầu với
Thông thường trong nội dung một file php có các đoạn mã html, css, javarscript
- Ví dụ đưa ra một output lên trình duyệt
Nội dung đầu tiên của php
- Một câu lệnh php được kết thúc bằng dấu “;”
Các trường hợp đặc biệt khi sử dụng php
- Khi chúng ta sử dụng các keyword của php như: echo, class, function thì việc viết các ký tự không phân biệt hoa thường
- Khi chúng ta sử dụng các biến PHP thì chúng có sự phân biệt hoa thường
Ví dụ: $count, $Count, $COUNT là các biến khác nhau trong php
3.2 Biến, hằng, kiểu dữ liệu
Biến là yếu tố quan trọng trong mọi ngôn ngữ lập trình, được sử dụng để lưu trữ các giá trị cần thiết cho quá trình xử lý Giá trị của biến có thể thay đổi linh hoạt trong suốt quá trình thực thi chương trình.
Biến đóng vai trò quan trọng trong mọi ngôn ngữ lập trình, cho phép lưu trữ các giá trị cần thiết cho quá trình xử lý Giá trị của biến có thể thay đổi linh hoạt trong suốt thời gian thực thi chương trình.
Trong php biến được bắt đầu bởi “$” và theo sau nó là tên biến
$myname = "Tên tôi là Lan";
?> Ở trên thì chúng ta có 3 biến với các giá trị tương ứng
Chú ý: Khi chúng ta ấn định cho giá trị cho biến là một chuổi ký tự thì đặt chúng trong
Luật của biến trong PHP
- Biến được bắt đầu bởi $ và theo sau là một chuổi tên biến
- Biến có thể được đặt là một ký tự như $x, $y và cũng có thể là một chuổi mô tả hàm ý của biến như $myname;
- Tên biến yêu cầu bắt đầu bởi một ký tự hoặc dấu gạch dưới
- Tên biến không được bắt đầu với một số
- Tên biến chỉ bao gồm các ký tự trong hệ alpha, số và gạch dưới [A-z, 0-9, và _]
- Biến có phân biệt qua các viết hoa, thường $myName, $myname là khác nhau
Xuất dữ liệu biến trong PHP
- Câu lệnh echo là câu lệnh thường được sử dụng để xuất giá trị biến ra màn hình
- Cách xuất dữ liệu biến kết hợp với chuổi
$txt = "Cuong"; echo "I love $txt!";
$txt = "Cuong"; echo "I love".$txt."!";
Tầm vực của biến trong PHP
Trong php thì biến có thể khai báo ở bất kỳnơi nào trong phần viết mã php
Tầm vực của biến là khu vực biến hoạt động
Tầm vực local và global của biến trong PHP
Khi một biến được khai báo bên ngoài và bên trong hàm, biến đó sẽ có tầm vực global, cho phép truy xuất từ bên ngoài hàm.
- Một biến được khai báo chỉ bên trong hàm thì phạm vi sử dụng của nó chỉ bên trong hàm
Tầm vực global của biến trong PHP
- Từ khóa global được khai báo cho một biến trong hàm hoặc một phương phức để chỉ rằng biến có tầm vực toàn cục
Tầm vực local của biến trong PHP
- Với biến cục bộ thì nó chỉ ảnh hưởng trong phạm vi của hàm
Tầm vực stactic của biến trong PHP
Khi một hàm hoàn thành việc thực thi, các biến bên trong thường được giải phóng Tuy nhiên, trong một số trường hợp, nếu chúng ta muốn giữ lại giá trị của các biến này, chúng ta có thể sử dụng khai báo biến dạng static trong hàm.
_ Danh sách có sắp xếp (hay có đánh số)
- , mỗi mục trong da nh sách được sắp xếp thứ tự
_ Danh sách thực đơn
_ Danh sách phân cấp
Nhiều trình duyệt cho phép sử dụng danh sách phân cấp và danh sách thực đơn tương tự như danh sách không đánh số Đối với thẻ OL, cú pháp được sử dụng như sau: