SlideShare a Scribd company logo
1 of 70
GIỚI THIỆU NGÔN NGỮ HTML  Thiết kế Web Trường Cao đẳng Kinh tế - Công nghệ TP.HCM Khoa Công nghệ thông tin Trình bày:  Hà Đồng Hưng
CÁC THẺ ĐỊNH DẠNG CẤU TRÚC TÀI LIỆU ,[object Object],[object Object],[object Object],[object Object],Thiết kế Web
CÁC THẺ ĐỊNH DẠNG CẤU TRÚC TÀI LIỆU ,[object Object],[object Object],[object Object],[object Object],Thiết kế Web Xác nhận tài liệu HTML
Thẻ HTML ,[object Object],[object Object],[object Object],[object Object],Thiết kế Web
Thẻ <HTML> ,[object Object],[object Object],[object Object],[object Object],[object Object],Thiết kế Web
CÁC THẺ ĐỊNH DẠNG CẤU TRÚC TÀI LIỆU ,[object Object],[object Object],[object Object],[object Object],Thiết kế Web Xác định phần đầu
Thẻ <HEAD> ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Thiết kế Web
CÁC THẺ ĐỊNH DẠNG CẤU TRÚC TÀI LIỆU ,[object Object],[object Object],[object Object],[object Object],Thiết kế Web Xác định tiêu đề
Thẻ <TITLE> ,[object Object],[object Object],[object Object],[object Object],Thiết kế Web
Thẻ <TITLE> ,[object Object],[object Object],[object Object],Thiết kế Web
Thẻ <TITLE> Thiết kế Web
CÁC THẺ ĐỊNH DẠNG CẤU TRÚC TÀI LIỆU ,[object Object],[object Object],[object Object],[object Object],Thiết kế Web Xác định phần thân của tài liệu
Thẻ <BODY> ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Thiết kế Web
Thẻ <BODY> ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Thiết kế Web
Cấu trúc tài liệu HTML ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Thiết kế Web
Ví dụ Thiết kế Web
Bài tập Thiết kế Web ,[object Object],[object Object],[object Object]
Đáp án Thiết kế Web
Các thẻ định dạng khối ,[object Object],[object Object],[object Object],[object Object],Thiết kế Web
Các thẻ định dạng khối ,[object Object],[object Object],[object Object],[object Object],Thiết kế Web Đoạn
Thẻ <P> ,[object Object],[object Object],[object Object],[object Object],[object Object],Thiết kế Web
Thẻ <P> ,[object Object],Thiết kế Web
Các thẻ định dạng khối ,[object Object],[object Object],[object Object],[object Object],Thiết kế Web Đề mục
Các thẻ đề mục ,[object Object],Thiết kế Web ,[object Object],[object Object],<H1>…</H1> Định dạnh đề mục cấp 1 <H2>…</H2> Định dạnh đề mục cấp 2 <H3>…</H3> Định dạnh đề mục cấp 3 <H4>…</H4> Định dạnh đề mục cấp 4 <H5>…</H5> Định dạnh đề mục cấp 5 <H6>…</H6> Định dạnh đề mục cấp 6
Các thẻ đề mục Thiết kế Web
Các thẻ định dạng khối ,[object Object],[object Object],[object Object],[object Object],Thiết kế Web Xuống dòng
Thẻ <BR> ,[object Object],[object Object],[object Object],[object Object],Thiết kế Web Các  khoảng trắng liền nhau,  Các ký tự Tab,  ký tự xuống dòng  đều được coi như  một khoảng trắng
Thẻ <BR> Thiết kế Web Do dùng các khoảng trắng, tab và enter ?
Thẻ <BR> Thiết kế Web Dùng thẻ <BR> để xuống dòng
Các thẻ định dạng khối ,[object Object],[object Object],[object Object],[object Object],Thiết kế Web theo định dạng trước
Thẻ <PRE> ,[object Object],[object Object],[object Object],[object Object],Thiết kế Web
Thẻ <PRE> ,[object Object],[object Object],[object Object],Thiết kế Web
Thẻ <PRE> ,[object Object],Thiết kế Web
CÁC THẺ ĐỊNH DẠNG DANH SÁCH ,[object Object],[object Object],[object Object],Thiết kế Web
Danh sách không sắp xếp ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Thiết kế Web
Ví dụ UL: Thiết kế Web Thuộc tính TYPE=“circle/disc/square”  của UL qui định ký hiệu đầu mục
Danh sách sắp xếp ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Thiết kế Web
Ví dụ OL: Thiết kế Web
Ví dụ OL: Thiết kế Web
CÁC THẺ ĐỊNH DẠNG KÝ TỰ ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Thiết kế Web
Các thẻ định dạng in ký tự Thiết kế Web <B>...</B> <STRONG>…<STRONG>  In chữ đậm <I>…</I> <EM>…</EM> In chữ nghiêng <U>…</U> In chữ gạch chân <S>…</S> <STRIKE>…</STRIKE> In chữ bị gạch ngang <SUP>…</SUP> Định dạng chỉ số trên (SuperScript) <SUB>…</SUB> Định dạng chỉ số dưới (SubScript)) <BASEFONT> Định nghĩa kích thước font chữ được sử dụng cho đến hết văn bản. Thẻ này chỉ có một tham số size=n xác định cỡ chữ
Các thẻ định dạng in ký tự ,[object Object],Thiết kế Web
Các thẻ định dạng in ký tự ,[object Object],Thiết kế Web
Căn lề văn bản trong trang Web Thiết kế Web Trong trình bày, luôn phải chú ý đến việc căn lề cho các văn bản để trang Web có bố cục đẹp. Một số thẻ như <P>, <HR>, <IMG>… đều có tham số  ALIGN  cho phép căn lề trong phạm vi giới hạn thẻ đó Ngoài ra còn có thể sử dụng thẻ <CENTER> để căn giữa một khối văn bản Cú pháp :  <CENTER>   văn bản sẽ được căn giữa </CENTER> LEFT  Căn lề trái CENTER Căn giữa trang RIGHT CĂn lề phải
Các ký tự đặc biệt ,[object Object],[object Object],Thiết kế Web Ký tự Mã ASCII Tên chuỗi < &#060 &lt > &#062 &gt & &#038 &amp space &#032 &nbsp
Các ký tự đặc biệt ,[object Object],Thiết kế Web
Màu sắc trong thiết kế Web ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Thiết kế Web
Màu sắc trong thiết kế Web ,[object Object],[object Object],[object Object],Thiết kế Web
Màu sắc trong thiết kế Web Thiết kế Web Đỏ #FF0000 RED Đỏ sẫm #8B0000 DARKRED Xanh lá cây #00FF00 GREEN Xanh nhạt #90EE90 LIGHTGREEN Xanh nước biển #0000FF BLUE Vàng #FFFF00 YELLOW Vàng nhạt #FFFFE0 LIGHTYELLOW Trắng #FFFFFF WHITE Đen #000000 BLACK Xám #808080 GRAY Nâu #À52A2A BROWN Tím #FF00FF MAGENTA Tím nhạt #EE82EE VIOLET Hồng #FFC0CB PINK Da cam #FFA500 ORANGE Màu đồng phục hải quân #000080 NAVY
Chọn kiểu chữ cho văn bản ,[object Object],Thiết kế Web <FONT FACE =  font-name COLOR =  color SIZE =  n > … </FONT>
Màu sắc trong thiết kế Web ,[object Object],Thiết kế Web <font   face= &quot;arial&quot;   color= &quot;red&quot;   size= &quot;6&quot; > abc </font>
Văn bản siêu liên kết ,[object Object],[object Object],Thiết kế Web
Văn bản siêu liên kết ,[object Object],Thiết kế Web <A HREF = url NAME = name TITLE = title TARGET =_blank/ _self > …  siêu văn bản </A>
Văn bản siêu liên kết ,[object Object],[object Object],[object Object],[object Object],[object Object],Thiết kế Web
Vẽ đường thẳng nằm ngang ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Thiết kế Web
CHÈN ÂM THANH, HÌNH ẢNH ,[object Object],[object Object],[object Object],[object Object],[object Object],Thiết kế Web
Chèn âm thanh ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Thiết kế Web
Chèn hình ảnh, đoạn video ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Thiết kế Web
Chèn Windows Media Player ,[object Object],[object Object],[object Object],Thiết kế Web
Chèn Flash ,[object Object],[object Object],[object Object],[object Object],[object Object],Thiết kế Web
Chèn Applet ,[object Object],[object Object],Thiết kế Web
CÁC THẺ ĐỊNH DẠNG BẢNG ,[object Object],[object Object],[object Object],[object Object],Thiết kế Web
Cú pháp tạo bảng ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Thiết kế Web
Các thuộc tính ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Thiết kế Web ,[object Object],[object Object],[object Object],[object Object]
Ví dụ: Thiết kế Web <TABLE  border= “1” > <TR> <TD> A </TD> <TD> B </TD> <TD> C </TD> </TR> <TR> <TD> D </TD> <TD> E </TD> <TD> F </TD> </TR> </TABLE> A B C D E F
Ví dụ: Thiết kế Web <TABLE  border= “1” > <TR> <TD> A </TD> <TD  colspan= “2” > B </TD> </TR> <TR> <TD> C </TD> <TD> D </TD> <TD> E </TD> </TR> </TABLE> A B C D E
Ví dụ: Thiết kế Web <TABLE  border= “1” > <TR> <TD> A </TD> <TD  rowspan= “2” > B </TD> <TD> C </TD> </TR> <TR> <TD> D </TD> <TD> E </TD> </TR> </TABLE> A B C D E
Ví dụ: Thiết kế Web <TABLE  border= “1” > <TR> <TD  rowspan= “2” > A </TD> <TD  colspan= “2” > B </TD> </TR> <TR> <TD> C </TD> <TD> D </TD> </TR> </TABLE> A B C D
Bài tập ,[object Object],[object Object],[object Object],[object Object],[object Object],Thiết kế Web
Đáp án Thiết kế Web

More Related Content

Similar to 02 00-html

Tailieu.vncty.com huong dan nhap mon html
Tailieu.vncty.com   huong dan nhap mon htmlTailieu.vncty.com   huong dan nhap mon html
Tailieu.vncty.com huong dan nhap mon htmlTrần Đức Anh
 
Pd fbuoi2 onpage – tối ưu hóa trang web-mastercode.vn
Pd fbuoi2 onpage – tối ưu hóa trang web-mastercode.vnPd fbuoi2 onpage – tối ưu hóa trang web-mastercode.vn
Pd fbuoi2 onpage – tối ưu hóa trang web-mastercode.vnMasterCode.vn
 
Html Form2
Html Form2Html Form2
Html Form2netsun
 
Bài 1 - Website giới thiệu bản thân.docx
Bài 1 - Website giới thiệu bản thân.docxBài 1 - Website giới thiệu bản thân.docx
Bài 1 - Website giới thiệu bản thân.docxTrongNguyn1
 
Bài 1 - Website giới thiệu bản thân.pdf
Bài 1 - Website giới thiệu bản thân.pdfBài 1 - Website giới thiệu bản thân.pdf
Bài 1 - Website giới thiệu bản thân.pdfTrongNguyn1
 
Thiết kế dữ liệu
Thiết kế dữ liệuThiết kế dữ liệu
Thiết kế dữ liệuNguyen Tran
 
Chuong4 css-091030202240-phpapp02
Chuong4 css-091030202240-phpapp02Chuong4 css-091030202240-phpapp02
Chuong4 css-091030202240-phpapp02Ta Hormon
 
Chuong4 css-091030202240-phpapp02 (1)
Chuong4 css-091030202240-phpapp02 (1)Chuong4 css-091030202240-phpapp02 (1)
Chuong4 css-091030202240-phpapp02 (1)Ta Hormon
 
Thiet ke web voi frontpage 2003
Thiet ke web voi frontpage 2003Thiet ke web voi frontpage 2003
Thiet ke web voi frontpage 2003Luckyboy Nguyễn
 
[123doc] - slide-tong-quan-ve-ngon-ngu-lap-trinh-web-html-doc.pdf
[123doc] - slide-tong-quan-ve-ngon-ngu-lap-trinh-web-html-doc.pdf[123doc] - slide-tong-quan-ve-ngon-ngu-lap-trinh-web-html-doc.pdf
[123doc] - slide-tong-quan-ve-ngon-ngu-lap-trinh-web-html-doc.pdfThnh258575
 
[123doc] - slide-tong-quan-ve-ngon-ngu-lap-trinh-web-html-doc.pdf
[123doc] - slide-tong-quan-ve-ngon-ngu-lap-trinh-web-html-doc.pdf[123doc] - slide-tong-quan-ve-ngon-ngu-lap-trinh-web-html-doc.pdf
[123doc] - slide-tong-quan-ve-ngon-ngu-lap-trinh-web-html-doc.pdfThnh258575
 

Similar to 02 00-html (20)

Tai Lieu Html
Tai Lieu HtmlTai Lieu Html
Tai Lieu Html
 
Tailieu.vncty.com huong dan nhap mon html
Tailieu.vncty.com   huong dan nhap mon htmlTailieu.vncty.com   huong dan nhap mon html
Tailieu.vncty.com huong dan nhap mon html
 
Tai Lieu Html
Tai Lieu HtmlTai Lieu Html
Tai Lieu Html
 
Tai lieu html
Tai lieu htmlTai lieu html
Tai lieu html
 
Pd fbuoi2 onpage – tối ưu hóa trang web-mastercode.vn
Pd fbuoi2 onpage – tối ưu hóa trang web-mastercode.vnPd fbuoi2 onpage – tối ưu hóa trang web-mastercode.vn
Pd fbuoi2 onpage – tối ưu hóa trang web-mastercode.vn
 
Html Form2
Html Form2Html Form2
Html Form2
 
Bài 1 - Website giới thiệu bản thân.docx
Bài 1 - Website giới thiệu bản thân.docxBài 1 - Website giới thiệu bản thân.docx
Bài 1 - Website giới thiệu bản thân.docx
 
Bài 1 - Website giới thiệu bản thân.pdf
Bài 1 - Website giới thiệu bản thân.pdfBài 1 - Website giới thiệu bản thân.pdf
Bài 1 - Website giới thiệu bản thân.pdf
 
Web1012 slide 1
Web1012   slide 1Web1012   slide 1
Web1012 slide 1
 
Html
HtmlHtml
Html
 
Front page
Front pageFront page
Front page
 
Thiết kế dữ liệu
Thiết kế dữ liệuThiết kế dữ liệu
Thiết kế dữ liệu
 
Chuong4 css-091030202240-phpapp02
Chuong4 css-091030202240-phpapp02Chuong4 css-091030202240-phpapp02
Chuong4 css-091030202240-phpapp02
 
Chuong4 css-091030202240-phpapp02 (1)
Chuong4 css-091030202240-phpapp02 (1)Chuong4 css-091030202240-phpapp02 (1)
Chuong4 css-091030202240-phpapp02 (1)
 
Seo onpage
Seo onpageSeo onpage
Seo onpage
 
Thiet ke web voi frontpage 2003
Thiet ke web voi frontpage 2003Thiet ke web voi frontpage 2003
Thiet ke web voi frontpage 2003
 
[123doc] - slide-tong-quan-ve-ngon-ngu-lap-trinh-web-html-doc.pdf
[123doc] - slide-tong-quan-ve-ngon-ngu-lap-trinh-web-html-doc.pdf[123doc] - slide-tong-quan-ve-ngon-ngu-lap-trinh-web-html-doc.pdf
[123doc] - slide-tong-quan-ve-ngon-ngu-lap-trinh-web-html-doc.pdf
 
[123doc] - slide-tong-quan-ve-ngon-ngu-lap-trinh-web-html-doc.pdf
[123doc] - slide-tong-quan-ve-ngon-ngu-lap-trinh-web-html-doc.pdf[123doc] - slide-tong-quan-ve-ngon-ngu-lap-trinh-web-html-doc.pdf
[123doc] - slide-tong-quan-ve-ngon-ngu-lap-trinh-web-html-doc.pdf
 
Tài liệu HTML5-CSS3
Tài liệu HTML5-CSS3Tài liệu HTML5-CSS3
Tài liệu HTML5-CSS3
 
Html full
Html fullHtml full
Html full
 

02 00-html

  • 1. GIỚI THIỆU NGÔN NGỮ HTML  Thiết kế Web Trường Cao đẳng Kinh tế - Công nghệ TP.HCM Khoa Công nghệ thông tin Trình bày: Hà Đồng Hưng
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16. Ví dụ Thiết kế Web
  • 17.
  • 18. Đáp án Thiết kế Web
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25. Các thẻ đề mục Thiết kế Web
  • 26.
  • 27.
  • 28. Thẻ <BR> Thiết kế Web Do dùng các khoảng trắng, tab và enter ?
  • 29. Thẻ <BR> Thiết kế Web Dùng thẻ <BR> để xuống dòng
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36. Ví dụ UL: Thiết kế Web Thuộc tính TYPE=“circle/disc/square” của UL qui định ký hiệu đầu mục
  • 37.
  • 38. Ví dụ OL: Thiết kế Web
  • 39. Ví dụ OL: Thiết kế Web
  • 40.
  • 41. Các thẻ định dạng in ký tự Thiết kế Web <B>...</B> <STRONG>…<STRONG> In chữ đậm <I>…</I> <EM>…</EM> In chữ nghiêng <U>…</U> In chữ gạch chân <S>…</S> <STRIKE>…</STRIKE> In chữ bị gạch ngang <SUP>…</SUP> Định dạng chỉ số trên (SuperScript) <SUB>…</SUB> Định dạng chỉ số dưới (SubScript)) <BASEFONT> Định nghĩa kích thước font chữ được sử dụng cho đến hết văn bản. Thẻ này chỉ có một tham số size=n xác định cỡ chữ
  • 42.
  • 43.
  • 44. Căn lề văn bản trong trang Web Thiết kế Web Trong trình bày, luôn phải chú ý đến việc căn lề cho các văn bản để trang Web có bố cục đẹp. Một số thẻ như <P>, <HR>, <IMG>… đều có tham số ALIGN cho phép căn lề trong phạm vi giới hạn thẻ đó Ngoài ra còn có thể sử dụng thẻ <CENTER> để căn giữa một khối văn bản Cú pháp : <CENTER> văn bản sẽ được căn giữa </CENTER> LEFT Căn lề trái CENTER Căn giữa trang RIGHT CĂn lề phải
  • 45.
  • 46.
  • 47.
  • 48.
  • 49. Màu sắc trong thiết kế Web Thiết kế Web Đỏ #FF0000 RED Đỏ sẫm #8B0000 DARKRED Xanh lá cây #00FF00 GREEN Xanh nhạt #90EE90 LIGHTGREEN Xanh nước biển #0000FF BLUE Vàng #FFFF00 YELLOW Vàng nhạt #FFFFE0 LIGHTYELLOW Trắng #FFFFFF WHITE Đen #000000 BLACK Xám #808080 GRAY Nâu #À52A2A BROWN Tím #FF00FF MAGENTA Tím nhạt #EE82EE VIOLET Hồng #FFC0CB PINK Da cam #FFA500 ORANGE Màu đồng phục hải quân #000080 NAVY
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65. Ví dụ: Thiết kế Web <TABLE border= “1” > <TR> <TD> A </TD> <TD> B </TD> <TD> C </TD> </TR> <TR> <TD> D </TD> <TD> E </TD> <TD> F </TD> </TR> </TABLE> A B C D E F
  • 66. Ví dụ: Thiết kế Web <TABLE border= “1” > <TR> <TD> A </TD> <TD colspan= “2” > B </TD> </TR> <TR> <TD> C </TD> <TD> D </TD> <TD> E </TD> </TR> </TABLE> A B C D E
  • 67. Ví dụ: Thiết kế Web <TABLE border= “1” > <TR> <TD> A </TD> <TD rowspan= “2” > B </TD> <TD> C </TD> </TR> <TR> <TD> D </TD> <TD> E </TD> </TR> </TABLE> A B C D E
  • 68. Ví dụ: Thiết kế Web <TABLE border= “1” > <TR> <TD rowspan= “2” > A </TD> <TD colspan= “2” > B </TD> </TR> <TR> <TD> C </TD> <TD> D </TD> </TR> </TABLE> A B C D
  • 69.
  • 70. Đáp án Thiết kế Web