Thông tin tài liệu
TRƯỜNG ĐẠI HỌC NHA TRANG KHOA CÔNG NGHỆ THÔNG TIN Bài giảng Thiết kế Trang Web BIÊN SOẠN Hồ Thò Thu Sa LƯU HÀNH NỘI BỘ Nha Trang 06-2003 CHƯƠNG I MỞ ĐẦU I. Sơ lược Internet : Internet - được biết với tên gọi là NET - là mạng máy tính lớn nhất thế giới hoặc chính xác hơn là mạng của các mạng, tức bao gồm nhiều mạng máy tính được nối lại với nhau. Internet là công nghệ thông tin liên lạc mới, nó tác động sâu sắc vào xã hội, cuộc sống của chúng ta, là phương tiện cần thiết ở mức độ bao quát. Internet đã đưa chúng ta vào một thế giới có tầm nhìn rộng hơn và chúng ta có thể : viết thư, đọc báo, xem các bản tin, giải trí, tra cứu, buôn bán, giao lưu Khả năng của Internet rất lớn và có thể tóm lược một số điểm chính sau : Thư điện tử (E-mail) World Wide Web (Web) Truy xuất dữ liệu Internet ra đời từ những năm 70, ngày nay đã trở thành siêu xa lộ thông tin của thế giới. Việt Nam chính thức gia nhập Internet từ tháng 12/97, số lượng người tham gia vào mạng Internet một ngày đông hơn. Trong tương lai việc sử dụng Internet đối với mỗi người là điều không cao xa. Cho nên việc sử dụng Web sẽ rất bổ ích cho người dùng Internet. Với người dùng Internet, Web có sức hấp dẫn bởi : Web hiển thị thông tin theo chế độ đồ họa hơn hẳn những dòng text buồn tẻ trước đây. Tuy nhiên, điều đáng nói ở đây khi đề cập đến Web là khả năng bao trùm rộng lớn của nó, trên Web thông tin sẽ đến với tất cả mọi người. II. Nguồn gốc World Wide Web : Khái niệm siêu văn bản do nhà tin học Ted Nelson đưa ra từ năm 1965 trong bài viết "Computer Dreams" bàn về ý tưởng tạo ra máy tính có tư duy như người, ông đã nói đến khái niệm siêu văn bản và muốn cả thế giới có một hệ thống siêu văn bản. Tin học hóa khái niệm siêu văn bản bắt nguồn từ ý tưởng nhà kỹ sư trẻ người Anh tên là Tim Berners-Lee. Từ năm 1980, ông đã viết được chương trình nhằm mô phỏng sự liên kết hai chiều, ý tưởng kết nối của siêu văn bản. Từ năm 1989, ông chuyển về Viện kỹ thuật hạt nhân Châu Âu (CERN - European Laboratory For Particle Physics) ở Thụy Sỹ và đưa ra dự án lưu trữ siêu văn bản trên máy tính nhằm giúp dễ dàng tìm các tài liệu liên quan. Khi mà Tim Berners-Lee và các chuyên gia của cơ quan CERN áp dụng khái niệm siêu văn bản với Internet bằng HTTP (HyperText Tranfer Protocol - Giao thức truyền siêu văn bản), World Wide Web coi như được khai sinh gọi tắt là Web với mục đích trao đổi thông tin và chia xẻ các nhóm tin trên mạng. World Wide Web (còn được viết tắt WWW) là dịch vụ kết nối trực tuyến cho phép người sử dụng tra cứu thông tin dưới dạng các trang siêu văn bản tham chiếu (móc nối) lẫn nhau chứa văn bản, hình ảnh, âm thanh, video Các trang văn bản này thông thường được thiết kế bằng ngôn ngữ HTML (HyperText Markup Language) là các tập tin có phần mở rộng HTM hoặc HTML. Web hiện nay đang "linh hồn" trên Internet. Các trang siêu văn bản này được nối với nhau qua những sợi dây liên lạc mà các dây này được dấu ở dưới các từ hay hình ảnh trong các văn bản. `Ìi`ÊÜÌÊvÝÊ*Ê`ÌÀÊ ÊvÀiiÊvÀÊViÀV>ÊÕÃi° /ÊÀiÛiÊÌÃÊÌVi]ÊÛÃÌ\Ê ÜÜÜ°Vi°VÉÕV°Ì 2 Ví dụ : Trên Internet chúng ta đọc một bài báo giới thiệu các điểm du lịch của đất nước Việt Nam. Trong bài báo có cụm từ Việt Nam chúng ta nhấp chuột vào (xuất hiện bàn tay) lập tức một bài báo tiếp theo giới thiệu các điểm du lịch của Việt Nam (như Hà Nội, Huế, Thành phố Hồ Chí Minh, Nha Trang ). Muốn xem tiếp tục nữa chúng ta cứ nhấp chuột vào những vị trí có gạch dưới. Hoặc là nhấp chuột vào các hình ảnh Các bài viết như vậy người ta gọi là Hypermedia Document, hay là Hyperdocument, tên thường gọi là trang Web (hay Web Page). Ngày nay các trang Web trên Internet ngày càng đa dạng và phong phú, còn có : hình ảnh, âm thanh, phim ảnh Do đó từ Hyperdocument được thay thế bởi từ HyperText. World Wide Web có thể hiểu là mạng lưới toàn cầu. Mạng lưới ở đây là mạng lưới các máy điện toán. Vì tên gọi như vậy nên nhiều người lầm tưởng Internet là World Wide Web, nó được sinh ra, tồn tại và phát triển nhờ Internet. Hay nói cách khác World Wide Web là một sản phẩm hay một dịch vụ của Internet. Các khái niệm cơ bản : -Trang Web (Web page) và HTML : Ngôn ngữ HTML là chìa khóa để tạo trang Web. HTML lại sử dụng các thẻ (tag) để định dạng và định nghĩa các đoạn văn bản trong một trang Web. -Web site : là tập hợp các trang Web có liên hệ với nhau và các tập tin khác được liên kết lại với nhau. Mỗi Web site đều có một địa chỉ riêng bắt đầu bằng : http:// -Trang chủ (Home Page) : trên mỗi Web site có một trang Web được gọi là trang chủ. Đây là trang Web mà người dùng sẽ nhìn thấy đầu tiên khi truy cập vào một Web site. - Trình duyệt Web (Web Browser) : dùng để đi vào từng trang Web trên World Wide Web. Các trình duyệt không hiển thị theo cùng một cách, do đó sự xuất hiện các trang Web khác nhau cũng có thể khác nhau giữa trình duyệt này với trình duyệt kia. - Web server : lưu giữ các trang web và chứa phần mềm phục vụ các yêu cầu trang Web được cài đặt trên máy chủ. Web server nhận yêu cầu và trả về các trang Web. III. Những yêu cần của việc thiết kế Web site : - Bước đầu tiên trong công đoạn thiết kế một Web site : Chúng ta sẽ "xuất bản" cái gì với Web site của mình. Không có chủ định và mục tiêu rõ ràng thì cả Web site đó sẽ trở nên lan man, sa lầy và cuối cùng đi đến một điểm khó có thể quay trở lại. Thiết kế cẩn thận và định hướng rõ là những chìa khóa dẫn đến thành công trong việc xây dựng một Web site. - Trước khi xây dựng một Web site, chúng ta nên : Xác định đối tượng độc giả của Web site. Web site có mục đích rõ ràng. Thiết lập các chủ đề chính của Web site. Thiết kế các khối thông tin chủ yếu mà Web site sẽ cung cấp. Chúng ta cũng nên bắt đầu với việc xác định nguồn tài nguyên về nội dung, hình ảnh thông tin mà chúng ta cần đến để tạo nền trang Web phù hợp với mục đích được đề ra - đó là nguồn thông tin sẽ duy trì cho trang Web hoạt động sau này nữa. - Để thiết kế trang Web có rất nhiều công cụ để làm việc, nhưng có thể chia làm 2 loại : dành cho những người nghiệp dư Microsoft Word 97, Netscape Composer, Web Factory và người chuyên nghiệp Microsoft FrontPage, HotDog, Adobe PageMill, JavaScript, Java, VBScript `Ìi`ÊÜÌÊvÝÊ*Ê`ÌÀÊ ÊvÀiiÊvÀÊViÀV>ÊÕÃi° /ÊÀiÛiÊÌÃÊÌVi]ÊÛÃÌ\Ê ÜÜÜ°Vi°VÉÕV°Ì 3 Để duyệt Web site người ta thường dùng các trình duyệt thông dụng như : Internet Explorer, Netscape Navigator hoặc Opera. CHƯƠNG II GIỚI THIỆU NGÔN NGỮ HTML (HyperText Markup Language) I. Sơ lược về ngôn ngữ HTML : HyperText Markup Language được hiểu là "Ngôn ngữ đánh dấu siêu văn bản" và chúng có ý nghĩa như sau : Siêu văn bản (HyperText) : Liên kết siêu văn bản là một từ, một câu, một hình ảnh trong trang Web dùng để "chỉ " đến trang Web khác. Khi nhấp chuột lên một trong các liên kết này, trình duyệt Web sẽ đưa chúng ta đến tức khắc đến trang Web khác. Vì những liên kết siêu văn bản này thật sự là tính năng đặc trưng của World Wide Web, các trang Web thường được biết như là những tài liệu siêu văn bản. Cho nên HTML có từ "siêu băn bản" trong tên của nó. Đánh dấu (Markup) : Đó là các lệnh chi tiết về kiểu dáng, được đánh vào tài liệu văn bản để đưa lên World Wide Web. Trong HTML nó gồm một vài mã đơn giản để tạo ra những văn bản có nét nghiêng, đậm, dấu chấm đầu dòng vào những nơi cần định dạng trong tài liệu, các trình duyệt Web sẽ thực hiện việc dịch chúng. Ngôn Ngữ (Language) : Đây không phải là một ngôn ngữ lập trình, HTML là ngôn ngữ chỉ vì nó tập hợp nhỏ các nhóm từ, chữ mà chúng ta quy định kiểu dáng như nét đậm, nét nghiêng Cho nên HTML là một sự định dạng để Web browser hiển thị những tài liệu multimedia. Bản thân tài liệu chỉ là những tập tin văn bản đơn giản (ASCII) với những Tag hoặc với những đoạn mã đặc biệt mà một Web browser biết cách thông dịch và hiển thị nó trên màn hình. Để viết ngôn ngữ HTML ta có thể dùng các phần mềm soạn thảo văn bản chẳng hạn : WordPad, NotePad II. Cấu trúc cơ sở của trang HTML : <html> <head><title> </title></head> <body> </body> </html> - <html> và </html> : Bắt đầu và kết thúc trang Web - <head> và </head> : Phần tiêu đề, chứa đựng những thông tin về tài liệu và không được hiển thị trên màn hình. - <body> và </body> : Phần nội dung, chứa đựng những thông tin được trình bày lên màn hình. III. Khái niệm về thẻ (Tag) của HTML : `Ìi`ÊÜÌÊvÝÊ*Ê`ÌÀÊ ÊvÀiiÊvÀÊViÀV>ÊÕÃi° /ÊÀiÛiÊÌÃÊÌVi]ÊÛÃÌ\Ê ÜÜÜ°Vi°VÉÕV°Ì 4 Khi dùng trình duyệt Web để hiển thị nội dung một Web site, trình duyệt sẽ đọc từ một file văn bản đơn giản và tìm kiếm những đoạn mã đặc biệt hay những thẻ được đánh dấu bởi ký hiệu < và >. Cấu trúc của m ột cặp th ẻ HTML l à : <tên th ẻ th uộc tí n h 1 = gi á trị 1 th uộc tí n h 2 = gi á trị 2 > </tên th ẻ> Ví dụ 1: <b > Th ẻ HTML l à gì ? </b > Th ẻ n ày sẽ ch o h i ển th ị dòn g ch ữ Th ẻ HTML l à gì ? đượ c x uất ra dướ i dạn g ch ữ i n đậm . Thẻ HTML l à gì ? Ví dụ 2: <p al i gn = cen ter> can h gi ữa v ăn b ản Những thẻ HTML báo cho trình duyệt biết khi nào cần in đậm một dòng văn bản, in nghiêng, làm cho nó trở thành một header, hoặc làm cho nó là một hypetext liên kết tới một trang Web khác. Điều quan trọng là phải có thẻ kết thúc </tên thẻ>. Nếu như bạn quên dấu “/” thì trình duyệt sẽ thể hiện hiệu ứng của tag trong phần còn lại của văn bản và tạo ra kết quả không mong muốn. Chú ý : Trì n h duy ệt kh ôn g quan tâm tới v i ệc ch ún g ta sử dụn g ch ữ h oa h ay ch ữ th ườ n g tron g các th ẻ. Ví dụ <h 3> </h 3> h ay </H3> </H3> h ay </h 3> </H3> đều n h ư n h au. Có m ột số th ẻ kh ôn g có th ẻ kết th úc </tên th ẻ> Một th ẻ có th ể có n h i ều th uộc tí n h . Các th uộc tí n h của th ẻ đượ c ch ứa tron g <tên th ẻ>, th ứ tự của các th uộc tí n h kh ôn g quan trọn g. Nếu m ột số th ẻ có ch ứa các th uộc tí n h n h ưn g kh ôn g đưa v ào tron g th ẻ, th ì đượ c h i ểu các th uộc tí n h sẽ sử dụn g gi á trị m ặc đị n h của n ó. IV. Các lo ại th ẻ (Tag) : 1) Thẻ tiêu đề : Th ẻ : <ti tl e> </ti tl e> -Được sử dụng để làm tiêu đề cho trang Web. Khi hiển thị các chương trình HTML, tiêu đề của các trang này được hiển thị trên thanh tiêu đề của trình duyệt Web. Thông thường các tiêu đề này được đặt sao cho mang ý nghĩa tổng quát của nội dung dữ liệu chứa trong trang Web. Thẻ này phải nằm trong phần <head> Ví dụ : <h ead> <ti tl e> My W eb Page </ti tl e> </h ead> 2) Thẻ chú thích : Th ẻ : <! v à > Th ẻ ch ú th í ch sẽ l àm rõ n ội dun g ý ch ún g ta m uốn di ễn gi ải . Dòn g v ăn b ản sẽ n ày sẽ kh ôn g đượ c h i ển th ị ra m àn h ì n h kh i duy ệt tran g W eb . Ví dụ : <h ead> <ti tl e> m y web page </ti tl e> <! day l a don g gh i ch u > </h ead> 3) Thẻ định dạng đề m ục (Headings) -Các cặp th ẻ : <h 1> </h 1> ; <h 2> </h 2> ; <h 3> </h 3>; <h 4> </h 4> ; <h 5> </h 5> ; <h 6> </h 6>; ` Ì i ` Ê ÜÌ Ê v Ý Ê * Ê ` Ì À Ê Ê v Ài i Ê v À Ê V i À V > Ê Õ Ã i ° / Ê Ài Û i Ê Ì Ã Ê Ì V i] Ê Û Ã Ì \ Ê Ü Ü Ü° V i °V É Õ V ° Ì 5 Ngôn ngữ HTML đưa ra 6 cấp độ để định dạng đề mục được đặt tên từ H1 đến H6. Mỗi trình duyệt Web sẽ thể hiện các cấp độ khác nhau và nó còn tùy thuộc vào font được chọn và các tùy chọn khác tác động lên đoạn văn bản nữa (ví dụ in đậm hoặc in nghiêng). Sau đây chúng ta sử dụng sáu cấp độ của Heading để thể hiện trong ví dụ dưới đây : Ví dụ 1: <html> <head> <title> My web page </title></head> <body> <h1 align = center> Tên tiêu đề ở cấp độ 1 </h1> <h2 align = right> Tên tiêu đề ở cấp độ 2 </h2> <h3 align = center> Tên tiêu đề ở cấp độ 3 </h3> <h4 align = left> Tên tiêu đề ở cấp độ 4 </h4> <h5 align= center> Tên tiêu đề ở cấp độ 5 </h5> <h6> Tên tiêu đề ở cấp độ 6 </h6> </body> </html> Ví dụ 2 : <h1> Heading Level 1 </h1> <h2> Heading Level 2 </h2> <h3> Heading Level 3 </h3> <h4> Heading Level 4 </h4> <h5> Heading Level 5 </h5> <h6> Heading Level 6 </h6> Sau khi dùng trình duyệt Web để thể hiện ta sẽ nhìn thấy các cấp độ của heading như sau : Heading level 1 Heading level 2 Heading level 3 Heading level 4 Heading level 5 Heading level 6 Các đoạn văn bản được tác động bởi các cấp độ của heading là khác hoàn toàn với các tiêu đề của một trang HTML. Các đoạn văn bản được tác động bởi các lệnh thẻ heading sẽ hiển thị trực tiếp lên trên trang Web. Các cấp độ của tag heading được sắp xếp từ 1 (quan trọng nhất) đến 6 (ít quan trọng nhất). Chú ý trên trình duyệt chúng ta có thể thay đổi font, size cho từng cấp độ tiêu đề. Các mã HTML chỉ đưa ra các cấp độ như vậy còn thể hiện như thế nào tùy thuộc vào sự điều khiển thông qua trình duyệt. 4) Thẻ phân đoạn các khối dữ liệu: 4.1. Thẻ <p> Dấu ngắt đoạn(Paragraph Break) : Định dạng cho 1 paragraph `Ìi`ÊÜÌÊvÝÊ*Ê`ÌÀÊ ÊvÀiiÊvÀÊViÀV>ÊÕÃi° /ÊÀiÛiÊÌÃÊÌVi]ÊÛÃÌ\Ê ÜÜÜ°Vi°VÉÕV°Ì 6 Trình duyệt sẽ bỏ qua tất cả ký tự xuống dòng (carriage returns) được đánh trong trình soạn thảo. Nhưng khi trình duyệt nhìn thấy thẻ chia đoạn, nó sẽ chèn một dòng trống và bắt đầu một đoạn mới. Chú ý : Chúng ta dùng <p> </p> hoặc <p> Thẻ <h1> <h6> có gắn liền với sự phân chia đoạn nên không cần thiết đặt tag <p> trước một thẻ tiêu đề. 4.2. Thẻ <hr> (Hard Rule) Chèn vào một đường thẳng. - Các thuộc tính : number = n : độ dày của đường được tính bằng điểm. n = 1, 2, 3,4 width = number/percent : chiều rộng của đường, tính theo điểm hay tỷ lệ phần trăm (thường được sử dụng từ 1% 100%). align = left / center / right : canh lề văn bản. color = tên màu : màu sắc của đường thẳng. Ví dụ : <hr size=10 width = 50% align = center color = blue> Chú ý : Trình duyệt Netscape Navigator không hỗ trợ màu cho đường thẳng. 4.3. Thẻ <br> : (Break) Ngắt dòng, sẽ đẩy văn bản xuống dòng mới nhưng không chèn thêm một dòng trống. Chúng ta hãy so sánh <p> và <br> Mã nguồn HTML Thể hiện trên Web browser Hôm qua tát nước đầu đình, <br> Bỏ quên chiếc áo trên cành hoa sen. <p> <hr> Em có được cho anh xin, <br> Hay em để lại làm tin trong nhà Hôm qua tát nước đầu đình, Bỏ quên chiếc áo trên cành hoa sen. Em có được cho anh xin, Hay em để lại làm tin trong nhà 5) Thẻ định dạng các ký tự (Character formatting) Thẻ <b> </b> : Kiểu văn bản chữ đậm (Bold). Thẻ <i> </i> : Kiểu văn bản chữ nghiêng (Italic). Thẻ <em> </em>: Làm nổi bật đoạn văn bản (tương đương như i). Thẻ <strong> </strong>: Làm mạnh kiểu chữ trong đoạn văn bản (tương đương như b). Thẻ <u> </u> : Gạch chân đoạn văn bản. Thẻ <blockquote> </blockquote> : Khối văn bản được thụt vào bên trong. Thẻ <pre> </pre>: giữ nguyên định dạng văn bản khi soạn thảo HTML. Thẻ <tt> </tt> : dạng chữ đánh máy Thẻ <sup> </sup> : Chỉ số trên (Superscript) Thẻ <sub> </sub> : Chỉ số dưới (Subscript) Thẻ <address> </address>: Địa chỉ, văn bản ở cuối được in nghiêng. `Ìi`ÊÜÌÊvÝÊ*Ê`ÌÀÊ ÊvÀiiÊvÀÊViÀV>ÊÕÃi° /ÊÀiÛiÊÌÃÊÌVi]ÊÛÃÌ\Ê ÜÜÜ°Vi°VÉÕV°Ì 7 Chúng ta có thể kết hợp các thẻ này để định dạng miễn là chúng lồng vào nhau một cách chính xác. Nghĩa là phải bắt đầu một thẻ và phải kết thúc thẻ đó. Thứ tự các thẻ đó không quan trọng. Mã nguồn HTML Thể hiện trên Web browser <b> This is Bold </b> <I> This is Italic </I> <b><i> This is Bold and Italic </b></i> This is Bold This is Italic This is Bold and Italic 6) Các thẻ trang trí văn bản : 6.1. Thẻ định dạng văn bản: <Font> </Font>. Các thuộc tính sau : face = "Kiểu font" : chọn kiểu font cho văn bản : size = X : kích thước font. Định dạng font chữ văn bản từ X = 1 7. Cũng có thể sử dụng sự thay đổi kích thước tương đối (+1, +2, -1, -2, ) so với giá trị hiện tại. Mặc định size = 3. Ví dụ : <font face="VNI-Times" Size=4> Quê hương </font> color = #XXXXXX/"tên màu " : Màu sắc Đổi màu sắc đoạn văn bản được chọn với XXXXXX là mã màu sắc hệ thập lục phân. Các giá trị mã màu sắc và tên màu như sau : #XXXXXX Tên màu #FFFFFF White Màu trắng #000000 Black Màu đen #FF0000 Red Màu đỏ #00FF00 Lime Màu xanh lục #0000FF Blue Màu xanh nước biển #888888 Gray Màu xám #008888 Cyan Xanh dương #880088 Magenta Màu tím Hoặc thêm một số màu sắc như sau :Yellow, Olive, Maroon, Navy, Green, Purple, Fuchsia, Teal 6.2. Màu nền, hình nền, màu văn bản, màu cho các liên kết chưa sử dụng, màu cho các liên kết đã sử dụng và màu cho các liên kết đang hoạt động. Các thuộc tính này được đưa vào thẻ <body> Các mặc định : - Màu nền : Bgcolor = gray - Hình nền : Background = "Tên file nền" - Màu văn bản : Text = black - Màu cho các liên kết chưa sử dụng : Link = blue - màu xanh - Màu cho các liên kết đã sử dụng : Vlink = purple - màu hoa cà - Màu cho các liên kết đang hoạt động : Alink = red - màu đỏ Chú ý : Muốn thay đổi màu sắc mặc định ở trên, chúng ta phải đưa các thuộc tính vào trong thẻ Body. Ví dụ 1: Sử dụng màu nền <Body Bgcolor =Blue Text =White Link=Yellow Vlink= Red> </Body> Ví dụ 2: Sử dụng hình nền <Body Background ="Bgrnd131.gif"> </Body> `Ìi`ÊÜÌÊvÝÊ*Ê`ÌÀÊ ÊvÀiiÊvÀÊViÀV>ÊÕÃi° /ÊÀiÛiÊÌÃÊÌVi]ÊÛÃÌ\Ê ÜÜÜ°Vi°VÉÕV°Ì 8 7) Thẻ canh chỉnh lề : Để điều khiển cách trình bày của trang Web chúng ta sử dụng các canh chỉnh lề như sau : left, center, right. -Cú pháp : <p algin=letf> </p> Canh trái (mặc định) <p algin=center> </p> Canh giữa <p algin=right> </p> Canh phải <Center> </Center> : Canh giữa Việc canh chỉnh lề còn thêm thẻ "division". -Cú pháp : <div> </div> Tất cả văn bản bên trong tag này được chỉnh lề dựa vào thuộc tính align : <div align=left> </div> <div algin=center> </div> <div algin=right> </div> 8) Thẻ định dạng danh sách liệt kê (Lits) Có rất nhiều trang Web trình bày danh sách các mục. Có những mục được bắt đầu bằng một danh sách liệt kê không sắp xếp thứ tự hoặc là danh sách có đánh theo số thứ tự. Tóm lại có 3 dạng để thể hiện một danh sách, đó là : -Định dạng danh sách không sắp xếp theo thứ tự. -Định dạng danh sách theo thứ tự. -Kết hợp hai danh sách không sắp xếp theo thứ tự và theo thứ tự. . 8.1- Danh sách không có thứ tự (Unordered List - UL): - Thẻ <ul> </ul> để đánh dấu sự bắt đầu và kết thúc của danh sách. Đầu mỗi mục của danh sách sẽ được đặt tag <li> (list) - Thuộc tính : Type = Square / Circle / Disc Hình vuông đầy/ Hình vuông rỗng / Chấm đen (Mặc định) Ví dụ : <ul> <li> Mục thứ nhất <li> Mục thứ hai <li> Mục thứ ba </ul> Thể hiện trên Web browser là : Mục thứ nhất Mục thứ hai Mục thứ ba 8.2- Danh sách có thứ tự (Ordered List - OL) : Việc định dạng danh sách có thứ tự cũng tương tự như cách định dạng ở trên trên nhưng chỉ khác một điểm là toàn bộ danh sách được đặt trong tag <ol> </ol>. Ví dụ : <ol> <li> Mục thứ nhất <li> Mục thứ hai <li> Mục thứ ba </ol> Thể hiện trên Web browser là : `Ìi`ÊÜÌÊvÝÊ*Ê`ÌÀÊ ÊvÀiiÊvÀÊViÀV>ÊÕÃi° /ÊÀiÛiÊÌÃÊÌVi]ÊÛÃÌ\Ê ÜÜÜ°Vi°VÉÕV°Ì 9 1. Mục thứ nhất 2. Mục thứ hai 3. Mục thứ ba - Thuộc tính Type = Giá trị : đánh số thứ tự theo sở thích. Type="1" là mặc định. Thuộc tính Mô tả Type ="a" Đánh dấu bằng chữ thường (a, b, c ) Type ="A" chữ hoa (A, B, C ) Type ="I" chữ roman hoa (I, II, III, ) Type ="i" chữ roman thường (i, ii, iii, ) Type ="1" số (1, 2, 3, ) - Thuộc tính Start = Khai báo số dùng làm mặc định và sẽ được chuyển đổi qua type trước khi hiển thị. Ví dụ : <OL Type="a" Start=3> 8.3. Các danh sách lồng nhau : Danh sách có thứ tự và không có thứ tự có thể lồng nhau theo nhiều mức độ khác nhau để phân cấp danh sách. Ví dụ : Mã nguồn HTML Thể hiện trên trình duyệt <ol> <li> Chương 1 <li> Chương 2 <ul> <li> Phần 1 <li> Phần 2 </ul> <li> Chương 3 </ol> 1. Chương 1 2. Chương 2 Phần 1 Phần 2 3. Chương 3 9) Thẻ tạo bảng biểu (tables) Thẻ: <table> </table> Đây là một trong những tag mạnh nhất của ngôn ngữ HTML. Khả năng để hiển thị văn bản theo dạng bảng là rất quan trọng, nó tạo ra một hướng để thiết kế trang Web, cung cấp một cấu trúc để tổ chức các thực thể HTML trong trang thành dạng lưới (grid). Qui tắc xây dựng bảng: Bắt đầu từ phần tử cao nhất bên trái, tiếp theo xây dựng các phần tử của hàng đầu tiên, xong chuyển đến hàng thứ hai, xây dựng các phần tử hàng thứ 2, -> - - > - -> - - > -> - - > - -> - - > 9.1.Thẻ <tr> </tr> : (Table Row) bắt đầu và kết thúc cho mỗi hàng. 9.2.Thẻ <td> </td > : (Table Data) bắt đầu và kết thúc cho mỗi cột. 9.3. Nếu như biểu bảng có số cột và số hàng không đều nhau thì chúng ta sử dụng thêm thuộc tính : colspan và rowspan. clospan = <giá trị mở rộng> : mở rộng số cột rowspan = <giá trị mở rộng> : mở rộng số dòng. 9.4. Các thuộc tính của thẻ <table> : `Ìi`ÊÜÌÊvÝÊ*Ê`ÌÀÊ ÊvÀiiÊvÀÊViÀV>ÊÕÃi° /ÊÀiÛiÊÌÃÊÌVi]ÊÛÃÌ\Ê ÜÜÜ°Vi°VÉÕV°Ì [...]... 15 Tạo Liên kết trang Web Sau khi đã thiết kế các trang Web, chúng ta liên kết các trang lại với nhau hay còn gọi Hyperlink Nhờ siêu liên kết này mà ta có thể đi từ trang web này qua trang Web khác, hoặc từ vị trí này sang vị trí khác trong một trang Web 15.1 Liên kết các trang : Để Hyperlink chúng ta cần phải làm hai công việc : Nguồn liên kết : Chọn đối tượng phục vụ cho việc liên kết là một từ,... Dạng Normal : dùng để nhập nội dung văn bản, thiết kế trang Dạng HTML : xem trang với các thẻ lệnh HTML Dạng Preview : xem kết quả trang sau khi thiết kế Muốn xem dạng thức nào thì nhấn chuột chọn 18 IV Thiết kế trang theo khuôn mẫu Nếu muốn có một trang Web nhanh chóng, bạn có thể chọn menu lệnh : File / New / Page (Frame) Bạn hãy chọn kiểu để thiết kế theo các mẫu cung cấp sẵn Đưa nội dung... Cuối cùng Click vào Finish -Trang mẫu sẽ hiển thị, ta cần thay thế từng phần văn bản bằng nội dung khác - Sau khi thiết kế xong, lưu trang Web : + Chọn menu File/Save As + Đặt tên file, Click vào Save B- TỰ THIẾT KẾ TRANG WEB Các thao tác : + Chọn menu File/New /Web Pages + Chọn Blank Web page + Chọn menu Format/Style : Định dạng chuẩn mẫu (Font, Size ) giúp ta thoát được việc chọn riêng cho từng... Wingdings, hoặc Webdings - Chọn Insert / close 14) Tạo các biểu mẫu (Form) Công việc tạo biểu mẫu dùng để thu thập thông tin từ người sử dụng trang Web của ta, bằng cách nhắc nhở người sử dụng chọn lựa từ các danh sách, hoặc đánh dấu chọn Việc thiết kế biểu mẫu này không phù hợp với người thiết kế Web không chuyên, do đó ta nên sử dụng biểu mẫu có sẵn 14.1 Tạo biểu mẫu có sẵn : - Chọn Web Page Wizards... giữa các trang HTML Những liên kết này thường được biểu diễn bằng những chữ màu xanh có gạch dưới (mặc định) và được gọi là anchor Thật sự chúng ta không nhìn thấy 10 URL này nhưng nó đã được đặt vào đó trong quá trình thiết kế trang Web Có hai loại liên kết : liên kết nội bộ và liên kết từ xa Thẻ : Text Đây là thẻ xác lập cho việc liên kết Hãy xem "a" là anchor còn... ) Đích liên kết : Địa chỉ của đối tượng mà ta cần liên kết đến là một trang Web, 1 file hay 1 Web Site Các thao tác liên kết : + Chọn đối tượng + Chọn menu Insert/ Hyperlink hoặc chọn biểu tượng + Tại mục : Link to file or URL, Click Browse để tìm đường dẫn của file liên kết + Chọn OK 27 Hủy bỏ liên kết đã chọn, ta chọn đối tượng và chọn menu Insert / Hyperlink /Remove Link 2) Liên kết trên cùng... BẰNG WORD 97 Trong các chương trình thiết kế trang Web đơn giản, thì Microsoft Word 97 được sử dụng nhiều, vì chính nó là chương trình xử lý văn bản thông dụng nhất hiện nay Microsoft Word 97 còn mạnh ở chỗ nó có thể chuyển 1 file Word sẵn có dạng HTML hay ngược lại A- THIẾT KẾ TRANG WEB THEO MẪU - Với một người hoàn toàn chưa biết cách trình bày trang Web, hãy lựa chọn Web Page Wizards, sẽ được hướng... cần phải thám hiển trên Internet) * Liên kết các phần của một trang (bookmark) : a) - Đặt tên cho vị trí sẽ được liên kết đến : Thẻ b) -Dòng liên kết đến vị trí đã dặt ở a) : Thẻ Click vao day * Liên kết các trang Web với nhau : Nếu Web site của ta có cấu trúc theo kiểu cây thư mục, thì mục đích cuả liên kết là khai báo để trình duyệt biết chỗ... khác 2) Một số biểu tượng mới : được thêm vào hoặc thay thế để phù hợp với chức năng thiết kế Insert hyperlink Web toolbar Web page preview Form design mode Insert pictures Tables and borders Increase font size Decrease font size Background Font color Horizontal line Canh chỉnh lề II Các thao tác khi thiết kế trang Web Ở đây chúng ta chỉ trình bày những thao tác mới, còn một số thao tác khác cũng giống... "trang1.html"> Home Page Thiết kế trang Web Mười bước để có một trang Web hoàn hảo - Dùng trình duyệt để chọn index.html, nhấp chuột vào các liên kết bên trái Kết quả : 16 16) Dòng chạy chữ : Thẻ : Tạo hiệu ứng chạy chữ trong . khi thiết kế xong, lưu trang Web : + Chọn menu File/Save As + Đặt tên file, Click vào Save. B- TỰ THIẾT KẾ TRANG WEB Các thao tác : + Chọn menu File/New /Web Pages + Chọn Blank Web. Xác định đối tượng độc giả của Web site. Web site có mục đích rõ ràng. Thiết lập các chủ đề chính của Web site. Thiết kế các khối thông tin chủ yếu mà Web site sẽ cung cấp. Chúng ta. trình thiết kế trang Web. Có hai loại liên kết : liên kết nội bộ và liên kết từ xa. Thẻ : <a href = "file_name.html"> Text </a> Đây là thẻ xác lập cho việc liên kết.
Ngày đăng: 10/02/2015, 14:24
Xem thêm: thiết kế web
