This is default featured slide 3 title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. blogger theme by BTemplates4u.com.

This is default featured slide 4 title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. blogger theme by BTemplates4u.com.

This is default featured slide 5 title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. blogger theme by BTemplates4u.com.

Showing posts with label HTML căn bản. Show all posts
Showing posts with label HTML căn bản. Show all posts

8/21/2012

Chapter3: HTML Elements

HTML documents được xác định bởi HTML elements.

HTML Elements


Start tag *Element contentEnd tag *
<p>Đây là đoạn văn</p>
<a href="default.htm"> Cái này là đường link</a>
<br />
HTML element là tất cả những thứ từ thẻ bắt đầu đến thẻ kết thúc:
* Thẻ bắt đầu còn gọi là thẻ mở, thẻ kết thúc gọi là thẻ đóng. (Các bạn liên hệ lại Chapter 0)


Cú pháp HTML Element
Một HTML element bắt đầu với thẻ mở./thẻ bắt đầu(từ nay mình gọi luôn là thẻ mở nhé)
Một HTML element kết thức với thẻ đóng/ thẻ kết thúc(mình gọi luôn là thẻ đóng, qui ước 1 thứ cho dễ học).
Nội dung của element là những thứ nằm giữa thẻ mở và thẻ đóng.
Cũng có trường hợp nội dung của element là trống rỗng.
Element rỗng bị đóng trong thể mở. Ví dụ như <br /> chẳng hạn.
Hầu hết các HTML element đều có các thuộc tính.

Tip: Các thuộc tính này sẽ học ở các chapter sau, học cùng một lượt dễ bị tảu hỏa nhập ma lắm.

HTML Elements lồng vào nhau.
Hầu hết các HTML element can thể lồng vào nhau(nghĩa là nó có thẻ chứa các HTML element khác).
Những HTML document bao gồm các HTML element lồng nhau.


Ví dụ ta có 1 HTML Document như sau.
<!DOCTYPE html>
<html>

<body>
<p>This is my first paragraph.</p>
</body>

</html>
Ví dụ trên chứa 3 HTML element đó là: <html> ... </html>, <body> ... </body>, <p> ...</p>.


Giải thích ví dụ trên.
Element <p>.
<p>This is my first paragraph.</p>

Element <p> xác định một đoạn văn trong HTML document. Nói cách khác khi ta thấy thẻ <p> thì ta biết đằng sau nó sẽ là đoạn văn bản.
Element này có thẻ mở là <p> và thẻ đóng là thẻ </p>.
Nội dụng của element này là : Đây là đoạn văn đầu tiên của tôi.

Tiếp theo là Element <body>.
<body>
<p>This is my first paragraph.</p>
</body>
Element <body> dùng để xác định thân của HTML document(nó chứa hầu như những thứ mà ta thấy trên trình duyệt).
Element này cũng bắt đầu bằng thẻ mở <body>  và kết thúc bằng thẻ đóng </body>.
Element này chứa một element khác là element <p>
(Giờ thì thấy Element HTML lồng vào nhau chưa?).

Tiếp tục là Element <html>.
<html>&

<body>
<p>This is my first paragraph.</p>
</body>

</html>
Element <html> dùng để xác định đây là HTML document.
Nó bắt đầu bẳng thẻ mở <html> và kết thúc bằng thẻ đóng </html>.
Element này chứa Element <body>.


Đừng quên thẻ đóng nhé.
Một vài Element vẫn có thể hiện đúng nội dung element mặc dù bạn quên viết thẻ đóng:
<p>This is a paragraph
<p>This is a paragraph
Ví dụ trên vẫn đúng trên hầu hết cac trình duyệt mặc dù nó không có thẻ đóng bởi vì thẻ đóng của Element <p> được coi là tùy chọn(Có thì tốt mà không có cũng không sao. Nhưng có vẫn hơn). Bạn nên có thể đóng, nó sẽ là thói quen tốt trong khi viết mã, vì nhiều có nhiều(rất nhiều nhé hầu như là đa số) element HTML khác nếu không có thể đóng thì trình duyệt sẽ bào lỗi hoặc kết quả hiên lên không theo như ý muốn của người viết nếu như bạn quên thể đóng. Với một hai dòng mã HTML nếu quên bạn dễ dàng phát hiện ra, chứ là vài trang mã HTML thì dù chỉ một lỗi nhỏ cũng đủ làm bạn mệt nghỉ rùi. Cuối cùng đừng quên thẻ đóng.


Element HTML rỗng.
Những element HTML này sẽ không chứa nội dung nên gọi là Element HTML Rỗng.
Ví dị như <br;> là một element rỗng, nó sẽ không có thẻ đóng ( <br> cho ta biết kết thúc một dòng. Kết thúc dòng khác Kết thúc đoạn văn nhé ).


Mẹo: Trong XHTML, Tất cả các element phải được đóng lại. Thêm một dấu / vào cuối từ khóa thẻ mở là đúng nguyên tắc nhất, ví dụ như <br /> đó là cách đóng những element rỗng đúng quy tắc trong ngôn ngữ XHTML (và XML), tất nhiên là đúng trong HTML rồi.


Mẹo HTML: Sử dụng thẻ chữ thường.
Thẻ HTML không phân biệt chữ hoa chữ thường: <P> cũng giống như <p>. Và có nhiều trang web sử dụng thẻ mà từ khóa viết hoa, điều này không sai trong HTML.
Với trang W3Schools sư dụng thẻ mà từ khóa viết thường bời vì World Wide Web Consortium (W3C) đề nghị viết thẻ bằng chữ thường HTML 4, và yêu cầu thẻ chữ thường trong XHTML.
Cái này mà anh em hỏi tôi là tại sao trong HTML4 và XHTML lại rắc rối đến thế... Tôi xin thưa đó là qui tắc cấm sửa hahahhah. Tới đây thì anh em thấy thẻ viết Hoa lợi hơn hay viết Thường lợi hơn. Anh em hãy tự hình thành cho mình một thói quen viết code sẽ rất lợi cho AE.

8/19/2012

Chapter2: HTML căn bản

Bài này có 4 ví dụ để cho các bạn hình dung cơ bản về HTML.
Đừng quá lo lắng khi các bạn nhìn thấy những ví dụ mà có các thẻ HTML bạn chưa học. Bạn sẽ biết về chúng ở những chapter sau.
Còn bây giờ thì bắt đầu ví dụ thứ nhất nào!

HTML Headings

HTML headings được định dạng bởi các thẻ từ <h1> đến <h1>
Bạn hãy thực hành và nhận xét 3 cái heading sau nhé. 

Ví dụ

<h1>Đây là heading</h1>

<h2>Đây là heading</h2>

<h3>Đây là heading</h3>

Thực hành »



HTML Paragraphs(Đoạn văn trong HTML)

HTML paragraphs được dịnh dạng bằng thẻ <p>.


Ví dụ

<p>Đây là một đoạn văn.</p>

<p>Và đây là một đoạn văn khác.</p>

Thực hành »


HTML Links

HTML links được định dạng bởi thẻ <a>.

Ví dụ như

<a href="http://minhlanh-it.blogspot.com">đây là blog của tôi</a>

Thực hành »

Chú ý: Các địa chỉ liên kết được qui định trong thuộc tính "href". Có nghĩa là sau từ khóa "href" này là địa chỉ tuyệt đối đến một trang web nào đó chẳng hạn.

(Cái thuộc tính này bạn sẽ học trong những chapter sau. Không cần phải xoắn).


HTML Images

HTML images được định dạng bởi thẻ <img>.

Ví dụ

<img src="Địa chỉ hình ảnh.jpg" width="104" height="142" />

Thực hành »


Chú ý: tên tệp và khích thích tệp ảnh được cung cấp như là thuộc tính.(Cái này chapter sau sẽ học).


Để thực hành ví dụ  HTML images  trên 3wschool bạn cần có link của bức ảnh. Đây tôi có cái link ảnh đây bạn có thể thử dùng: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwE0eoWfM7P5bwIB0_RdyCFekuUXnBN1ZF0G2uSzp9sln7EWh2BQY0Qf665s2zJu7fwR1PaGOkLd2PU8VcpEqquC5bDWSEgnYqImEiPnJo4HCF4ZNHTlJwA5ppSazWwasRQT6Z-UkSqJdo/s800/3D%2520Smile%2520108.gif".

8/18/2012

Chapter1: Giới thiệu về HTML


Ví dụ



<!DOCTYPE html>
<html>
<body>
<h1>Đây là header 1</h1>
<p>Đây là doạn văn.</p>
</body>
</html>


Try it yourself »

Giải thích ví dụ

  • Thẻ DOCTYPE định nghĩa các loại tài liệu(ở đây là loại HTML)
  • Thẻ đầu tiên trong tài liệu HTML là &ltHTML&gt. Thẻ này nói cho trình duyệt biết đây là điểm khởi đầu của một tài liệu HTML. Thẻ cuối cùng của tài liệu là &ltHTML&gt, thẻ này nói cho trình duyệt biết đây là điểm kết thúc của văn bản.
  • Đoạn chữ nằm giữa hai thẻ &ltbody&gt và &lt/body&gt là những gì nó sẽ thể hiện trên trình duyệt của bạn.
  • Đoạn văn bản nằm giữa hai thẻ &lth1&gt và &lt/h1&gt sẽ được hiển thị như heading.
  • Đoạn văn bản nằm giữa hai thẻ &ltp&gt và &ltp&gt sẽ được hiển thị như đoạn văn.

lampThẻ !DOCTYPE là thẻ nằm trong chuẩn mới của HTML - HTML5.




HTML là gì ?
  • HTML là ngôn ngữ cơ bản để cho bạn viết Web đấy.
  • HTML là viết tắt của Hyper Text Markup Language(ngôn ngữ đánh dấu siêu văn bản).
  • HTML không phải là ngôn ngữ lập trình, nó là ngôn ngữ đánh dấu.
  • Là ngôn ngữ đánh dấu nên nó tập hợp các thẻ đánh dấu.(bạn có thể hiểu đơn giản là muốn văn bản của bạn hiển thị kiểu gì thì sẽ đánh dấu theo kiểu đã được quy định sẵn).
  • Thẻ(tag) đánh dấu nói cho trình duyệt biết nó phải hiển thị trang đó như thế nào.



Thẻ HTML
  • Thẻ đánh dấu HTML thường được gọi là thẻ HTML.
  • Thẻ HTML là các từ khóa (tên thẻ) được bao quanh bởi dấu ngoặc nhọn giống như &lthtml&gt.
  • Thẻ HTML thường đi theo cặp: giống như &ltb&gt và &lt/b&gt.
  • Thẻ đầu tiên trong một cặp thẻ HTML là thẻ bắt đầu một thẻ đánh dấu HTML, thẻ thứ hai là thẻ kết thúc.
  • Thẻ cuối cùng viết giống như thẻ đầu, có kèm theo dấu "/" phía trước từ khóa.
  • Thẻ cuối cùng và thẻ kết thức còn được gọi là thẻ mở và thẻ đóng.

<từ khóa>nội dung</từ khóa>


HTML Elements

"Thẻ HTML" and "HTML elements" thường được dùng để mô tả những điều giống nhau.
Nói đúng hơn, một HTML element là tất cả những gì nằm giữa thẻ bắt đầu và thẻ kết thúc, bao gồm cả những thẻ HTML:


<p>Đoạn văn bản.</p>

Với ví dụ trên thì ta có thể hiểu như sau:


  • HTML element bắt đầu với thẻ: <p>
  • Nội dung của nó là: Đoạn văn bản.
  • HTML element kết thúc với thẻ: </p>
  • Mục đích của thẻ <p> là để định dạng một đoạn văn.
  • Đây cũng là một HTML element.


HTML Documents = Web Pages

  • HTML documents mô tả trang web
  • HTML documents chứa các thẻ HTML và văn bản đơn giản.
  • HTML documents cũng được gọi là trang web


Web Browsers(cái này còn gọi là trình duyệt web)

Mục đích của trình duyệt web(Chrome, Internet Explorer, Firefox) là đọc HTML document và hiển thị chúng như là một trang web(nói nôm na là nó dịch cái code HTML document này thành cái trang web đẹp đẽ mà mình hay xem đấy). Các trình duyệt sẽ không hiển thị các thẻ HTML nhưng sử dụng những cái thẻ HTML để giải thích nội dung của trang web.


Trình duyệt IE



Cấu trúc của trang HTML

Dưới đây là hình ảnh về cấu trúc của trang HTML

Chapter0: Học HTML với 3wschools

1/Giới thiệu
-Với HTML bạn có thể tạo riêng cho mình một trang Web.
-Những bài hướng dẫn này sẽ chỉ cho bạn mọi thứ về HTML.
-Học HTML rất dễ ? Bạn sẽ thích nó ?Các bạn tự đánh giá và cảm nhận nhé
2/Ví dụ trong mỗi Chapter
-Các bài học về HTML này chứa rất nhiều ví dụ để các bạn tham khảo và thực hành.
-Với trình biên tập trực tuyến của 3wschool, bạn có thể chỉnh sửa HTML và biết ngay kết quả mình làm.

Ví dụ


<html>
<body>
<h1>
My First Heading
<h1>
My first paragraph.
</body>
</html>


Try it yourself »
Nhấn vào nút "Try it yourself" để xem nói hoạt động như thế nào?

8/14/2012

Một file có định dạng HTML là gì?


- HTML là chữ viết tắt của Hyper Text Markup Language (Ngôn ngữ hiển thị siêu văn bản).
- Một file HTML là một file text bao gồm những tag nhỏ
- Những tag hiển thị nói cho trình duyệt biết nó phải hiển thị trang đó như thế nào
- Một file HTML phải có phần mở rộng là .htm hoặc .html
- Một file HTML có thể được tạo bởi một trình soạn thảo đơn giản.
Bạn có muốn thử không?
Nếu bạn sử dụng Window hãy mở Notepad, nếu bạn sử dụng Mac mở ứng dụng Simple Text. Với OSX bạn mở TextEdit và thay đổi lựa chọn sau: Select (trong cửa sổ preference) > Plain Text thay vì Rich Text và chọn "Ignore rich text commands in HTML files". Việc này rất quan trọng bởi vì nếu bạn không làm vậy thì code HTML có thể không đúng.
Sau đó bạn gõ vào những dòng sau:


minhlanh-it


minhlanh-it.blogspot.com and minhlanh-it.blogspot.com  administrative network



Lưu file lại với tên là "mypage.htm" vào desktop cũng được. Sau đó bạn đóng trình soạn thảo Notepad hoặc Simple Text lại và tìm đến file mypage.htm ở desktop rồi nhấp đúp vào trình duyệt sẽ hiển thị nội dung của trang.
Giải thích ví dụ trên:
Thẻ đầu tiên trong tài liệu HTML là . Thẻ này nói cho trình duyệt biết đây là điểm khởi đầu của một tài liệu HTML. Thẻ cuối cùng của tài liệu là , thẻ này nói cho trình duyệt biết đây là điểm kết thúc của văn bản.

Đoạn chữ nằm giữa hai thẻ và là thông tin của header. Thông tin header sẽ không được hiển thị trên cửa sổ trình duyệt.
Đoạn chữ nằm giữa cặp thẻ là tiêu đề của văn bản. Dòng tiêu đề này sẽ xuất hiện ở thanh trạng thái của trình duyệt web. </p><p>Đoạn chữ nằm giữa hai thẻ <body> là những gì nó sẽ thể hiện trên trình duyệt của bạn.</p><p><br /> </p><p>Đoạn chữ nằm giữa hai thẻ <b> và </b> sẽ xuất hiện dưới dạng đậm</p><p><br /> </p><p>Phần mở rộng là HTM hay HTML?</p><p><br /> </p><p>Khi bạn lưu một văn bản dưới dạng HTML, bạn có thể sử dụng cả hai dạng là .htm và .html. Chúng ta đã sử dụng dạng .htm trong ví dụ trên. Lý do này bắt nguồn từ nguyên nhân ngày trước là có những phần mềm chỉ cho phép phần mở rộng có tối đa là 3 chữ cái. Với những phần mềm mới hiện nay chúng ta nghĩ sẽ tốt hơn nếu bạn lưu lại với phần mở rộng là .html</p><p><br /> </p><p>Một chú ý khi sử dụng trình soạn thảo HTML:</p><p><br /> </p><p>Bạn có thể dễ dàng chỉnh sửa một tài liệu HTML bằng cách sử dụng WYSIWYG (what you see is what you get = thấy gì có đó) như là Frontpage, Claris Homepage, Dream weaver hoặc Adobe PageMill thay vì bạn phải tự viết những cặp thẻ từ đầu đến cuối. Nhưng nếu bạn muốn trở thành một web master đầy kỹ thuật, tôi khuyên bạn nên sử dụng những trình soạn thảo text đơn giản để học và làm quen với cấu trúc câu lệnh của HTML.</p><p><br /> </p><p><b><i>Những câu hỏi thường gặp</i></b></p><p><br /> </p><p>Q: Sau khi tôi đã chỉnh sửa một file HTML, nhưng tôi không thể xem được kết quả ở trình duyệt. Tại sao vậy?</p><p>A: Bạn phải chắc rằng bạn đã lưu file đó với phần mở rộng là .htm hoặc .html, như ở ví dụ trên là mypage.htm.</p><p><br /> </p><p>Q: Tôi đã thử chỉnh sửa file HTML của tôi nhưng lại không thấy thay đổi gì ở trình duyệt cả. Tại sao vậy?</p><p>A: Trình duyệt tự động cach trang của bạn do đó nó không phải đọc cùng một trang hai lần. Khi bạn thay đổi gì đó ở một trang, trình duyệt nó không thể nhận ra được những thay đổi đó. Sử dụng nút refresh hoặc reload của trình duyệt để bắt nó đọc lại những thay đổi bạn tạo ra.</p><p><br /> </p><p>Q: Tôi nên sử dụng trình duyệt nào?</p><p>A: Bạn có thể thực tập tất cả những bài thực hành trong phần này với những trình duyệt thông dụng như Internet Explorer, Mozilla, Netscape hoặc Opera. Tuy nhiên, một vài ví dụ trong phần nâng cao đòi hỏi bạn phải có phiên bản mới nhất của trình duyệt.</p><p><br /> </p><p>Q: Tôi bắt buộc phải sử dụng Window sao? còn Mac thì sao?</p><p>A: Bạn có thể thực tập tất cả những bài thực hành trong phần này với hệ điều hành không phải là Windows như Mac. Tuy nhiên một vài ví dụ trong phần nâng cao đòi hỏi bạn phải có phiên bản mới hơn của Windows, như là Window98 hoặc Windows 2000.</p><p></p>