Bài viết Hướng dẫn nhập môn HTML trình bày về những bí ẩn của ngôn ngữ đánh dấu siêu văn bản (HTML), nhưng thực chất chẳng có gì bí ẩn. Nếu đã biết cách dùng trình xử lý văn bản, bạn có thể tạo ra các trang Web chỉ trong vài phút. Mời các bạn cùng tham khảo để có thêm tài liệu phục vụ nhu cầu học tập và nghiên cứu.
HƯỚNG DẪN NHẬP MƠN HTML Bài trình bày bí ẩn ngơn ngữ đánh dấu siêu văn (HTML), thực chất chẳng có bí ẩn Nếu biết cách dùng trình xử lý văn bản, bạn tạo trang Web vài phút Nhờ xây dựng văn đồ hoạ, World Wide Web (WWW) đưa Internet nhập vào dịng chảy sống Nhưng tính hấp dẫn WWW vượt xa nhiều so với giao diện đồ hoạ, lôi nhiều người dùng PC không rành kỹ thuật Nhờ HTML tương đối đơn giản nên nhiều người bình thường tạo Web site đầy ấn tượng Nếu bạn khao khát muốn đưa lên Web, tất điều mà bạn cần có tài khoản đăng ký với hãng cung cấp Web, bí HTML, chút óc sáng tạo Bài báo đưa bạn chuyến du lịch trang Web điển hình, để bạn thấy thực Đặc biệt, bạn giới thiệu phần tử cấu tạo nên HTML (Hypertext Markup Language - Ngôn ngữ đánh dấu siêu văn bản) - linh hồn trang Web Và trường hợp dự định tạo Web site riêng cho mình, bạn có thêm hiểu biết xảy bạn nối vào Web xem trang ưa thích HTML: Ngơn ngữ đánh dấu: Sau lóng ngóng với vài trang Web du lịch Internet, bạn nghĩ phải có gói phần mềm tinh vi để thu tất hiệu ứng trang trí đầy quyến rũ Mặc dù có số cơng cụ dành cho người say mê HTML thực sự, bạn dùng trình soạn thảo văn Notepad Windows để tạo trang Web hấp dẫn Sự thật hầu hết trang khơng có khác văn gia cố thêm phần tử HTML xếp đặt quy cách Để hiểu cách hoạt động chúng, bạn phải xem xét từ cụm từ Ngôn ngữ đánh dấu siêu văn xem chúng có ý nghĩa gì: Siêu văn (HyperText) Như bạn biết, liên kết siêu văn từ hay câu trang Web dùng để đến trang Web khác Khi nhấn chuột lên liên kết này, trình duyệt bạn (như Netscape Navigator Internet Explorer) đưa bạn tức khắc đến trang Web mà không cần hỏi han Vì liên kết siêu văn thật tính đặc trưng World Wide Web, trang Web thường biết tài liệu siêu văn Cho nên HTML có từ siêu văn tên nó, bạn dùng để tạo nên tài liệu siêu văn Đánh dấu (Markup) Có từ điển định nghĩa markup dẫn chi tiết kiểu dáng ghi viết tay để xếp chữ in Trong lĩnh vực này, viết lại định nghĩa sau: lệnh chi tiết kiểu dáng đánh vào tài liệu văn để đưa lên WWW Đó HTML theo định nghĩa tóm tắt Nó gồm vài mã đơn giản để tạo văn nét đậm nghiêng bảng liệt kê dấu chấm đầu dịng, hình đồ hoạ chèn thêm vào, với xác định mối liên kết siêu văn Bạn đánh mã vào chỗ thích hợp tài liệu văn gốc, trình duyệt Web thực việc dịch chúng Ngơn ngữ (Language) Đây từ dễ nhầm lẫn cụm từ Nhiều người diễn giải HTML ngơn ngữ lập trình HTML khơng có liên quan đến việc lập trình máy tính HTML gọi ngơn ngữ gồm tập hợp nhỏ nhóm hai đến ba chữ từ mà bạn dùng để quy định kiểu dáng nét đậm nghiêng Các thẻ HTML: Bây sâu vào khái niệm đằng sau HTML, xem xét số ví dụ mẫu Để bắt đầu, tất công việc phải làm khởi động trình soạn thảo văn u thích bạn bảo đảm có tài liệu rỗng hiển thị Trình xử lý văn bạn phải có khả lưu tập tin dạng văn Notepad làm việc cách tự động; cịn trình xử lý văn khác, Word WordPerfect, có tuỳ chọn văn hộp thoại Save As Hãy tham khảo tài liệu thuyết minh trình xử lý văn Đồng thời bạn phải lưu trang với đuôi mở rộng HTM HTML, Homepage.htm chẳng hạn Tạo lập trang Web vấn đề đơn giản, cần đánh văn bạn vào chèn thêm ký hiệu đánh dấu, gọi thẻ có dạng sau: văn chịu tác động Phần thẻ mã (thường có hai chữ) xác định hiệu ứng mà bạn yêu cầu Ví dụ, cho thẻ nét đậm Cho nên bạn muốn câu ACME Coyote Suppplies xuất theo kiểu chữ đậm (bold), bạn phải đưa dịng sau vào tài liệu mình: ACME Coyote Supplies Thẻ báo cho trình duyệt (browser) hiển thị tất phần văn phông chữ đậm, liên tục thẻ Dấu gạch chéo (/) xác định thẻ kết thúc, báo cho trình duyệt ngưng hiệu ứng HTML có nhiều thẻ dùng cho nhiều hiệu ứng khác, bao gồm chữ nghiêng (italic), dấu đoạn văn (paragraph), tiêu đề, tên trang, liệt kê, liên kết, nhiều thứ Cấu trúc sở: Các trang Web khác nhau, tẻ nhạt hay sinh động, vô nghĩa cần thiết, tất có cấu trúc sở, nên đa số trình duyệt chạy hầu hết kiểu máy tính hiển thị thành công hầu hết trang Web Các tập tin HTML bắt đầu thẻ Thẻ khơng làm khác ngồi nhiệm vụ báo cho trình duyệt Web biết đọc tài liệu có chứa mã HTML Tương tự, dịng cuối tài liệu bạn luôn thẻ , tương đương Hết Chi tiết catalog thẻ HTML dùng để chia tài liệu thành hai phần: đầu thân Phần đầu giống lời giới thiệu cho trang Các trình duyệt Web dùng phần đầu để thu nhặt loại thông tin khác trang Để xác định phần đầu, bạn đưa thêm thẻ thẻ vào sau thẻ Mặc dù bạn đặt số chi tiết bên phạm vi phần đầu này, phổ biến tên trang Nếu có xem trang browser, tên trang xuất dải tên cửa sổ browser Để xác định tên trang, bạn đặt đoạn văn tên thẻ Ví dụ bạn muốn tên trang My Home Sweet Home Page, bạn đưa vào sau: My Home Sweet Home Page Phần thân nơi bạn nhập vào văn xuất trang Web lẫn thẻ khác quy định dáng vẻ trang Để xác định phần thân, bạn đặt thẻ sau phần đầu (dưới ) Các thẻ sau xác định cấu trúc trang Web: tên trang Các thẻ tiêu đề khác Văn thẻ trang Web Văn đoạn: Như trình bày trên, bạn bổ sung văn trang Web cách đánh vào thẻ Tuy nhiên, cần nhớ bắt đầu đoạn văn (chương, mục) mà ấn phím Enter Bạn phải dùng thẻ để báo cho browser biết bạn muốn chuyển vào đoạn văn mới: My Home Sweet Home Page Văn xuất phần thân trang WebVăn xuất đoạn văn Bổ sung định dạng tiêu đề: HTML bao gồm nhiều thẻ làm đẹp cho văn trang Bạn thấy trên, từ câu thành dạng chữ đậm đặt vào thẻ Bạn biểu văn theo kiểu chữ nghiêng cách bao chúng lại thẻ , làm cho từ xuất dạng cách đơn với thẻ Giống chương sách, nội dung nhiều trang Web chia thành đoạn Để giúp phân cách đoạn làm cho dễ đọc hơn, bạn sử dụng tiêu đề Lý tưởng nhất, tiêu đề phải có tác dụng đề mục nhỏ, thể ý tưởng tóm tắt đoạn văn Để làm cho đề mục bật, HTML có loại thẻ tiêu đề để hiển thị văn theo phông chữ đậm với nhiều cỡ chữ khác nhau, từ ứng với phông lớn đến ứng với phông nhỏ Làm việc với liên kết siêu văn Thẻ HTML dùng để thiết lập liên kết siêu văn Thẻ khác so với thẻ khác mà bạn gặp bạn khơng thể dùng mà phải kèm thêm địa tài liệu bạn muốn liên kết Sau cách hoạt động nó: HREF viết tắt hypertext reference (tham chiếu siêu văn bản) Chỉ cần thay từ địa địa thực trang Web mà bạn muốn dùng để liên kết Dưới ví dụ: Như cịn chưa kết thúc Tiếp theo, bạn phải cung cấp số văn diễn giải liên kết để nhấn chuột vào Cơng việc cịn lại chèn văn vào thẻ sau: Văn liên kết Sau ví dụ : Why not head to the DOSWo rld home page? Chèn hình: Nếu bạn muốn Web site trội hơn, bạn phải theo xu hướng đồ hoạ với hình ảnh chọn kỹ lưỡng Làm để chèn hình vào tập tin HTML có văn bản? Nhờ bổ sung thẻ vào tài liệu, lệnh Chèn hình vào Thẻ xác định tên tậ tin đồ hoạ để trình duyệt mở tập tin hiển thị hình: đây, SRC viết tắt source (nguồn) tên tập tin tên đường dẫn tập tin đồ hoạ mà bạn muốn hiển thị (dùng dạng GIF JPG) Giả sử bạn có hình tên logo.gif nằm thư mục Graphics Để đưa vào trang Web, bạn dùng dòng sau Các bảng tham khảo HTML Web: Một vài thẻ bạn thấy vụn vặt bề mặt HTML Có hàng tá thẻ bổ sung khác cho phép bạn thành lập danh sách liệt kê dấu đầu dòng, bảng, biểu tương tác Để tìm hiểu chúng, bạn thử dùng bảng tham khảo HTML Web Yahoo! cung cấp danh sách tham khảo địa http://www.yahoo.com/Computers_and_Internet/ Information_and_Documentation/Data_Formats/HTML/Reference/ Đồng thời, Microsoft có bảng tham khảo HTML xuất sắc (dĩ nhiên cài vào Internet Explorer riêng họ) địa chỉ: http://www.microsoft.com/workshop/author/newhtml/default.html Cuối bạn trở thành chuyên gia viết mã HTML, phương pháp tốt để biết nhiều HTML xem mã mà người khác dùng để xây dựng trang họ Ngay có trang cụ thể browser mình, bạn lưu chúng lại (dùng File/Save As Netscape Navigator File/Save As File Internet Explorer), mở tập tin lưu xem trình xử lý văn bạn Ngồi ra, Netscape Navigator Internet Explorer cho phép xem trang mở browser; chọn View/Document Source Netscape Navigator View/Source Internet Explorer Các soạn thảo HTML Không thiết phải tìm hiểu thẻ HTML để tạo dựng trang Web Có nhiều chương trình Windows thực cơng việc chèn thêm thẻ thích hợp cách tự động Sau ví dụ số trình soạn thảo có sẵn: Word 97 Phiên Microsoft Word có sẵn khả HTML, bao gồm ví dụ mẫu lệnh Save to HTML để chuyển đổi tài liệu World hữu thành HTML Netscape Composer Một phần Netscape Communicator, có kỹ thuật tạo trang WYSIWYG (thấy nấy) tích hợp chặt chẽ với Netscape Navigator Hãy tìm địa http://home.netscape.com/để có nhiều thơng tin WebEdit Chương trình WebEdit xuất sắc Kenn Nesbitt có giao diện trực giác hỗ trợ hầu hết thẻ HTML có hành tinh này, đồng thời tốc độ nhanh HomeSite Đây trình biên tập HTML tương đối Một điều ngạc nhiên biên soạn người vẽ tranh biếm hoạ - tác giả phim hoạt hình Dexter Nó soạn thảo đầy đủ tính năng, bao gồm trình kiểm tra tả cài sẵn, browser, frame wizard, thẻ HTML mã hoá màu, nhiều khác Tìm theo địa http://www.dexnet.com/homesite.html Bùi Xuân Toại DOS World 6/97 Soạn thảo văn HTML Cấu trúc trang văn HTML Diễn giải Chương trình bao gồm phần: , : mở đầu kết thúc chương trình , : mở đầu kết thúc phần đầu chương trình , : mở đầu kết thúc thân chương trình Mã nguồn: Tựa đề thí dụ Xin chào bạn Kết quả: Xin chào bạn Chú ý: Xâu ký tự nằm không hiển thị trang Web mà hiển thị phía Browser Xâu ký tự nằm đặt phần header trang Web in Xâu ký tự nằm ghi lại bạn cập nhật trang Web vào mục trang Web yêu thích (Fovorites) Đầu đề trang văn HTML Mã nguồn: Tựa Đây Đây Đây Đây Đây Đây đề thí dụ đầu đầu đầu đầu đầu đầu đề đề đề đề đề đề 1 2 3 4 5 6 Kết Đây đầu đề Đây đầu đề Đây đầu đề Đây đầu đề Đây đầu đề Đây đầu đề Xuống dòng chia đoạn trang HTML Diễn giải Khi bạn đánh máy văn chương trình soạn thảo văn đó, bạn cần bấm phím Return để kết thúc dòng hay đoạn văn, bạn cần phải làm nhiều thao tác bạn muốn phân định riêng đoạn văn khác trang Web Browser tự động bỏ qua mã xuống dịng bình thường Vì bạn phải viết thêm thẻ
để phân đoạn hay viết thẻ vị trí cụ thể mà bạn muốn xuống dịng Mã nguồn (với đoạn văn sử dụng mã xuống dịng bình thường) Cộng hồ xã hội chủ nghĩa Việt nam Độc lập - Tự - Hạnh phúc Đơn xin việc Kết Cộng hoà xã hội chủ nghĩa Việt namĐộc lập - Tự - Hạnh phúcĐơn xin việc Mã nguồn (có sử dụng thẻ
) Cộng hoà xã hội chủ nghĩa Việt nam Độc lập - Tự - Hạnh phúc
Đơn xin việc Kết Cộng hoà xã hội chủ nghĩa Việt nam Độc lập - Tự - Hạnh phúc Đơn xin việc Đường kẻ ngang Diễn giải Đường kẻ ngang chủ yếu dùng để phân định trang Web thành phần có tính logic dễ nhìn Có khơng nhiều khả đồ hoạ ngôn ngữ HTML, đường kẻ ngang cơng cụ có ích Mã nguồn Kết Chú ý: Có thể tổ hợp tùy chọn với Danh sách phân loại Diễn giải Đây danh sách lý cho thấy danh sách lại có ích Bởi vì: Nó có tính hấp dẫn trực quan Nó sử dụng để nhóm yếu tố ý kiến tương tự Chúng ta dễ dàng đọc lượt qua danh sách ghi nhớ yếu tố tương ứng HTML cung cấp nhóm đa dạng kiểu danh sách khác Mỗi loại danh sách có cấu trúc định dạng riêng Chúng bao gồm: Danh sách có trật tự sách Danh sách có trật tự tự động đánh số thành tố danh Mã nguồn
- Yếu tố
- Yếu tố
- Yếu tố
- Yếu tố
- Yếu tố
- Yếu tố
Văn xuất đoạn văn < /HTML> Bổ sung định dạng tiêu đề: HTML bao gồm nhiều... thẻ HTML mã hố màu, nhiều khác Tìm theo địa http://www.dexnet.com/homesite .html Bùi Xuân Toại DOS World 6/97 Soạn thảo văn HTML Cấu trúc trang văn HTML Diễn giải Chương trình bao gồm phần: ,