tìm hiểu về html

Các Căn Bản Về HTML VB.Net Ph ần 1 : Căn B ản Về HTML  Căn bản về HTML HTML (HyperText Markup Language) : Đây là một ngôn ngữ đơn giản được sử dụng trong các tài liệu siêu văn bản. Đừng choáng. Nó cũng chỉ là các tài liệu văn bản bình thường nhưng có chứa các thành phần đặc biệt gọi là các thẻ (hoặc các cặp thẻ) đánh dấu. Dựa theo các cặp thẻ này mà trình duyệt có thể biết được nó phải thực hiện cái gì. Bản chất của HTML không phải là một ngôn ngữ lập trình nên các bạn cũng chẳng cần lo lắng đến những thuật toán lằng nhằng. Nó chỉ là một "ngôn ngữ" để đánh dấu văn bản thôi. Ví dụ: Hãy lấy một ví dụ đơn giản như sau: Xin chào, tôi là LGVT Dòng chữ Xin chào, tôi là LGVT được đặt trong cặp chữ "" và "" Cặp chữ này chính là ký hiệu của một cặp thẻ trong ngôn ngữ HTML, mà khi biên dịch ra, trình duyệt sẽ hiểu là: Khi gặp thẻ "", nó phải có trách nhiệm in tất cả các chữ sau đó thành chữ đậm cho đến khi gặp thẻ "". Các thẻ trong HTML như là các từ khoá trong Pascal vậy. Bản thân HTML chỉ có khoảng hơn 20 thẻ thông dụng . Trong HTML, các thẻ có thể tồn tại đơn lẻ, hoặc tồn tại dưới dạng một cặp thẻ. Nếu tồn tại dưới dạng 1 cặp thì thẻ bắt đầu gọi là thẻ mở và thẻ kết thúc gọi là thẻ đóng. Các bạn có thể hình dung thẻ mở như từ khoá Begin và thẻ đóng như từ khoá End trong khối câu lệnh của Pascal vậy. Sinh Viên Thực Hiện : Nguyễn Văn Tuấn 1 Các Căn Bản Về HTML VB.Net VD: Thẻ <img> là 1 thẻ đơn (không có thẻ đóng), có nhiệm vụ thông báo cho trình duyệt hiển thị một hình ảnh nào đó. Cặp thẻ là 1 cặp thẻ, bắt đầu bằng thẻ và kết thúc bằng thẻ . Cặp thẻ này quy định font chữ, màu chữ, kích cỡ chữ của đoạn văn bản nằm giữa. Để soạn thảo một file HTML, có thể sử dụng bất kỳ trình soạn thảo nào, chẳng hạn như NotePad hay thậm chí Turbo Pascal cũng được. miễn là sau đó các bạn Save As dưới dạng đuôi *.htm. Còn để mở file này thì cứ việc kích đúp chuột vào đó, trình duyệt sẽ tự động mở ra cho bạn. Tất nhiên cũng có nhiều chương trình soạn thảo cho phép sinh tự động mã HTML, nhưng để cho các bạn nắm vững ngôn ngữ này, tôi yêu cầu các bạn phải tự soạn bằng tay trên NotePad. Các ví dụ dưới đây mang tính chất tham khảo, có thể copy và lưu chúng dưới dạng file .htm. + ,Cấu trúc của 1 thẻ trong HTML bao gồm: - Dấu "<". Nếu là thẻ đóng thì sẽ bắt đầu bằng "</" - Tên thẻ - Các tham số khác nếu có. Nếu là thẻ đóng thì không cần tham số. - Dấu ">".  Cấu Trúc của 1 trang HTML : Một document HTML luôn bắt đầu bằng <html> và kết thúc bằng </html> (trong đó bạn cũng có thể viết nhỏ hoặc viết hoa <html> và </html>). Tiếp đến là ở giữa thẻ <head> và </head> sẽ là nơi ghi chú, miêu tả về site, đây là nơi mà bạn có thể định dạng trang, sử dụng các thẻ META . Nhờ có cặp TAG này mà Browser biếtt được đó là HTML - document để trình duyệt. Những chữ đó chỉ để dành Sinh Viên Thực Hiện : Nguyễn Văn Tuấn 2 Các Căn Bản Về HTML VB.Net riêng cho Browser, người đọc chỉ nhận được những gì viết giữa cặp TAG <body> và </body>. Trong một document html, chú thích được dùng như sau: “<!Nội Dung dòng chú thích > “  Như vậy một trang web viết bằng html sẽ có cấu trúc như sau: <html> <head> <title><! Tên trang web bạn muốn hiển thị ></title> </head> <body> <! Nội dung bạn cần trình bày trong trang html > </body> </html>  Phần mở rộng là HTM hay HTML? Khi bạn lưu một văn bản dưới dạng HTML, bạn có thể sử dụng cả hai dạng là .htm và .html. Chúng ta đã sử dụng dạng .htm trong ví dụ trên. Lý do này bắt nguồn từ nguyên nhân ngày trước là có những phần mềm chỉ cho phép phần mở rộng có tối đa là 3 chữ cái. Với những phần mềm mới hiện nay chúng ta nghĩ sẽ trình soạn thảo text đơn giản để học và làm quen với cấu trúc câu lệnh của HTML. tốt hơn nếu bạn lưu lại với phần mở rộng là .html  Một chú ý khi sử dụng trình soạn thảo HTML: Bạn có thể dễ dàng chỉnh sửa một tài liệu HTML bằng cách sử dụng WYSIWYG (what you see is what you get = thấy gì có đó) như là Frontpage, Claris Homepage, Dream weaver hoặc Adobe PageMill thay vì bạn phải tự viết những cặp thẻ từ đầu đến cuối. Sinh Viên Thực Hiện : Nguyễn Văn Tuấn 3 Các Căn Bản Về HTML VB.Net Phần 2: Các Thẻ Định Rạng 1. Các thẻ xử lý đoạn a). Thẻ phân chia đoạn Trong HTML, các đoạn tài liệu, văn bản, hình ảnh… được phân chia bằng cặp thẻ văn bản , Thẻ có 1 số thuộc tính sau: -Align: Thuộc tính này sẽ chứa 1 trong 3 giá trị -center: Đoạn tài liệu sẽ được canh chỉnh vào giữa -left: Đoạn tài liệu sẽ được canh chỉnh theo lề trái - right: Đoạn tài liệu sẽ được canh chỉnh theo lề phải - justify: Đoạn tài liệu sẽ được canh chỉnh theo hai bên Ví dụ: <HTML> <BODY> van tuan </BODY> </HTML> Style: Thuộc tính này sẽ quy định khoảng cách lề của đoạn. Trong thuộc tính này Sinh Viên Thực Hiện : Nguyễn Văn Tuấn 4 Các Căn Bản Về HTML VB.Net lại có các thuộc tính con, tuy nhiên các thuộc tính con này được đặt cách nhau bằng dấu chấm phẩy. Tất nhiên các bạn cũng có thể loại bỏ thuộc tính con: - margin-left : x (x là số nguyên chỉ định chiều rộng của lề trái) - margin-right : y (y là số nguyên chỉ định chiều rộng của lề phải) - margin-top: z (z là số nguyên chỉ định chiều rộng của lề trên) - margin-bottom: t(t là số nguyên chỉ định chiều rộng của lề dưới) - line-height: u% (u: khoảng cách giữa các dòng tính theo đơn vị 100 %) Ví dụ: <HTML> <BODY> <! căn giữa, có lề trái = 10, lề phải bằng 5, lề trên = 6, lề dưới = 6 > <! xác định đoạn văn bản căn trái, các lề đặt theo mặc định của trình duyệt > <! xác định đoạn văn bản căn trái, các lề đặt theo mặc định của trình duyệt > </BODY> </HTML> b. Thẻ xuống dòng Sinh Viên Thực Hiện : Nguyễn Văn Tuấn 5 Các Căn Bản Về HTML VB.Net Trong HTML, các ký tự xuống dòng không được sử dụng. Để ngắt một dòng nào đó, ta dùng thẻ . Đây là 1 thẻ đơn: <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> Trung thu là tết thiếu nhi Tại sao người lớn lại đi chơi nhiều Chơi nhiều thì sẽ làm liều Làm liều lại đẻ ra nhiều thiếu nhi </BODY> </HTML> 2. Các thẻ liên kết: a. Thẻ liên kết với hình ảnh: Trong HTML, chúng ta không thể chèn trực tiếp toàn bộ ruột gan của một file hình ảnh, mà ta phải chỉ dẫn đến hình ảnh đặt bên ngoài. Để làm điều này, ta dùng thẻ <img>. Đây là 1 thẻ đơn. Thẻ này có một số thuộc tính sau: - Src: Xác định địa chỉ URL của hình ảnh: - align: Xác định kiểu canh lề Sinh Viên Thực Hiện : Nguyễn Văn Tuấn 6 Các Căn Bản Về HTML VB.Net - right: Canh theo lề phải - left:Canh theo lề trái - center:Canh theo lề giữa. <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> <img src ="bigreen.gif" align = "right"> Trung thu là tết thiếu nhi Tại sao người lớn lại đi chơi nhiều Chơi nhiều thì sẽ làm liều Làm liều lại đẻ ra nhiều thiếu nhi </BODY> </HTML> Code Kết Quả Sinh Viên Thực Hiện : Nguyễn Văn Tuấn 7 Các Căn Bản Về HTML VB.Net <html> <body> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> kich vao anh se lien ket toi link google<a href =”google.com”><img scr=”smiley.gif” width=”200” heigh=”100”> Toi la Tuan </a> </body> </html> Kich vao anh se toi link google Toi la Tuan - border: Xác định chiều dày của viền bao quanh ảnh. <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> <img src ="bigreen.gif" border ="5"> Sinh Viên Thực Hiện : Nguyễn Văn Tuấn 8 Các Căn Bản Về HTML VB.Net Trung thu là tết thiếu nhi Tại sao người lớn lại đi chơi nhiều Chơi nhiều thì sẽ làm liều Làm liều lại đẻ ra nhiều thiếu nhi </BODY> </HTML> b. Thẻ liên kết trang web. Để tạo một liên kết tới một trang web khác, ta dùng cặp thẻ <a></a>. Cặp thẻ này có các thuộc tính sau: Href: Địa chỉ URL của trang web cần liên kết tới. bạn đã có một bookmark trên trang web, bạn có thể trỏ đến vị trí của bookmark bằng cách dùng thuộc tính href với dấu # và tên bookmark. name: Xác định tên của bookmark (điểm liên kết trong nội tại trang web). Ví dụ, ta có 2 trang web: Trang thứ nhất có địa chỉ là "tettrungthu.htm", có nội dung sau: <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> <img src ="bigreen.gif" border ="5"> Trung thu là tết thiếu nhi Tại sao người lớn lại đi chơi nhiều Chơi nhiều thì sẽ làm liều Làm liều lại đẻ ra nhiều thiếu nhi </BODY> </HTML> Trang thứ 2 có tên là danhsachthovui.htm, có nội dung sau: <HTML> Sinh Viên Thực Hiện : Nguyễn Văn Tuấn 9 Các Căn Bản Về HTML VB.Net <HEAD> <TITLE></TITLE> </HEAD> <BODY> Tet trung thu </BODY> </HTML> Giả sử ta muốn thêm một liên kết với file "tettrungthu.htm" vào chữ Tet trung thu trong file danhsachthovui.htm, ta phải chèn cặp thẻ <a> </a> như sau: <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> <a href ="tettrungthu.htm">Tet trung thu</a> </BODY> </HTML> Chú ý: cả 2 file này phải được đặt cùng thư mục. Trong trường hợp đặt khác thư mục các bạn phải ghi rõ đường dẫn đến file kia. 3. Các thẻ xử lý font chữ: a. Thẻ Meta: Thẻ này có nhiều thuộc tính khác nhau và cũng làm nhiều nhiệm vụ khác nhau. Tuy nhiên ở đây tôi chỉ nói về cách ứng dụng thẻ này để hiển thị các đoạn mã tiếng Việt. Trước đây các loại font chữ tiếng Việt rất phong phú, điều này khiến cho người sử dụng tiếng Việt trên thế giới phải than trời ầm ỹ cả lên. Rất may là tại thời điểm này, Sinh Viên Thực Hiện : Nguyễn Văn Tuấn 10 [...]... thiếu nhi Tại sao người lớn lại đi chơi nhiều Chơi nhiều thì sẽ làm liều Sinh Viên Thực Hiện : Nguyễn Văn Tuấn 11 Các Căn Bản Về HTML VB.Net Làm liều lại đẻ ra nhiều thiếu nhi Thì đoạn mã HTML do ta sinh ra phải có dạng: Trung thu là tết thiếu nhiTại... Tết trung thu Trung thu là tết thiếu nhiTại sao người lớn lại đi chơi nhiều Chơi nhiều thì sẽ làm liềuLàm liều lại đẻ ra nhiều thiế nhi < /html> Sinh Viên Thực Hiện : Nguyễn Văn Tuấn 13 Các Căn Bản Về HTML. .. Căn Bản Về HTML VB.Net hầu hết các font chữ tiếng Việt thời "đồ đá" không còn được ứng dụng trong thiết kế web nữa, thay vào đó là các chuẩn quốc tế Unicode Ta chú ý tới 2 chuẩn Unicode tiếng Việt phổ biến và cách sử dụng thẻ meta cho từng trường hợp cụ thể: - Mã UTF-8: Là mã font Unicode rút gọn (biểu diễn font chữ theo kiểu 8 bit Khi ta khai báo:... tí - Mã UTF-16 bít: Là mã font Unicode 16 bít Ta phải khai báo như sau: Trình duyệt sẽ hiểu là từ khi đọc được dòng chữ này, nó sẽ giải mã các ký tự theo kiểu UTF-16 bit Và khi bạn gửi dữ liệu từ mẫu biểu của HTML đi, dữ liệu đó cũng phải được mã hoá theo tiêu chuẩn UTF- 16 bít trên Chẳng hạn, để trình duyệt hiển thị đúng bài... lớn lại đi chơi nhiều Chơi nhiều thì sẽ làm liềuLàm liều lại đẻ ra nhiều thiếu nhi < /html> Sinh Viên Thực Hiện : Nguyễn Văn Tuấn 14 Các Căn Bản Về HTML VB.Net 4 Các cặp thẻ xử lý bảng: Các bảng trong HTML được định nghĩa như sau: Định nghĩa 1 bảng bởi cặp thẻ Trong 1 bảng (table) được chia làm nhiều dòng , mỗi dòng giới hạn bởi 1 cặp thẻ Trong mỗi... viết theo kiểu #XXXXXX (số HEX) 5 Cách sử dụng mẫu biểu trong HTML: Một mẫu biểu (form) trong HTML bao gồm nhiều thành phần khác nhau Các thành phần có thể là ô văn bản, ô kéo thả, ô danh sách, nút bấm, hay các ô check Mẫu biểu được bắt đầu bằng thẻ và kết thúc bởi thẻ Giữa 2 cặp thẻ này, các bạn có thể sử dụng các cặp thẻ HTML khác Thẻ form có một số thuộc tính sau: method : Thuộc tính... rút gọn (biểu diễn font chữ theo kiểu 8 bit Khi ta khai báo: Trình duyệt sẽ hiểu là từ khi đọc được dòng chữ này, nó sẽ giải mã các ký tự theo kiểu UTF-8 Và khi bạn gửi dữ liệu từ mẫu biểu của HTML đi, dữ liệu đó cũng phải được mã hoá theo tiêu chuẩn UTF-8 Tất nhiên chúng ta có thể sử dụng chương trình Vietkey hoặc Unikey để gõ tiếng... có tham số kèm theo Ví dụ: Tết trung thu Trung thu là tết thiếu nhiTại sao người lớn lại đi chơi nhiều Chơi nhiều thì sẽ làm liềuLàm liều lại đẻ ra nhiều thiếu nhi < /html> Sinh Viên Thực Hiện... liều Làm liều lại đẻ ra nhiều thiếu nhi. < /HTML> Tất nhiên chúng ta có thể sử dụng chương trình Vietkey hoặc Unikey để gõ tiếng Việt theo chuẩn này với hệ thống bảng mã Unicode UCS2 Chú ý: 1: Một số chương trình soạn thảo có hỗ trợ chế độ hiển thị mã tiếng Việt trong quá trình soạn thảo Khi đó nếu các bạn mở chế độ mã HTML mà vẫn đọc được tiếng Việt như thường thì các bạn cứ ung... làm như sau: Ô thứ nhất Ô thứ 2 Ô thứ 3 Hoặc để định nghĩa một bảng gồm 2 dòng, mỗi dòng 3 ô: Sinh Viên Thực Hiện : Nguyễn Văn Tuấn 15 Các Căn Bản Về HTML VB.Net Ô thứ nhất dòng 1 Ô thứ 2 dòng 1 Ô thứ 3 dòng 1 Ô thứ nhất dòng 2 Ô thứ 2 dòng 2 Ô thứ 3 dòng 2 . Các Căn Bản Về HTML VB.Net Ph ần 1 : Căn B ản Về HTML  Căn bản về HTML HTML (HyperText Markup Language) : Đây là một ngôn ngữ đơn giản. Trúc của 1 trang HTML : Một document HTML luôn bắt đầu bằng < ;html& gt; và kết thúc bằng < /html& gt; (trong đó bạn cũng có thể viết nhỏ hoặc viết hoa < ;html& gt; và < /html& gt;). Tiếp. trình bày trong trang html > </body> < /html& gt;  Phần mở rộng là HTM hay HTML? Khi bạn lưu một văn bản dưới dạng HTML, bạn có thể sử dụng cả hai dạng là .htm và .html. Chúng ta đã