(NB) Giáo trình Thiết kế và quản trị web - CĐ Kỹ Thuật Cao Thắng gồm có 2 phần, phần 1 trình bày về: tổng quan về thiết kế web, tổng quan về HTML, sử dụng dreamweaver thiết kế website, cascading style sheets.
BỘ CÔNG THƯƠNG TRƯỜNG CAO ĐẲNG KỸ THUẬT CAO THẮNG KHOA ĐIỆN TỬ TIN HỌC BỘ MÔN ĐIỆN TỬ VIỄN THƠNG LƯU VĂN ĐẠI LẠI NGUYỄN DUY GIÁO TRÌNH THIẾT KẾ VÀ QUẢN TRỊ WEB (GIÁO TRÌNH DÙNG CHO HỆ CAO ĐẲNG NGÀNH CNKT ĐIỆN TỬ, TRUYỀN THÔNG CHUYÊN NGÀNH CNKT VIỄN THƠNG VÀ MẠNG MÁY TÍNH) THÀNH PHỐ HỒ CHÍ MINH, 09 - 2018 (LƯU HÀNH NỘI BỘ) MỤC LỤC CHƯƠNG TỔNG QUAN VỀ THIẾT KẾ WEB 1.1 Khái quát Internet 1.2 Phương thức kết nối 1.3 Địa IP tên miền .5 1.4 World Wide Web HTML 1.5 Các nhà cung cấp dịch vụ Internet 12 1.6 Giới thiệu số dịch vụ Internet thông dụng 13 1.7 Thiết kế web .17 CHƯƠNG TỔNG QUAN VỀ HTML 24 2.1 Các thẻ định cấu trúc tài liệu 24 2.2 Các thẻ định dạng khối 25 2.3 Các thẻ định dạng danh sách 26 2.4 Các thẻ định dạng ký tự 27 2.5 Các thẻ chèn âm thanh, hình ảnh 33 2.6 Các thẻ định dạng bảng biểu 36 2.7 FORM .37 CHƯƠNG SỬ DỤNG DREAMWEAVER THIẾT KẾ WEBSITE 43 3.1 Tạo thư mục chứa web 43 3.2 Tạo trang web 44 3.3 Lưu trang web 44 3.4 Định dạng trang web 44 3.5 Xem trang web trình duyệt 46 3.6 Tạo bảng trang web 46 3.7 Chèn hình vào trang web 49 3.8 Chèn ảnh động flash, video clip vào trang web .51 3.9 Tạo menu cho trang web 51 3.10 Tạo liên kết cho trang web 57 3.11 Cách tạo Template 58 3.12 Tạo trang web từ template 60 3.13 Đưa website lên hosting 61 CHƯƠNG CASCADING STYLE SHEETS 65 4.1 CSS gì? 65 4.2 Lợi ích việc sử dụng CSS .65 4.3 Sử dụng CSS 65 4.4 Cú pháp CSS 66 4.5 Thứ tự ưu tiên tính kế thừa .70 4.6 Các thuộc tính 79 CHƯƠNG JAVASCRIPT 126 5.1 JavaScript .126 5.2 Chèn mã Javascript 126 5.3 THẺ VÀ 127 5.4 Các lệnh xuất thông báo 127 5.5 Chèn chuỗi vào nội dung trang HTML .128 5.6 Biến-Kiểu liệu 129 5.7 Các Lệnh 131 5.8 Hàm (FUNCTIONS) .138 5.9 Sự kiện 142 5.10 Các đối tượng javascript 146 5.11 Các phần tử đối tượng form 164 5.12 Jquery 186 CHƯƠNG QUẢN TRỊ WEBSITE 222 6.1 Đăng kí website miễn phí internet .222 6.2 WordPress gì? 224 6.3 WordPress.com WordPress.org khác nào? 225 6.4 Cài Đặt WordPress 226 6.5 Các Chức Năng Chính Trong WordPress 233 CHƯƠNG TỔNG QUAN VỀ THIẾT KẾ WEB 1.1 Khái quát Internet 1.1.1 Internet gì? Internet liên mạng máy tính tồn cầu hình thành từ mạng nhỏ hơn, liên kết hàng triệu máy tính giới thơng qua sở hạ tầng viễn thông Internet mạng mạng máy tính Trong mạng này, máy tính thiết bị mạng giao tiếp với ngơn ngữ thống Đó giao thức TCP/IP (Transmision Control Protocol – Internet Protocol) 1.1.2 Lịch sử phát triển Internet hình thành từ năm 1969, từ dự án nghiên cứu Bộ quốc phòng Mỹ Lúc Internet liên kết địa điểm: Viện Nghiên cứu Standford, Trường Đại học tổng hợp California LosAngeles, UC – Santa Barbara Trường Đại học Tổng hợp Utah Mạng biết đến tên ARPANET ARPANET phát triển có nhiều máy nối vào – nhiều số từ quan Bộ quốc phòng Mỹ trường đại học nghiên cứu với đầu nối vào Bộ quốc phòng Đây giao điểm mạng Trong ARPANET cố gắng chiếm lĩnh mạng quốc gia nghiên cứu Trung tâm nghiên cứu Palo Alto công ty Xerox phát triển kỹ thuật sử dụng mạng cục Ethernet Theo thời gian, Ethernet trở thành chuẩn quan trọng để kết nối mạng cục Cũng thời gian này, DARPA (đặt lại tên từ ARPA) chuyển sang hợp TCP/IP (giao thức sử dụng việc truyền thông Internet) vào phiên hệ điều hành UNIX trường đại học tổng hợp California Berkeley Với hợp vậy, trạm làm việc độc lập sử dụng UNIX tạo nên mạnh thị trường, TCP/IP dễ dàng tích hợp vào phần mềm hệ điều hành TCP/IP Ethernet trở thành cách thức thông dụng để trạm làm việc nối đến trạm khác Trong thập kỷ 1980, máy tính cá nhân sử dụng rộng rãi công ty trường Đại học giới Mạng Ethernet kết nối máy tính cá nhân (PC) trở thành phổ biến Các nhà sản xuất phần mềm thương mại đưa chương trình cho phép máy PC máy UNIX giao tiếp ngôn ngữ mạng Vào thập kỷ 1980, giao thức TCP/IP dùng số kết nối khu vực – khu vực (liên khu vực) sử dụng cho mạng cục mạng liên khu vực Thuật ngữ "Internet" xuất lần đầu vào khoảng 1974 mạng gọi ARPANET Vào thời điểm này, ARPANET (hay Internet) qui mơ nhỏ Mốc lịch sử quan trọng Internet chọn vào thập kỷ 1980, Quỹ khoa học quốc gia Mỹ NSF (National Science Foundation) thành lập mạng liên kết trung tâm máy tính lớn với gọi NSFNET Mạng mạng Internet Điểm quan trọng NSFNET cho phép người sử dụng Trước NSFNET, nhà khoa học, chuyên gia máy tính nhân viên quan Chính phủ kết nối Internet Nhiều doanh nghiệp chuyển từ ARPANET sang NSFNET Chính vậy, sau gần 20 năm ARPANET trở nên khơng hiệu ngừng hoạt động vào khoảng năm 1990 Ngày nay, mạng Internet phát triển mạnh mẽ phương tiện truyền thông truyền thống khác phát truyền hình, cải tiến phát triển không ngừng Các công nghệ áp dụng Internet giúp cho Internet trở thành mạng liên kết vơ số kho thơng tin tồn cầu, có dịch vụ phong phú nội dung, hình thức Đó điều thúc đẩy nên bắt đầu với hành trình khám phá giới – giới Internet 1.1.3 Cấu trúc Internet Internet liên mạng kết nối mạng nhỏ với Như vậy, cấu trúc Internet gồm mạng máy tính kết nối với thông qua kết nối viễn thông Thiết bị dùng để kết nối mạng máy tính với cổng nối Internet (Internet Gateway) Bộ định tuyến (Router) Hình 1.1 Cấu trúc Internet Tuy nhiên, người dùng, Internet mạng Hình 1.2 Internet góc nhìn người sử dụng 1.2 Phương thức kết nối Để sử dụng dịch vụ Internet, người dùng phải kết nối máy tính với Internet Có nhiều phương thức kết nối với nhiều tốc độ khác nhau, tùy thuộc vào nhu cầu sử dụng điều kiện người sử dụng 1.2.1 Kết nối thông qua kênh thuê riêng Trong phương thức kết nối này, máy tính hay mạng máy tính người sử dụng kết nối trực tiếp tới nhà cung cấp dịch vụ Internet thông qua kênh thuê riêng nhà cung cấp dịch vụ Viễn thơng cấp Hình 1.3 Kết nối qua kênh thuê riêng Đặc điểm phương thức kết nối ln thường trực, nghĩa bạn truy nhập Internet lúc Tuy nhiên, giá thành sử dụng kết nối cao bạn phải trả tiền thuê bao theo tháng trả theo dung lượng sử dụng Phương thức kết nối thường nhà cung cấp dịch vụ trực tuyến sử dụng 1.2.2 Kết nối quay số qua mạng điện thoại Trong phương thức kết nối này, người dùng kết nối với Internet thông qua mạng điện thoại Để kết nối, người dùng cần có đường điện thoại thiết bị kết nối có tên modem Máy tính người dùng kết nối với Modem modem kết nối tới đường điện thoại Hình 1.4 Kết nối quay số qua mạng điện thoại Hiện nay, dịch vụ kết nối nhà cung cấp dịch vụ Viễn thông cung cấp Khi người sử dụng đăng ký, nhà cung cấp cấp cho họ tài khoản để truy nhập số điện thoại cần gọi Kết nối kiểu không thường trực Khi muốn sử dụng dịch vụ, người dùng phải quay số đến số điện thoại nhà cung cấp dịch vụ cấp Sau nhập tên truy nhập mật để đăng nhập Kiểu kết nối thường người dùng cá nhân sử dụng giá thành rẻ dễ lắp đặt 1.2.3 Kết nối qua ADSL Kết nối Internet qua ADSL dịch vụ phổ biến ADSL công nghệ truy nhập bất đối xứng, tốc độ đường xuống lớn tốc độ đường lên Đặc điểm phù hợp với truy nhập Internet người dùng thường lấy thơng tin từ Internet xuống nhiều gửi thông tin lên Internet Người dùng đăng ký dịch vụ đường dây điện thoại sẵn có không thiết phải mắc thêm đường dây Để sử dụng, người dùng cần có ADSL modem Máy tính người dùng kết nối tới ADSL modem modem kết nối với đường dây điện thoại đăng ký dịch vụ ADSL Hình 1.5 Kết nối qua ADSL Đặc điểm phương thức kết nối mạng thường trực (sau kết nối tự động thực hiện) người dùng phải trả tiền cho thời gian sử dụng Cụ thể, nhà cung cấp dịch vụ tính cước dựa dung lượng thơng tin người dùng tải xuống tải lên Internet 1.3 Địa IP tên miền 1.3.1 Địa IP Các máy tính Internet giao tiếp với sử dụng giao thức TCP/IP Để máy tính liên lạc với nhau, máy tính cần có địa liên lạc địa phải Điều giống thuê bao mạng điện thoại di động phải có số hiệu thuê bao (số máy) số thuê bao phải mạng Bộ giao thức TCP/IP sử dụng địa IP để đánh địa cho máy tính mạng Mỗi địa IP bao gồm 32 bit, chia thành nhóm nhau, nhóm bit Các nhóm phân tách với dấu chấm “.” Cách biểu diễn địa IP phổ biến “thập phân dấu chấm” Trong cách biểu diễn này, địa IP chia thành nhóm, nhóm số thập phân phân tách với dấu chấm Cấu trúc địa IP là: A.B.C.D Trong đó: A, B, C, D số thập phân Dó số thập phân dược chuyển từ số nhị phân bit nên giá trị chúng phải nằm khoảng từ đến 255 Một số ví dụ địa IP: - 10.10.10.10 - 128.3.5.7 - 192.168.10.1 Địa IP sử dụng (IPv4) có 32 bit Hiện số quốc gia đưa vào sử dụng địa IPv6 nhằm mở rộng không gian địa ứng dụng mới, IPv6 bao gồm 128 bit dài gấp lần IPv4 Version IPv4 có khả nǎng cung cấp 232 = 4294967296 địa Còn Version IPv6 có khả nǎng cung cấp tới 2128 địa Do địa IP phải nên cần có tổ chức quản lý việc cấp phát địa IP Hiện tổ chức phi Chính phủ Inter – NIC – chịu trách nhiệm cung cấp địa IP để đảm bảo khơng có máy tính kết nối Internet bị trùng địa chỉ: (http://www.internic.net) 1.3.2 Tên miền Với cấu trúc địa IP trên, người sử dụng khó nhớ địa IP dẫn đến việc sử dụng dịch vụ từ máy tính khó khǎn Để thuận tiện cho người sử dụng, tên tượng trưng sử dụng thay cho địa IP Tên tượng trưng gọi tên miền (domain name) Máy chủ Web Server VNNIC có địa 203.162.57.101, tên miền www.vnnic.net.vn Để truy nhập đến máy chủ, người dùng dùng địa IP tên miền Tuy nhiên thực tế, người dùng không cần biết đến địa IP mà cần nhớ tên miền truy cập Như vậy, tên miền nhận dạng vị trí máy tính mạng Internet Nói cách khác, tên miền tên mạng lưới, tên máy chủ mạng Internet Mỗi địa dạng chữ tương ứng với địa IP dạng số Hệ thống quản lý tên miền (Domain Name System – DNS) Mỗi máy tính kết nối vào mạng Internet gán cho địa IP xác định Địa IP máy Hệ thống DNS đời nhằm giúp chuyển đổi từ địa IP khó nhớ mà máy sử dụng sang tên dễ nhớ cho người sử dụng, đồng thời giúp hệ thống Internet ngày phát triển Hệ thống DNS sử dụng hệ thống sở liệu phân tán phân cấp hình Vì vậy, việc quản lý dễ dàng thuận tiện cho việc chuyển đổi từ tên miền sang địa IP ngược lại Hệ thống DNS giống mơ hình quản lý cơng dân nước Mỗi cơng dân cómột tên xác định đồng thời có địa chứng minh thư để giúp quản lý người cách dễ dàng Mỗi cơng dân có số cước để quản lý, ví dụ: Ơng Vũ Hữu Hùng có chứng minh thư: 111166520 Mỗi địa IP tương ứng với tên miền, ví dụ: Trang chủ nhà cung cấp dịch vụ ISP lớn Việt Nam VDC có tên miền là: home.vnn.vn , tương ứng với địa IP là: 203.162.0.12 Hoạt động hệ thống DNS: Giả sử người sử dụng muốn truy cập vào trang web có địa http://www.yahoo.com/ Tiến trình hoạt động DNS sau: - Trước hết chương trình máy người sử dụng gửi yêu cầu tìm kiếm địa IP ứng với tên miền www.yahoo.com tới máy chủ quản lý tên miền (Name Server) cục thuộc mạng (ISP DNS Server) - Máy chủ quản lý tên miền cục kiểm tra sở liệu xem có chứa sở liệu chuyển đổi từ tên miền sang địa IP tên miền mà người sửdụng yêu cầu không Trong trường hợp máy chủ quản lý tên miền cục có sở liệu này, gửi trả lại địa IP máy có tên miền nói (www.yahoo.com) - Trong trường hợp máy chủ quản lý tên miền cục khơng có sở liệu tên miền này, thường hỏi lên máy chủ quản lý tên miền cấp cao (máy chủ quản lý tên miền làm việc mức Root) Máy chủ quản lý tên miền mức Root trả cho máy chủ quản lý tên miền cục địa máy chủ tên miền quản lýCheese is a remarkably versatile food, available in literally hundreds of varieties with different flavors and textures.
Nhận xét: Khi khơng để thuộc tính float(tức float:none), phần nội dung nằmnằm Thử điểu chỉnh left->right 112 Figure 9-2 recipe h2 { float: left; } recipe intro, recipe ol { float: right; width: 500px; } Recipes for Cheese
Cheese is a remarkably versatile food, available in literallyhundreds of varieties with different flavors and textures.
Welsh Rarebit 113Welsh Rarebit is a savory dish made from melted cheese, often Cheddar, on toasted bread, and a variety of other ingredients such as mustard, egg, or bacon Here is one take on this classic.
- Lightly toast the bread
- Place on a baking tray, and spread with butter.
- Add the grated Cheddar cheese and tablespoons of beer to a saucepan Place the saucepan over a medium heat, and stir the cheese continuously until it has melted Add a teaspoon of wholegrain mustard and grind in a little pepper Keep stirring.
- When thick and smooth, pour over each piece of toast spreading it to the edges to stop the toast from burning.
- Place under the grill for a couple of minutes or until golden brown.