Tham khảo tài liệu ''bài giảng môn thi thiết kế web_1'', công nghệ thông tin, kỹ thuật lập trình phục vụ nhu cầu học tập, nghiên cứu và làm việc hiệu quả
Bài Giảng Môn Thiết Kế Web Phần 1: Ngôn Ngữ Thiết Kế Web HTML Chương 01 TỔNG QUAN VỀ THIẾT KẾ WEBSITE Các khái niệm Soạn thảo trang web Các thẻ tập tin HTML Làm tươi xem mã nguồn I CÁC KHÁI NIỆM Khái niệm WebTĩnh, Web động WEB TĨNH: Được xây dựng ngôn ngữ HTML, DHTML dùng để thiết kế trang web có nội dung cần thay đổi cập nhật Thích hợp với cá nhân, tổ chức, doanh nghiệp vừa nhỏ làm quen với môi trường Internet o Ưu điểm: - Thiết kế đồ hoạ đẹp: Trình bày ấn tượng phần mỹ thuật hồn tồn tự trình bày ý tưởng tồn diện tích trang - Tốc độ truy cập nhanh khơng thời gian việc truy vấn sở liệu trang web động - Chi phí đầu tư thấp: Chi phí xây dựng website tĩnh thấp khơng phải xây dựng sở liệu, lập trình chi phí cho việc th Hosting o Nhược điểm bản: - Khó khăn việc thay đổi cập nhật thông tin: Muốn thay đổi cập nhật nội dung thông tin phải biết ngôn ngữ html, sử dụng chương trình thiết kế đồ hoạ, thiết kế web, cập nhật file lên server - Thơng tin khơng có tính linh hoạt: Do nội dung thiết kế cố định nên nhu cầu thơng tin tăng cao khơng đáp ứng - Khó tích hợp, nâng cấp, mở rộng: Khi muốn mở rộng, nâng cấp website tĩnh phải làm lại website Web động: Web động thuật ngữ dùng để website có sở liệu hỗ trợ phần mềm phát triển web o Với web động, thông tin hiển thị gọi từ sở liệu người dùng truy vấn tới trang web Chẳng hạn ứng dụng thương mại điện tử (một cửa hàng trực tuyến) trưng bày catalogue sản phẩm website hay theo dõi kho hàng, mặt hàng giao, trang có liên quan đến sản phẩm phản ánh thay đổi o Web động thường phát triển ngơn ngữ lập trình tiên tiến PHP, ASP, ASP.NET, Java, CGI, Perl, sử dụng sở liệu quan hệ mạnh Access, My SQL, MS SQL, Oracle… o Thông tin web động dễ dàng thường xun cập nhật thông qua việc sử dụng công cụ cập nhật phần mềm quản trị web o Vì website hỗ trợ sở liệu phương tiện trao đổi thông tin nhanh với người dùng Internet Điều dễ nhận thấy website thường xuyên cập nhật thu hút nhiều khách hàng tới thăm o Tất website Thương mại điện tử, mạng thông tin lớn, website tổ chức, doanh nghiệp hoạt động chuyên nghiệp Net sử dụng cơng nghệ web động Có thể nói web động website giới chuyên nghiệp hoạt động môi trường Internet This is trial version www.adultpdf.com Biên soạn: Dương Thành Phết Trang Bài Giảng Môn Thiết Kế Web Phần 1: Ngôn Ngữ Thiết Kế Web HTML Mạng Internet: Mạng máy tính tồn cầu – Hệ thống mạng mạng Tiền thân ban đầu mạng ARPANET(Tổ chức Advanced Research Projects Agency) Mỹ sáng lập 1969 Phục vụ trao đổi liệu trường đại học & Bộ quốc phòng Các dịch vụ Internet • WWW-Wold Wide Web: Dịch vụ trao đổi,tìm kiếm truy cập thơng tin mạng theo giao thức HTTP Được sử dụng thông qua trình duyệt Web • Email – Eletronic Mail-Thư điện tử: Dịch vụ trao đổi thông điệp cho SMTP(Simple Mail Tranfer Protocol) Pop3(Post office protocol 3) quản lý Mail server như:phetitc@yahoo.com,webmaster@clbtinhoc.net,phetit@hcm.fpt.vn • FTP – File Transfer Protocol – Truyền tải tập tin : Dịch vụ trao đổi tập tin máy Internet thường dùng để Download & Upload trang web từ người thiết máy chủ thông qua chương trình FTP FTP Explorer, FlashFXP • Chat –Tán gẫu: Dịch vụ cho phép người dùng trao đổi trực tuyến với qua mạng internet văn bản, âm thanh, hình ảnh Như : AOL, Yahoo messenger HTTP-Hyper Text Tranfer Protocol: Giao thức dùng để giao tiếp với trang Web.5 HTML-Hyper Text Makeup Language: Ngôn ngữ đánh dấu siêu văn dùng để thiết kế trang Web WebPage-Trang Web: Là tập tin văn soạn thảo theo ngơn ngữ HTML có phần mở rộng HTML HTM Web Site: Chuyên khu Web tập hợp trang web thuộc chủ thể Home Page: Trang đầu tiên-Trang chủ Website(Index.htm, Default.htm ) WebServer: Máy chủ web-Máy tính cấu hình mạnh, lưu trữ trang Web kết nối thường xuyên với mạng Internet cho phép máy khác truy cập thông tin 10 Tên miền-Domain Name-Web Server Name: Để phân biệt Web Server có địa IP ánh xạ tên (VD:www.vietnamnet.vn) Được xem tên giao dịch công ty, tổ chức Internet.Bao gồm mã quốc gia :Việt Nam: VN, Anh: UK, Mỹ: US, Nhật:.JP ) số lĩnh vực .Com : Thương mại Edu : Tổ chức giáo dục Net : Các mạng thông tin Info : Các mạng thông tin Int : Tổ chức quốc tế Org : Các tổ chức khác Gov : Tổ chức phủ Mil : Tổ chức quân Có thể kết hợp lĩnh vực với mã quốc gia www.tuoitre.com.vn Để sở hữu tên miền phải trả chi phí hàng năm thông qua công ty ủy quyền bán tên miền 11 Hosting: Khi hoàn tất website phải ghi lưu vào webserver truy cập thông thường server ISP (Nhà cung cấp dịch vụ Internet hay đơn vị chuyên dụng) Tùy theo dung lượng, băng thông số hỗ trợ mà chi phí khác 12 URL-Uniform Resource Location: Địa truy cập trang Web - tập tin Website http://Webservername/……/File.html Trang chủ mặc định không cần khai báo truy cập VD:http://www.thoitrangtre.com.vn Tức là: http://www.thoitrangtre.com.vn/Index.htm This is trial version www.adultpdf.com Biên soạn: Dương Thành Phết Trang Bài Giảng Môn Thiết Kế Web Phần 1: Ngôn Ngữ Thiết Kế Web HTML 13 Browser: Trình duyệt Web dùng để đọc hiển thị trang Web Phổ biến là: InternetExplorer, Netscape,FireFox II.SOẠN THẢO TRANG WEB Chương trình soạn thảo:Trang web tập tin văn không định dạng, chứa thẻ(Tag) Viết mã nguồn HTML chương trình soạn thảo văn khơng định dạng như: NotePad Khởi động : Start/Program/Accessories/NotePad Ghi chú: Nếu sử dụng chữ có dấu, phải • Thiết lập bảng mã Unicode cho trình gõ VietKey, Unikey, • Chọn Font Unicode trình soạn thảo (Format / Font Arial , Tahoma, ) Đặt tên, Lưu & Mở tập tin:Tập tin lưu trữ có phần mở rộng là: htm html a Lưu tập tin: Tại cửa sổ soạn thảo: File/SaveFilename: Tên.html (VD: VD01.html) Save as type: AllFilesEncoding: UTF-8 (Nếu nội dung có dấu) Save b Lưu lại với tên khác: Tại cửa sổ soạn thảo File/Save As c Mở tập tin soạn thảo: Tại cửa sổ soạn thảo: File/Open Open Chọn tập tin cần mở Xem trang Web sau soạn thảo:Cách 1: Mở thư mục lưu trữ tin htm Cách 2: Khởi động trình duyệt File/Open Double Click tập Chọn Browser để tìm tập tin cần mở Ok Kết thị This is trial version www.adultpdf.com Biên soạn: Dương Thành Phết Trang Bài Giảng Môn Thiết Kế Web Phần 1: Ngôn Ngữ Thiết Kế Web HTML III.CÁC THẺ CỦA TẬP TIN HTML Khái Niệm: Tập tin HTML văn chứa thẻ(Tag)- để tạo thành phần tài liệu Cấu Trúc Tổng Quát Của Thẻ:Thành phần chịu tác động Thẻ đóng Thẻ mở Tên thẻ đặt cặp ngoặc nhọn: < > Có khơng có thuộc tính Ví dụ 1: Chào Các Bạn Nội dung in đậm Ví dụ: Chúc bạn học tốt Nội dung chữ có cỡ 4Ghi chú: Cho phép thẻ lồng nhau, Cho viết thẻ dịng nhiều dịng Nên viết có cấu trúc Cấu Trúc Tổng Quát Của Tập Tin HTML: Nội dung tiêu đề Phần liệu trang web : Bắt đầu kết thúc tập tin HTML : Phần đầu trang web Nội dung tiêu đề : Hiển thị nội dung tiêu đề Nội dung trang : Hiển thị nội dung trang Ví Dụ Minh Họa Tạo tập tin với nội dung sau GIỚI THIỆU Chào mừng bạn đến với HTML This is trial version www.adultpdf.com Biên soạn: Dương Thành Phết Trang Bài Giảng Môn Thiết Kế Web Phần 1: Ngôn Ngữ Thiết Kế Web HTML Vấn Đề Ngắt Dòng Tạo tập tin với nội dung sau: > BAI THO CO HAI MO CÔ HÁI MƠ Thơ thẩn đường chiều khách thơ Say nhìn xa rặng núi xanh lơ Khí trời lặng lẽ trẻo Thấp thoang rừng mơ, cô hái mơ Khơng xuống dịng soạn thảo mà tự mà rớt dịng tùy theo kích thước cửa sổ trình duyệt • Để ngắt dịng tạo đoạn mới, tạo dòng trống: Đặt văn cặp thẻ• Để ngắt dịng khơng tạo đoạn mới: Chèn thẻ vị trí muốn ngắt dịng • Để giữ phần tử dòng: Đặt văn cặp thẻ Văn bị che khuất chiều rộng cửa sổ trình duyệt khơng đủ cuộn ngang VD: Tạo tập tin với nội dung sau > BÀI THƠ CÔ HÁI MƠ CÔ HÁI MƠ Thơ thẩn đường chiều khách thơ Say nhìn xa rặng núi xanh lơ Khí trời lặng lẽ trẻo Thấp thống rừng mơ, hái mơ This is trial version www.adultpdf.com Biên soạn: Dương Thành Phết Trang Bài Giảng Môn Thiết Kế Web Phần 1: Ngơn Ngữ Thiết Kế Web HTML Tạo Chú Thích Đặt câu ghi vào cặp thẻ Nội dung câu thích khơng hiển thị trình duyệt IV LÀM TƯƠI TRANG WEB – XEM MÃ NGUỒN Làm Tươi Nội Dung Khi thị trang web trình duyệt xem điều chỉnh nội dung mã nguồn từ trình soạn thảo Khi lưu lại nội dung điều chỉnh, từ trình duyệt ta xem lại kết theo nội dung - Làm tươi: Click biểu tượng Refesh (Hoặc F5) Xem Mã Nguồn: Từ trình duyệt xem mã nguồn trang Web: Click Menu View/Source This is trial version www.adultpdf.com Biên soạn: Dương Thành Phết Trang Bài Giảng Môn Thiết Kế Web Phần 1: Ngôn Ngữ Thiết Kế Web HTML Chương 02 CÁC THẺ ĐỊNH DẠNG VĂN BẢN o o o o o Định dạng kí tự, Định dạng đoạn Sử dụng màu Chèn đường kẽ ngang ký tự đặc biệt Hiệu ứng chuyển động chữ Văn danh sach I Định Dạng Ký Tư Định dạng Kiểu dáng - Style Nội dung văn : Nội dung văn in đậm Nội dung văn : Nội dung văn in nghiêng Nội dung văn : Nội dung văn gạch (chân) Nội dung văn : Nội dung văn gạch ngang Thay đổi Font, Size Nội dung văn Xác định Font cho Nội dung văn bản, Nếu máy truy cập khơng có FontName1 lấy FontName2 lấy Font mặc định trình duyệt Xác định cỡ chữ cho tài liệu giá trị n: Từ đến (8,10,12,14,16,24,36) mặc định Nội dung văn Xác định cỡ chữ cho nội dung văn VD: Tạo tập tin với nội dung sau BAI THO CO HAI MO
CÔ HÁI MƠ
Thơ thẩn đường chiều khách thơ Say nhìn xa rặng núi xanh lơ Khí trời lặng lẽ trẻo Thấp thống rừng mơ, hái mơ This is trial version www.adultpdf.com Biên soạn: Dương Thành Phết Trang Bài Giảng Môn Thiết Kế Web Phần 1: Ngôn Ngữ Thiết Kế Web HTML Tao số Trên/Dưới Văn : Tạo số cho văn Văn : Tạo số cho văn VD: VAN BAN CHI SO TREN DUOI Văn có số trên:AX2+BX+C=0 Văn có số : H2O II ĐỊNH DẠNG ĐOẠN Thiết lập lề trang Thiết lập lề trái trang (LeftMargin), lề trang (TopMargin)Theo giá trị n1,n2 đơn vị tính Pixcel Canh lề đoạn vănĐoạn văn
Hướng: Left Canh trái đoạn văn Right Canh phải đoạn văn Center Canh đoạn văn Justify Canh văn Các thành phần cần canh giữa Tạo văn đề mục Đề mục dòng văn định dạng khác dòng văn nội dung dùng để tạo đề mục phần, chương Mỗi thẻ có chức phân đoạn, cấp lớn nhất, cấp nhỏ nhất, kết hợp thuộc tính canh lề Nội dung văn đề mục cấp 1 Nội dung văn đề mục cấp 2 This is trial version www.adultpdf.com Biên soạn: Dương Thành Phết Trang Bài Giảng Môn Thiết Kế Web Phần 1: Ngôn Ngữ Thiết Kế Web HTML Nội dung văn đề mục cấp 6 VD: Đề mục cấp, canh lề giữa Tạo văn thích, trích dẫn Văn thích Văn thích ngiêng, dịng so với văn trước III SỬ DỤNG MÀU Các mã màu Để xác lập màu dùng Tên màu hay Trị thập lục phân tương ứng Tên màu Trị Tên màu Trị Black Đen #000000 Olive Nâu vàng #808000 Red Đỏ #FF0000 Teal Nâu sẫm #008080 Blue Xanh #0000FF Maroon Nâu #800000 Navy X.Đậm #000800 Gray Xám #808080 Fuchsia Hồng #FF00FF Lime V.Chanh #FFFF00 White Trắng #FFFFFF Green Lá #008000 Rurple Đ.Tía #800080 Silver Bạc #C0C0C0 Yellow Vàng #FFFF00 Aqua Ngọc #00FFFF Xác lập màu chung cho trang Web Dùng thuộc tính thẻ BODY để xác lập: màu nền, màu văn bản, màu văn liên kết Nội dung trang Web BgColor: Màu trang Text: Màu văn Link: Màu liên kết chưa truy cập VLink: Màu liên kết truy cập Alink: Màu liên kết trỏ Mouse Xác lập màu cho văn Dùng thuộc tính Color thẻ FONT để xác lập màu: cho nội dung văn định Nội dung văn VD: Công nghệ thơng tin This is trial version www.adultpdf.com Biên soạn: Dương Thành Phết Trang Bài Giảng Môn Thiết Kế Web Phần 1: Ngôn Ngữ Thiết Kế Web HTML IV ĐƯỜNG KẼ NGANG VÀ KÝ TỰ ĐẶC BIỆT Đường Kẽ Ngang : Tạo đường kẽ ngang dài chiều rộng cửa sổ Size: Độ dày Width: Độ rộng (Pixcel %) Align: canh lề Left(Trái), Center(Giữa),Right(Phải) Color: Màu NoShade: Khơng có bóng VD: