(NB) Giáo trình Thiết kế và quản trị Website cung cấp cho người học những kiến thức như: Ngôn ngữ HTML; Công cụ hỗ trợ thiết kế web; Bảng mẫu nạp chồng – CSS; Ngôn ngữ JavaScript; Hoạt động quản trị website và hosting server; Quản trị domain và hosting Windows;...Mời các bạn cùng tham khảo!
ỦY BAN NHÂN DÂN TỈNH HẢI PHỊNG TRƯỜNG CƠNG NGHIỆP HẢI PHỊNG GIÁO TRÌNH Tên mơ đun: Thiết kế quản trị Website NGHỀ: QUẢN TRỊ MẠNG MÁY TÍNH TRÌNH ĐỘ CAO ĐẲNG HẢI PHỊNG MỤC LỤC Bài Ngơn ngữ html .6 Tổng quan ngôn ngữ HTML Các thẻ HTML .8 Siêu liên kết khung 24 Bảng biểu Web 34 Form controls 40 Bài Công cụ hỗ trợ thiết kế web 48 Ý nghĩa số công cụ hỗ trợ thiết kế Web 48 Một số chức hỗ trợ đáng ý 49 Xuất kết 53 Bài Bảng Mẫu Nạp Chồng – Css 54 Khái niệm 54 Phân loại 55 Bộ chọn 61 Các thuộc tính CSS thơng dụng thiết kế giao diện 62 Bài Ngôn Ngữ Javascript 68 Giới thiệu 68 Biến, toán tử, toán hạng, hằng, hàm, lệnh JavaScript 69 Bài Hoạt động quản trị website hosting server 87 Tìm hiểu domain hosting 87 Nghiệp vụ người quản trị domain & hosting 89 Nghiệp vụ người quản trị website 92 Đăng ký domain shared hosting 94 Bài Quản trị domain hosting Windows 97 Giới thiệu phần mềm quản trị hosting Windows 97 Quản trị domain Plesk 101 Quản trị hosting Plesk 105 Bài Máy chủ chuyên dụng máy chủ ảo .119 Giới thiệu Dedicated Serve/ VPS Hosting 119 Giới thiệu WHM cPanel 121 Quản trị tài khoản người dùng sử dụng WHM .123 Bài Hướng dẫn SEO cho website 137 Giới thiệu SEO 137 Các chiến lược SEO 138 Các chiến lược SEO website Google .139 Các lỗi SEO .139 BÀI TẬP LỚN .141 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 nguyên 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 LỜI GIỚI THIỆU ‘‘Thiết kế quản trị Website” mô đun bắt buộc trường nghề Tuỳ thuộc vào đối tượng người học cấp bậc học mà trang bị cho học sinh, sinh viên kiến thức Để thống chương trình nội dung giảng dạy nhà trường biên soạn giáo trình: Thiết kế quản trị Website Giáo trình biên soạn phù hợp với nghề trường đào tạo nghề phục vụ theo yêu cầu thực tế xã hội Tài liệu tham khảo để biên soạn gồm: - Các thủ thuật HTML thiết kế, Nhà xuất lao động xã hội, 2006 - Tuyển tập thủ thuật JavaScript, Nhà xuất Phương Đông, 2006 - Học thiết kế Web hình minh họa, Nhà xuất Phương Đơng, 2006 - http://www.w3schools.com/books/default.asp Trong trình biên soạn giáo trình kinh nghiệm cịn hạn chế, chúng tơi mong nhận ý kiến đóng góp bạn đọc để lần hiệu đính sau hồn chỉnh Tổ mơn Ứng dụng máy tính Vị trí, tính chất mơ đun: Vị trí: Mơ đun bố trí sau sau sinh viên học xong môn Hệ quản trị Cơ sở liệu, Cơ sở liệu, đào tạo cho trình độ cao đẳng Cơng nghệ thơng tin Tính chất: Là mơ đun chương trình đào tạo Ứng dụng phần mềm Mục tiêu mô đun: - Về kiến thức: + Trình bày cấu trúc viết ngơn ngữ html, css, javascript thẻ bản, thuộc tính bản; + Xác định thuộc tính, control với thẻ thiết kế; + Phân tích cấu trúc, cách thiết kế website gồm thành phần - Về kỹ năng: + Thiết kế website bản; + Lập trình ngơn ngữ html, css, javascript; + Tổ chức thông tin trang chủ website; + Sử dụng thành thạo công cụ thiết kế website; + Xây dựng thành thạo công cụ thiết kế, ứng dụng Multimedia; + Sử dụng thẻ thiết kế; + Thao tác với xử lý tình lỗi xảy với javascript; + Sử dụng Dreaamweaver CS để tạo website; + Thực đưa website lên host quản trị website host; + Đăng ký domain hosting cho website; + Quản trị doamin; + Upload website lên hosting; + Cấu hình để website hoạt động hosting; + Backup website - Về lực tự chủ trách nhiệm: + Tuân thủ quy đinh phòng thực hành, rèn luyện tính cẩn thận, xác, kiên trì cơng việc hướng dẫn giáo viên; + Tác phong cơng nghiệp làm việc theo nhóm Nội dung mơ đun: Số TT Tên chương/mục Phần Thiết kế website Bài Ngôn ngữ HTML Thực hành 1: Làm việc với thẻ ngôn ngữ HTML 2Bài Công cụ hỗ trợ thiết kế web Thực hành 2: Làm việc với Dreamweaver Bài Bảng mẫu nạp chồng – CSS Thực hành 3: Tạo CSS Inline style, Internal style, External style Thực hành 4: Làm việc với thuộc tính CSS Bài Ngôn ngữ JavaScript Thực hành 5: Nhúng JavaScript HTML Phần Quản trị website Bài Hoạt động quản trị website hosting server Thực hành Đăng ký domain hosting Bài Quản trị domain hosting Windows Thực hành Quản trị domain hosting Bài Máy chủ chuyên dụng máy chủ ảo Thực hành Quản trị tài khoản người dùng Bài Hướng dẫn SEO cho website Thực hành SEO cho website Phần Bài tập lớn Thực hành 10 Thiết kế website thương mại Thực hành 11 Thiết kế diễn dàn tin tức Bài Ngôn ngữ html Tổng quan ngôn ngữ HTML 1.1 Các khái niệm Internet Web Tiền thân Internet ARPANET, mạng máy tính xây dựng Bộ Quốc phòng Mỹ (DOD) vào năm 1969 dùng để kiểm thử độ tin cậy mạng nhằm kết nối sở nghiên cứu với mục đích quân sự, bao gồm số lượng lớn trường đại học, viện nghiên cứu ARPANET khởi đầu với quy mô nhỏ nhanh chóng bành trướng khắp nước Mỹ Thành công ARPANET nhân lên gấp bội, ngày nhiều trường đại học đăng ký tham gia Tuy nhiên, quy mơ lớn mạng gây khó khăn vấn đề quản lý Từ ARPANET chia thành hai phần: MILNET hệ thống mạng dành cho quân ARPANET nhỏ hơn, không thuộc DOD Tuy nhiên hai mạng liên kết với nhờ giải pháp kỹ thuật gọi IP (Internet Protocol – Giao thức Internet), cho phép thông tin truyền từ mạng sang mạng khác cần thiết Tất mạng nối vào Internet sử dụng IP Năm 1989, Tim Berners Lee viện Kỹ thuật hạt nhân Châu Âu – CERN (Conseil Européen pour la Recherche Nucléaire) phát minh giao thức World Wide Web – viết tắt WWW hay gọi ngắn gọn Web, sau ngơn ngữ HTML (HyperText Markup Language) Có thể nói cách mạng Internet người ta truy cập trao đổi thơng tin cách dễ dàng Tuy nhiên Web lúc khơng có điểm giống Web mà biết ngày Trình duyệt Web điều khiển chuột không hỗ trợ đồ họa Nhưng người dùng Internet lúc nhanh chóng cảm nhận sức mạnh tiềm Web Web trưởng thành nhanh Trong vài năm ngắn ngủi có cải tiến lớn Ý nghĩa trình duyệt Web dùng chuột khả hỗ trợ đa phương tiện: ViolaWWW (1992), NCSA Mosaic 1.0 (1993), Netscape Navigator 1.0 (1994), Microsoft Internet Explorer 1.0 (1995), … Trong thực tế, ứng dụng Web tồn hai loại trang Web tĩnh trang Web động Trang Web tĩnh trang HTML không kết nối sở liệu Ngược lại, trang Web động trang Web có kết nối sở liệu Điều có nghĩa trang Web động làm tươi, liệu trình bày trang Web đọc từ sở liệu Nói cách khác, cho dù trang Web tĩnh hay động, bạn muốn trình bày liệu trình duyệt Web, bạn cần phải khai báo thẻ HTML bên theo quy luật định Mỗi trang Web gọi Webpage Tập hợp nhiều trang Web liên kết với theo cấu trúc tổ chức cá nhân xây dựng nên gọi Website Mỗi Website có trang Web hiển thị người dùng truy cập vào Website đó, trang Web gọi Homepage Homepage cung cấp nhìn tổng quan Website Một Website muốn cung cấp thơng tin cho tồn giới cần đưa lên trình phục vụ Web (Web Server) cần đăng ký tên miền, địa URL (Uniform Resource Locator – Địa định vị nguồn tài nguyên Internet) để truy cập đến với cú pháp: ://// Ví dụ: http://joomlaviet.org/forum/index.php Địa định vị nguồn tài nguyên phân hai loại: địa tuyệt đối địa tương đối Địa tuyệt đối địa có cú pháp đầy đủ gồm giao thức, tên miền, tên đường dẫn (nếu có) tên tập tin Web hiển thị Địa tương đối gồm đường dẫn (nếu có) tên tập tin Trình duyệt tự động xác định địa tuyệt đối cách lấy phần thông tin bị khuyết từ URL trang Web hành kết hợp với URL tương đối 1.2 Cách hoạt động trang Web Cách hoạt động trang Web thơng qua mơ hình sau: Giải thích mơ hình: Khi người sử dụng Internet mở trình duyệt (Web Browser) máy tính, gõ vào địa trình duyệt địa trang Web nhấn phím enter để xác nhận lệnh Điều có nghĩa yêu cầu dịch vụ HTTP phát sinh gửi đến trình phục vụ Web Trình phục vụ Web nhận yêu cầu tiến hành tìm kiếm hệ thống mà Web Server lưu trữ địa trang yêu cầu - Kết tìm kiếm gửi cho máy tính mà người sử dụng gửi yêu cầu - Nếu tìm thấy, trình duyệt Web máy tính người sử dụng có nhiệm vụ hiển thị nội dung trang Web theo ý định người thiết kế trang Web Các thẻ HTML 2.1 Thẻ , thích ký hiệu đặc biệt Trong cặp thẻ … dùng thuộc tính định dạng cho tồn nội dung trang như: Background=“URL” với URL đường dẫn đến tập tin hình ảnh dùng làm ảnh cho phần nội dung trang Bgcolor= “color” với color mã màu hệ thập lục phân từ khóa tên màu tiếng Anh như: red (màu đỏ), blue (màu xanh da trời), green (màu xanh lá), white (màu trắng), … để định dạng màu trang Text=“color” với color mã màu hệ thập lục phân từ khóa tên màu tiếng Anh như: red (màu đỏ), blue (màu xanh da trời), green (màu xanh lá), white (màu trắng), … để định dạng màu chữ cho toàn trang Để ghi đoạn mã HTML, ta đặt nội dung thích cặp thẻ Khi dịch trang Web, trình duyệt bỏ qua phần nội dung nằm cặp thẻ Trong ngôn ngữ HTML, số ký tự đặc biệt bạn gõ từ bàn phím Ví dụ gõ khoảng cách từ ký tự khoảng trắng hay nhiều ký tự khoảng trắng kết hiển thị lên trình duyệt Vì vậy, bạn muốn có nhiều khoảng trắng liên tục phải thực gọi mã HTML cho ký hiệu đặc biệt Sau bảng liệt kê số ký hiệu đặc biệt thường dùng: Mã HTML Ý nghĩa Mã HTML Ý nghĩa Khoảng trắng ™ TM < < © © Ý nghĩa Mã HTML Ý nghĩa > > ® đ & & ¥ Ơ " € € ½ ½ Mã HTML ∑ 2.2 Thẻ định dạng văn 2.2.1 Thẻ … Cặp thẻ cho phép bạn định dạng cho đoạn văn thuộc tính bên thẻ Tuy nhiên, cặp thẻ khơng kèm theo ký tự xuống dịng cho đoạn văn Ví dụ, bạn muốn canh lề cho đoạn văn, bạn sử dụng thuộc tính align thẻ Giá trị thuộc tính align có bốn giá trị: center/justify/left/right 2.2.2 Thẻ…
Tương tự thẻ , thẻdùng để định dạng đoạn văn Nhưng khác với thẻ , thẻ
cho phép canh chỉnh lề cho đoạn văn, kết thúc đoạn đánh dấu thẻ
liệu trình bày tự động xuống dòng Thẻ đoạncó thuộc tính align với bốn giá trị center/justify/left/right 10 Làm việc với Package Một Package danh sách thiết lập giới hạn Không gian ổ đĩa, Băng thông, Các tài khoản Email, Các domain (subdomain), Tài khoản FTP… để áp dụng cho tài khoản tạo Một Package gán cho nhiều tài khoản người dùng nhiều reseller Khi thay đổi Package, toàn người dùng gán cho Package bị ảnh hưởng Tạo Package - Điều hướng WHM theo đường dẫn tính hiển thị khung chữ nhật màu đỏ hình bên 128 - Nhấp chuột vào Add Package để truy cập hình tạo Package Các thơng số quan trọng Quota: Giới hạn dung lượng lưu trữ đĩa gán cho tài khoản 129 Max FTP Accounts: Số lượng tài khoản FTP tối đa mà package phép tạo Mặc định giá trị không giới hạn (unlimited) Giá trị người dùng khơng phép tạo thêm tài khoản FTP mà có tài khoản FTP Max Email Accounts: Số lượng tài khoản POP3/IMAP tối đa mà tài khoản phép tạo Max MySQL Databases : Số lượng sở liệu tối đa mà tất người sử dụng gán package phép truy cập Max Subdomains : Số lượng domain (Subdomain) tối đa mà người sử dụng gói tạo (subdomain.domain.com ) Max Parked Domains : Số lượng parked domain tối đa người sử dụng thêm Parked domain tên miền thứ hai trỏ tới nội dung tương đương với tên miền bạn Người dùng có tài khoản Cpanel để kiểm sốt tất parked domain Max Addon Domains: Số lượng Addon Domain tối đa người sử dụng thêm Addon Domain tên miền thêm vào chạy chung với host tên miền Có cấu trúc thư mục thư mục thư mục Người dùng cuối ghé thăm tên miền addon tên miền host từ tài khoản Cpanel Người dùng có tài khoản Cpanel để quản trị tất tên miền Addon Chiếm không gian ổ đĩa băng thông CGI Access: Chọn CheckBox bạn muốn tài khoản gói có quyền truy cập Script CGI/Perl Frontpage Extensions: Chọn CheckBox bạn muốn phần mở rộng Microsoft FrontPage phía Server cài đặt mặc định cho tất tài khoản gói CheckBox thường bỏ chọn người dùng chọn cài đặt FrontPage Extensions Cpanel cần Bandwidth Limit: Tổng giới hạn băng thông gán cho tài khoản gói 130 cPanel Theme: Mục cho phép bạn chọn Theme mà bạn muốn gán cho Cpanel người dùng Feature List: Mục cho phép bạn chọn Feature List để gán cho Package Sau bạn thiết lập tồn thơng số cần thiết, nhấp chuột vào Create để tạo Package Nếu muốn khôi phục lại thiết lập mặc định, nhấp chuột vào Reset Chú ý: Với gói tạo Reseller hệ thống tự động đổi tên gói sau: Tên gói = “Tên tài khoản Reseller” + “_ “+ “Tên gói người dùng nhập vào 131 Chú ý: Thay đổi thiết lập cho Package ảnh hưởng đến tất tài khoản gán Package Nó thay tất thiết lập điều chỉnh tay từ trước dung lượng lưu trữ, giới hạn băng thơng Có thể tạo Package với đầy đủ thiết lập bạn muốn Sau gán Package cho tài khoản thay chỉnh sửa thiết lập package cũ tay Điều tránh gây lỗi cho hệ thống tài khoản hệ thống Với Package gán cho tài khoản nên đặt tên gói sau: Tên gói = tên domain/tên tài khoản gán cho Package + Tên gói dự định đặt Xóa Package Chú ý: Những Package gán cho tài khoản cịn tồn khơng thể bị xóa Để xóa Package sử dụng tính Upgrade/Downgrade an Account tính Account Functions để hủy bỏ gán Package cho tài khoản 132 Reseller gán Package tạo Reseller khác Các Package tạo Root truy cập Reseller miễn Reseller thiết lập quyền truy cập Root gán Package cho tài khoản Tạo tài khoản người dùng 133 Khi tạo tài khoản người dùng cần ý thông số thuộc phần sau: Domain Information Package Setting Reseller Setting DNS Setting Thông số tài khoản người dùng Domain Information Domain: Tên miền UserName: Tên tài khoản Tên tài khoản tự động tạo sau nhập tên miền vào trường Domain Người dùng thay đổi tên tài khoản Tên tài khoản phải kí tự Tránh dùng kí tự khơng phải chữ (+, %, &) Tên không chứa dấu cách Tên tài khoản phải Tránh dùng tên tài khoản bắt đầu số 134 Email: Địa email chủ tài khoản Địa phải có giá trị Dùng để nhận thơng báo từ WHM có vấn đề với tài khoản dùng để khôi phục password Cpanel Package Choose a Package: Danh sách Package Select Options Manually: Khi chọn tùy chọn này, hình mở rộng thêm vùng tính cho phép cấu hình lại Package Setting 135 Cpanel Theme: Theme hiển thị Cpanel người dùng Language: Loại ngôn ngữ hiển thị Reseller Setting CheckBox Make the account a Reseller: dùng để cấp quyền Reseller cho tài khoản Tài khoản có quyền Reseller tạo tài khoản người dùng khác DNS Setting - Chọn CheckBox tên miền tương ứng với tên máy chủ đăng kí Bỏ chọn để sử dụng tên máy chủ mặc định cấu hình Server Configuration 136 Bài Hướng dẫn SEO cho website Giới thiệu SEO SEO - Search Engine Optimization (Tối ưu hóa cơng cụ tìm kiếm) Là tập hợp phương pháp, kỹ thuật nhằm: Nâng cao thứ hạng Website trang kết cơng cụ tìm kiếm Làm cho Website xuất thường xuyên trang danh sách kết cơng cụ tìm kiếm Là chiến lược tiếp thị qua cơng cụ tìm kiếm Trung bình 86% lượng truy cập Website đến từ cơng cụ tìm kiếm lớn Google, Yahoo, MSN… Nếu trang Web không xếp hạng top 30 kết tìm kiếm ứng với từ khóa tìm kiếm khó thu hút người dùng truy cập đến Google xếp hạng Website nào? 137 Nhân tố định thứ hạng Website Các nhân tố để thuật tốn bí mật xếp hạng Website: Từ ngữ sử dụng Website Tiêu đề Website Các từ mô tả liên kết Số lượng chất lượng liên kết từ Website khác trỏ tới Website Danh tiếng Website Các chiến lược SEO On-page SEO: Chiến lược SEO tập trung vào phần nội dung viết website trọng vào việc tối ưu nội dung để đẩy thứ hạng website lên cao với từ khóa cụ thể Off-page SEO: Chiến lược SEO tập trung vào đường dẫn (link) dẫn trực tiếp đến website từ trang khác internet Số lượng “backlinks” website có chứa link dẫn trực tiếp đến website bạn giúp tạo tin tưởng máy hệ thống tìm kiếm Và điều tất nhiên dẫn đến kết làm cho website bạn đạt thứ hạng cao Technical SEO: Chiến lược SEO tập trung vào cấu trúc website phần kỹ thuật website thiết lập (backend) Google quan tâm đến 138 đoạn code cài đặt vào website tương tự phần nội dung web, điều đặc biệt quan trọng để xếp hạng cao máy tìm kiếm Các chiến lược SEO website Google 3.1 Tối ưu hóa Website 3.1.1 Tối ưu hóa tiêu đề trang 3.1.2 Sử dụng thẻ meta “description” 3.1.3 Tối ưu hóa định dạng văn 3.1.4 Tối ưu hóa việc sử dụng hình ảnh 3.1.5 Tối ưu hóa thành phần cấu trúc 3.1.6 Tối ưu hóa thành phần cấu trúc 3.1.7 Sử dụng hiệu robots.txt 3.2 Đăng kí Website lên Google 3.3 Xây dựng Liên kết ngược 3.4 Tạo XML SiteMap 3.5 Cài đặt Google Webmaster 3.6 Cài đặt Google Analytics lên site 3.7 Tạo tài khoản Google AddWords đưa số quảng cáo lên site Các lỗi SEO Dựa vào từ khóa thẻ MetaTags Keywords Hầu hết máy tìm kiếm khơng cịn dựa vào thẻ MetaTags Keywords để xác định nội dung trang Web từ năm Chỉ đặt từ khóa khơng nên q trọng vào việc SEO sử dụng thẻ Nhồi nhét từ khóa vào phần text ẩn Chèn từ khóa với font chữ cực nhỏ, màu sắc với font chữ hay vượt khỏi cửa sổ trình duyệt hay chí sử dụng kỹ xảo SEO CSS HTML thủ thuật SEO cấm kỵ Khiến Website bạn bị phạt, cấm xóa khỏi danh mục số bị phát Mua bán liên kết Thất thoát PageRank 139 Nhiều WebMaster hiểu sai lầm việc đặt liên kết trỏ tới trang Web khác làm chia nhỏ, thất thoát PageRank sang trang khác Tăng cường liên kết tới trang nội dung tăng độ tin cậy cho trang Website Sử dụng nhiều JavaScript Google gặp khó khăn để hiểu mã nguồn javascript Để tối ưu, người làm SEO thường Tách rời riêng JavaScript sử dụng chèn file (include) dùng CSS để thay phần tiêu đề thân Website Sử dụng đồ họa tiêu đề trang, menu điều hướng Sử dụng khung (Frame), Flash Mật độ từ khoá lớn Mật độ từ khoá trang không vượt 10% Liên kết điểm đơn Là liên kết tạo site với điểm, người dùng khơng thể nhìn thấy liên kết Nếu bị phát bị phạt nặng Liên kết móc nối Trùng lặp nội dung Sử dụng trang chuyển tiếp (doorway pages), trang giả (cloaking) Dùng kĩ thuật tự động load lại trang Sử dụng Session IDs URLs 140 BÀI TẬP LỚN Thực hành 10 Thiết kế website thương mại Thực hành 11 Thiết kế website tin tức Thi kết thúc mô đun 141 TÀI LIỆU THAM KHẢO [1] Các thủ thuật HTML thiết kế Web – Lê Minh Hoàng, Hoàng Đức Hải – Nhà xuất lao động xã hội, 2006 [2] Tuyển tập thủ thuật JavaScript – Nguyễn Trường Sinh- Nhà xuất Phương Đông, 2006 [3] Học thiết kế Web hình minh họa – Nguyễn Trường Sinh – Nhà xuất Phương Đông, 2006 [4] http://www.w3schools.com/books/default.asp 142 ... Quản trị website Bài Hoạt động quản trị website hosting server Thực hành Đăng ký domain hosting Bài Quản trị domain hosting Windows Thực hành Quản trị domain hosting Bài Máy chủ chuyên dụng máy. .. với thẻ thiết kế; + Phân tích cấu trúc, cách thiết kế website gồm thành phần - Về kỹ năng: + Thiết kế website bản; + Lập trình ngơn ngữ html, css, javascript; + Tổ chức thông tin trang chủ website; ... giáo trình: Thiết kế quản trị Website Giáo trình biên soạn phù hợp với nghề trường đào tạo nghề phục vụ theo yêu cầu thực tế xã hội Tài liệu tham khảo để biên soạn gồm: - Các thủ thuật HTML thiết