p là chiếm 25% độ rộng của cửa sổ trình duyệt. Cột thứ hai được thiết lập sẽ chiếm 50% độ rộng của cửa sổ trình duyệt, phần còn lại là 25% của cột thứ 3. Tài liệu html tên là 'frame_a.htm' được chèn vào cột thứ nhất, 'frame_b.htm' được chèn vào cột thứ hai, và 'frame_c.htm' được chèn vào cột thứ ba.Thuộc tính noresize:Khi dùng Frame thì người dùng có thể định lại kích thước cho cácFrame bằng cách click chuột vào kéo đường viền của mỗi Frame. Điều này gây mất thẩm mỹ cho website của bạn. Vậy trong trường hợp này bạn cần dùng đến thuộc tínhnoresizecủa thẻ Frame.Cú pháp như sau:<frame noresize='noresize' src='/link1.html' />Thuộc tínhscrollingThuộc tínhscrollingsẽ giúp bạn tạo thanh trượt cho frame.scrollingcó 3 giá trị là:no,autovàyes.Ý nghĩa của 3 giá trị trên như sau:No:Không tạo thanh trượt.Auto: Tự động tạo thanh trượt khi nội dung dài,Yes: Luôn luôn có thanh trượt.+Thẻ <table></table> giúp bạn tạo ra một bảng để hiển thị lên tài liệu HTML. Bảng được tạo ra có thể chứa text, ảnh hay chứa bảng....Để tạo ra một bảng ta dùng thẻ <table></table>. Kèm theo là 2 thẻ<tr><td></td></tr>2 thẻ này sẽ tạo ra các cột, dòng bên trong bảng. Trong đó: Thẻ <tr> sẽ tạo ra dòng, thẻ <td> sẽ tạo ra cột.Bảng dưới đây mô tả các thẻ thường được dùng trong việc tạobảngTagMô Tả<table>Thẻ để tạo bảng<th>Mô tả hàng đầu của bảng<tr>hàng (dòng) trong bảng<td>ô (cột) trong hàng<caption>nhãn của bảng<colgroup>nhóm các cột<col>Định các thuộc tính của cột<thead>Hàng Đầu bảng<tbody>Thân của bảng<tfoot>Hàng cuối bảngCú pháp để tạo ra một bảng như sau:<table width='300' height='200' border='1' ><tr> <td> Dòng 1 - Cột 1 </td> <td> Dòng 1 - Cột 2 </td></tr><tr> <td> Dòng 2 - Cột 1 </td> <td> Dòng 2 - Cột 2 </td></tr></table>Trong đoạn code trên chúng ta tạo ra một bảng có viền = 1px, rộng 300pc, cao: 200px và có 2 dòng, 2 cột.Heanding trong bảng.Heading trong một bảng được xác định bằng thẻ <th>. Chúng ta có thể tạm hiểu thẻ <th> được tạo ra để hiển thị phần tiêu để của dòng trong bảng.Cú pháp như sau:<table width='300' height='200' border='1' ><tr><th>Heading 1</th><th>Heading 2</th></tr><tr> <td> Dòng 1 - Cột 1 </td> <td> Dòng 1 - Cột 2 </td></tr><tr> <td> Dòng 2 - Cột 1 </td> <td> Dòng 2 - Cột 2 </td></tr></table>Kết quả thu được trên trình duyệt như sau:Heading 1Heading 2Dòng 1 - Cột 1Dòng 1 - Cột 2Dòng 2 - Cột 1Dòng 2 - Cột 2Tạo một cột chống.Cột trống ở đây được hiểu là một một cột không có dữ liệu nhưng vẫn được hiển thị lên trình duyệt.Tuy nhiên để tránh trường hợp vỡ bảng thị bạn nên đưa một dấu cách (khoảng trắng) vào cột đó. Dấu cách (khoảng trắng) được mã hóa để hiển thị lên trình duyệt như sau: ' 'Cú pháp để tạo một bảng có một cột trống như sau:<table width='300'height='200' border='1' ><tr><th>Heading 1 </th><th>Heading 2 </th></tr><tr> <td> Dòng 1 - Cột 1 </td> <td> Dòng 1 - Cột 2 </td></tr><tr> <td> Dòng 2 - Cột 1 </td> <td> </td></tr></table>Trong ví dụ trên thì ở dòng 2 cột 2 sẽ không có dữ liệu nhưng vẫn được hiển thị và không làm vỡ bảng do có sử dụng một khoảng trắng.Kết quả hiển thị lên trình duyệt như sau:Heading 1Heading 2Dòng 1 - Cột 1Dòng 1 - Cột 2Dòng 2 - Cột 1Thuộc tính colspan:Ở ví dụ trên. Bạn thấy ở cả 2 dòng đều có 2 cột. Trong trường hợp bạn muốn số cột của mỗi dòng khác nhau thì sao? Bạn không thể bỏ một <td></td> đi được. Điều này sẽ gây nên tình trạng vỡ bảng. Vậy có cách nào để giải quyết tình trạng này. Thuộc tínhcolspansẽ giúp bạn giải quyết việc đó.Thuộc tínhcolspansẽ gộp nhiều cột của một dòng lại với nhau và tạo thành một cột có kích thước = với kích thước các cột được gộp lại. Thuộc tính này nằm trong thẻ <td> có dạng: <td colspan='So_cot_muon_gop_Lai'>Trong ví dụ trên. Nếu bạn muốn dòng 1 chỉ có một cột và dòng 2 có 2 cột thì bạn cần đặt thuộc tínhcolspanthẻ <td> của dòng 1 bằng 2. Tức là bạn gộp 2 cột của dòng 1 vào thành một cột.Cú pháp như sau:<table width='300' height='200' border='1' ><tr> <td colspan='2'> Dòng 1 này chỉcó 1 cột. </td></tr><tr> <td> Dòng 2 - Cột 1 </td> <td>Dòng 2 - Cột 2 </td></tr></table>Kết quả hiển thị trên trình duyệt như sau:Dòng 1 này chỉ có 1 cột.Dòng 2 - Cột 1Dòng 2 - Cột 2+Danh sách trong HTML được hiểu là một list các đối tượng được hiển thị theo cùng một kiểu giống nhau.Các loại danh sách.Danh sách không theo thứ tự:Danh sách theo thứ tự:Danh sách định nghĩa:TagMô Tả<ol>Danh sách có sấp xếp<ul>Danh sách không sáp xếp<li>1phần tử trong danh sách<dl>,<dt>,<dd>Kiểu danh sáchDanh sách không theo thứ tựlà một danh sách các mục. Danh sách của các mục sẽ được đánh dấu bởi những bullet (dạng như gạch đầu dòng nhưng là một vòng tròn màu đen).Ví dụ<ul><li>Danh sách một</li><li>Danhsách hai</li></ul>Kết quả hiển thị trên trình duyệt như sau: *.Danh sách một *.Danh sách haiDanh sách theo thứ tựcũng là một dạng danh sách của các mục. Nhưng những mục trong đó được đánh dấu bởi số. Một danh sách theo thứ tự bắt đầu với thẻ <ol>. Mỗi mụcđược bắt đầu với thẻ <li>.Ví dụ:<ol><li>Danh sách 1</li><li>Danh sách 2</li></ol>Kết quả hiển thị trên trình duyệt như sau: 1.Danh sách 1 2.Danh sách 2Một danh sách dạng định nghĩakhông phải là danh sách của các hạng mục. Nó là một danh sách của các thuậtngữ và những lời giải thích của thuật ngữ đó. Một danh sách định nghĩa bắt đầu với thẻ <dl>. Mỗi một thuật ngữ được bắt đầu vớithẻ <dt>. Mỗi định nghĩa trong danh sách định nghĩa được bắt đầu bằng thẻ <dd>.Cú pháp như sau:<dl><dt>Danh sách 1</dt><dd>Mô tả 1</dd><dt>Danh sách 2</dt><dd>Mô tả 2</dd></dl>Kết quả hiển thị trên trình duyệt như sau:Danh sách 1 Mô tả 1Danh sách2 Mô tả 2+HTML sử dụng form để nhận dữ liệu mà người dùng tương tác vào.Để tạo ra một trường text cho người dùng nhập vào ta dùng thẻ <input>Ví dụ:Đoạn code dưới đây sẽ tạo ra một ô text để người dùng nhập dữ liệu vào.<input type='text' />Để người dùng có thể nhậpdữ liệu dạng password thì bạn cần thay đối type của thẻ <input> thànhpassword.Ví dụ:<input type='password' />Để tạo ra một form chuẩn bạn cần dùng đến thẻ<form></form>. Bên trong của thẻ này là các thẻ sẽ tạo ra các phần tử của form.Bảng sau đây liệt kê một số thẻ thường dùng trong việc xây dựng form.Tên thẻMô Tả<form>Kiểu form để nhập thông tin cũng là khai báo tạo ra một form<input>Tạo ra một thành phần của form. Có thể là một nút, một textbox, một checkbox hay một radio.<textarea>Tạo 1 vùng nhập liệu rộng.<label>Tạo ra một nhãn<fieldset>Nhóm các vùng nhập với nhau<legend>nhản của 1 fieldset<select>Tạo ra danh sách dạng sổ xuống<optgroup>nhóm các phần tử trong danh sách sổ xuống<option>1 phần tử trong danh sách sổ xuống<button>Tạo nút bấm.Ví dụ sau tạo ra một form cho người dùng nhập vào username và passqord.<form name='myForm'>Username:<input type='text' name='user'><br>Password:<input type='password' name='pass'></form>Nút radioNút radio có đặc điểm là trong một thời điểm người dùng chỉ có thể chọn 1 trong các lựa chọn được đặt ra.Cú pháp tạo ra một nútradionhư sau:Giới tính:Nam: <input type='radio' name='gioitinh' value='nam' />Nữ: <input type='radio' name='gioitinh' value='nu' />Trong ví dụ trên bạn chỉ có thể chọn 1 trong hai lựa chọn Nam hoặc Nữ. Đó chính đặc điểm chính của thẻ radioHộp kiểm.Trong trường hợp bạn muốn cho người dùng có nhiều lựa chọn. Điều này có nghĩa bạn đang cần đến nútcheckbox. Nútcheckboxcó tác dụng cung cấp cho người dùng nhiều lựa chọn hơn nútradio. Tức là trong cùng một thời điểm bạn có thể có nhiều lựa chọn hoặc không lựa chọn.Cú pháp để tạo một nút chekbox như sau:Nút check 1: <input type='checkbox' />Nút check 2: <input type='checkbox' />+Một tài liệu HTML không chỉ có text không. Trong nhiều trường hợp bạn muốn đưa hình ảnh vào nhằm tăng sự sinh động cho website.Trong trường hợp này, thẻ <img> sẽ giúp bạn làm điều đó một cách dễ dàng.Thẻ <img> sẽ nhận vào đường dẫn của một file ảnh, nó cónhiệm vụ hiển thị file ảnh đó lên trình duyệt theo định dạng mà bạn muốn.Cú pháp để hiển thị một hình ảnh trên trình duyệt như sau:<img src='/anh.jpg' width='200' height='150' border='1' />Ví dụ trên sẽ hiển thị một hình anh có tên 'anh.jpg' lên trình duyệt với chiều rộng: 200px, chiều cao: 150px; và có đường viền = 1. Bạn có thể thay đổi tên ảnh, chiều rộng, chiều cao, đường viền theo ý muốn.Đôi khi bạn muốn trình bày trang web của bạn theo cấu trúc của một tờ báo. Tức là ảnh một bên và chữ một bên. Trong trường hợp này có nhiều cách giải quyết. Bạn có thể dùng bảng. Nhưng để đơn giản hóa vấn đề, chúng tôi đưa ra ví dụ sau để các bạn tham khảo.<img src='/anh.gif' align ='left' width='48' height='48'>đây là ví dụ về việc trình bày tài liệu HTML dạng 1 tờ báo. Bạn hãy tăng nội dung nên để thấy rõ kết quả.Trong ví dụ trên chúng tôi sử dụng thuộc tínhaligncủa thẻ <img> để đưa ảnh sang bên trái.Thuộc tínhaligncó các giá trị: absbottom, absmiddle, baseline, bottom, left, middle, right, texttop, top.Bạn có thể thay đổi giá trị của thuộc tínhalignsao cho phù hợp với mục đích.Thuộc tính Alt:Thuộc tính này sẽ có tác dụng khi ảnh của bạn không được load về vì một lý do nào đó. Trong trường hợp này giá trị của thuộc tínhAltsẽ được hiển thị lên thay vì hiển thị ảnh. Điều này giúp cho người đọc hiểu được phần nào ý nghĩa của ảnh.Cú pháp như sau:<img src='/anh.gif' align ='left' width='48' height='48' alt='Ảnh phong cảnh.'>Trong ví dụ trên: Khi ảnh không được load về thì chữ: 'Ảnh phong cảnh 'sẽ được hiển thị đúng vị trí của ảnh.+Màu nền của một website theo mặc định sẽ là màu trắng. Tuy nhiên bạn có thể thay đổi theo ý thích.Trong bài này chúng tôi sẽ hướng dẫn bạn thay đổi màu nền của website bằng hai cách:Ảnh nền&Màu nềnTạo ảnh nềnwebsite: Để dùng ảnh làm nền cho toàn bộ website. Bạn dùng thuộc tính background của thẻ <body> Ảnh nền được đặt trong thẻ <body> có phạm vi ảnh hưởng tới toàn bộ website.Cú pháp như sau:<body background='background.jpg'>Trong ví dụ trên, chúng tôi dùng ảnh có tên là:background.jpglàm ảnh nền. Bạn có thể thay đổi ảnh khác bằng cách thay tên của ảnh.Tạo màu nền website: Để tạo màu nền cho website thì bạn cần biết đến mã màu. Để làm được điều này, trước tiên bạn cần khai báo thuộc tínhbgcolorcho thẻ<body>.Thuộctínhbgcolorcó giá trị là các mã màu. Mã màu này sẽ được dịch và hiển thị trên trình duyệt.Cú pháp như sau:<body bgcolor='#FF0000'>Trong ví dụ trên. thuộc tínhbgcolorsẽ làm cho website có màu đỏ vì giá trị của thẻbgcolorlàmã màu đỏ.Tuy nhiên: Giá trị của thuộc tínhbgcolorkhông nhất thiết phải là mã màu: Nó còn nhận 2 loại giá trị nữa là: màu RGB và Tên Màu.Cú pháp như sau:<body bgcolor='rgb(0,0,0)'><body bgcolor='black'>Ví dụ trên là 2 kiểu giá trị của thuộc tínhbgcolor. Dòng 1 sử dụng màuRGBđể làm màu nền. Dòng 2 sử dụngtên màuđể làm màu nền+Để làm chữ chạy bạn dùng đến thẻ<marquee>.Thẻ<marquee>sẽ làm chạy hầu hết các đối tượng trong thẻ như: Text, ảnh, các định dạngkhác. Cú pháp như sau:<marquee> Chữ chạy. </marquee>Thay đổi hướng chạy.Mặc định chữ trong HTML sẽ chạy từ phải sang trái.Tuy nhiên bạn có thể thay đổi hướng chạy.Thẻ<marquee>hỗ trợ bạn 4 hướng chạy.Down, left, right, up.Để sử dụng được hướng các hướng chạy này, bạn cần dùng đến thuộc tínhdirectioncủa thẻ<marquee>Cú pháp như sau:<marquee direction='down'> chữ chạy từ trên xuống. </marquee><marquee direction='up'> chữ chạy từ dưới lên</marquee><marquee direction='right'> chữ chạy từ trái sang phải</marquee><marquee direction='left'> chữ chạy từ phải sang trái.</marquee>Kiểu chạy.Thẻ<marquee>hộ trợ bạn 3 kiểu chạy:slide: chỉ chạy 1 lần sau đó đứng im. :scroll: Kiểu chạy bình thường :alternate:Kiểu chữ chạy đi chạy lại.Cú pháp như sau: <marquee direction='right' behavior='alternate' > chữ chạy từ trái sang phải và có kiểu chạy đi chạy lại. </marquee> <marquee direction='right' behavior='scroll' > chữ chạy từ trái sang phải và có kiểu chạy bình thường.</marquee> <marquee direction='right' behavior='slide' > chữ chạy từ trái sang phải và có kiểu chạy 1 lần sau đó đứng im.</marquee>Tốc độ chạy.Thuộc tínhscrollamountgiúp bạn tăng hay giảm tốc độ chạy của thẻ<marquee>Thuộc tính này nhận vào giá trị là các số nguyên. Tốc độ chạy tỉ lệ với giá trị bạn truyền vào.Cú pháp như sau: <marquee direction='right' behavior='alternate' scrollamount='100'> chữ chạy từ trái sang phải, kiểu chạy đi chạy lại và tốc độ chạy = 100</marquee>Bạn có thể tăng hoặc giảm tốc độ bằng cách tăng giá trị của thuộc tínhscrollamountChế độ lặpBạn có thể chọn chế độ lặp lại của thẻ<marquee>bằng cách sử dụng thuộc tínhloop. Thẻ<marquee>hỗ trợ 2 cách lặp. 1.Lặp 1 lần. 2.Lặp liên tục.Để lặp 1 lần bạn sử dụng thuộc tínhloopvới giá trị =1.Để lặp liên tục bạn sử dụng thuộc tínhloopvới giá trị =-1.Cú pháp như sau: <marquee direction='right' scrollamount='100' loop='-1'> chữ chạy từ trái sang phải, tốc độ chạy = 100, lặp liên tục</marquee> <marquee direction='right' scrollamount='100' loop='-1'> chữ chạy từ trái sang phải, tốc độ chạy = 100, lặp 1 lần</marquee>
Trang chủ