HyperText Markup Language (HTML) – Ngôn ngữ đánh dấu siêu văn bản. bao gồm các đoạn mã chuẩn với các quy ước được thiết kế để tạo các trang web và được hiển thị bởi các trình duyệt web
Trang 1THI T K WEB ẾT KẾ WEB ẾT KẾ WEB
THI T K WEB ẾT KẾ WEB ẾT KẾ WEB
Trang 2Tài li u tham kh o ệu tham khảo ảo
1 T h c HTML và XHTML trong 24 gi ự học HTML và XHTML trong 24 giờ ọc HTML và XHTML trong 24 giờ ờ
2 Nh ng bài th c hành HTMLững bài thực hành HTML ự học HTML và XHTML trong 24 giờ
Đinh Xuân Lâm
3 Thi t k qu ng cáo và ti p th trên web ết kế web với HTML ết kế web với HTML ảo ết kế web với HTML ị trên web
HTML Ng c Anh Th Pressọc HTML và XHTML trong 24 giờ ư
4 Thi t k và xu t b n trang Web v i ết kế web với HTML ết kế web với HTML ất bản trang Web với ảo ới HTML
Trang 3Bà i M Đ u ở Đầu ầu
1 HTML là gì?
Ngôn ng đánh d u siêu văn b n Bao ững bài thực hành HTML ất bản trang Web với ảo
g m các đo n mã chu n v i các quy c ồm các đoạn mã chuẩn với các quy ước ạn mã chuẩn với các quy ước ẩn với các quy ước ới HTML ưới HTML
đ c thi t k đ t o các trang Web và ược thiết kế để tạo các trang Web và ết kế web với HTML ết kế web với HTML ể tạo các trang Web và ạn mã chuẩn với các quy ước
đ c hi n th b i các trình duy t Web.ược thiết kế để tạo các trang Web và ể tạo các trang Web và ị trên web ở Đầu ệu tham khảo
Trang 4Web Page (Trang Web): Là tài li u ệu tham khảo
HTML
Web site: Là m t s các trang Web liên ột số các trang Web liên ống Kê
k t v i nhau.ết kế web với HTML ới HTML
World Wide Web (www): Là d ch v toàn ị trên web ụ toàn
c u c a Internet mà HTML là n n t ng.ầu ủa Internet mà HTML là nền tảng ền tảng ảo
Trang 52 Nh ng ng d ng c a HTML ững ứng dụng của HTML ứng dụng của HTML ụng của HTML ủa HTML
– HTML là n n t ng c a World Wide ền tảng ảo ủa Internet mà HTML là nền tảng
Web, m t d ch v toàn c u c a ột số các trang Web liên ị trên web ụ toàn ầu ủa Internet mà HTML là nền tảng
Internet
– HTML đ thi t k Web trên m ng ể tạo các trang Web và ết kế web với HTML ết kế web với HTML ạn mã chuẩn với các quy ước
Internet, t o tài li u, g i cáo th cho ạn mã chuẩn với các quy ước ệu tham khảo ửi cáo thị cho ị trên web các công ty, cá nhân
Trang 63 Trình so n th o trong quá trình h c ạn mã chuẩn với các quy ước ảo ọc HTML và XHTML trong 24 giờ.
– S d ng trình so n th o NotePad có s n ửi cáo thị cho ụ toàn ạn mã chuẩn với các quy ước ảo ẵn
Trang 74 Nh ng v n đ c n quan tâm khi ững bài thực hành HTML ất bản trang Web với ền tảng ầu
thi t k Web ết kế web với HTML ết kế web với HTML
– T ch c tài li u: t a đ , tiêu đ , đo n ổ chức tài liệu: tựa đề, tiêu đề, đoạn ức tài liệu: tựa đề, tiêu đề, đoạn ệu tham khảo ự học HTML và XHTML trong 24 giờ ền tảng ền tảng ạn mã chuẩn với các quy ước
văn, đ ng k ngang, danh sách, b ng.ườ ẻ ngang, danh sách, bảng ảo– Thu ng n văn b n.ắn văn bản ảo
– B trí hình nh nh g n, h p lý.ống Kê ảo ỏ gọn, hợp lý ọc HTML và XHTML trong 24 giờ ợc thiết kế để tạo các trang Web và
Trang 8Bài 1
T o ch ng trình đ u ạn mã chuẩn với các quy ước ương ầu
tiên
1.1 T o m t trang Web m i ạo một trang Web mới ột trang Web mới ới.
- M môi tr ng mà b n mu n so n th o tài li u ở Đầu ườ ạn mã chuẩn với các quy ước ống Kê ạn mã chuẩn với các quy ước ảo ệu tham khảo
Trang 91.2 Tag (th ) HTML là gì? ẻ ngang, danh sách, bảng.
Khi một Web browser hiển thị một trang Wed, Web Browser sẽ đọc từ một file văn bản đơn giản và tìm kiếm những đoạn mã đặc biệt hay những Tag được đánh dấu bởi ký hiệu < và >
* Tag mang thông tin
Trong đĩ: <tag_name>: tag b t đ u.ắn văn bản ầu
</tag_name>: tag k t thúc.ết kế web với HTML
* Tag rỗng: <tag_name>
Trang 11* Web browser
– Là trình duy t Web, ví d : Microsoft ệu tham khảo ụ toàn Internet Explorer, FireFox, Opera,
Netscape
Trang 121.3 C u trúc c b n c a m t trang HTML ất bản trang Web với ơng ảo ủa Internet mà HTML là nền tảng ột số các trang Web liên
Trang 131.4 Tag chú thích.
<!—N ột trang Web mới i dung chú thích >.
• Th ẻ ngang, danh sách, bảng <!DOCTYPE>
– Th này dùng đ ghi thông tin v version ẻ ngang, danh sách, bảng ể tạo các trang Web và ền tảng.HTML áp d ng trong tài li u web.ụ toàn ệu tham khảo
HTML
– Ví d :ụ toàn
4.0 Transitional//EN" >
Trang 141.6 T o trang Web đ u tiên ạn mã chuẩn với các quy ước ầu
– M ch ng trình so n th o NotePad.ở Đầu ương ạn mã chuẩn với các quy ước ảo
– S d ng phông đánh ti ng vi t: Unicodeửi cáo thị cho ụ toàn ết kế web với HTML ệu tham khảo– So n th o đo n mã sau:ạn mã chuẩn với các quy ước ảo ạn mã chuẩn với các quy ước
1.5 Hi n th tài li u trong Web Browser ể tạo các trang Web và ị trên web ệu tham khảo
Trang 15<! ch ng trình đ u tiên > ương ầu
Trang 16• L u l i v i tên ư ạn mã chuẩn với các quy ước ới HTML
trong th m c c a ư ụ toàn ủa Internet mà HTML là nền tảng.
mình), v i ph n ới HTML ầu
• L u ý: ph n m r ng ư ầu ở Đầu ột số các trang Web liên
có th là ể tạo các trang Web và html ho c ặc một trình soạn thảo bất kỳ trong
htm đ u đ c ền tảng ược thiết kế để tạo các trang Web và
• Vào th m c c a ư ụ toàn ủa Internet mà HTML là nền tảng.
mình ch y t p ạn mã chuẩn với các quy ước ệu tham khảo
HTML mà ta v a ừng bạn đến với HTML
t o, xem k t qu ạn mã chuẩn với các quy ước ết kế web với HTML ảo
nh n đ c ập HTML ược thiết kế để tạo các trang Web và
Trang 186 Th c hành ự học HTML và XHTML trong 24 giờ.
Thi t k m t trang HTML gi i thi u v ết kế web với HTML ết kế web với HTML ột số các trang Web liên ới HTML ệu tham khảo ền tảng
Trang 19Ch ng 2 ương
Đi u ch nh 1 tài li u HTML ền tảng ỉnh 1 tài liệu HTML ệu tham khảo
2.1 N p tài li u trong Web browse ạn mã chuẩn với các quy ước ệu tham khảo
2.1.1.T o s thay đ i trong tài li u HTML ạn mã chuẩn với các quy ước ự học HTML và XHTML trong 24 giờ ổ chức tài liệu: tựa đề, tiêu đề, đoạn ệu tham khảo
Vào th m c làm vi c, m t p html c a mình ư ụ toàn ệu tham khảo ở Đầu ệu tham khảo ủa Internet mà HTML là nền tảng.
M trình so n th o NotePad ở Đầu ạn mã chuẩn với các quy ước ảo
T th c đ n File, dùng Open đ m t p mình ừng bạn đến với HTML ự học HTML và XHTML trong 24 giờ ơng ể tạo các trang Web và ở Đầu ệu tham khảo
đã làm.
T đó thêm, b t, s a đ i văn b n trong đó ừng bạn đến với HTML ới HTML ửi cáo thị cho ổ chức tài liệu: tựa đề, tiêu đề, đoạn ảo
L u tr l i ư ở Đầu ạn mã chuẩn với các quy ước
Trang 202.1.2.N p l i tài li u trong Web ạn mã chuẩn với các quy ước ạn mã chuẩn với các quy ước ệu tham khảo
browser
– Tr l i th m c làm vi c, m l i t p đã ở Đầu ạn mã chuẩn với các quy ước ư ụ toàn ệu tham khảo ở Đầu ạn mã chuẩn với các quy ước ệu tham khảo
s a, quan sát, so sánh v i trang Web ửi cáo thị cho ới HTML
đã m lúc đ u v s thay đ i.ở Đầu ầu ền tảng ự học HTML và XHTML trong 24 giờ ổ chức tài liệu: tựa đề, tiêu đề, đoạn
Trang 212.1.3 Th c hànhự học HTML và XHTML trong 24 giờ.
Đ u ch nh l i tài li u HTML c a mình, t o m t ền tảng ỉnh 1 tài liệu HTML ạn mã chuẩn với các quy ước ệu tham khảo ủa Internet mà HTML là nền tảng ạn mã chuẩn với các quy ước ột số các trang Web liên
m t trang HTML gi i thi u v m t vài thành viên ột số các trang Web liên ới HTML ệu tham khảo ền tảng ột số các trang Web liên
c a l p ủa Internet mà HTML là nền tảng ới HTML
Trang 222.2 6 m c tiêu đ ức tài liệu: tựa đề, tiêu đề, đoạn ền tảng.
2.2.1 Nh ng tiêu đ c a HTML ững bài thực hành HTML ền tảng ủa Internet mà HTML là nền tảng.
<hN> N i dung hi n th ột số các trang Web liên ể tạo các trang Web và ị trên web </hN>
N là s nguyên t 1 đ n 6 ống Kê ừng bạn đến với HTML ết kế web với HTML
Ví dụ:
<h3> Tiêu đ th 3 ền tảng ức tài liệu: tựa đề, tiêu đề, đoạn </h3>
Trang 23• Đ tiêu đ gi a: ể tạo các trang Web và ền tảng ở Đầu ững bài thực hành HTML
<hN align=“center”>Tiêu đền tảng.</hN>
• Đ tiêu đ bên ph i: ể tạo các trang Web và ền tảng ảo
<hN align=“right”>Tiêu đền tảng.</hN>
• Ví dụ toàn
Trang 242.2.2 Đ t nh ng tiêu đ vào tài li u html ặc một trình soạn thảo bất kỳ trong ững bài thực hành HTML ền tảng ệu tham khảo
– Ví d đo n mã sau vào trong ph n thân ụ toàn ạn mã chuẩn với các quy ước ầu
<body> </body>
<h1> Tiêu đ l n nh t ền tảng ới HTML ất bản trang Web với </h1>
<h2> Tiêu đ l n th hai ền tảng ới HTML ức tài liệu: tựa đề, tiêu đề, đoạn </h2>
<h3> Tiêu đ th 3 ền tảng ức tài liệu: tựa đề, tiêu đề, đoạn </h3>
<h4> Tiêu đ th 4 ền tảng ức tài liệu: tựa đề, tiêu đề, đoạn </h4>
<h5> Tiêu đ th 5 ền tảng ức tài liệu: tựa đề, tiêu đề, đoạn </h5>
<h6> Tiêu đ nh nh t ền tảng ỏ gọn, hợp lý ất bản trang Web với </h6>
Trang 25• L u tài li u l i v i ph n m r ng là ư ệu tham khảo ạn mã chuẩn với các quy ước ới HTML ầu ở Đầu ột số các trang Web liên
htm
• M th m c làm vi c đ m trang ở Đầu ư ụ toàn ệu tham khảo ể tạo các trang Web và ở Đầu
html c a mình m i làm Xem s hi n ủa Internet mà HTML là nền tảng ới HTML ự học HTML và XHTML trong 24 giờ ể tạo các trang Web và
th 6 m c tiêu đ ị trên web ức tài liệu: tựa đề, tiêu đề, đoạn ền tảng.
Trang 262.2.3 Th c hành ự học HTML và XHTML trong 24 giờ.
T o m t trang tài li u html gi i thi u v ạn mã chuẩn với các quy ước ột số các trang Web liên ệu tham khảo ới HTML ệu tham khảo ền tảng
đ nh n m nh t ng ph n tài li u.ể tạo các trang Web và ất bản trang Web với ạn mã chuẩn với các quy ước ừng bạn đến với HTML ầu ệu tham khảo
Trang 272.3.Chia văn b n ra thành nhi u đo n ảo ền tảng ạn mã chuẩn với các quy ước
2.3.1 Chia đo n trong HTML ạn mã chuẩn với các quy ước
– Tag chia đo n: ạn mã chuẩn với các quy ước <p>
– Khi g p ặc một trình soạn thảo bất kỳ trong <p> Web browser s chèn m t ẽ chèn một ột số các trang Web liên dòng tr ng và b t đ u m t đo n m i.ống Kê ắn văn bản ầu ột số các trang Web liên ạn mã chuẩn với các quy ước ới HTML
– Tag <p> không c n tag k t thúc (ầu ết kế web với HTML </p>)
Trang 28• 2.3.1 Căn ch nh đo nỉnh 1 tài liệu HTML ạn mã chuẩn với các quy ước
dùng ch đ nh căn đo n m i, ỉnh 1 tài liệu HTML ị trên web ạn mã chuẩn với các quy ước ới HTML align_type là
center ho c ặc một trình soạn thảo bất kỳ trong right
• Ví d :ụ toàn
<p align= “center” > Ch gi a ững bài thực hành HTML ở Đầu ững bài thực hành HTML </p>
<p align= “right” > Ch bên ph i ững bài thực hành HTML ảo </p>
Trang 292.3.2 Chèn các d u chia đo nất bản trang Web với ạn mã chuẩn với các quy ước
– S d ng tag ửi cáo thị cho ụ toàn <p> đ t o m t trang ể tạo các trang Web và ạn mã chuẩn với các quy ước ột số các trang Web liên
HTML, trong đó có các đo n văn b n ạn mã chuẩn với các quy ước ảo
riêng bi t.ệu tham khảo
– Dùng Web browser đ ki m tra công ể tạo các trang Web và ể tạo các trang Web và
vi c c a mình.ệu tham khảo ủa Internet mà HTML là nền tảng
– Ví dụ toàn
Trang 302.4 Đ ng k ngang ườ ẻ ngang, danh sách, bảng.
2.4.1 T o đ ng k ngangạn mã chuẩn với các quy ước ườ ẻ ngang, danh sách, bảng
– Tag hard rule <hr>: chèn m t đ ng ột số các trang Web liên ườ
th ng trong trang html.ẳng trong trang html
– Tag <br>: đ y văn b n xu ng dòng, nh ng ẩn với các quy ước ảo ống Kê ư
– Tag <blockquote> đo n văn b n ạn mã chuẩn với các quy ước ảo
</blockquote>: Toàn b đo n văn b n th t vào ột số các trang Web liên ạn mã chuẩn với các quy ước ảo ụ toàn
đ u dòng
ở Đầu ầu
– Ví dụ toàn
Trang 312.4.2 Đ nh d ng thu c tính cho đ ịnh dạng thuộc tính cho đường kẻ ạo một trang Web mới ột trang Web mới ường kẻ ng k ẻ.
đường thẳng so với độ rộng của cửa sổ Browser
không có bóng
Trang 32Width = 100, size = 12, color = #800000
<hr width = 100 size = 12 color = #800000>
<p>Width = 200, size = 20, color = #808080
<hr width = 200 size = 20 color = #808080>
<p>Width = 50%, size = 40, color = red
<hr width = 50% size = 40 color = red>
<p>Width = 50%, size = 40, color = blue
<hr width = 50% size = 40 color = blue>
<p>
<p>
Trang 332.4.3.Th c hành ự học HTML và XHTML trong 24 giờ.
T o m t trang tài li u html gi i thi u v ạn mã chuẩn với các quy ước ột số các trang Web liên ệu tham khảo ới HTML ệu tham khảo ền tảng.mình, các b n trong l p Trong đó có ạn mã chuẩn với các quy ước ới HTML
dùng tiêu đ , các tag v a h c đ phân ền tảng ừng bạn đến với HTML ọc HTML và XHTML trong 24 giờ ể tạo các trang Web và
m ng t ng ph n.ảo ừng bạn đến với HTML ầu
• Dùng “<” đ vi t ra ký t “ể tạo các trang Web và ết kế web với HTML ự học HTML và XHTML trong 24 giờ <“
• Dùng “>” đ vi t ra ký t “ể tạo các trang Web và ết kế web với HTML ự học HTML và XHTML trong 24 giờ >”
Trang 342.5.Làm vi c v i các ki u m u ệu tham khảo ới HTML ể tạo các trang Web và ẫu
2.5.1 Các Tag style c a HTML ủa HTML
– Tag <b>Ch đ m ững ứng dụng của HTML ậm </b>
– Tag <i>Ch nghiêngữ nghiêng </i>.– Tag <u>Ch g ch chânững bài thực hành HTML ạn mã chuẩn với các quy ước </u>.– Tag <s>Ch g ch gi aững bài thực hành HTML ạn mã chuẩn với các quy ước ững bài thực hành HTML </s>.– Tag <tt>Chữ đánh máy</tt>
Ví dụ toàn
Trang 35<! ch ương trình de mo Style > ng trình de mo Style >
<h2><B>Chia đo n trong HTML</B></h2> ạo một trang Web mới.
<tt>Vì m t th gi i ngày mai </tt> ột trang Web mới ế giới ngày mai </tt> ới.
<p>
<I> Vì t ương trình de mo Style > ng lai c a m i chúng ta <br> ủa HTML ỗi chúng ta <br>
Hãy c g ng h c b n i </I> ố gắng học bạn ơi </I> ắng học bạn ơi </I> ọc bạn ơi </I> ạo một trang Web mới ơng trình de mo Style >
Hà N i, ngày 14/3/2007 ột trang Web mới.
<h3>Chúc các b n thành công!!!</h3> ạo một trang Web mới.
</body>
</html>
Trang 362.5.2.Tag đ nh d ng logic ị trên web ạn mã chuẩn với các quy ước
• Tag đ m logic type ập HTML
• Tag nghiêng logic type
• Tag g ch ngang logic type ạn mã chuẩn với các quy ước
<strike>Dòng này g ch gi aạn mã chuẩn với các quy ước ững bài thực hành HTML </strike>
Trang 37• Tag ki u đánh máy logic type ể tạo các trang Web và
• Tag ch s trên ỉnh 1 tài liệu HTML ống Kê
x<sup>y</sup> > xy
• Tag ch s d i ỉnh 1 tài liệu HTML ống Kê ưới HTML
x<sub>2</sub> > x2
• Ví dụ toàn
Trang 382.5.2 Áp d ng tag style vào trong tài ụ toàn
li u html ệu tham khảo
– Chúng ta có th áp d ng linh ho t ể tạo các trang Web và ụ toàn ạn mã chuẩn với các quy ước
các tag <b> </b>, <i> </i>, <u> </u>,
<s> </s>, <tt> </tt>, đ t o các ki u ể tạo các trang Web và ạn mã chuẩn với các quy ước ể tạo các trang Web và
máy nghiêng, chữ đánh máy đậm
Trang 402.6.Danh sách
2.6.1.Danh sách không có th t ức tài liệu: tựa đề, tiêu đề, đoạn ự học HTML và XHTML trong 24 giờ.
– S d ng tag ửi cáo thị cho ụ toàn <ul> </ul>: cho m t danh sách các ột số các trang Web liên
m c v i nh ng ký hi u đ c đánh d u phía tr c.ụ toàn ới HTML ững bài thực hành HTML ệu tham khảo ược thiết kế để tạo các trang Web và ất bản trang Web với ưới HTML– Tag <li> ch ra t ng m c cho m t danh sách.ỉnh 1 tài liệu HTML ừng bạn đến với HTML ụ toàn ột số các trang Web liên
