Tài liệu HTML căn bản

Tài liệu HTML căn bản

Phần I Kỹ 1.1 HTML gì? HTML (Hyper Text Markup Language - Ngôn ngữ đánh dấu siêu văn bản) định dạng để báo cho trình duyệt Web (Web browser) biết cách để hiển thị trang Web Các trang Web thực khác ngồi văn với thẻ (tag) HTML xếp cách đoạn mã để trình duyệt Web biết cách để thơng dịch hiển thị chúng lên hình 1.2 Cấu trúc file HTML 1.2.1 Thẻ (tag) HTML Khi trình duyệt Web đọc file HTML, tìm file tag hay đoạn mã đặc biệt để biết cách hiển thị file HTML Ví dụ: Khi file HTML có đoạn Cấu trúc file HTML hiển thị đoạn "Cấu trúc file HTML" lên hình với mức độ tiêu đề thức (sẽ nói kỹ phần sau) Các tag HTML báo cho trình duyệt biết cách in đậm dịng văn bản, in nghiêng, biến dòng văn thành siêu liên kết tới trang Web khác, hiển thị ảnh Trong ví dụ ta thấy sau tag đoạn văn tag Trong tag ta thấy có dấu / , dấu / nằm tag báo hiệu cho trình duyệt biết hiệu ứng tag kết thúc Như việc sử dụng tag HTML sau: vùng văn chịu tác động Chú ý: Trình duyệt khơng quan tâm tên tag chữ hoa hay chữ thường nên việc viết 1.2.2 Cấu trúc file HTML File HTML bắt đầu thẻ kết thúc thẻ Cặp thẻ báo cho trình duyệt Web biết đọc file có chứa mã HTML, cịn thẻ có tác dụng kết thúc file HTML Bên cặp thẻ cặp thẻ phần thân, bạn nhập vào đoạn văn thẻ khác quy định định dạng trang Ngoài để ghi thích, tiện cho việc xem tag HTML cập nhật trang Web, ta cần đặt thích vào Tóm lại cấu trúc file HTML Tên trang Bản quyền Công ty Phát triển Phần mềm (VASC) E-mail: i-today@vasc.vnn.vn Tạo file HTML Sau đọc phần trên, bạn biết thẻ HTML cấu trúc chung file HTML Sau tạo file HTML Mở Notepad Windows hay trình soạn thảo văn tạo văn trơn (plain text) Nếu bạn dùng Microsoft Word phải lưu trữ dạng ASCII Bạn nhập dòng văn sau Chân trời tri thức - Internet today Chào mừng bạn tham gia chuyên mục Chân trời tri thức tạp chí Cơng nghệ Thơng tin Internet Today Trong phần bạn học kiến thức HTML, công cụ để tạo trang Web Sau học xong HTML bạn tạo trang Web đầy ấn tượng với văn bản, hình ảnh, âm Lưu file với phần mở rộng htm Ví dụ Bai1.htm Lưu ý: Bạn nên tạo Folder riêng để chứa tập tin mà bạn tạo suốt thời gian học HTML Khởi động IE Nescape Chọn File / Open Sử dụng hộp thoại để mở file HTML bạn vừa tạo Bạn nhìn thấy tranh tiêu đề trình duyệt dịng chữ "Chân trời tri thức - Internet today" trang "Chào mừng bạn tham gia chuyên mục Chân trời tri thức tạp chí Cơng nghệ Thơng tin Internet Today Trong phần bạn học kiến thức HTML, công cụ để tạo trang Web Sau học xong HTML bạn tạo trang Web đầy ấn tượng với văn bản, hình ảnh, âm " mà bạn viết phần body Bản quyền Công ty Phát triển Phần mềm (VASC) E-mail: i-today@vasc.vnn.vn Hiển thị văn dạng đậm, nghiêng, gạch chân 3.1.Bài học Khi trình bày trang Web, có lúc cần nhấn mạnh, hay để tạo khác biệt, bạn cần phải hiển thị văn dạng đậm, nghiêng, gạch chân HTML có tag định dạng kiểu chữ để giúp bạn HTML Ðây tag gạch chân Ðây tag nghiêng Kết Ðây tag gạch chân Ðây tag nghiêng Ðây tag chữ đánh máy Ðây tag đậm Ðây tag Ðây tag strong Ðây tag strong Ðây tag chữ đánh máy Ðây tag đậm Ðây tag Strong Ðây tag Strong Ðây tag strikeline Bạn kết hợp tag với nhau, miễn chúng lồng vào cách xác Ví dụ: Tag in nghiêng phải nằm tag in đậm Hơn bạn áp dụng tag với tiêu đề 3.2.Thực hành áp dụng vào file HTML bạn Tạo file HTML Thêm tag định dạng kiểu chữ Lúc file HTML bạn phần body có dạng sau Chú ý tạo file HTML Nếu bạn dùng chương trình soạn thảo văn bản khác NotePad Windows thì bạn phải nhớ lưu kết dạng văn trơn (ASCII) Lưu cơng việc bạn Dùng trình duyệt mở so sánh với ví dụ mẫu Bản quyền Công ty Phát triển Phần mềm (VASC) E-mail: i-today@vasc.vnn.vn Sáu mức tiêu đề 4.1 Bài học Khi trình bày trang Web, bạn phải cần đến tiêu đề theo kích cỡ, phơng chữ khác HTML có tag để thực việc Ðể tạo tiêu đề dùng Tên tiêu đề Trong x số có giá trị từ đến kích cỡ tiêu đề Sau ví dụ cho cỡ tiêu đề Tiêu đề cỡ Tiêu đề cỡ Tiêu đề cỡ Tiêu đề cỡ Tiêu đề cỡ Tiêu đề cỡ 4.2.Thực hành Thêm tiêu đề vào trang Web bạn Mở lại file HTML mà bạn tạo học trước trình soạn thảo văn mà bạn dùng để tạo Thêm đoạn sau vào file HTML Bạn cần lưu ý đoạn thêm vào phải nằm Gới thiệu chung vào trước đoạn "Chào mừng bạn tham gia chuyên mục Chân trời tri thức tạp chí Cơng nghệ Thơng tin Internet Today Trong phần bạn học kiến thức HTML, công cụ để tạo trang Web Sau học xong HTML bạn tạo trang Web đầy ấn tượng với văn bản, hình ảnh, âm Lưu cơng việc bạn vừa làm Dùng trình duyệt Web để mở file HTML bạn vừa tạo so sánh với ví dụ mẫu, bạn thấy khác bạn phải xem lại tạo file HTML Chia văn thành nhiều đoạn Trước hết bạn lại mở file HTML mà bạn tạo từ học trước trình soạn thảo văn bản, thay để văn cũ, cuối dịng bạn gõ Enter vài lần, đoạn văn bạn trơng sau : Chào mừng bạn tham gia chuyên mục Chân trời tri thức tạp chí Cơng nghệ Thông tin Internet Today Trong phần bạn học kiến thức HTML, công cụ để tạo trang Web Sau học xong HTML bạn tạo trang Web đầy ấn tượng với văn bản, hình ảnh, âm Lưu công việc bạn vừa làm mở trình duyệt bạn Khi bạn trơng thấy kết trình duyệt sau : Bạn cảm thấy có điều khơng phải khơng? Bởi HTML bỏ qua dấu hiệu xuống dịng bạn gõ Enter bỏ qua dòng trống nên bạn thấy đoạn văn mà bạn vừa nhập dù có Enter để xuống dịng liền với Ðể chia đoạn HTML dùng tag

Cũng lưu ý tag gắn liền với chia đoạn nên bạn không cần phải đặt

trước Chèn dấu chia đoạn vào file HTML bạn Dựng trình soạn thảo văn để mở tile HTML mà bạn tạo từ trước Chúng ta thêm đoạn vào văn bản, sau đoạn đầu Tạp chí Internet Today tạp chí điện tử chun Cơng nghệ thơng tin Chúng tơi giúp bạn tìm hiểu khám phá bí ẩn HTML để bạn tự tạo trang Web cho riêng Ðưa trỏ soạn thảo đến cuối đoạn đầu, thêm tag

Lúc đoạn văn trông giống sau Chào mừng bạn tham gia chun mục Chân trời tri thức tạp chí Cơng nghệ Thông tin Internet Today Trong phần bạn học kiến thức HTML, công cụ để tạo trang Web Sau học xong HTML bạn tạo trang Web đầy ấn tượng với văn bản, hình ảnh, âm

Tạp chí Internet Today tạp chí điện tử chun Cơng nghệ thơng tin Chúng tơi giúp bạn tìm hiểu khám phá bí ẩn HTML để bạn tự tạo trang Web cho riêng Lưu lại cơng việc bạn Dùng trình duyệt mở lại file HTML bạn so sánh với ví dụ mẫu Như bạn thấy, đoạn văn tách tác dụng tag

Thêm số tag phân đoạn Chèn đường thẳng vào trang Web bạn, tag thường dùng để chia phần trang Web Ðẩy văn xuống dòng mới, tag khác tag

chỗ khơng chèn thêm vào trang bạn dịng trống tag

Bạn sử dụng tag tạo danh sách, viết dịng thơ Ví dụ : Nếu file HTML có đoạn sau tag Câu lạc Tin học VNN1 Câu lạc Văn hố VNN3 Tạp chí Internet Today Thì kết sau : Bản quyền Công ty Phát triển Phần mềm (VASC) E-mail: i-today@vasc.vnn.vn Preformatled text 5.1.Bài học Phần trình bày cách hiển thị đoạn văn có khoảng trắng dấu xuống dòng Như bạn biết phần trước, trình duyệt bỏ qua dịng trắng, dấu hiệu xuống dịng ta soạn thảo Tuy nhiên bạn hiển thị văn lúc bạn nhập vào cách sử dụng tag Ví dụ Khi bạn muốn trình duyệt Web hiển thị bạn soạn thảo, bạn nhớ dùng tag Y: "Khoảng trắng" liệu bên ô vách ngăn ô Z: Ðộ rộng đường bên bảng để chia Ví dụ bảng sau có tag sau: Khi border = ta có bảng khơng có đường viền Dùng bảng dạng để xếp văn theo hàng thẳng đứng Ðối với liệu bảng bạn áp dụng tag học ví dụ sau chia hình thành hai cột danh sách cột siêu liên kết Các Website việt nam Công ty VASC - VNN Mạng Phương nam Công ty FPT Sài gịn net Cơng ty Netna@m Mạng Bộ thương mại 16.1.f.Thêm màu sắc cho bảng Ðể tô màu cho bảng, ta thêm thuộc tính bgcolor với giá trị màu tương ứng vào tag bảng Tô màu cho tồn bảng Tơ màu cho hàng Tô màu cho Trong XXXXXX giá trị màu Ví dụ Khi chưa tơ màu bảng Khi tô màu bảng cách thêm thuộc tính bgcolor vào tag 16.2.Thực hành Bạn ứng dụng tag xây dựng bảng để xây dựng danh sách, ví dụ danh sách lớp Yêu cầu bảng có thuộc tính border = tên danh sách siêu liên kết đến địa thư điện tử người tương ứng Sau xây dựng xong danh sách siêu liên kết, bạn thêm màu sắc vào bảng cho đẹp Bản quyền Công ty Phát triển Phần mềm (VASC) E-mail: i-today@vasc.vnn.vn 17 Forms Form yếu tố thiếu để giao tiếp với máy chủ Nó dùng để nhập liệu, lựa chọn khoản mục, Trong trình liên kết với CGI Script, forms cho phép bạn lựa chọn thông tin từ người dùng lưu trữ cho lần sử dụng sau Trong học ta cách tạo form tag đơn HTML Khi tạo form, ta cần lưu ý hai phần tên nhận dạng (identifier) giá trị (value) form Ví dụ : Trong hộp text box với tên FirstName, người sử dụng gõ vào VASC, liệu gửi đến server FirstName=VASC tag : < tag khác > nằm hai tag BODY thuộc tính METHOD có hai giá trị POST GET Nếu giá trị POST, cho phép gửi liệu từ máy Client đến Server (thường sử dụng Form nhập liệu) Còn với GET sử dụng Form vấn tin Cịn ACTION vị trí CGI Script Server thực Các tag Form thường dùng chủ yếu , , Chúng ta xét số Form đơn giản sau : • • • • • • • • • • Text Blocks : Tạo vùng văn bản, nhập nhiều dòng Text Boxes : Ðể nhập vào dòng đơn Password Boxes : Form giống Text Boxes không hiển thị ký tự Radio Buttons : Các nút lựa chọn Check Boxes : Hộp Check Boxes Menus : Tạo hộp Menu đẩy xuống Submit and Reset Buttons : Các Button để nhận thông tin khởi tạo lại thông tin form Hidden Elements : Các yếu tố ẩn Active Images :Tạo ảnh kích hoạt CGI Script :Common Gateway Interface Script 17.1 Bài học Text Blocks : Text Trong cols chiều rộng vùng văn tính theo ký tự rows : chiều cao vùng văn tính theo hàng Name thuộc tính để nhận dạng, sử dụng Script Các bạn lưu ý Text Blocks không bắt đầu tag INPUT Text Boxes : Trong size chiều dài Text Boxes Maxlength, minlength số ký tự tối đa hay tối thiểu nhập vào value giá trị kiểu xâu hiển thị Xin cho biết tên bạn : Password Boxes : Xin cho biết mật mã : Các thuộc tính giống với Text Boxes Chỉ khác bạn nhập liệu ký tự khơng hiển thị Radio Buttons : Lựa chọn value chứa liệu gửi đến Server Radio Button checked lựa chọn lựa chọn Check Boxes : Lựa chọn Hộp Check Boxes có thuộc tính thành phần giống Radio Button thuộc tính lựa chọn phần văn ghi phía sau nút check box lựa chọn lựa chọn Menus : Text Cũng giống Text Blocks, Menu không INPUT mà SELECT Thuộc tính multiple cho phép bạn chọn nhiều mục, khơng có thuộc tính menu đẩy xuống Mỗi lựa chọn bạn mơ tả tag OPTION, bạn ngầm định có multiple khơng có multiple chọn thuộc tính selected Submit and Reset Buttons : Nút Submit nút để server lấy thơng tin từ người sử dụng Sau nhập liệu song, người dùng ấn vào Submit thơng tin gửi đến server Nếu có thơng tin sai quy định server gửi trả lại kèm với thơng tin báo lỗi Cịn nút Reset khởi tạo lại toàn giá trị form giá trị mặc định Thuộc tính value chứa phần text hiển thị nút bấm Bạn cầm lưu ý nút Reset khởi động lại giá trị form mà Hidden Elements : Hidden Elements bạn sử dụng để lưu trữ thơng tin thu từ form trước đó, kết hợp với liệu form Ví dụ : form trước ban đề nghị cho biết tên, bạn lưu lại biến thêm vào form hidden element, sau name liên kết thông tin thu mà không cần người dùng nhập lại tên nhiều lần Các Hidden Elements không browser với tên Tag có hai thuộc tính, thuộc tính name tên thơng tin lưu trữ, cịn value thơng tin mà thân lưu lại Active Images : Thuộc tính chứa src đường dẫn tới file ảnh server Thuộc tính name cho tên Khi người dùng click vào ảnh tạo độ x y chuột hành bổ sung vào trường name gửi đến server Ví Dụ : Giả sử máy chủ muốn biết bạn từ nơi đến, cho bạn đồ giới Bạn viếc click lên đồ, giả sử bạn sinh Việt nam việc tìm nước Việt nam click lên CGI Script : (A Common Gateway Interface Script) Là chương trình kích hoạt người sủ dụng cách click lên URL Nó viết ngơn ngữ máy tính C hay Pascal, viết Perl hay chương trình giao tiếp người máy, có khả thực độc lập CGI Script dùng để kích hoạt mơt chương trình server, lấy thơng tin sau thơng báo lại cho người sủ dụng Ví dụ bạn dùng CGI Script để gọi chương trình ngày server thơng báo kết trang web Ðể tạo liên kết đến CGI Script bạn dùng tag