Giáo trình môn Thiết kế website dành cho sinh viên cao đẳng học chuyên ngành Công nghệ thông tin để có thể thiết kế được 1 website riêng cho bản thân mình.Giáo trình nói rõ phần html,css,javascript trong thiết kế
MỤC LỤC PHẦN NGÔN NGỮ HTML Bài Tổng quan ngôn ngữ HTML Mục tiêu 1.1 Trình bày khái niệm web Cách hoạt động trang web Trình bày cấu trúc trang HTML 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 đ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 Web bao gồm: Web Page, Website, URL (Uniform Resource Locator), Web Server, Web Browser Web page: Là trang web, viết ngôn ngữ khác kết trả client trang HTML Website: Là tập hợp trang Web có nội dung thống nhất, phục vụ cho mục đích World Wide Web(www): Là hệ thống Web site toàn giới truy cập thông qua mạng Interenet Một Website muốn cung cấp thông tin cho toà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: Hình 1-1-1: Mô hình hoạt động dịch vụ Web 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 (1) 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 (2) 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 (3) 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 1.3 Cấu trúc trang HTML Như trình bày trên, muốn trình bày định dạng liệu trình duyệt phải theo cấu trúc HTML HTML viết tắt HyperText Markup Language Hypertext có nghĩa: Bất nhấn chuột vào từ đưa đến trang web mới, vừa nhấp vào siêu văn Đây ngôn ngữ thông dụng dùng để thiết kế Web tĩnh Một trang HTML đánh dấu bắt đầu thẻ kết thúc thẻ Như vậy, nội dung đặt cặp thẻ không hợp lệ Thẻ gọi thẻ mở, thẻ gọi thẻ đóng Bên hai thẻ này, bạn khai báo sử dụng hầu hết thẻ HTML Tuy nhiên có vài thẻ HTML không hỗ trợ trình duyệt lại hỗ trợ trình duyệt khác Những trường hợp đặc biệt đó, nhóm biên soạn tài liệu giới thiệu đến bạn tìm hiểu thẻ HTML cụ thể Trang Web tĩnh có tên mở rộng html htm Có thể soạn thảo mã HTML chương trình soạn thảo văn Ví dụ, bạn soạn Microsoft Office Word, Notepad, WordPad, FrontPage, Dreamweaver, … Ngôn ngữ HTML không phân biệt ký tự HOA / thường khai báo tên thẻ Ví dụ: bạn gõ hay hay mang ý nghĩa khai báo bắt đầu trang HTML Và bạn khai báo thẻ đánh dấu phần đầu trang HTML thẻ hay hay thẻ đóng Các thẻ HTML định nghĩa sẵn, bạn cần nhớ tên thẻ ý nghĩa để sử dụng mà không cần tự định nghĩa cho thẻ Điều quan trọng bạn cần nhớ thuộc tính kèm bên thẻ để tùy chỉnh cho phần nội dụng mà bạn muốn hiển thị lên trình duyệt cho linh hoạt ý định hiển thị bạn Một điều lưu ý bạn cần gõ xác tên thẻ dấu cách tên thẻ HTML định nghĩa sẵn Ví dụ: cách viết tên thẻ sau sai: < head>, , , Nếu bạn muốn thêm thuộc tính cho thẻ sau tên thẻ, bạn nhấn phím khoảng cách sau xác định thuộc tính cho thẻ Thẻ HTML có hai loại: thẻ kép thẻ đơn Thẻ kép loại thẻ có thẻ mở thẻ đóng.Thẻ mở viết sau: Thẻ đóng phải khai báo có thẻ mở.Cách viết thẻ đóng sau: Nội dung cần hiển thị lên Web, bạn đặt cặp thẻ mở thẻ đóng để có định dạng thẻ khai báo Thẻ đơn loại thẻ có thẻ mở mà thẻ đóng Nếu sử dụng nhiều thẻ HTML để định dạng cho nội dung thẻ phải lồng Tức thẻ HTML tuân theo quy luật mở trước đóng sau Hình 1-1-2: Cấu trúc trang HTML Để soạn thảo mã HTML, ta Notepad gõ lưu nội dung trang HTML Hình 1-1-2 với tên Vidu1-1-1.html Lưu ý: để hiển thị tiếng Việt lên trình duyệt, trình lưu tập tin, bạn cần chọn Encoding: Unicode Encoding: UTF-8 Sau mở tập tin trình duyệt Web, ta thấy giao diện trang sau: Hình 1-1-3: Trang Vidu1-1-1.html trình duyệt Firefox Bạn thêm thuộc tính định dạng cho thẻ HTML với cấu trúc: Bài Các thẻ HTML Mục tiêu - Trình bày thẻ bản: body, p, định dạng danh sách, chèn hình ảnh, âm 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 toà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: hĩa trắng 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 Ví dụ 1-2-1: Canh lề cho đoạn văn thẻ Ví dụ 1-2-1 Đây đoạn văn ví dụ cách sử dụng ký hiệu đặc biệt HTML canh lề thuộc tính align thẻ <div> Giải thích: Một cách khác để hiển thị tiếng Việt lên trình duyệt, ta dùng thẻ với thuộc tính ví dụ 1-2-1 Lưu ví dụ với tên Vidu1-2-1.html mở tập tin trình duyệt, ta được: Hình 1-2-1: Ví dụ canh lề đoạn văn thẻ 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ạn có thuộc tính align với bốn giá trị center/justify/left/right Ví dụ 1-2-2: Thẻ định dạng đoạn Ví dụ 1-2-2 Đây đoạn văn thứ ví dụ cách sử dụng ký hiệu đặc biệt HTML canh lề thuộc tính align thẻ <p> Đây đoạn văn thứ hai ví dụ cách sử dụng ký hiệu đặc biệt HTML © canh lề thuộc tính align thẻ <p> Hình 1-2-2: Trang Vidu1-2-2.html định dạng đoạn thẻ 2.2.3 Các thẻ định dạng tiêu đề HTML định nghĩa sẵn sáu cấp độ 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 tự động xuống dòng 10 t=prompt( "nhap thang: "); switch (eval(t)) { case 1:case 3:case 5:case 7:case 8:case 10:case 12: alert("Thang "+ t+ " co 31 ngay"); break; case 2: alert("Thang "+t + " co 28 29 ngày"); break; case 4: case 6: case 9: case 11: alert("Thang "+t +" co 30 ngay");break; default: alert("Khong co thang nay");break; } Khi người dùng nhập vào số hộp thoại prompt Nếu số nhập vào số: 1, 3, 5, 7, 8, 10, 12 có kết trả 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 số xuất hộp thoại cho biết tháng có 28 29 ngày Trường hợp người dùng nhập số: 4, 6, 9, 11 kết hộp thoại cho biết tháng vừa nhập có 30 ngày Cuối người dùng nhập số khác không thuộc trường hợp xuất hộp thoại cho biết tháng c) Vòng lặp for Với giá trị khởi tạo ban đầu biến, kiểm tra biến thỏa điều kiện vòng lặp thực công việc Sau kết thúc vòng lặp, giá trị biến thay đổi tăng hay giảm tùy theo toán cụ thể Sau thay đổi giá trị, biến kiểm tra lại thỏa điều kiện vòng lặp tiếp tục thực Nếu không thỏa điều kiện 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 thường biểu thức khởi tạo biến, biểu thức biểu thức điều kiện, biểu thức biểu thức thay đổi giá trị biến 92 Ví dụ 4-4: vận dụng dòng lặp for vẽ lên Web bảng biểu có m dòng, n cột nhập từ bàn phím tạo bảng với m dòng, n cột nhập từ bàn phím var n, m, i, j; m=prompt("Nhap so dong"); n=prompt("Nhap so cot"); document.write(""); for(i=1;i var input; while (input!=99) { input=prompt("Nhập vào số kỳ, nhập 99 đế thóat"); if (isNaN(input)) { document.write("Dữ liệu không hợp lệ, nhập số "); break; } f) Vòng lặp … while Dòng lặp … while thực công việc trước kiểm tra điều kiện Có nghĩa điều kiện không thỏa công việc thực lần Cú pháp: 94 { khối lệnh; } while (biểu thức điều kiện); Ví dụ 4-7: var input; { input=prompt(“Nhập vào số kỳ, nhập 99 để thóat”); if(isNaN(input)) { document.write(“Dữ liệu không hợp lệ, nhập số ”); break; } }while (input!=99) 8.2.6 Tham chiếu đến đối tượng HTML a) Tham chiếu đến giá trị thẻ Để lấy thông tin mà người dùng nhập vào form để kiểm tra tính hợp lệ, cần tham chiếu đến thành phần form Để tham chiếu đến form, bạn cần ý đến tên form tên thành phần form mà bạn dự định lấy liệu b) Tham chiếu đến chiều dài thẻ 95 Để lấy chiều dài thông tin nhập nhiệu, cần lấy thông tin trước, sau xem chiều dài thông tin c) Tham chiếu đến trạng thái thẻ Chỉ có số đối tượng form kiểm tra trạng thái THẺ VD Select document.ten_form.ten_combo.selected (combobox) Select (listbox) document.ten_form.ten_listbox selected Checkbox document.ten_form.ten_checkbox[i] Radio checked document.ten_form.ten_radio[i] checked … … Nếu muốn tham chiếu đến trạng thái khung nhập liệu (chằng hạn Text Fiels, Password Field, …) có nhập thông tin vào chưa, ta quay với dạng tham chiếu đến giá trị Fields Nếu sau tham chiếu mà trả rỗng tức Field chưa nhập liệu d) Một số phương thức PHƯƠNG THỨC DIỄN GIẢI document.ten_form.ten_tp_form.f Đặt trỏ nhấp nháy vào thành phần ocus() có tên ten_tp_form form có tên window.close() ten_form Đóng sổ window.open(URL) window.history.back(i) window.history.go(i) … e) Thao tác id thẻ HTML Mở cửa sổ trình duyệt với địa URL Trở cửa sổ trình duyệt trang web i lần Trở cửa sổ trình duyệt trang web i lần … 96 Khi muốn viết nội dung vào thành phần form ta quay dạng tham chiếu đến giá trị thẻ việc gán nội dung Nhưng thẻ HTML không thuộc thành phần biểu mẫu, áp dụng theo cách tham chiếu giá trị Lúc sử dụng thuộc tính id để nhận dạng 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 thẻ HTML Viết nội dung vào lấy nội dung trình bày sẵn cặp thẻ HTML đặt trước id: document.getElementById("ten_ID").innerHTML Thao tác với id thẻ: document.getElementById("ten_ID").id Trường hợp vừa muốn thao tác lên thẻ có id định lại vừa muốn thao tác nội dung bên thẻ: document.getElementById("ten_ID").outerHTML f) Sừ dụng số đối tượng Đối tượng String: 97 Ví dụ 4-8: Sử dụng số phương thức đối tượng String 98 var txt =“ Hello world!”; document.write (txt.length); document.write (txt.toUpperCase()); document.write (txt.substring(4,8)); Đối tượng Date: 99 Ví dụ 4-9: Sử dụng số phương thức đối tượng Date var myDate = new Date(); myDate.setFullYear(2010,0,14); myDate.setDate(myDate.getDate()+5); myDate.setFullDate(2010,0,14); var today = new Date(); if (myDate > today ) alert(“Hôm chưa đến ngày 14/1/2010”); else alert(“Hôm qua ngày 14/1/2010”); Đối tượng Array: Ví dụ 4-10: Sắp xếp mảng phương thức sort() Ví dụ 4-11: Sử dụng phương thức ghép chuỗi 100 Đối tượng Math: Ví dụ 4-12: 101 102 BÀI TẬP PHẦN Hãy thiết kế trang HTML sau Yêu cầu: Khi click vào mục chọn màu lên thông báo bạn chọn màu Lưu tập với tên JS_baitap1.html Hãy thiết kế trang HTML sau, lưu tập với tên JS_baitap2.html Dùng Javascript để xử lý nút: - Nút lời chào, click vào lời chào: Chào mừng bạn đến với Javascript Khi bạn nhập họ tên vào textbox, click vào nút Xong, hộp thoại tên bạn - vừa nhập Khi click vào nút đóng trang web, website bạn bị đóng lại 103 Viết chương trình mô phổng máy tính điện tử Lưu với tên JS_baitap3.html Sau bạn nhập vào số a, b Bạn chọn phép toán xem kết phép toán Bạn thiết kế form sau, lưu tập với tên JS_baitap4.html Lưu ý: - Nếu người dùng chưa nhập tên, chương trình xuất thông báo Sau trỏ - chuột xuất ô cần nhập tên Tương tự, lập trình cho ô nhập tuổi Đặc biệt, người dùng nhập tuổi ký tự số âm thông báo lỗi, yêu cầu nhập lại, xóa bỏ liệu ô tuổi cũ, đặt trỏ chuột vào ô tuổi để người dùng nhập lại 104 Nếu người dùng nhập thông tin, click vào nút gửi, lên thông tin tên, tuổi, năm sinh người dùng Hãy viết thông báo yêu cầu người dùng nhập vào chuỗi Sau kiểm tra xem chuỗi vừa nhập có ký tự Lưu tập với tên JS_baitap5.html 105 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 106 [...]... (Internal link): liên kết các phần tử thông tin trong cùng Hình 1-3-1: Liên kết một tài liệu trong 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 Hình 1-3-2: Liên kết ngoài 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... name="IL">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. Hình ảnh minh họa liên kết trong: 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. Hình ảnh minh họa liên kết ngoài:... Trình duyệt Internet Explorer hỗ trợ tốt cả và Mozilla Firefox chỉ hỗ trợ 25 Hình 1-2-9: Trang Vidu1-2-9.html 26 Bài 3 Siêu liên kết và khung Mục tiêu - Trình bày được hyperlink, frame, iframe trong trình bày văn bản 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... size="6">Tìm hiểu về siêu liên kết 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 ngoài (External link) Liên kết có thể thực thi được (Executable)... 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.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à: Từ hiển thị liên kết Trong đó: 29 URL có thể là... href="vidu1-3-1.html">Ví dụ liên kết trong Ví dụ liên kết ngoài Danh sách liên kết Website: Tìm kiếm với google Website trường Cao đẳng nghề CN Việt 30 Hình 1-3-5: Trang Vidu1-3-2.html 3.2 Khung – frame 3.2.1 Thẻ … Khi cần hiển thị trên trình duyệt nhiều nội dung, chủ đề... (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... đế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 Ví dụ 1-3-2: Liên kết ngoài GIÁO TRÌNH Mạng máy tính Thiết kế web 3.2.2 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: