Tài liệu Ngôn ngữ HTML và CSS pdf

THÔNG TIN TÀI LIỆU

Thông tin cơ bản

Tiêu đề	Ngôn Ngữ HTML
Tác giả	Đặng Thanh Bình
Trường học	Viện CERN
Chuyên ngành	Ngôn Ngữ Lập Trình Web
Thể loại	Tài liệu

Định dạng
Số trang	32
Dung lượng	1,01 MB

Nội dung

Thiết kế Web Biên soạn: Đặng Thanh Bình Trang 1 NGÔN NGỮ HTML I. Giới thiệu: HTML, viết đầy đủ là Hyper Text Markup Language – Ngôn ngữ đánh dấu siêu vă bản, là ngôn ngữ nền tảng của Web. HTML được thiết kế bởi các nhà vật lý học tại viện CERN. Cùng với trình duyệt Mosaic và World Wide Web, HTML đã giúp mang đến một bộ mặt mới cho Internet. Internet đã trở nên dễ sử dụng hơn và có thể đến với đông đảo người dùng trên toàn thế giới thông qua các trang web. HTML mô tả cách thức dữ liệu được hiển thị trên trình duyệt thông qua các tập ký hiệu đánh dấu, thường gọi là tag, hoặc “thẻ HTML”. Khi một trang web được tải về trình duyệt, trình duyệt sẽ căn cứ trên các tag HTML để định dạng nội dung hiển thị. Ví dụ: <HTML> <HEAD> <TITLE>Welcome to HTML</TITLE></HEAD> <BODY> <H3>My first HTML document</H3> </BODY> </HTML> II. Các khái niệm chung: 1. Tài liệu HTML: Tài liệu HTML, hay còn gọi là văn bản HTML, là một tập tin có phần kiểu là .htm hoặc .html, chứa nội dung cần hiển thị và các tag để báo cho trình duyệt web biết cách hiển thị nội dung đó. Tài liệu HTML có thể được soạn thảo trên những trình soạn thảo văn bản đơn giản như Notepad hay TextPad. 2. Cấu trúc của một tài liệu HTML: Tài liệu HTML được chia làm 3 phần, cụ thể như sau: a.HTML section Được bắt đầu bởi tag <HTML> và kết thúc bởi tag </HTML> Cặp tag này định nghĩa phạm vi của văn bản HTML. b. Header section Được bắt đầu bởi tag <HEAD> và kết thúc bởi tag </HEAD> CHƯƠNG 2 Thiết kế Web Biên soạn: Đặng Thanh Bình Trang 2 Phần này chứa thông tin mô tả trang web, chẳng hạn như tiêu đề trang web, các từ khóa dùng để tìm kiếm và nhận diện trang web, …. Những thông tin này không được hiển thị trên trang web. c.Body section Được bắt đầu bởi tag <BODY> và kết thúc bởi tag </BODY> Phần này chứa nội dung của trang web và các tag quy định định dạng của nội dung đó. 3. Thành phần HTML (HTML elements): Hầu hết các thành phần HTML đều có tag bắt đầu và tag kết thúc tương ứng. Dưới đây là cấu trúc chung của một thành phần HTML: <tag_name>string of text</tag_name> Trong đó <tag_name> là tag bắt đầu, string of text là nội dung của thành phần HTML và </tag_name> là tag kết thúc. Các tag HTML có thể được nhập liệu không phân biệt chữ hoa hoặc chữ thường. Tuy nhiên, cũng cần lưu ý là tổ chức W3C đề nghị dùng chữ thường trong phiên bản HTML 4, và XHTML (HTML thế hệ kế tiếp) bắt buộc phải dùng chữ thường cho tag. 4. Thuộc tính của tag HTML Các thẻ HTML có thể có thuộc tính. Thuộc tính cung cấp thêm thông tin cho một thành phần HTML. Chẳng hạn, tag HTML sau đây định nghĩa một bảng: <table>. Với một thuộc tính thêm vào, chúng ta có thể yêu cầu trình duyệt hiể thị bảng mà không có khung : <table border="0"> Thuộc tính luôn đi theo cặp tên thuộc tính/giá trị như sau: name="value". Thuộc tính luôn được chỉ định ở thẻ bắt đầu của một thành phần HTML. Thuộc tính và giá trị của thuộc tính cũng không phân biệt chữ hoa và chữ thường. Lưu ý: Giá trị của thuộc tính nên được đặt trong cặp dấu nháy. Thông thường người ta sử dụng cặp dấy nháy kép nhưng các dấu nháy đơn cũng được chấp nhận. III. Các tag HTML cơ bản: 1. Heading: Các cấp heading được định nghĩa với các thẻ từ <h1> đến <h6>. <h1> định nghĩa heading lớn nhất. <h6> định nghĩa heading nhỏ nhất. HTML tự động thêm vào các dòng trống trên và dưới heading. Ví dụ: <HTML> <HEAD> <TITLE>Introduction to HTML</TITLE> </HEAD> Thiết kế Web Biên soạn: Đặng Thanh Bình Trang 3 <BODY> <H1>Introduction to HTML</H1> <H2>Introduction to HTML</H2> <H3>Introduction to HTML</H3> <H4>Introduction to HTML</H4> <H5>Introduction to HTML</H5> <H6>Introduction to HTML</H6> </BODY> </HTML> 2. Paragraph: Đoạn văn bản được định nghĩa bởi thẻ <p>. HTML tự động thêm vào các dòng trống trên và dưới đoạn. Ví dụ: <HTML> <HEAD> <TITLE>Welcome to HTML</TITLE> <BODY BGCOLOR = “lavender”> <p>This is a paragraph</p> <p align=”center”>This is another paragraph</p> </BODY> </HTML> 3. Ngắt dòng (line break): Thẻ <br> được sử dụng khi ta muốn kết thúc một dòng nhưng không muốn bắt đầu một đoạn mới. Thẻ <br> sẽ ngắt dòng tại nơi ta đặt nó trong văn bản HTML. <br> là một thẻ rỗng. Nó không có thẻ đóng. Ví dụ: <HTML> <HEAD> <TITLE>Welcome to HTML</TITLE> <BODY> <p>This <br> is a para<br>graph with line breaks</p> </BODY> </HTML> 4. Đường kẻ ngang (Horizontal Rule): Thẻ <hr> được sử dụng khi ta muốn tạo một đường kẻ ngang trong trang web. Trong HTML, thẻ <hr> không có thẻ đóng. Dưới đây là những thuộc tính của thẻ này: Thuộc tính Giá trị Ý nghĩa align center left right Chỉ định trạng thái canh lề đường kẻ ngang. noshade noshade Khi được set, thuộc tính này quy định đường kẻ ngang sẽ được vẽ bằng 1 màu Thiết kế Web Biên soạn: Đặng Thanh Bình Trang 4 Thuộc tính Giá trị Ý nghĩa duy nhất. Khi không được set, đường kẻ ngang sẽ được phối bằng 2 màu size pixels % Chiều cao của đường kẻ ngang width pixels % Độ rộng của đường kẻ ngang Ví dụ: <HTML> <HEAD> <TITLE>Welcome to HTML</TITLE> <BODY BGCOLOR = lavender> <H3>My first HTML document</H3> <HR noshade size = 5 align = center width = 50%> <HR size = 15 align = left width = 80%> <P>This is going to be real fun <H2>Using another heading</H2> <P ALIGN=center> Another paragraph element </BODY> </HTML> 5. Chú thích trong HTML Chúng ta dùng thẻ comment để thêm các đoạn chú thích vào HTML source code. Trình duyệt web sẽ bỏ qua dòng chú thích này. Cú pháp: <! This is a comment > 6. Một số lưu ý Khi viết văn bản HTML, chúng ta không thể đoan chắc văn bản đó sẽ được hiển thị thế nào trong một trình duyệt khác. Mặt khác, văn bản sẽ được định dạng lại mỗi khi người dùng thay đổi kích thước cửa sổ trình duyệt. Đừng định dạng văn bản bằng cách thêm vào các khoảng trắng hoặc những dòng trống vào văn bản web. HTML sẽ xóa bớt những khoảng trắng được nó coi là dư. Một dãy khoảng trắng liên tiếp bất kỳ sẽ được coi là một khoảng trắng duy nhất. Ngoài ra, trong HTML, một dòng mới sẽ được coi là một khoảng trắng. Việc sử dụng các thẻ <p> để thêm vào các dòng trống cũng là một thói quen xấu. Thay vào đó, hãy dùng thẻ <br>. Thẻ <p> có thể được sử dụng mà không có thẻ kết thúc </p>. Tuy nhiên, phiên bản HTML kế tiếp sẽ không cho phép bỏ qua bất kỳ thẻ kết thúc nào. IV. Các tag HTML định dạng: 1. Các tag định dạng văn bản: Tag Ý nghĩa <b> Tô đ ậ m văn b ả n <big> Định nghĩa văn bản có size lớn hơn bình thường <em> Định nghĩa văn bản được nhấn mạnh (emphasized) Thiết kế Web Biên soạn: Đặng Thanh Bình Trang 5 Tag Ý nghĩa <i> Làm cho văn b ả n nghiêng <small> Định nghĩa văn bản có size nhỏ hơn bình thường <strong> Tô đậm văn bản <sub> Định nghĩa chỉ số dưới <sup> Đ ị n h ngh ĩa ch ỉ s ố trên <ins> Định nghĩa văn bản được “thêm vào” <del> Định nghĩa văn bản đã bị xóa <s> Đ ị nh ngh ĩa văn b ả n đ ã b ị xóa. Nên dùng <del> thay cho tag này. <strike> Đ ị nh ngh ĩa văn b ả n đ ã b ị xóa. Nên dùng <del> thay cho tag này. <u> Gạch dưới văn bản Ví dụ: <html> <body> <b>This text is bold</b><br> <strong>This text is strong</strong><br> <big>This text is big</big><br> <em>This text is emphasized</em><br> <i>This text is italic</i><br> <small>This text is small</small><br> This text contains<sub>subscript</sub><br> This text contains<sup>superscript</sup><br> This text contains <ins>inserted</ins> text<br> This text contains <del>deleted</del> text<br> This text contains <s>deleted</s> text<br> This text contains <strike>deleted</strike> text<br> This text contains <u>underlined</u> text<br> </body> </html> Kết quả: 2. Một số tag khác: Tag Ý ngh ĩa <pre> Định nghĩa văn bản được định dạng sẵn <blockquote> Tạo vùng chú thích dài < q > T ạ o vùng chú thích ng ắ n Ví dụ: <html><body> <pre> This is preformatted text. It preserves both spaces and line breaks. </pre> <p>The pre tag is good for displaying computer code:</p> <pre> for i = 1 to 10 print i next i </pre></body></html> Kết quả: Ví dụ: <html> <body> Kết quả: Thiết kế Web Biên soạn: Đặng Thanh Bình Trang 6 Here comes a long quotation: <blockquote> This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. </blockquote> Here comes a short quotation: <q> This is a short quotation </q> <p> With the block quote element, the browser inserts line breaks and margins, but the q element does not render as anything special. </p> </body> </html> V. Các ký tự đặc biệt: Một số ký tự có ý nghĩa đặc biệt trong HTML, chẳng hạn như dấu nhỏ hơn (<) cho biết điểm bắt đầu của một thẻ HTML. Phần dưới đây trình bày cách chèn những ký tự này vào nội dung trang web như những ký tự thông thường khác. Một ký tự đặc biệt được biểu diễn gồm 3 phần: dấu ampersand (&), phần tên thực thể được quy định trước hoặc dấu # và số hiệu thực thể (cũng được quy định trước), và cuối cùng là dấu chấm phẩy (;). Chẳng hạn để hiển thị dấu nhỏ hơn (<), ta phải viết: < hoặc < trong văn bản HTML. Lưu ý là tên thực thể có phân biệt chữ hoa và chữ thường. Result Description Entity Name Entity Number non-breaking space     < less than < < > greater than > > & ampersand & & " quotation mark " " ' apostrophe ' (does not work in IE) ' ¢ cent ¢ ¢ £ pound £ £ ¥ yen ¥ ¥ § section § § © copyright © © ® registered trademark ® ® × multiplication × &#215 ; ÷ division ÷ ÷ VI. Siêu liên kết (hyperlink): Siêu liên kết thường được dùng để liên kết đến một tài liệ khác trên web. Để tạo siêu liên kết chúng ta dùng thẻ <a> và thuộc tính href của thẻ này Thiết kế Web Biên soạn: Đặng Thanh Bình Trang 7 1. Cú pháp: <a href="url">Text to be displayed</a> Thẻ <a> được dùng để tạo một điểm neo (anchor) để tạo liên kết, thuộc tính href được dùng để xác định địa chỉ của tài liệu được liên kết đến, và đoạn văn bản nằm giữa thẻ <a> và </a> sẽ được hiển thị thành một hyperlink. Ví dụ: <HTML> <HEAD> <TITLE>Welcome to HTML</TITLE> <BODY BGCOLOR = “lavender”> <a href="http://www.w3c.org/">Visit World Wide Web Consortium!</a> </BODY> </HTML> 2. Thuộc tính target: Thuộc tính target xác định liên kết sẽ được mở ra ở đâu. Ví dụ sau đây sẽ mở trang Vietnamnet trong một cửa sổ trình duyệt mới <a href="http://www.vnn.vn/" target="_blank">Visit Vietnamnet!</a> 3. Thuộc tính name: Thuộc tính name được sử dụng để tạo một điểm dừng trong trang web. Khi sử dụng điểm dừng chúng ta có thể nhảy tới một vị trí cụ thể trên trang web thay vì để người dùng phải cuộn trang và tìm nội dung mình muốn xem. Dưới đây là cú pháp để tạo nên một điểm dừng: <a name="label">Text to be displayed</a> Với label là tên của điểm dừng muốn tạo. Điểm dừng sẽ được tạo tại vị trí đặt tag <a>. Chẳng hạn, để tạo một điểm dừng có tê là Chapter1, ta thực hiện như sau: <A NAME=“Chapter1”> Chapter 1</A> Để liên kết đến điểm dừng này, ta tạo đoạn mã HTML như sau: - Trường hợp điểm đặt siêu liên kết nằm trên cùng trang web chứa điểm dừng: <A HREF=“#Chapter1”> Go to Chapter 1</A> - Trường hợp điểm đặt siêu liên kết nằm trên một trang khác với trang web chứa điểm dừng: <A HREF=“URL#Chapter1”> Go to Chapter 1</A> Với URL là địa chỉ của trang web chứa điểm dừng. 4. Liên kết đến địa chỉ email: Ví dụ: <html> <body> <p> Thiết kế Web Biên soạn: Đặng Thanh Bình Trang 8 This is a mail link: <a href="mailto:someone@microsoft.com?subject=Hello%20again"> Send Mail</a> </p> <p> <b>Note:</b> Spaces between words should be replaced by %20 to <b>ensure</b> that the browser will display your text properly. </p> </body> </html> Ví dụ: <html> <body> <p> This is another mailto link: <a href="mailto:someone@microsoft.com?cc=someoneelse@microsoft.com&bcc=andso meoneelse2@microsoft.com&subject=Summer%20Party&body=You%20are%20invited% 20to%20a%20big%20summer%20party!">Send mail!</a> </p> <p> <b>Note:</b> Spaces between words should be replaced by %20 to <b>ensure</b> that the browser will display your text properly. </p> </body> </html> VII. Bảng biểu: 1. Quy định chung: Bảng trong HTML được định nghĩa bởi thẻ <table>. Một bảng được chia thành các dòng (với thẻ <tr>), và mỗi dòng lại được chia thành các data cell (được định nghĩa bởi thẻ <td>). Chữ td thay thế cho cụm từ "table data". Một data cell có thể chứa text, image, list, paragraph, form, horizontal rule, table, … Ví dụ: <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> 2. Một số thuộc tính của bảng: - BORDER=“x” : kích thước viền - BGCOLOR: màu nền - ALIGN: canh chỉnh Thiết kế Web Biên soạn: Đặng Thanh Bình Trang 9 - WIDTH, HEIGHT : kích thước - CELLPADDING: khoảng cách từ viền của ô đến nội dung trong ô - CELLSPACING: khoảng cách giữa các ô trong bảng - ROWSPAN, COLSPAN: trộn các dòng hoặc cột - <TR>: dòng, <TD> cột, <TH>: heading - <CAPTION>: tiêu đề mô tả bảng Hình 4: Biểu diễn thuộc tính của table VIII. Tạo danh sách: Ví dụ: <H3>Những kiến thức căn bản về HTML</H3> <OL> <LI>Cấu trúc tập tin HTML</LI> <UL> <LI>Cấu trúc tập tin HTML</LI> <LI>Các Tag HTML</LI> </UL> <LI>Các Tag cơ bản</LI> <UL> <LI>Định dạng văn bản</LI> <LI>Định dạng hình ảnh</LI> Thiết kế Web Biên soạn: Đặng Thanh Bình Trang 10 <LI>Đỉnh dạng liên kết</LI> </UL> <LI>Ví dụ </LI> <UL> <LI>Code</LI> <LI>Minh họa</LI> </UL> </OL> Dưới đây là kết quả của đoạn code trên: IX. Chèn hình ảnh: 1. Quy định chung: Trong HTML, hình ảnh được định nghĩa bởi thẻ <img>. Thẻ <img> là một thẻ rỗng. Điều này có nghĩa là thẻ <img> chỉ chứa các thuộc tính và không có thẻ kết thúc. Để hiển thị hình ảnh trên trang web, chúng ta sử dụng thuộc tính src. Src là viết tắt của chữ "source". Giá trị của thuộc tính src là URL của hình ảnh chúng ta muốn hiển thị trên trang. Cú pháp chung như sau: <img src="url"> 2. Thuộc tính ALT: Thuộc tính "alt" báo cho người đọc trang web biết nội dung của hình ảnh trong trường hợp trình duyệt không thể hiển thị hình ảnh đó. Trình duyệt sẽ hiển thị “alternate text” tha vì hiển thị hình ảnh. Cú pháp chung: <img src="url" alt=”alternate text”> 3. Ví dụ: [...]... i m c a CSS: S d ng CSS có m t s l i i m sau: • D b o trì: S c m nh c a CSS n m ch m t file CSS có th ư c s d ng i u khi n cách th c hi n th c a nhi u vă b n HTML khác nhau Vi c thay i gia di n c a site gi ây ch ơn gi n là s a i m t file CSS duy nh t thay vì ph i ch nh s a nhi u file HTML như trư c kia • Kích c file nh hơn: CSS cho phép ngư i thi t k lo i b toàn b ph n nh d ng kh i văn b n HTML, k... background-color: gray; width: 10em; } Gi s chúng ta t i m t file CSS v i n i dung như trên và lưu v i tên laF style .css Vi c áp d ng style s ư c th c hi n b ng cách dùng th link trên văn b n HTML ... t trong c web site Thay vì thêm rule này vào file CSS chung, ta có th s d ng header style Dư i ây là ví d v header styles: Lesson 4 - listing 2 p { font-family: arial,... SRC="Row1_Column1 .html" > Table of Contents Photo 1 Photo 2... attributes to the map element. < /html> X Frame: Khi s d ng frame, chúng ta có th hi n th nhi u hơn m t tài li u HTML trong m t c a s trình duy t M i tài li u HTML ư c g i là m t frame, và m i frame thì c l p v i nh ng frame còn l i Hình 10: M t s d ng frame 1 Th Frameset: Th nh nghĩa cách th c chia c a s trình duy t thành các frame - Thu c tính ROWS và COLS quy nh kích c các frame trong... ng rãi CSS cũng ã tr thành m t công ngh v ng m nh, ư c h tr t t và d s d ng t o l p giao di n cho trang web Nói m t cách ng n g n, CSS cung c p m t phương cách h u hi u ngư i thi t k web có th tách bi t giao di n c a trang web ra kh i n i dung c a trang web ó Chúng ta s cùng tìm hi u cách th c làm i u này như th nào, và t i sao nên làm như th 2 CSS là gì? Cascading Style Sheets (CSS) là m t ngôn ng... văn b n HTML xác nh cách th c n i dung ư c hi n th Cách th c hi n th ư c xác nh b i các style ư c t tr c ti p trong các tag HTML, ho c trong ph n head c a văn b n HTML, ho c lưu trên m t file có ph n ki u là css Trong style sheet ch a các style rule M i rule ch th cách th c nh d ng m t thành ph n c th trên văn b n HTML, ch ng h n paragraph, h1, … Nhi u file HTML có th liên k t n cùng m t file CSS 3... 5.5, và 6, nhưng ư c h tr b i h u h t trình duy t khác IV S d ng style trong thi t k trang web Có ba cách s d ng style sheet trên m t trang HTML: • Inline styles • Header styles • External style sheets 1 Inline styles Inline styles có th ư c áp d ng tr c ti p vào các tag HTML b ng cách dùng thu c tính style Tuy nhiên, nên tránh s d ng inline styles vì nh ng quy nh v style ư c thêm vào t ng th HTML. .. t ng th HTML i u này i ngư c l i m c ích chính c a CSS là áp d ng cùng m t style cho càng nhi u trang web càng t t b ng cách s d ng external style sheets Dư i ây là m t ví d v inline styles: Lesson 4 ... elit < /html> 2 Header styles Các CSS rule có th ư c t ph n c a văn b n web b ng cách dùng th Gi ng như inline styles, header styles cũng nên ư c tránh vì quy nh v style ư c ưa tr c ti p vào văn b n HTML thay vì dùng các t p tin CSS Biên so n: Đ ng Thanh Bình Trang 25 Thi t k Web Tuy v y, có nh ng trư ng h p ngo i l v i cách áp d ng style này Ch ng h n m t CSS rule chí tác ng . một tài liệu HTML: Tài liệu HTML được chia làm 3 phần, cụ thể như sau: a .HTML section Được bắt đầu bởi tag < ;HTML& gt; và kết thúc bởi tag < /HTML& gt;. first HTML document</H3> </BODY> < /HTML& gt; II. Các khái niệm chung: 1. Tài liệu HTML: Tài liệu HTML, hay còn gọi là văn bản HTML,

Ngày đăng: 19/01/2014, 15:20

Xem thêm