phần mở đầu và kết thúc trang HTML. Thẻ <heade>… </heade> Chứa các thông tin sau : <title> </title>: Tiêu đề trang web. <meta>: Chứa các thông tin về trang web như từ khoá, tác giả… <link>: Chứa các liên kết đến các tệp tin khác như file. <style> </style>: Chứa các thuộc tính định dạng để định dạng các phần tử trong trang web.
<script> </script> : Định nghĩa ngôn ngữ kịch bản như JavaScript… <base>: Chứa các địa chỉ URL. Thẻ <body></body> Phần thân của trang web. Phần này được hiển thị ở trình duyệt web. Thẻ headings <hx> Thẻ định dạng cỡ chữ lớn đến nhỏ dần gồm có 6 thẻ <h1>, <h2>, <h3>, <h4>, <h5>, <h6>.
Ví dụ: Khoa Công nghệ thông tin – TCN Quang Trung Trang 16 Giáo trình Thiết kế và quản trị Website <html> <head> <title>WWW.NET</title> </head> <body> <h1> Ngơn ngữ C#</h1> <h2> Ngơnn ngữ Visual Basic.NET</h2> <h3> Ngơn ngữ C++.NET</h3> <h4> Ngơn ngữ Java</h4> <h5> Ngơn ngữ C- C++</h5> <h6> Ngơn ngữ Pascal</h6> </body> </html> Paragraphs - <p> Để phân đoạn giữa các đoạn văn bạn sử dụng thẻ <p>. Thẻ <p> không cần thẻ đóng. Ví dụ: <html > <head> <title>WWW.COM</title> </head> <body> <p> Cho mừng bạn đến với gio trình “Kỹ thuật xy dựng ứng dụng ASP.NET” Tập 3, một gio trình khm ph cơng nghệ AJAX (Asynchronous JavaScript And XML) trên môi trường ASP. Như tên gọi, AJAX l cơng nghệ kết hợp giữa kỹ thuật gọi hm bất đồng bộ trong JavaScript v xử lý dữ liệu XML.
AJAX mang lại hiệu qủa to lớn trong thế hệ lập trình Web 2. Phin bản ASP.5 hỗ trợ mạnh mẽ cc thnh phần cơng cụ AJAX. <p> Trong gio trình ny, tc giả trình by v minh họa từng bước cụ thể để bạn tiếp cận cơng nghệ AJAX dễ dng thơng qua ứng dụng thực tiễn – Rao vặt trực tuyến. Kết thc gio trình bạn cĩ thể tự triển khai, hồn thiện ứng dụng theo yu cầu ring hoặc mở rộng, bổ sung sản phẩm theo phong cch của mình.
</body> </html> Kết quả trên trình duyệt IE: Thẻ <br> Thẻ này dùng để ngắt dòng, chuyển sang dòng mới. Ví dụ: <html> <head> <title> WWW.NET</title> </head> Khoa Công nghệ thông tin – TCN Quang Trung Trang 17 Giáo trình Thiết kế và quản trị Website <body> Cho mừng bạn đến với gio trình "HTML - Script" .<br /> Bin soạn: Nguyễn Văn Lân - www.net<br /> </body> </html> Kết quả: Thẻ <hr> Thẻ <hr> dùng để tạo đường kẻ ngang. Bạn có thể sử dụng các thuộc tính của thẻ này như kích cỡ (size), độ dài (width). Ví dụ: <html> <head> <title> WWW.NET</title> </head> <body> Cho mừng bạn đến với gio trình "HTML - Script" .<br /> <hr size ="5px" width=200% color="blue" /> Bin soạn: Nguyễn Văn Lân - www.net<br /> </body> </html> Kết quả: Thẻ chú thích <!.
--> Để chú thích bạn sử dụng thẻ <!. Ví dụ: <html> <head> <title> WWW.NET</title> </head> <body> Cho mừng bạn đến với gio trình "HTML - Script" .<br /> <!-- <hr size ="5px" width=200%; color="blue" /> Bin soạn: Nguyễn Văn Lân - www.net<br /> --> </body> </html> Khoa Công nghệ thông tin – TCN Quang Trung Trang 18 Giáo trình Thiết kế và quản trị Website 17.Trang và văn bản trên trang Định dạng trang html Mục này chúng ta tìm hiểu cách định dạng, màu nền, màu chữ, hình nền cho trang HTML. Màu nền và màu chữ Ví dụ: <html> <head> <title> WWW.NET</title> </head> <body bgcolor ="gray" text="yellow" Thuộc tính Mô tả > BGCOLOR Đặt màu nền Cho mừng bạn đến với gio trình TEXT Đặt màu các con chữ, trừ các mối nối.<br /> LINK Đặt màu ban đầu của đầu mối liên kết khi chưa kích hoạt Bin soạn: Nguyễn Văn Lân - VLINK Đặt màu đầu mối liên kết khi đã thăm đích www.net<br /> ALINK Đặt màu đầu mối liên kết khi kích hoạt </body> </html> Bạn có thể sử dụng mã màu ở dạng Hexa như bgcolor="#999999" Một số thuộc tính và mã màu Một số thuộc tính và mã màu thông dụng. <BODY BGCOLOR="#rrggbb" TEXT="#rrggbb" LINK="#rrggbb" VLINK="#rrggbb" ALINK="#rrggbb"> Mã màu: Tên màu Mã màu black #000000 white #FFFFFF pale grey #DBDDE5 dark green #306020 green #405060 pale blue/green #00FFFF pale blue #A5D6F7 navy blue #000020 burgundy #800040 Khoa Công nghệ thông tin – TCN Quang Trung Trang 19 Giáo trình Thiết kế và quản trị Website yellow #FFFF00 purple #601050 red #FF0000 orange red #FF2400 orange #FF7F00 neon blue #4D4DFF pale purple/orchid #9370DB maroon #8E236B scarlet #8C1717 pale purple #6B238E firebirch #8E2323 Hình nền Ví dụ: Chèn hình nền.
<html> <head> <title> WWW.NET</title> </head> <body background="New_Aurora.jpg" text = "yellow" > Cho mừng bạn đến với gio trình "HTML - Script" .<br /> Bin soạn: Nguyễn Văn Lân - www.net<br /> </body> </html> Nếu hình ảnh chứa ở thư mục Images thì khai báo như sau: <html> <head> <title> WWW.NET</title> </head> <body background="Images/New_Aurora.jpg" text = "yellow" > Cho mừng bạn đến với gio trình "HTML - Script" .<br /> Bin soạn: Nguyễn Văn Lân - www.net<br /> </body> </html> Thuộc tính backgroud có nhiều thuộc tính như : background-image: url(New_Aurora.jpg); background-position:center; background-repeat:repeat-x; background-attachment:scroll; Chú ý: Môi trường phát triển như FrontPage, Dreamweaver, Visual Studio…hỗ trợ công cụ trực quan nhanh chóng để chọn màu nền, màu chữ… Khoa Công nghệ thông tin – TCN Quang Trung Trang 20 Giáo trình Thiết kế và quản trị Website Định dạng văn bản Để định dạng nội dung văn bản, bạn sử dụng các thẻ định dạng mà ngôn ngữ HTML cung cấp. Thẻ định dạng kiểu chữ Một số thẻ sau: <b> </b>: In đậm <i> </i>: In nghiên <u> </u> : Gạch dưới <del> </del>: Gạch giữa <blockqoute> </blockqoute> : Trích dẫn đoạn văn, thụt đầu dòng một khoảng trắng. <strong> </strong> : Nhấn mạnh <sub> </sub>: Chữ ở dưới <sup> </sup>: Chữ ở trên. Ví dụ: <html> <head> <title> WWW.NET</title> </head> <body> Cho mừng bạn đến với gio trình <strong> "HTML - Script" </strong>.<br /> Bin soạn: Nguyễn Văn Lân - www.net<br /> <b> Tính gi trị biểu thức:</b> S<sub> n</sub> = x<sup> 2 + 2n</sup> + 3n </body> </html> Sử dụng thuộc tính style Color: màu chữ Font – family: Tên font; Text-align: Canh văn bản; Background-color: Màu nền; … Ví dụ: <html> <head> <title> WWW.NET</title> </head> <body style="color: blue; font-family: Arial; text-align: left; background-color: #cccccc; border-right: #ffcc66 1px solid; border-top: #ffcc66 1px solid; border-left: #ffcc66 1px solid; border-bottom: #ffcc66 1px solid;" > Cho mừng bạn đến với gio trình "HTML - Script" .<br /> Khoa Công nghệ thông tin – TCN Quang Trung Trang 21 Giáo trình Thiết kế và quản trị Website Bin soạn: Nguyễn Văn Lân - www.net<br /> </body> </html> Các kí tự đặc biệt Tên đại diện Số đại diện Kí tự < < < > > >   © © © & & & " " " ¢ ¢ ¢ £ £ £ ¥ ¥ ¥ ® ® ® § § § 18.Trang và văn bản trên trang với CSS Giới thiệu CSS (Cascading Style Sheets) dùng để định dạng nội dung hiển thị ở trang HTML.
Việc cài đặt file CSS chứa các định dạng, khi cần thiết gọi vào trang html để định dạng một đối tượng nào đó, giúp cho việc tổ chức mã nguồn rõ ràng hơn, dễ dàng thay đổi… Trước đây, để định nghĩa một đoạn văn bản nằm trong thẻ <P> có font chữ là .vntime, chúng ta sẽ viết như sau: <P ><FONT face=.VnTime>Dòng văn bản nay có font chữ là .vntime</Font></p> Nhưng với cách định dạng mới theo cú pháp mà ta gọi là cú pháp CSS, thì có thể thực hiện yêu cầu trên như sau: <P style= "font-family:.vntime">Dòng văn bản này có font chữ là .vntime </P> Cách nhúng CSS vào HTML Gọi một file từ bên ngoài Cách khai báo như sau: <LINK REL="STYLESHEET" HREF="default.css" CHARSET="UTF-8" TYPE="text/css"> Khoa Công nghệ thông tin – TCN Quang Trung Trang 22 Giáo trình Thiết kế và quản trị Website Đọan Code này phải đặt trong phần <head></head> của trang HTML. Trong đó: file default.css là file được viết bằng cú pháp Cascading Style Sheet và được lưu với tên là default, phần mở rộng là. Khi viết file này không cần khai báo <Style></Style> bắt đầu và kết thúc tập tin. Xem ví dụ bên dưới: Đoạn mã có tên file default.css được cài đặt như sau: body { font-family: Verdana; font-size: 14px; color: #660033; margin: 2px; padding: 0; text-align: left; } .toppage { background-image: url(header_bg.png); background-repeat: repeat-x; } Phương pháp này được dùng rất phổ biến trong thiết kế các trang web cùng một phong cách (chẳng hạn trang tin tức).
Chúng ta chỉ cần viết một file .css và dùng file này để định dạng tòan bộ Website. Nhúng vào đầu trang Để thiết kế mỗi trang với một phong cách riêng, ngòai việc dùng phương 1, chúng ta có thể chèn <style> vào trong phần <head></head> của trang HTML. Bạn phải bắt đầu phần khai báo bằng <style>, và kết thúc bằng </style>. Nếu bạn bỏ sót phần khai bao này, trang của bạn sẽ không hiển thị hoặc các thuộc tính và giá trị khai báo sẽ không ảnh hưởng lên thành phần.
Cú pháp: <style> thành phần {khai báo;} thành phần {khai báo;}. </style> Ví dụ: <style> p {font-family:tahoma; font-size:13px;color:blue;text-align:justify; text-indent:30px;} blockquote {color:blue; font-size:14px; font-style:italic; text-align:justify;} i {color: fuchsia; font-size:12px;} </style> Khoa Công nghệ thông tin – TCN Quang Trung Trang 23 Giáo trình Thiết kế và quản trị Website Cài đặt đọan code này vào phần <head></head> của trang HTML. Khi đó các thành phần trong <style></style> sẽ bị ảnh hưởng bởi các thuộc tính và giá trị khai báo trong đó. Chẳng hạn, nếu bạn dùng tag : <blockquote> thì màu chữ là: xanh; cỡ chữ:14px; kiễu trình diễn là chữ nghiêng (font-style:italic;) và chữ được canh đều 2 biên.
Nhúng vào trong thành phần Ngòai 2 phương pháp trên, để thay đổi thuộc tính của thành phần, chúng ta có thể chèn <style> vào trong từng thành phần. Khi khai báo như vậy, chỉ cần khai báo style= "khai báo;" ngay trong thành phần. Không cần tag </style> để đóng. Cú pháp: <thành phần style="khai báo"> Ví dụ: <p style="font-family:tahoma; font-size:13px;color:blue;text- align:justify; text-indent:30px;"> <blockquote style="color:blue; font-size:14px; text-align:justify;"> <i style="color: fuchsia; font-size:12px;text-transform: capitalize;"> Chẳng hạn, khi viết <i style="color:fuchsia; font-size:12; text- transform:capitalize;">, thì chữ sẽ là chữ nghiêng màu hồng, cỡ:12 và các chữ cái đầu sẽ được viết Hoa.
Chú ý: CSS đóng vai trò quan trọng khi định dạng trang web, hiện nay có rất nhiều mẫu định dạng bằng CSS có sẵn. Chúng ta chỉ việc sử dụng vào trang web khi cần thiết. Một số giá trị của CSS Chiều dài và đơn vị đo CSS cung cấp một số đơn vị đo chiều dài, chiều rộng. Đơn vị Mô tả In In Cm Cen – ti- met Mm Milimet Pt Point, 1pt = (1/71) inch Pc Pica, 1pc = 12pt Px Pixel % Phần trăm Ngòai ra, còn một số kiểu đo khác như cm, ex, px.
Giá trị số Khoa Công nghệ thông tin – TCN Quang Trung Trang 24 Giáo trình Thiết kế và quản trị Website Khi viết mã CSS thường sử dụng một số kiểu số nguyên hoặc thực để biểu diễn một số thuộc tính cần định dạng. div { background: black; color: white; margin: 10px 0 0 -15px; font: 12px sans-serif; } Màu Màu trong CSS biểu diễn các giá trị số, mã thập lục phân (Hexa).