Bài Học HTML - Mở Đầu

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.

HTML Tags - Thẻ 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!
Đọ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ư đã 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 đã 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 src="http://yenhung.xtgem.com/images/ifunny.gif">Image
Tag <br>
Kết quả:

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
<br><input type="text" size="12" >
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(sẽ nói đến sau), link trong dấu ngoặc kép là link tới ả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ế!

HTML Attributes - Thuộc tính HTML...
Trong bài html - tags, mình đã 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 align="center">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.

MỘT SỐ TAG
--------------------
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 đã 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]
<p>đoạn văn thứ nhất chỉ chứa một câu</p><đoạn văn bản thứ hai cũng thế</p>
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 đã đề 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 align="justify">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ề cá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!

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>
<h2>thì</h2>
<h3>như</h3>
<h4>thế</h4>
<h5>nè</h5>
<h6>nè</h6>
các bạn test xem!
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]
<h4>Hởi bà con</h4>
<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>
TEST Thần chưởng!

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!
Đã chỉnh sửa. SuperTroll (28.08.2015 / 12:35) [1]