GiaoTrinh THIẾT KẾ WEB HTML

Giáo Trình Thiết Kế Web Huynh Quoc Dung Ngơn Ngữ HTML 120 Bài 01 TỔNG QUAN VỀ THIẾT KẾ WEBSITE Các khái niệm Soạn thảo trang web Các thẻ tập tin HTML Làm tươi xem mã nguồn     I CÁC KHÁI NIỆM CĂN BẢN Khái niệm WebTĩnh, Web động  WEB TĨNH : Thường xây dựng ngôn ngữ HTML, DHTML dùng để thiết kế trang web có nội dung cần thay đổi cập nhật Thích hợp với cá nhân, tổ chức, doanh nghiệp vừa nhỏ làm quen với môi trường Internet o * Ưu điểm:  Thiết kế đồ hoạ đẹp: Trình bày ấn tượng phần mỹ thuật hồn tồn tự trình bày ý tưởng tồn diện tích trang  Tốc độ truy cập nhanh khơng thời gian việc truy vấn sở liệu trang web động  Chi phí đầu tư thấp: Chi phí xây dựng website tĩnh thấp nhiều so với website động khơng phải xây dựng sở liệu, lập trình chi phí cho việc thuê Hosting o * Nhược điểm bản:  Khó khăn việc thay đổi cập nhật thông tin: Muốn thay đổi cập nhật nội dung thông tin phải biết ngôn ngữ html, sử dụng chương trình thiết kế đồ hoạ, thiết kế web, cập nhật file lên server  Thơng tin khơng có tính linh hoạt: Do nội dung trang web tĩnh thiết kế cố định nên nhu cầu thông tin người truy cập tăng cao thơng tin website tĩnh khơng đáp ứng  Khó tích hợp, nâng cấp, mở rộng: Khi muốn mở rộng, nâng cấp website tĩnh phải làm lại website  Web động: Web động thuật ngữ dùng để website có sở liệu hỗ trợ phần mềm phát triển web o Với web động, thông tin hiển thị gọi từ sở liệu người dùng truy vấn tới trang web Chẳng hạn ứng dụng thương mại điện tử (một cửa hàng trực tuyến) trưng bày catalogue sản phẩm website hay theo dõi kho hàng, mặt hàng giao, trang có liên quan đến sản phẩm phản ánh thay đổi o Web động thường phát triển ngơn ngữ lập trình tiên tiến PHP, ASP, ASP.NET, Java, CGI, Perl, sử dụng sở liệu quan hệ mạnh Access, My SQL, MS SQL, Oracle… o Thông tin web động ln ln dễ dàng thường xun cập nhật thông qua việc sử dụng công cụ cập nhật phần mềm quản trị web Thông tin cập nhật sở liệu người dùng Internet xem chỉnh sửa Vì website hỗ trợ sở liệu phương tiện trao đổi thông tin nhanh với người dùng Internet Điều dễ nhận thấy website thường xuyên cập nhật thu hút nhiều khách hàng tới thăm Trang Giáo Trình Thiết Kế Web Huynh Quoc Dung Ngôn Ngữ HTML o Tất website Thương mại điện tử, mạng thông tin lớn, website tổ chức, doanh nghiệp hoạt động chuyên nghiệp Net sử dụng cơng nghệ web động Có thể nói web động website giới chuyên nghiệp hoạt động môi trường Internet Mạng Internet: Mạng máy tính tồn cầu – Hệ thống mạng mạng Tiền thân ban đầu mạng ARPANET(Tổ chức Advanced Research Projects Agency) Mỹ sáng lập 1969 Phục vụ trao đổi liệu trường đại học & Bộ quốc phòng Các dịch vụ Internet  WWW-World Wide Web: Dịch vụ trao đổi,tìm kiếm truy cập thông tin mạng theo giao thức HTTP Được sử dụng thơng qua trình duyệt Web  Email – Eletronic Mail-Thư điện tử: Dịch vụ trao đổi thông điệp cho SMTP(Smple mail tranfer protocol) Pop3 (Post office protocol 3) quản lý Mail server như: phetcm@yahoo.com , webmaster@clbtinhoc.net , phet@hcm.fpt.vn  FTP – File transferprotocol – Truyền tải tập tin : Dịch vụ trao đổi tập tin máy Internet thường dùng để Download & Upload trang web từ người thiết máy chủ thông qua chương trình FTP FTP Explorer, FlashFXP  Chat –Tán ngẩu: Dịch vụ cho phép người dùng trao đổi trực tuyến với qua mạng internet văn bản, âm thanh, hìinh ảnh.Như : AOL, Yahoo messenger HTTP-Hyper Text Tranfer Protocol: Giao thức dùng để giao tiếp với trang Web HTML-Hyper Text Markup Language: Ngôn ngữ đánh dấu siêu văn dùng để thiết kế trang Web WebPage-Trang Web: Là tập tin văn soạn thảo theo ngơn ngữ HTML có phần mở rộng HTML HTM WebSite: Chuyên khu Web tập hợp trang web thuộc chủ đề xác định Home Page: Trang đầu tiên-Trang chủ Website(Index.html, Index.htm, Default.htm ) WebServer: Máy chủ web-Máy tính cấu hình mạnh, lưu trữ trang Web kết nối thường xuyên với mạng cho phép máy khác truy cập thông tin 10 Tên miền-Domain Name-Web Server Name: Để phân biệt Web Server có địa IP ánh xạ tên (VD:www.vietnamnet.vn) Được xem tên giao dịch công ty, tổ chức Internet Tên miền cấp 1: Bao gồm mã quốc gia :Việt Nam: VN, Anh: UK, Mỹ: US, Nhật:.JP ) số lĩnh vực .Com : Thương mại Int : Tổ chức quốc tế Edu : Tổ chức giáo dục Org : Các tổ chức khác Net : Các mạng thơng tin Gov : Tổ chức phủ Info : Các mạng thông tin Mil : Tổ chức quân Trang Giáo Trình Thiết Kế Web – GV Ths Huỳnh Quốc Dũng - Ngôn Ngữ HTML Tên miền cấp 2: Có thể kết hợp lĩnh vực với mã quốc gia để hình thành tên miền cấp www.tuoitre.com.vn Để sở hữu tên miền phải trả chi phí hàng năm thông qua công ty ủy quyền bán tên miền 11 Hosting: Khi hoàn tất website phải ghi lưu vào webserver truy cập thông thường server cùa ISP (Nhà cung cấp dịch vụ Internet hay đơn vị chuyên dụng) Tùy theo dung lượng, băng thông số hỗ trợ mà chi phí khác Trang Giáo Trình Thiết Kế Web – GV Ths Huỳnh Quốc Dũng - Ngôn Ngữ HTML 12 URL-Uniform Resource Location: Địa truy cập trang Web, tập tin Website http://Webservername/……/File.html Trang chủ mặc định không cần khai báo VD: http://www.tuoitre.com.vn Tức là: http://www.tuoitre.com.vn/Index.htm 13 Browser: Trình duyệt Web dùng để đọc hiển thị trang Web Phổ biến: InternetExplorer,Netscape,FireFox, Google chrome II.SOẠN THẢO TRANG WEB Chương trình soạn thảo: Trang web tập tin văn không định dạng, chứa thẻ(Tag) Viết mã nguồn HTML chương trình soạn thảo văn khơng định dạng như: NotePad Khởi động : Start/Program/Accessories/NotePad Ghi chú: Nếu sử dụng chữ có dấu, phải  Thiết lập bảng mã Unicode cho trình gõ VietKey, Unikey,  Chọn Font Unicode trình soạn thảo (Format / Font  Arial , Tahoma, ) Đặt tên, Lưu & Mở tập tin: Tập tin lưu trữ có phần mở rộng là: htm html Lưu tập tin: Tại cửa sổ soạn thảo: File/Save Filename: Tên.html (VD: VD01.html) Save as type: AllFiles Encoding: UTF-8 (Nếu nội dung có dấu )  Save Lưu lại với tên khác: Tại cửa sổ soạn thảo File/Save As Mở tập tin soạn thảo: Tại cửa sổ soạn thảo: File/Open Chọn tập tin cần mở  Open Xem trang Web sau soạn thảo: Cách 1: Mở thư mục lưu trữ  Double Click tập tin htm Cách 2: Khởi động trình duyệt (IE)  File/Open Chọn Browser để tìm tập tin cần mở  Ok  Kết thị Trang Giáo Trình Thiết Kế Web – GV Ths Huỳnh Quốc Dũng - Trang Ngôn Ngữ HTML Giáo Trình Thiết Kế Web – GV Ths Huỳnh Quốc Dũng - Ngôn Ngữ HTML III.CÁC THẺ CỦA TẬP TIN HTML Khái Niệm: Tập tin HTML văn chứa thẻ(Tag)- để tạo thành phần tài liệu Cấu Trúc Tổng Quát Của Thẻ: Thành phần chịu tác động Thẻ đóng Thẻ mở Tên thẻ đặt cặp ngoặc nhọn: < > Có khơng có thuộc tính VD1: Chào Các Bạn  Nội dung in đậm VD2: Chúc bạn học tốt  Nội dung chữ có cỡ Ghi chú: Cho phép thẻ lồng nhau, Cho viết thẻ dòng nhiều dòng Nên viết có cấu trúc Cấu Trúc Tổng Quát Của Tập Tin HTML: Nội dung tiêu đề Phần liệu trang web : Bắt đầu kết thúc tập tin HTML : Phần đầu trang web Nội dung tiêu đề : Hiển thị nội dung tiêu đề Nội dung trang : Hiển thị nội dung trang Ví Dụ Minh Họa Tạo tập tin với nội dung sau Vấn Đề Ngắt Dòng Tạo tập tin với nội dung sau: > BAI TO CO HAI MO CƠ HI MƠ Thơ thẩn đường chiều khch thơ Say nhìn xa rặng ni xanh lơ Khí trời lặng lẽ v trẻo Thấp thĩang rừng mơ, hi mơ Trang Giáo Trình Thiết Kế Web – GV Ths Huỳnh Quốc Dũng - Ngơn Ngữ HTML Khơng xuống dòng soạn thảo mà tự rớt dòng tùy theo kích thước trình duyệt      Để ngắt dòng tạo đoạn mới, tạo dòng trống: Đặt văn cặp thẻ

Để ngắt dòng khơng tạo đoạn mới: Chèn thẻ vị trí muốn ngắt dòng Để giữ phần tử dòng: Đặt văn cặp thẻ Văn bị che khuất chiều rộng cửa sổ trình duyệt khơng đủ&hiện cuộn VD: Tạo tập tin với nội dung sau > BAI TO CO HAI MO CƠ HI MƠ Thơ thẩn đường chiều khch thơ Say nhìn xa rặng ni xanh lơ Khí trời lặng lẽ v trẻo Thấp thĩang rừng mơ, hi mơ Tạo Chú Thích Đặt câu ghi vào cặp thẻ Nội dung câu thích khơng hiển thị trình duyệt V LÀM TƯƠI TRANG WEB – XEM MÃ NGUỒN Làm Tươi Nội Dung Khi thị trang web trình duyệt điều chỉnh nội dung mã nguồn từ trình soạn thảo Khi lưu lại nội dung điều chỉnh, từ trình duyệt ta xem lại kết theo nội dung - Làm tươi: Click biểu tượng Refesh (Hoặc F5) Xem Mã Nguồn Từ trình duyệt xem mã nguồn trang Web: Click Menu View/Source Trang Giáo Trình Thiết Kế Web – GV Ths Huỳnh Quốc Dũng - Ngôn Ngữ HTML Bài 02 ĐỊNH DẠNG VĂN BẢN      Định dạng kí tự Định dạng đoạn Sử dụng màu Văn định dạng trước Chèn đường kẽ ngang ký tự đặc biệt I Định Dạng Ký Tư Định dạng Kiểu dáng - Style  Nội dung văn :  Nội dung văn in đậm  Nội dung văn :  Nội dung văn in nghiêng  Nội dung văn :  Nội dung văn gạch (chân)  Nội dung văn :  Nội dung văn gạch ngang Thay đổi Font, Size  Nội dung văn :  Xác định Font cho Nội dung văn bản, Nếu máy truy cập FontName1 lấy FontName2 lấy Font mặc định trình duyệt  : Xác định cỡ chữ cho tài liệu giá trị n: Từ đến (8,10,12,14,16,24,36) mặc định  Nội dung văn :Xác định cỡ chữ cho nội dung văn VD: Tạo tập tin với nội dung sau BAI TO CO HAI MO

CƠ HI MƠ

Thơ thẩn đường chiều khch thơ Say nhìn xa rặng ni xanh lơ Khí trời lặng lẽ v trẻo Thấp thĩang rừng mơ, hi mơ Tao số Trên/Dưới Văn :  Tạo số cho văn Văn :  Tạo số cho văn VD: VAN BAN CHI SO TREN DUOI Văn có số trên:AX2+BX+C=0 Văn có số : H2O Trang Giáo Trình Thiết Kế Web II ĐỊNH DẠNG ĐOẠN Thiết lập lề trang – GV Ths Huỳnh Quốc Dũng - Ngôn Ngữ HTML Thiết lập lề trái trang (LeftMargin), lề trang (TopMargin)Theo giá trị n1,n2 đơn vị tính Pixcel Canh lề đoạn văn

Đoạn văn

Hướng: Left  Canh trai đoạn văn Right  Canh phải đoạn văn Center  Canh đoạn văn Justify  Canh văn Các thành phần cần canh giữa Tạo văn đề mục Đề mục dòng văn định dạng khác dòng văn nội dung dùng để tạo đề mục phần, chương.Mỗi thẻ có chức phân đoạn, cấp lớn nhất, cấp nhỏ nhất, kết hợp thuộc tính canh lề Nội dung văn đề mục cấp 1 Nội dung văn đề mục cấp 2 Nội dung văn đề mục cấp 6 VD: Đề mục cấp, canh lề giữa Tạo văn thích, trích dẫn Văn thích Văn thích ngiêng, dòng so với văn trước III SỬ DỤNG MÀU Các mã màu Để xác lập màu dùng Tên màu hay Trị thập lục phân tương ứng BẢNG MÃ MÀU Tên màu Trị Tên màu Trị Black Đen #000000 Olive Nâu vàng #808000 Red Đỏ #FF0000 Teal Nâu sẫm #008080 Blue Xanh #0000FF Maroon Nâu #800000 Navy X.Đãm #000800 Gray Xám #808080 Lime V.Chanh #FFFFFF Fuchsia Hồng #FF00FF White Trằng #FFFFFF Green Lá #008000 Rurple Đ.Tía #800080 Silver Bạc #C0C0C0 Yellow Vàng #FFFF00 Aqua Ngọc #00FFFF Xác lập màu chung cho trang Web Dùng thuộc tính thẻ BODY để xác lập màu: nền, văn bản, màu văn liên kết Nội dung trang Web BgColor: Màu trang Text: Màu văn Link: Màu liên kết chưa truy cập VLink: Màu liên kết truy cập Trang Giáo Trình Thiết Kế Web – GV Ths Huỳnh Quốc Dũng - Ngôn Ngữ HTML Alink: Màu liên kết trỏ Mouse Xác lập màu cho văn Dùng thuộc tính Color thẻ FONT để xác lập màu: cho nội dung văn định Nội dung văn VD: Công nghệ thơng tin V ĐƯỜNG KẼ NGANG VÀ KÝ TỰ ĐẶC BIỆT Đường Kẽ Ngang : Tạo đường kẽ ngang dài chiều rộng cửa sổ Size: Độ dày Width: Độ rộng (Pixcel %) Align: canh lề Left(Trái), Center(Giữa),Right(Phải) Color: Màu NoShade: Khơng có bóng VD: Định kích thước ảnh chèn n1, n2 : Là tỷ lệ % so với kích thước đối tượng chứa kích thước tính theo Pixel VD: < IM Src=" /Images/P03.jpg" Width="150" Height="100">  Ảnh chèn kích thước rộng 150Pixel cao 100Pixel  Ảnh chèn kích thước rộng =30% chiều rộng cửa sổ 50% Chiều cao cửa sổ Tạo khung viền cho ảnh n : Độ dày đường viền Canh lề hình ảnh Hướng: Top: Phần đầu thẳng hàng với dòng đầu VB Middle: Phần thẳng hàng với dòng đầu VB Bottom: Phần cuối thẳng hàng với dòng đầu VB Left: Biên trái ảnh thẳng lề trái trang, VB bao quanh bên phải ảnh Right: Biên phải ảnh thẳng lề phải trang, VB bao quang bên trái ảnh Nếu không khai báo mặc định thuộc tính Bottom VD: Tạo tập tin HTM với nội dung sau III NHÚNG TẬP TIN MEDIA Trang 17 Giáo Trình Thiết Kế Web – GV Ths Huỳnh Quốc Dũng - Ngôn Ngữ HTML Các dạng tập tin âm thông dụng Internet: wav, mp3, wmv, wma,.mpeg, Ra, Rm Align, Width, Height : Các thuộc tính điều khiển Control VD: Tạo tập tin HTM với nội dung sau IV NHÚNG MÃ JAVASCRIPT Giới thiệu JavaScript ngôn ngữ kịch cho phép tạo hiệu ứng sống động cho thành phần trang  Script tự động thực hiển tải trang  Script hoạt động có tác động Đặt JavaScript vào bên tài liệu VD: Tạo tập tin HTM có hiệu ứng JavaScript đồng hổ bao quanh trỏ chuột HD: Truy cập Website: wwww.Javascriptbank.com Chọn mục trỏ chuột  Chọn mục chuột có đồng hồ  Khi trang thị chọn View/Source  Sao chép đoạn code từ Đặt vào vị trí thẻ Trên thẻ trang bạn muốn nhúng vào Đặt JavaScript bên tài liệu Thuận lợi áp dụng cho nhiều trang VD: Tạo tập tin ChuotDongho.js chứa mã JavaScript Nhúng tập tin vào số trang Sưu tầm thư viện JavaScript website : www.JavaScriptbank.com , www.echip.com.vn Hoặc tìm kiếm từ : www.google.com.vn V TẠO LIÊN KẾT TRONG TRANG WEB Khái quát  Các siêu liên kết (Hyper Link) cốt lõi tập tin HTML cho phép truy cập đến trang khác máy tính hay máy tính khác  Tài liệu liên kết tập tin: Hình ảnh, âm thanh, Multimedia, HTML  Khi Click vào liên kết truy cập địa truy cập thực tự động Liên kết cục (Local Link)  Là liên kết đến tài liệu Trên máy Doi Tuong Lien Ket VD: Giới thiệu  Đến vị trí trang Web Nhãn liên kết Trang 18 Giáo Trình Thiết Kế Web – GV Ths Huỳnh Quốc Dũng - Ngôn Ngữ HTML Khai báo đích đến: Ghi chú: Tên đích vị trí tập tin VD: Tạo tập tin HTM với nội dung sau

Tin Học Quản Lý

1. Microsoft Access
2. MicroSoft PowerPoint

Đầu trang

Liên kết từ xa(Remote Link) Là liên kết đến tài liệu lưu trữ máy khác  Liên kết đến địa URL Nhãn liên kết VD: Website tin tức việt nam  Liên kết đến địa Email Nhãn liên kết VD: Gởi Mail cho Sẽ mở chương trình mail mặc định để soạn gửi thư Dùng hình ảnh làm nhãn liên kết VD: Mở liên kết cửa sổ riêng Mặc định liên kết mở cửa sổ Để mở cửa sổ riêng sử dụng: Nhãn liên kết Trang 19 Giáo Trình Thiết Kế Web – GV Ths Huỳnh Quốc Dũng - Ngôn Ngữ HTML VD: VD: Tạo tập tin HTM với nội dung sau

DANH BẠ WEBSITE

Tin Tức Tin tức việt nam Bo tuổi trẻ Giải trí Giới thiệu ngơi sao Lin kết quảng co Lin hệ:Gởi mail Tạo liên kết cho tập tin Media Nữ Những mục bạn thường quan tâm Internet : Giải trí Mục khác Trang 24 Giáo Trình Thiết Kế Web – GV Ths Huỳnh Quốc Dũng - Ngôn Ngữ HTML Hộp danh sách chọn – Combobox Chuỗi ký tự Value=”Trò” : Giá trò gửi lên Server Ghi chú: Để thực liên kết người dùng chọn giá trò từ ComboBox Thêm thuộc tính sau vào thẻ onchange="window.open(this.options[this.selectedIndex].value,'_blank')" VD: Taïo trang Lienket.htm Liên kết website Tin tuc - Báo lao động Tin nhanh Việt Nam Báo Tuổi Trẻ VD: Tạo tập tin HTM với nội dung sau PHIẾU THĂM DÒ Ý KIẾN Tên đăng nhập: Giới tính : Nam Nữ Mật khẩu: Sở thích bạn Truy cập Internet Đọc sách báo Xem Tivi Tham quan du lịch Dạo phố & Shopping Những mục bạn thường quan tm trn Internet Tin tức Giải trí Gĩc học tập Cc mục khc Nội dung gĩp ý để website tốt hơn Trang 25 Giáo Trình Thiết Kế Web – GV Ths Huỳnh Quốc Dũng - Ngôn Ngữ HTML Bài THIẾT KẾ KHUNG - FRAME I THIẾT KẾ KHUNG - FRAME  Là kỹ thuật chia trang web thành nhiều Khung, khung hiển thị trang HTML  Không sử dụng thẻ Body thiết kế khung “Trị cột”, “Trị dòng”: + Kích thuớc tuyệt đối tính theo pixel + % kích thước tương đối theo cửa sổ trình duyệt “Url”: Địa tập tin hiển thị khung Ghi : Cho phép thiết kế khung lồng II ĐỊNH DẠNG KHUNG Xác lập đường viền Mặc định khung tạo có đường viền Pixel Có thay thể thay đổi cách dùng thuộc tính sau: n1=1/0:Đường viền hiển thị (Mặc định)/không hiển thị n2: Độ dày đường viền Trị: Tên màu cho đường viền Xác lập khoảng cách lề khung Mặc định khoảng cách nội dung với khung Pixel Có thể xác lập lề khung bằng: n1: Khoảng cách lề trái, phải n2: Khoảng cách lế trên, Xác lập cuộn Mặc định cuộn hiển thị kích thước khung khơng đủ cho nội dung Có thể xác lập lại: Trị: Auto: Trị mặc định hiển thị nội dung vượt kích thước khung Yes: Luôn hiển thi No: Không hiển thi Cố định kích thước khung Mặc định kích thước thay đổi người dùng kéo viền khung Để ngăn cản việc hiệu kích thước III CHỈ ĐỊNH KHUNG HIỂN THỊ CHO LIÊN KẾT Bước 1: Đặt tên khung cho tập tin thiết kế khung Dùng thuộc tính Name thẻ Frame Bước 2: Xác định đích đến cho liên kết : Trong tập tin chứa liên kết, dùng thuộc tính Target thẻ định khung hiển thi Trang 26 Giáo Trình Thiết Kế Web – GV Ths Huỳnh Quốc Dũng - VD: Tạo tập tin Tintuc.HTM với nội dung sau VD: Tạo tập tin DMTin.htm với nội dung sau Trang TinKT.htm Trang TinCT.htm Trang 27 Ngôn Ngữ HTML ... Ngơn Ngữ HTML Giáo Trình Thiết Kế Web – GV Ths Huỳnh Quốc Dũng - Ngôn Ngữ HTML Bài TỔ CHỨC WEBSITE, SỬ DỤNG HÌNH ẢNH, THIẾT LẬP LIÊN KẾT I TỔ CHỨC WEBSITE Các tập tin HTML Website  Website bao... trang Web HTML- Hyper Text Markup Language: Ngôn ngữ đánh dấu siêu văn dùng để thiết kế trang Web WebPage-Trang Web: Là tập tin văn soạn thảo theo ngôn ngữ HTML có phần mở rộng HTML HTM WebSite:... < /html> Giáo Trình Thiết Kế Web – GV Ths Huỳnh Quốc Dũng - Ngôn Ngữ HTML Bài THIẾT KẾ KHUNG - FRAME I THIẾT KẾ KHUNG - FRAME  Là kỹ thuật chia trang web thành nhiều Khung,