Giáo trình hướng dẫn chi tiết về thiết kế website (tự học)

Giáo trình hướng dẫn chi tiết về thiết kế website (tự học), hỗ trợ người học tự học, tự tìm hiểu về lý thuyết và thực hành

ỦY BAN NHÂN DÂN QUẬN THỦ ĐỨC TRƢỜNG TRUNG CẤP NGHỀ THỦ ĐỨC    GIÁO TRÌNH THIẾT KẾ CÁC TRANG WEB (Lƣu hành nội bộ) Tháng …/20… Bài Những khái niệm sở LỜI MỞ ĐẦU Hiện nhu cầu thiết kế trang web tăng trưởng mạnh, đặc biệt doanh nghiệp vừa nhỏ, nhiều doanh nghiệp ý thức việc phải có trang web bắt mắt, giao diện thân thiện, thu hút người dùng internet Qua đó, giúp doanh nghiệp đẩy mạnh kênh thương mại điện tử, giúp doanh nghiệp có thêm kênh tiếp thị trực tuyến hiệu Website gồm có 02 loại: website tĩnh website động - Website tĩnh website bao gồm trang web tĩnh khơng có sở liệu kèm - Web động thuật ngữ dùng để website có sở liệu hỗ trợ phần mềm phát triển web Như vậy, điểm khác biệt website tĩnh động website động có sở liệu website tĩnh khơng Để bắt đầu làm quen với việc thiết kế web việc thiết kế website tĩnh Nhằm có kiến thức tạo web giáo trình trình bày cách tạo Web tĩnh ngơn ngữ HTML phần mềm thiết kế Microsoft Office Frontpage Giáo trình gồm có 08 bao gồm hướng dẫn lý thuyết tập thực hành hỗ trợ cho trình học lớp tự học học sinh trình độ trung cấp nghề Người biên soạn Bài Những khái niệm sở BÀI NHỮNG KHÁI NIỆM CƠ SỞ Mục tiêu bài:  Trình bày khái niệm WWW, HTML;  Mô tả đặc diểm siêu văn  Phân biệt Website homepage 1.1 World Wide Web gì? World Wide Web (WWW) mạng tài nguyên thông tin WWW dựa chế để tài nguyên trở nên sẵn dùng cho người xem rộng rãi tốt: - Cơ chế đặt tên dạng việc định dạng tài nguyên WWW (như URL) - Các giao thức, để truy nhập tới tài nguyên qua WWW (như HTTP) - Siêu văn bản, để dễ dàng chuyển đổi tài nguyên (như HTML) Các ràng buộc ba chế nêu rõ Giới thiệu URL: Mọi tài nguyên sẵn dùng WWW – tài liệu HTML, ảnh, video clip, BÀI trình,… - có địa mà mã hóa URL Các URL thường gồm phần: - Việc đặt tên chế dùng để truy nhập tài nguyên - Tên máy tính lưu trữ (tổ chức) tài nguyên - Tên thân tài nguyên, đường dẫn Ví dụ coi URL rõ trang W3C Technical Reports: http://www.w3.org/TR URL đọc sau: Có tài liệu sẵn dùng theo giao thức HTTP, lưu máy www.w3.org, truy nhập theo đường dẫn “/TR” Các chế khác ta thấy tài liệu HTML bao gồm “mailto” thư điện tử “ftp” FTP Đây ví dụ khác URL Ví dụ ám tới hộp thư (mailbox) người dùng: ….đây văn … Mọi góp ý, xin gửi thư tới Joe Cool Các định danh đoạn (fragment identifiers): Một số URL ám tới việc định vị tài nguyên Kiểu URL kết thúc với “#” theo sau dấu hiệu kết nối (gọi định danh đoạn) Ví dụ, URL đánh dấu móc tên section_2: http://somesite.com/html/top.html#section_2 Các URL tƣơng đối: Một URL tương đối không theo chế đặt tên Đường dẫn thường tham chiếu tới tài nguyên máy tài liệu Các URL tương đối có Trang Bài Những khái niệm sở thể gồm thành phần đường dẫn tương đối (như “ ” nghĩa mức cấu trúc định nghĩa đường dẫn), bao gồm dấu hiệu đoạn Các URL giải toàn URL sử dụng URL gốc Như ví dụ giải pháp URL tương đối, giả sử có URL gốc “http://www.acme.com/support/intro.html” URL tương đối đánh dấu cho liên kết siêu văn bản: Suppliers mở rộng thành URL đầy đủ “http://www.acme.com/support/suppliers.html” URL tương đối việc đánh dấu cho ảnh mở rộng thành URL đầy đủ “http://www.acme.com/icons/logo.gif” Trong HTML, URL dùng để: - Liên kết tới tài liệu tài nguyên khác, (xem A LINK) - Liên kết tới kiểu dạng bên kịch (script) (xem LINK SCRIPT) - Gồm ảnh, đối tượng, applet trang, (xem IMG, OBJECT, APPLET INPUT) - Tạo dồ ảnh (xem MAP AREA) - Tạo form (xem FORM) - Tạo khung tài liệu (xem FRAME IFRAME) - Trích dẫn dẫn bên (xem Q, BLOCKQUOTE, INS DEL) - Tham khảo quy ước siêu liệu mô tả tài liệu (xem HEAD) Ngày người ta dùng máy tính cơng cụ hữu ích để truy nhập Internet, chủ yếu tìm kiếm thơng tin Các thơng tin văn bản, hình ảnh âm hay thơng tin đa phương tiện… Với giao diện thân thiện việc sử dụng ký hiệu, biểu tượng gợi tả gần giống với hình ảnh đời thường cần thao tác đơn giản ta có thơng tin cần tìm kiếm trước mặt Nhu cầu sử dụng máy tính để truy cập Internet tìm kiếm thơng tin ngày nhiều người sử dụng máy tính có trình độ tin học tiếng Anh để hiểu thông báo máy khác Làm để người dễ dàng sử dụng máy tính để truy cập Internet công cụ phục vụ đắc lực cho việc tra cứu tìm kiếm thơng tin mạng thơng tin rộng lớn tồn cục Việc trở nên dễ dàng ý tưởng siêu văn (Hypertext) Siêu văn văn “thơng minh” giúp người đọc tìm cung cấp cho họ tài liệu liên quan Người đọc khơng phải cơng tìm kiếm kho thơng tin Internet vô tận Khái niệm siêu văn nhà tin học Ted Nelson đề xuất vào năm 1965 ước mơ (“Computer Dreams”) khả máy tính tương lai Ơng hy vọng máy tính có trí tuệ người, biết cách truy tìm thơng tin cần thiết Dự án thực siêu văn kỹ sư trẻ người Anh tên Tim Berners – Lee Sau tốt nghiệp Đại học Oxfort (Anh) năm 1976, năm 1980 Tim viết BÀI trình mơ mối liên kết hai chiều đồ thị kiểu liên kết siêu văn Năm 1989, làm việc Viện nghiên cứu kỹ thuật hạt nhân châu Âu (CERN) Berne (Thụy sỹ), thấy đồng nghiệp vất vả việc tra tài liệu, Tim Trang Bài Những khái niệm sở đưa đề án lưu trữ siêu văn máy tính cho dễ dàng tìm kiếm tài liệu Trong giới siêu văn WWW, người sử dụng dễ dàng từ tài liệu sang tài liệu khác thông qua mối liên kết Như ta du lịch xa lộ thông tin phong phú ngồi nhà Kỹ thuật siêu văn giúp cho ta sang tận Luvrơ Paris mà chiêm ngưỡng kiệt tác hội họa Chính góp phần tạo bước phát triển bùng nổ Internet năm gần 1.2 HTML gì? Để phổ biến thơng tin tồn cục, cần ngôn ngữ phổ biến dễ hiểu, kiểu việc phổ biến tiếng mẹ đẻ mà toàn máy tính hiểu Ngơn ngữ phổ biến dùng World Wide Web HTML (Hyper Text Markup Language) HTML cho tác giả ý nghĩa để: Phổ biến tài liệu trực tuyến với heading, văn bản, bảng, danh sách, ảnh, v.v… Truy tìm thơng tin trực tuyến theo liên kết siêu văn việc kích vào nút Thiết kế định dạng cho việc kiểm soát giao dịch (transaction) với thiết bị từ xa, người dùng việc tìm kiếm thông tin, tạo sản phẩm, đặt hàng,.v.v… Bao gồm spread-sheets, video clips, sound clips, ứng dụng trực tiếp khác tài liệu họ Các trang Web đầy sinh động mà bạn thấy World Wide Web trang siêu văn viết ngôn ngữ đánh dấu siêu văn hay HTML - HyperText Markup L ngu g cho ph p ạn tạo r c c tr ng ph i hợp h i hịa v n n th ng thường với hình nh m th nh vi o c c m i i n ết đến c c tr ng si u v n n h c n gọi ng n ng nh ấu si u v n n ph n nh đ ng thực chất củ c ng cụ n y Đ n u Markup): ng n ng củ c c th đ nh ấu x c định c ch th c trình y đoạn v n n tư ng ng tr n m n hình g c th n y nn Language): ng n ng tư ng tự c c ng n ng ập trình nhi n đ n gi n h n N c c ph p ch t ch đ viết c c nh thực hi n vi c trình i n v n n c t ho c ngh x c định cộng đồng nt rn t th nhận v s ụng ụ o ul = unordered list, n n Text): đ u ti n v trước hết đ trình y v n n v ự tr n t ng v n n c th nh ph n h c hình nh m th nh hoạt hình ph i c m n o v o đoạn v n n n o đ u v n n (Hyper): HTML cho ph p i n ết nhiều tr ng v n n r i r c h p n i tr n nt rn t N c t c ụng ch ấu ph c tạp củ nt rn t đ i với người s ụng Người ng nt rn t c th đọc v n n m h ng c n iết đến v n n đ n m đ u h th ng x y ựng ph c tạp n o thực đ vượt r ngo i hu n h h i ni m v n n c n Trang Bài Những khái niệm sở 1.3 Các đặc điểm siêu văn 1.3.1 Độc lập với phần cứng phần mềm độc ập với ph n c ng v ph n mềm Một tài liệu HTML viết phần mềm soạn thảo cụ thể bất kỳ, máy cụ thể đọc hệ thống tương thích Điều có nghĩa tệp siêu văn trình duyệt hiển thị MAC hay PC tùy ý mà sửa chữa thay đổi c t nh chất n y c c th ch i n đạt y u c u c n ph i m ch h ng cụ th c n m n o Cũng lẽ mà bạn h ng th ch c ch n tr ng t i i u si u v n n củ ạn s hi n n m n hình ch nh x c n o c n tu th o trình uy t th hi n c c th nh ph n HTML rong thực ti n ch thực độc ập đ i với ph n c ng chư ho n to n độc ập đ i với ph n mềm Chỉ phần cốt lõi chuẩn hoá, c n phần mở rộng nhà phát triển xây dựng khơng hồn tồn tương thích 1.3.2 Độc lập với khái niệm trang thứ tự trang Một tính chất HTML độc lập với khái niệm trang Văn trình bày tùy theo kích thước cửa sổ hiển thị: cửa sổ rộng bề ngang thu ngắn hơn, cửa sổ hẹp bề ngang k o dài để hiển thị cho hết nội dung Độ dài văn HTML thực không bị hạn chế Trang Bài Những khái niệm sở 1.3.3 Website trang chủ - homepage Một website bó trang web liên kết với liên kết với trang bên chằng chịt mạng nhện Hàng triệu Website liên kết với tạo thành World Wide Web – WWW Có thể tưởng tượng núi nhỏ trang web ngày cao thêm, phát triển cách thêm vào nhiều trang web lý thú khác Có thể minh hoạ hình ảnh website hình vẽ bên Trang chủ hay trang - home page hiểu cửa - front door để thâm nhập vào kho thơng tin liên kết chằng chịt Vậy home page trang web mà duyệt mở người dùng bắt đầu thăm website 1.4 Soạn thảo văn - vấn đề chung 1.4.1 Trang mã nguồn HTML trang Web r ng m nguồn t p v n n ình thường gồm c c th tạo r ng ất c trình soạn th o th ng thường n o h o quy ước tất c c c t p m nguồn củ tr ng si u v n html ho c htm tự c n ph i c đu i Khi trình uy t rows r đọc tr ng m nguồn HTML, s ịch c c th nh v hi n thị n m n hình m y t nh t thường gọi tr ng ậy tr ng w h ng tồn tr n đ c ng củ m y t nh cục N c i th hi n củ tr ng m nguồn qu vi c x Trang Bài Những khái niệm sở lý củ trình uy t Như sau ta thấy, trình duyệt khác hiển thị trang mã nguồn khơng hồn tồn giống N i soạn th o si u v n n t c độ uy t hi u v hi n thị đ ng tạo r tr ng m nguồn đ ng quy định đ Sử dụng HTML để soạn thảo trang siêu văn bản, nguy n t c c ng h ng h c so với ng c c ộ soạn th o v n n th ng thường Ch ng hạn, soạn thảo văn thông thường, để làm bật tiêu đề ta phải đánh dấu chọn cỡ to, BÀI trình soạn thảo văn ch n dấu hiệu thích hợp (ta khơng nhìn thấy được) vào đầu cuối đoạn tiêu đề chọn để thể theo yêu cầu Với HTML tương tự Để làm bật tiêu đề ta cần đánh dấu điểm bắt đầu điểm kết thúc đoạn tiêu đề cặp thẻ Heading, ví dụ ộ duyệt hiển thị đoạn với cỡ chữ to Ví dụ, d ng sau tài liệu HTML Ti u đ mức 1 trình duyệt hiển thị thành Ti u đ mức Hiện có nhiều cơng cụ soạn thảo siêu văn mạnh Microsoft FrontPage, DreamWeaver với gi o i n trực qu n v tự động sinh m cho ph p soạn th o si u v n n soạn th o th ng thường Tuy nhiên, vi c tìm hi u c ph p củ nh u c n thiết đ c th tạo r c c tr ng t c c c ng ụng s u n y n m v ng ngh củ c c th h c động tư ng t c với người s ụng 1.4.2 Các thẻ HTML ho c c th ng đ o cho trình uy t c ch th c trình y v n n tr n m n hình ng đ ch n m i i n ết đến c c tr ng h c, đoạn BÀI trình h c ỗi th gồm t h n ho - KEYWORD - o ọc ới h i ấu h n v ớn > u hết c c nh th hi n ng c p h i th th m v th đ ng ( ấu gạch chéo ("/" hi u th đ ng nh s t c động v o đoạn v n n n m gi h i th Đoạn văn chịu tác động lệnh ột s th h ng c c p ch ng gọi m m th i c c th n h y th đơn h c th Nhiều th c m c c thuộc t nh (attribute) cung cấp th m c c th m s chi tiết h n cho vi c thực hi n nh c thuộc t nh chi m h i oại thuộc t nh t uộc v thuộc t nh h ng t uộc h y tu chọn Trang Bài Những khái niệm sở ột thuộc t nh t uộc ph i c n th nh thực hi n Ví dụ, để ch n hình ảnh vào trang tài liệu ta dùng thẻ (Image) Tuy nhiên, cần rõ ảnh dán vào Điều thiết lập thuộc tính SRC="địa ch tệp ảnh" Thuộc tính SRC bắt buộc phải có thẻ 1.4.3 Các quy tắc chung Một số điều cần lưu ý soạn thảo siêu văn HTML: - Nhiều ấu c ch iền nh u c ng ch c t c ụng ấu cách ụng th đ th hi n nhiều ấu gi n c ch iền nh u - nt r đ xu ng ng x m ấu c ch đ xu ng h ng ch ng t ph i s ụng th tư ng ng - th viết tên th ạn ph i s h ng ph n i t ch in thường v in ho ì c c tự ấu ớn h n > ấu nh h n < đ ng m th đ nh ấu o đ đ hi n thị c c tự n y quy định c ch viết > < Nói chung, quy t c viết c c tự đ c i t n m gi ấu mp rs n - v ấu chấm ph y t n_quy_định củ tự &t n_quy_định; ký tự đặc biệt hay dùng t < > “ Ký tự trắng & Cách vi t < > "   & Có thể ch n d ng bình luận, thích vào trang mã nguồn cách đặt cặp dấu thích Trình duyệt bỏ qua khơng x t đến phần mã nằm cặp dấu đó: Trang Bài Những khái niệm sở 1.4.4 C u trúc tài liệu HTML ọi t i i u c cấu tr c s u Hãy xem trình duyệt hiển thị tài liệu Dĩ nhiên trang trắng chưa có nội dung i c p th ti u đề ng ch s hi n n tr n th nh ti u đề củ c s hi trình uy t đọc t i i u Nếu tr ng trình uy t s cho hi n t n t p th y v o đ o n ộ nội ung củ t i i u n m gi h i th x c định th n củ tr ng Các d ng văn bản, hình ảnh, âm thanh, video, mối liên kết tạo nên trang Web phải nằm Ví dụ tài liệu HTML đơn giản đây: Chỗ ti u đ Toàn nội dung tài liệu nằm đây: Các đoạn văn xen lẫn hình ảnh, âm thanh, video, liên kết đến vị tr khác, tài liệu khác Hãy xem trình duyệt trình bày tài liệu Nhớ lại nhiều dấu cách coi một, dấu xuống d ng thể dấu cách nên tài liệu hoàn toàn tương đương với tài liệu sau đây: Chỗ ti u đ Toàn nội dung tài liệu nằm đây: Các đoạn văn xen lẫn hình ảnh, âm thanh, video, liên kết đến vị trí khác, tài liệu khác

Tuy nhiên, để dễ theo dõi phát lỗi, nên trình bày văn trước: dóng th ng cột cặp thẻ, xuống d ng cần thiết, đặt thẻ vào nơi hợp lý Trang ... điểm khác biệt website tĩnh động website động có sở liệu website tĩnh khơng Để bắt đầu làm quen với việc thiết kế web việc thiết kế website tĩnh Nhằm có kiến thức tạo web giáo trình trình bày cách... tĩnh ngơn ngữ HTML phần mềm thiết kế Microsoft Office Frontpage Giáo trình gồm có 08 bao gồm hướng dẫn lý thuyết tập thực hành hỗ trợ cho trình học lớp tự học học sinh trình độ trung cấp nghề Người... tiếp thị trực tuyến hiệu Website gồm có 02 loại: website tĩnh website động - Website tĩnh website bao gồm trang web tĩnh khơng có sở liệu kèm - Web động thuật ngữ dùng để website có sở liệu hỗ trợ