(NB) Giáo trình Thiết kế web với mục tiêu giúp các bạn có thể định hướng được kết cách thiết kế Web site; có khả năng sử dụng các thẻ HTML; biết cách tổ chức thông tin trên trang chủ. Mời các bạn cùng tham khảo nội dung phần 1 giáo trình.
BỘ LAO ĐỘNG -THƯƠNG BINH VÀ XÃ HỘI TRƯỜNG CAO ĐẲNG NGHỀ KỸ THUẬT CÔNG NGHỆ - - GIÁO TRÌNH THIẾT KẾ WEB NGHỀ: QUẢN TRỊ MẠNG MÁY TÍNH Hà Nội, năm 2019 BỘ LAO ĐỘNG -THƯƠNG BINH VÀ XÃ HỘI TRƯỜNG CAO ĐẲNG NGHỀ KỸ THUẬT CÔNG NGHỆ - - GIÁO TRÌNH MƠ ĐUN: THIẾT KẾ WEB NGHỀ: QUẢN TRỊ MẠNG MÁY TÍNH TRÌNH ĐỘ: CAO ĐẲNG (Ban hành kèm theo Quyết định số:248b/QĐ-CĐNKTCN ngày 17 tháng 09 năm 2019 Hiệu trưởng Trường Cao đẳng nghề Kỹ thuật Công nghệ) Hà Nội, năm 2019 TUYÊN BỐ BẢN QUYỀN Tài liệu thuộc loại sách giáo trình nên nguồn thơng tin phép dùng ngun trích dùng cho mục đích đào tạo tham khảo Mọi mục đích khác mang tính lệch lạc sử dụng với mục đích kinh doanh thiếu lành mạnh bị nghiêm cấm MÃ TÀI LIỆU: MĐQTM23 LỜI GIỚI THIỆU Chương trình khung quốc gia nghề Quản trị mạng máy tính xây dựng sở phân tích nghề, phần kỹ thuật nghề kết cấu theo môđun, môn học Để tạo điều kiện thuận lợi cho sở dạy nghề trình thực hiện, việc biên soạn giáo trình kỹ thuật nghề theo môđun, môn học đào tạo nghề cấp thiết Mô đun MĐQTM23: Thiết kế web mô đun đào tạo nghề biên soạn theo hình thức tích hợp lý thuyết thực hành Trong q trình thực hiện, nhóm biên soạn tham khảo nhiều tài liệu thiết kế lập trình web nước, kết hợp với kinh nghiệm thực tế sản xuất Mặc dầu có nhiều cố gắng, không tránh khỏi khiếm khuyết, mong nhận đóng góp ý kiến độc giả để giáo trình hồn thiện Xin chân thành cảm ơn! Hà Nội, ngày 25 tháng 02 năm 2019 BAN CHỦ NHIỆM BIÊN SOẠN GIÁO TRÌNH NGHỀ: QUẢN TRỊ MẠNG MÁY TÍNH TRƯỜNG CAO ĐẲNG NGHỀ KỸ THUẬT CÔNG NGHỆ Tham gia biên soạn Chủ biên : Phùng Quốc Cảnh Tập thể Giảng viên khoa CNTT Mọi thơng tin đóng góp chia sẻ xin gửi hòm thư: canhdhtn86@gmail.com, liên hệ số điện thoại: 0359300585 MỤC LỤC BÀI 1: TỔNG QUAN VỀ WWW – NGÔN NGỮ HTML Lịch sử World Wide Web (www) 1.1 Giới thiệu World Wide Web (www) 1.2 Giới thiệu URL: 1.3 Giới thiệu HTTP Nhập môn ngôn ngữ HTML (Hyper Text Markup Language) Trang văn trang Ngôn ngữ đặc tả Script 10 4.1 Khai báo biến: 10 4.2 Toán tử: 10 4.3 Các cấu trúc điều kiện 11 4.4 Các cấu trúc lặp 11 4.5 Khai báo hàm thủ tục: 12 4.6 Một số hàm thông dụng ASP: 12 CSS (Cascading Style Sheets) 13 5.1 Cú pháp CSS 13 5.2 Các thuộc tính CSS 13 5.3 Sử dụng CSS trang HTML 14 BÀI 2: THIẾT KẾ WEB TĨNH 16 Tổng quan: 16 Trang văn trang 16 2.1 Tạo tiêu đề 16 2.2 Một số thẻ trình bày định dạng văn bản: 17 2.3 Các thuộc tính thẻ trình bày trang 17 Bảng biểu (Table) trang khung (Frame) 18 3.1 Bảng biểu 18 3.2 Khung – Frames 19 Multimedia trang Web 22 4.1 Đặt màu 22 4.2 Màu chữ văn 23 4.3 Màu đầu mối liên kết - Thuộc tính LINK, VLINK ALINK 23 4.4 Thuộc tính mã màu 23 4.5 Nạp hình ảnh làm cho trang văn 23 4.6 Chèn ảnh - thẻ 23 Các yếu tố động trang 25 5.1 Đưa âm vào tài liệu 25 5.2 Đưa Video vào tài liệu 25 Khung nhập (Form) 26 6.1 Form 26 6.2 Các thành phần FORM 27 Liên kết – Link 30 7.1 Thẻ neo mối liên kết 31 7.2 Thuộc tính HREF 31 7.3 Liên kết – External Links 31 7.4 Địa tuyệt đối 31 7.5 Địa tương đối 31 7.6 Liên kết nội – Internal Link 31 7.7 Siêu liên kết – Hyperlink 32 BÀI 3: XÂY DỰNG WEB ĐỘNG 35 1.Tổng quan ASP.Net ADO.Net: 35 1.1 Tổng quan ngôn ngữ ASP.Net: 35 1.2 Mơ hình ADO.Net 43 Các đối tượng ASP.Net: 44 2.1 ASP.Net Web Server Controls: 44 2.2 Các đối tượng ASP.NET 50 2.3 Biến cấu trúc điều khiển: 56 2.4 Thủ tục hàm 62 Các đối tượng ADO.Net: 63 3.1 Các đối tượng ADO.Net 63 3.2 Các lớp SqlClient mơ hình ADO.Net 64 3.3 Các điều khiển liệu ASP.Net 77 TÀI LIỆU THAM KHẢO 111 GIÁO TRÌNH MƠ ĐUN Tên mơ đun: Thiết kế web Mã số mơ đun: MĐQTM23 Vị trí, tính chất, ý nghĩa vai trị mơ đun: - Vị trí: Mơ đun Thiết kế web bố trí sau học xong mơn học Hệ quản trị Cơ sở liệu, Cơ sở liệu, Lập trình trực quan - Tính chất: mơ đun đào tạo nghề - Ý nghĩa vai trò: dùng đào tạo kỹ thiết kế lập trình web, cho trình độ cao đẳng nghề quản trị mạng máy tính Mục tiêu mơ đun: - Về kiến thức: + Định hướng kết cách thiết kế Web site + Có khả sử dụng thẻ HTML + Biết cách tổ chức thông tin trang chủ - Về kỹ năng: + Thiết kế giao diện + Lập trình website + Sử dụng thành thạo công cụ thiết kế Web + Xây dựng ứng dụng web động + Cài đặt, cấu hình dịch vụ IIS - Về lực tự chủ trách nhiệm: + Có khả kết hợp với sở liệu để tạo trang Web động + Bố trí học tập làm việc khoa học Nội dung mô đun: Thời gian Số Tên mô đun Tổng Lý Thực Kiểm TT số thuyết hành tra* Tổng quan www – ngôn ngữ 2 HTML Thiết kế web tĩnh 23 16 Thiết kế web động 35 27 Cộng 60 15 43 BÀI 1: TỔNG QUAN VỀ WWW – NGÔN NGỮ HTML Mã bài: MĐQTM23-01 Giới thiệu: Bài học nhằm giới thiệu sơ lược lịch sử World Wide Web (www), URL, giao thức HTTP ngôn ngữ phổ biến dùng World Wide Web HTML (Hyper Text Markup Language) Mục tiêu: - Trình bày lịch sử WWW; - Trình bày cấu trúc trang HTML thẻ HTML bản, cách bố trí, xử lý ứng dụng file CSS; - Thực thiết kế giao diện; - Biết cách tổ chức thông tin trang chủ bố trí văn trang - Ghi nhớ lệnh điều khiển ngôn ngữ đặc tả Script - Thực thao tác an tồn với máy tính Nội dung chính: Lịch sử World Wide Web (www) Mục tiêu: Trình bày lịch sử WWW 1.1 Giới thiệu World Wide Web (www) Ngày người ta dùng máy tính cơng cụ hữu ích để truy cập Internet, chủ yếu tìm kiếm thơng tin Thơng tin văn bản, hình ảnh, âm hay thơng tin đa phương tiện… Nhu cầu tìm kiếm thơng tin ngày nhiều đưa vấn đề: làm dễ dàng sử dụng máy tính truy cập Internet cơng cụ phục vụ đắc lực cho việc tra cứu, tìm kiếm thơng tin mạng thơng tin rộng lớn tồn cục Vấn đề trở nên dễ dàng ý tưởng siêu văn (Hypertext) – văn thông minh nhà tin học Ted Nelson đề xuất vào năm 1965 Đến 1989, dự án thức thực kỹ sư trẻ người Anh tên Tim Berners – Lee World Wide Web (www) mạng tài nguyên thông tin WWW dựa chế để tài nguyên trở nên sẵn dùng cho người xem rộng rãi tốt, là: - Cơ chế đặt tên dạng việc định dạng tài nguyên WWW (như URL) - Các giao thức, để truy cập tới tài nguyên qua WWW (như HTTP) - Siêu văn bản, để dễ dàng chuyển đổi tài nguyên (như HTML) 1.2 Giới thiệu URL: Mọi tài nguyên sẵn dùng WWW – tài liệu HTML, ảnh, video clip, chương trình v v - có địa mà mã hóa URL URL xem trỏ dùng với mục đích đơn giản xác định vị trí tài ngun mơi trường Internet Thơng qua URL mà Web Browser tham chiếu đến Web Server dịch vụ khác Internet ngược lại Các URL thường gồm phần: - Việc đặt tên chế dùng để truy cập tài nguyên - Tên máy tính lưu trữ (tổ chức) tài nguyên - Tên thân tài nguyên, đường dẫn Ví dụ: URL xác định trang W3C Technical Reports http://www.w3.org/TR URL đọc sau: Có tài liệu sẵn dùng theo giao thức HTTP, lưu máy www.w3.org, truy cập theo đường dẫn “/TR” Các chế khác ta thấy tài liệu HTML bao gồm “mailto” thư điện tử “ftp” FTP Ví dụ sau tới hộp thư (mailbox) người dùng: Mọi góp ý, xin gửi thư tới Joe Cool Các định danh đoạn (fragment identifiers): Một số URL tới việc định vị tài nguyên Kiểu URL kết thúc với “#” theo sau dấu hiệu kết nối (gọi định danh đoạn) Ví dụ, URL đánh dấu móc tên section_2: http://somesite.com/html/top.html#section_2 Các URL tương đối: không theo chế đặt tên Đường dẫn thường tham chiếu tới tài nguyên máy chứa tài liệu Các URL tương đối gồm thành phần đường dẫn tương đối (như “ ” nghĩa mức cấu trúc định nghĩa đường dẫn), bao gồm dấu hiệu đoạn Ví dụ giải pháp URL tương đối, giả sử có URL gốc: “http://www.acme.com/support/intro.html” URL tương đối đánh dấu cho liên kết siêu văn bản: Suppliers mở rộng thành URL đầy đủ “http://www.acme.com/support/suppliers.html” URL tương đối việc đánh dấu cho ảnh mở rộng thành URL đầy đủ “http://www.acme.com/icons/logo.gif” Các URL dùng để: - Liên kết tới tài liệu tài nguyên khác - Liên kết tới kiểu dạng bên kịch (script) 1.3 Giới thiệu HTTP Web Browser Web Server giao tiếp với thông qua giao thức gọi HTTP Sự kết nối HTTP qua giai đoạn: Hình 1.1: Sự kết nối HTTP - Tạo kết nối: Web Browser giao tiếp với Web Server nhờ địa URL - Internet số cổng (ngầm định 80) đặc tả URL - Thực yêu cầu: Web Browser gửi thông tin tới Web Server để yêu cầu phục vụ Việc gửi thông tin gửi phương thức GET dùng cho việc lấy đối tượng từ Server, hay POST dùng cho việc gửi liệu tới đối tượng Server - Phản hồi: Web Server gửi phản hồi Web Browser nhằm đáp ứng yêu cầu Web Browser - Kết thúc kết nối: Khi kết thúc trình trao đổi Web Browser Web Server kết nối chấm dứt Và mối liên hệ Client Server tồn trình trao đổi với nhau, điều có lợi điểm lớn giảm lưu thông mạng Nhập môn ngôn ngữ HTML (Hyper Text Markup Language) Mục tiêu: Trình bày cấu trúc trang HTML thẻ HTML Ngôn ngữ phổ biến dùng World Wide Web HTML (Hyper Text Markup Language) Nó dùng cho mục đích sau: - Phổ biến tài liệu trực tuyến với heading, văn bản, bảng, danh sách, ảnh, v.v… - Truy tìm thơng tin trực tuyến theo liên kết siêu văn việc kích vào nút - Thiết kế định dạng cho việc kiểm soát giao dịch (transaction) với thiết bị từ xa, người dùng việc tìm kiếm thông tin, tạo sản phẩm, đặt hàng,.v.v… - Bao gồm spread-sheets, video clips, sound clips, ứng dụng trực tiếp khác tài liệu họ HTML đánh dấu văn dạng thẻ (Tag) Cấu trúc thẻ HTML có dạng sau: - Thẻ đóng: văn chịu tác động Trong đó: + : bắt đầu hiệu ứng thẻ + : kết thúc hiệu ứng thẻ Ví dụ: văn in đậm cho kết trình duyệt là: văn in đậm - Thẻ mở: văn chịu tác động Ví dụ: Đoạn 1Đoạn cho kết là: Đoạn Đoạn - Về quy tắc thẻ lồng lẫn phải đảm bảo cú pháp thẻ Trang văn trang Mục tiêu: Biết cách tổ chức thông tin trang chủ bố trí văn trang; Thực thiết kế giao diện Trang web có hai đặc trưng bản: - Siêu văn (hypertext): bao gồm văn bản, hình ảnh tĩnh, hình ảnh động, âm thanh, màu sắc thành phần khác - Siêu liên kết (hyperlink): có nhiều mối liên kết đa dạng với trang thành phần khác website phạm vi toàn cầu Website tập hợp nhiều webpage có chủ đề địa định Trong website, người ta “đi lại” webpage đường hyperlink Các loại trang chủ yếu website: - Trang chủ, trang gốc (Master page): với website có trang chủ Là nơi thể rõ chủ đề site thơng qua cách bố trí danh mục tin, cách trang trí mỹ thuật bật…
This frameset document contains: Đoạn mã tạo khung, trí Hình 2.1 Kết chạy đoạn code ví dụ Khi trình duyệt khách khơng hỗ trợ khung khung không hiển thị mà thành phần NOFRAMES xử lí 3.2.2 Các thuộc tính FRAMESET Thẻ FRAMESET dùng để phân chia vùng hiển thị cửa sổ trình duyệt thành khung hình chữ nhật Mỗi khung hình chữ nhật gọi frame, định nghĩa thẻ FRAME rows = Danh sách độ cao khung Danh sách gồm nhiều phần tử, cách dấu phẩy Mỗi phần tử xác định độ cao (số dòng) khung Chia chiều đứng thành khung danh sách có nhiêu phần tử Chiều cao thể - Số pixel - Tỷ lệ phần trăm chiều cao hình - Tỷ lệ phần chiều cao lại Giá trị mặc định 100%, tức có khung theo chiều ngang cols = Danh sách độ rộng khung Giá trị mặc định 100%, tức có khung theo chiều dọc Thuộc tính rows thiết lập việc chia khung theo chiều ngang frameset Nếu khơng định nghĩa, cột khung chiếm tồn chiều cao vùng hiển thị 20 Thuộc tính cols thiết lập việc chia khung theo chiều đứng frameset Nếu khơng định nghĩa, dịng khung chiếm toàn chiều rộng vùng hiển thị Phối hợp hai thuộc tính tạo lưới khung Các ví dụ 1- Chia hình thành hai nửa: nửa nửa dưới: the rest of the definition 2- Chia hình thành cột Cột rộng 250 pixels Cột đầu chiếm 25% phần lại cột thứ chiếm 75% phần độ rộng lại the rest of the definition 3- Tạo lưới gồm x = khung the rest of the definition 4- Chia chiều đứng hình thành khung Khung thứ chiếm 30% chiều cao vùng hiển thị Khung thứ hai có chiều cao cố định 400 pixel Dấu có nghĩa hai khung thứ 3, thứ chia phần cịn lại Khung thứ có chiều cao "2*", gấp đơi khung thứ (vì "*" tương đương với 1*) Nếu chiều cao vùng hiển thị 1000 pixel độ cao khung 1,2,3,4 là: 300, 400, 100, 200 pixel ! the rest of the definition Chia khung lồng thành phần FRAME Việc chia khung lồng nhiều mức Ví dụ: chia chiều rộng thành khung đứng, sau khung lại chia thành phần contents of first frame contents of second frame, first row contents of second frame, second row contents of third frame Thẻ FRAME định nghĩa khung hình cụ thể (trong nhiều khung hình frameset) Các thuộc tính: name = Tên khung: Có thể dùng tên để làm đích mối siêu liên kết src = URI : Trỏ đến trang tài liệu hiển thị khung noresize : Khơng cho phép co giãn lại kích thước scrolling = auto|yes|no : Thiết lập cuộn auto: Xuất cuộn cần thiết Đây giá trị mặc định yes: Ln có cuộn 21 no: Ln khơng có cuộn frameborder = 1|0 Thiết lập đường biên 1: Có đường biên khung xét với khung kề Đây giá trị mặc định 0: Khơng có đường biên khung xét với khung kề marginwidth = số pixel Thiết lập độ rộng lề chiều rộng = khoảng trống phần hiển thị nội dung biên trái, biên phải Giá trị mặc định tuỳ theo duyệt marginheight = số pixel Thiết lập độ rộng lề chiều cao = khoảng trống phần hiển thị nội dung biên trên, biên Giá trị mặc định tuỳ theo trình duyệt Lưu ý: Nội dung frame khơng thuộc trang tài liệu định nghĩa frameset 3.2.3 Thiết lập Target, thẻ NOFRAME IFRAME Thiết lập Target Thuộc tính target để xác định tệp tài liệu HTML hiển thị khung target = tên khung đích Thiết lập tên khung mà tài liệu mở khung Thuộc tính dùng với thành phần tạo mối liên kết: (A, LINK), image map (AREA), FORM Thẻ NOFRAMES Thành phần NOFRAMES thiết lập nội dung cần hiển thị trình khách khơng hỗ trợ frame tắt chức hiển thị frame Thành phần NOFRAMES đặt phần cuối thành phần FRAMESET Nhúng frame - thẻ IFRAME Thành phần IFRAME cho phép người thiết kế chèn frame vào khối văn text hiển thị tài liệu HTML khác bên Thuộc tính SRC thiết lập tài liệu nguồn để hiển thị frame Các thuộc tính: name = tên để tham chiếu tài liệu width = Độ rộng inline frame height = Độ cao inline frame Ví dụ: [Your user agent does not support frames or is currently configured not to display frames However, you may visit the related document.] Inline frames mặc định không co giãn được, không cần phải nêu rõ noresize Multimedia trang Web Mục tiêu: Xây dựng ứng dụng Multimedia; 4.1 Đặt màu Dùng Thuộc tính BGCOLOR (Background Color) kèm thẻ để đặt màu cho văn Cú pháp sau: Nội dung tài liệu 22 "#rrggbb" red-green-blue, ba số hai chữ số hệ đếm 16, xác định mã màu 4.2 Màu chữ văn Thuộc tính TEXT Thuộc tính để thiết lập màu cho chữ văn bản, trừ đầu mối liên kết phải có màu khác Nội dung tài liệu ́ 4.3 Màu đầu mối liên kết - Thuộc tính LINK, VLINK ALINK Ba thuộc tính để đặt màu đầu mối siêu liên kết - LINK - đặt màu hiển thị trước nhấn chuột vào để đến thăm đích liên kết - VLINK - Đặt màu sau đích liên kết đến thăm (visited) - ALINK - đặt màu bạn kích hoạt, nhấn chuột vào (active) Các màu mặc định là: LINK=blue, VLINK=purple and ALINK=red Nội dung tài liệu 4.4 Thuộc tính mã màu Thuộc tính Mô tả BGCOLOR Đặt màu Đặt màu chữ, trừ mối nối TEXT Đặt màu ban đầu đầu mối liên kết chưa kích hoạt LINK Đặt màu đầu mối liên kết thăm đích VLINK Đặt màu đầu mối liên kết kích hoạt ALINK 4.5 Nạp hình ảnh làm cho trang văn Thuộc tính BACKGROUND Có thể dùng thuộc tính để tạo ảnh cho trang tài liệu siêu văn Thay cho xác định màu ta cần tên tệp hình ảnh kèm đường dẫn Nội dung tài liệu ́ Ví dụ: Thuộc tính bgproperties Nhiều trang web có trang trí gắn chặt cố định, cịn phần văn cuộn trôi bên ta di chuyển trượt Hiệu ứng tạo nhờ thiết lập thêm thuộc tính cho ảnh bgproperties="fixed" Ví dụ: 4.6 Chèn ảnh - thẻ Cú pháp chèn ảnh vào trang Web: IMG (Image), thuộc tính SRC (Source) đường dẫn đến nơi lấy tệp ảnh Giá trị thuộc tính SRC gán URL địa máy tính địa phương hay Internet Nó nơi lưu trữ tệp ảnh cần chèn vào Địa URL báo cho trình duyệt biết cần lấy tệp ảnh đâu 23 Nếu tệp ảnh nằm máy tính địa phương cần ghi rõ đường dẫn Nếu tệp ảnh lấy từ nơi khác Internet phải ghi đầy đủ địa URL Ví dụ: Các thuộc tính thẻ chèn hình ảnh Trong thẻ IMG cịn có số thuộc tính khác như: ALT, WIDTH, HEIGHT, ALIGN, VSPACE, HSPACE, BORDER - Thuộc tính ALT Thuộc tính ALT – ALTernative cho phép ta chèn đoạn chữ thay vào chỗ có hình lên xâu thích đưa trỏ chuột vào ảnh Nên ln sử dụng thuộc tính đưa hình ảnh vào trang Web nhiều người muốn có tốc độ cao, lướt nhanh qua thông tin tắt chức đọc ảnh trình duyệt biết ảnh mang nội dung Ví dụ: Hiện ảnh Ảnh (khơng lên) có khơng sử dụng thuộc tính ALT Nếu khơng sử dụng thuộc tính ALT chỗ có hình từ IMAGE biểu tượng ảnh bị khuyết - Thuộc tính WIDTH HEIGHT Thuộc tính WIDTH HEIGHT dùng để xác định chiều rộng chiều cao ảnh Giá trị tính theo phần trăm (%) pixel Chú ý: Nếu đặt chiều rộng chiều cao không chuẩn làm hình ảnh bị co giãn méo Để khắc phục nhược điểm này, ta nên xử lý ảnh để kích thước phù hợp Thuộc tính ALIGN Thuộc tính ALIGN cho phép chỉnh lại vị trí ảnh theo hai chiều ngang chiều dọc Theo chiều dọc: ALIGN=MIDDLE, ALIGN=TOP, ALIGN=BOTTOM ALIGN=TOP Theo chiều ngang: ALIGN=MIDDLE ALIGN=BOTTOM ALIGN=LEFT, ALIGN=RIGHT ALIGN=LEFT ALIGN=RIGHT Nếu khơng có thuộc tính mặc định ảnh đặt nơi đặt thẻ IMG dóng dịng chữ, theo cạnh khung nhìn Thuộc tính VSPACE HSPACE 24 Khi sử dụng thuộc tính ALIGN, ảnh chèn vào dịng văn với chữ dính sát liền Thuộc tính VSPACE HSPACE dùng để tạo khoảng trống nhỏ viền xung quanh ảnh (tính theo đơn vị pixel) VSPACE=n Thêm khoảng trống theo chiều dọc HSPACE=n Thêm khoảng trống theo chiều ngang Ví dụ: Các yếu tố động trang Mục tiêu: Xây dựng ứng dụng Multimedia web; 5.1 Đưa âm vào tài liệu 5.1.1 Liên kết đến tệp âm Để chèn đoạn âm thành vào tài liệu HTML ta theo quy tắc tạo mối liên kết thông thường Trong thẻ neo, địa điểm URL địa tệp âm Dưới ví dụ việc chèn âm thành vào tài liệu Khi nhấn chuột vào mối liên kết này, tệp âm phát lại Papa 5.1.2 Tạo âm Khơng chèn tệp âm vào tài liệu HTML mà cịn nhúng âm vào tài liệu, nghĩa âm phát trang tài liệu bắt đầu hiển thị Để nhúng âm vào tài liệu ta dùng thẻ Trong đó: Thuộc tính Mơ tả Đường dẫn đến tệp âm SRC=”URL” Chiều cao khung nhìn cho giao diện điều khiển HEIGHT=n phần mềm phát âm Chiều rộng khung nhìn cho giao diện điều WIDTH=n khiển phần mềm phát âm Âm tự động kích hoạt bắt đầu nạp AUTOSTART=true|false tài liệu thị (nên đặt true) Thiết lập việc lặp lại nhiều lần hay lần LOOP=true|false Đặt thẻ đâu khung nhìn giao diện điều khiển việc phát tệp âm xuất Ví dụ: 5.2 Đưa Video vào tài liệu 5.2.1 Chèn tệp Video Việc chèn tệp video vào tài liệu HTML giống chèn tệp âm Ví dụ đoạn mã sau chèn đoạn phim video vào tài liệu Nó tạo mối liên kết tới tệp video chọn ta nhấn chuột vào mối liên kết xem lại tệp video Film 25 Chú ý: Các tệp video có kích thước lớn nên cân nhắc tốc độ đường truyền người dùng 5.2.2 Nhúng tệp video Trong đó: Thuộc tính Mơ tả Đường dẫn đến tệp âm video SRC=”URL” Chiều cao khung nhìn cho giao diện điều khiển HEIGHT=n phần mềm phát âm Chiều rộng khung nhìn cho giao diện điều WIDTH=n khiển phần mềm phát âm Âm tự động kích hoạt bắt đầu nạp AUTOSTART=true|false tài liệu thị (nên đặt true) Thiết lập việc lặp lại nhiều lần hay lần LOOP=true|false Đặt thẻ đâu khung nhìn giao diện điều khiển việc phát tệp video xuất 5.2.3 Nhúng Flash vào tài liệu Sử dụng thẻ "> Ví dụ Ví dụ Khung nhập (Form) Mục tiêu: Trình bày cú pháp, chức Form thành phần Form 6.1 Form Chức Form Form cách để chuyển liệu từ người sử dụng đến cho Web Server xử lý Forms sử dụng rộng rãi WWW Các forms tiện lợi cho người dùng điền yêu cầu tìm kiếm, biểu mẫu điều tra, nhập liệu đầu vào cho ứng dụng Có nhiều thành phần khác (gọi điều khiển control) form Tuỳ theo yêu cầu giao tiếp với người sử dụng cần chọn thành phần thích hợp Khi tạo form bạn cần phải rõ cho máy chủ dịch vụ biết cách xử lý form Có nhiều loại chương trình ứng dụng khác máy chủ dịch vụ để làm việc này: chương trình CGI, ISAPI, script ASP, JSP, Java Bean, Servlet Thành phần Form Cặp thẻ để tạo Form 26 Mọi thành phần form trình bày phải nằm phạm vi giới hạn cặp thẻ Công thức tạo form là: Toàn thành phần khác bên form nằm Thuộc tính METHOD phương thức trao đổi liệu trình duyệt Web máy chủ Web Có phương thức POST, GET Đối với form phương thức thường POST Thuộc tính ACTION để thiết lập địa URL chương trình nhận xử lý liệu gửi từ form Ví dụ: Your name: Kết quả: Khi nhấn nút Submit ta có kết sau 6.2 Các thành phần FORM Như nêu trên, có nhiều loại thành phần khác Form Dưới trình bày điểm Hộp văn – TextBox Hộp văn nơi để gõ vào liệu kiểu xâu kí tự Hộp văn hiển thị sau: Mã lệnh khởi tạo: Trong id tên hộp văn Textboxid phải trang, khơng trùng TextMode: thuộc tính hộp văn dạng văn (text), mật (password), vùng văn (multiline) v v Ví dụ: A basic TextBox: Victorian Subject Associations on Internet 7.5 Địa tương đối Nếu liên kết đến tệp máy chủ bạn không cần dùng địa URL tuyệt đối mà dùng địa tương đối Thay cho URL tên tệp với đường đẫn đến thư mục nơi chứa tệp đích Ví dụ: Ví dụ 1 7.6 Liên kết nội – Internal Link Cũng tạo mối liên kết thân tài liệu siêu văn bản, từ phần đến phần khác Điều có ích tài liệu có kích thước lớn Ta tạo mục lục toàn nội dung phần đầu trang gồm tên chương liên kết tên chương đến phần nội dung tương ứng Để làm điều này, cần đánh dấu điểm đích -book mark- liên kết thẻ neo cịn thẻ neo điểm đầu mối liên kết thay URL tên nói Lưu ý có thêm dấu "#" 31 Ví dụ, để tạo liên kết nội từ nhảy đầu trang ta cần tạo book mark đầu trang với tên Top chẳng hạn Sau đó, tạo thẻ neo liên kết dòng sau: đầu trang 7.7 Siêu liên kết – Hyperlink Mã lệnh khởi tạo: Trong đó: HyperLink khai báo cho biết dùng siêu liên kết ImageUrl khai báo hình ảnh hiển thị cho đường liên kết NavigateUrl khai báo địa đích Target khung địa đích Ví dụ: Kết quả: 32 Bài tập thực hành học sinh, sinh viên: Câu 1: Thiết kế trang web theo mẫu sau đây: Câu 2: Thiết kế trang web theo mẫu sau Hướng dẫn thực hành: Câu 1: trọng tâm thực hành siêu liên kết, hình cách phối màu Vận dụng kiến thức học 1, để hoàn thành tập 33 Câu 2: này, ý đến cách tạo khung trang (có thể dùng bảng biểu kết hợp với CSS sử dụng Frame), cách chèn, nhúng hình ảnh, cách tạo siêu liên kết đơn giản tạo sử dụng nút nhấn liên kết (Link Button) 34 ...BỘ LAO ĐỘNG -THƯƠNG BINH VÀ XÃ HỘI TRƯỜNG CAO ĐẲNG NGHỀ KỸ THUẬT CÔNG NGHỆ -? ?? - GIÁO TRÌNH MƠ ĐUN: THIẾT KẾ WEB NGHỀ: QUẢN TRỊ MẠNG MÁY TÍNH TRÌNH ĐỘ: CAO ĐẲNG (Ban hành kèm... quan - Tính chất: mơ đun đào tạo nghề - Ý nghĩa vai trò: dùng đào tạo kỹ thiết kế lập trình web, cho trình độ cao đẳng nghề quản trị mạng máy tính Mục tiêu mơ đun: - Về kiến thức: + Định hướng kết... giả để giáo trình hồn thiện Xin chân thành cảm ơn! Hà Nội, ngày 25 tháng 02 năm 2 019 BAN CHỦ NHIỆM BIÊN SOẠN GIÁO TRÌNH NGHỀ: QUẢN TRỊ MẠNG MÁY TÍNH TRƯỜNG CAO ĐẲNG NGHỀ KỸ THUẬT CÔNG NGHỆ Tham