Thông tin tài liệu
Mục lục Chương 2: HTML nâng cao HTML nâng cao Layout Font chữ HTML Style HTML head HTML Meta HTML Url HTML Script HTML Web Server Tổng kết ví dụ Nội dung của trang này thuộc bản quyền của © Bá tước Monte Cristo - Final Fantasy và www.bantayden.com. Những bài viết trong này có thể được in ra để dùng với mục đích cá nhân và phi thương mại. Nếu bạn muốn phát hành lại trong trang web của bạn làm ơn liên lạc với tôi hoặc ít nhất phải trích dẫn lại nguồn là: Bá tước Monte Cristo - Final Fantasy và www.bantayden.com HTML layout Rất nhiều trang web bạn có thể thấy rằng trang của họ được thiết kế dạng cột giống như tờ báo vậy, đó là họ sử dụng cột của HTML. Việc thông dụng nhất khi dùng HTML là sử dụng bảng HTML để định dạng một giao diện của một trang HTML. Một phần của trang bạn đang đọc này được định dạng bởi hai cột như dạng cột của báo. Bạn có thể nhận ra rằng nhưng gì bạn đang đọc được chia ra làm hai cột bên trái và bên phải. Dòng chữ bên này ở cột bên trái Code HTML <table> được sử dụng để chia một phần của trang thành hai cột. Tôi cố tình để đường viền cho bạn dễ nhận thấy đây là cấu trúc bảng. Dù cho bạn có viết bao nhiêu chữ đi chăng nữa, thì nõ vẫn ngoan ngoãn nằm trong cấu trúc bảng bạn tạo ra nó. Vẫn layout cũ nhưng với màu được thêm vào Việc thông dụng nhất khi dùng HTML là sử dụng bảng HTML để định dạng một giao diện của một trang HTML. Một phần của trang bạn đang đọc này được định dạng bởi hai cột như dạng cột của báo. Bạn có thể nhận ra rằng nhưng gì bạn đang đọc được chia ra làm hai cột bên trái và bên phải. Dòng chữ bên này ở cột bên trái Code HTML <table> được sử dụng để chia một phần của trang thành hai cột. Tôi cố tình để đường viền cho bạn dễ nhận thấy đây là cấu trúc bảng. Dù cho bạn có viết bao nhiêu chữ đi chăng nữa, thì nõ vẫn ngoan ngoãn nằm trong cấu trúc bảng bạn tạo ra nó. Ví dụ Chia đôi một trang HTML thành cột và hàng là việc làm khá đơn giản. Để cho bạn thực hành với nó, tôi đã tạo ra ví dụ này cho bạn. HTML Fonts Việc sử dụng thẻ <font> trong HTML không được tán thành và sẽ bị loại bỏ ở những phiên bản HTML mới hơn. Dù cho rất nhiều người dùng nó, nhưng bạn nên cố gắng tránh dùng nó và dùng style để thay thế. Thẻ HTML <font> Với một dòng code HTML như sau, bạn có thể cụ thể kích cỡ và loại font cho trình duyệt <p> <font size="2" face="Verdana"> This is a paragraph. </font> </p><p> <font size="3" face="Times"> This is another paragraph. </font> </p> Xem ví dụ Thuộc tính của font Thuộc tính Ví dụ Mục đích size="number" size="2" Xác định kích cỡ size="+number" size="+1" Tăng kích cỡ font size="-number" size="-1" Giảm kích cỡ font face="face-name" face="Times" Xác định tên font color="color-value" color="#eeff00" Xác định màu chữ color="color-name" color="red" Xác định màu chữ Cách làm đúng nhất là sử dụng Style Chọn font cho chữ Chọn kích cỡ cho chữ Chọn màu cho chữ Chọn font, kích cỡ và màu cho chữ Học thêm về Style Sheet Đầu tiên bạn hãy kiên trì học cho xong hết các chương về HTML!!! ở những chương sau chúng tôi sẽ giải thích tại sao một vài thẻ như <font> lại bị loại bỏ từ HTML và làm cách nào để chèn một style Sheet vào một tài liệu HTML. Để học thêm về style sheet bạn học ở đây: CSS Tutorials HTML Style Với HTML 4.0 tất cả định dạng có thể được di chuyển ra khỏi tài liệu HTML và cho vào một file riêng biệt là Style Sheet. Xem những ví dụ sau Styles trong HTML Ví dụ này hướng dẫn bạn cách định dạng một tài liệu HTML với thông tin style được thêm vào phần <head>. Đường liên kết không có gạch chân Sử dụng thuộc tính style để tạo ra hiệu ứng đường link không có gạch chân. Liên kết đến một style sheet "ngoại" Cách sử dụng thẻ <link> để liên kết đến một style sheet "ngoại vi". Cách sử dụng Style Khi trình duyệt đọc thông tin của Style Sheet, nó sẽ định dạng tài liệu theo style đó. Có 3 cách để chèn style sheet vào tài liệu HTML. Style Sheet "ngoại" Khi bạn có nhiều trang cần áp dụng style thì style sheet ngoại vi là hợp lý nhất. Với style sheet ngoại vi bạn Khi bạn có nhiều trang cần áp dụng style thì style sheet ngoại vi là hợp lý nhất. Với style sheet ngoại vi bạn có thể thay đổi diện mạo của toàn bộ trang web bằng cách thay đổi một file. Mỗi trang phải liên kết đến style sheet bằng cách sử dụng thẻ <link>. Thẻ <link> được đặt ở phần head của mỗi trang. <head> <style type="text/css"> body {background-color: red} p {margin-left: 20px} </style> </head> Style sheet "nội" Nếu một tài liệu nào đó chỉ cần duy nhất một style thì Style Sheet nội nên được sử dụng. Bạn có thể xác định style nội trong phần head với thẻ <style> <head> <style type="text/css"> body {background-color: red} p {margin-left: 20px} </style> </head> Style "địa phương" Style "địa phương" nên được sử dụng nếu bạn muốn dùng một style duy nhất cho một thành phần nào đó của trang. Để sử dụng style "địa phương" bạn sử dụng thuộc tính style với những thẻ tương thích. Thuộc tính của style có thể bao gồm nhiều tính nắng CSS. Ví dụ sau đây sẽ chỉ cho bạn cách thay đổi màu và canh lề trái của đoạn văn. <p style="color: red; margin-left: 20px"> This is a paragraph </p> Thẻ style Thẻ Miêu tả đặc tính <style> Xác định đặc tính của style <link> Xác định nguồn của style <div> Xác định phần vùng trong tài liệu <span> Xác định phần vùng trong tài liệu <font> Không được ưa chuộng, dùng Style <basefont> Không được ưa chuộng, dùng Style <center> Không được ưa chuộng, dùng Style HTML head Xem ví dụ Tiêu đề của tài liệu Thông tin tiêu đề ở trong phần head thì không được hiển thị trong cửa sổ trình duyệt. Một đích đến cho tất cả các đường liên kết Cách sử dụng thẻ <base> để làm cho tất cả các đường link trên một trang mở ở một cửa sổ mới. Thành phần của head Thành phần của head bao gồm những thông tin chung, hay còn được gọi là meta-information về tài liệu. Meta có nghĩa là "thông tin về". Bạn có thể nói rằng meta-data có nghĩa rằng thông tin về data, hoặc meta- infomation có nghĩa rằng thông thin về thông tin. Thông tin trong thành phần head. Theo như tiêu chuẩn của HTML, chỉ một vài thẻ được chính thức đặt trong phần head đó là: base>, <link>, <meta>, <title>, <style>, and <script>. Đây là một ví dụ hợp quy định <head> <p>This is some text</p> </head> Trong trương fhợp này trình duyệt có hai lựa chọn: Hiển thị chữ bởi vì nó nằm trong thành phần đoạn văn là <p> và </p> Ẩn chữ bởi vì nó nằm trong thành phần Head. Nếu bạn muốn thêm một thành phần HTML là <h1> hoặc <p> vào phần head như trên, hầu hết các trình duyệt sẽ hiển thị chúng thậm chí như thế là không hợp lệ. Trình duyệt có nên bỏ qua những lỗi như thế không? chúng tôi không nghĩ thế! nhưng người ta lại cho thế là đúng! Thẻ Head Thẻ Miêu tả đặc tính <head> Xác định thông tin về tài liệu <title> Xác định tiêu đề của tài liệu <base> Xác định địa chỉ URL cơ bản cho tất cả các đường liên kết trên trang <link> Xác định tài nguyên để liên kết đến <meta> Xác định meta-information <!DOCTYPE> Xác định loại tài liệu. Thẻ này đi trứơc thẻ <html> HTML Meta Ví dụ Miêu tả tài liệu Thông tin bên trong thành phần meta miêu tả về tài liệu. Từ khoá của tài liệu Thông tin bên trong thành phần meta miêu tả từ khoá của tài liệu. Tái định hướng người dùng Cách tái định hướng người dùng nếu bạn thay đổi tên miền. Thành phần của meta Như đã được giải thích ở chương trước, thành phần của head bao gồm những thông tin chung về tài liệu. HTML cũng có một thành phần meta và nằm trong phần head. Mục đích của thành phần meta là cung cấp meta-information về tài liệu. Hầu hết thành phần meta được sử dụng để cung cấp thông tin liên quan đến trình duyệt hoặc những công cụ tìm kiếm như được miêu tả nội dung của tài liệu. Từ khoá cho công cụ tìm kiếm Một vài công cụ tìm kiếm trên mạng sử dụng tên và nội dung của thẻ meta trong trang index của bạn. Thành phần meta sau miêu tả cho trang của bạn s Your Ad Here s Your Ad Here Thành phần meta sau miêu tả cho trang của bạn <meta name="description" content="Trang web chuyên về Photoshop, thiết kế web"> Mục đích chính của thuộc tính tên và nội dung là để miêu tả nội dung của trang. Tuy nhiên, bởi vì quá nhiều người đã lạm dụng thẻ meta để spam bằng cách lập đi lập lại từ khoá để cho trang web của họ có rank cao hơn, cho nên một vài công cụ tìm kiếm đã hoàn toàn không sử dụng thẻ meta nữa. Thuộc tính "unknown" của thẻ Meta Đôi khi bạn có thể thấy thuộc tính thẻ meta là unknown như sau <meta name="security" content="low"> Nếu bạn có thấy thì cũng cứ chấp nhận nó bởi vì nó là một cái gì đó duy nhất cho trang hoặc cho tác giả của trang đó và nó có thể chẳng có gì liên quan đến bạn hết. Xác định thông tin trên internet (URL = Uniform Resource Locator) HTML. Liên kết HTML Khi bạn nhấp chuột vào link trong một tài liệu HTML như thế này: Trang Trước, một thẻ gạch chân <a> sẽ chỉ đến một nơi (một địa chỉ) trên Web với một giá trị thuộc tính href như: <a href="trangtruoc.htm">Trang Trước</a> Liên kết Trang Trước ở ví dụ trên là đường liên kết có liên quan đến một trang web mà bạn đang lướt ở đó, và trình duyệt của bạn sẽ tạo ra một địa chỉ web đầy đủ như sau: http://www.vietphotoshop.com/html/trangtruoc.htm để truy cập trang đó. Uniform Resource Locator (URL) URL được dùng để xác định địa chỉ của một tài liệu (hoặc dữ liệu khác) trên World Wide Web. Một địa chỉ đầy đủ sẽ như sau: http://www.vietphotoshop.com/html/trangtruoc.htm và tuân theo cú pháp sau Scheme://host.domain:port/path/filename Scheme: Là một trong các giao thức Internet, gồm http, ftp, gopher, news (USENET news), nntp (Network News Transfer Protocol), Telnet và WAIS (Wide Area Information Servers), và những giao thức khác. Ðija chỉ dưới đây ừung giao thức http: http://www.vietphotoshop.com/html/html_basic.htm Domain: xác định tên miền của trang web trên Internet ví dụ như vietphotoshop.com Host xác định tên miền của host. Nếu được bỏ qua, thì mặc định của host cho http là www. Port xác định port number tại host. Số cổng thường được bỏ qua. Số cổng mặc định của http là 80. Path xác định đường dẫn trên server. Nếu đường dẫn được bỏ qua, thì tài liệu phải được định vị tại thư mục gốc của trang web. Filename xác định tên của tài liệu. Tên mặc định của một tài liệu có thể là default.asp hoặc index.html hoặc một cái gì đó phụ thuộc vào những cài đặt của server. URL Scheme Dưới đây là ví dụ của những lược đồ thông dụn nhất Schemes Access file Một tệp tin ở máy tính của bạn ftp Một tệp tin ở FTP server http Một tệp tin ở World Wide Web Server gopher Một tệp tin ở Gopher server news Usenet newsgroup telnet Telnet connection WAIS Một tệp tin ở WAIS server s Your Ad Here s Your Ad Here WAIS Một tệp tin ở WAIS server Truy cập vào Newsgroup Dòng code HTML sau: <a href="news:alt.html">HTML Newsgroup</a> tạo ra một đường liên kết đến newsgroup như là HTML Newsgroup. Download với FTP Dòng code HTML sau: <a href="ftp://www.bantayden.com/ftp/winzip.exe">Download WinZip</a> Tạo ra một đường link download như là: Download WinZip. Chú ý: Liên kết trên chỉ là ví dụ thôi! cho nên nó không có giá trị. Liên kết đến hệ thống Mail Dòng code HTML sau: <a href="mailto:admin@vietphotoshop.com">admin@vietphotoshop.com</a> Tạo ra một đường liên kết với hệ thống email của bạn là admin@vietphotoshop.com HTML Scripts Thêm script vào HTML để làm cho nó thêm sống động và có tính tương tác. Ví dụ Chèn một script Cách chèn một script vào tài liệu HTML Lam việc với những trình duyệt không hỗ trợ script Chèn một script vào một trang HTML Một script khi được chèn vào trang HTML được định dạng với thẻ <script>. Chú ý rằng bạn phải sử dụng thuộc tính hạng loại để cụ thể hoá ngôn ngữ script của bạn. <html> <head> </head> <body> <script type="text/javascript"> document.write("Chào mừng bạn đến với vietphotoshop.com") </script> </body> </html> Dòng code ở trên sẽ có kết quả như sau: Chào mừng bạn đến với vietphotoshop.com Để học thêm về script trong HTML bạn có thể ghé thăm JavaScript School. Nếu có thời gian chúng tôi sẽ từ từ biên dịch tài liệu này. Làm gì để giải quyết những trình duyệt phiên bản cũ hơn. Nếu trình duyệt nào đó không thể nhận được thẻ <script> nó sẽ cho hiển thị nội dung của thẻ <script> như một dạng text trên trang. Để tránh việc này xảy ra, bạn nên ẩn script vào thẻ chú thích. Những trình duyệt cũ hơn (loại không nhận ra thẻ <script>) sẽ bỏ qua phần chú thích và sẽ không cho hiển thị nội dung s Your Ad Here của thẻ script lên trang, trong khi đó trình duyệt mới sẽ hiểu rằng script đó phải được thực thi, thậm chí nếu nó được chèn trong thẻ chú thích. Ví dụ JavaScript: <script type="text/javascript"> <! document.write("Hello World!") // > </script> VBScript: <script type="text/vbscript"> <! document.write("Hello World!") ' > </script> Thẻ <noscript> Thêm vào việc ẩn đi phần script vào trong thẻ chú thích, bạn có thể thêm thẻ <noscript>. Thẻ <noscript> được sử dụng để xác định một lựa chọn cho text khi mà script đó KHÔNG được thực thi. Thẻ này được sử dụng cho những trình duyệt nhận ra thẻ <script>, nhưng không hỗ trợ script, do vậy trình duyệt này sẽ hiển thị chữ được viết trong thẻ <noscript>. JavaScript: <script type="text/javascript"> <! document.write("Hello World!") // > </script> <noscript>Your browser does not support JavaScript!</noscript> VBScript: <script type="text/vbscript"> <! document.write("Hello World!") ' > </script> <noscript>Your browser does not support VBScript!</noscript> Thẻ Script Thẻ Miêu tả đặc tính <script> Xác định một script <noscript> Xác định một đoạn chữ nếu script không được thực thi <object> Xác định một đối tượng được nhúng vào trang <param> Xác định run time cho một đối tượng <applet> Không được ưa chuộng. Dùng <object> để thay thế. Sẵn sàng để xuất bản tác phẩm của bạn? Công việc đầu tiên: Một web server cá nhân Nếu bạn muốn mọi người xem được trang của bạn, bạn phải xuất bản nó Để xuất bản tác phẩm của bạn, bạn phải copy tài liệu đó lên một web server s Your Ad Here Máy tính của bạn có thể là một web server nếu bạn nối mạng Internet Nếu bạn sử dụng Win98 bạn có thể sử dụng PWS (Pesonal Web Server) PWS được ẩn trong thư mục PWS ở trong CD Windows. Personal Web Server - Web Server cá nhân (PWS) PWS biến bất cứ một máy tính chạy Windows nào thành một web server. PWS rất dễ cài đặt và rất lý tưởng cho việc phát triển và kiểm tra những ứng dụng Web. PWS đã được tối ưu hoá để cho mục đích sử dụng là mạng cục bộ, nhưng có đầy đủ tính năng của một web server. Nó cũng có thể chạy Active Server Pages (ASP) như là người anh cả của nó là IIS. Cách cái đặt Personal Web Server (PWS). Tìm trong những thư mục cài đặt của Windows để kiểm tra xem bạn đã cài đặt PWS chưa. Nếu không, cài đặt PWS từ thư mục PWS trên CD Windows. Theo hướng dẫn và cài đặt Personal Web Server và chạy nó. Đọc thêm về Microsoft's Personal Web Server. Chú ý: Microsoft Windows XP Home Edition không hỗ trợ tính năng biến computer thành PWS. Internet Information Server (IIS) Windows 2000 được xây dựng trên IIS server, làm cho nó dễ dàng hơn để tạo ra những ứng dụng web lớn hơn và phức tạp hơn. Cả hai PWS và IIS đều bao gồm ASP, một dạng script tiêu chuẩn của server có thể được dùng để tạo ra những trang web động. IIS cũng có ở trong Windows NT. Nếu bạn muốn biết thêm về ASP, bạn nên học về ASP School. Hoặc học thêm về Microsoft's Internet Information Services Bước tiếp theo: Web Server cá nhân Nếu bạn muốn sử dụng PWS hoặc IIS, bạn phải upload file của bạn nên một server Hầu hết các nhà cung cấp dịch vù Internet (ISP) đều có thể host trang web của bạn Nếu bạn thực sự thích, bạn có thể cài đặt một Internet Server cho mình. Trước khi chọn ISP cho mình, hãy đọc một chút về Web Hosting Tutorial !! Tổng kết các ví dụ đã học Các thẻ HTML cơ bản Một tài liệu HTML đơn giản Chữ ở trong đoạn văn hiển thị như thế nào Paragraphs Cách sử dụng Line Break Dạng bài thơ (vấn đề với định dạng văn bản bằng HTML) Thẻ Heading Căn lề giữa heading Chèn đường thẳng ngang Chú thích trong mã nguồn của HTML Thêm màu background Thêm hình làm nền Định dạng text Text formatting Định dang chữ (làm thế nào để điều chỉnh line space) Một vài thẻ của computer out Chèn địa chỉ Chữ viết tắt s Your Ad Here s Your Ad Here s Your Ad Here Chữ viết tắt Trich dẫn ngắn và dài Làm thế nào để đánh dấu chữ bị xoá và chữ được chèn Liên kết Cách tạo siêu liên kết Đặt hình ảnh thành đường liên kết Mở liên kết ở một cửa sổ mới Nhảy đến một phần khác của tài liệu (trên cùng một trang) Phá bỏ một frame Liên kết đến một địa chỉ email Frames Cách tạo ra một tập hợp frame với 3 tài liệu khác nhau Cách tạo ra 3 frame hàng ngang với 3 tài liệu khác nhau Cách trộn giữa tập hợp frame với hàng và cột Cách tạo navigation frame Frame "nội địa" (frame ở trong trang HTML) Nhảy đến một phần cụ thể với frame Nhảy đến một phần cụ thể với navigation frame Bảng Một bảng đơn giản Những đường biên khác nhau của bảng Bảng không có đường biên Headings trong bảng Cột trống Bảng với caption Cột gộp nhiều dòng hoặc cột Thẻ trong bảng CellPading (điều chỉnh khoảng cách giữa nội dung và đường biên) Cell Spacing (Điều chỉnh khoảng cách giữa các cột) Thêm màu hoặc hình ảnh làm hình nền cho bảng Thêm màu hoặc hình ảnh làm nền cho cột Căn chỉnh nội dung của cột Thuộc tính mới của frame Danh sách Danh sách không thứ tự Danh sách theo thứ tự Những dạng khác nhau của danh sách Những dạng khác nhau của danh sách không theo thứ tự Nested list Nested list 2 Danh sách dạng định nghĩa Forms và trường nhập liệu Cách tạo một trường nhập liệu Trường mật khẩu Hộp kiểm Radio buttons Menu thả xuống đơn giản (danh sách lựa chọn được) Một dạng menu thả xuống khác với lựa chọn được chọn trước Vùng chữ (Trường nhập liệu nhiều dòng chữ) Tạo một nút Vẽ đường viền với vòng bao quanh Form với trường nhập liệu và nút Submit Form với hộp kiểm và nút submit Form với radio buttons và nút Submit Gử thư từ một form Hình ảnh Chèn hình Chèn hình từ một thư mục khác hoặc từ một server khác Căn chỉnh hình trong chữ Để hình ở bên trái hoặc phải của đoạn văn Điều chỉnh hình ảnh ở các kích thước khác nhau Hiển thị chữ thay thế cho một tấm hình (nếu trình duyệt không load được hình) Tạo siêu liên kết cho tấm hình Tạo image-map với những vùng click được Nền Hình nền đẹp và màu chữ Hình nền tồi và màu chữ Hình nền đẹp Hình nền đẹp 2 Hình nền xấu Styles Styles ở phần head của tài liệu HTML Đường liên kết không có gạch chân Liên kết đến một style sheet ngoại vi Phần head Đặt tiêu đề cho tài liệu Một mục tiêu cho tất cả các đường link Thẻ Meta Miêu tả về tài liệu Từ khoá của tài liệu Tái định hướng người đọc đến một URl khác Scripts Chèn Script Xử lý những trình duyệt không hỗ trợ scripts © www.vietphotoshop.com - Dịch bởi Bá tước Monte Cristo |Trang chủ| |HTML cơ bản| |Diễn Đàn| © Copyright 2004-2005 bantayden.com, All rights reserved. Ghi rõ nguồn khi bạn phát hành lại thông tin từ trang này. . Mục lục Chương 2: HTML nâng cao HTML nâng cao Layout Font chữ HTML Style HTML head HTML Meta HTML Url HTML Script HTML Web Server Tổng kết ví dụ Nội dung của. Newsgroup Dòng code HTML sau: <a href="news:alt .html& quot;> ;HTML Newsgroup</a> tạo ra một đường liên kết đến newsgroup như là HTML Newsgroup. Download với FTP Dòng code HTML sau: <a. CSS Tutorials HTML Style Với HTML 4.0 tất cả định dạng có thể được di chuyển ra khỏi tài liệu HTML và cho vào một file riêng biệt là Style Sheet. Xem những ví dụ sau Styles trong HTML Ví dụ này
Ngày đăng: 22/04/2014, 15:29
Xem thêm: HTML Nâng Cao
