24/05/2018, 23:48

Các thẻ HTML cơ bản

Kết thúc chương này, bạn có thể: Sử dụng các thẻ cơ bản Chèn hình ảnh vào trong tài liệu HTML Chương này thảo luận về những thẻ cơ bản của HTML như các thẻ tiêu đề ...

Kết thúc chương này, bạn có thể:

Sử dụng các thẻ cơ bản
Chèn hình ảnh vào trong tài liệu HTML

Chương này thảo luận về những thẻ cơ bản của HTML như các thẻ tiêu đề (Header), các thẻ đoạn và các thẻ khối. Phần này cũng nói về danh sách (Lists) và làm thế nào để sử dụng các ảnh trong tài liệu HTML

Headings (Tiêu đề)

Phần tử này được sử dụng để cung cấp tiêu đề cho phần nội dung hiển thị trên trang web. Tất cả những phần tử tiêu đề phải có thẻ kết thúc. Nó bắt đầu bằng thẻ <H1> và kết thúc bằng </H1>.

Những phần tiêu đề được hiển thị to và in đậm hơn để phân biệt chúng với các phần còn lại của văn bản. Chúng ta cũng có thể hiển thị phần tiêu đề một trong sáu kích thước từ H1 đến H6. Tất cả những gì chúng ta làm là định rõ kích thước H1, H2…Trình duyệt chú trọng đến cách hiển thị

<HTML>
         <HEAD>
               <TITLE>Introduction to HTML</TITLE>
         </HEAD>
         <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>
</HTML>

Kết quả của ví dụ 1

Các thẻ mức đoạn

Phần này ta sẽ học ba thẻ mức đoạn văn bản: <ADDRESS>, <BLOCKQUOTE> và <PRE>

Thẻ <ADDRESS>

Phần tử <ADDRESS> được dùng để hiển thị các thông tin như tác giả, địa chỉ, chữ ký trong tài liệu HTML.Phần tử này thường hiển thị ở cuối trang và có thể chứa một hoặc một số phần sau:

Liên kết đến trang chủ
Đặc tính chuỗi tìm kiếm
Thông tin bản quyền

<HTML>
    <HEAD>
           <TITLE>Welcome to HTML</TITLE>
    </HEAD>
    <BODY BGCOLOR = lavender>
           <H3>My first HTML document</H3>
           <P>This is going to be real fun
           <H2>Using another heading</H2>
           <P> Another paragraph element
           <ADDRESS>
           <P><A href=”http://www.aptech-worldwide.com/”>Click here to Visit Aptech’s home page</A>
           </ADDRESS>
    </BODY>
</HTML>

Kết quả của ví dụ 2

Thẻ <BLOCKQUOTE>

Chúng ta có thể chỉ định một trích dẫn văn bản bên trong tài liệu bằng cách sử dụng phần tử BLOCKQUOTE và Q. BLOCKQUOTE được sử dụng cho những phần trích dẫn dài và được hiển thị như một đoạn văn bản thụt vào đầu dòng. Nếu phần trích dẫn ngắn và không cần ngắt đoạn,thì sử dụng phần tử Q tốt hơn. Khi sử dụng phần tử Q, bạn phải xác định dấu ngoặc kép

<HTML>
    <HEAD>
          <TITLE>Learning HTML</TITLE>
    </HEAD>
    <BODY>
          <P> The blockquote element is used to format the content in blocks of text.
          <BLOCKQUOTE>
                  Humpty Dumpty sat on a wall
                  Humpty Dumpty had a great fall
                  All the King’s horses
                  And all the King’s men
                  Could not put Humpty Dumpty together again
          </BLOCKQUOTE>
          <P>If you notice the content is rendered as a block of text.
    </BODY>
</HTML>

Kết quả của ví dụ 3

Thẻ <PRE>

Nếu chúng ta muốn văn bản được hiển thị với định dạng đã được xác định trước, chúng ta sử dụng phần tử PRE. Phần tử này dùng để xác định định dạng cho văn bản. Khi văn bản được hiển thị trong trình duyệt, nó sẽ tuân theo tất cả các định dạng đã được xác định trước trong mã nguồn tài liệu HTML.

<HTML>
    <HEAD>
            <TITLE>Learning HTML</TITLE>
    </HEAD>
    <BODY>
            <PRE>
                   Humpty Dumpty sat on a wall
                   Humpty Dumpty had a great fall
                   All the King’s horses
                   And all the King’s men
                   Could not put Humpty Dumpty together again
             </PRE>
    </BODY>
</HTML>

Kết quả của ví dụ 4

Thẻ khối <SPAN>, <DIV>

Có những trường hợp chúng ta muốn chia văn bản trong một trang web thành những khối thông tin logic. Chúng ta cũng có thể áp dụng những thuộc tính thông thường cho toàn bộ khối. Phần tử DIV và SPAN được sử dụng để nhóm nội dung lại với nhau. Phần tử DIV dùng để chia tài liệu thành các thành phần có liên quan với nhau. Phần tử SPAN dùng để chỉ một khoảng các ký tự.

Phần tử SPAN dùng để định nghĩa nội dung trong dòng(in-line) còn phần tử DIV dùng để định nghĩa nội dung mức khối (block-level)

<HTML>
    <HEAD>
            <TITLE>Learning HTML</TITLE>
    </HEAD>
    <BODY>
             <DIV>
                     Division 1
                     <P> The DIV element is used to group elements
                     <P>Typically, DIV is used for block level elements
                     </DIV>
             <DIV align = right>
                     Division 2
                     <P>This is a second division
                     <BR>
                     <H2>Are you having fun?</H2>
              </DIV>
              <P>The second division is right aligned.
              <SPAN STYLE = font-size:25; Color:blue>Common formatting </SPAN>is applied to all the elements in the division
    </BODY>
</HTML>

Kết quả của ví dụ 5

Phần tử SPAN không hiển thị trong Netscape

Các thẻ định dạng ký tự thường dùng

HTML có nhiều thẻ có thể được sử dụng để định dạng nội dung của tài liệu. Các thẻ được phân thành các nhóm:

Thẻ định dạng mức vật lý

Thẻ định dạng mức vật lý là những thẻ định rõ hoặc thay đổi đặc điểm của văn bản mà bạn áp dụng thẻ.

Thẻ	Mô tả	Ví dụ
<B> . . . </B>	In đậm	<HTML> <HEAD> <TITLE>Learning HTML</TITLE> </HEAD> <BODY> <P><B>This is good fun</B></P> </BODY> </HTML>
<TT>...</TT>	Cố định độ rộng văn bản	<HTML> <HEAD> <TITLE>Learning HTML</TITLE> </HEAD> <BODY> <P>This is <TT> good </TT> fun </P> </BODY> </HTML>
<SUP>...</SUP>	Chỉ số trên	<HTML> <HEAD> <TITLE> Mathematical Formula </TITLE> </HEAD> <BODY> <P>pi*r<sup>2</SUP></P> </BODY> </HTML>
<SUB> . . .</SUB>	Chỉ số dưới	<HTML> <HEAD> <TITLE> Chemical Formula </TITLE> </HEAD> <BODY> <P>H<SUB>2</SUB>O</P> </BODY> </HTML>

Thẻ định dạng mức logic

Thẻ định dạng mức logic là những thẻ mô tả “hiệu ứng cần thiết” của văn bản. Sự hiển thị thật sự do trình duyệt điều khiển.

Những thẻ định dạng mức vật lý được các trình duyệt hiển thị như nhau. Những thẻ định dạng mức logic được hiển thị tùy theo trình duyệt mà tài liệu HTML được hiển thị.

Thẻ logic	Mô tả	Ví dụ
<EM> ...</EM>	Nhấn mạnh văn bản	<HTML> <HEAD> <TITLE>Learning HTML</TITLE> </HEAD> <BODY> <P><EM>This is good fun </EM></P> </BODY> </HTML>
<CODE>...0</CODE>	Sử dụng trong phần trích của mã chương trình	<HTML> <HEAD> <TITLE>Learning HTML</TITLE> </HEAD> <BODY> <P> <CODE>x = X + 1 <BR> Y = Y + 1</CODE> </BODY> </HTML>
<VAR>...</VAR>	Sử dụng cho các biến trong chương trình	<HTML> <HEAD> <TITLE>Learning html</TITLE> </HEAD> <BODY> <P><VAR>X</VAR> </BODY> </HTML>
<CITE>...</CITE>	Sử dụng cho các trích dẫn và tham chiếu	<HTML> <HEAD> <TITLE> Learning HTML </TITLE> </HEAD> <BODY> It is the mark of an educated mind to be able to entertain a thought without accepting it<CITE> Aristotle </CITE> </BODY> </HTML>

Danh sách

Danh sách dùng để nhóm dữ liệu một cách logic. Chúng ta có thể thêm các danh sách vào tài liệu HTML để nhóm các thông tin có liên quan lại với nhau.

Roses

Sunflowers

Orchids

Apples

Oranges

Daffodils

Mangoes

Có thể được nhóm thành:

Fr0uits
Apples
Mangoes
Oranges
Flowers
Daffodils
Orchids
Roses
Sunflowers

Các loại danh sách mà bạn có thể chèn vào tài liệu HTML là:

Danh sách không thứ tự
Danh sách có thứ tự
Danh sách định nghĩa

Danh sách không thứ tự

Đây là loại danh sách đơn giản nhất mà bạn có thể thêm vào tài liệu HTML. Danh sách không thứ tự là một “bulleted list”. Các mục được bắt đầu bằng dấu chấm tròn “bullet”. Danh sách không thứ tự được nằm trong cặp thẻ <UL>…</UL>. Mỗi mục trong danh sách được đánh dấu bằng thẻ <LI>. LI được viết tắt của từ List Item. Thẻ kết thúc </LI> là tùy chọn (không bắt buộc).

<HTML>
    <HEAD>
           <TITLE>Learning HTML</TITLE>
    </HEAD>
    <BODY>
           <UL>
                <LI>Monday
                <LI>Tuesday
                <LI>Wednesday
                <LI>Thursday
                <LI>Friday
           </UL>
    </BODY>
</HTML>

Kết quả của ví dụ 7

Chúng ta có thể tạo ra các danh sách lồng nhau để mô tả nhóm con của thông tin.

<HTML>
    <HEAD>
            <TITLE>Learning HTML</TITLE>
    </HEAD>
    <BODY>
            <UL>
                 <LI>Monday
                       <UL>
                             <LI>Introduction to HTML
                             <LI>Creating Lists
                         </UL>
                 <LI>Tuesday
                        <UL>
                             <LI>Creating Tables
                             <LI>Inserting Images
                         </UL>
                 <LI>Wednesday
                 <LI>Thursday
                 <LI>Friday
            </UL>
    </BODY>
</HTML>

Kết quả của ví dụ 8

Thuộc tính TYPE có thể được dùng để định dạng các bullets để hiển thị cho các mục của danh sách.

Thuộc tính

Thẻ

Ví dụ

Bulleted

<HTML>

<HEAD>

<TITLE>Learning HTML</TITLE>

</HEAD>

<BODY>

<UL>

<LI>Monday

<UL>

<LI>Introduction to HTML

<LI>Creating Lists

</UL>

<LI>Tuesday

<UL>

<LI>Creating Tables

<LI>Inserting Images

</UL>

<LI>Wednesday

<LI>Thursday

<LI>Friday

</UL>

</BODY>

</HTML>

Customized bullets

<LI TYPE = SQUARE> Square bullets <LI TYPE = DISC> Sphere bullets<LI TYPE = CIRCLE> Round bullets

<HTML>

<HEAD>

<TITLE>Learning HTML</TITLE>

</HEAD>

<BODY>

<UL>

<LI>Monday

<UL>

<LI TYPE = DISC>Introduction to HTML

<LI TYPE = DISC>Creating Lists

</UL>

<LI>Tuesday

<UL>

<LI TYPE = SQUARE>Creating Tables

<LI TYPE = SQUARE>Inserting Images

</UL>

<LI>Wednesday

<UL>

<LI TYPE = CIRCLE>Creating Forms

<LI TYPE = CIRCLE>Working with Frames

</UL>

<LI>Thursday

<LI>Friday

</UL>

</BODY>

</HTML>

Thuộc tính TYPE không được hiển thị trong Internet Explorer

Danh sách có thứ tự

Danh sách có thứ tự nằm trong cặp thẻ

 <OL>...</OL>

. Danh sách có thứ tự cũng hiển thị các mục danh sách. Sự khác nhau là các mục danh sách hiển thị theo thứ tự được tạo ra một cách tự động.

<HTML>
    <HEAD>
          <TITLE>Learning HTML</TITLE>
    </HEAD>
    <BODY>
          <OL>
              <LI>Monday
              <LI>Tuesday
              <LI>Wednesday
              <LI>Thursday
              <LI>Friday
           </OL>
    </BODY>
</HTML>

Kết quả của ví dụ 9

Chúng ta có thể đặt các thuộc tính để định nghĩa hệ thống số mà được tạo ra cho các mục danh sách.

Thuộc tính	Thẻ
Upper Roman	<LI TYPE = I>
Lower Roman	<LI TYPE = i>
Uppercase	<LI TYPE = A>
Lowercase	<LI TYPE = a>
Bắt đầu với một số khác lớn hơn 1	<OL START = n>

</OL>

Thuộc tính START xác định số khởi tạo ban đầu của danh sách.

<BODY>
        <OL>
             <LI>Monday
                 <OL>
                         <LI TYPE = i>Introduction to HTML
                         <LI TYPE = i>Creating Lists
                  </OL>
             <LI>Tuesday

<HTML>
    <HEAD>
          <TITLE>Learning HTML</TITLE>
    </HEAD>
    <OL>
          <LI TYPE = A>Creating Tables
          <LI TYPE = A>Inserting Images
    
           ting Forms
    </OL>
            <LI>Thursday
            <LI>Friday
            </OL>
    </BODY>
</HTML<LI >Crea>
                <LI >Working with Frames
                 </OL>
                 <LI>Thursday<LI>
    <OL START = 5>
    
               <LI>Friday
               </OL>
    </BODY>
    </HTMLWednesday
            <OL START = 5>
                <LI >Creating Forms
                 <LI >Working with Frames

Kết quả của ví dụ 10

Chúng ta có thể lồng các loại danh sách lại với nhau. Có thể lồng các danh sách có thứ tự vào trong các danh sách không thứ tự và ngược lại.

<HTML>
    <HEAD>
            <TITLE>Learning HTML</TITLE>
    </HEAD>
    <BODY>
            <UL>
                <LI>Monday
                          <OL>
                          <LI TYPE = i>Introduction to HTML
                          <LI TYPE = i>Creating Lists
                          </OL>
                 <LI>Tuesday
                          <OL>
                          <LI TYPE = a>Creating Tables
                          <LI TYPE = a>Inserting Images
                          </OL>
                 <LI>Wednesday
                 <LI>Thursday
                 <LI>Friday
           </UL>
    </BODY>
</HTML>

Kết quả của ví dụ 11

Danh sách định nghĩa

Danh sách định nghĩa được dùng để tạo ra một danh sách các điều khoản và các định nghĩa của chúng. Danh sách định nghĩa nằm trong cặp thẻ

<DL>…</DL>

. Thẻ <DT> được dùng để chỉ ra điều khoản còn thẻ <DD> được dùng để chỉ ra định nghĩa cho điều khoản đó.

<HTML>
    <HEAD>
            <TITLE>Learning HTML</TITLE>
    </HEAD>
    <BODY>
            <DL>
                  <DT>Sunday
                  <DD>The first day of the week
                  <DT>HTML
                  <DD>HyperText Markup Language
                  <DT>Internet
                  <DD>A network of networks
                  <DT>TCP/IP
                  <DD>Transmission Control Protocol / Internet Protocol
             </DL>
    </BODY>
</HTML>

Kết quả của ví dụ 12

Thẻ kẻ đường ngang: <HR>

Thẻ <HR>(horizontal rule) được dùng để kẻ một đường ngang trên trang. Những thuộc tính sau giúp điều khiển các đường nằm ngang. Nó chỉ có thẻ bắt đầu, không có thẻ kết thúc và không có nội dung.

Thuộc tính	Mô tả
align	Chỉ định vị trí của đường nằm ngang. Chúng ta có thể canh lề center(giữa)\|right(phải)\|left(trái). Ví dụ align=center
awidth	Chỉ độ dài của đường thẳng. Nó có thể xác định bằng các pixel hoặc tính theo phần trăm. Mặc định là 100%, nghĩa là toàn bộ bề ngang của tài liệu.
size	Chỉ độ dày của đường thẳng và được xác định bằng các pixel.
noshade	Chỉ đường được hiển thị bằng màu đặc thay vì có bóng.

<HTML>
    <HEAD>
              <TITLE>Welcome to HTML</TITLE>
    </HEAD>
    <BODY>
              <H3>My first HTML document</H3>
              <HR noshade size = 5 align = center awidth = 50%>
              <HR size = 15 align = left awidth = 80%>
              <HR>
              <P>This is going to be real fun
    /BODY>
</HTML>

Kết quả của ví dụ 13

Sử dụng font

Thẻ <FONT> dùng để điều khiển sự hiển thị văn bản trên trang web. Chúng ta cũng có thể chỉ định các thuộc tính như kích thước, màu sắc, kiểu…

Chúng ta có thể đặt các thuộc tính <FONT> cho cả tài liệu bằng cách đặt phần tử vào bên trong thẻ <BODY>. Ngoài ra, thuộc tính FONT có thể đặt cho từng từ, từng phần và từng phần tử trong trang.

Thuộc tính	Mô tả
COLOR	Được dùng để chỉ màu của font. Chúng ta có thể dùng tên màu hoặc giá trị thập phân để xác định màu.
SIZE	Được dùng để chỉ kích thước của font. Chúng ta có thể xác định các kích thước FONT từ 1 cho đến 7. Kích thước lớn nhất là 7 và nhỏ nhất là 1. Chúng ta có thể dùng một kích thước chuẩn và chỉ ra những kích thước tiếp theo liên quan đến kích thước chuẩn. Ví dụ, nếu kích thước chính là 3, thìSIZE=+4 sẽ tăng lên 7SIZE=-1 sẽ giảm xuống 2
FACE	Được dùng để chỉ định kiểu font (phông chữ)

Các thuộc tính của FONT có thể kết hợp trong cùng một thẻ.

<HTML>
    <HEAD>
           <TITLE>Welcome to HTML</TITLE>
    </HEAD>
    <BODY>
            <H3>My first HTML document</H3>
            <HR noshade size = 5 align = center awidth = 50%>
            <HR size = 15 align = left awidth = 80%>
            <HR>
            <P>This is going to be real fun
    /BODY>
</HTML>

Sử dụng màu sắc

Chúng ta có thể thêm màu vào trang và vào các phần tử trong trang. COLOR là thuộc tính có thể được sử dụng với nhiều phần tử như phần tử FONT và BODY.

</HTML>
    <HEAD>
          <TITLE>Learning HTML</TITLE>
    </HEAD>
    <BODY BGCOLOR=lavender>
          <H2><FONT COLOR = LIMEGREEN>Welcome to <HTML>
          </FONT></H2>
          <P><FONT COLOR = RED>This is good fun</FONT></P>
    
    </BODY>
</HTML>

Kết quả của ví dụ 15

Có 3 kiểu màu chính: đỏ, xanh và xanh da trời. Mỗi màu chính được xem như một bộ hai số của hệ 16.

#RRGGBB

Số thập lục phân 00 chỉ 0% của màu trong khi đó số thập lục phân FF chỉ 100% của màu. Giá trị cuối cùng là một mã sáu chữ số chỉ màu.

Mã thập lục phân	Màu
#FF0000	Red
#00FF00	Green
#0000FF	Blue
#000000	Black
#FFFFFF	White

Sử dụng hình ảnh trong tài liệu HTML

“Một bức tranh đáng giá ngàn từ”, tất nhiên điều này có thể áp dụng cho một trang web. Những hình ảnh được chèn vào trong trang web được gọi là những ảnh nội tuyến. Ảnh có thể là biểu tượng, bullet, ảnh, logo công ty và nhiều cái khác.

Ngày nay có nhiều định dạng đồ họa đang được sử dụng. Tuy nhiên, trên Web có khác đôi chút. Ba định dạng đồ họa thông thường được hiển thị trên hầu hết các trình duyệt là:

Ảnh GIF (Graphics Interchange Format) (.GIF)
GIF là định dạng thông thường nhất được dùng trong những tài liệu HTML. Những file GIF được định dạng không phụ thuộc vào định dạng nền và hỗ trợ 256 màu. Ưu điểm của các file GIF là khá dễ để chuyển tải, ngay cả kết nối sử dụng MODEM tốc độ chậm

Có hai tiêu chuẩn cho các file .gif -87a và 89a (hỗ trợ trong suốt).
- Định dạng GIF xen kẽ(Interlaced GIF format):Một file ảnh thông thường hiển thị ảnh một lần một dòng. Mặc dù các ảnh xen kẽ được hiển thị một lần một dòng, nhưng thứ tự có thay đổi
- Ảnh GIF trong suốt (Transparent GIF images): Ảnh GIF trong suốt là ảnh trong đó nền của ảnh cùng màu với trang web. Ví dụ các biểu tượng và bullet có nền trong suốt vì vậy chúng hợp với màu nền của tài liệu.

Ảnh JPEG (Joint Photographic Expert Group) (.JPEG)
Cách nén JPEG là một lược đồ nén mất thông tin. Điều này có nghĩa là ảnh sau khi bị nén không giống như ảnh gốc. Tuy nhiên trong quá trình phát lại thì ảnh tốt gần như ảnh gốc. Khi bạn lưu một file với định dạng JPG, bạn có thể định tỉ lệ nén. Tỉ lệ càng cao thì ảnh càng ít giống ảnh gốc.

JPEG hỗ trợ hơn 16 triệu màu và thường được sử dụng cho các ảnh có màu thực.

Cả hai file ảnh dạng JPEG (đuôi mở rộng là .jpg) và các dạng GIF đều nén ảnh để đảm bảo chế độ chuyển tải qua internet được nhanh hơn. Ảnh JPG có thể được nén nhiều hơn nhưng chậm hơn trong quá trình hiển thị so với ảnh .GIF. Có lẽ đó là lý do tại sao ảnh .GIF được phổ biến trong tài liệu HTML.

PNG (Portable Network Graphics)
Định dạng cho một file PNG là “lossless” (không mất thông tin). Trong nén “lossless”, dữ liệu ảnh được nén mà không bỏ chi tiết. Các file PNG hỗ trợ ảnh màu thực và dải màu xám. Các file PNG cũng có thể được nén và chuyển qua mạng.

Khi quyết định định dạng đồ họa, chúng ta nên nhớ một vài yếu tố:

Chất lượng của ảnh – Chất lượng của ảnh có quan trọng trong quá trình hiển thị không?
Độ lớn dữ liệu – Kích cỡ file càng lớn thì thời gian truyền càng cao.
Các yêu cầu hiển thị - Ảnh hỗ trợ trong suốt, hiển thị tuần tự hay xen kẽ.

Chèn ảnh

Thẻ IMG dùng để chèn những ảnh vào trong tài liệu HTML. Chúng ta cũng có thể đặt thẻ IMG tại vị trí mà ảnh được hiển thị. Thẻ IMG không có nội dung, nó hiển thị nội dung bằng cách xác định thuộc tính SRC. Cú pháp là:

<IMG SRC="URL">

Trong đó SRC (source) là thuộc tính và giá trị là một URL, chỉ vị trí chính xác của file ảnh.

Đôi khi, chỉ hình ảnh không thể nói lên tất cả. Chúng ta cần phải cung cấp cho người dùng một vài giới thiệu về mục đích của hình ảnh. Bạn có thể canh lề ảnh cùng với văn bản.

Thuộc tính ALIGN của thẻ IMG có thể được sử dụng để điều chỉnh canh lề của ảnh với văn bản xung quanh.

<IMG ALIGN=position SRC="PICTURE.GIF">

Trong đó, vị trí của ảnh có thể là trên(TOP), dưới(BOTTOM), ở giữa(MIDDLE), trái(LEFT) hoặc phải(RIGHT).

<HTML>
    <HEAD>
           <TITLE>Inserting an Image</TITLE>
    </HEAD>
    <H1><FONT SIZE=3 COLOR=FORESTGREEN>
    <B>Inserting an Image</B></FONT></H1>
    <HR>
    <BODY>
            <IMG ALIGN=BOTTOM SRC=Flowers.jpg> Aligned at the bottom</P>
            <P>
            <IMG ALIGN=TOP SRC=Flowers.jpg> Aligned at the top</P>
            <P>
            <IMG ALIGN=MIDDLE SRC=Flowers.jpg> Aligned in the middle</P>
    </BODY>
</HTML>

File Flowers.jpg nằm trong cùng một thư mục với file HTML nguồn

Kết quả của ví dụ 16

Chú ý rằng một vài trình duyệt không hiển thị những ảnh đồ họa. Trong trường hợp này, chúng ta cần xác định một dòng chú thích thay thế trong tài liệu HTML. Thuộc tính ALT được sử dụng để chỉ nội dung ảnh của bạn.

<HTML>
    <HEAD>
            <TITLE>Inserting an Image</TITLE>
    </HEAD>
    <H1><FONT SIZE=3 COLOR=FORESTGREEN>
             <B>Inserting an Image</B>
    </FONT></H1>
    <HR>
    <BODY>
            <IMG SRC=Flowers.jpg ALT=”Beautiful Flowers”>
    </BODY>
</HTML>

Nền của trang cũng quan trọng như văn bản. Người ta thường sử dụng màu cho trang web, mục đích là làm cho nội dung được nổi bật. Chúng ta cũng có thể sử dụng ảnh để làm nền. Để làm điều đó, ta cần phải dùng thuộc tính BACKGROUND trong thẻ BODY.

<BODY BACKGROUND=bgimage.gif>

(Chỉ ra URL hoàn chỉnh của ảnh)

Nếu ảnh nhỏ hơn phạm vi hiển thị của tài liệu thì ảnh được xếp kề nhau để lấp đầy toàn bộ vùng hiển thị .

Ảnh thường cuộn theo văn bản khi người dùng kéo thanh cuộn trong trình duyệt. Nếu không muốn như vậy và thay vào đó ta muốn tạo ra hiệu ứng hình mờ, nghĩa là văn bản thì cuộn còn ảnh thì đứng yên, ta thiết lập thuộc tính BGPROPERTIES trong thẻ BODY có giá trị là FIXED

<BODY BACKGROUND=bgimage.gif BGPROPERTIES=FIXED>

Các ảnh được chèn vào tài liệu HTML cũng có thể sử dụng như siêu liên kết. Những ảnh như thế gọi là siêu ảnh. Khi người dùng kích vào ảnh, sẽ hiển thị tài liệu hoặc file được chỉ ra trong URL. Để làm điều này, ta cần lồng ảnh vào trong thẻ neo (anchor)

Các phần tử Header được sử dụng để cung cấp tiêu đề cho những nội dung được hiển thị trên trang Web

Phần tử <ADDRESS> được sử dụng để hiển thị thông tin như là tác giả, địa chỉ và chữ ký cho tài liệu HTML

Chúng ta có thể trình bày lời trích dẫn bằng cách sử dụng phần tử BLOCKQUOTE

Nếu bạn muốn một đoạn văn bản được hiển thị với phần định dạng trước thì bạn có thể sử dụng phần tử PRE

Phần tử SPAN được sử dụng để định nghĩa nội dung trong dòng trong khi phần tử DIV được dùng để định nghĩa nội dung ở mức khối (Block-level content)

Danh sách được sử dụng để nhóm dữ liệu một cách logic. Chúng có thể được thêm vào tài liệu HTML để nhóm các thông tin có liên quan lại với nhau

Thẻ <HR> được dùng để vẽ một đường ngang qua trang

Thẻ <FONT> được dùng để điều khiển sự hiển thị văn bản trên trang Web

Chúng ta có thể đặt thuộc tính FONT cho toàn bộ tài liệu bằng cách sử dụng phần tử bên trong thẻ BODY

Màu có thể được thêm vào cho trang và cho các phần tử trên trang bằng cách sử dụng thuộc tính COLOR

Màu được xác định dưới ba màu chủ đạo: đỏ, xanh lục, xanh dương (Red, Green, Blue). Mỗi màu chính này được định nghĩa như là một số kết hợp từ hai số ở hệ thập lục phân

Những hình ảnh được chèn vào trong một trang web được gọi là hình ảnh trong dòng (In-line images). Những hình ảnh này có thể là những biểu tượng, bullets, những hình ảnh, những logo công ty, và nhiều thứ khác nữa.

Thẻ IMG được sử dụng để chèn hình ảnh vào trong một tài liệu HTML

Thuộc tính ALIGN của thẻ IMG có thể được sử dụng để điều chỉnh canh lề cho ảnh với những văn bản xung quanh

Đối với thuộc tính BACKGROUND của thẻ BODY, thường có thể sử dụng một ảnh đóng vai trò như một ảnh nền

Ảnh được chèn vào trong trang HTML mà nó cũng có thể phục vụ như là các liên kết. Những ảnh như vậy được gọi là siêu ảnh (hyperimage)

Điền vào chỗ trống

Màu được xác định bởi các màu chính là ______, ____ và_____.
________ được sử dụng để nhóm các dữ liệu trên trang Web
Ảnh được chèn vào trang Web được gọi là ảnh _________.
Hai chuẩn đối với file .GIF là _______ và _______.
Tên đầy đủ của PNG là ___________________.
Thẻ _______ được sử dụng để chèn ảnh vào một tài liệu HTML.
Tham số _______ được sử dụng để xác định đoạn chú thích cho một ảnh.

Viết một đoạn HTML cho trang Web với tiêu đề,
```
"Using headings"
```
. Thêm vào tiêu đề mức ba <H3> dòng chữ “My First HTML document”
Thêm một đoạn vào trang theo định dang dưới:
Little Miss Muffet

Sat on a Tuffet

Eating her curds and whey

There came a spider and sat down beside her

And frightened Miss Muffet away

Tạo một danh sách định nghĩa:

Peacock

National bird of India

Internet

A network of networks

HTML

HyperText Markup Language

Tạo một danh sách như sau:
1. Introduction to HTML
  1. Introduction to the World Wide Web
  2. Introduction to HTML tags
    - Formatting text
    - Enhancing the text
1. Designing a Web Site
  - Designing the page
  - Designing navigation
  - Creating Hyperlinks

Chèn ba ảnh vào tài liệu. Chèn ba đường thẳng xen kẽ giữa mỗi ảnh.

Bình luận về bài viết này

Chia sẻ tin đăng đến bạn bè

Lưu tin Gửi Messenger

Lê Thị Khánh Huyền

0 chủ đề

41643 bài viết