Ngôn ngữ HTML

Ngôn ngữ HTML 01: Tổng quan ngôn ngữ HTML 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ơng 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 Ngồ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 02: 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 03: in đậm, nghiêng, gạch chân 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 Kết Ðây tag gạch chân Ðây tag gạch chân Ðây tag nghiêng Ðây tag nghiêng Ðây tag chữ đánh máy Ðây tag chữ đánh máy Ðây tag đậm Ðây tag đậm Ðây tag Ðây tag Strong Ðây tag Ðây tag Strong 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 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 04: thẻ tiêu đề Khi trình bày trang Web, đơi 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 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 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ử chuyên Công nghệ thông tin Chúng 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 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 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 06: Trình bày với Ðể làm cho khối văn hơn, ví dụ đoạn trích dẫn, lời khuyên làm cho trang Web bạn trình bày đẹp hơn, sử dụng tag Ðoạn văn nằm cặp tag trình bày thụt vào so với phần thân văn Khi cần trình bày đoạn văn lùi sâu vào bên so với toàn văn để đoạn văn bật hơn, ví dụ bạn cần hiển thị ý, bạn dùng tag <blockquote > Trình bày đoạn văn tag <blockquote > làm cho đoạn văn bạn bật hơn, trang Web bạn trông chuyên nghiệp Bạn thử xem 6.2.Thực hành Với kiến thức học được, bạn xây dựng cho trang Web chẳng hạn trang Web hướng dẫn học tiếng Anh với hình ảnh, siêu liên kết ghi dùng tag 07: Sử dụng ký tự đặc biệt Ðôi trang Web bạn có ký tự đặc biệt, chẳng hạn ký tự tiếng Anh, dấu nhấn HTML quy định việc hiển thị ký tự sau &XXXX; XXXX tên mã cho ký tự đặc biệt Bạn xem Danh sách ký tự đặc biệt để biết thêm chi tiết Ví dụ phần body có đoạn sau: >>>ÆñÞó&szli g;ÿ Thì kết trình duyệt là: Trong trang Web bạn nhiều lúc phải hiển thị ký tự dấu lớn (>) dấu nhỏ ( & thay cho & Ví dụ: Ðể hiển thị 700 > 400 ta viết sau: 700 > 400 Qua học trước bạn biết trình duyệt Web bỏ qua tất khoảng trắng file HTML Tuy nhiên để trình bày trang Web cho đẹp, bạn muốn chèn khoảng trắng vào trang Web, ví dụ bạn muốn khoảng trắng sau dấu chấm câu hay sau dấu phảy, chèn khoảng trắng vào đầu đoạn văn Muốn chèn khoảng trắng ta dùng ký hiệu   Ngoài ký hiệu mơ tả trên, HTML cịn cung cấp thêm cho số ký hiệu đặc biệt nữa, là: 7.2 Thực hành 1.Tạo file HTML sau thêm phần sau vào phần body HTML hiển thị ký tự đặc biệt như:

© thay cho â ® thay cho đ
• Các kýtựlatin:>>>ÆñÞóß&yu ml;
• Các dấu lớn hơn, nhỏ hơn, dấu : > < &
• Các dấu Copyright Trademark : © ®

2.Lưu cơng việc bạn so sánh với ví dụ mẫu: Chú ý: Ðể hiển thị dấu Copyright Trademark bạn dùng font Tiếng Việt bạn phải đổi dấu sang font Tiếng Anh 08: Đưa hình ảnh vào website Sau học trước bạn thắc mắc, trang Web xấu tệ, khơng giống trang Internet mà bạn xem qua Bình tĩnh bạn ạ, Sau học này, bạn đưa hình ảnh vào trang Web bạn cảm thấy trang Web thật hấp dẫn Ðể đặt hình ảnh vào trang Web bạn dùng tag sau Trong "Tên ảnh" tên file ảnh folder với file HTML bạn Ví dụ : Ðể chèn ảnh có tên anh1.jpg ta làm sau tag cịn có thêm thuộc tính để hiển thị văn so với hình ảnh Thuộc tính align với giá trị khác cho ta hiệu ứng sau align = top align = middle align = bottom Ngoài thuộc tính cịn có số giá trị khác như: TextTop, AbsMiddle, AbsBottom Baseline Các bạn tìm hiểu thêm qua thực hành 8.2.Thực hành Trước đưa hình ảnh vào trang Web bạn mời bạn download số hình ảnh để làm ví dụ Tạo file HTML sử dụng tag để thêm ảnh vào trang Web 2.Thử thêm thuộc tính align = vào tag img so sánh với kết học 8.3.Thêm số thuộc tính tag Thuộc tính alt = " " Khi trang Web bạn xem trình duyệt mà người sử dụng tắt việc trình bày hình ảnh để tiết kiệm thời gian download, thuộc tính alt = "" cho phép thay vào vị trí hình ảnh chuỗi văn mơ tả Ví dụ Cụm từ Download Software thay cho hình ảnh Thuộc tính chiều cao chiều rộng Ðể cho trang Web bạn nạp nhanh hơn, bạn nên đưa kích thước ảnh (tính pixel) vào tag Cách sử dụng thuộc tính là: x,y chiều rộng chiều cao ảnh Thuộc tính tạo vùng quanh ảnh Thuộc tính làm cho khoảng cách ảnh đoạn văn thơng thống, dễ nhìn đẹp mắt Hai thuộc tính có tên HSPACE VSPACE: x khoảng cách vùng trống hai mặt trái phải ảnh y khoảng cách vùng trống đỉnh đáy ảnh Bạn học kỹ học lần sau Ðối với thuộc tính này, khơng đưa thêm vào tà img trình duyệt tự động tính chúng trước hiển thị 09: Căn chỉnh lề Trong học trước, bạn thấy trang Web bạn lề bên trái, bạn muốn trình bày trang Web đẹp cách xếp đoạn văn vào trang, HTML có nhiều cách giúp bạn thực điều Cách thứ nhất: Bạn đặt đoạn văn cần xếp vào trang nằm tag Ví dụ: Xin chuc mung ban cho kết sau: Cách thứ 2: Ðặt thuộc tính align tag

có giá trị center Ví dụ:

Xin chuc mung ban

9.1.b.Sắp xếp tương đối văn hình ảnh Khi muốn có văn phủ xung quanh hình ảnh, bạn việc thêm thuộc tính align vào tag Ví dụ: cho kết quả: so với khơng có thuộc tính align: Khi văn mục khác với hình ảnh ngắn bạn muốn đẩy văn xuống bên hình ảnh, bạn sử dụng tag với thuộc tính clear: tag với thuộc tính clear xố tất cách xếp có tag Ví dụ: Khi chưa có tag Khi có thêm tag Khi cần trình bày văn phủ quanh hình ảnh với khoảng cách định ta dùng thêm thuộc tính vspace hspace tag Trong vspace khoảng cách bên hay bên hình ảnh văn space khoảng cách bên phải hay bên trái hình ảnh văn Ví dụ: So với khơng có thuộc tính vspace hspace 9.1.c Chỉnh lề xếp văn Ngoài cách xếp văn mà bạn biết, HTML cho thêm tag chỉnh văn nữa, Vùng văn chịu ảnh hưởng tag dựa vào thuộc tính align 9.2 Thực hành Bây bạn tạo trang Web hiển thị tin đó, có sử dụng hình ảnh minh hoạ cho tin Yêu cầu sử dụng thuộc tính vspace hspace để chỉnh khoảng cách văn hình ảnh cho đẹp, sử dụng tag để canh lề cho đoạn văn 10: Tạo siêu liên kết Ðiều thực làm cho Web trội khả tạo mối liên kết đến thông tin liên quan Những thơng tin nằm trang Web hay nằm trang Web khác bao gồm hình ảnh, âm thanh, đoạn phim 10.1 Liên kết tới file cục Bây bạn bắt đầu tạo liên kết từ trang Web bạn đến trang Web thứ hai Liên kết gọi cục trang Web thứ hai nằm máy với trang Web đầu Ðể đơn giản trước hết bạn tạo file HTML thứ hai đặt folder với trang mà bạn tạo trước Muốn tạo siêu liên kết ta dùng Văn đại diện cho mối liên kết Bất đoạn văn nằm siêu văn liên kết tới trang Web khác gạch Thực hành 1.Tạo trang Web khác giả sử vidu.htm lưu vào Folder với trang Web bạn 2.Trong trang Web mà bạn cần tạo siêu liên kết tới bạn thêm tag tạo siêu liên kết sau : Xem ví dụ 1 3.Lưu lại cơng việc bạn mở trình duyệt Khi bạn thấy đoạn văn Xem ví dụ tạo thành siêu liên kết, đổi thành màu xanh bạn đưa chuột vào vùng văn chuột bị đổi thành hình bàn tay bạn bấm chuột đưa tới trang có tên vidu.htm Bạn liên kết tới hình ảnh cách thay tên filename.htm file ảnh Ví dụ: Text Tới bạn lại có thắc mắc, muốn liên kết tới thư mục khác thư mục cao làm nào? Ðể thực điều mời bạn xem tiếp phần sau Giả sử cấu trúc folder bạn có dạng | My Web | | Pictures | | | i-today.gif | | Trang web bạn vị trí Và bạn muốn liên kết tới I-today.gif, trang tag bạn sửa lại sau Còn trường hợp file bạn cần tạo liên kết có cấu trúc folder cao Ví dụ: | Pictures1 | My Web | | Pictures | | | i-today.gif | | Trang web bạn vị trí bạn cần liên kết tới ảnh Folder Pictures1 có cấp cao thư mục chứa trang Web bạn, bạn cần sửa lại tag sau: lần xuất " /" báo cáo cho trình duyệt tìm kiếm folder có cấp cao Thực hành Bây bạn áp dụng cách liên kết tới file Folder cấp cấp cao Khi thạo cách liên kết, xây dựng trang Web bạn để tất ảnh Folder liên kết tới, điều làm cho việc thay đổi, cập nhật trang Web thuận tiện Thêm chút vấn đề siêu liên kết Ðể cho trang Web bạn chuyên nghiệp hơn, bạn đổi tên thành index.htm Ðiều lý giải sau: Ví dụ bạn vào trang I-today bạn gõ vào dịng địa trình duyệt http://www.joomlahcm.com Thực trình duyệt đọc file http://www.joomlahcm.com/index.html 10.2 Liên kết đến trang Web khác Internet Ðể liên kết tới trang Web khác Internet ta dùng tag sau: Text Trong URL (Uniform Resource Locator) cho biết địa mà bạn muốn liên kết tới Thực hành 1.Tạo file HTML thêm đoạn sau vào phần body

• Dịch vụ thiết kế website
• Trường Trung cấp Bách Khoa Sài Gịn
• Gửi thư cho JoomlaHCM

Lưu cơng việc bạn, sau mở trình duyệt so sánh với ví dụ Bạn kiêm tra siêu liên kết cách di chuột vào vùng văn siêu liên kết xem thông báo trạng thái trình duyệt, trạng thái hiển thị URL mà bạn liên kết tới 10.3 Liên kết tới phần trang HTML cho bạn tạo liên kết đến trang Web khác nằm máy tính với trang Web bạn Internet, mà cho phép bạn liên kết đến phần trang Ðể liên kết đến phần trang trước hết bạn phải đặt tên cho phần cần liên kết tới Thủ tục thực tag Trong name tên bạn đặt Sau bạn cần liên kết tới phần đặt tên bạn cần dùng Text to link Tương tự liên kết tới tài liệu khác ta dùng Text to link Ví dụ :Click vào để đầu trang 10.4 Tạo siêu liên kết hình ảnh Như bạn thường thấy trang Web, siêu liên kết không đoạn văn mà cịn hình ảnh nữa, điều làm cho Web trở nên hấp dẫn Phần giới thiệu cho bạn cách tạo siêu liên kết hình ảnh: Việc bạn chọn ảnh nằm thư mục /folder với trang Web bạn, giả sử graph.jpg Khi bạn sử dụng Tag sau Bạn lưu ý tag nằm tag Khi ảnh dùng làm siêu liên kết, có hộp màu có màu siêu liên kết bao quanh ảnh Lưu ý: Việc đưa hình ảnh lớn vào trang Web làm cho người đọc phải thời gian chờ tải bạn nên sử dụng số mẹo sau: Ðể đề phịng người đọc tất chế độ hiển thị hình ảnh trình duyệt, bạn nên thêm thuộc tính alt = " " vào tag để người đọc dễ định hướng Khi cần giới thiệu hình ảnh lớn, bạn nên tạo hình ảnh thu nhỏ đưa vào trang Web làm siêu liên kết tới ảnh lớn, đỡ thời gian download trang Web bạn, ví dụ bạn Click chuột vào ảnh sau : Thực hành Bây bạn tạo file HTML mà phần đầu trình bày theo kiểu mục lục, mục liên kết tới phần nội dung tương ứng văn bản, cuối phần nội dung có ảnh làm siêu liên kết để báo quay trở lại đầu tài liệu Trông giống sau 11: Thêm địa chỉ, liên kết E-mail vào trang Web bạn Như bạn thường thấy trang Web Internet, phần cuối trang thường có thơng tin trang Web, chẳng hạn như: © Tiêu đề hay chủ đề trang thời © Ngày cập nhật gần © Bản quyền © Tên E-mail tác giả trang Web Phần gọi footer trang Web Ðể thêm footer vào trang Web, HTML cung cấp cho tag cách sử dụng sau Tất văn nằm tag in kiểu chữ nghiêng, nhiên bạn thay đổi cách hiển thị chúng cách sử dụng tag học 11.2.Thực hành 1.Tạo file HTML, sau thêm phần thông tin cho trang Web, bạn thêm đoạn sau vào cuối phần body

Chuyên mục Chân trời tri thức - Tạp chí Internet Today Copyright @ 2000 by VASC Ðịa : 99 Triệu Việt Vương - Hà nội E_mail : itoday@vasc.vnn.vn Mọi ý kiến sách HTML xin gửi về: Trần Việt Hùng E_mail :