Cơ bản về HTML Viện CNTT&TT - ĐHBKHN 1 Mục đích • Nắm được những kiến thức về các thẻ HTML từ đó thiết kế ra một trang Web 2 Mục đích 3 Mục đích 4 Nội dung • 1. Tổng quan về ngôn ngữ HTML • 2. Cấu trúc tổng quát trang HTML • 3. Các thẻ HTML thông dụng • 4.
Các thẻ tạo biểu mẫu • 5. Một số thẻ HTML đặc biệt • 6. Tổng quan về HTML • HTML (HyperText Markup Language) - Ngôn ngữ đánh dấu siêu văn bản. Là ngôn ngữ để viết các trang web.
• Do Tim Berner Lee phát minh và được W3C (World Wide Web Consortium) đưa thành chuẩn năm 1994. Tổng quan về HTML • HTML sử dụng các thẻ (tags) để định dạng dữ liệu • HTML không phân biệt chữ hoa, chữ thường • Các trình duyệt thường không báo lỗi cú pháp HTML. Nếu viết sai cú pháp chỉ dẫn đến kết quả hiển thị không đúng với dự định 7 1. Tổng quan về HTML • Có nhiều thẻ, mỗi thẻ có 1 tên và mang ý nghĩa khác nhau.
• Cách viết thẻ <tên_thẻ> Dữ liệu </tên_thẻ> Ví dụ: <B>Học về HTML</B> Chú ý: - Tên thẻ bắt nguồn từ một từ tiếng Anh: B ~ Bold, I ~ Italic - Luôn có thẻ mở nhưng có thể không có thẻ đóng tương ứng: <img> , <br>… 8 1. Tổng quan về HTML • Một thẻ có thể có các thuộc tính nhằm bổ sung tác dụng cho thẻ • Viết thẻ có thuộc tính: <tên_thẻ tên_TT1=“giá_trị1”tên_TT2=“giá_trị2”…> <Dữ liệu></tên_thẻ> Ví dụ: <font color=“black” size=“5”>Học về HTML</font> • Chú ý: có thể thay đổi thứ tự, số lượng các thuộc tính mà không gây ra lỗi cú pháp 9 1. Tổng quan về HTML • File (trang) HTML có đuôi là html hoặc htm • Có thể tạo ra từ trình soạn thảo văn bản bất kì: – Notepad – Word… • WYSIWYG editors: – FrontPage – Macromedia DreamWeaver 10 1. Tổng quan về HTML • Trang web đầu tiên: Chao.htm <HTML> <HEAD> <TITLE>Xin chào</TITLE> </HEAD> <BODY> Chào mừng đến với HTML! </BODY> </HTML> 11 2.
Cấu trúc tổng quát trang HTML <HTML> <HEAD> <TITLE> Phạm Phần đầu trang vi </TITLE> trang </HEAD> <BODY> Phần thân trang </BODY> </HTML> 12 2. Cấu trúc tổng quát trang HTML • Phần HTML: thông báo cho trình duyệt biết nội dung giữa hai thẻ là một tài liệu HTML • Phần đầu trang: chứa các mô tả về trang: tiêu đề trang… • Phần thân văn bản: nội dung trang như văn bản, hình ảnh, liên kết muốn hiển thị trên trang Web. Các thẻ HMTL thông dụng • 3. Các thẻ xử lý văn bản • 3.
Các thẻ tạo bảng • 3. Thẻ liên kết • 3. Các thẻ đa phương tiện • 3. Các thẻ tạo khung 14 3.
Các thẻ xử lý văn bản 3. Các thẻ định dạng khối văn bản • Thẻ <DIV>…</DIV> – Cho phép định dạng một đoạn văn bản bằng các thuộc tính của chúng – Thuộc tính: align căn lề (center, jusify.) • Thẻ <P>…</P> – Tương tự như thẻ <DIV> – Sau thẻ </P> dữ liệu tự động xuống hàng 15 3. Các thẻ định dạng khối văn bản • Ví dụ <HTML> <HEAD> <TITLE>Khối văn bản</TITLE> </HEAD> <BODY> <DIV>Khối 1 <P>Thẻ DIV được sử dụng để tạo các đoạn văn bản <P>Sau thẻ P dữ liệu xuống dòng </DIV> <DIV align=“right”>Khối 2 <P>Đoạn văn bản căn lề bên phải </DIV> </BODY> </HTML> 16 3. Các thẻ định dạng khối văn bản 17 3.
Các thẻ định dạng khối văn bản • Thẻ <HR> – Tạo đường kẻ ngang, không có thẻ đóng – align: left, right, center – width: 100% là toàn bộ bề ngang của tài liệu – size: độ dày – noshade: không có bóng • Thẻ <BR> – Xuống dòng, không có thẻ đóng 18 3. Các thẻ định dạng khối văn bản <HTML> <HEAD> <TITLE>Horizontal Tag</TITLE> </HEAD> <BODY> <P>The HR</P> <HR noshade size="5" align="center” width="50%" /> <HR size="15" align="left“ width="80%”/> <HR> <P>The duong ke ngang</P> </BODY> </HTML> 19 3. Các thẻ định dạng khối văn bản 20 3. Các thẻ định dạng kí tự • Thẻ <FONT>…</FONT> – Định dạng một chuỗi với kiểu chữ, cỡ chữ, màu chữ – Thuộc tính • face: kiểu chữ như Arial, Tahoma… • color: màu chữ được xác định từ 3 màu cơ bản R, G, B.
Giá trị biểu diễn: #RRGGBB từ 00-FF • size: kích thước như 1, 2, 3…7 21 3. Các thẻ định dạng kí tự <HTML> <HEAD> <TITLE>Welcome to HTML</TITLE> </HEAD> <BODY> <P align=“justify”> <FONT face="Times New Roman" size="4” color="red">Môn học Thiết kế Web </FONT> Cung cấp cho sinh viên kiến thức về: cơ chế hoạt động của trang web, Cấu trúc trang web, Các công cụ tạo lập các trang web, Sử dụng công cụ để tạo Web</P> </BODY> 22 </HTML> 3. Các thẻ định dạng kí tự 23 3. Các thẻ định dạng kí tự • Thuộc tính color • Được sử dụng trong thẻ FONT và BODY <HTML> <HEAD> <TITLE>Color Attribute</TITLE> </HEAD> <BODY bgcolor="lavender"> <H1><FONT color="red">Welcome to HTML's World</FONT></H1> </BODY> </HTML> 24 3.
Các thẻ định dạng kí tự 25 3. Các thẻ định dạng kí tự • Đầu mục (Heading) – Được sử dụng với các thẻ từ <H1> đến <H6> – Thuộc tính: align 26 3. Các thẻ định dạng kí tự <HTML> <HEAD> <TITLE>Heading Tags</TITLE> </HEAD> <BODY> <H1>This is a heading 1</H1> <H2>This is a heading 2</H2> <H3>This is a heading 3</H3> <H4>This is a heading 4</H4> <H5>This is a heading 5</H5> <H6>This is a heading 6</H6> </BODY> </HTML> 27 3. Các thẻ định dạng kí tự 28 3.
Các thẻ định dạng kí tự • <B>, <U>, <I> • <S>: dòng chữ bị gạch ngang • <BIG>: hiển thị với kích thước font lớn hơn phần còn lại của văn bản • <SMALL>: hiển thị với kích thước font nhỏ hơn phần còn lại của văn bản • <SUP>, <SUB>: chỉ số trên/dưới 29 3. Các thẻ định dạng kí tự <HTML> <HEAD> <TITLE>Các thẻ xử lý văn bản</TITLE> </HEAD> <BODY> <B>Đoạn văn bản được in đậm</B><BR> <I>Đoạn văn bản được in nghiêng</I><BR> <U>Đoạn văn bản được gạch chân</U><BR> <S>Đoạn văn bản được gạch ngang</S><BR> <BIG>Dòng chữ </BIG>kích thước lớn hơn phần còn lại<BR> <SMALL>Dòng chữ </SMALL>kích thước nhỏ hơn phần còn lại<BR> Pi*R<SUP>2</SUP><BR> H<SUB>2</SUB>0 </BODY> 30 </HTML> 3. Các thẻ định dạng kí tự 31 3. Các thẻ tạo danh sách 3.
Danh sách không được sắp xếp <UL> 3. Danh sách được sắp xếp <OL> 32 3. Danh sách không được sắp xếp • Nằm trong cặp thẻ <UL>…</UL> • Thẻ mở <LI>, thẻ đóng </LI> không bắt buộc <HTML> <BODY> <UL>Các môn HK5 <LI>Chuyên đề 1 <LI>Thiết kế Web <LI>Lập trình Java </UL> </BODY> </HTML> 33 3. Danh sách không được sắp xếp 34 3.
Danh sách không được sắp xếp • Sử dụng thuộc tính type để định dạng bullet – <LI type=“square”> : bullet vuông – <LI type=“disc”>: bullet hình cầu – <LI type=“circle”>: bullet hình tròn 35 3. Danh sách không được sắp xếp <HTML> <BODY> <UL>Các môn HK5 – V2 <LI type=“square”>Chuyên đề 1 <LI type=“disc”>Thiết kế Web <LI type=“circle”>Lập trình Java </UL> </BODY> </HTML> 36 3. Danh sách không được sắp xếp 37 3. Danh sách được sắp xếp • Nằm trong thẻ <OL>…</OL> <H1>Các môn HK5</H1> <OL> <LI>Chuyên đề 1 <LI>Thiết kế Web <LI>Java </OL> 38 3.
Danh sách được sắp xếp 39 3. Các thẻ tạo bảng • HTML coi một bảng gồm nhiều dòng, một dòng gồm nhiều ô, và chỉ có ô mới chứa dữ liệu của bảng. • Các thẻ – Tạo bảng: <TABLE>…</TABLE> – Tạo dòng: <TR>…</TR> – Tạo ô: • Ô tiêu đề của bảng: <TH>…</TH> • Ô dữ liệu: <TD>…</TD> • Chú ý: Để có được một ô trống trong bảng (ô không có dữ liệu) thì cần đặt nội dung ô là: 40 3. Các thẻ tạo bảng <TABLE> <TR> <TD>Cell 1</TD> <TD>Cell 2</TD> <TD>Cell 3</TD> </TR> <TR> <TD>Cell 4</TD> <TD>Cell 5</TD> <TD>Cell 6</TD> </TR> </TABLE> 41 3.
Các thẻ tạo bảng 42 3. Các thẻ tạo bảng • Thuộc tính – Border=“số”: đường viền bảng. Mặc định 0 – Width=“độ rộng”; Height=“độ cao” • n%: so với độ rộng, độ cao của bảng • n: số pixels – Cellspacing=“số”: khoảng cách giữa 2 ô liên tiếp – Cellpadding=“số”: khoảng cách từ cạnh ô tới nội dung ô – Bgcolor=“màu nền” – Backgournd=“địa chỉ ảnh nền” 43 3. Các thẻ tạo bảng <TABLE width="400" height="200" border="1" bgcolor="#CCCCCC" cellspacing="10” cellpadding="40"> <TR> <TD>Cell 1</TD> <TD>Cell 2</TD> <TD>Cell 3</TD> </TR> <TR> <TD>Cell 4</TD> <TD>Cell 5</TD> <TD>Cell 6</TD> </TR> </TABLE> 44 3.
Các thẻ tạo bảng 45 3. Các thẻ tạo bảng • Thuộc tính – Colspan=“số”: gộp các ô lại với nhau – Rowspan=“số”: gộp các hàng lại với nhau – Align: căn theo chiều ngang (left, center, right) – Valign: căn theo chiều dọc (top, middle, bottom) • Để loại bỏ bớt ô trong cột, đơn giản loại bỏ đi thẻ khai báo ô đó 46 3. Các thẻ tạo bảng • Ví dụ: Tạo bảng sau 47 3. Các thẻ tạo bảng • Cách thực hiện – Xác định kích thước các ô: n% – Hàng 1: • Ô 1 và ô 2 có rowspan=2; ô 3 có colspan=3 • Align=“center” • Valign=“top” – Hàng 2, 3: • Align=“center” • Valign=“middle” 48 3.
Thẻ liên kết • Siêu liên kết (hyperlink) cho phép bạn chuyển từ trang này sang trang khác, tải tập tin về máy… • Tạo liên kết đến – Một phần khác của cùng tài liệu – Một tài liệu khác – Một phần của tài liệu khác 49 3. Thẻ liên kết 50