Giáo trình Thiết kế và quản trị Website - Nghề: Quản trị mạng máy tính - Trình độ: Cao đẳng - Trường Công nghiệp Hải Phòng

142 trang Gia Huy 17/05/2022 2550

Download

Bạn đang xem 20 trang mẫu của tài liệu "Giáo trình Thiết kế và quản trị Website - Nghề: Quản trị mạng máy tính - Trình độ: Cao đẳng - Trường Công nghiệp Hải Phòng", để tải tài liệu gốc về máy bạn click vào nút DOWNLOAD ở trên

Tài liệu đính kèm:

giao_trinh_thiet_ke_va_quan_tri_website_nghe_quan_tri_mang_m.pdf

Nội dung text: Giáo trình Thiết kế và quản trị Website - Nghề: Quản trị mạng máy tính - Trình độ: Cao đẳng - Trường Công nghiệp Hải Phòng

Ủ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ế và 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 1. Ngôn ngữ html 6 1. Tổng quan về ngôn ngữ HTML 6 2. Các thẻ HTML cơ bản 8 3. Siêu liên kết và khung 24 4. Bảng biểu trên Web 34 5. Form và các controls 40 Bài 2. Công cụ hỗ trợ thiết kế web 48 1. Ý nghĩa và một số công cụ hỗ trợ thiết kế Web 48 2. Một số chức năng hỗ trợ đáng chú ý 49 3. Xuất bản kết quả 53 Bài 3. Bảng Mẫu Nạp Chồng – Css 54 1. Khái niệm 54 2. Phân loại 55 3. Bộ chọn 61 4. Các thuộc tính CSS thông dụng trong thiết kế giao diện 62 Bài 4. Ngôn Ngữ Javascript 68 1. Giới thiệu 68 2. Biến, toán tử, toán hạng, hằng, hàm, lệnh trong JavaScript 69 Bài 5. Hoạt động quản trị website và hosting server 87 1. Tìm hiểu domain và hosting 87 2. Nghiệp vụ người quản trị domain & hosting 89 3. Nghiệp vụ người quản trị website 92 4. Đăng ký domain và shared hosting 94 Bài 6. Quản trị domain và hosting Windows 97 1. Giới thiệu phần mềm quản trị hosting Windows 97 2. Quản trị domain trong Plesk 101 3. Quản trị hosting trong Plesk 105 Bài 7. Máy chủ chuyên dụng và máy chủ ảo 119 1. Giới thiệu Dedicated Serve/ VPS Hosting 119 2. Giới thiệu WHM và cPanel 121 3. Quản trị tài khoản người dùng sử dụng WHM 123 Bài 8. Hướng dẫn SEO cho website 137 1. Giới thiệu về SEO 137 2. Các chiến lược SEO 138 3. Các chiến lược SEO website trên Google 139 4. Các lỗi khi SEO 139 2
BÀI TẬP LỚN 141 TUYÊN BỐ BẢN QUYỀN Tài liệu này thuộc loại sách giáo trình nên các nguồn thông tin có thể được phép dùng nguyên bản hoặc trích dùng cho các mục đích về đào tạo và tham khảo. Mọi mục đích khác mang tính lệch lạc hoặc sử dụng với mục đích kinh doanh thiếu lành mạnh sẽ bị nghiêm cấm. LỜI GIỚI THIỆU ‘‘Thiết kế và quản trị Website” là mô đun bắt buộc trong các trường nghề. Tuỳ thuộc vào đối tượng người học và cấp bậc học mà trang bị cho học sinh, sinh viên những kiến thức cơ bản nhất. Để thống nhất chương trình và nội dung giảng dạy trong các nhà trường chúng tôi biên soạn cuốn giáo trình: Thiết kế và quản trị Website. Giáo trình được biên soạn phù hợp với các nghề trong các trường đào tạo nghề phục vụ theo yêu cầu của thực tế xã hội hiện nay. Tài liệu tham khảo để biên soạn gồm: - Các thủ thuật trong HTML và thiết kế, Nhà xuất bản lao động và xã hội, 2006 - Tuyển tập thủ thuật JavaScript, Nhà xuất bản Phương Đông, 2006 - Học thiết kế Web bằng hình minh họa, Nhà xuất bản Phương Đông, 2006 - Trong quá trình biên soạn giáo trình kinh nghiệm còn hạn chế, chúng tôi rất mong nhận được ý kiến đóng góp của bạn đọc để lần hiệu đính sau được hoàn chỉnh hơn. Tổ bộ môn Ứng dụng máy tính 3
Vị trí, tính chất của mô đun: - Vị trí: Mô đun được bố trí sau khi sau khi sinh viên học xong các môn Hệ quản trị Cơ sở dữ liệu, Cơ sở dữ liệu, được đào tạo cho trình độ cao đẳng Công nghệ thông tin. - Tính chất: Là mô đun trong 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 cấu trúc viết ngôn ngữ html, css, javascript và các thẻ cơ bản, thuộc tính cơ bản; + Xác định được các thuộc tính, control với mỗi thẻ trong thiết kế; + Phân tích được cấu trúc, cách thiết kế một website cơ bản gồm những thành phần cơ bản nào. - Về kỹ năng: + Thiết kế được website cơ bản; + Lập trình được ngôn ngữ html, css, javascript; + Tổ chức được thông tin trên 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ác công cụ thiết kế, các ứng dụng Multimedia; + Sử dụng được các thẻ cơ bản trong thiết kế; + Thao tác được với các xử lý tình huống lỗi xảy ra với javascript; + Sử dụng được Dreaamweaver CS để tạo một website; + Thực hiện đưa website lên host và quản trị website trên host; + Đăng ký domain và hosting cho website; + Quản trị doamin; + Upload một website lên hosting; + Cấu hình để website hoạt động trên hosting; + Backup website. - Về năng lực tự chủ và trách nhiệm: + Tuân thủ các quy đinh trong phòng thực hành, rèn luyện tính cẩn thận, chính xác, kiên trì trong công việc và hướng dẫn của giáo viên; + Tác phong công nghiệp và làm việc theo nhóm. Nội dung mô đun: Số TT Tên chương/mục Phần 1 Thiết kế website Bài 1. Ngôn ngữ HTML 1 Thực hành 1: Làm việc với các thẻ cơ bản bằng ngôn ngữ HTML 2Bài 2. Công cụ hỗ trợ thiết kế web 4
Thực hành 2: Làm việc với Dreamweaver Bài 3. Bảng mẫu nạp chồng – CSS 3 Thực hành 3: Tạo CSS bằng Inline style, Internal style, External style Thực hành 4: Làm việc với các thuộc tính cơ bản của CSS Bài 4. Ngôn ngữ JavaScript 4 Thực hành 5: Nhúng JavaScript trong HTML Phần 2 Quản trị website Bài 5. Hoạt động quản trị website và hosting server 5 Thực hành 6. Đăng ký domain và hosting Bài 6. Quản trị domain và hosting Windows 6 Thực hành 7. Quản trị domain và hosting Bài 7. Máy chủ chuyên dụng và máy chủ ảo 7 Thực hành 8. Quản trị tài khoản người dùng 8 Bài 8. Hướng dẫn SEO cho website Thực hành 9. SEO cho một website Phần 3 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 5
Bài 1. Ngôn ngữ html 1. Tổng quan về ngôn ngữ HTML 1.1. Các khái niệm cơ bản về Internet và Web Tiền thân của Internet là ARPANET, mạng máy tính được xây dựng bởi Bộ Quốc phòng Mỹ (DOD) vào năm 1969 dùng để kiểm thử độ tin cậy của mạng và nhằm kết nối những cơ sở nghiên cứu với mục đích quân sự, bao gồm một số lượng lớn các trường đại học, viện nghiên cứu. ARPANET khởi đầu với quy mô nhỏ nhưng đã nhanh chóng bành trướng ra khắp nước Mỹ. Thành công của ARPANET được nhân lên gấp bội, ngày càng nhiều trường đại học đăng ký tham gia. Tuy nhiên, quy mô lớn của mạng đã gây khó khăn trong vấn đề quản lý. Từ đó ARPANET được chia thành hai phần: MILNET là hệ thống mạng dành cho quân sự và ARPANET mới nhỏ hơn, không thuộc DOD. Tuy nhiên hai mạng vẫn liên kết với nhau nhờ giải pháp kỹ thuật gọi là IP (Internet Protocol – Giao thức Internet), cho phép thông tin truyền từ mạng này sang mạng khác khi cần thiết. Tất cả các mạng được nối vào Internet đều sử dụng IP. Năm 1989, Tim Berners Lee tại viện Kỹ thuật hạt nhân Châu Âu – CERN (Conseil Européen pour la Recherche Nucléaire) phát minh ra giao thức World Wide Web – viết tắt là WWW hay gọi ngắn gọn là Web, sau đó là ngôn ngữ HTML (HyperText Markup Language). Có thể nói đây là một cuộc cách mạng trên Internet vì người ta có thể truy cập và trao đổi thông tin một cách dễ dàng. Tuy nhiên Web lúc bấy giờ không có bất kỳ điểm nào giống như Web mà chúng ta biết ngày nay. Trình duyệt Web đầu tiên không thể điều khiển bằng chuột và không hỗ trợ đồ họa. Nhưng người dùng Internet lúc đó đã nhanh chóng cảm nhận được sức mạnh tiềm năng của Web Web trưởng thành rất nhanh. Trong vài năm ngắn ngủi đã có những cải tiến lớn. Ý nghĩa nhất là các trình duyệt Web dùng chuột và khả năng 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 luôn tồn tại hai loại là trang Web tĩnh và trang Web động. Trang Web tĩnh là trang HTML không kết nối cơ sở dữ liệu. Ngược lại, trang Web động là trang Web có kết nối cơ sở dữ liệu. Điều này có nghĩa là mỗi khi 6
trang Web động được làm tươi, dữ liệu trình bày trên trang Web đó được đọc từ cơ sở dữ liệu. Nói cách khác, cho dù đó là trang Web tĩnh hay động, nếu bạn muốn trình bày dữ liệu trên trình duyệt Web, bạn cần phải khai báo các thẻ HTML bên trong theo một quy luật nhất định. Mỗi trang Web được gọi là Webpage. Tập hợp nhiều trang Web được liên kết với nhau theo một cấu trúc nào đó do tổ chức hoặc cá nhân xây dựng nên được gọi là một Website. Mỗi Website sẽ có một trang Web được hiển thị đầu tiên khi người dùng truy cập vào Website đó, trang Web đầu tiên này được gọi là Homepage. Homepage cung cấp cái nhìn tổng quan về Website. Một Website muốn cung cấp thông tin cho toàn thế giới cần được đưa lên một trình phục vụ Web (Web Server) và cần được đăng ký một tên miền, một địa chỉ URL (Uniform Resource Locator – Địa chỉ định vị nguồn tài nguyên trên Internet) để truy cập đến với cú pháp: :// / / Ví dụ: Địa chỉ định vị nguồn tài nguyên phân ra là hai loại: địa chỉ tuyệt đối và địa chỉ tương đối. Địa chỉ tuyệt đối là một địa chỉ có cú pháp đầy đủ gồm giao thức, tên miền, tên đường dẫn (nếu có) và tên tập tin Web đang hiển thị. Địa chỉ tương đối chỉ gồm đường dẫn (nếu có) và tên tập tin. Trình duyệt sẽ tự động xác định địa chỉ tuyệt đối bằng cách lấy phần thông tin bị khuyết từ URL của trang Web hiện hành kết hợp với URL tương đối. 1.2. Cách hoạt động của một trang Web Cách hoạt động của một trang Web thông qua mô hình sau: 7
Giải thích mô hình: Khi người sử dụng Internet mở một trình duyệt (Web Browser) trên máy tính, gõ vào thanh địa chỉ của trình duyệt một địa chỉ của một trang Web và nhấn phím enter để xác nhận lệnh. Điều đó có nghĩa là một yêu cầu về dịch vụ HTTP đã phát sinh và được gửi đến trình phục vụ Web . Trình phục vụ Web khi nhận được yêu cầu sẽ tiến hành tìm kiếm trên hệ thống mà Web Server đang lưu trữ địa chỉ của trang đang được yêu cầu - Kết quả tìm kiếm sẽ được gửi về 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 trên máy tính của người sử dụng sẽ có nhiệm vụ hiển thị nội dung trang Web theo ý định của người thiết kế trang Web đó. 2. Các thẻ HTML cơ bản 2.1. Thẻ , chú thích và các ký hiệu đặc biệt Trong cặp thẻ chúng ta có thể dùng các thuộc tính định dạng cho toàn nội dung của trang như: Background=“URL” với URL là đường dẫn đến tập tin hình ảnh dùng làm ảnh nền cho phần nội dung của trang. Bgcolor= “color” với color là mã màu ở hệ thập lục phân hoặc các từ khóa tên màu bằng 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 nền trang. Text=“color” với color là mã màu ở hệ thập lục phân hoặc các từ khóa tên màu bằng 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 chú một đoạn mã HTML, ta đặt nội dung chú thích trong cặp thẻ . Khi dịch trang Web, trình duyệt sẽ bỏ qua phần nội dung nằm trong cặp thẻ này. Trong ngôn ngữ HTML, một số ký tự đặc biệt bạn không thể gõ từ bàn phím. Ví dụ nếu chỉ gõ khoảng cách giữa các từ là một ký tự khoảng trắng hay nhiều ký tự khoảng trắng thì kết quả hiển thị lên trình duyệt là như nhau. Vì vậy, nếu bạn muốn có nhiều khoảng trắng liên tục thì phải thực hiện gọi mã HTML cho ký hiệu đặc biệt. Sau đây là bảng liệt kê một số ký hiệu đặc biệt thường dùng: 8
Mã HTML Ý nghĩa Mã HTML Ý nghĩa Khoảng trắng ™ TM < ® ® & & ¥ ¥ " “ € € ∑ ½ ½ 2.2. Thẻ định dạng văn bản 2.2.1. Thẻ Cặp thẻ này cho phép bạn định dạng cho đoạn văn bằng các thuộc tính bên trong thẻ. Tuy nhiên, cặp thẻ này 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 có thể sử dụng thuộc tính align của thẻ . Giá trị của thuộc tính align có bốn giá trị: center/justify/left/right. 9
2.2.2. Thẻ Tương tự thẻ , thẻ cũng được dùng để định dạng đoạn văn. Nhưng khác với thẻ , thẻ ngoài cho phép canh chỉnh lề cho đoạn văn, khi kết thúc đoạn được đánh dấu bằng thẻ dữ liệu trình bày sẽ tự động xuống dòng. Thẻ đoạn cũng có thuộc tính align với bốn giá trị center/justify/left/right. 10
2.2.3. Các thẻ định dạng tiêu đề HTML định nghĩa sẵn sáu cấp độ của tiêu đề: , , với độ lớn giảm dần từ h1 đến h6. Kết thúc thẻ tiêu đề, nội dung trình bày cũng tự động xuống dòng. Chúng ta có thể tham khảo ví dụ bên dưới để hiểu rõ hơn về các thẻ tiêu đề. Dùng Notepad soạn thảo ví dụ trên và mở tập tin bằng trình duyệt, ta sẽ được giao diện như sau: 11
2.2.4. Thẻ định dạng chữ Có rất nhiều thẻ định dạng chữ tùy theo ý định của người thiết kế Web mà vận dụng các thẻ này một cách linh hoạt. Khi hiển thị nội dung lên Web, phím enter sẽ không có tác dụng. Vì vậy bạn có thể dùng thẻ để xuống hàng. Đây là một thẻ đơn và không có thuộc tính bên trong. Nếu bạn muốn kẽ một đường ngang trên giao diện Web, HTML hỗ trợ cho bạn thẻ . Đây cũng là một thẻ đơn. Bạn có thể trang trí cho đường kẻ này một số thuộc tính như: màu sắc (dùng thuộc tính color), độ rộng cho đường kẽ nếu trường hợp bạn không muốn kẽ đường ngang hết trang hãy sử dụng thuộc tính width, độ dày của đường kẻ được chỉ định trong thuộc tính size và cuối cùng là canh lề cho đường ngang với thuộc tính align. Khi muốn hiển thị lên Web phần văn bản in đậm, bạn dùng cặp thẻ . Khi muốn hiển thị lên Web phần văn bản in nghiêng, bạn dùng cặp thẻ . Khi muốn hiển thị lên Web phần văn bản có gạch chân, bạn dùng cặp thẻ . 12
Khi muốn nhấn mạnh một nội dung nào đó trên Web, bạn có thể dùng cặp thẻ , nội dung được nhấn mạnh sẽ được in đậm như khi dùng thẻ . Khi muốn làm nổi bậc một nội dung nào đó trên Web, bạn có thể dùng cặp thẻ , nội dung được làm nổi bậc sẽ được in nghiêng như khi dùng thẻ . Khi muốn hiển thị chữ lớn mà không quan tâm đến kích cỡ chữ, bạn có thể dùng cặp thẻ . Tương tự, nếu muốn hiển thị chữ nhỏ mà không quan tâm đến kích cỡ của chữ, bạn có thể dùng cặp thẻ . Cặp thẻ sẽ cho phép bạn định dạng phông chữ với thuộc tính face, màu chữ với thuộc tính color, cỡ chữ với thuộc tính size. Trong đó, giá trị chỉ định cho thuộc tính face là các tên phông. Giá trị của thuộc tính color là mã màu ở hệ thập lục phân hoặc các từ khóa tên màu bằng tiếng Anh như: red (màu đỏ), blue (màu xanh da trời), green (màu xanh lá), white (màu trắng), . Giá trị của thuộc tính size là tăng dần từ 1 đến 7. Nếu nội dung được đặt trong cặp thẻ thì sẽ được giữ nguyên định dạng như lúc soạn thảo. Điều này có nghĩa các phím enter hay khoảng trắng sẽ được hiểu như đúng ý nghĩa của nó khi dùng trong thẻ . Trường hợp bạn muốn viết chỉ số trên, ví dụ như x2; hoặc chỉ số dưới, ví dụ như H2. Trong trường hợp này bạn dùng cặp thẻ đối với chỉ số trên và cặp thẻ cho chỉ số dưới. Sau đây là một ví dụ tổng hợp kiến thức về các thẻ định dạng chữ. 13
2.2.5. Thẻ Nội dung đặt giữa cặp thẻ và sẽ chuyển động như kiểu quảng cáo trên các bảng điện tử. Các thuộc tính trong thẻ gồm: Bgcolor=“color”: tô màu nền cho vùng hiển thị lệnh marquee. Direction=“left/right/up/down”: chỉ định hướng chuyển động cho chữ. Mặc định chữ sẽ chạy sang trái (direction= “left”) Behavior=“scroll/slide/alternate”: thiết lập kiểu chạy chữ. Scroll: di chuyển tuần tự, đây là dạng mặc định. Slide: di chuyển cho đến khi gặp biên thì dừng lại. Alternate: di chuyển gặp biên thì đổi hướng. Title=“nội dung”: một đoạn nội dung sẽ được hiển thị khi người dùng di chuyển chuột vào vùng được định dạng marquee. Scrollmount=“số”: điều chỉnh tốc độ chạy, số càng lớn tốc độ chạy càng nhanh. Scrolldelay=“số”: chỉ định thời gian chờ sau mỗi lần cuộn, số càng lớn tốc độ càng chậm. Tính bằng đơn vị là giây. Loop=“số”: chỉ định số lần lặp lại của dòng marquee. Mặc định Loop=“-1”, tức là lặp đến khi nào bạn tắt trang Web đó. Width=“số”: chỉ định độ rộng của vùng chữ chạy. Có thể dùng đơn vị pixel hoặc phần trăm. Height=“số”: chỉ định chiều cao của vùng chữ chạy. Có thể dùng đơn vị pixel hoặc phần trăm 15
2.3. Thẻ định dạng danh sách Cũng như một chương trình soạn thảo văn bản bình thường, Web cũng có khả năng hiển thị văn bản dạng danh sách. Ngôn ngữ HTML hỗ trợ cả hai loại danh sách không thứ tự và có thứ tự. 2.3.1. Danh sách không thứ tự Đối với dạng danh sách không thứ tự, HTML hỗ trợ các dạng như circle , disc , square Cú pháp: 16
Thông thường, người ta sẽ kết hợp các danh sách lại với nhau để được một menu phân cấp như trong Ví dụ 1-2-6. Cấu trúc menu phân cấp cần xác định mở và đóng đúng thẻ, đúng vị trí. Trong chương sau, chúng ta sẽ tiếp tục dùng CSS để hỗ trợ tạo menu động dạng DropDown và FlyOut dựa trên thẻ danh sách không thứ tự này Một danh sách được xác định là con của một phần tử trong danh sách khác khi và chỉ khi cặp thẻ khai báo của danh sách con phải được nằm trọn trong cặp thẻ của phần tử trong danh sách khác đóng vai trò là cha. 17
2.3.2. Danh sách có thứ tự Đối với dạng danh sách không thứ tự, HTML hỗ trợ các dạng như số (1, 2, 3, ), ký tự chữ thường (a, b, c, ), ký tự chữ hoa (A, B, C, ), số La Mã thường (i, ii, iii, ), số La Mã hoa (I, II, III, ). Khi muốn danh sách bắt đầu từ thứ tự lớn hơn thứ tự đầu tiên thì bạn nhập vào một số tự nhiên thể hiện thứ tự bắt đầu xuất hiện. Trường hợp không gọi thuộc tính start thì mặc định start=“1” 18
Trong Ví dụ 1-2-7, phần tử đầu tiên trong danh sách cha có số thứ tự là 3 (tức là III trong danh sách dạng I); còn danh sách con của phần tử HTML lại bắt đầu từ thứ tự thứ 2 (tức là ký tự b trong danh sách dạng a); cuối cùng là danh sách con của phần tử CSS do không chỉ định thứ tự bắt đầu nên sẽ có thứ tự bắt đầu mặc định là 1 (tức là số 1 trong sanh sách dạng 1). 19
2.4. Thẻ chèn hình ảnh, âm thanh Hình ảnh trên Web được phân làm hai dạng. Dạng thứ nhất là hình ảnh làm nền, tức là chúng ta có thể viết chữ lên hình. Ở dạng này, chúng ta có thể chèn hình trong thuộc tính background của một số thẻ hỗ trợ ảnh nền như , , , . Dạng thứ hai, hình ảnh được xem như một đối tượng trên Web, nó chiếm một vị trí trên Web như một nội dung của trang. Trong trường hợp này, chúng ta dùng thẻ , đây là một thẻ HTML đơn với cú pháp như sau: Trong đó: URL: là đường dẫn đến tập tin hình ảnh cần đưa lên Web. Left/right/top/middle/bottom: canh lề cho ảnh; absbottom/absmiddle/texttop: canh lề cho văn bản xung quanh hình Chuỗi trong title sẽ hiển thị khi đưa con trỏ chuột vào hình. 20
Số/phần trăm trong width và height chỉ định độ lớn của ảnh tương ứng theo chiều rộng và chiều cao. Nếu bỏ qua hai thuộc tính này, trình duyệt sẽ hiển thị hình ảnh với kích thước thật của ảnh. Chuỗi trong alt sẽ được hiển thị thay cho hình khi hình không được hỗ trợ hiển thị lên Web. Nếu muốn hình ảnh có đường viền, bạn nhập n là một số nguyên dương. Mặc định n là 0, nghĩa là ảnh không có đường viền. Thẻ chèn được các tập tin ảnh dạng *.jpg, *.jpeg, *.gif, *.png. Trong ví dụ 1-2-8, lần chèn ảnh thứ 3, ảnh có phần mở rộng là .tif không được hỗ trợ hiển thị nên dòng chữ trong thuộc tính alt sẽ được hiển thị thay thế ảnh được gọi trong src. Trong trường hợp bạn gọi một hình ảnh không được hỗ trợ hiển thị bởi trình duyệt, nhưng không sử dụng thuộc tính alt thì tại vị trí gọi hình, sẽ hiển thị dạng file bị lỗi: 21
Âm thanh trên Web cũng được phân làm hai loại: âm thanh nền cho Web và âm thanh được mở trên Web như một trình hát nhạc. Đối với âm thanh nền hay còn gọi là nhạc nền, khi trang Web vừa được tải lên sẽ xuất hiện âm thanh chạy ngầm bên trong. Bạn cần khai báo thẻ này trong phần của trang Web với tên thẻ là , đây là một thẻ đơn. Tuy nhiên không phải trình duyệt nào cũng hỗ trợ loại thẻ HTML này Trong đó: URL là đường dẫn đến tập tin làm âm thanh nền cho Web, file âm thanh có đuôi: *.mepg, *.avi, *.mov, *.au, *.mid, *.mp3. n là số lần lặp lại của file âm thanh, n = -1 nếu muốn lặp lại vô tận. Trường hợp bạn muốn mở tập tin âm thanh trên Web với một trình hát nhạc, bạn có thể sử dụng cặp thẻ . Trong đó: URL là đường dẫn đến tập tin âm thanh. 22
Autostart: tùy chỉnh chế độ phát tự động (true) hay chờ nhấn nút play (false). Loop: thiết lập chế độ tự động phát lại (true) hay không phát lại (false). Hidden: cho phép ẩn chương trình hát nhạc (true) hay hiển thị trình hát nhạc trên Web (false), mặc định hidden = “false”. Đối với một số trình duyệt không hỗ trợ thẻ bạn có thể cho phát nhạc nền bằng cách cho chế độ hidden = “true”. Width và height là hai thuộc tính chỉ định độ rộng và chiều cao của chương trình hát nhạc trên Web. Ngoài ra, nếu bạn muốn chèn các tập tin flash hoặc phim ảnh lên Web, thẻ vẫn có thể thực hiện tốt. Tuy nhiên, do các tập tin này có những thông số đặc biệt và tùy theo ý định hiển thị, bạn cần kết hợp thêm cặp thẻ để được hỗ trợ thêm nhiều thuộc tính hiển thị hơn. Trình duyệt Internet Explorer hỗ trợ tốt cả và . Mozilla Firefox chỉ hỗ trợ 23
3. Siêu liên kết và khung 3.1. Siêu liên kết – Hyperlink Siêu liên kết – Hyperlink – là mối liên kết giữa hai phần tử thông tin trong một siêu văn bản. Có 3 loại siêu liên kết: Liên kết trong (Internal link): liên kết các phần tử thông tin trong cùng một tài liệu. Liên kết ngoài (External link): liên kết đến một tài liệu khác, tài liệu được liên kết tới có thể nằm trong cùng một Website hoặc liên kết ra Website khác. Liên kết có thể thực thi được (Executable): liên kết gọi thực thi một chương trình hoặc một đoạn mã lệnh. Liên kết này cho phép truy xuất đến cơ sở dữ liệu. 3.1.1. Liên kết trong Đôi khi nội dung trang Web quá dài, chiếm nhiều trang màn hình, nhưng các phần nội dung lại có mối liên hệ chặt chẽ. Khi đó ta cần đặt các liên kết để khi cần người dùng có thể click chọn phần nội dung họ quan tâm mà không cần phải kéo thanh trượt để tìm kiếm đoạn đó. Để thực hiện điều này, trước tiên cần định nghĩa vị trí đích – nơi sẽ được liên kết đến, ta sử dụng thẻ theo cú pháp Khi đã có các vị trí đích, bạn chỉ cần tạo liên kết để người dùng click vào theo cú pháp: Để hiểu rõ hơn về cách hoạt động của liên kết trong, mời các bạn tham khảo ví dụ bên dưới 24
3.1.2. Liên kết ngoài Đối với liên kết ngoài, chúng ta chỉ dùng một cú pháp duy nhất là: Trong đó: 26
URL có thể là địa chỉ tương đối hoặc tuyệt đối, có thể là đường dẫn đến một tập tin HTML khác trong cùng một Website hay địa chỉ của một Website khác. Target là thuộc tính quy định cách mở liên kết. Mặc định là mở trên chính trang hiện hành _parent / _seft. Nếu bạn muốn hiển thị nội dung sắp được liên kết đến trong một khung nào đó (định nghĩa khung sẽ được nói rõ ở phần sau) thì hãy đặt target chính bằng tên khung. 27
3.2. Khung – frame 3.2.1. Thẻ . Trong trường hợp dùng khung, cặp thẻ sẽ được thay bằng cặp thẻ . Khung là một lựa chọn đơn giản để có được một giao diện Website thống nhất và ổn định. Tuy nhiên, do mỗi khung sẽ có thanh trượt riêng khi nội dung không đủ hiển thị trong khung, nên đôi khi sử dụng khung để làm giao diện chính cho trang đôi khi gây ra sự rườm rà, mất thẩm mỹ 28
Có hai cách chia khung chuẩn: chia theo chiều ngang của trang Web chính, hoặc chia theo chiều dọc của trang Web chính. Từ hai kiểu chia này, người ta có thể kết hợp lại để có được giao diện phức tạp hơn. Cách chia khung theo chiều ngang có cú pháp như sau: Trong đó: Trang gồm có bao nhiêu khung sẽ do bạn chỉ định trong thuộc tính rows của , với chiều cao của mỗi khung được xác định bằng số pixel hoặc bằng phần trăm. Tên khung được xác định trong thuộc tính name, tên khung là một thuộc tính quan trọng để có thể chỉ định liên kết ngoài từ trang này xuất hiện nội dung tương ứng ở khung kia Mỗi khung được định nghĩa bằng một nằm trong cặp thẻ . Tại vị trí gọi , bạn muốn hiển thị tập tin nào thì gọi đường dẫn đến file đó trong thuộc tính src. Tương tự, cách chia khung theo chiều dọc có cú pháp như sau: Trong đó: 29
Trang gồm có bao nhiêu khung sẽ do bạn chỉ định trong thuộc tính cols của , với chiều rộng của mỗi khung được xác định bằng số pixel hoặc bằng phần trăm. Tên khung được xác định trong thuộc tính name, tên khung là một thuộc tính quan trọng để có thể chỉ định liên kết ngoài từ trang này xuất hiện nội dung tương ứng ở khung kia. Mỗi khung được định nghĩa bằng một nằm trong cặp thẻ . Tại vị trí gọi , bạn muốn hiển thị tập tin nào thì gọi đường dẫn đến tập tin đó trong thuộc tính src. Giả sử, để tạo được giao diện chính cho Website như hình bên dưới: Chúng ta cần tạo các trang riêng rẽ như sau: trang banner, trang chứa các liên kết và các trang nội dung chính, sau đó đưa các trang này vào các khung của trang giaodienFrameset1.html. 30
đây là một frameset dạng tổng hợp. Frameset lớn có 2 dòng. Trong đó, dòng 1 chứa trang frameset1_banner.html; dòng 2 là một frameset nhỏ có dạng cột gồm cột bên trái chứa trang frameset1_menu.html và cột lớn bên phải đang chứa trang frameset1_nd2.html. Bạn cần phải biết rằng trên trang giao diện chính này, nếu người dùng click vào liên kết nào trong menu bên trái thì đều hiển thị trang nội dung tương ứng ở khung thứ 2 của frameset nhỏ. Để làm được điều đó, chúng ta cần xác định tên của khung chứa nội dung, giả sử ta đặt name=“body” cho khung này. Sau đó thêm thuộc tính target=“body” cho các thẻ trong trang frameset1_menu.html để cùng hiển thị nội dung trong khung có tên là body. Thẻ Phần tử được sử dụng để chỉ nội dung thay thế cho frame khi trình duyệt không hỗ trợ frame. Cú pháp: 32
Thẻ Nếu muốn hiển thị văn bản chung với khung chứa nội dung của trang khác thì phải tạo một khung bên trong trang bằng thẻ , khi trình duỵêt không hỗ trợ thì nội dung trong IFRAME sẽ bị trả lại. Tại vị trí muốn chèn frame, nhập vào cú pháp: Trong đó: URL là đường dẫn đến trang muốn chèn nội dung vào trang hiện hành. Bạn cần chỉ định chiều rộng và chiều cao của khung iframe trên giao diện Web. Có thể canh lề cho khung bằng thuộc tính align. 33
4. Bảng biểu trên Web 4. 1. Tạo bảng 34
Khi bạn muốn thiết kế bảng dữ liệu trên trang Wrb, bạn cần phải khai báo thẻ . Sau khi khai báo thẻ này, bạn phải khai báo các thẻ dòng và thẻ cột hoặc . Trong đó, sẽ xác định nội dung bên trong nó là tiêu đề, tức là nội dung mặc định được in đậm và canh giữa. Cấu trúc gọi bảng: 4.2. Các thuộc tính định dạng bảng Khi thiết lập một bảng biểu trên Web, bạn cần chú ý đến các thuộc tính sau đây: Thuộc tính Ý nghĩa Khởi tạo bảng với đường viền (mặc định là không có đường viền, border border= “0”). cellpadding Khoảng cách từ nội dung trong ô đến đường viền. cellspacing Khoảng cách giữa các ô trong bảng. align Canh lề cho bảng (center, left, right). width Xác định chiều rộng cho toàn bảng. Xác định chiều cao cho bảng. Ttuy nhiên khi thiết kế bảng, bạn chỉ height cần quan tâm đến chiều rộng chứ không quan tâm đến chiều cao, bởi vì chiều cao của bảng phụ thuộc vào dữ liệu bạn có. background Chèn ảnh nền cho bảng. bgcolor Tô màu nền cho bảng. Tô màu đường viền cho bảng. Lưu ý một số trình duyệt không hỗ trợ bordercolor hiển thị màu viền. id id nhận dạng dùng để phân biệt các bảng dữ liệu trên cùng một trang 35
4.2.1. Thuộc tính trong thẻ dòng Sau đây là một số thuộc tính thường dùng cho dòng: Thuộc tính Ý nghĩa Canh lề dữ liệu theo hướng ngang (align=”left/center/ align justify/right”). valign Canh lề dữ liệu theo hướng đứng (valign=”top/middle/bottom”). Xác định chiều cao dòng. Lưu ý, đối với dòng chúng ta không height quan tâm đến chiều rộng bởi vì chiều rộng của dòng phụ thuộc vào chiều ộng của bả Tô màu nền cho dòng. Lưu ý, trong dòng chỉ có thể tô màu nền bgcolor chứ không thể gọi ảnh nền cho dòng. Tô màu đường viền dòng. Lưu ý một số trình duyệt không hỗ trợ bordercolor hiển thị màu viền. id id nhận dạng để phân biệt giữa các dòng trong bảng 4.2.2. Thuộc tính trong các thẻ ô / cột , Sau đây là một số thuộc tính thường dùng cho ô / cột: Thuộc tính Ý nghĩa Canh lề dữ liệu trong ô theo hướng ngang (align=”left/center/ Align justify/right”). Canh lề dữ liệu trong ô theo hướng đứng valign (valign=”top/middle/bottom”). background Gọi ảnh nền cho ô. bgcolor Tô màu nền cho ô Tô màu đường viền cho ô. Lưu ý một số trình duyệt không bordercolor hỗ trợ hiển thị màu viền. Gôm cột. Ta có colspan= “n” với n là số cột muốn thành một colspan ô. Gôm hàng. Ta có rowspan= “n” với n là số dòng muốn thành rowspan một ô. id id nhận dạng để phân biệt giữa các ô. width Xác định chiều rộng của ô. Xác định chiều cao của ô. Tuy nhiên, đối với ô / cột thì ta height thường ít quan tâm đến chiều cao vì chiều cao của ô / cột chính bằng chiều cao của dòng. 36
4.3. Thiết kế giao diện Web bằng Ngoài được dùng để chứa thông tin trên bảng biểu. Thẻ còn được vận dụng nhiều trong thiết kế giao diện. Khi giao diện trang có cấu trúc phức tạp, bạn thực hiện khai báo các thẻ lồng nhau. Ví dụ 1-4-2 Banner 38
Menu chính Nội dung trang Web Đăng nhập Tên đăng nhập Mật khẩu Dòng footer 39
5. Form và các controls 5.1. Ý nghĩa của form trong trang Web và cách khởi tạo Web không chỉ dừng lại ở việc hiển thị thông tin mà nó còn có thể cho phép người dùng tương tác trên nó. Ví dụ: người dùng có thể nhập thông tin lên biểu mẫu và gửi về máy chủ xử lý. Trong khuôn khổ của việc thiết kế Web tĩnh, chúng tôi xin giới thiệu thẻ là một thẻ HTML cung cấp các biểu mẫu nhập liệu và các thành phần bên trong nó. Cấu trúc chung: Trong đó: Name: dùng để đặt tên cho form. Nếu form không được đặt tên, sẽ không thể can thiệp vào form bằng JavaScript để kiểm tra dữ liệu nhập có hợp lệ hay không. Method: xác định phương thức gửi dữ liệu về máy chủ. Nếu phương thức là POST, các thông tin nhập liệu của người dùng sẽ không hiển thị trên thanh địa chỉ của trình duyệt. Ngược lại, nếu phương thức gửi là GET thì các thông tin mà người dùng gửi đi sẽ được nhìn thấy trên thanh địa chỉ của trình duyệt. Mặc định phương 40
thức truyền dữ liệu là GET. Do đó, vì vấn đề bảo mật, nếu trường hợp biểu mẫu nhập liệu có những thông tin cá nhân, nhưng thông tin cần được giữ bí mật như mật khẩu, mã PIN, thì phải dùng phương thức POST. Action: trong thuộc tính này có thể là địa chỉ của trang sẽ nhận thông tin người dùng nhập để xử lý khi được gửi về máy chủ, hoặc cũng có thể để rỗng nếu bạn muốn thông tin khi gửi về máy chủ sẽ được xử lý tại chính trang biểu mẫu này. Lưu ý: Nếu khai báo các thành phần điều khiển bên ngoài thẻ hoặc bỏ qua việc khai báo thì các thông tin mà người dùng nhập sẽ không thể gửi về Web Server. Điều này có nghĩa là các thông tin người dùng nhập sẽ không được xử lý 5.2. Các thành phần trong form 5.2.1. Thẻ Đây là một thẻ đơn và tùy theo giá trị gọi trong thuộc tính type của thẻ này mà có thể tạo ra nhiều dạng khác nhau: Text Field là một dạng khung nhập liệu chỉ cho phép người dùng nhập vào một dòng ngắn (type= “text”) . . Nếu muốn xác định chiều dài tối đa của chuỗi nhập bạn dùng thuộc tính maxlength. Nếu muốn tùy chỉnh kích thước của khung nhập liệu trên Web, bạn dùng thuộc tính size. Nếu muốn truyền một giá trị mặc định khi tải trang Web lên sẽ xuất hiện ngay giá trị này, bạn có thể sử dụng thuộc tính value. Nếu bạn muốn các giá trị trong Text Field ở dạng chỉ cho phép đọc, bạn gọi thuộc tính readonly. Bạn cũng có thể đặt một id nhận dạng cho Text Field. Tuy nhiên, để bớt rườm rà và không mất nhiều thời gian, người ta thường quan trọng thuộc tính name hơn. Bạn chỉ cần đặt tên của các thành phần của form khác tên nhau thì không cần dùng đến id nữa. Cú pháp: <input type=“text” name=“ten_the” maxlength=“n” size=“m” value= “giá trị mặc định” readonly= “readonly” id=“id_nhan_dang Password Field cũng là một dạng khung nhập liệu chỉ cho phép người dùng nhập vào một dòng ngắn nhưng đặc biệt hơn Text Field ở chỗ nó chuyển các ký tự mà người 41
dùng nhập sang dạng dấu *. . Password Field được dùng cho trường hợp nhập các dữ liệu mật. Các thuộc tính trong nó tương tự như trong Text Field. Cú pháp: Radio Button là một dạng cho phép chọn duy nhất 1 trong nhiều lựa chọn, dấu lựa chọn của Radio Button có dạng tròn . Nếu muốn một lựa chọn nào đó được chọn mặc định, bạn dùng thuộc tính checked. Bên trong thuộc tính value là giá trị tương ứng sẽ được gửi đi khi người dùng chọn một lựa chọn. Chú ý rằng nếu các lựa chọn mà bạn trình bày thuộc cùng một nhóm lựa chọn, bạn phải đặt các lựa chọn này cùng tên để có thể chọn duy nhất 1 lựa chọn Cú pháp: Checkbox là dạng cho phép chọn nhiều hơn 1 lựa chọn, dấu lựa chọn của Checkbox có dạng vuông . Các thuộc tính bên trong Checkbox cũng tương tự như các thuộc tính của Radio Button. Chú ý rằng nếu các lựa chọn mà bạn trình bày thuộc cùng một nhóm lựa chọn, bạn cũng phải đặt các lựa chọn này cùng tên. Cú pháp: Hidden Text Field là một dạng cho phép văn bản ẩn. Điều này có nghĩa là người thiết kế Web muốn truyền ngầm một nội dung nào đó mà người dùng không cần biết có sự tồn tại của nội dung đó. Các thuộc tính bên trong thẻ này hoàn toàn giống các thuộc tính của Text Field. Tuy nhiên, do đây là một dạng thẻ ẩn nội dung nên người ta không quan tâm nhiều đến các thuộc tính định dạng mà chỉ quan tâm đến các thuộc tính type và name. Cú pháp 42
File Field là một khung cho phép chọn một hình ảnh từ máy người dùng để tải lên Web . Để sử dụng được loại thẻ này, bạn cần thêm thuộc tính enctype=“multipart/form-data” vào phần khai báo thẻ vả để truyền được một tập tin từ máy người dùng lên máy chủ, bạn còn cần dùng thêm dạng Hidden Text Field để truyền ngầm dung lượng của tập tin Cú pháp: Submit Button là một dạng nút nhấn, thường có trên form với vai trò đánh dấu kết thúc việc nhập liệu và tiến hành gửi dữ liệu về máy chủ. Cú pháp: Reset Button là nút có chức năng hủy bỏ các dữ liệu mà người dùng vừa nhập vào form. Cú pháp: Button là một dạng nút thường . Nút này sẽ thực hiện chức năng khác nhau tùy thuộc vào ý định của người thiết kế. Thông thường, nút này được dùng để gọi thực thi một lệnh / hàm trong JavaScript thông qua các thuộc tính sự kiện như onClick/onChange/onBlur/ Chúng tôi sẽ nói rõ hơn về các thuộc tính sự kiện này ở chương JavaScript. Cú pháp: 5.2.2. Thẻ Khắc phục hạn chế của Text Field, cho phép nhập nội dung trên nhiều dòng. Ví dụ: Bạn phải xác định độ lớn của khung Textarea bằng hai thuộc tình số dòng (rows) và số cột (cols). Nếu muốn hiển thị lên khung Textarea chuỗi văn bản mặc định, bạn 43
nhập chuỗi giữa cặp thẻ . Nếu muốn chuỗi này chỉ được phép đọc, người dùng không thể chỉnh sửa thì bạn thêm thuộc tính readonly như trong Text Field. Cú pháp: 5.2.3. Thẻ Đây là một dạng lựa chọn dưới hình thức danh sách lựa chọn. Nếu bạn muốn người dùng chỉ chọn được 1 lựa chọn tại một thời điểm thì đó chính là Combobox. Ví dụ: Nếu bạn muốn người dùng chọn được nhiều lựa chọn trong danh sách tại cùng một thời điểm thì đó chính là Listbox. Trường hợp là Listbox, bạn thêm thuộc tính multiple vào trong thẻ . Ví dụ: Mỗi một phần tử trong danh sách được định nghĩa trong cặp thẻ . Để trình duyệt cũng như Web Server hiểu được các phần tử này khác nhau như thế nào, bạn cần chỉ định giá trị của mỗi phần tử trong thuộc tính value của thẻ . Nếu bạn muốn chỉ định phần tử được chọn mặc định, dùng thuộc tính selected =“selected”. Trong Combobox, phần tử được chọn mặc định sẽ là phần tử duy nhất được nhìn thấy khi form được tải lên do bản thân Combobox là dạng ẩn các phần tử khi chưa được tương tác. Trong Listbox, các phần tử được chọn mặc định sẽ được tô màu nền. Cú pháp Combobox: Tiêu đề phần tử 1 Tiêu đề phần tử 2 Tiêu đề phần tử n Cú pháp Listbox: 44
Tiêu đề phần tử 1 Tiêu đề phần tử 2 Tiêu đề phần tử n 5.2.4. Thẻ Đây là thẻ dùng để nhóm các thành phần nhập liệu. Cặp thẻ này chỉ có tác dụng trang trí cho form Khi xác định các thành phần nhập liệu thuộc cùng một nhóm, bạn gọi các thành phần đó bên trong cặp thẻ Cú pháp: Tiêu đề nhóm Tổng hợp các thành phần trong form Ví dụ 1-5-1 ĐĂNG KÝ THÀNH VIÊN Họ tên của bạn: Mã số sinh viên: Mật khẩu: <input type="password" name="pswMKhau" size="15" 45
maxlength="10" /> Quê quán: Cần Thơ Đồng Tháp Trà Vinh Vĩnh Long Những môn đã tích lũy trên 8.5: Thiết kế Web Cơ sở dữ liệu PT&TK HTTT Đồ họa ứng dụng Giới tính Nam Nữ Sở thích: Xem phim, ca nhạc Đọc báo Lướt Web - Diễn đàn sẽ không chấp nhận việc lợi dụng diễn đàn làm nơi trao đổi các thông tin phản động hay các văn hóa phẩm đồi trị. - Nếu Ban quản trị phát hiện tài khoản của bạn có các hoạt động khả nghi, chúng tôi có quyền xóa tài khoản của bạn mà không cần báo trước. 46
Bài 2. Công cụ hỗ trợ thiết kế web 1. Ý nghĩa và một số công cụ hỗ trợ thiết kế Web Như đã biết, chúng ta có thể soạn thảo một trang HTML bằng nhiều chương trình từ cơ bản như Notepad, Wordpad, Microsoft Office Word cho đến các chương trình soạn thảo Web chuyên nghiệp như Microsoft FrontPage, Macromedia Dreamweaver, Adobe Dreamweaver, Tuy nhiên, thay vì phải gõ từng từ khóa, nhớ chính xác từng thuộc tính của thẻ khi soạn thảo bằng các chương trình soạn thảo cơ bản, những nhà phát triển Web thường chọn cho mình một chương trình hỗ trợ soạn thảo Web chuyên nghiệp để không mất quá nhiều thời gian và công sức cho việc viết mã lệnh. Trong quyển tài liệu tham khảo này, nhóm biên soạn chúng tôi xin giới thiệu đến các bạn công cụ hỗ trợ soạn thảo thiết kế Web của có tên Dreamweaver. Hiện tại phần mềm này được sản xuất bởi Macromedia và Adobe. Đây là một công cụ rất mạnh, hỗ trợ thiết kế Web phổ biến hiện nay. Chương trình này hỗ trợ soạn thảo rất nhiều kiểu file như: HTML, CSS, JavaScript, PHP, XML, ASP.NET C#, ASP.NET VB, Bên cạnh đó nó còn hỗ trợ nhiều bảng kiểu (giao diện – Layout) có sẵn. Biểu tượng của chương trình: Trong quá trình khởi động, chương trình sẽ cho phép bạn chọn chế độ soạn thảo dạng thiết kế với chuột (Design) hay với mã lệnh (Code). Bạn có thể chọn ngôn ngữ mà mình sẽ soạn thảo khi chọn File New 48
2. Một số chức năng hỗ trợ đáng chú ý Dreamweaver hỗ trợ ba dạng cửa sổ làm việc: Code, Slipt và Design. 49
Với cửa sổ Code, Dreamweaver sẽ hiển thị gợi ý khi bạn gõ dấu mở thẻ. Chế độ Slipt sẽ chia cửa sổ làm việc thành hai phần, bạn có thể vừa soạn thảo code vừa xem kết quả thiết kế. 50
Chế độ Design, ngoài việc gõ nội dung trang Web, bạn không cần nhớ mã HTML. Thay vào đó bạn phải biết cách gọi các thẻ bằng cách chọn lệnh tương ứng từ menu. Sau đây, chúng ta sẽ tìm hiểu một số thanh công cụ của Dreamweaver 51
Thanh Common, chứa các đối tượng thường được sử dụng phổ biến nhất như các liên kết với ảnh. Thanh Layout, giúp bạn mô tả cách bạn muốn trình bày trang: table, div, frame. Thanh Form, gồm các thành phần Form như trường Text, nút lệnh và hộp chọn, Thanh Text, hỗ trợ định dạng văn bản bằng nút lệnh. Thanh Application, giúp cho bạn làm việc với các cơ sở dữ liệu bên ngoài Để soạn thảo và hiển thị đúng tiếng Việt, bạn vào Modify Page Properties Title/Encoding và chọn trong Unicode (UTF-8) trong mục Encoding. Sau đó Apply và OK để thiết lập của bạn có hiệu lực ngay 52
3. Xuất bản kết quả Khi muốn kiểm tra kết quả thiết kế của mình trên trình duyệt, bạn chỉ cần lưu tập tin lại lần cuối trước khi Test. Sau đó từ cửa sổ soạn thảo, bạn chọn vào biểu tượng Preview bằng trình duyệt (có hình quả địa cầu) và chọn trình duyệt kiểm thử. 53
Bài 3. Bảng Mẫu Nạp Chồng – Css 1. Khái niệm CSS - Cascading Style Sheet – Bảng mẫu nạp chồng quy định cách trình bày cho các tài liệu HTML, XHTML, XML, Ở đây xin nói cụ thể về ngôn ngữ mà chúng ta vừa tìm hiểu qua, HTML. Như bạn đã biết, HTML cũng đã hỗ trợ khá nhiều thẻ và các thuộc tính bên trong để định dạng cho các đối tượng như văn bản, hình ảnh, bảng biểu, Tuy nhiên, chắc hẳn bạn cũng nhận thấy một điều rằng đôi khi để có được một định dạng cơ bản trên Web, chúng ta cũng đã phải kết hợp rất nhiều thẻ HTML để đạt được ý định hiển thị. Đó là chưa kể đến quá trình dịch trang Web sẽ bị chậm đi khi sử dụng quá nhiều mã. Đó cũng chưa kể đến việc mã nguồn phức tạp, rắc rối nếu bạn không có một kỹ thuật lập trình tốt thì rất khó để chỉnh sửa, cập nhật lại trang khi có thay đổi. Đó cũng chưa tính đến chuyện tốn hao nhiều thời gian để thiết kế, nếu bạn có một Website với nội dung lớn, có khá nhiều trang, rất có thể những mã thẻ mà bạn gọi sẽ khác nhau ở các trang. Vì vậy sẽ dẫn đến sự thiếu đồng và thống nhất về định dạng cho toàn thể giao diện của một Website. Trong khi đó CSS sẽ hỗ trợ bạn khắc phục các nhược điểm vừa nêu. Do CSS là một dạng mẫu được quy định sẵn và được nạp vào bộ nhớ của trình duyệt nên ở những lần truy cập lại sẽ giảm được thời gian nạp và dịch lại định dạng. Từ một bảng mẫu mà bạn thiết kế có thể áp dụng cho nhiều trang thậm chí cho các Website khác nhau. Đây là một ưu thế rõ rệt của CSS vì bạn không cần mất thời gian để thực hiện lại các thao tác định dạng giống nhau. Bên cạnh đó, hiện nay đa số các trình duyệt hiện đại đều có hỗ trợ hiển thị CSS. Điều duy nhất khiến người thiết kế Web lo lắng đó là để vận dụng tốt CSS vào thiết kế Web thì họ cần phải tốn khá nhiều thời gian trong việc nhớ, học hỏi và tích lũy các kiến thức về CSS. CSS được vận dụng linh hoạt trong trang HTML với 2 kiểu viết áp dụng cho 3 loại CSS: Kiểu viết 1: Selector { property1: value1; propertyN: valueN; 54
} Trong đó: Selector – bộ chọn, có thể là tên thẻ HTML, có thể là id của thẻ HTML hoặc một lớp được định dạng chung một số thẻ HTML, cũng có thể là một nhóm thẻ HTML lồng nhau. Property là các thuộc tính của CSS, với value là giá trị của thuộc tính đó. Các thuộc tính trong CSS cách nhau bằng dấu chấm phẩy (;) Kiểu viết 2: Với kiểu 2, CSS được gọi trực tiếp trong một thẻ HTML nào đó thông qua thuộc tính style. Thay vì phải sử dụng quá nhiều thẻ HTML để định dạng cho một nội dung thì bạn chỉ cần gọi CSS là đủ, trong CSS có hỗ trợ hầu hết các định dạng cho một thẻ HTML bất kỳ. Để đánh dấu ghi chú trong CSS, ta dùng: /* nội dung ghi chú */ 2. Phân loại CSS được phân thảnh 3 loại: Bảng kiểu trực tiếp (Inline style sheet), Bảng kiểu được nhúng vào trong tài liệu HTML (Internal style sheet), Bảng kiểu bên ngoài (External style sheet). Những loại này có thể được sử dụng đồng thời, với thứ tự ưu tiên giảm dần như sau: 1. Inline style sheet, 2. Internal style sheet, 3. External style sheet, 4. Browser default. Điều này có nghĩa là nếu trong cùng một thẻ HTML cùng được quy định một thuộc tình nào đó bằng Inline style sheet và Internal style sheet thì thuộc tính sẽ được lấy để hiển thị chính là thuộc tính được quy định trong Inline style sheet. Còn trường hợp cùng một thẻ HTML được quy định nhiều thuộc tính bằng các loại CSS khác nhau thì để hiển thị định dạng của thẻ HTML đó, trình duyệt sẽ tổng hợp tất cả các định dạng đó lại để hiển thị, trường hợp các thuộc tính chưa được quy định bởi CSS nào thì trình duyệt sẽ lấy quy định mặc định của mình để hiển thị. 2.1. Inline style sheet Đây là kiểu được gán cho một dòng hoặc một đoạn văn bản, CSS được viết trực tiếp Đây là kiểu được gán cho một dòng hoặc một đoạn văn bản, CSS được viết trực tiếp Cú pháp: 55
Nội dung văn bản muốn nhận định dạng từ thẻ Ví dụ 3-1 CSS - Cascading Style Sheet – Bảng mẫu nạp chồng quy định cách trình bày cho các tài liệu HTML, XHTML, XML, Ở đây xin nói cụ thể về ngôn ngữ mà chúng ta vừa tìm hiểu qua, HTML. Như bạn đã biết, HTML cũng đã hỗ trợ khá nhiều thẻ và các thuộc tính bên trong để định dạng cho các đối tượng như văn bản, hình ảnh, bảng biểu, Đoạn văn bản được canh giữa do thuộc tính của thẻ . Tuy nhiên trong không có các thuộc tính màu chữ, màu nền, đường viền, màu của đường viền. Nếu chỉ dùng các thẻ HTML lồng nhau thì mã nguồn của đoạn này rất rườm rà. Còn trường hợp này ta quy định thêm các thuộc tính mẫu có sẵn của CSS nên mã nguồn đơn giản 56
hơn nhiều và dễ quản lý. Trong trường hợp ta cần định nghĩa cho các thuộc tính có liên quan nhau, như trong ví dụ này bạn thấy chúng tôi dùng border:1px #F90 solid; để định dạng cho độ dày của đường viền (border-width), mà của đường viền (border- color) và kiểu hiển thị đường viền (border-style). Thay vì phải viết: border width:3px; border-color: #060; border-style:solid; CSS cho phép chúng ta gôm gọn định dạng thành: border:1px #F90 solid; Ưu điểm của CSS loại 1: Điều đầu tiên có thể thấy ngay đó là CSS loại 1 có hiệu lực ưu tiên cao nhất nên các thuộc tính gọi bằng CSS loại 1 luôn được ưu tiên hiển thị; điều thứ hai là chúng ta có thể dễ dàng quản lý theo từng thẻ của tài liệu HTML. Về nhược điểm: Rõ ràng CSS loại 1 sẽ gây khó khăn cho các nhà phát triển Web trong việc cập nhật và mất nhiều thời gian khi phải định dạng đi định dạng lại cho cùng một thẻ HTML với cùng những thuộc tính như nhau. 2.2. Internal style sheet Ưu điểm của CSS loại 1: Điều đầu tiên có thể thấy ngay đó là CSS loại 1 có hiệu lực ưu tiên cao nhất nên các thuộc tính gọi bằng CSS loại 1 luôn được ưu tiên hiển thị; điều thứ hai là chúng ta có thể dễ dàng quản lý theo từng thẻ của tài liệu HTML. Về nhược điểm: Rõ ràng CSS loại 1 sẽ gây khó khăn cho các nhà phát triển Web trong việc cập nhật và mất nhiều thời gian khi phải định dạng đi định dạng lại cho cùng một thẻ HTML với cùng những thuộc tính như nhau. Cú pháp: Selector {property1:value1; property2:value 2; ;} (Lặp lại cho mỗi thẻ có thuộc tính cần định dạng) 57
Ví dụ 3-2 H1, H2 { color: limegreen; font-family: Arial; } Đây là thẻ H1 có định dạng bằng css Đây là thẻ H2 có định dạng bằng css Đây là thẻ H3 với kiểu mặc định Ở ví dụ này, do ý định của người thiết kế, các thẻ và có cùng định dạng về màu sắc và phông chữ. Do đó, thay vì phải viết hai dòng thì CSS cho phép ta viết định nghĩa CSS với dạng nhóm, tên các phần tử trong nhóm cách nhau bằng dấu phẩy (,) và sẽ có cùng định dạng như nhau. Mặc khác, do bản thân các thẻ heading đã được quy định độ lớn riêng nên nếu không định nghĩa lại độ lớn cho các thẻ này bằng CSS thì các thẻ heading sẽ được hiển thị với độ lớn mặc định mà trình duyệt hiểu từ thẻ HTML đó. 58
Ưu điểm của CSS loại 2: CSS loại 2 có độ ưu tiên đứng thứ hai, chỉ sau CSS loại 1. Ưu điểm thứ hai là khi sử dụng CSS loại 2 chúng ta sẽ dễ dàng điều khiển kiểu theo từng tài liệu. Một ưu điểm nữa là không yêu cầu có thêm tập tin lưu trữ thông tin kiểu. Nhược điểm: Do được viết trong phần header của trang Web nên khi muốn có những định dạng CSS tương tự cho trang khác chúng ta cần phải viết lại các định nghĩa đó. 2.3. External style sheet External style sheet là một bảng kiểu được lưu trữ thành một file bên ngoài và được liên kết với trang HTML. Do đó, bạn có thể gọi chúng vào bất kỳ trang HTML nào bạn muốn. Nếu bạn đang sử dụng Dreamweaver, để soạn thảo tập tin CSS, bạn vào File New Basic Page CSS. Chúng ta dùng kiểu viết 1 cho bảng kiểu loại 3 này. Cú pháp: Selector {property1:value1; property2:value 2; ;} Sau đó lưu tập tin lại, tập tin sẽ có phần mở rộng là *.css. Để sử dụng bảng mẫu đã định nghĩa, ta gọi tập tin CSS trong phần của trang với thẻ Cú pháp gọi file: H2 { color:blue; font-style:italic; } P { text-align:justify; text-indent:16pt; font:"Courier New", Courier, monospace;} 59
Ví dụ 3-3 H2 có kiểu gọi từ file .css Đoạn văn được định dạng từ file css gọi từ bên ngoài Dùng lại thẻ H2, các định dạng vẫn tác động lên thẻ H2 này Ưu điểm: CSS loại 3 có thể dùng để đặt kiểu cho nhiều tài liệu trong một style sheet, thông tin style được lưu tạm bởi trình duyệt nên sẽ không tốn quá nhiều thời gian cho các lần truy cập sau. Nhược điểm: Cần thêm thời gian để tải style sheet trong lần truy cập đầu tiên, có thể làm chậm việc hiện trang lên hoặc gây ra hiệu ứng “chớp” nếu style sheet quá 60
nặng. Có thể một số thuộc tính đặt trong CSS loại 3 sẽ không được hiển thị nếu trong tài liệu có dùng CSS loại 1 hoặc 2 để định dạng trước đó. 3. Bộ chọn Một số thuộc tính đặt trong CSS loại 3 sẽ không được hiển thị nếu trong tài liệu có dùng CSS loại 1 hoặc 2 để định dạng trước đó. Selector Mô tả Ví dụ Element chính là phần tử HTML hay thẻ HTML H1 {color: red;} nhưng Element =>Nếu H1 được gọi thì luôn có màu chỉ lấy phần tên thẻ mà đỏ không có dấu mở thẻ. #test {color:green;} Chọn bất kỳ thẻ HTML =>Bất kỳ thẻ nào có id=“test” đều có #id nào có màu thuộc tính id được chỉ định xanh lá Chỉ thẻ HTML được chỉ định H1#test {color:green;} và thẻ đó có id được chỉ => Chỉ những mới có Element#id định định thì mới nhận được định dạng chữ màu xanh lá dạng cùa CSS. Chọn bất kỳ thẻ HTML .note {color: yellow;} nào có => Bất kỳ thẻ nào có class= “note” .class giá trị class được chỉ định đều có để định dạng là màu vàng nhận định dạng CSS Element.cl Chọn thẻ HTML được H1.note {text-decoration: underline;} ass định => Chỉ có những thẻ nào được trước với một giá trị class đặt được class=”note” mới có định dạng là chữ cài đặt CSS mới nhận được 61
được gạch dưới định dạng. h1,h2,h3 {background-color: Áp dụng cùng một định orange;} Grouping dạng => Tất cả các thẻ , , kiểu đối với một nhóm thẻ. đều có nền chữ màu cam p strong {color:purple;} Chọn thẻ con theo đúng => Chỉ khi đúng thứ tự thứ tự nội Contextual chỉ định mới nhận được dung thì nội dung định mới có dạng CSS này định dạng màu tím 4. Các thuộc tính CSS thông dụng trong thiết kế giao diện ĐỊNH DẠNG THUỘC TÍNH CSS Ý NGHĨA Văn bản Color:red; Màu chữ (dùng từ tiếng Anh) Văn bản Color:red; Color:#990000; Màu chữ (dùng mã màu) Background:grey; Màu nền (dùng từ tiếng Anh) Background:#999999; Màu nền (dùng mã màu) Khoảng cách giữa các từ, với n Word-spacing:n; là số pixel mà bạn nhập vào Khoảng cách giữa các ký tự, với Letter-spacing:n; n là số pixel mà bạn nhập vào Text-align: Canh lề văn bản left/right/center/justify; (trái/phải/giữa/đều 2 bên) Chuyển thành dạng chữ: viết Text-transform: capitalize/ hoa đầu mỗi từ / toàn chữ in hoa uppercase/lowercase; / toàn chữ in thường Font-family:Times New Chọn kiểu chữ (font); nếu máy Roman, Times, serif; người dùng không có font được Font: Arial, Helvetica, chỉ định thì trình duyệt sẽ lấy sans-serif; Font:Courier font mặc định cùng họ với font New, Courier, monospace; đã chọn để hiển thị 62
Định cở chữ (rất rất nhỏ / rất Font-size: xx-small / x nhỏ / nhỏ / trung bình / lớn / rất small / small / medium / lớn / rất rất lớn large / x-large / xx-large; Định cở chữ (giá trị cụ thể từ Font-size:12pt 9px đến 36px Font-style: italic Tạo chữ nghiêng Font-weight: bold Tạo chữ đậm Text-decoration: underline; Gạch dưới văn bản List-style: circle; Chấm tròn rỗng List-style: disc; Chấm tròn đen List-style: square; Chấm đen vuông List-style: decimal; Đánh số Ả Rập (1, 2, 3, ) Ký hiệu dầu dòng Thứ tự alpha thường (a, b, c, List-style: lower-alpha; danh sách ) List-style: upper-alpha; Thứ tự alpha hoa (A, B, C, ) List-style: upper-roman; Số La Mã hoa (I, II, III, ) List-style: lower- roman; Số La Mã thường (i, ii, iii, ) List-style-image: url; Dùng hình làm bullet Background-color:mã Màu nền màu/tên màu; Background image:đường dẫn đến ảnh Ảnh nền nền; Background-position: Vị trí đặt ảnh nền: Nền left/ right/center/top/bottom/ trái/phải/giữa/trên/dưới/kế thừa inherit; Background-repeat: Cách lặp ảnh: lặp cho cả trang/ repeat/repeat-x/repeat lặp theo chiều ngang / lặp theo y/no-repeat; chiều đứng / không lặp Background-attachment: Giữ ảnh cuộn /không cuộn theo scroll / fixed; trang của trình duyệt Border-style: Kiểu đường viền Border-collapse: collapse; Đường viền lún Border-bottom-style: Kiểu đường viền phía dưới Định dạng đường Border-left-style: Kiểu đường viền bên trái viền Border-right-style: Kiểu đường viền bên phải Border-top-style: Kiểu đường viền phía trên Border-left-color: Mà đường viền bên trái 63
Text-decoration: none Không gạch dưới Định dạng cho link khi đã được A:visited{color: #rrggbb;} click Định dạng cho link chưa được A:link{color:#rrggbb;} click Định dạng cho những link đang Hypertext link A:active{color:#rrggbb; } xem Định dạng khi trỏ lướt qua link => bạn có thể thay đổi màu, A:hover{color:#rrggbb;} phóng to hoặc thu nhỏ chữ hoặc thêm nhiều hiệu ứng khác nữa. Float (theo như nghĩa tiếng Việt là thả trôi) đây là thuộc tính cố định một thành phần web về bên trái hay bên phải không Định vị Float: left/right/none; gian bao quanh nó. Mặc định là none. Đây là thuộc tính quan trọng để dàn trang trên Web, đặc biệt là định vị cho các Layout dùng Đây là một thuộc tính dịch đối tượng từ bên trái với số pixel Left chỉ định sau dấu hai chấm của thuộc tính left. Đây là một thuộc tính dịch đối tượng từ bên phải với số pixel Right chỉ định sau dấu hai chấm của thuộc tính right. Đây là một thuộc tính dịch đối tượng từ phía trên với số pixel Top chỉ định sau dấu hai chấm của thuộc tính top. Bottom Đây là một thuộc tính dịch đối tượng từ phía dưới với số pixel 64
chỉ định sau dấu hai chấm của thuộc tính bottom. Đây là một thuộc tính định vị tuyệt đối, có nghĩa là các thành phần được định vị không để lại bất cứ một khoảng trống nào trong tài liệu.Thông thường Position: absolute; người ta kết hợp với các thuộc left/right/top/bottom để xác định tọa độ đặt đối tượng. Trong kỹ thuật tạo menu động với CSS, bạn cần cố định menu cha với vị trí tuyệt đối Đây là một thuộc tính định vị tương đối cho một thành phần, là sự định vị được tính từ vị trí gốc trong tài liệu. Các thành phần đã được định vị tương đối sẽ để lại khoảng không trong tài Position: relative; liệu. Trong kỹ thuật tạo menu động với CSS, bạn cần định vị cho menu con là tương đối, tức là định vị được tính từ vị trí của menu cha. Margin Định khoảng cách từ viền của đối tượng đến một đối tượng khác hoặc đế viền trang. Giá trị bên trong margin có thể là 4 giá trị xác định khoảng cách tương ứng theo thứ tự: trên, phải, dưới, trái. Ví dụ: margin: 2px 65
5px 4px 7px; Có nghĩa là từ viền đối tượng cách viền trang hoặc đối tượng khác về hướng trên là 2px, hướng phải là 5px, hướng dưới là 4px và hướng trái là 7px. Giá trị bên trong margin cũng có thể có 2 giá trị. Khi đó khoảng cách sẽ được xác định tương ứng theo cặp: trên và dưới, phải và trái. Ví dụ: margin: 2px 4px; Có nghĩa là từ viền của đối tượng cách đối tượng khác hoặc viền trang theo hướng trên và dưới đều là 2px, theo hướng phải và trái đều là 4px. Cũng có thể giá trị bên trong margin chỉ có 1 giá trị. Khi đó khoảng cách sẽ được xác định theo bộ tứ, tức là khoảng cách về 4 hướng của đối tượng so với đối tượng khác hoặc viền trang đều như nhau. Ví dụ: margin:4px; Có nghĩa là từ viền của đối tượng đến viền trang hoặc đối tượng khác theo hướng trên là 4px, theo hướng phải cũng là 4px, theo hướng dưới cũng là 4px và theo hướng trái cũng là 4px 66
Định khoảng cách từ nội dung đặt trong đối tượng đến viền của Padding đối tượng đó (hay còn gọi là vùng đệm). Các giá trị thuộc tính cũng tương tự như margin. Bài 4. Ngôn Ngữ Javascript 1. Giới thiệu Khi duyệt trang Web, nếu trang Web cho phép người dùng nhập liệu, bạn cần viết một phương thức để kiểm soát dữ liệu nhập có hợp lệ hay không. Để thực hiện điều này, bạn có thể sử dụng một trong hai phương thức: kiểm tra tại trình duyệt của người dùng trước khi gửi dữ liệu về Server (dùng các Client Script như JavaScript, VBScript, ), gửi dữ liệu về máy chủ rồi mới kiểm tra và xử lý dữ liệu (dùng các Server Script như PHP chẳng hạn). Nếu dữ liệu kiểm tra phía Server không hợp lệ, có nghĩa là người dùng dữ liệu không hợp lệ bạn cũng đã cho phép họ gửi dữ liệu lên Server. Sau đó, nếu dữ liệu không hợp lệ, trang Web sẽ chuyển về trang ban đầu, bạn cần lưu giữ lại các giá trị trước khi submit nhằm trình bày lại thông tin mà người dùng nhập trước đó. Tuy nhiên, với trường hợp này người dùng đã submit, trang Web này đã mất dữ liệu trước đó, khi trở lại bạn cần thông báo cho người dùng biết những giá trị nào không hợp lệ. Làm như vậy bạn phải xử lý rất nhiều vấn đề. Một giải pháp cho đến thời điểm bây giờ vẫn còn hiệu quả là sử dụng Client Script, nhằm kiểm tra dữ liệu nhập của người dùng trước khi sumnit lên Server. Đây là trường hợp điển hình bạn cần sử dụng Client Script. Ngoài ra còn nhiều chức nămg khác mà Client Script đóng vai trò như một phần quan trọng trong thiết kế cũng như lập trình Web. JavaScript là mgộ ngôn ngữ thông dịch. Để sử dụng ngôn ngữ JavaScript, bạn cần phải tuân thủ một số quy tắc như: Trong JavaScript có sự phân biệt CHỮ HOA / chữ thường. Trong JavaScript có sự phân biệt CHỮ HOA / chữ thường. Tập hợp nhiều câu lệnh đơn được đặt trong cặp dấu { } được gọi là một khối lệnh. Ghi chú một dòng: // 67
Ghi chú nhiều dòng: /* */ Dữ liệu là chuỗi, phải được đặt trong cặp dấu nháy kép ( “ “ ). Có thể dùng dấu + để nối các chuỗi hoặc các biến. Có thể đặt JavaScript ở bất cứ đâu trong tập tin HTML. Có thể tạo nhiều Script trong cùng một tập tin HTML. Có thể chèn thẻ HTML vào JavaScript (đặt trong nháy kép “ ” như một chuỗi). Có hai cú pháp để gọi JavaScript: Nhúng trực triếp vào trang HTML: //Các câu lệnh JavaScript; Gọi file từ bên ngoài: Trong đó, URL là đường dẫn đến file JavaScript. Tập tin này có phần mở rộng là *.js. 2. Biến, toán tử, toán hạng, hằng, hàm, lệnh trong JavaScript 2. 1. Biến trong JavaScript Biến trong JavaScript không cần xác định kiểu trước, kiểu của dữ liệu sẽ được xác định tại thời điểm gán giá trị cho biến. Một số lưu ý khi đặt tên biến là tên biến phải bắt đầu bằng ký tự chữ cái hoặc ký tự _, không dùng các ký tự đặc biệt để đặt tên biến: ( , [ , { , # , &, , không bắt đầu bằng ký số, không dùng khoảng trắng, không được trùng với các từ khóa trong JavaScript. Cách khai báo: var tên_biến; Hoặc: ten_bien=giá_trị; Danh sách các từ khóa trong JavaScript: abstract extends int super boolean false interface switch break final long synchronized byte finally native this case float New throw catch for Null throws char function package transient class goto private true 68
const if protected try continue implements public var default import return val do in short while double instanceof static with else Biến trong JavaScript cũng phân làm 2 loại: Biến toàn cục và biến cục bộ. Biến toàn cục được khai báo ngoài các hàm và có phạm vi hoạt động từ vị trí khai báo trở về sau trong chương trình. Biến cục bộ được khai báo trong chương trình con hoặc bên trong hàm và chỉ có phạm vi hoạt động từ vị trí khai báo đến kết thúc chương trình con hoặc kết thúc hàm. 2.2. Toán tử Toán tử số học: Toán tử Chức năng Ví dụ Kết quả + Cộng x=2; x+2 4 - Trừ x=2; 5-x 3 * Nhân x=4; x*5 20 / Chia 5/2 2.5 % Lấy dư 5%2 1 ++ Tăng 1 x=5; x++ 6 Giảm 1 x=5; x 4 Toán tử gán: Toán Tử Ví dụ Tương đương = x = y x = y += x += y x = x+y -= x -= y x = x-y *= x *= y x = x*y /= x /= y x = x/y %= x%=y x = x%y Toán tử so sánh: Trả về True nếu đúng, trả về False nếu sai: Toán Chức năng Ví dụ Kết quả Tử = = Bằng 5==8 return false != Không bằng 5!=8 return true > Lớn hơn 5>8 return false = 5>=8 return false bằng <= Nhỏ hơn hoặc 5<=8 return true 69
bằng Toán tử logic: Trả về True nếu đúng, trả về False nếu sai: Toán Chức Ví dụ Kết quả Tử Năng x = 6; y = 3 ; && Và return true (x 1) x = 6 ; y = 3; || Hoặc return false (x==5 || y==5) X = 6; y = 3; ! Not return true !(x==y) Toán tử điều kiện: (Điều kiện) ? value1: value2; Nếu điều kiện đưa vào trong dấu () là đúng thì trả về value1. Ngược lại thì trả về value2. 2.3. Hằng số Khác với các ngôn ngữ lập trình khác, JavaScript không có kiểu hằng số CONST. Giá trị của biến sẽ được xác định tại thời điểm gán biến cho đến khi biến được gán lại với giá trị mới. 2.4. Hàm JavaScript hỗ trợ các hàm có sẵn hoặc bạn có thể tự định nghĩa một hàm mới. Các hàm có sẵn thông dụng: JavaScript hỗ trợ các hàm có sẵn hoặc bạn có thể tự định nghĩa một hàm mới. Các hàm có sẵn thông dụng: document.write(“Nội dung cần hiển thị”); document.writeln(“Nội dung cần hiển thị”); Hiển thị hộp thoại: có 3 dạng hộp thoại tùy theo dụng ý thông báo mà bạn có thể chọn một trong ba lọi này. Thứ nhất là hộp thoại OK, trên hộp thoại chỉ có duy nhất một nút OK kèm thông báo. Loại hộp thoại này thường dùng để cảnh báo cho người dùng. Thứ hai là hộp loại YES/NO, trên hộp thoại có hai nút OK và Cancel. Loại hộp thoại này là dạng dành cho người dùng xác nhận thông tin, nếu đồng ý thì chọn OK, nếu không đồng ý thì chọn Cancel. Thứ ba là hộp thoại cho phép người dùng nhập giá trị vào. Trên hộp thoại dạng này có một khung nhập liệu, nút OK và Cancel. Đây là 70
một dạng hộp thoại nhận thêm thông tin từ phía người dùng. Để xác nhận thông tin bổ sung, người dùng nhấn vào nút OK, nếu nhấn nút Cancel thì bỏ qua. alert (“chuỗi sẽ hiển thị trong hộp thoại “); confirm (“Bạn có chắc muốn thay đổi giá trị này?”); prompt(“Mời bạn nhập thông tin:”); Các hàm xử lý chuỗi gồm hàm: để biến chuỗi (dạng biểu thức) thành biểu thức có thể tính toán được (hoặc trả về giá trị số của một chuỗi số) ta dùng hàm eval(Chuỗi/ biểu thức). Trả về trị số nguyên của chuỗi số, nếu không có giá trị, hàm sẽ trả về NaN: parseInt(“chuỗi_số”). Ví dụ: nếu dùng parseInt(“125.6a”); thì kết quả trả về sẽ là 125. Nếu dùng parseInt(“15ab6”); thì kết quả trả về là 15 do 15 là hai ký số đầu tiên trong chuỗi, hàm sẽ hiểu có một phần số trong chuỗi và trả về số mà nó nhận diện được. Còn nếu dùng parseInt(“dh154”); thì kết quả trả về là NaN do chuỗi đưa vào hàm parseInt lúc này có các ký tự đầu tiên không phải số, hàm sẽ dừng việc kiểm tra và thông báo đây không phải số. Tương tự, chúng ta có hàm trả về trị số thực của chuỗi số, nếu không có giá trị, hàm sẽ trả về NaN: parseFloat(“chuỗi_số”). Nguyên tắc hoạt động của hàm này tương tự như parseInt chỉ khác ở chỗ hàm parseFloat sẽ nhìn thấy dấu chấm động của số thực. Khi muốn kiểm tra nội dung người dùng nhập 71
vào là chuỗi hay không, bạn dùng hàm isNaN(giá_trị_kiểm_tra). Nếu giá_tri_kiểm_tra không phải là số thì trả về True, nếu là số trả về False. Ngoài ra, chúng ta có thể tự định nghĩa một hàm với cú pháp sau: function tên_hàm ( thamso1, thamso2, ) { //Khai báo các biến sử dụng trong hàm; //Các câu lệnh xử lý trong JavaScript; [return [giá trị /biểu thức] ]; } Ví dụ 3-2 function phepnhan(a,b) {x=a*b; return x;} document.write(phepnhan(2,6));//gọi hàm và xuất kết quả Lưu ý: tên hàm tự định nghĩa không được trùng với từ khóa, tên hàm trong JavaScript và không được trùng với tên của các thành phần trong form HTML nếu đang truy xuất dữ liệu cũa form. 2.5. Các lệnh điều khiển trong JavaScript a) Câu lệnh điều kiện if / if else Câu lệnh đơn giản, có 2 cú pháp: 72
Cú pháp 1: if ( ) Khối lệnh; Cú pháp này dùng cho trường hợp chỉ cần kiểm tra điều kiện, nếu thoả điều kiện thị thực hiện công việc chỉ định trong khối lệnh. Nếu không thỏa điều kiện thì không làm gì cả. Cú pháp 2: if ( ) Khối lệnh 1; else Khối lệnh 2; Cú pháp 2 áp dụng cho trường hợp nếu thỏa điều kiện thì thực hiện khối lệnh thứ nhất. Ngược lại nếu không thỏa điều kiện trong if sẽ thực hiện khối lệnh thứ 2. Nếu có nhiều hơn 2 điều kiện, chúng ta có thể áp dụng các dòng if else lồng nhau để có được cấu trúc điều kiện phức tạp Cú pháp 3: if( ) Khối lệnh 1; else if ( ) Khối lệnh 2; Else Khối lệnh 3; 73
b) Lựa chọn switch case Trường hợp có nhiều điều kiện, nếu phải dùng cấu trúc if else lồng nhau sẽ làm cho code trở nên rườm rà, phức tạp. Cho nên, bạn có thể sử dụng cấu trúc lựa chọn switch case cho các trường hợp như thế. Cú pháp 1: switch(Biểu thức) { case value1: Khối lệnh 1; break; case value2: Khối lệnh 2 ; break; case valuek: Khối lệnh k ; break; } Với cú pháp 1, nếu biểu thức kiểm tra trong switch không thỏa mang bất kỳ giá trị nào trong các case, khi đó switch sẽ không trả kết quả. Cú pháp 2: switch(Biểu thức) { case value1: 74
Khối lệnh 1; break; case value2: Khối lệnh 2 ; break; case valuek: Khối lệnh k ; break; default : Khối lệnh k+1; break; } Nếu dùng cú pháp 2, khi giá trị của biểu thức không trùng với các giá trị liệt kê sẵn trong case thì switch sẽ thực hiện khối lệnh đặt trong default. Khi người dùng nhập vào một con số trong hộp thoại prompt. Nếu số nhập vào là một trong các số: 1, 3, 5, 7, 8, 10, 12 sẽ có cùng kết quả trả về là hộp thoại alert với thông báo tháng vừa nhập có 31 ngày. Nếu số mà người dùng nhập vào là số 2 thì sẽ xuất hộp thoại cho biết tháng 2 có 28 hoặc 29 ngày. Trường hợp người dùng nhập một trong các số: 4, 6, 9, 11 thì kết quả sẽ là hộp thoại cho biết tháng vừa nhập có 30 ngày. Cuối cùng là nếu người dùng nhập các con số khác không thuộc các trường hợp trên thì đều xuất ra hộp thoại cho biết không có tháng này c) Vòng lặp for Với giá trị được khởi tạo ban đầu của biến, kiểm tra biến thỏa điều kiện của vòng lặp thì thực hiện công việc. Sau khi kết thúc vòng lặp, giá trị của biến sẽ được thay đổi 75
có thể tăng hay giảm tùy theo bài toán cụ thể. Sau khi được thay đổi giá trị, biến sẽ được kiểm tra lại nếu vẫn thỏa điều kiện thì vòng lặp tiếp tục được thực hiện. Nếu không còn thỏa điều kiện thì kết thúc vòng lặp. Cú pháp: for (biểu thức 1; biểu thức 2; biểu thức 3) { Khối lệnh; } Trong đó, biểu thức 1 thường là biểu thức khởi tạo biến, biểu thức 2 là biểu thức điều kiện, biểu thức 3 là biểu thức thay đổi giá trị của biến Trong ví dụ này, bạn có thể thấy cách chúng tôi gọi thẻ HTML như một chuỗi trong JavaScript. Khi đoạn Script được thông dịch, trình duyệt sẽ nhận diện các thẻ HTML trong chuỗi của JavaScript và hiển thị định dạng của thẻ HTML. d) Vòng lặp for in Dòng lặp for in thường được dùng cho trường hợp đối tượng là mảng. Cú pháp như sau: for ( variable in Object) 76
{ Khối lệnh; } e) Vòng lặp while Dòng lặp while sẽ kiểm tra điều kiện nếu thỏa thì thực hiện khối lệnh trong while cho đến khi điều kiện không còn thỏa nữa. Chú ý rằng rất có thể dòng lặp while sẽ không được thực hiện lần nào nếu biểu thức không thỏa ngay từ đầu. Cú pháp: while(biểu thức điều kiện) { Khối lệnh; } f) Vòng lặp do while 77
Dòng lặp do while sẽ thực hiện công việc trước rồi mới kiểm tra điều kiện. Có nghĩa là nếu điều kiện không thỏa thì công việc cũng đã được thực hiện ít nhất 1 lần. Cú pháp: do { khối lệnh; } while (biểu thức điều kiện); 2.6. Tham chiếu đến các đối tượng trong HTML a) Tham chiếu đến giá trị của thẻ Để lấy được thông tin mà người dùng đã nhập vào form để kiểm tra tính hợp lệ, chúng ta cần tham chiếu đến các thành phần của form. Để tham chiếu đến form, bạn cần chú ý đến tên form và tên của các thành phần trong form mà bạn dự định sẽ lấy dữ liệu. THẺ VD Text document.ten_form.ten_txt.value Password document.ten_form.ten_txtpass.value Textarea document.ten_form.ten_txtarea.value Select (combobox) document.ten_form.ten_combo.value Select (listbox) document.ten_form.ten_listbox.value Checkbox document.ten_form.ten_checkbox[i].value Radio document.ten_form.ten_radio[i].value 78
b) Tham chiếu đến chiều dài của thẻ Để lấy được chiều dài của thông tin nhập nhiệu, chúng ta cần lấy được thông tin đó trước, rồi sau đó mới xem chiều dài của thông tin. THẺ VD Text document.ten_form.ten_txt.value.length Password document.ten_form.ten_txtpass.value. length Textarea document.ten_form.ten_txtarea.value. length Select (combobox) document.ten_form.ten_combo.value. length Select (listbox) document.ten_form.ten_listbox.value. length Checkbox document.ten_form.ten_checkbox[i].value. length Radio document.ten_form.ten_radio[i].value. length c) Tham chiếu đến trạng thái của thẻ Chỉ có một số đối tượng trong form có thể kiểm tra trạng thái. THẺ VD Select (combobox) document.ten_form.ten_combo.selected Select (listbox) document.ten_form.ten_listbox. selected Checkbox document.ten_form.ten_checkbox[i]. checked Radio document.ten_form.ten_radio[i]. checked Nếu muốn tham chiếu đến trạng thái của một khung nhập liệu (chằng hạn như Text Fiels, Password Field, ) có được nhập thông tin vào chưa, ta quay về với dạng tham chiếu đến giá trị của các Fields đó. Nếu sau khi tham chiếu mà trả về là rỗng tức là Field đó chưa được nhập liệu d) Một số phương thức PHƯƠNG THỨC DIỄN GIẢI Đặt con trỏ nhấp nháy vào một thành phần document.ten_form.ten_tp_form.f có tên là ten_tp_form trong form có tên là ocus() ten_form window.close() Đóng của sổ hiện tại window.open(URL) Mở cửa sổ trình duyệt với địa chỉ URL window.history.back(i) Trở về cửa sổ trình duyệt trang web i lần window.history.go(i) Trở về cửa sổ trình duyệt trang web i lần e) Thao tác trên id của thẻ HTML Khi muốn viết nội dung vào các thành phần của form ta quay về dạng tham chiếu đến giá trị của thẻ và chỉ việc gán nội dung. Nhưng nếu đó là một thẻ HTML không thuộcm thành phần của biểu mẫu, chúng ta không thể áp dụng theo cách tham chiếu 79
giá trị được. Lúc này chúng ta sẽ sử dụng thuộc tính id để nhận dạng các thẻ HTML cần chèn thêm thông tin từ JavaScript. Sau đó sử dụng thành phần getElementById(“ten_id”). Tuy nhiên có hai dạng truy cập vào id của một thẻ HTML. Viết nội dung vào hoặc lấy nội dung đã trình bày sẵn trong cặp thẻ HTML đã được đặt trước một id: document.getElementById("ten_ID").innerHTML Trường hợp vừa muốn thao tác lên thẻ có id được chỉ định lại vừa muốn thao tác trên nội dung bên trong của thẻ: document.getElementById("ten_ID").outerHTML f) Sừ dụng một số đối tượng Đối tượng String: 80
Đối tượng Date: 81
Đối tượng Array: 82
Đối tượng Math: 83
Bài 5. Hoạt động quản trị website và hosting server 1. Tìm hiểu domain và hosting 1.1. Khái niệm về domain, DNS, web hosting Để có một website trên mạng thì cần phải có: Web hosting: nơi đặt nội dung website Domain: định danh của website trên Internet Domain thực chất là địa chỉ IP được biến đổi thông qua DNS VD: 222.135.35.15 -> www.abc.com DNS Server: là server có nhiệm vụ ánh xạ địa chỉ IP thành domain và ngược lại Máy tính lưu nội dung website sẽ có địa chỉ IP để máy tính khác truy cập vào. Do địa chỉ IP khó nhớ nên người ta chuyển nó thành domain bằng cách sử dụng DNS 1.2. Phân cấp Domain Gồm hai cấp chính: cấp cao nhất và thứ cấp 85
Domain cấp cao nhất (Top-level Domain): bao gồm các mã quốc gia: VN : Việt Nam US:Mỹ Hoặc một số lĩnh vực dùng chung như: COM: thương mại (COMmerial) NET: mạng lưới (NETwork) ORG: các tổ chức (ORGnizations) INFO: thông tin (INFOmation) EDU: giáo dục (EDUcation) Domain thứ cấp (không bắt buộc phải có): là tất cả những domain còn lại mà phải phụ thuộc vào domain cấp cao nhất. Để đăng ký domain thứ cấp thông thường phải liên hệ trực tiếp với người quản lý domain cấp cao nhất. VD: Domain thứ cấp của website thuộc quốc gia Việt Nam thì thường sẽ đi kèm với domain cao cấp nhất vn Hai loại hình web hosting thường dùng nhất: Windows hosting: dựa vào nền tảng hệ điều hành Windows của Microsoft Linux hosting: dựa vào nền tảng hệ điều hành Linux Tùy theo nhà cung cấp mà chất lượng web hosting khác nhau : Tốc độ truy cập Internet tại Web hosting đó Dung lượng ổ đĩa của máy chủ Dịch vụ hỗ trợ Web hosting thường đặt trên máy chủ (server) vì : Nếu truy cập Internet thông thường qua các nhà cung cấp Internet(ISP) thì địa chỉ IP của máy chúng ta luôn bị thay đổi => Máy khác không thể truy cập dữ liệu của máy chúng ta qua Internet được 86
Nếu đặt nội dung website trên máy chủ chuyên dụng thì địa chỉ IP của máy đó là cố định 1.3. Phần mềm quản trị web hosting Plesk: đây là phần mềm mà các hosting Windows hay sử dụng nhất cPanel: đây là phần mềm mà các hosting Linux hay sử dụng nhất Ngoài ra còn các phần mềm khác như: Webmin Hosting Controller DirectAdmin Kloxo Helm 2. Nghiệp vụ người quản trị domain & hosting 2. 1. Giao dịch với nhà cung cấp Để một website hoạt động trên mạng thì cần có domain & hosting Với người dùng cá nhân thông thường, muốn có domain & hosting thì cần giao dịch với nhà cung cấp Domain & hosting đều có 2 loại : mất phí và miễn phí. Các domain & hosting miễn phí thường hay đi kèm quảng cáo cùng rất nhiều hạn chế, chỉ nên sử dụng với mục đích cá nhân Với hosting tính phí, các nhà cung cấp đưa ra nhiều sự lựa chọn tùy theo nhu cầu của người dùng : Shared hosting : người dùng được cấp hosting từ bên cung cấp để sử dụng Virtual Private Server : người dùng thuê một máy chủ ảo và được toàn quyền quản trị host trong đó Dedicated server : người dùng thuê một máy chủ thật và được toànquyền tạo máy chủ ảo cũng như quản trị host trong đó. Reseller : người dùng trở thành một đại lý cung cấp dịch vụ Shared hosting hoặc VPS cho người khác 2.2. Thiết lập cấu hình domain & hosting 87
Bước đầu của người quản trị domain & hosting là đăng ký domain & hosting với nhà cung cấp Sau đó nhà cung cấp sẽ gửi lại email thông tin về domain & hosting đã đăng ký 88
Người quản trị hosting dựa vào thông tin trong đó để : Cấu hình domain · Thiết lập FTP, email · Thiết lập subdomain, parkdomain nếu cần · Thiết lập database nếu cần 2.3. Cài đặt website lên host Đây là công việc đưa nội dung website (các file, folder, ) lên hosting Thực hiện thông qua giao thức FTP (File Transfer Protocol) Sử dụng các phần mềm hỗ trợ giao thức FTP để upload nội dung website lên thư mục cần đưa trên host Thiết lập cấu hình website trên host Để website hoạt động được trên host, sau khi upload nội dung website thì còn cần thiết lập các thông số sau : 89
Thiết lập domain trỏ tới vị trí lưu nội dung website trên host Thiết lập cơ sở dữ liệu của website (nếu có) Chỉnh sửa các thông số của website cho phù hợp (đường dẫn tới cơ sở dữ liệu, tên cơ sở dữ liệu, các liên kết ) Thiết lập và quản trị VPS VPS (Virtual Private Server): máy chủ ảo được thiết lập từ máy chủ vật lý VPS Hosting : là một VPS hoạt động như một máy chủ web VPS hosting thường được quản trị bằng WHM (Web Host Manager) và cPanel: WHM: dùng cho các nhà quản trị tạo và thiết lập giới hạn cho các tài khoản cPanel: dùng cho các chủ tài khoản để quản trị tài khoản của họ 3. Nghiệp vụ người quản trị website Backup website Restore website khi có sự cố Tối ưu các kết quả tìm kiếm (SEO) Ngoài ra người quản trị website còn có một số nghiệp vụ khác như: Cập nhật nội dung website Lập báo cáo, thống kê hàng tháng Quản lý tài khoản người dùng, tài khoản cấp dưới, Backup & Restore website Sau khi website đi vào hoạt động, việc backup là rất cần thiết đề phòng các rủi ro mất dữ liệu 90
Khi website gặp sự cố chúng ta có thể tiến hành Restore từ các phiên bản website được backup lúc trước Các công việc cần tiến hành khi backup & restore website : Backup & restore phần nội dung website Backup & restore cơ sở dữ liệu (nếu có) Một số nhà cung cấp hỗ trợ giải pháp Backup & Restore toàn bộ một cách tự động Thiết lập tối ưu cho bộ máy tìm kiếm (SEO) Đây là công việc giúp nâng thứ hạng của website, giúp website xuất hiện ở những thứ tự đầu trong các kết quả tìm kiếm Giúp người dùng dễ tiếp cận với website hơn Website có thứ hạng cao cũng dễ thu hút quảng cáo từ các nhà đầu tư 91
4. Đăng ký domain và shared hosting 4.1. Một số nhà cung cấp domain & hosting Dịch vụ domain và hosting là hai dịch vụ khác nhau. Tuy nhiên các nhà cung cấp thường cung cấp cả dịch vụ domain đi kèm hosting Kiểm tra domain Trước khi đăng ký domain cần tiến hành thao tác kiểm tra domain Nguyên nhân phải kiểm tra domain: mỗi domain là duy nhất trên mạng lưới Internet toàn thế giới. Nếu một domain đang được dùng rồi thì người khác không được đăng ký dùng nữa 92
Đăng ký domain Chọn domain phù hợp (chưa được đăng ký) Thanh toán chi phí đăng ký domain với nhà cung cấp (trực tiếp hoặc trực tuyến) Các loại shared hosting Có nhiều loại gói hosting, tùy thuộc vào nhà cung cấp Ba loại hosting thường gặp nhất: Windows hosting Linux hosting Email hosting 93
Những thông số của hosting cần quan tâm Ngôn ngữ & công nghệ hỗ trợ: Có rất nhiều ngôn ngữ lập trình, công nghệ nền và loại chương trình quản lý cơ sở dữ liệu khác nhau có thể được dùng để thiết kế website Dịch vụ web hosting mà bạn sử dụng phải hỗ trợ đúng những cái mà website của bạn cần Nơi đặt server: Server đặt tại quốc gia hay thành phố nào Vị trí càng gần người truy cập thì càng tốt Bạn nên tính trước xem đa số người truy cập website của mình là ở đâu 94
Dung lượng lưu trữ: dung lượng tối đa mà website của bạn có thể chiếm trên ổ cứng của máy chủ web hosting Băng thông/tháng: dung lượng thông tin tối đa mà website của bạn có thể lưu chuyển trong một tháng Số lượng domain chính, subdomain, parked domain Số lượng tài khoản database & tài khoản FTP Số lượng tài khoản email Chọn gói shared hosting phù hợp từ bảng dịch vụ của bên cung cấp Thanh toán chi phí thuê hosting với nhà cung cấp (trực tiếp hoặc trực tuyến) 95
Bài 6. Quản trị domain và hosting Windows 1. Giới thiệu phần mềm quản trị hosting Windows Có nhiều phần mềm quản trị hosting Windows: Plesk Windows Hosting Controller DotNetPanel CWIPanel Enkompass Phần mềm quản trị hosting Windows Plesk được đánh giá cao nhất với những ưu điểm như độ bảo mật cao, giao diện thân thiện, dễ dàng nâng cấp, . Đặc biệt là Plesk còn có thể quản trị cả hosting Linux Giới thiệu về Plesk Plesk (Parallels Plesk Panel) là một trong những phần mềm quản trị hosting thông dụng nhất trên thế giới Là giải pháp quản trị hosting toàn diện trên cả Windows và Linux server, hỗ trợ hầu hết các công nghệ ảo hóa Tích hợp các công cụ thiết kế website Cung cấp giao diện quản trị dễ sử dụng Sử dụng browser truy cập tới đường dẫn đến Plesk được cung cấp trong email mà nhà cung cấp gửi sau khi đăng ký hosting 96
Đăng nhập vào Plesk Để đăng nhập, điền các thông tin từ email thông tin hosting: Login: tên tài khoản truy cập Plesk Password: mật khẩu của tài khoản Sau khi điền thì nhấn nút Log In để đăng nhập vào Plesk Giao diện quản trị của Plesk 97
Các phân mục quản lý của Plesk Domains: tại đây bạn có thể tạo và quản lý domain Mail: tại đây bạn có thể tạo và quản lý tài khoản email, tạo danh sách mail, truy cập dịch vụ Web Mail, Files: tại đây bạn có thể quản lý file, tạo và quản lý tài khoản FTP, thực hiện backup, 98
Statitics: tại đây bạn có thể xem thống kê về băng thông, thống kê dung lượng website, xem log, Account: tại đây bạn có thể thay đổi mật khẩu tài khoản, thay đổi giao diện Plesk, xem quyền của tài khoản, Web Site: tại đây bạn có thể tạo và quản lý sub domain cũng như domain alias, thiết lập script cho hosting, 99
Applications & Services: tại đây bạn có thể tạo và quản lý database, quản lý ứng dụng web, thiết lập Data Source ODBC, Additional Tools: tại đây bạn có thể xem địa chỉ IP của hosting, tạo và quản lý SSL Certificates, thiết lập bảo mật cho website, 2. Quản trị domain trong Plesk Thiết lập domain chính Bước 1: Truy cập vào chức năng Domains trong phân mục Domains Bước 2: Nhấn vào nút Create Domain trong mục Tools 100
Bước 3: Điền các thông tin vào mục Domain Form: Domain name: tên domain Assign IP Address: địa chỉ IP của hosting Hosting Type: lựa chọn một trong các phương án sau: Web Site Hosting: hosting dùng để upload website Forwarding: chuyển hướng tới một website khác No hosting: không đặt website trên hosting này Login: tên tài khoản FTP quản lý folder mà domain này trỏ tới Password: mật khẩu của tài khoản FTP Sau khi điền nhấn nút Finish để hoàn thành việc tạo domain 101
Thiết lập domain alias Domain alias: tên khác của domain chính (giống parked domain) Bước 1: Truy cập vào chức năng Domain Aliases trong phân mục Web Site Bước 2: Nhấn nút Add Domain Alias trong mục Tools Bước 3: Điền các thông tin: 102
Domain alias name: tên domain alias cần tạo Synchronize DNS zone with the primary domain: đồng bộ record với domain chính (thường không chọn) Mail: hỗ trợ mail Web: hỗ trợ website Sau khi điền nhấn nút OK để thiết lập domain alias Thiết lập sub domain Bước 1: Truy cập vào chức năng Subdomains trong phân mục Web Site Bước 2: Nhấn nút Create Subdomain trong mục Tools Bước 3: Chọn Hosting type là Physical hosting rồi nhấn nút Next 103
Bước 4: Điền các thông tin: Subdomain: tên subdomain cần tạo FTP user: lựa chọn dùng tài khoản FTP của domain chính hoặc tạo tài khoản FTP mới FTP Login: tên tài khoản FTP cần tạo Password: mật khẩu của tài khoản FTP cần tạo Sau khi điền nhấn nút Finish để hoàn thành việc tạo subdomain 3. Quản trị hosting trong Plesk 3.1. Thay đổi mật khẩu tài khoản hosting Bước 1: Truy cập vào chức năng Change Password trong phân mục Accounts 104
Bước 2: Nhập mật khẩu mới rồi nhấn nút OK 3.2. Xem thông số hosting Bước 1: Truy cập vào chức năng Resource Usage của phân mục Statistics Bước 2: Từng thông số của hosting được liệt kê theo hàng ngang với cấu trúc: tên thông số - số lượng đã sử dụng – số lượng giới hạn 105
3.3. Cấu hình script cho website Bước 1: Truy cập vào chức năng ASP.NET Settings trong phân mục Additional Tools Bước 2: Nhấn nút Change Version trong mục Tools 106
Bước 3: Chọn phiên bản .NET Framework phù hợp với website rồi nhấn nút OK 3.4. Quản lý file Upload file sử dụng File Manager Bước 1: Truy cập vào chức năng File Manager trong phân mục Files File Manager của Plesk hỗ trợ đầy đủ các thao tác như bên cPanel: copy, move, upload, chmod, Tất cả website đều phải upload vào folder httpdocs Bước 2: Upload file Trước hết nhấn nút Add New File trong mục Tools Nhấn nút Choose File để chọn file cần upload rồi nhấn nút OK 107
Bước 3: Thiết lập quyền cho file Nhấn vào biểu tượng Change Permission tương ứng với file cần thiết lập quyền Tiếp theo phân quyền cho file đó theo từng loại user Thiết lập tài khoản FTP Bước 1: Truy cập vào chức năng FTP Accounts trong phân mục Files 108
Bước 2: Nhấn nút Add New FTP Account trong mục Tools Bước 3: Điền các thông tin: FTP account name: tên tài khoản FTP cần tạo Home directory: folder mà tài khoản FTP đó có thể truy cập vào New password: mật khẩu của tài khoản FTP Điền xong nhấn nút OK để tạo tài khoản FTP 3.5. Quản lý email Tạo tài khoản email Bước 1: Truy cập vào chức năng Create Mail Account trong phân mục Mail 109
Bước 2: Điền các thông tin: Mail account: tên tài khoản email cần tạo New password: mật khẩu của tài khoản email Sau khi điền nhấn nút Finish để tạo tài khoản email Truy cập vào dịch vụ Web Mail Bước 1: Truy cập vào chức năng Open Webmail trong phân mục Mail 110
Bước 2: Chọn domain tương ứng với tài khoản mail rồi nhấn nút Next Bước 3: Chọn tài khoản email rồi nhấn nút Finish Bước 4: Nhấn nút WebMail trong mục Tools để truy cập vào dịch vụ Web Mail cho tài khoản email trên 3.6. Quản lý database Tạo database Bước 1: Truy cập vào chức năng Database trong phân mục Application & Services 111
Bước 2: Nhấn nút Add New Database trong mục Tools Bước 3: Tạo database Điền thông tin vào mục Add new database: Database name: tên database cần tạo Type: có thể chọn SQL Server hoặc MySQL Sau khi điền nhấn nút OK để tạo database Bước 4: Tạo tài khoản user quản lý database Nhấn nút Add New Database User trong mục Tools 112
Tiếp theo điền các thông tin: Database user name: tên tài khoản user quản lý database New password: mật khẩu của tài khoản user Sau khi điền nhấn nút OK để tạo tài khoản user Làm việc với database bằng công cụ WebAdmin Các thao tác trên database của Plesk được thực hiện nhờ phần mềm WebAdmin Bước 1: Truy cập vào chức năng Database trong phân mục Application & Services 113
Bước 2: Nhấn vào tên database muốn truy cập Bước 3: Nhấn nút Webadmin trong mục Tools Bước 4: Thực hiện các thao tác với database trên giao diện WebAdmin tùy ý 3.7. Backup & Restore Backup website Bước 1: Truy cập vào chức năng Backup Manager trong phân mục Files 114
Bước 2: Nhấn nút Back Up trong mục Tools Bước 3: Điền thông tin rồi nhấn nút Back Up để tiến hành backup nội dung website Các file backup sau khi tạo sẽ được liệt kê ở mục Server Respository. Tại đây có thể quản lý các file backup: download, xóa, 115
Restore website Bước 1: Truy cập vào chức năng Backup Manager trong phân mục Files Bước 2: Nếu file backup không có trên hosting thì phải upload bằng cách nhấn nút Upload Files to Server Respository Tiếp theo nhấn nút Choose File để chọn file cần upload rồi nhấn OK Bước 3: Các file backup sẽ được liệt kê tại mục Server Respository. Nhấn vào tên file backup muốn sử dụng 116
Bước 4: Nhấn nút Restore để bắt đầu phục hồi website từ file backup đã chọn 117
Bài 7. Máy chủ chuyên dụng và máy chủ ảo 1. Giới thiệu Dedicated Serve/ VPS Hosting Máy chủ dùng riêng (Dedicated Server) Dedicated Server Là một máy chủ vật lý riêng độc lập về phần cứng. Người sử dụng có thể toàn quyền sử dụng máy chủ và không phải chia sẻ với bất cứ ai, có thể lựa chọn cài đặt hệ điều hành, các ứng dụng tùy nhu cầu của mình. Máy chủ riêng ảo (VPS - Virtual Private Server) Là phương pháp phân chia một máy chủ vật lý thành nhiều máy chủ ảo Mỗi máy chủ ảo hoạt động hoàn toàn như một máy chủ thật sự sở hữu một phần CPU riêng, dung lượng RAM riêng, dung lượng ổ HDD riêng, địa chỉ IP riêng và hệ điều hành riêng. Người dùng có thể cài đặt hệ điều hành và các ứng dụng tùy nhu cầu của mình VPS và VPS Hosting VPS có thể được dùng để thiết lập thành: Máy chủ mail Máy chủ Web Máy chủ ứng dụng tùy theo nhu cầu của doanh nghiệp VPS Hosting: Là một VPS hoạt động như một máy chủ Web So sánh Dedicated Server/ VPS Hosting và Shared Hosting 118
Nên thuê VPS Hosting khi các doanh nghiệp không đủ khả năng tài chính để thuê Dedicated Server nhưng muốn: Tự lưu trữ website của mình và có nhu cầu cài đặt thêm các phần mềm mail server, FTP server Kinh doanh các dịch vụ reseller hosting (đại lý hosting), shared hosting Đăng kí Dedicated Server/VPS Hosting 119
Hiện nay ở Việt Nam có rất nhiều nhà cung cấp dịch vụ Dedicated Server/ VPS Hosting: FPT ( Công ty TNHH phần mềm Nhân Hòa ( ) Công ty TNHH DIGISTAR ( ) Công ty TNHH Máy Chủ Vi Na ( ) Công ty Mắt Bão ( ) Oncloud ( Cung cấp dịch vụ Cloud VPS . 2. Giới thiệu WHM và cPanel Cpanel Là một bảng điều khiển hosting trên nền Web, dùng cho các chủ tài khoản để quản lý mật khẩu, tài khoản email, FTP, thư mục và các file của một domain cụ thể, CSDL WHM (Web Host Manager) WHM (Web Host Manager) 120
Là một bảng điều khiển trên nền Web, dùng cho nhà quản trị máy chủ và các đại lý bán lẻ hosting để quản trị toàn bộ máy chủ, cài đặt và bảo trì các phần mềm, kiểm tra hệ thống, tạo các tài khoản và xem thông tin sử dung tài nguyên hệ thống. WHM và CPanel luôn luôn được bán cùng với nhau trong một sản phẩm Các tính năng của WHM trên Dedicated Server và VPS Server là tương tự nhau Sinh viên truy cập vào liên kết sau để làm quen và thực hành với WHM và Cpanel Và truy cập vào liên kết sau để tham khảo thêm các video tổng hợp hướng dẫn sử dụng WHM WHM và CPanel WHM: Dùng cho các nhà quản trị tạo các tài khoản và thiết lập các giới hạn tài nguyên cho tài khoản này. 121
Cpanel: Dùng cho các chủ tài khoản để quản trị tài khoản của họ Các tính năng của WHM Dùng để kiểm soát các dịch vụ, cài đặt và quản trị các phần mềm quan trọng mà tất cả các máy chủ Web đều cần như Apache Database (MySQL, PostgreSQL) Phần mềm máy chủ mail (Exim) DNS (Bind) SSH Cài đặt, quản trị, hủy bỏ các máy khách và các Reseller hosting ra khỏi máy chủ. Kiểm soát các tính năng (feature) trên máy khách và các Reseller Quét và thông báo các vấn đề như khách hàng sử dụng quá nhiều tài nguyên, vấn đề về bảo mật Chuyển các tài khoản từ một máy chủ sang một máy chủ khác Cập nhật tự động Tự động thực hiện các tác vụ (Sao lưu các site, cập nhật các file hệ thống quan trọng, xử lý các Web log file ) 122
3. Quản trị tài khoản người dùng sử dụng WHM Quản trị tài khoản sử dụng WHM Quản trị tài khoản người dùng là một vấn đề mà nhà quản trị máy chủ thường xuyên phải thực hiện Nhà quản trị máy chủ tạo các tài khoản người dùng qua giao diện WHM Hai loại tài khoản: Tài khoản Reseller: Người chủ tài khoản Reseller có thể tạo thêm các tài khoản người dùng khác. Tài khoản người dùng thông thường Chủ tài khoản người dùng thông thường chỉ có thể quản lý mật khẩu, tài khoản email, FTP, thư mục và các file của một domain cụ thể, CSDL qua Cpanel. Không thể tạo thêm các tài khoản khác Các bước tạo tài khoản người dùng: Tạo một Feature List Tạo một Package. Gán Feature List vừa tạo ở bước trên cho Package này Tạo tài khoản. Gán Package vừa tạo ở trên cho tài khoản này. Làm việc với Feature List Feature List: được dùng để chỉ định các tính năng sẵn dùng (các tính năng được phép truy cập trên Cpanel) cho các tài khoản. Để thêm, sửa, xóa các Feature List ta truy cập đến tính năng Feature Manager trên giao diện WHM - Điều hướng WHM theo đường dẫn tính năng được hiển thị trong khung chữ nhật màu đỏ ở hình bên 123
- Nhấp chuột vào biểu tượng Feature Manager để làm việc với Feature List 124
Thêm một Feature List 125
Chỉnh sửa Feature List 126
Xóa một Feature List 127
Làm việc với Package Một Package là một danh sách các thiết lập về giới hạn Không gian ổ đĩa, Băng thông, Các tài khoản Email, Các domain con (subdomain), Tài khoản FTP để áp dụng cho các tài khoản được tạo ra. Một Package có thể được gán cho nhiều tài khoản người dùng hoặc nhiều reseller. Khi thay đổi Package, toàn bộ người dùng được gán cho Package đó sẽ bị ảnh hưởng. Tạo một Package mới - Điều hướng WHM theo đường dẫn tính năng được hiển thị trong khung chữ nhật màu đỏ ở hình bên 128
- Nhấp chuột vào Add Package để truy cập màn 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 được gán cho tài khoản 129
Max FTP Accounts: Số lượng tài khoản FTP tối đa mà package được phép tạo. Mặc định giá trị là này là không giới hạn (unlimited). Giá trị này là 0 thì người dùng không được phép tạo thêm tài khoản FTP mà chỉ có một tài khoản FTP duy nhất Max Email Accounts: Số lượng tài khoản POP3/IMAP tối đa mà tài khoản này được phép tạo. Max MySQL Databases : Số lượng cơ sở dữ liệu tối đa mà tất cả người sử dụng được gán package này được phép truy cập Max Subdomains : Số lượng domain con (Subdomain) tối đa mà những người sử dụng của gói này có thể tạo ra. (subdomain.domain.com ) Max Parked Domains : Số lượng parked domain tối đa người sử dụng có thể thêm. Parked domain là tên miền thứ hai trỏ tới cùng một nội dung tương đương với tên miền chính của bạn. Người dùng chỉ có duy nhất một tài khoản Cpanel để kiểm soát tất cả các parked domain của mình Max Addon Domains: Số lượng Addon Domain tối đa người sử dụng có thể thêm. Addon Domain là tên miền mới được thêm vào chạy chung với host của tên miền chính. Có cấu trúc thư mục là thư mục con của thư mục chính. Người dùng cuối ghé thăm các tên miền addon sẽ không biết rằng tên miền này được host từ cùng một tài khoản Cpanel Người dùng chỉ có một tài khoản Cpanel để quản trị tất cả các tên miền Addon này. Chiếm không gian ổ đĩa và băng thông CGI Access: Chọn CheckBox này nếu bạn muốn các tài khoản của gói có quyền truy cập Script CGI/Perl Frontpage Extensions: Chọn CheckBox này nếu bạn muốn phần mở rộng Microsoft FrontPage phía Server được cài đặt mặc định cho tất cả các tài khoản của gói. CheckBox này thường được bỏ chọn vì người dùng có thể chọn cài đặt FrontPage Extensions trong Cpanel khi cần Bandwidth Limit: Tổng giới hạn băng thông được gán cho các tài khoản của gói. 130
cPanel Theme: Mục này cho phép bạn chọn Theme mà bạn muốn gán cho Cpanel của người dùng Feature List: Mục này cho phép bạn chọn Feature List để gán cho Package Sau khi bạn thiết lập toàn bộ các 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 các thiết lập mặc định, nhấp chuột vào Reset. Chú ý: Với các gói được tạo ra bởi Reseller hệ thống sẽ tự động đổi tên gói như 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 các thiết lập cho một Package sẽ ảnh hưởng đến tất cả các tài khoản được gán bởi Package này. Nó thay thế tất cả các thiết lập được điều chỉnh bằng tay từ trước như dung lượng lưu trữ, giới hạn băng thông. Có thể tạo một Package mới với đầy đủ các thiết lập bạn muốn. Sau đó gán Package mới này cho tài khoản thay vì chỉnh sửa các thiết lập package cũ bằng tay. Điều này sẽ tránh gây lỗi cho một hệ thống tài khoản trong hệ thống Với Package chỉ được gán cho một tài khoản duy nhất nên đặt tên gói như sau: Tên gói = tên domain/tên tài khoản được gán cho Package này + Tên gói dự định đặt Xóa một Package Chú ý: Những Package hiện đang được gán cho các tài khoản còn tồn tại sẽ không thể bị xóa. Để xóa các Package này sử dụng tính năng Upgrade/Downgrade an Account trong tính năng Account Functions để hủy bỏ gán Package này cho tài khoản. 132
Reseller không thể gán các Package được tạo bởi các Reseller khác Các Package được tạo bởi Root có thể được truy cập bởi Reseller miễn là Reseller đó được thiết lập quyền truy cập Root có thể gán bất kì một Package nào cho bất kì một tài khoản nào. Tạo một tài khoản người dùng mới 133