Đọc truyện Tự Học HTML

Tự Học HTML

Trước Sau

Màu nền

Font chữ

Font size

Chiều cao dòng

HTML:

1, HTML Elements - Phần tử HTML:

Elemen thay còn gọi là phần tử (sau này gọi là Element hay phần tử cũng được luôn). Nói cho dễ hiểu đây là những phần cầu tạo lên trang web! Các element có nhiều cấp độ, có nghĩ là chúng chồng lên nhau, ví dụ:

_Trên cơ thể có đầu, trên đầu có mắt, trong mắt có lòng đen, lòng trắng.........

Trên đây chỉ là ví dụ vui thôi, nhưng rất giống với thực tế html, tạm thời bỏ qua phần này, lát nữa mình sẻ quay lại và tếp tục sau!

Cấu trúc của Element

Một phần tử cơ bản bao gồm tag (thẻ) mở, nội dung tag, và tag đóng.

1.<p>- opening paragraph tag

2. Element Content - paragraph words (thẻ <p> có sẻ đáng dấu đây là đoạn(paragraph)) 3.</p>- closing tag

Trên đây là một ví dụ, bạn thật sự chưa cần hiều gì về công dụng của thẻ trên!

Sau này sẽ có một bài toàn các thẻ, tha hồ mà"ngâm cứu".

HTML thật sự rất lỏng lẻo, tới mức...tới mức......Một trang web viết bằng html, cần có ít nhất các thành phần html, head, title, and body để được coi là hoàn chỉnh, nhưng mà HTML lỏng lẻo đến mức ta chả cần các thẻ đó để viết một trang HTML.Việc lỏng lẻo này cũng mang lại rất nhiều lợi thế, nó đã giúp cho html đứng vững cho tới giờ! Vẫn chưa có một ngôn ngữ đánh dấu nào cạnh tranh với HTML cho tới giờ (tuy là có một số ngôn ngữ khác mạnh mẽ hơn như XML nhưng vì quá khó về mặt cú pháp nên vẫn chưa trở nên thông dụng!)

Các phần tử chính và tính lồng ghép<html> Element...</html>

Mọi trang HTML đầu được bắt đầu bởi thẻ <html. và kết thúc bởi thẻ đóng của nó, theo quy định tất cả nội dung html [phải được chứa trong thẻ này!<head> Element

Phần tử head được đặt bên trong phần tử html trong phần tử head người ta thường đặt một số thẻ nửa chứa thông tin về website hoặc là một số thứ khác nhưng không bao giờ đặt nội dung trang web vào trong thẻ head cả!<title>

Element

Phần tử title nằm bên trong phần tử head, nó chứa tiêu đề của trang web, tiêu đề là dòng bạn thấy, trên đầu trình duyệt, giống như lúc bạn đọc bải này thì tiêu đề làHTML

Elements - Phần tử HTML bây gờ bạn đã hiểu được tính lổng ghép trong html chưa

Mã nguồn:[Chọn]

<html><head><title>tiêu đề Trang Web của bạn</title></head></html><body>

Element

Phần tử body chứa đa số các phần tử khác, giúp cấu thành cái trang web mà chúng ta đang nhìn thấy đấy!Để có thể xem một ví dụ và choáng váng, bạn hãy:

_Nếu bạn dùng trình duyệt IE (cái hình chữa E màu xanh):chọn: View/Source_Nếu bạn đang dùng FireFox (con cáo lửa):chọn: View/ page Soure Nhìn hết một trang bạn sẽ thấy cơ mạng là bao nhiêu là thứ, nhưng đừng lo, không ai biết hết cái gì, cũng như không ai có thể học mọi thứ ngay từ đầu!Hảy thử tạo một trang web đầu tiên cho mình nào!

Mã nguồn:[Chọn]

<html><head><title>Web site của tôi</title></head><body>Chào thế giới rộng lớn trên Internet</body></html>

P/s: nếu bạn đả có một chương trình hổ trợ thết kế web thì khỏi nói, còn nếu không có chương trình nào thì hảy vào:Start/All Programs/Accesssories/Notepad(hình cuốn sổ, chương trình này rất thô sơ nhưng lại vô củng hữu ít)Sau khi bật chương trình, bạn cứ viết code html vào bình thường, sau khi hoàn thành chọn File/Save Chọn nơi bạn muốn Save trang web của bạn lại.

Ở phần

File name: điền tên file bạn muốn đặt cho trang web +.html(sau giấu "." có nghĩa là phần mở rộng. cho phép máy tính biết đây là file gì, mở ra bằng cái gì), đặt tất cả trong dấu ngoặc kép.

Save as type: đừng quan tâm.Encoding: chọn làUTF-8

Sau khi save xong, thử mở trang web đầu tiên của bạn ra đi!

Chú ý: Save lại với phần mở rộng là htm hay html cũng được, nhưng bạn nên thống nhất chỉ save lại với một tên mở rộng nhất định để tránh nhầm lẫn.

2, HTML Tags - Thẻ HTML

Tag (thẻ) là thành phần chứa thông tin mà nhờ đó, trình duyệt biết được trang web sẻ như thế nào!

Trình duyệt đọc trang web từ trên xuống dưới, từ trái qua phải,cứ thế từng chữ từng chữ như ta đọc bài,đa phần ta trình bày cái gì trước thì nó sẽ hiện ra trước, trình bày cái gì sau thì nó sẻ hiện ra sau!

Đọc tới đâu, trình duyệt phân tích tới đó, bằng những thẻ nhất định, trình duyệt sẽ biết:" à cái này là...", điều tiếp theo chúng cái này là...", điều tiếp theo chúng ta phải học là các thẻ đó!quay lại bài HMTL Elements tý:

Một phần tử cơ bản bao gồm tag(thẻ) mở, nội dung tag, và tag đóng.

1. <p> - opening paragraph tag

2. Element Content - paragraph words (thẻ <p> có sẻ đáng dấu đây là đoạn(paragraph))

3. </p> - closing tagthẻ <p> ở đây có ý báo cho trình duyệt biết:"đây là đoạn văn bản thưa anh trình duyệt".

Có rất nhiều tag được viết ra với công dụng tương tự, ví dụ như <b> có nghĩa là in đậm, <i> có nghĩa là in nghiêng.....

Chú ý:Như đã nói với các bạn, html là một ngôn ngữ khá lỏng lẻo, nó lỏng lẻo qua ví dụ này:

Để in ra màn hình một dòng chử vừa in đậm vừa in nghiêng như thế này, mình có thể viết:

Mã nguồn:[Chọn]

<b><I>vừa in đậm vừa in nghiêng.</B></i>

Điều nay không có gì là sai trong html, nhưng cũng như mình đả nói, html đã không còn được phát triễn nữa, nó cổ quá rồi, người ta đăng nhiên cứu để đưa ra những ngôn ngữ khác, mạnh mẽ hơn, và thực tế là đả có: XML, và một dạng đang được phát triễn giữa cả hai ngôn ngữ, gọi là XHTML, cho tới giờ, cái XHTML này vẫn chưa có gì đặc biệt hơn HTML ngoại trừ việc cứng rắn trong nguyên tác viết:

Để in ra màn hình một dòng chử vừa in đậm vừa in nghiêng như thế này trong XHTML, mình phải viết viết:

Mã nguồn:[Chọn]

<b><i>vừa in đậm vừa in nghiêng.</i></b>

Nhìn kĩ các bạn sẽ thấy một vài điểm khác biệt:

*.Thẻ <b> mở trước thẻ <i> và nội dung thì phải đóng sau thẻ đóng </i> , bao lấy tất cả

*.Thẻ mở là ta viết chữ thưởng, thì đóng củng phải vậy, không có chuyện chữ In chữ thường trong hai thẻ, để phù hợp vớ mọi quy tắc, từ nay ta thống hất chỉ dùng chữ thường cho mọi thẻ.

Tuy ngoài rắc rối ra,XHTML chưa có gì là hữu dụng, nhưng hãy cứ châp nhận nó từ từ, biết đâu trong tương lai gần..................Những thẻ không có thẻ đóng từ trước tới giờ mình chỉ nói về thẻ có 3 phần, nhưng có một số thẻ không có đủ ba phần đó!

Ví như một số thẻ không có chứa nội dung, như là thẻ ngắt dòng <br>, thẻ chứa hình ảnh, thẻ input:

Mã nguồn:[Chọn]

Đây là thẻ image,<br> src là thuộc tính(sẻ nói đến sau), link trong dấu ngoặc kép là link tới ảnh

<br><img>Image

Tag <br>

Kết quả:

Image Tag

Còn đây là thẻ xuống dòng, các bạn hãy để ý là đoạn này mình viết không hề xuống dòng

lát nữa cái này bạn sẽ hiểu!

Kết quả hiện ra màn hình sẽ là:

Đây là thẻ image,src là thuộc tính(sẽ nói đến sau), link trong dấu ngoặc kép là link tới ảnh.

Image Tag Còn đây là thẻ xuống dòng, các bạn hãy để ý là đoạn này mình viết không hề xuống dòng

Thẻ input nè lát nữa cái này bạn sẽ hiểu!

Chú ý:lại nột số quy tắc XHMTL với các thẻ không có thẻ đóng như <br> thì ta phải viết <br/>, viết như thế nào thì trình duyệt đều hiểu được, thỉnh thoảng khi làm biếng, mình vẫn bỏ qua quy tắc này, nhưng mà nói chung là ta nên tuân thủ các quy tắc quốc tế!

3, HTML Attributes - Thuộc tính HTML

Trong bài html - tags, mình đã có đề cập qua thẻ img và src là một trong những thuộc tính của nó. thuộc tính dùng dể....à....ờ...à khó nói quá, nói chung là thuộc tính sẻ bổ sung thêm thông tin cho thẻ, xem ví dụ cho dễ hiểu

Mã nguồn:[Chọn]

<p>Như đã dùng trong các ví dụ trước, thẻ p định dạng nội dung chứa bên trong là đoạn văn bản, và đoạn văn abn3 sẽ chứa những thuộc tính gì: canh lề trái, canh lề phải, canh giữa......Ví dụ này mình đả canh giữa có đoạn văn bản này, đừng lo nếu bạn cưa biết hết các thuộc tính và giá trị của chúng, ta sẻ đề cập tới ngay thôi!</p>

kết quả:

Như đã dùng trong các ví dụ trước, thẻ p định dạng nội dung chứa bên trong là đoạn văn bản, và đoạn văn abn3 sẽ chứa những thuộc tính gì: canh lề trái, canh lề phải, canh giữa......Ví dụ này mình đả canh giữa có đoạn văn bản này, đừng lo nếu bạn cưa biết hết các thuộc tính và giá trị của chúng, ta sẻ đề cập tới ngay thôi!

Chú ý:một thẻ có thể cùng lúc chứa nhiều hoặc không chứ thuộc tính nào, đó là tuỳ ở bạn!

Một số thuộc tính cơ bản và ví dụ trước hết, mình liệt kê ra luôn, rồi xem ví dụ sau!

Chú ý:thuộc tính name hơi khác biệt với thuộc tính id và class, sau này nếu có học qua PHP hay ASP hay một ngôn ngữ lập trình web nào đó, bạn sẽ thấy rỏ điều đó!

Theo các quy tắc XHTML, để đặt giá trị cho các thuộc tính:thuộc tính+=+"+giá trị+"

Cặp dấu ngoặc là bắt buộc.

4, Paragraph tag P

Paragraph Tag

Thẻ <p> báo hiệu đoạn văn. khái niệm đoạn văn chác bạn cũng đã hiểu mình cũng không giải thích vì cũng chả rành hơn ai, ví dụ thực tế:

Mã nguồn:[Chọn]

kết quả: Đoạn văn thứ nhất chỉ chứa một câu Đoạn văn bản thứ hai cũng thế

Các thuộc tính của thẻ <p>ngoại trừ 3 thuộc tính left, right, center đã đề cập ở bài trước, thì mình đoạn văn bản còn có một thuộc tính khác nữa! Để tìm một đoạn văn nào đó dài dài làm ví dụ cái:

Mã nguồn:[Chọn]

<p>Chàng là một gã trai nghèo khổ, dân cư ngụ, làm nghề đẩy xe bò thuê, nuôi mẹ già. Dân cư ngụ là nhưng người vốn từ nơi khác đến. Vì thế, dân cư ngụ không có ruộng đất, những thứ vô cùng quan trọng đối với người nông dân thời xưa. Đã vậy, họ còn bị phân biệt đối xử, thường phải ở nơi bìa làng, hoặc ở chỗ hẻo lánh. Nhà cửa của anh ta, cái được gọi là “nhà” thì luôn vắng teo đứng rúm ró trên mảnh vườn mọc lổn nhổn những búi cỏ dại. Hơn nữa, vì là dân ngụ cư, Chàng bị coi khinh, chẳng mấy ai thèm nói chuyện, trừ lũ trẻ hay chọc ghẹo khi anh ta đi làm về.</p>

<p>Tràng là một gã trai nghèo khổ, dân cư ngụ, làm nghề đẩy xe bò thuê, nuôi mẹ già. Dân cư ngụ là nhưng người vốn từ nơi khác đến. Vì thế, dân cư ngụ không có ruộng đất, những thứ vô cùng quan trọng đối với người nông dân thời xưa. Đã vậy, họ còn bị phân biệt đối xử, thường phải ở nơi bìa làng, hoặc ở chỗ hẻo lánh.Nhà cửa của anh ta, cái được gọi là “nhà” thì luôn vắng teo đứng rúm ró trên mảnh vườn mọc lổn nhổn những búi cỏ dại. Hơn nữa, vì là dân ngụ cư, Tràng bị coi khinh, chẳng mấy ai thèm nói chuyện, trừ lũ trẻ hay chọc ghẹo khi anh ta đi làm về.</p>

Kết quả:Tràng là một gã trai nghèo khổ, dân cư ngụ, làm nghề đẩy xe bò thuê, nuôi mẹ già. Dân cư ngụ là nhưng người vốn từ nơi khác đến. Vì thế, dân cư ngụ không có ruộng đất, những thứ vô cùng quan trọng đối với người nôn dân thời xưa. Đã vậy, họ còn bị phân biệt đối xử, thường phải ở nơi bìa làng, hoặc ở chỗ hẻo lánh. Nhà cửa của anh ta, cái được gọi là “nhà” thì luôn vắng teo đứng rúm ró trên mảnh vườnmọc lổn nhổn những búi cỏ dại. Hơn nữa, vì là dân ngụ cư, Tràng bị coi khinh, chẳng mấy ai thèm nói chuyện, trừ lũ trẻ hay chọc ghẹo khi anh ta đi làm về.Tràng là một gã trai nghèo khổ, dân cư ngụ, làm nghề đẩy xe bò thuê, nuôi mẹ già. Dân cư ngụ là nhưng người vốn từ nơi khác đến. Vì thế, dân cư ngụ không có ruộng đất, những thứ vô cùng quan trọng đối với người nông dân thời xưa. Đã vậy, họ còn bị phân biệt đối xử, thường phải ở nơi bìa làng, hoặc ở chỗ hẻo lánh. Nhà cửa của anh ta, cái được gọi là “nhà” thì luôn vắng teo đứng rúm ró trên mảnh vườn mọc lổn nhổn những búi cỏ dại. Hơn nữa, vì là dân ngụ cư, Tràng bị coi khinh, chẳng mấy ai thèm nói chuyện, trừ lũ trẻ hay chọc ghẹo khi anh ta đi làm về.

Đoạn văn bản có thuộc tính justify được canh hai bên, bạn thấy nó rất đều không!?

Nói thêm: justify còn được dùng trong các thẻ:

*.p, div, h1, h2, h3, h4, h5, h6

*.col, colgroup, tbody, thead, tfoot, tr, th, td.ví dụ về cách trái, phải, giữa chắc khỏi cần rồi ha! Vậy là đủ để kết thúc thẻ <p> rồi!

5, HTML Headings 1:6

Chú ý:đừng nhầm lẫn với phần header!Các tag Heading là các tag có chữ h và số từ 1 đến 6 <h1>....<h6> thường được dùng để tạo phần tiêu đề (đừng nhầm với thè title) kiểu chử to bên trên bài viết nên có cái tên như vậy, xem ví dụ:

Mã nguồn:[Chọn]

<h1>Headings</h1>

kết quả:

Headings

thì

như

thế

này

nè

Thật ra nó dùng để canh chỉnh kích thước chữ cho tiện thôi, có nhiều cách, nhưng cách này là tiện nhất, đây là ví dụ thực tế

Mã nguồn:[Chọn]

<p>Bà con đến đây, xem bài hướng dẫn của em viết, chắc chắn là qua Google, nhưng mà chắc cũng tìm mỏi mắt, tút sau cùng mới thấy web của em, điều này cho thấy web của em còn rất nhỏ, em mong mọi người hãy giúp em bằng một số cách: gửi yahoo cho bạn bè giới thiệu về web của em, gửi mail, post lên diễn đàn khác..v.v. Mấy điều đó sẽgiúp em rất nhiều!</p>

Kết quả:

Hởi bà con

Bà con đến đây, xem bài hướng dẫn của em viết, chắc chắn là qua Google, nhưng mà chắc cũng tìm mỏi mắt, tút sau cùng mới thấy web của em, điều này cho thấy web của em còn rất nhỏ, em mong mọi người hãy giúp em bằng một số cách: gửi yahoo cho bạn bè giới thiệu về web của em, gửi mail, post lên diễn đàn khác..v.v. Mấy điều đó sẽgiúp em rất nhiều!

Trong các tag heading, chúng ta có thể dùng các thuộc tính như thông dụng như align, class, id chẳng hạn!

6, HTML xuống dòng trong HTML - Line Break

Để xuống dòng trong html cũng có nhiều cách, nhưng cách đơn giản nhất là dùng thẻ <br/>, nên nhớ ta vẫn có thể viết <br> nhưng đây không tuân hủ các quy tắc XHTML và cứ nói tôi lẩm cẩm khi nhắc đi nhắc lại, tuy là chưa có gì đặc biệt, chỉ có thêm rắc rối, nhưng đây là hướng phát triễn của tương lai, và trong tương lai.......Thôi, xem ví dụ cái đã:

Mã nguồn:[Chọn]

Coi trọng lễ tiết, triết học<br/>Các bài quyền (kata) theo lối cổ điển<br/>Phương pháp luyện tập sử dụng nhiều phương pháp từ xưa để lại<br/>Ít tổ chức thi đấu<br/>Sử dụng chế độ phong đẳng cấp dựa vào số lượng bài quyền và động tác cơ bản luyện tập được. Thời gian phong đẳng cấp khác nhau giữa các lưu phái, song nhìn chung đều lâu.<br/>

Kết quả:Coi trọng lễ tiết, triết học

Các bài quyền (kata) theo lối cổ điển

Phương pháp luyện tập sử dụng nhiều phương pháp từ xưa để lại

Ít tổ chức thi đấu

Sử dụng chế độ phong đẳng cấp dựa vào số lượng bài quyền và động tác cơ bản luyện tập được. Thời gian phong đẳng cấp khác nhau giữa các lưu phái, song nhìn chung đều lâu.

-Đương nhiên mình nói có cách khác để xuống hàng, cách đó đây:

Mã nguồn:[Chọn]

<p>Coi trọng lễ tiết, triết học</p><p>Các bài quyền (kata) theo lối cổ điển</p><p>Phương pháp luyện tập sử dụng nhiều phương pháp từ xưa để lại</p>

Kết quả:

Coi trọng lễ tiết, triết học

Các bài quyền (kata) theo lối cổ điển

Phương pháp luyện tập sử dụng nhiều phương pháp từ xưa để lại

Nhưng nói thiệt, đây được xếp vào hàng ngu kiến!

nói thêm:để cách khoảng 2,3 hàng ta cứ thêm vào chừng ấy tag <br/>, cái này khỏi ví dụ.

7, HTML Horizontal Rule - Lằn Ngang

Thẻ <hr> này in ra một lằng ngang, chạy ngang qua màn hình.

Thẻ này thuộc dạng thẻ không có thẻ đóng như thẻ xuống hàng, ta có thể viết thẻ này đơn giản theo cách :

<hr>nhưng theo các quy tắc XHMTL thì ta phải viết <hr/>Ví dụ đơn giản:

Mã nguồn:[Chọn]

Mọi người trên thế giới đều có quyền yêu, quyền cưới vợ hay lấy chồng giàu<hr/><i>trích đâu đó</i>

Kết quả:

Mọi người trên thế giới đều có quyền yêu, quyền cưới vợ hay lấy chồng giàu

trích đâu đó

-Thẻ hr có những thuộc tính cơ bản như là id,calls nhưng còn có thể hiệu chỉnh màu:<hr />.

8, HTML List - Danh sách

Có ba loại list:

<ul> -unordered list; bullets

<ol> -ordered list; numbers

<dl> -definition list; dictionary

Nhưng mà chỉ dùng đa số là <ol>và <ul>, cái <dl> nói thiệt chả thấy gì khác biệt cho lắm!

Nhưng tag <ol> thì có tính tuỳ biến cao nhất!bên trong danh sách luôn có những à...ờ....nói chung là danh sách.

Xem ví dụ sẻ rỏ:<ul> list

Mã nguồn:[Chọn]

<ul>

<li>Nguyễn Văn Tí</li>

<li>Quách yên Quẩy</li>

</ul>

Kết quả:

Nguyễn Văn Tí

Trần Văn Trội

Quách yên Quẩy

<ol> list

Mã nguồn:[Chọn]

<ol>

<li>Nguyễn Văn Tí</li>

<li>Quách yên Quẩy</li>

</ol>

Kết quả:

1. Nguyễn Văn Tí

2. Trần Văn Trội

3. Quách yên Quẩy

<dl> list

Mã nguồn:[Chọn]

<dl>

<li>Nguyễn Văn Tí</li>

<li>Quách yên Quẩy</li>

</dl>

Kết quả:

· Nguyễn Văn Tí

· Trần Văn Trội

· Quách yên QuẩyQua ví dụ bạn sẽ thấy <dl> và <ul> không có gì khác nhau! Nhưng đó là bởi vì ta chưa hề thêm sự tuỳ biến vào.Tuỳ chỉnh thêm cho list

Phần này đa số ta xoáy vào <ol> list

Bạn thấy với ví dụ trên của <ol> list, list đó bắt đầu với 1, rồi tới 2,3...... Ta có thể để list này bắt đầu với một số tuỳ chọn, trong ví dụ này mình bắt đầu với 4

Mã nguồn:[Chọn]

<ol>

<li>Nguyễn Văn Tí</li>

<li>Quách yên Quẩy</li>

</ol>

Kết quả:

4. Nguyễn Văn Tí

5. Trần Văn Trội

6. Quách yên Quẩy

Trong list <ol> không những có thể đánh số thứ tự bằng số, mà còn có thể đánh số thứ tự với chữ cái hoặc số La Mã bằng cách thêm thuộc tính type với giá trị theo sau: a,A,i,Ia,A sẽ đánh thứ tự theo chữ cái, nhưng khác nhau là a in thường, A in hoa.Tương tự như thế với i và I Ví dụ:

Mã nguồn:[Chọn]

<ol>

</ol>

Kết quả :

a. Mỹ

b. Nhật

c. Pháp

d. Đức

e. Anh

Những cái khác các bạn có thể tự hiểu mà không cần ví dụ rồi ha!

Còn với <ul> list, ta lại có một số giá trị của thuộc tính type giúp định dạng cái dấu, các giá trị đó là:,type="disc",type="circle"

Ví dụ thử cái square

Mã nguồn:[Chọn]

<ul>

</ul>

Kết quả:

Mỹ

Nhật

Pháp

Đức

Anh

Trong list bạn còn có thể thụt ra thụt vô bằng cách dùng các thẻ <dt> và <dd>

Mã nguồn:[Chọn]

<ul>

<dd>Trung Quấc</dd>

</ul>

Kết quả:

Mỹ

Nhật

Pháp

Đức

Anh

Hàn Quốc

Trung Quấc

Và dĩ nhiên bạn cũng có thể lồng list vào list

Mã nguồn:[Chọn]

<ol>

<ol>

<li>Brazil</li>

</ol>

<ul>

</ul>

<ul>

<li>Trung Quấc</li>

</ul>

</ol>

Kết quả:

1. Châu Mỹ

a. Mỹ

b. Brazil

2. Châu Âu

o Anh

o Pháp

3. Châu Á

§ Trung Quấc

§ Nhật Bản

Vậy là ok kết thúc phần này nha.

9, Mã Màu RGB - HTML color code - color names

Màu để hiện thị trong html có hai loại, một loại là mấy màu cơ bản, thì cứ viết tên rtong English của nó ra, loại còn lại đậm nhạt tự ta pha thì là màu RGB (lát nữa cái giải thích cái tên bạn sẻ hiểu)

Trong đây mình có tên của 16 màu cơ bản theo

English:<body>RGB - Red, Green, Blue - Đỏ, Xanh lá, Xanh biển

Ý là lấy ba con số, tượng trưng cho 3 màu này, mức độ đậm nhạc khác nhau mà pha ra tất cả các màu còn lại, mỗi màu nhạt nhất giá trị là 0, đậm nhất là 255.tạo một trang web với thẻ body mở đầu <body> (đen thùi) hoặc <body> (cái này sẻ thấy trắng bóc) để hiểu được.Nhưng mà tới gời cũng ít ai viết mã màu kiểu này, người ta thường viết mã màu RGB theo hệ thập lục phân(thập lục = 16)

Hệ thập lục phân (HexadecimaL) bao gồm 10 con số từ 0-1 và mấy chữ cái A,B,C,D,E,F nó cũng tương tự như hệ cơ số đếm thập phân mà ta đang dùng.

5<9

thì

A<F

.....98->99...

thì

.....FE->FF...

FF là con số 2 chữ số lớn nhất trong hệ TLP cũng như 99 là con số có hai chữ số trong hệ thập phân. Cũng không cần quan tâm vấn đề này nhiều.Ở phần trước ta có giá trị nhỏ nhất là 0 lớn nhất là 255 thì tới đây, giá trị nhỏ nhất mỗi màu là 00 còn lớn nhất là FF. mình không thích toán học, còn bạn nào thích thì chắc chắn sẽ hiểu tại sao (15 * 16) + (15) = 255

Và lúc này, để đặt màu nền trang web là màu đen, ta lại có thêm một cách: <body>

Lưu ý là có thêm dấu # nữa nha

Nói thêm về cách tính màu

Ta có thể nhớ được một số màu đơn giản (ít nhất là 5 màu) đó là đen, trắng, đỏ, xanh lá, xanh biển

Đen: chả có màu gì, cả 6 con số đều =0

Trắng: # màu thật đậm, cả 3 6 con số đều =F

Đỏ: 2 con số tượng trưng cho sắc đỏ đậm nhất, hai màu kia đều= 0 (FF0000)

Xanh lá và xanh biển tương tự!

10, HTML Font

Thẻ <font> cũng là thẻ được dùng khá nhiều trong html, thẻ font thường được dùng dể ấn định kích thước, màu sắc và dĩ nhiên là font chữ trên trang web bằng cách thêm một số thuộc tính vào trong thẻ:color: định màu, màu có thể là tên, RGB...

Font:tên font chữ.

VD:Times New Romansize: số từ 1-7, 1 nhỏ nhất, 7 lớn nhất, cái này hình như mặc định là 3.

ví dụ:

Mã nguồn:[Chọn]

<font>yenhung.xtgem.com</font>

Kết quả:

yenhung.xtgem.com

Chúng ta có thể phối hợp với các tag định dạng như <b> hay <i>........để cho thêm phần màu mè.

ví dụ:

Mã nguồn:[Chọn]

<b><i><font>yenhung.xtgem.com</font></i></b>

Kết quả:

yenhung.xtgem.com

11, HTML Hyperlink - Liên Kết Trang Web

*Đây là một ví dụ thực tế mà bạn thường hay gặp, bất cứ lúc nào lướt web, bạn nhấp vào đâu đó, và thế là được chuyễn hướng sang trang khác.Để làm được việc này, ta bọc đối tượng( đối tượng có thể là chữ, hình ảnh) với tag <a> và dĩ nhiên câu hỏi đặt ra là làm sao định hướng được đi tới đâu, câu trả lời:

_Trong tag <a> ta cần có thêm thuộc tính href (hypertext reference). Giá trị của thuộc tính này là đường dẫn tới trang mà ta muốn nó đến, ví dụ bạn có một link và muốn nó dẫn tới trang chủ của yên hưng wap thì code cần viết đơn giản là:

Mã nguồn:[Chọn]

<a>Link dẫn tới yenhung</a>

Kết quả:

Link dẫn tới yenhung

Link hình ảnh

Đơn gản như link thường thôi:

Kết quả:

Mọi việc có thể là rất bình thường, cho tới khi.....mình nói là không phải như thế! giá trị của thuộc tính href cũng có 3 loại:

Internal- Links dẫn tới địa điểm cùng trang

Local- Links dẫn tới một trang tuộc tên miền của bạn (ví dụ như http://yenhung.xtgem.com/index.html và http://yenhung.xtgem.com/xoso là cùng tên miền)

Global- Link dẫn tới trang khác tên miền ( ví dụ http://google.com) tuy cái này vẫn có thể dẫn tới trang của bạn, đừng hiểu nhầm nhé!

Ví dụ thực tế cho từng loại: link internal thường dùng để làm những link "Trở về đầu trang" Bằng cách như thế này:ờ nơi bạn muốn "nhảy" tới khi click vào link, bạn đặt một thẻ

<a></a>

với giá trị của thuộc tính href là cái gì cũng được, miễn sao cho bạn dễ nhớ, ở đây nói trở về đầu trang thì mình đặt giá trị là top cho dễ nhớ.

Nơi mà bạn muốn hiện cái dòng chử Trở về đầu trang, bạn đặt một thẻ

<a>Trở về đầu trang</a>.

Nhớ là để ví dụ này có hiệu quả, thì trang phải dài và hiện thanh cuộn trên cửa sổ trình duyệt mới thấy được ha!

-Link Global thì khỏi giải thích nhiều, chèn nguyên cái đường dẫn (cái trên thanh dịa chỉ của trình duyệt ớ) và giá trị của href là xong.

-Link Local đây là một ví dụ thú vị, mà chắc sẽ không ít người bị nhầm lẫn sau này!

Mã nguồn:[Chọn]

<p><a>aaaaaaaaaaaa</a></p>

<p><a>aaaaaaaaaaa</a></p>

Cái này mình chỉ nói qua, các bạn thử tự ví dụ tại nhà ha! hảy tạo trên Destop một thư mục, save file HTML này tại đó, mở ra bằng trình duyệt và xem thử từng link sẽ dẫn bạn tới đâu.

Chú ý:Chắc chắn là bạn sẽ thấy một trang báo lỗi không tìm thấy hiện ra, nhưng không sao, ta chỉ quan tâm đến đường dẫn hiện ra trên tình duyệt để phân tích. Có 3 dòng 1,2,3 cứ thế ma nói.

1: Nếu bạn đặt file này trong bất cứ thư mục nào của ổ đĩa(ví dụ làC ha) link dẫn sẻ là: file:///C:/index.htmDấu "/" phía trước sẽ tạo ra đường dẫn là tên miền (trường hợp này là ổ đĩa) và tên file ngay sao đó.

2: Còn cái link thứ 2 sẽ đưa ra liên kết đúng tho vị trí mà file html đang nằm + tên file

3: Cái link này đưa ra đường dẫn tới thư mục chứa thư mục chứa file html + tên file

Nói thì khó hiểu nhưng các bạn cứ thử đi là sẻ hểu thôi!link targets - Mục tiêu khó dịch quá.Nói chung là với mỗi link bạn có quyền chỉ định khi nhấp vào là mở trang web trong địa chỉ ở cửa sổ mới hay là trong chính trang này,hoặc là trong frame nào bạn muốn, (frame ta sẽ tìm hiểu sau!)bằng thuộc tính target, có các giá trị như sau:

_blank: mở cửa sổ mới

_self: mở trang mới ở cửa sổ đang mở hay frame chứa nó (cái này mặc định)

_parent: mở trang ở frame cha (thí dụ frame chứ frame thì cái frame lớn chính là frame cha)

_top: mở ở cửa sổ hiện tại luôn, nhưng mà nếu tran có chứa frame nếu không đặt thuộc tính taeget có giá trị này, trang mới chỉ load trong frame, còn khi đặt giá trị này thì cả trang nhiều frame như một, cái này cũng khá khó để ví dụ, từ từ qua phần frame rồi tính.

*EMAIL tag <a> còn để làm link gửi mail, co nghĩa là khi click vào địa chỉ mail thì trình soạn thào mail mặc định của bạn se mở ra ớ!

Với cách này ta còn có thể đặt trước tựa và một phần nội dung thư như sau<a >Gửi thư cho mình nhé</a>

Sau địa chỉ mail có thêm dấu "?" và 2 phần subject=tiêu đề bạn muốn, body=Nội dung thư bạn muốn, có thể chỉ đặt 1 trong 2 phần này, nhưng khi muốn đặt cả hai cùng lúc thì cần có dấu "&"như trên ví dụ. Lúc nhấn vào người ta sẽ thấy phần tiêu dề và thông tin! (Đương nhiên là người ta vẫn xoá đi được).

12, HTML Tables – Bảng

Các bảng trong HTML được định nghĩa như sau:Định nghĩa 1 bảng bởi cặp thẻ

Trong 1 bảng (table) được chia làm nhiều dòng , mỗi dòng giới hạn bởi 1 cặp thẻ <tr></tr>.

Trong mỗi dòng lại có các ô , giới hạn bởi cặp thẻ <td></td>

Chẳng hạn để định nghĩa 1 bảng gồm có 1 dòng và 3 ô, ta làm như sau:

<table>

<tr>

</tr>

</table>

Hoặc để định nghĩa một bảng gồm 2 dòng, mỗi dòng 3 ô:

<table>

<tr>

</tr>

<tr>

</tr>

</table>

Chú ý: Số lượng các ô trong các dòng phải bằng nhau, nếu 1 dòng nào đó có số ô khác với dòng khác, bảng sẽ bị "vỡ kế hoạch". Để khắc phục điều này, ta phải tính trước trong 1 bảng, số lượng tối đa các ô của 1 dòng sẽ là bao nhiêu, sau đó có thể dùng thuộc tính colspan của thẻ <td> để gộp các ô trống trong cùng 1 hàng lại với nhau.Thuộc tính colspan sẽ chỉ định sốlượng các ô được gộp vào nhau trên một hàng.

Chẳng hạn:

<table>

<tr>

</tr>

<tr>

</tr>

</table>

Một số thuộc tính có liên quan:

Thẻ Table:

- border: Xác định độ dày của khung bao quanh bảng

- bordercolor: Màu của khung bao quanh, viết dưới dạng dấu # và 6 chữ số HEX tiếp theo.

- cellspacing: Xác định khoảng cách giữa các ô trong bảng.

- width: Xác định độ rộng của bảng

- background: Xác định hình ảnh sẽ được sử dụng để làm nền cho toàn bảng

- bgcolor: Xác định màu nền của bảng, viết theo kiểu #XXXXXX (số HEX).

Thẻ <tr>(dòng),<th>(cột), thẻ <th> thì ít dùng, mọi người thường làm theo kiều, trong bảng có dòng, trong dòng có ô, nhìn nó đỡ rối hơn

Thẻ <td>(ô)

- width: Độ rộng của ô

- height: Chiều cao của ô

- colspan: Xác định bao nhiêu ô tính từ ô đó sẽ được chập vào làm 1 (trên cùng 1 dòng)

- rowspan: Xác định bao nhiêu ô tính từ ô đó sẽ được chập vào làm 1 (trên cùng 1 cột).

- background: Xác định hình ảnh sẽ được sử dụng để làm nền cho ô

- bgcolor: Xác định màu nền ô, viết theo kiểu #XXXXXX (số HEX).

Ví dụ:

Mã nguồn:[Chọn]

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

Kết quả:

Cột 1

Cột 2

Cột 3

Dòng 1 Ô 1

Dòng 1 Ô 2

Dòng 1 Ô 3

Dòng 2 Ô 2

Dòng 2 Ô 3

Dòng 3 Ô 1

Bảng trên thuộc loại hơi rắc rối, một cấu trúc đơn giản hơn nhiều:

Mã nguồn:[Chọn]

<table>

<tr>

</tr>

<tr>

</tr>

</table>

Kết quả:

Ô 1

Ô 2

Ô 3

Ô 4

13, HTML Frames ,Iframe -Khung Iframes

Khung à ....frame thường được dùng để à...ờ. Ví dụ, bạn làm một website, có phần đầu chứ banner, bên trái là dãy menu còn bên phải là nội dung:

Down về và giải nén ra để xem ví dụ

DOWNLOAD

Sau khi down về nếu bạn nào không biết giải nén thì nhấp chuột phải vào chọn Extract here,mà mobile thì dùng blue FTP ấy

Bắt đầu vào phân tích cái frame này.

Mã nguồn:[Chọn]

<html>

<head>

</head>

<frame>

</frameset>

</html>

Đây là một trang frame đơn giản nhất, nó là một trang gộp lại bởi hai trang menu.htm và main.htm.

trang frame không có tag <body> frameset: tag này chứa thông tin định dạng cho trang frame và các frame nhỏ bên trong cols: thuộc tính này sẽ quyết định chiều rộng của hai cột, như ví dụ trên là20%,*, 20% sẻ là chiều rộng của cột đầu tiên, còn lại là của cột thứ 2.

<frame>: tag này mới chính thức là tag dẫn tới trang mà bạn chỉ định, với thuộc tính src là đường dẫn tới trang bạn muốn!

Còn ở ví dụ, mọi chuyện hơi khác,ở đó bạn thấy có 3 khung tất cả, một khung nằm ngang và hai khung bình thường. Đó là frame chứa frame có hai khung nhỏ.

Mã nguồn:[Chọn]

<html>

<head>

<title>trang frame</title>

</head>

<frame>

</frameset>

</html>

Như là đã nói từ trước, thường người ta dùng frame để tạo một menu, mà để khi click vào frame này mà frame kia thay đổi, ta cần thuộc tính name và thuộc tính target.

_trong frame menu thêm thuộc tính target với giá trị là tên frame ta muốn chuyễn hướng khi click chuột

_trong trang tương ứng với frame menu, trên phần <head> ta thêm tag <base> với thuộc tính target giá trị cũng là tên frame muốn chuyển hướng

Chú ý:ta vẫn có thể dơn giản là dùng thuộc tính target giá trị cũng là tên frame muốn chuyễn hướng trong tag <a> (xem lại phần html Link)

Dàn frame

Nói chung và không chính xác frame có hai cách dàng đó là hàng và cột!

Để dàng một cái frame nằm ngang(chiều dài hơn rộng) trong tag <frameset> thuộc tính rows với giá trị là chiều cao của frame thứ nhất (tính từ trên xuống).

VD:<frameset>Để dàng một cái frame đứng(chiều dài bé hơn rộng) trong tag <frameset> thuộc tính cols với giá trị là chiều cao của frame thí nhất( tính từ trên xuống)

VD:<frameset>Phân tích khĩ hơn các file ví dụ

Mình cũng đả giai thích sơ qua cho mọi người hiểu ở trên, bây giờ đi sâu vào luôn mình nói là đó là một cái frame lớn, frmae này là frame chia trang ra thành 2 phần ngang

Mã nguồn:[Chọn]

<frame>

</frameset>

Và một cái frame nhõ hơn

Mã nguồn:[Chọn]

<frame>

</frameset>

Và cả cái trang này được hợp thành bởi cả hai cái này, cái nhỏ hơn chèn bên trong cái lớn hơn

Mã nguồn:[Chọn]

<frame>

<frame>

</frameset>

Ở đây ta hiểu là, frame nhỏ hơn, đả thế vào chỗ vị trí frame ngang thứ hai.

Còn như ta muốn tạo một trang frame, có một cột đứng bên phải, và cột bên trái chia ra làm hai nữa nằm ngang thì code lúc này sẽ là:

Mã nguồn:[Chọn]

<frame>

</frameset>

Inlineframe- frame nội dòng

Đây là một hình thức frame dễ xử dụng hơn rất nhiều, ta có thể chèn frame này vào bất cứ đâu trên trang web html bình thường, giống như một phần tử.để làm được điều đó, bạn dùng tag <iframe>với các thông số sau:

name:cái này không bắt buộc,

VD:name="framename"width:chiều rộng, giá trị % màn hình hay px,

VD:width="398"height:tương tự như trên,

VD:height="227"src:link dẫn tới trang web, có thể là link tuyệt/tương đối(xem lại bài html link),

VD:src="http://wapcry.net"bên trong cặp thẻ iframe bạn có thể chèn một dòng chữ thông báo lỗi hiễn thị frame cũng được ví dụ:

Mã nguồn:[Chọn]

Nếu bạn nhìn thấy dòng chữ này, tức là trình duyệt của bạn không hỗ trợ inlineframe.

</iframe>

14, HTML Meta tags

Meta tag thường được dùng để lưu thông tin của một website, những thông tin này không hiện ra, ta không thể nhìn thấy nhưng nó phục vụ cho các loại spiders, search engiens dễ dàng tìm ra những thông tin thích hợp.

Spiders, search engiens thường là các máy trườn(web crawler), máy trườn này giống như một người lướt web, lướt tới đâu là ghi chép lại tất cả thông tin rồi cất giữ, để rồi khi ta tìm kiếm cái gì đó trên google hay yahoo thì kết quả sẽ xuất hiện ra chính là những thông tin đó.

Trong thới giới Internet hiện nay,lượng truy cập từ máy tìm kiếm như google hay yahoo là không phải là nhỏ, điển hình nếu các bạn đọc được bài viết này thì 100% cũng là từ google! Cho nên mấy cái meta tag này khá quan trọng.

Meta tag là các tag được đặt trong tag

headkeywords meta tag

Mã nguồn:[Chọn]

description meta tag

Mã nguồn:[Chọn]

Revised meta tag

Mã nguồn:[Chọn]

Refresh page

bạn có thể đặt thời gian để site tự động reload kể từ khi duyệt cũng như trang nào sẽ hiện ra khi reload

Để trở lại chính trang đó sau khi refresh(10 s một lần):

Mã nguồn:[Chọn]

Mã nguồn:[Chọn]

Mã hoá kí tự mã hoá ở đây có thề là iso, window hay là utf-8, mặc định là utf-8

Save hai đoạn code này lại và xem bạn sẽ hiểu khác biệt!

Mã nguồn:[Chọn]

<html>

<head>

</head>

<body>Ở trong đây mình viết Tiếng Việt có dấu đàng hoàng</body>

</html>

Mã nguồn:[Chọn]

<html>

<head>

</head>

<body>Ở trong đây mình viết Tiếng Việt có dấu đàng hoàng</body>

</html>

Hết!

15, HTML Scripts

Script là một loại code (mã) nói chung là...ờ à....một loại ngôn ngữ lập trình thật sự. Wap,Web có trở nên linh động hay không thì thật sự là do các script này.

Cùng lúc soạn thảo tài liệu hướng dẫn HTML này mình cũng đang soạn thảo một số Script đơn giản khác.

Có hai loại script thường được dùng trên web đó là javascript và vbscript.

(xem thêm về Javascript)

Nội dung các ngôn ngữ đó được đặt trong thẻ<script>, để xác định được ngôn ngữ bạn đang dùng, ta có 2 cách.

Ví dụ: ở đây mình dùng javascript để ví dụ:

Mã nguồn:[Chọn]

Hoặc là:

Mã nguồn:[Chọn]

Nội dung các script được đặt bên trong!

16,HTML Music ,Flash - Chèn nhạc ,Fiash vào HTML

Chèn nhạc vào web quả là một công đoạn thú vị, nó làm cho website trở nên gần gủi hơn với khách và dĩ nhiên, web nhạc là một trong nhũng loại hình kình doanh rất ư là đắt khách hiện giờ!

Phải nói trước, sự thật là không dễ để có một web nhạc to như mp3.zing.vn hay nhac.vui.vn kể về cả kỉ thuật lẫn vấn đề tiền nong.

_Để chèn nhạc vào web, ta dùng thẻ<embed>với 1 thuộc tính đơn giản là src cùng giá trị của nó là link dẫn tới bài nhạc.

_Ta có thể hiệu chỉnh kích thước cửa sổ play nhạc bằng các thuộc tính quen thuộc: width, height và hidden(true/flase) để ẩn khung chơi nhạc

_Để quy định nhạc có tự động play, hay phải click vào đâu đó, ta dùng thuộc tính autostart(true/flase)

_Để quy định nhạc sẽ chơi lại khi hết bài không, ta có thuộc tính loop (true/flase)

_Cũng có hể định sặn âm lượng với thuộc tính volume, giá trị số từ 0-100

Ví dụ

Mã nguồn:[Chọn]

<embed>

Tương tự cho flash, chỉ cần thay link vào!

17, HTML Body tag

Thẻ <body> là thẻ mà chứa tất cả các thẻ liên quan về định dạng, các thẻ chứa thông tin định dạng cần phải được đặt bên trong tag này để có một trang html đúng chuẩn.

Nhưng tự bản thân thẻ body cũng đả có rất nhiều thông tin định dạnh.

Canh khoàng cách lề

Mình diễn đạt hơi vụng, nhưng đây không phải là canh trái phải, ví dụ như trong file word, bạn có thể quy định được nội dung các mép giấy bên trái và cách mép giấp bên trên bao nhiêu. Ở đây thì là nội dung website và lề của cửa sổ trình duyệt. ta làm điều này với 2 thuộc tính:

_topmargin: định khoảng cách từ lề trên tới dòng đầu tiên của nội dung, giá trị là số.

_leftmargin: định khoảng cách từ lề trái tới dòng đầu tiên của nội dung, giá trị số.

ví dụ:

Mã nguồn:[Chọn]

<body>

Ngoài hai thuộc tính trên thì còn có

_rightmargin,bottommargin,marginwidth,marginheight cùng dùng đề cacnh chình như trên, nhưng 2 thuộc tính trên đã là quá đủ!

Màu nền và ảnh nền

_bgcolor: bạn có thể dùng mã màu rgb hoặc tên màu để làm giá trị cho thuộc tính này.

_background: link dẫn tới ảnh nền.màu liên kết mặt dù ta có thể định dạng font cho text, sau đó bọc bời tag <a> nhưng html cũng cho phép hiệu chỉnh màu link trên tag body với ba thuộc tính sau:

_link: link bình thường chưa hề nhấp vào

_vlink: link đã từng truy cập

_alink: link đang hoạt động nếu các bạn để ý, thì thường các link ta chưa hề nhấp vào có màu xanh, khi đã từng 1 lần nhấp vào link sẽ có màu tím, nhấp chuột phải vào link thì có màu đỏ, đó là 3 trạng thái màu mặc định, dùng 2 thuộc tính trên đặt trong tag body để tinh chỉnh màu với giá trị là màu bạn muốn.

18, HTML Div tag

Thẻ div là một trong những thẻ khá là đặc biệt trong html, ngày càng được sử dụng nhiều hơn và được nhiều người đánh giá rất cao về mặt công dụng trình bày. Các lão làng trong thiết kế thường dùng các thẻ div rất nhiều thay vì các thẻ table.

Thẻ div thật ra là layer(lớp), thẻ div có thể chứa mọi thành phần html khác, nó đơn thuần giống như một tag body nhưng linh động hơn để hiểu tại sao gọi là lớp(class) thì các bạn xem ví dụ này nhé, khoan hảy thắc mắc các thuộc tính bên trong, tìm mọi nơi trên top forum nhé.

Mã nguồn:[Chọn]

<div>

anh yêu em nhiều lắm</div>

<divid="layer2">

<font>tiền không có thì đừng có đòi yêu</font><p>

Mình đặt code ví dụ ngay dưới đây, nhưng đây chính là điểm đặc biệt của thẻ div, nó xác định vị trí mà nó xuất hiện trên màng hình bất chấp nó ở đâu trên tài liệu. (trong các phần trươc thì ta đều thấy cái gì viết trước sẽ hiện ra trước)

anh yêu em nhiều lắm

tiền không có thì đừng có đòi yêutiền tải nổi lên trên tình yêu thật sự

Thuộc tính của thẻ div

Thẻ div có các thuộc tính cơ bản như :

width

height

title

style

trong đó thuộc tính style là thuộc tính đặc biệt nhất. Nói chung thì phần tử HTML nào cũng có tuộc tính Style, để hiểu rỏ thêm về vấn đề này các bạn hãy thử tìm hiểu về CSS, trong với gian tới, mình sẽ cũng sẽ cố gắng bổ sung mong được các bạn tiếp tục ủng hộ!một ví dục ho thuộc tính style:

Mã nguồn:[Chọn]

<div>

</div>

Thật ra đa số các phần tử html đều có thuộc tính style, nhưng vì nó khá rắc rối và liên quan tới một khái niệm CSS nên mình sẻ dành riêng một mục dành riêng cho cái CSS này. Ngôn ngữ này mình sẽ giới thiêu với các bạn sau khi hoàn thành các chuyên trang về PHP

Trong thẻ div này có nhiều phần tử được ngăn cách nhau bởi dấu;, giá trị của chúng nằm phía sau dấu : ở mỗi phần tử.

_width,height: khá quen thuộc, có lẽ cũng không cần ói tới, thẻ div mặc định vô hình , phải có thêm màu nền để thấy được kích thước của nó.

_background-color: hãy đặt giá trị màu vào sau dấu :

_background-image: ảnh nền cho tag div, mọi thứ hơi khác một chút, xem ví dụ:

Mã nguồn:[Chọn]

background-image:url('/image003.png')

_position:cung cấp điểm tham chiếu cho thẻ div.

*.position: absolute: điểm tham chiếu vị trí cho thẻ div là góc trái phía trên của cửa sổ trình duyệt

*.position: relative: tương tự nhưng tính từ phiá bên phải

*.các thành phần top,left(từ trên xuống bao nhiêu, từ trái qua bao nhiêu) xác định vị trí của thẻ div ngoài ra còn có bottom và right, tuỳ mục đích mà bạn dùng tới.

_visibility:có hai giá trị: visible và hidden, bạn làm mọi việc để định dạng thẻ div, nhưng nếu để giá trị của thành phần này là hidden thì sẻ chằng ai trông thấy nó. Thường thì người ta dùng các script như javascript hoặc vbscript để làm ẩn nó đi và xuất hiện lúc người ta muốn.

_z-index:bạn chồng hai thẻ div lên nhau bằng cách cho các phần tử chỉ vị trí nó giống hệt nhau, thẻ div nào có giá trị z-index lớn hơn thì sẽ ổi len trên. Nếu z-index mà là số âm, thì thẻ div sẽ chìm xuống dưới các phần tử html khác, thuộc tính này khá thú vị!

Phối hợp với javascript ta có thể khiến thẻ div ẩn hiện, ứng dụng này rất hay, các bạn hãy tìm hiểu thêm về javascript tại đây nhé:

http://yenhung.xtgem.com/javascript/

Trên đây chỉ là một số yếu tố cơ bản mà mình biết được và trình bày với các bạn, mình sẽ cố gắng để hoàn thiện thông tin hơn nữa!

19, HTML Marquee - Chữ chạy

Chữ chạy<marquee>

Bọc dòng chữ quan tag <marquee> thì kết quả sẽ như thế này

-Chữ chạy từ dưới lên trên:

Mã nguồn:[Chọn]

<marquee>Đây là dòng chữchạy</marquee>

-Củng có thể cho chữ chạy từ trái qua phải với thuộc tính direction

Mã nguồn:[Chọn]

Hiệu chỉnh thời gian dừng và tốc độ với thuộc tính scrolldelay và scrollamount

Hiệu chỉnh số lần lặp lại với thuộc tính loop

Hiệu chỉnh kiểu chạy với thuộc tính behavior có ba giá trị:

slide,alternate,scrollkiều scroll ;à mặc định, được dùng cho các ví dụ trên

-kiểu slide: chạy tới khi chạm lề là dừng lại

Mã nguồn:[Chọn]

-kiểu alternate: chạy tới khi chảm lề thì chạy ngược lại

Mã nguồn:[Chọn]

Các bạn tự làm nhé có thể sáng tạo thêm chạy hình ảnh,... Nhưng ở một số trình duyệt thì các bạn sẽ ko cảm nhận được khác biệt.

20, HTML Forms - Biểu Mẩu

Cho đến lúc này, mình tin là nếu các bạn đã thử dùng vài công cụ hỗ trợ thiết kế web như MS FrontPage hay Dreamweaver thì các bạn đã có thể thể hiện trang web theo ý muốn của mình, tuy là chỉ dùng html thì sẽ không thể nào tối ưu hoá về mặt kĩ thuật.Có 2 điều làm cho trang web trở nên hấp dẫn:giao diện, tính tương tác với khách hàng.Vấn đề giao diện thì mặc dù hơi khó nhưng các bạn cũng đã phần nào giải quyết được, tuỳ theo thị hiếu khách hàng mà tuỳ ta lựa chọn (vd: khách hàng là tầng lớp trung niên thì tông màu nhẹ nhàng, tuổi teen thì màu mè loè loẹt). Nhưng vấn đề giao tiếp với khách hàng thì có thể khác nhau về hình thức nhưng cơ bản thì luôn giống nhau, và lại một lần nhìn vào thực tế bạn chưa thể nào giao tiếp với khách hàng cho tới khi bạn biết được mội sever-script (php,asp....) hay ít nhất một client-script (javascript,vbscript....)

Tuy đã nói là không biết một trong hai loại script trên thì không thể giao tiếp với khác hàng, nhưng mà html lại như là cầu nối, thiếu html thì cũng hơi khó mà nâng được cái gì!

Hình thức giao tiếp già cỗ nhất là cái khỏang trống cho ta điền thông tin vào rồi nhấn nút, đợi một hồi thì cái gì mình điền vào sẽ được gửi đi, hay là mấy cái ô rồi mình click chuột vào check, đó chính là các phần tử con bên trong phần tử form.

Để thông tin của các phần tử trên được gửi đi, chúng cần được đặt trong cặp thẻ <form>, trong thẻ form này cũng có một vài thuộc tính.

Mã nguồn:[Chọn]

<form>

</form>

action:đó là link mà sau khi form được gửi đi, trang web sẻ được chuyễn tới, trang này có thể là một trang bất kì hay chính trang chưa form, trang này chứa code xử lí thông tin form theo cách mà bạn muốn. Code đó có thể là 1 client-script hay sever-script.

method:là hình cách thức gửi form đi, có hai giá trị là post,get, giá trị get là mặc định, bạn hãy tự viết một trang chưa form sau bài này để nhận thấy sự khác biệt giữa post và get, để xem kỉ năng quan sát của bạn như thế nào.

name:cái này thì các bạn biết rồi, trong html đơn thuần cái này chả giúp được gì, nhưng mà form là để phối hợp với các ngôn ngữ khác, những ngôn ngữ này dùng tới cái name này khá nhiều.

Thẻ form không trực tiếp show cái gì ra màn hình cả, và cũng chả có giá trị gì nếu thiếu các phần tử con bên trong.

Một số phần tử của form ở các bài sau các bạn sẽ rõ hơn.

21, HTML Form Input - Các Cách Nhận Thông Tin

Cái thẻ input này hiễn thị ra được nhiều thứ lắm, nhờ giá thuộc tính type, vừa ví dụ vừa kể luôn một số loại phổ biến:

*text

Mã nguồn:[Chọn]

Kết quả:

Có thể đặt sẵn chữ vào trong cái ô đó bằng cách thêm thuộc tính value với giá trị là cái gì bạn muốn hiễn thị.

Mã nguồn:[Chọn]

Kết quả:

*password

Loại này thì cũng tương tự như loại trên, chỉ có điều khi đánh chữ vào thì hiện ra dấu chấn đen

Mã nguồn:[Chọn]

Kết quả:

bạn thử tự gõ vào mà xem

*checkbox

Mã nguồn:[Chọn]

Kết quả:

có thể cho cái nút này được đánh dấu sẵn bằng cách thêm vào code từ

Mã nguồn:[Chọn]

<inputchecked="yes" />

Kết quả:

Ta thường thêm giá trị mặc định vào check box với thuộc tính value để xử lí khi form được truyền đi, giá trị này chỉ được truyền đi khi checkbox được chọn, và giá trị này dĩ nhiên là không hiện ra màn hình.

*radio

radio là nhón nút, ví dụ như làm trắc nghiệm loại chỉ có duy nhất 1 đáp án đúng thì ta dùng các nút radio, các nút radio phải có cùng tên để có và giá trị khác nhau kết quả:

Mã nguồn:[Chọn]

Kết quả:

hãy chọn thử bất kì một nút, rồi chọn nút khác, bạn sẽ thấy một lúc chỉ có thể chọn một nút, cụ thể chỉ có thể chọn một nút trong nhóm nút có cùng tên

Cũng có thể chọn trước một nút bất kì bằng cách thêm thuộc tính

Mã nguồn:[Chọn]

<inputchecked="yes" />

Kết quả:

*reset

Khi đã điền hết các chỗ mà người ta cho bạn điền, mà muốn xoá điền lại cho lẹ thì dùng cái này, nó sẽ xoá tráng các giá trị

Mã nguồn:[Chọn]

<form>

</form>

Kết quả:

Top of Form

Bottom of Form

*hidden

hidden dùng để chứa giá trị nào đó mà ta muốn gửi đi nhưng không muốn hiện ra cho người khác thấy, tất nhiên là nó cần có thuộc tính value để làm nên việc, tại sao lại cần đến nó ư, bài học ở các ngôn ngữ sau sẽ giải thích!

Mã nguồn:[Chọn]

Kết quả:

*submit

nút sumit sẽ gửi form đi sau khi nhấn

Mã nguồn:[Chọn]

22, HTML Form Select - List Lựa Chọn

*select

phần tử select, đua ra cho người ta một danh sách sổ suống để chọn lựa, mỗi chọn lựa nằm bên trong tag option

Mã nguồn:[Chọn]

<option>Người yêu</option>

</select>

Kết quả:

Người yêu Bạn bè Gia đình

Bên trong tag select ta có thể định dạng cho....à...ờ, xem ví dụ nhé

Mã nguồn:[Chọn]

<option>Người yêu</option>

<option>Người yêu</option>

<option>Người yêu</option>

</select>

Kết quả:

Người yêu Bạn bè Gia đình Người yêu Bạn bè Gia đình Người yêu Bạn bè Gia đình

Nếu muốn người dùng chọn được nhiều kết quả cùng lúc bằng cách giữ phím Ctrl+Click chọn, ta thêm thuộc tính

Mã nguồn:[Chọn]

<option>Người yêu</option>

<option>Người yêu</option>

<option>Người yêu</option>

</select>

Kết quả:

Người yêu Bạn bè Gia đình Người yêu Bạn bè Gia đình Người yêu Bạn bè Gia đình

ta có thể quyết định những cái nào được chọn với giá trịselected="yes"

Mã nguồn:[Chọn]

<option>Người yêu</option>

</select>

Kết quả:

Người yêu Bạn bè Gia đình

Chú ý: trong thực tế ta cần đặt thuộc tính name trên tag mởselect và thuộc tính value ở mỗi option, khi form được gửi đi, giá trị của phần tử select chính là giá trị tương ứng của option được chọn.

23, HTML Form Textarea - Khung Soạn Thảo

Textarea là một phần tử tương tự như input loại text, nhưng text thì chỉ có một dòng còn text area thì là một cái hộp to.

Mã nguồn:[Chọn]

Kết quả:

-ta có thể đặt sẵn giá rị cho textarea bằng cách chèn sẵn giá trị muồn có ở giữa 2 tag

Mã nguồn:[Chọn]

Kết quả:

-textarea có khá nhiều thuộc tính các bạn từ từ tìm hiểu và bổ xung thêm, xem ví dụ ha:

Mã nguồn:[Chọn]

Kết quả:

+cols,rows chỉ kích thướng số hàng số cột của textarea, mỗi hàng cột tính bằng một kí tự.

*thuộc tính wrap

warp có nghĩa là cách xuống hàng khi viết viết liên tục, không nhấn Enter tới lề của textarea, có ba giá trị:

+soft: khi viết tới lề vẫn xuống hàng, nhưng sẽ không có khí tự xuống hàng khi form được chuyễn đi

+hard: tự động xuống hàng, thêm khí tự ngắt dòng vào nội dung được chuyễn đi

+off: viết thoả thích chả có xuống hàng

ví dụ

Mã nguồn:[Chọn]

<textarea wrap ="soft">soft: khi viết tới lề vẫn xuống hàng, nhưng sẽ không có khí tự xuống hàng khi form được chuyễn đi,hard: tự động xuống hàng, thêm khí tự ngắt dòng vào nội dung được chuyễn đi,off: viếtthoả thích chả có xuống hàng</textarea>

Kết quả:

Mã nguồn:[Chọn]

<textarea wrap ="hard">soft: khi viết tới lề vẫn xuống hàng, nhưng sẽ không có khí tự xuống hàng khi form được chuyễn đi,hard: tự động xuống hàng, thêm khí tự ngắt dòng vào nội dung được chuyễn đi,off: viếtthoả thích chả có xuống hàng</textarea>

Kết quả:

Mã nguồn:[Chọn]

<textarea wrap ="off">soft: khi viết tới lề vẫn xuống hàng, nhưng sẽ không có khí tự xuống hàng khi form được chuyễn đi,hard: tự động xuống hàng, thêm khí tự ngắt dòng vào nội dung được chuyễn đi,off: viếtthoả thích chả có xuống hàng</textarea>

Kết quả:

Mã nguồn:[Chọn]

Mình để thế sẽ giúp các bạn thấy được sự khác biệt.

Bạn đang đọc truyện trên: TruyenTop.Vip

Trước Sau

Tags: #dragonbax196