HTML nâng cao

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

 

doc9 trang | Chuyên mục: HTML | Chia sẻ: dkS00TYs | Lượt xem: 2074 | Lượt tải: 2download
Tóm tắt nội dung HTML nâng cao, để xem tài liệu hoàn chỉnh bạn click vào nút "TẢI VỀ" ở trên
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ếmMộ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
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
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 HTMLKhi 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 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ư: Trang Trước
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:  để 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:  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:
Domain: xác định tên miền của trang web trên Internet ví dụ như vietphotoshop.comHost 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 SchemeDướ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
Truy cập vào NewsgroupDòng code HTML sau:
HTML Newsgroup
tạo ra một đường liên kết đến newsgroup như là HTML Newsgroup.
Download với FTPDòng code HTML sau:
Download WinZip
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 MailDòng code HTML sau:
a dmin@vietphotoshop.com
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 ScriptsThê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 scriptCá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ợ scriptChèn một script vào một trang HTMLMột script khi được chèn vào trang HTML được định dạng với thẻ . 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.
document.write("Chào mừng bạn đến với vietphotoshop.com")
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ẻ nó sẽ cho hiển thị nội dung của thẻ 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ẻ ) sẽ bỏ qua phần chú thích và sẽ không cho hiển thị nội dung 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:
VBScript:
Thẻ 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ẻ . Thẻ đượ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ẻ , 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ẻ .
JavaScript:Your browser does not support JavaScript!
VBScript:Your browser does not support VBScript!
Thẻ Script
Thẻ
Miêu tả đặc tính
Xác định một script
Xác định một đoạn chữ nếu script không được thực thi
Xác định một đối tượng được nhúng vào trang
Xác định run time cho một đối tượng
Không được ưa chuộng. Dùng để 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
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ảnChữ ở trong đoạn văn hiển thị như thế nàoParagraphsCách sử dụng Line BreakDạng bài thơ (vấn đề với định dạng văn bản bằng HTML)Thẻ HeadingCăn lề giữa headingChèn đường thẳng ngangChú thích trong mã nguồn của HTMLThêm màu backgroundThê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 outChèn địa chỉChữ viết tắtTrich dẫn ngắn và dàiLà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ếtMở liên kết ở một cửa sổ mớiNhả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 frameLiê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 nhauCách tạo ra 3 frame hàng ngang với 3 tài liệu khác nhauCách trộn giữa tập hợp frame với hàng và cộtCách tạo navigation frameFrame "nội địa" (frame ở trong trang HTML)Nhảy đến một phần cụ thể với frameNhảy đến một phần cụ thể với navigation frame
Bảng
Một bảng đơn giảnNhững đường biên khác nhau của bảngBảng không có đường biênHeadings trong bảngCột trốngBảng với captionCột gộp nhiều dòng hoặc cộtThẻ trong bảngCellPading (đ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ảngThêm màu hoặc hình ảnh làm nền cho cộtCăn chỉnh nội dung của cộtThuộ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áchNhững dạng khác nhau của danh sách không theo thứ tựNested listNested list 2Danh 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ệuTrường mật khẩuHộp kiểmRadio buttonsMenu 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ướcVùng chữ (Trường nhập liệu nhiều dòng chữ)Tạo một nútVẽ đường viền với vòng bao quanhForm với trường nhập liệu và nút SubmitForm với hộp kiểm và nút submitForm với radio buttons và nút SubmitGử thư từ một form
Hình ảnh
Chèn hìnhChèn hình từ một thư mục khác hoặc từ một server khácCă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 nhauHiể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ìnhTạ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 đẹpHình nền đẹp 2Hì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ânLiên kết đến một style sheet ngoại vi
Phần head
Đặt tiêu đề cho tài liệuMột mục tiêu cho tất cả các đường link
Thẻ Meta
Miêu tả về tài liệuTừ khoá của tài liệuTái định hướng người đọc đến một URl khác
Scripts
Chèn ScriptXử lý những trình duyệt không hỗ trợ scripts

File đính kèm:

  • docHTML nâng cao.doc
Tài liệu liên quan