Chuyên mục lưu trữ: Học viết code

Học viết code html, css, java script, html từ cơ bản đến nâng cao

Kiến thức cơ bản css: inline vs block vs inline-block

CSS được tạo ra với mục đích định dạng kiểu trình bày cho html. Với những lý do đó các phần tử html được chia ra thành nhiều loại khác nhau trong CSS. Hai trong loại đó là các phần tử thuộc Inline (nội tuyến) và Block-level (cấp độ khối). Đây cũng là những kiến thức mà những nhà thiết kế web mới bắt đầu học cần nắm vững.

Block-level Elements – (Các phần tử cấp độ khối)

Các phần tử Block có những đặc tính mặc định như sau:

  • Nếu không có thông số xác định chiều rộng width, bề ngang của block sẽ tự động mở rộng cho đến giới hạn của phần tử bọc bên ngoài nó (parent container)
  • Có thể xác định thông số lề margins và vùng đệm padding
  • Nếu không có thông số xác định chiều cao height, block sẽ tự động mở rộng giới hạn bằng chiều cao các phần tử con (child element) của nó.
  • Khi đứng cạnh nhau, các block sẽ xếp chồng lên nhau.
  • Không thể sử dụng thuộc tính vertical-align

Như vậy, đối với phần tử thuộc block-level, bạn không cần phải thiết lập thông số width:100% , vì nó đây là thuộc tính mặc định. Tương tự, bạn cũng không cần dùng clear để các phần tử xuống hàng (xếp chồng lên nhau).

Xem ví dụ, các phần tử div xếp chồng lên nhau và có chiều ngang 100% khi đặt kế nhau, (chọn tab html để xem code html)

Một số phần tử html thuộc block-level: <p>, <div>, <form>, <header>, <nav>, <ul>, <li>, <h1>.

Inline elements – phần tử nội tuyến

Các phần tử Inline có những đặc tính mặc định như sau:

  • Luôn nằm trên một dòng chữ hay nội dung, không có thuộc tính mặc định clear
  • Sử dụng thuộc tính white-space như text trong CSS
  • Không áp dụng được thuộc tính margin-topmargin-bottom, nhưng vẫn áp dụng được margin-left , margin-right và đầy đủ thuộc tính padding
  • Không áp dụng được thuộc tính width and height
  • Nếu sử dụng thuộc tính float, các phần tử inline sẽ tự động trở thành block-level
  • Sử dụng thuộc vertical-align như text trong CSS

Hiểu một cách đơn giản nhất, các phần tử thuộc inline được CSS xem như các ký tự hoặc cụm chữ, do đó nó luôn nối tiếp trên một dòng nếu đặt cạnh nhau.

Xem ví dụ: Các phần tử được tạo bằng span, xếp trên cùng 1 dòng và có chiều rộng bằng với nội dung bên trong nó. (Chọn tab html để xem code html)

Một số phần tử thuộc inline: <a>, <span>, <b>, <em>, <i>, <cite>, <mark>, and <code>.

Inline-Block elements – phần tử nội tuyến cấp độ khối

Đối với CSS, trong HTML không có bất cứ phần tử nào mặc định thuộc loại Inline-block, cơ bản các phần tử inline có thể chuyển đổi thành block-level thông qua thuộc tính display:block và ngược lại display:inline, do đó bất cứ phần tử nào cũng có thể chuyển thành loại inline-block thông qua thuộc tính display:inline-block . Inline-block là một định dạng đặc biệt, nó thuộc inline nhưng mang một số đặc tính của block.

  • Luôn nằm trên một dòng chữ hay nội dung như inline
  • Khi xếp cạnh nhau trên một dòng, có khoảng trắng mặc định giữa các phần tử
  • Sử dụng thuộc tính white-space như text trong CSS
  • Có thể áp dụng  đầy đủ thuộc tính margin và padding như block-level
  • Có thể áp dụng  đầy đủ thuộc tính width and height như block-level
  • Sử dụng thuộc vertical-align như text trong CSS

Xem ví dụ: Các phần tử div (block-level) nhưng có thuộc tính display:inline-block vẫn có thể xếp cạnh nhau như phần tử inline và có các đặc tính inline như khoảng trắng giữa các phần tử, chiều ngang bằng nội dung bên trong nó tuy nhiên nó có thể áp dụng được thông số width,height,padding, margin như block-level

Tóm lại, tùy theo ý đồ sử dụng các phần tử trong web layout, bạn có thể chọn phương pháp thích hợp để định dạng các phần tử thuộc loại inline, block hay inline-block. Cớ bản về web layout còn các thuộc tính quan trong khác thường dược sử dụng như như display:table, display:inline-table, display:inline-flex … và float. Chúng ta sẽ thảo luận và so sánh các phương pháp này trong một bài viết khác để giúp bạn chọn lựa phương pháp tối ưu khi tạo web layout.

CSS Attribute Selectors: Các bộ chọn thuộc tính CSS

Bạn đã biết gì về CSS Attribute Selectors? Có tất cả bao nhiêu loại? Có gì mới trong các bộ chọn thuộc tính CSS3? Sử dụng chúng như thế nào? Chúng ta sẽ cùng tham khảo bài viết dưới dây để có các câu trả lời cho những vấn đề nêu trên.

HTML Attributes – Thuộc tính HTML

Trước khi bắt dầu tìm hiểu về khái niệm CSS Attribute Selector, chúng ta nên nhớ lại xem HTML attribute là gì. Rất tốt, nêu bạn đã quen với các thể loại này trước đây như class, id, style và href …. Còn rất nhiều thứ tương tự, bạn có thể tìm hiểu thêm ở trang W3.org để có danh sách đầy đủ.

CSS tạo định dạng cho các thẻ khá dễ dàng, nếu bạn muốn định dạng một id hay class, chúng ta sẽ viết như sau

#someid {color: black}
.someclass {color: black}

Viết như trên xem như tạm ổn, nhưng nếu chúng ta muốn định dạng một vài thuộc tính khác hơn thì phải làm thế nào? Đây là các attribute selector mà chúng ta sẽ tìm hiểu trong bài này.

Attributes Selector – Bộ chọn thuộc tính

Như chúng dã biết, attribute selectors (Các bộ chọn thuộc tính) có giải nghĩa đúng như những gì chúng được đặt tên, đó là cách để chọn và nhắm đến các thuộc tính xác định trong CSS. Điều này thật ra cũng dễ thôi, nó liên quan đến mọi thứ nằm trong hai dấu <> của thẻ mở HTML mà bạn sử dụng. Nào chúng ta cùng xem xét vài trường hợp code HTML cơ bản.

 <li><a href="http://thietke.website/">Tự học thiết kế website</a></li>
	<li><a href="http://www.vnexpress.net/">Báo tin tức VNExpress</a></li>
	<li><a href="http://hocthietke.org/">Website dạy thiết kế</a></li>

Ví dụ, chúng ta chỉ muốn chọn liên kết “Tự học thiết kế website”. Bạn có thể dùng pseudo selectors, ví dụ: a:first-child, Tuy nhiên, đôi khi chúng ta không thể chọn theo cách này thì còn có 1 cách khác, như là cách dùng attribute selector để nhắm đến href xác định. Trong trường hợp này, bạn chỉ muốn liên kết “Tự học thiết kế website” có màu xanh. Chúng ta sẽ viết đoạn CSS như sau:

 a[href='http://thietke.website/'] {color: blue;}

Kết quả trên trình duyệt:

CSS-Attribute-Selectors-sample-1

XEM VÍ DỤ

Repeating Attributes – Thuộc tính có tính chất lập lại

Một ví dụ khác chúng ta có một danh sách liên lạc, và muốn vài mục trong danh sách có định dạng khác biệt so với những mục còn lại . Sử dụng attribute, chúng ta có thể tạo ra sự khác biệt bởi hai mục “friend”“contact” bên dưới:

<ul>
    <li><a href="#" rel="friend">Larry</a></li>
    <li><a href="#" rel="contact">Curly</a></li>
    <li><a href="#" rel="contact">Moe</a></li>
    <li><a href="#" rel="contact">Curly Joe</a></li>
    <li><a href="#" rel="friend">Shemp</a></li>
</ul>

Lần này chúng ta sẽ dựa vào thuộc tính rel để tạo định dạng cho hai mục tiêu lựa chọn. Cách thức cũng giống như ở ví dụ 1, nhưng chúng ta có thể cùng lúc chọn được cùng lúc nhiều mục khác nhau.

li a[rel='friend'] {font-weight: bold;}
li a[rel='contact'] {font-weight: 200;}

Sử dụng code như ở trên chúng ta sẽ có kết quả như bên dưới, còn một cách khác có thể đạt kết quả như trên như là :nth-child , bộ chọn theo thứ tự . Tuy nhiên :nth-child đôi lúc sẽ cho kết quả sai nếu bạn viết không đúng cách khi danh sách này được thêm hoặc bớt đi. Điều tuyệt vời hơn nữa, là cách viết Repeating Attributes như trên ví dụ được cả các trình duyệt cũ hỗ trợ như IE version 7,8.

CSS-Attribute-Selectors-sample-2

XEM VÍ DỤ

Multiples Values – Thuộc tính có nhiều giá trị

Đôi khi, không phải lúc nào mọi chuyện cũng thuận lợi như hai trường hợp trên. Bạn sẽ gặp rắc rối nếu muốn chọn một thuộc tính có nhiều giá trị cùng lúc. Ví dụ:

<ul>
    <li><a href="#" rel="friend nofollow">Larry</a></li>
    <li><a href="#" rel="contact">Curly</a></li>
    <li><a href="#" rel="contact">Moe</a></li>
</ul>

Bạn sẽ nghĩ rằng muốn chọn mục đầu tiên “Larry”, chúng ta sẽ tiến hành như cách thức đã biết ở trên, tuy nhiên không phải như vậy. Nếu chỉ đơn giản sử dụng a[rel='friend'], thì bạn sẽ không thực hiện được điều đó. Tuy nhiên, chúng ta sẽ tiến hành như sau, theo cách xem như “friend” chỉ là một trong nhiều giá trị của thuộc tính đó.

li a[rel~='friend'] {font-weight: bold;}

Kết quả, từ “Larry” sẽ dược in đậm mà trước đó cách dùng a[rel='friend'] không thể thực hiện được.

CSS3 Attribute Selectors – Bộ chọn thuộc tính CSS3

CSS3 cung cấp cho chúng ta nhiều chức năng và công cụ mới tuyệt vời. Chẵng có gì ngạc nhiên khi một số Attribute Selector mới được thêm vào CSS3 để giúp chúng ta thêm nhiều cách xác định mục tiêu chọn lựa. Hãy cũng chúng tôi khám phá một vài món thú vị của CSS3 mà bạn sẽ thích thú.

Similarly Named Attributes – Bộ chọn thuộc tính có tên gần giống nhau

Đây là thứ tốt nhất mà CSS3 mang lại. Hãy hình dung, bạn có đoạn code HTML bên dưới và chỉ muốn nhắm đến các id có tên “upperSection”“lowerSection”, bạn sẽ làm điều đó như thể nào?

<div id="upperSection">
    <p>Lorem ipsum dolor sit amet...</p>
</div>
 
<div id="somethingElse">
    <p>Lorem ipsum dolor sit amet...</p>
</div>
 
<div id="lowerSection">
    <p>Lorem ipsum dolor sit amet...</p>
</div>
 
<div id="footer">
    <p>Lorem ipsum dolor sit amet...</p>
</div>

Câu trả lời là bộ chọn mới “Arbitrary Substring Attribute Value Selector” hay còn gọi là bộ chọn sử dụng ký tự * để đại diện cho những cụm chữ giống nhau. Như ví dụ, chúng ta thấy hai id mà bạn muốn chọn có tên là “upperSection”“lowerSection” có cùng một cụm chữ giống nhau đó là “Section”. Dựa vào điều này ta có thể chọn ra hai mục mong muốn trong danh sách bằng cách viết như sau:

div[id*='Section'] {color: red;}

Thật tuyệt vời phải không các bạn, bằng cách này bạn có thể gán định dạng cho nhiều ID bằng cách đặt cho chúng một cái tên có một cụm từ nào đó giống nhau. Điều này cũng mở ra nhiều khả năng tạo các bộ chọn phức tạp chỉ với ít dòng code dễ dàng hơn.

Beginning and Ending – Bộ chọn Bắt đầu và Kết thúc

Nếu bộ chọn Arbitrary Substring Attribute Value Selector chỉ nhắm đến các giá trị giống nhau ở một cụm chữ và nằm bất kỳ vị trí nào, thì bộ chọn Bắt đầu và Kết thúc sẽ được áp dụng trong các trường hợp khó hơn là chỉ nhắm đến những từ đứng trước tiên hoặc sau cùng trong chuỗi giá trị thuộc tính. Ví dụ:

<ul>
    <li><a href="#" title="stooge one">Larry</a></li>
    <li><a href="#" title="the second stooge">Curly</a></li>
    <li><a href="#" title="stooge three">Moe</a></li>
    <li><a href="#" title="impostor">Curly-Joe</a></li>
</ul>

Hãy hình dung, bạn muốn chọn các mục có giá trị “stooge”, nhưng hai mục “Larry”“Moe” có màu đỏ và mục “Curly” có màu vàng. Để làm điều này bạn phải dùng cách viết [title^=’stooge’] để nhắm đến các mục có chứa giá trị “stooge” là từ ở vị trí đầu tiên và [title$=’stooge’] để xác định các mục có chứa giá trị “stooge”, là từ ở vị trí cuối cùng trong chuỗi giá trị.

li a[title^='stooge'] {color: red} /*Beginning - Chọn các liên kết có giá trị từ bắt đầu = stooge*/
li a[title$='stooge'] {color: yellow} /*Ending - - Chọn các liên kết có giá trị từ cuối cùng = stooge*/

XEM VÍ DỤ

Chaining Attribute Selectors – Bộ chọn theo chuỗi

Nào bây giờ chúng ta sẽ đặt ra mục tiêu phức tạp hơn. Ví dụ như là một loạt các thuộc tính có chuỗi giá trị như đoạn code HTML dưới đây:

<ul>
    <li><a href="#" title="stooge one">Larry</a></li>
    <li><a href="#" title="the second stooge">Curly</a></li>
    <li><a href="#" title="stooge three">Moe</a></li>
    <li><a href="#" title="the impostor">Curly-Joe</a></li>
</ul>

Mục tiêu đặt ra là chọn tất cả các mục liên kết có giá trị title chứa từ “stooge”, nhưng chỉ với những thuộc tính có giá trị chứa từ “the” ở vị trí đầu tiên. Có lẽ bạn dang nghĩ đến cách làm này a[title^='the'], tuy nhiên đừng quên ở mục cuối cùng, liên kết đó cũng có giá trị chứa từ “the” ở vị trí đầu tiên nhưng không chứa từ “stooge”! Do đó, cách viết bộ chọn thuộc tính đúng như sau:

li a[title*='stooge'][title^='the'] {color: red;}

XEM VÍ DỤ

Đơn giản không các bạn? Tất cả những gì chúng ta cần là đặt hai bộ chọn có điều kiện khác nhau trên cùng 1 dòng. Điều quan trọng bạn cần chú ý là sự kết hợp này không phải là điều kiện EITHER/OR (chỉ cần đáp ứng 1 trong 2 điều kiện) mà là BOTH/AND (buộc đáp ứng đủ cả hai điều kiện). Nếu mục nào đáp ứng cả hai điều kiện trên đều là mục tiêu của được lựa chọn.

Tìm hiểu thêm

Nếu bắt đầu thích thú với những thủ thuật CSS, chúng tôi sẽ viết thêm những bài có chủ đề tương tự trong tương lai. Còn nhiều điều thú vị sẽ khiến bạn ngạc nhiên. Ví dụ như bộ chọn Adjacent Sibling Combinators, nhắm vào các đối tượng có quan hệ anh/em liền kề trong cây phân nhánh DOM và General Sibling Combinators , nhắm vào các đối tượng có quan hệ anh/em ở vị trí bất kỳ. Chúng ta thử lướt qua trường hợp sau đây:

<div id="combinators">
    <p>Not this one.</p>    
    <h1>Gibberish</h1>
    <p>Pick me!</p>
    <p>Lorem ipsum dolor sit amet...</p>
    <p>Lorem ipsum dolor sit amet...</p>
    <p>Lorem ipsum dolor sit amet...</p>
</div>

Giả sử chúng ta chỉ muốn chọn đoạn văn bản “Pick me!” , bộ chọn Adjacent Sibling Combinators sẽ giúp ta làm điều đó. Nó sẽ chọn bất kỳ đoạn văn bản p nào trên trang mà có thẻ h1 đứng liền kề trên nó, có nghĩa là đoạn văn bản p đầu tiên ngay sau tiêu đề h1.

h1 + p {color: orange;}

XEM VÍ DỤ

Tương tự, General Sibling Combinator giúp chúng ta nhắm đến tất cả các thẻ p đứng sau tiêu đề h1, do vậy đoạn văn bản đầu tiên trên tiêu đề sẽ không được chọn còn lại tất cả đều được áp dụng.

h1 ~ p {color: orange;

XEM VÍ DỤ

Đây chỉ là vài món khai vị hấp dẫn của CSS3, chúng ta sẽ còn tìm hiểu thêm về chúng đầy đủ hơn ở một bài viết khác.

Nguồn: CSS Attribute Selectors: How and Why You Should Be Using Them
by Joshua Johnson

Cẩm nang thiết kế website: Cấu trúc CSS – P2

Xem bài 1
Sự khác biệt giữa thuộc tính (property) và bộ chọn (selector) là gì? Làm thế nào để khai báo sự khác biệt cho một block và cách thức khai báo CSS như thế nào? Làm thế nào để biết sự khác nhau giữ pseudo class (lớp) và pseudo element  (phần tử)?

Loạt bài này sẽ mang đến một bài giời thiệu cơ bản về thuật ngữ mà bất cứ nhà thiết kế web nào cũng nên dưa vào vốn kiến thức của mình. Nó chắc chắn sẽ không phải là một bản danh sách đầy đủ nhưng đó sẽ là các thuật ngữ thường gặp và gây khó khăn cho những nhà thiết kế web khi mới bắt đầu. Ở bài trước bạn đã tìm hiểu về cấu trúc HTML và bây giờ chúng ta sẽ đào sâu hơn nữa về cấu trúc của CSS.

CSS

selectorCSS

Cascading Style Sheets (CSS) cung cấp kiểu dáng và định dạng cho toàn bộ nội dung trên trang HTML. Cũng như bài trước, chúng ta sẽ cắt nghĩa CSS theo từng phần Cascading và Style Sheet.

Chúng ta sẽ bắt đầu từ cuối trước – style sheet. CSS là một ngôn ngữ kê khai kiểu dáng trình bày (style sheet) trái ngược với ngôn ngữ đánh dấu (markup) như HTML hoặc ngôn ngữ dạng kịch bản như JavaScript. Nói một cách dễ hiểu CSS là ngôn ngữ được sử dụng chủ yếu để định dạng văn bản. CSS giống như phần kem trang trí trên chiếc bánh HTML, điều này có nghĩa là nếu không có CSS, HTML sẽ giống như một chiếc bánh nướng thô kệch và chán ngắt.

Phần giải nghĩa khó hơn là cascading (tầng lớp) – Cách thức style sheet hoạt động là đưa ra một quy định áp đặt tại một vị trí từ trên xuống dưới theo tầng lớp, ảnh hưởng đến các phần khác nhau của văn bản, cho dù bạn có muốn hay không.

Cascade thật ra có toàn bộ các quy định mà nó luôn tuân thủ trong việc quyết định các kiểu dáng được áp dụng trong văn bản. Cascade chia các quy định theo từng mức ưu tiên khác nhau. Khi cùng lúc có nhiều quy định được áp dụng lên một phần tử, quy dịnh nào có mức ưu tiên cao nhất sẽ được áp dụng và bỏ qua các quy định khác.

CSS3

CSS3 là phiên bản thứ 3 của CSS. Ở CSS2  đã có khối lượng thông số đồ sộ, CSS3 không những kế thừa mà còn phân chia mọi thứ thành từng đoạn được gọi là module. Một vài ví dụ, các module bao gồm : CSS Color, Media Queries, CSS Animations, Flexible Box Layout

Mỗi module hoạt động như một đơn vị, một vài module được phát triển đến trạng thái hoàn chỉnh so với các module còn lại. Ví dụ Selectors Level 3 module đã đạt đến trạng thái “Khuyên dùng” – điều này có nghĩa là nó đã sẳn sàng để được sử dụng, trong khi đó CSS Flexible Box Layout module vẫn dang còn trong trạng thái “dự thảo thử nghiệm” và đang được chỉnh sửa.

Điều thú vị là các module dù đã hay chưa hoàn chỉnh, vẫn được nhiều nhà phát triển web áp dụng, dù dôi khi rất ít trình duyệt hỗ trợ chúng. Vì vậy chúng ta cần nên cẩn trọng khi áp dụng những tính năng mới của CSS3, phải chắc kiểm tra với sự tương thích các trình duyệt.

Phân tích cấu trúc CSS

Một trong những khái niệm cốt lõi mà bạn sẽ cần phải hiểu khi làm việc với CSS là tên từng bộ phận riêng lẻ của cấu trúc CSS. Dành thời gian tìm hiểu để làm chủ ngôn ngữ này sẽ giúp cho bạn sự hiểu biết đáng kể trong các bài hướng dẫn, sách và các nguồn tài liệu khi bạn đang tự học CSS. Ví dụ, khi nghe đến “property” (thuộc tính), bạn phải nghĩ đến ngay được là chủ đề dang thảo luận là gì.

Để bắt đầu, chúng ta cùng tìm hiểu bảng cấu trúc cơ bản của 1 dòng CSS. Như bạn đã thấy, có 3 bộ phận khác biệt: đó là selector (đối tượng được chọn hay bộ chọn), property (thuộc tính) và value (giá trị).

vocabcss-1

Selector (bộ chọn)

Phần đầu tiên mà chúng ta sẽ tìm hiểu là bộ chọn – selector. Như tên gọi của nó, đây là cách chọn hay xác định một đối tượng nào đó mà bạn muốn áp dụng định dạng, CSS sử dụng các phần đơn giản được tham chiếu đến DOM (xem lại bài 1) và áp dụng định dạng lên đối tượng được xác định lựa chọn. Như hình minh họa, đoạn mã trên bộ chọn nhắm vào các đối tượng (selector) là các đoạn văn bản (paragraph) và thiết lập giá trị (value) có thuộc tính (property) là màu đen cho chúng.

Đôi khi các selector khá đơn giản như ví dụ trên, và có lúc chúng khá phức tạp. Chúng ta sẽ xem xét thêm selector phức tạp ở cuối bài

Property (thuộc tính)

Thuộc tính là diện mạo của đối tượng được chọn dể thay đổi. Mỗi phần tử (element) HTML là một đối tượng phức tạp có thể liên kết với một loạt các thuộc tính. Ví dụ, như hình minh họa, đối tượng được chọn là các phần tử văn bản <p> chứa nhưng thông số mặc định về kích cỡ chữ (font-size), màu sắc (color), khoảng cách giữa các dòng (line-height) và nhiều thứ khác. Những thông số này có thể bị ghi đè bằng CSS để thay thế giá trị mặc định.

Một số đặc tính chỉ ảnh hưởng đến mặt thẩm mỹ không đáng kể, nhưng một số khác có thể tác động lớn đến mặt bố cục trang web. Những thuộc tính thậm chí còn gây ra phiền phức hơn bởi mội trình duyệt thường thiết lập các giá trị mặc định của riêng mình không theo một chuẩn nào cả. Những dự án như Normallize.css có thể giúp bạn tiết kiệm hàng tá giờ làm việc để thống nhất chuẩn thông số và loại bộ các giá trị mặc định của từng trình duyệt tạo nên.

Value (giá trị)

Sau khi bạn nhắm đến đối tượng bạn cần thay đổi  (selector) và phần nào của đối tượng bạn muốn thay đổi, nào bây giờ bạn cần xác định thứ gì cần thay đổi! Mục giá trị cho phép bạn xác định thiết lập mới do bạn chỉ định thay thế thông số mặc định do trình duyệt đặt ra. Thí dụ, trình duyệt thường mặc định các dòng văn bản có màu đen, nhưng bạn nghĩ màu xám sẽ tốt hơn, do dó bạn sẽ viết đoạn mã trong đo màu sắc sẽ có giá trị là #4b4b4b

Thuật ngữ “giá trị” có thể gây chút bối rối bởi vì bạn có thể ngay lập tức nghĩ đến các con số. Thực tế nhiều giá trị CSS là những con số. Các giá trị có thể được thể hiện bằng pixel (font-size: 10px), tỷ lệ phần trăm (chiều rộng: 33,33%), ems (line-height: 1em), vv … nhưng chúng cũng có thể được thể hiện bằng cách khác. Hãy xem xét các ví dụ sau:

 a {
 display: block;
 background-image: url('picta.jpg');
 color: #fff;
 text-decoration: none;
}

Như các bạn đã thấy, đoạn CSS trên có nhiều giá trị, nhưng chẳng có con số nào. Vậy bạn nên nhớ rằng “value” chỉ là một thuật ngữ khá chung chung và có thể có nhiều kiểu giá trị khác nhau.

Các loại Selectors

Chắc khi đọc đến dây, bạn đã có những khái niệm thế nào là selector, thế nhưng bạn có biết có rất nhiều loại selector khác nhau? Đây là một trong số đó bạn nên biết

Các loại selector

Đây là các loại selector cơ bản nhất. Theo selectors level 3 module, “một loại selector là đại diện một thể loại của phần tử HTML trong cây văn bản (document tree)”. Để dễ hiểu hơn, bạn hãy xem ví dụ bên dưới, đây là các loại selector nhắm đến đối tượng là các phần tử HTML đơn giản

h1 {...}
p {...}

Class Selector và ID Selector

Selector phổ biến thứ hai mà bạn thường gặp đó là Class Selectors (bộ chọn theo lớp) và ID Selectors (bô chọn theo ID). Như trong bài 1 bạn đã học, sự khác biệt lớn nhất giữa 2 loại này đó chính là Class Selector có thể được tái sử dụng nhiều lần còn ID Selector chỉ được sử dụng 1 lần duy nhất trên cùng 1 trang web.

Bạn có thể áp dụng class selector lên các đối tượng trên trang HTML với cách viết bắt đầu bằng 1 dấu chấm (.), Tương tự bạn có áp dụng ID selector lên một đối tượng bằng cách viết mã bắt đầu bằng biểu tượng # (hash). Xem ví dụ.

.someClass {...} /* class selector */
#someID {...} /* ID selector */

Attribute Selectors

Class và ID thật chất là thuộc tính của HTML, chúng phổ biến đến mức trở thành các bộ chọn selector đặc biệt, nhưng còn có nhiều thuộc tính khác ví dụ như

<a href="http://designshack.net/">Design Shack</a> 
<a href="http://apple.com/">Apple</a>

Ở đây chúng ta có một vài phần tử <a> chứa các thuộc tính href. Bạn thừ hiểu rằng chúng ta có thể sử dụng CSS để nhắm mục tiêu là tất cả các thẻ <a> cùng một lúc, nhưng bạn liệu có biết chúng ta còn có thể nhắm mục tiêu cụ thể dựa vào giá trị href cụ thể?

 a[href='http://designshack.net/'] {color: #fff;}

Như ví dụ trên, chúng ta sử dụng một bộ chọn thuộc tính (attribute selector ) để chỉ nhắm mục tiêu href với giá trị có ‘http://designshack.net/’ và thay đổi màu sắc của nó thành màu trắng. Đoạn mã này hoàn toàn bỏ qua các thẻ <a> khác trong ví dụ trên.  Attribute selectors sinh ra một số các bộ chọn CSS phức tạp nhất mà bạn từng thấy.

 li a[class*='stooge'][title^='the'] {color: red;}

May mắn thay, chúng tôi có một bài viết tuyệt vời hướng dẫn tất cả các bạn về bộ chọn thuộc tính kèm giải thích chi tiết tại đây

Descendant, Children and Sibling Selectors

Nếu bạn đã học về DOM ở bài một bạn sẽ hiểu Descendant, Children và Sibling Selectors chọn các đối tượng theo mối cấp độ quan hệ của chúng trên cây phả hệ (family tree). Ví dụ cách viết đoạn mã css tổ hợp thừa hưởng ( descendant combinator ) dưới đây nhắm đến các đối tượng ở cấp độ hậu duệ (thừa hưởng). Ví dụ:

header p {...}

Đoạn mã trên áp dụng cho các đối tượng thừa hưởng từ phần tử header. Bạn nên chú ý các đối tượng thừa hưởng (descentdant) không giống với các đối tượng con (children). Cũng giống gia đình bạn, tất cả các phần tử con của header chắc chắn được gọi là các đối tượng hậu duệ nhưng không hẵn tất cả các hậu duệ là đối tượng con của header. Đoạn mã trên nhắm đến các đối tượng là các đoạn văn bản nằm trong thẻ header

Giả sử chúng ta có 1 đoạn mã HTML như sau:

<header>
<p>Child and descendant of header</p>
<p>Child and descendant of header</p>
<div> <p>Descendant of header, not a child of header.</p> </div> 
</header>

Nào bây giờ bạn muốn chọn một số đối tượng con nhưng không muốn chọn tất cả các đối tượng hậu duệ của header. Để thực hiện điều này bạn phải viết tổ hợp con (children combinator). Ở trong ví dụ trên, chỉ có 2 đối tượng con là 2 đoạn văn bản p đầu tiên được chọn.

header > p

Tiếp theo, tổ hợp anh em (sibling combinator)

/* Tổ hợp anh em liền kề - Adjacent sibling combinator */
h1 + p {...}
 
/* Tổ hợp anh em tổng thể - General sibling combinator */
h1 ~ p {...}

Selector đầu tiên ở ví dụ trên sẽ nhắm đến bất kỳ đoạn văn bản nào nằm liền kề thẻ h1 (quan hệ anh em liền kề – adjacent sibling)

XEM VÍ DỤ

Trong khi dó selector thứ hai nhắm đến tất cả các đoạn văn bản p trong thẻ H1 bất chấp nó có nằm kề hay không.

XEM VÍ DỤ

Pseudo Classes và Pseudo Elements

Đây là một loại selector đặc biệt. Để dễ hình dung bạn có thể xem hình minh họa bên dưới

css-beforeafter-6

Ở đây bạn có thể nhận ra một vài pseudo classes quen thuộc như :hover (selector cho đối tượng khi được con trỏ đặt lên) và một số pseudo elements lạ lẫm như :before:before. Chúng là gì?

Rất đơn giản, bạn chỉ cần nhờ rằng pseudo classes áp dụng cho tất cả các phần tử hoặc các trạng thái của phần tử trong khi đó pseudo elements chỉ nhắm đến áp dụng cho một phần của phần tử. Ví dụ, pseudo classes :hover sẽ ảnh hưởng toàn bộ các thẻ a, p, div … nhưng dối với pseudo elements như :first-line sẽ không ảnh hưởng toàn bộ mà chỉ áp dụng cho đoạn dòng dầu tiên đoạn văn bản.

Bài viết này chưa toàn diện toàn diện nhưng nó cũng đã tóm lược cấu trúc cơ bản của CSS. Nếu bạn gặp khó khăn trong một số thuật ngữ khác của CSS, bạn có thể tìm hiểu thêm ở một bài viết khác chi tiết hơn bằng công cụ tìm kiếm trên trang.

Web Design Vocabulary Refresh by Joshua Johnson – designshack.net

Divitis – Hội chứng sử dụng Divs cho tất cả mọi thứ trong CSS Layouts

Tôi thừa nhận mình là một trong những mắc hội chứng này khi thiết kế trang web với CSS, Div là thứ dễ quen tay để đưa vào tất cả mọi thứ khi làm layout. Thậm chí đôi khi mỗi đoạn text cũng bị bao quanh bởi thẻ div đại loại như <div class=”para”>…</div> thật là thái quá, nhưng hoàn dễ hiểu. Khi bắt đầu học CSS, mối bận tâm lớn nhất của bạn đó là làm sao để dàn trang web như ý muốn chứ không phải vấn đề là tạo các trang web có cấu trúc đánh dấu ngữ nghĩa (semantic markup). Cạnh đó hầu hết các bài mẫu đều sử dụng thẻ div để trình bày cách dàn trang bằng CSS. Vậy thì điều đó có gì khác biệt.

Hãy bắt đầu nghĩa về cấu trúc đánh dấu ngữ nghĩa (semantic markup)

Khi bạn khởi tạo thiết kế một trang web, một công việc mà sự tạo kiểu tách rời với nội dung, bạn cũng nên đánh dấu (markup) nội dung trang web theo cách xác định nghĩa chính xác những gì mà nội dung nó hàm chứa. Để thực hiện cách làm này, bạn có thể nên nghĩ đến cấu trúc của trang và những phần tử (element) được đặt trên trang hơn là những thứ trông ở bề ngoài, bởi vì với CSS bạn thể tạo kiểu dáng tùy ý ở các thẻ. Để dễ hiểu bạn tham khảo ví dụ  các thành phần cơ bản thường thấy ở một trang web bao gồm dưới đây:

  • Logo
  • Dòng dẫn đến trang hiện hữu (breadcrum)
  • Thanh/hộp tìm kiếm (search bar/box)
  • Bản điều hướng bên trái (Navigation on the left)
  • Tiêu đề, phụ đề và thông tin tác giả ( title, sub-title, and author information)
  • Nội dung thân bài (body content)

Thông thường chúng ta thường thêm các markup với div và gán vào cho chúng các id. Về mặt ngữ nghĩa, không phải tất cả chúng là một phần của nội dung. Thực tế, tùy trường hợp mỗi thành phần đều có vai trò cụ thể trên trang. (nếu bạn đang sử dụng html5 bạn có thể tham khảo một số thẻ mới như nav, footer, aside, article ..vv)

Logo

Nếu bạn nghĩ đây là một phần quan trọng của trang bạn nên dùng thẻ <h1> bao ngoài hình ảnh. Nếu đơn giản chỉ sử dụng một hình ảnh bạn có thể sử dụng thẻ <img> và đặt một id để chỉ định đó là một logo

Dòng điều hướng dẫn đến trang hiện hữu (breadcrumb)

Có thể đây không phải là một phần quan trọng của trang nhưng vẫn thuộc phần tiêu đề, bạn có thể sử dụng thẻ <h5> hoặc <h6> để đánh dấu cho trình duyệt biết đây là một phần tiêu đề, nhưng đó không phải là phần quan trọng nhất. NÊN NHỚ rằng khi sử dụng CSS chúng ta có thể tạo kiểu bề ngoài của chúng theo cách ta muốn, đừng quá đắn đo nếu sợ rằng thẻ <h1> thường mặc định có chữ to kệch và xấu xí – hãy nghĩ theo cách là bạn dùng thẻ <h5> để chỉ rằng đây là một tiêu đề có tầm quan trọng thấp hơn chứ không phải vì vẻ bề ngoài của chúng.

Thanh/hộp tìm kiếm (search bar/box)

Có thể dùng <h4> vì nó nằm trên thanh tiêu đề nhưng tầm quan trọng thấp hơn breadcrumb.

Thanh/Bảng điều hướng – navigation

Hầu hết đây là bảng danh sách các liên kết, vì vậy bạn nên sử dụng các đánh dấu danh sách như <ul>, những phần tiêu đề chính của danh sách bạn có thể dùng thẻ header như <li><h4>tiêu đề liên kết</h4></li> và gán các id để xác định từng loại.

Tiêu đề, phụ đề và thông tin tác giả ( title, sub-title, and author information)

Đây cũng rõ ràng là một phần của tiêu đề, bạn có thể sử dụng hình ảnh trong phần thông tin tác giả, nhưng nên hạn chế nếu không cần thiết.

Nội dung thân bài (body content)

Ở phần này bạn có thể dùng các thẻ div nhưng nên sử dụng thẻ header <h1>,<h2>,<h3> … cho các tiêu đề và thẻ <p> cho các đoạn văn bản.

Kết luận

Bài viết này không phải khuyên bạn không dùng <div> mà nên dùng chúng đúng mục đích, <div> có nghĩa là division: sự phân chia, do vậy chúng ta chỉ sử dụng chúng khi để phân chia hợp lý các nội dung khi không thể sử dụng các thẻ khác cùng mục đích. Sử dụng đánh dấu ngữ cảnh không những giúp trang web của bạn có cấu trúc hợp lý  mà còn giúp tăng khả năng thu thập nội dung từ các cổ máy tìm kiếm, cải thiện khả năng tìm kiếm đúng nội dung và tăng thứ hạng trong các kết quả tìm kiếm.

Xem ví dụ một trang web HTML5 mẫu được thiết kế có cấu trúc đánh dấu ngữ cảnh:

Layout
html5pagelayout

HTML5 Code

<body>
	<div id="pageContainer">
		<header id="pageHeader"></header>
	 	<div id="contentContainer" class="clearfix">
			<nav id="pageNav"></nav>

  		<section id="pageSection">
				<header class="sectionHeader"></header>
				<article class="sectionArticle"></article>
				<footer class="sectionFooter"></footer>
			</section>

 			<aside id="pageAside"></aside>
		</div>
		<footer id="pageFooter"></footer>
	</div>
</body>

CSS

/*html5 semantics tags */
article, aside, figure, footer, header, hgroup, menu, nav, section 
{ display: block; }

/* light css reset */
* { margin : 0; padding : 0; }
h2, h3, h4, h5, p, ul, ol  { margin : 0 20px; padding : .5em 0; }
img { border: 0px;}

/* =page level container */
#pageContainer {
    margin: 0px auto 0px auto;
	width: 960px;
}

#pageHeader {
    margin:0px auto 0px auto;
    width:960px;
    height:82px;
    position:relative;
}

#contentContainer {
    margin: 0px;
    padding-top: 10px;
    padding-bottom: 20px;
    min-height: 500px;
}

#pageFooter {
    margin: 0px auto;
    padding-bottom: 20px;
	width: 960px;
	position: relative;
}

/* Clear Floated Elements */
.clearfix:before, .clearfix:after {content: "\0020"; 
display: block; height: 0; visibility: hidden;}
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

Nguồn: webdesign.about.com & codeproject.com

Tìm hiểu về Float, Block, Inline-Block trong CSS

Ngày nay, chúng ta thường sử dụng phần tử float (trôi nổi) khi tạo layout khá phổ biến kể từ cách layout bằng phần tử table đã đi vào quá khứ. Đó là một giải pháp lạ lùng và thường gây không ít rắc rối cho chúng ta, nhưng nếu bạn thật sự nắm rõ về nó, đó là một cách làm hiệu quả.

Một phương pháp thường được thay thế cho float đó là dùng inline-block cùng các thiết lập các giá trị display cho nó. Chính xác là phải làm thế nào? Làm thế nào để nó hoạt động giống float? Sự khác nhau? Hãy cũng tôi đào sâu hơn và khám phá các phần tử này.

Tìm hiểu thuộc tính display

Trình duyệt web biên dịch các thành phần khác nhau theo nhiều các khác nhau. Một số phần tử là cấp độ khối (block-level), nghĩa là mặc định chúng có thuộc tính displayblock (khối). Những phần tử cấp độ khối có thể được xác định chiều ngang và chiều cao và sẽ tự động thêm một dòng (hàng) mới trên trang tài liệu nếu được thêm vào.

Một ví dụ cho phần tử khối đó là đoạn văn bản (paragraph). Nếu bạn có hai đoạn văn bản đặt kế nhau, chúng sẽ xếp chồng lên nhau chứ không phải đứng cạnh nhau. Bạn có thể tự do thiết lập kích thước cho các đoạn văn bản và xem nó như những viên gạch xây dựng để sắp xếp hình thù xếp theo ý muốn.

inlineBlock-1

Một số phần tử khác có giá trị display được thiết lập nội tuyến (inline) mặc định. Điều này có nghĩa là chúng không thể xác định được chiều cao và chiều ngang và cũng không tạo thêm dòng (hàng) trong layout (vì thế chúng mới có tên là inline – nội tuyến). Những phần tử inline thường có biên chế trong một đoạn văn bản hoặc hoặc các phần tử cấp độ khối (block-level) khác như strong, em , anchor

Đây là những gì sẽ xảy ra đối với các phần tử nội tuyến (inline) khi xếp chúng cạnh nhau. Ví dụ như ta có một số phần tử anchor (thẻ a) trong trang HTML, không giống như các đoạn văn bản ở trên, chúng sẽ xếp chồng lên nhau, ở đây các phần tử được tạo ra sẽ xếp cạnh nhau. Chiều cao và rộng sẽ được quyết định bởi nội dung bên trong nó và không thể thay đổi như các phần tử cấp độ khối (block-level)

inlineBlock-2

Trên đây là một vài giá trị mặc định của display chắc hẵn các bạn cũng đã quen thuộc. Tương tự ở phần head giá trị display luôn mặc định là none.

Thiết lập giá trị display  riêng cho bạn

Một trong những tính năng thú vị của CSS chính là khả năng thay đổi cách hiển thị (display ) của các phần tử. Mặc dù mỗi phần tử được gán cho một giá trị display mặc định, nhưng chúng ta vẫn buộc chúng hiển thị theo ý muốn của mình.

Vi dụ, chúng ta có thể dể dàng buộc các thẻ anchor có giá trị mặc định là nội tuyến (inline) ở ví dụ 2 để bắt chúng có những tính chất như các đoạn văn bản (pagragraph) có cấp độ khối (block-level) như ở ví dụ 1. Để thực hiện điều này, chúng ta sẽ thiết lập thuộc tính block trong CSS.

Bây giờ các thẻ anchor có tính chất giống như các phần tử cấp độ khối (block-level), chúng sẽ tạo thêm dòng mới và có thể xác định chiều cao và chiều ngang.

inlineBlock-3

Như bạn cũng hình dung ra, sẽ khó hơn nếu chúng ta làm ngược lại, buộc phần tử có giá trị cấp độ khối (block-level) có tính chất như của phần tử nội tuyến (inline). Thông thường bạn sẽ nghĩ ngay đến cách thiết lập display: inline để buộc hai đoạn văn bản (paragraph) xếp cạnh nhau, nhưng khi thực hiện, kết quả là cả hai nối lại với nhau thành một đoạn văn bản (paragraph)

inlineBlock-4

Vào lúc này, chúng ta đã mất hết khả năng thiết lập chiều ngang và chiều cao (tính chất của inline), do đó hai đoạn văn bản (paragraph) sát nhập lại với nhau không như ý muốn.

Phần tử trôi nổi – Floating Elements

Như ví dụ ở trên, chúng ta muốn hai đoạn văn bản (paragraph) vẫn giữ tách biệt nhưng phải hiển thị xếp cạnh nhau theo cột chứ không phải xếp chồng lên nhau. Câu trả lời đa số cho trường hợp này đó là chuyển sang sử dụng float. Chúng ta có thiết lập float:left để các đoạn văn bản (paragraph) vẫn duy trì tính năng của một phần tử cấp độ khối (block-level) đồng thời hiển thị theo từng cột nội dung như ý muốn.

inlineBlock-5
Phần tử cha (container hay parent) chứa các phần con có tính năng float sẽ bị xem như rỗng.

Float có nhiều tính năng phải lưu ý. Ví dụ, những phần tử float sẽ khiến cho phần tử chứa nó (container element) bị co lại (colapsed – rỗng nội dung và gây vỡ layout), kèm theo đó là vô số những rắc rối khác nếu bạn áp dụng màu nền (backgound color) và đường biên (border) cho phần tử chứa nó (container element). Để làm đúng cách, bạn phải sử dụng vài mánh khóe. Chúng ta sẽ xóa tính năng float trên các phần tử mới (ngày nay thường áp dụng phần tử lớp giả – pseudo-element) ở cuối phần tử chứa nó (container element) hoặc sử dụng overflow:auto ở phần tử cha mẹ parent của nó. Cả hai cách đều sửa được rắc rối cho phần tử chứa float (container element), nếu bạn biết cách làm thế nào để sử dụng đúng cách, bạn sẽ có thể xây dựng một layout như ý mà không gặp quá nhiều phiền toái.

display: inline-block

Có vô số giá trị cho thuộc tính display như chúng ta đã biết ở trên, một số thật sự hữu dụng, một số khác, tôi cá là bạn chưa bao giờ đụng đến. Cuộc thảo luận của chúng ta đã đi đến một trong những giá trị hữu dụng nhất của display đó là inline-block (khối nội tuyến)

Hãy xem chuyện gì sẽ xảy ra nếu chúng ta lấy hai đoạn văn bản ở ví dụ trên và gán giá trị displayinline-block

inlineBlock-6

Trông chúng giống float phải không nào? OK, vậy thì chuyện gì sẽ xảy ra với phần tử chứa nó (container hay parent) ? Không sao cả! Mọi thứ đều hoạt động như ý muốn của chúng ta.

inlineBlock-7

Những gì xảy ra ở đây đó là chúng ta khai báo cho trình duyệt hiển thị các đoạn văn bản nội tuyến (paragraph inline) nhưng cho phép chúng có thuộc tính của cấp độ khối (block-level). Có nghĩa là chúng ta có thể xác định chiều cao và chiều ngang tùy ý và vẫn có hai phần tử tách biệt, nhưng còn giữ cho chúng xếp cạnh nhau thành cột. Thật tuyệt vời!

Vấn đề so hàng (alignment)

Nhìn bề ngoài, có vẻ như inline-block là vị cứu tinh mà chúng ta chờ đợi. Chẳng ai muốn phiền toái phải dùng thủ thuật clearfix nếu áp dụng float. Phải chăng đây là phương pháp thay thế float hữu hiệu? Không hẵn như vậy, inline-block cũng có những vấn đề gây đau đầu không kém.

Điều đầu tiên, những phần tử floatinline-block sẽ trông khác nhau nếu bạn mỗi phần tử có chiều cao khác nhau. Ví dụ, đây là những gì bạn sẽ thấy nếu áp dung float:left cho loạt loạt văn bản (paragraph)

inlineBlock-8

Còn đây là những gì sẽ xảy ra nếu bạn áp dụng inline-block tên cùng các đoạn văn bản (paragraph). Bạn có nhận thấy rằng các đoạn văn bản so hàng theo đáy (bottom) với nhau thay vì so hàng theo đỉnh (top) như ở trên.

inlineBlock-12

May mắn đây không phải là vấn đề quá khó khăn, chúng ta có thể giải quyết bằng cách thiết lập thuộc tính so hàng theo chiều đứng (vertical-align) là đỉnh (top)

inlineBlock-11

Vấn đề khoảng trắng

Một vấn đề quan trong khác mà giữa inline-blockfloat có sự khác biệt. Đây cũng là vấn đề chung thường thấy của HTML và CSS đó là khoảng trắng trong thiết kế web layout. Hãy xem ví dụ sau đây:

inlineBlock-13

Chúng ta có thể thấy rằng, đối với một nhóm list-items khi được gán float, chúng xếp hàng sát cạnh nhau như chúng ta trông đợi, điều này cho phép chúng ta có thể thiết lập các khoảng hở giữa từng item chính xác mà không phát sinh thêm khoảng trắng dư thừa nào. Tuy nhiên, nếu thực hiện tương tự với cách dùng inline-block, có một khoảng hở mặc định không cách nào loại trừ ngay cả khi bạn thiết lập lề (margin) bằng 0.

Như các bạn có thể thấy, chúng ta cần một giải pháp để loại trừ các khoảng trắng trong trang HTML và đẩy các phần tử đứng ngay sát cạnh nhau. Một lần nữa, tôi tìm thấy một cách hơi có một chút rối rắm nhưng hiệu quả. Giải pháp này cho kết quả tốt mà không xáo trộn hệ thống phân cấp trong HTML đó là áp dụng lề (margin) -4px lên mỗi item.

inlineBlock-14

Sự hỗ trợ của các trình duyệt

Bây giờ bạn đã biết inline-block có tính năng khác biệt với float như thế nào, đây là lúc thảo luận chủ đề ưa thích của mọi người: sự hỗ trợ của các trình duyệt. Những kỹ thuật nêu trên có thật sự là giải pháp tốt để chúng có thể hoạt động tốt trên mọi trình duyệt ? Kết quả thật sự tốt hơn những gì chúng ta mong chờ.

inlineBlock-15

Chúng ta có thể thấy hầu hết các trình duyệt đều hỗ trợ tốt cho giải pháp trên ngoại trừ IE7 (đã bị loại bỏ trong danh sách trình duyệt phổ biến ngày nay), nếu bạn muốn cả IE6 và 7 hỗ trợ, bạn có thể dùng thủ thuật với thuộc tính zoom và dùng dấu * để nhắm đến chỉ áp dụng cho trình duyệt IE6/7 (ngày nay không còn cần thiết).

 li {
 display: inline-block;
 width: 100px;
 vertical-align: top;
 
 /*Dirty IE Hack - chỉ áp dụng cho IE6 và 7*/
 zoom: 1;
 *display: inline;
}

Xem thêm

Nếu bạn muốn nghiên cứu thêm về những gì chúng ta đã thảo luận, các bạn có thể xem thêm các bài viết sau:

Nguồn: biên dịch theo “What’s the Deal With Display: Inline-Block?” | Joshua Johnson | Designshack.net

Cẩm nang thiết kế website: HTML – P1

Sự khác nhau giữa phần tử (element) và thẻ (tag) là gì? Khi nào thi tôi nên sử dụng thẻ strong và lúc nào nên dùng thẻ bold? DOM là gì? Nếu bạn mới bước chân vào lĩnh vực thiết kế website, rào cản đầu tên bạn phải vượt qua luôn là các thuật ngữ. Vì vậy có rất nhiều thuật ngữ bạn thường gặp, nhưng ít khi được giải thích rõ ràng nên chúng thường bị bỏ qua.

Đây là loạt bài viết giới thiệu cơ bản những thuật ngữ mà bất cứ nhà thiết kế website mới vào nghề nào cũng nên đưa vào cẩm nang của mình. Đây không phải là danh sách đầy đủ các thuật ngữ nhưng sẽ là những thứ bạn sẽ thường hay gặp vướng mắc khi bắt đầu công việc thiết kế website. Khởi đầu sẽ là các thuật ngữ thuộc HTML và sau đó là CSS.

HTML & HTML5

HTML

HTML là chữ viết tắt của HyperText Markup Language (Ngôn ngữ đánh dấu siêu văn bản). Để hiểu rõ hơn về thuật ngữ này chúng ta hãy cắt nó thành từng mảnh.

Hypertext (siêu văn bản)

Hypertext chỉ đơn giản là văn bản được hiển thị trên một thiết bị kỹ thuật số và sử dụng các liên kết năn động để thực hiện việc chuyển hướng dễ dàng hơn. Ví dụ, để xem được trang web này, bạn có thể nhấp vào một đoạn chữ có liên kết để chuyển hướng đến trình duyệt của bạn đế vị trí chính xác.

Markup Language (Ngôn ngữ đánh dấu)

Ngôn ngữ đánh dấu là một cách để chú thích tài liệu. Với ngôn ngữ đánh dấu chúng ta có thể biến một đoạn chữ thông thường thành một đoạn chữ được định dạng phong phú, đó là nhờ vào các cú pháp đặc biệt khai báo với trình duyệt để hiển thị thông tin và các phần tử đã được gán vào như thế nào.

Tóm lượt

Bạn hãy ghi nhớ, HTML là một cách để chú thích và sau đó định dạng tài liệu để hiển thị dựa vào phần lớn hệ thống có các liên kết trên chữ. Đây là nền tảng các hoạt động của web.

HTML5

HTML5 đúng như tên gọi của nó, đó là phiên bản kế thừa của HTML lần thứ 5. HTML5 được xem như là sự thay thế của HTML 4.01 và XHTML 1.1, vì vậy khi tham chiếu ngôn ngữ HTML5 thì bạn nên hiểu đó chính là các cú pháp HTML mới.

HTML5 mang đến hàng loạt tính năng mới, sự thay đổi các phần tử (element) và cú pháp (syntax) cho HTML, có rất nhiều khó mà liệt kê đầy đủ ở đây. Một số thứ bạn có thể thường thấy như phần tử canvas dùng để dựng hình đồ họa, tài liệu đơn giản hóa mới, khả năng nhúng video mà không cần plugin như Flash và các API mới dành cho các nhà phát triển ứng dụng web.

Để tìm hiểu thấu đáo về HTML5, bạn có thể tham khảo các tài liệu sau:

Ngữ nghĩa học (Semantic)

Ngữ nghĩa học HTML

Khi bắt đầu vào nghề thiết kế web, bạn sẽ đối mặt với cụm từ này hàng ngày và nó sẽ khiến bạn rối trí. Ngữ nghĩa của web đơn giản là thứ giúp mọi việc tốt đẹp hơn.

Về cơ bản, khái niệm cốt lõi, các markup (đánh dấu) của bạn cần truyền đạt càng nhiều ý nghĩa càng tốt. Để thực hiện điều này, bạn nên sử dụng các phần tử (element) đúng vai trò của nó và theo cách giao tiếp rõ ràng với bất cứ ai, bất cứ thứ gì đang đọc dòng code của bạn viết.

Ví dụ, trước đây các nhà thiết kế web thường tạo cấu trúc các trang web bằng cách sử dụng table. Vấn đề nằm ở chổ, phần tử table có mục đích riêng của nó: dùng để trình bày các thông tin theo dạng bảng (thí dụ như bảng giá hay các bảng so sánh tính năng). Khi bạn thấy thẻ <table> được sử dụng, bạn sẽ ngay lập tức nghĩ đến dữ liệu bảng bên trong. Tuy nhiên, khi cả toàn bộ site được đặt trong  một table, phần tử này không còn mang tính chất ngữ nghĩa của chính nó.

Một trong những điều tuyệt vời mà HTML5 mang lại cho chúng ta đó là các phần tử có ngữ nghĩa rất rõ ràng. Mô tả một trang web cơ bản theo trình tự. Thậm chí nếu bạn chưa quen thuộc với HTML, sẽ có rất nhiều thứ mà phần lớn bạn có thể hiểu theo trình tự của tài liệu.

<header><!-- đầu bài viết -->
<nav></nav>
</header>

<aside></aside><!-- lề bài viết -->

<section><!-- Mục/ chương -->
<article><!-- nội dung bài viết -->
<h1></h1>
<!-- tiêu đề --> <!-- đoạn văn -->

</article>;

<article>
<h1></h1>


</article></section>

<footer></footer><!-- chân bài viết -->

div

Chúng ta đang nói về chủ đề ngữ nghĩa học trong thiết kế web, do vậy chúng ta sẽ thảo luận tiếp về một trong những phần tử gây tranh cãi nhiều nhất chỉ sau table, đó là div. Nếu bạn nhìn vào mã nguồn của một trang HTML, chắc chắn là bạn sẽ thấy div ở mọi nơi. Vậy div là cái thứ gì vậy nhỉ?

Thuật ngữ “div” là chữ viết tắt của “division” (phân chia). Nếu bạn cho rằng nó có một chút mơ hồ, bạn đã đúng. Trong thực tế, mục đích của phần tử div khá mơ hồ. Div cơ bản là một vật chứa (container) thông thường cho các khối nội dung mà nói về mặt nào đó, không thể mô tả được theo cấp ngữ nghĩa.

Điều này sẽ dẫn đến ý nghĩ cho rằng div là thứ phi ngữ nghĩa, có nghĩa rằng bản thân div không hề truyền đạt một ý nghĩa nào. Do đó, nếu xét theo các nguyên tắc được nêu trong các định nghĩa trước đó, div nên được sử dụng càng ít càng tốt, ít nhất về lý thuyết là vậy. Trên thực tế, các nhà phát triển web thường sử dụng nó một cách hào phóng.

Chúng rất linh hoạt và hữu dụng để tạo ra cấu trúc dễ dàng khi kết hợp với CSS, nên div được sử dụng rất phổ biến. Tuy nhiên, nếu có thể, bạn nên luôn đặt mục tiêu đến một thứ gì đó mang nhiều ngữ nghĩa. Ví dụ hãy xem xét các khối mã sau, nó khá phổ biến trước khi HTML5 ra đời.

<div id="header">some content</div>

Đối với ID, chúng ta đã diễn giải một số nghĩa nào đó nhưng bản thân div vẫn là một thứ chung chung, một thứ gì đó khó hình dung được. Với HTML5, chúng ta có thể loại bỏ div ở đoạn code trên để sử dụng phần tử header mang nhiều ngữ nghĩa hơn

<header>some content</header>

em vs. italic and strong vs. bold

Điều này thật sự khó, đặc biệt là bởi vì HTML5 đã thay đổi một chút nội dung ngữ nghĩa đối với những phần tử này. Bắt đầu từ em vs italic

Chú thích kỹ thuật của phần tử italic viết rằng nó được áp dụng lên chữ nhằm “tách biệt nó ra khỏi nội dung xung quanh mà không mang ý nghĩa nhấn mạnh hoặc quan trọng và áp dụng theo cách trình bày typography thông thường là chữ nghiêng”

Điều mấu chốt là phần tử italic không mang ý nghĩa phụ là nhấn mạnh, trong khi đó thẻ em rõ ràng là có. Nói một cách đơn giản, nó giống như sự khác nhau khi ta lên hay xuống giọng khi nói một từ nào đó.

Ví dụ nó được sử dụng trong các trường hợp bao gồm sự xác định phân loại. một thuật ngữ kỹ thuật, một cụm từ thành ngữ ở ngôn ngữ khác, một suy nghĩ hoặc tên riêng …

<p>I bade them all <i>adieu</i> and left as quickly as possible.</p>

Ngược lại, phần tử em được được sử dụng có kèm theo sự nhấn mạnh. Ở đây chúng ta thật sự đang cố gắng giải thích về nội dung của phần tử này khác biệt với phần còn lại trong một câu.

<p>I <em>already</em> told you that didn't I?</p>

Tiếp đến, phần tử bold cũng có một sự thay đổi về ý nghĩa để có sự xác định tương tự phần tử italic ” tách biệt nó với nội dung xung quanh nhưng không mang ý nghĩa nhấn mạnh hay quan trọng, và áp dụng cho sự trình bày typography thông thường đó là các chữ in đậm”

Một lần nữa, chúng ta thấy mấu chốt là chúng ta không thêm vào sự nhấn mạnh, chỉ là theo cách typography thông thường, ví dụ như một kịch bản có thể in đậm tên các nhân vật.

<p><b>John</b>: "Come on, Yoko isn't that bad."</p>

Nói một cách khác, bạn nên dùng strong khi cần truyền đạt ý nghĩa thật sự quan trọng. Ví dụ, các thông điệp cảnh báo thường sử dụng quy tắc này

<p><strong>Danger:</strong> If there are rocks ahead, we'll all be dead!</p>

Với strong thậm chí bạn có thể áp dụng các phần tử lồng vào nhau để nâng tầm quan trọng

<p><strong></strong><strong>Danger:</strong> If there are rocks ahead, we'll all be dead!</p>

Để tìm hiểu thêm 4 phần tử này, bạn nên tìm hiểu thêm ở website HTML5 Doctor, nơi có phần giải thích mở rộng về các thay đổi được thực hiện trong HTML5 và làm thế nào để sử dụng nó.

Thuộc tính (Attributes)

Class vs. ID

Một trong những sự khác biệt quan trọng nhất mà bạn cần nắm bắt rõ nếu bạn là nhà thiết kế web front end đó là classID. Hãy xem xét hai đoạn code bên dưới, bạn có hiểu chúng khác nhau như thế nào không?

<div id="featured"></div> <div class="featured"></div>

Thật may mắn, sự khác biệt thật sự dễ hiểu: ID là độc nhất và class có thể tái sử dụng. Ví dụ sau đây không hợp lệ vì có cùng một ID trên 2 phần tử khác nhau trên cùng một trang.

<div id="featured"> <p>Lorem ipsum…</p> </div> <div id="featured"> <p>Lorem ipsum…</p> </div>

Để sửa chữa, chỉ cần đổi ID thành class. Một class có thể áp dụng lên nhiều phần tử khác nhau như bạn muốn. Áp dụng class đó trong CSS sẽ giúp bạn có thể định dạng hàng loạt các phần tử cùng lúc.

<div class="featured"> <p>Lorem ipsum…</p> </div> <div class="featured"> <p>Lorem ipsum…</p> </div>

Như những gì đã nói ở trên, có vẻ chúng ta sẽ không bao giờ cần đến ID, thay vì đó luôn sử dụng class bởi vì nó linh động hơn. Lý lẽ khá rõ ràng, nhưng thật sự bạn vẫn cần đến ID ở một số trường hợp.

Những thuật ngữ khác

Phần tử (Elements) vs. Thẻ (Tags)

Sự khác biệt này dường như không phải thứ quan trọng trong thế giới web. Hơn nữa , rất nhiều người trong số các lập trình viên sử dụng các thuật ngữ này lẫn lộn với nhau. Tuy nhiên, có một sự hiểu biết đúng đắn về cấu trúc cơ bản HTML là nền tảng của học thuật web vững chắc. Có thể như chúng ta hơi nghiêm trọng vấn đề này, nhưng thật sự hai thuật ngữ này là những thứ khác biệt.

Để minh họa, hãy bắt đầu từ cấp thấp nhất. Ví dụ dưới là thẻ mở của một list item (một mục trong danh sách liệt kê)

<li> Tương tự, đây là thẻ đóng của một list item </li>

Bạn thân chúng, mỗi thứ là một thẻ. Tuy nhiên, chúng không phải là phần tử (element). Đây mới là phần tử của một list item đúng nghĩa.

<li>Some content</li>

Chính xác HTML bao gồm các phần tửphần tử gồm có thẻ và nội dung. Nói chung, một phần tử bao gồm một thẻ mở, nội dung và một thẻ đóng, một số thẻ vừa mở và tự đóng ( thí dụ <br />, <hr />) nên chúng sẽ một chút khác biệt.

DOM

Đây là thứ nhiều bạn hay nhầm lẫn khi bắt đầu tập viết code HTML. Bạn thường xuyên nghe đến “DOM” và nghĩ rằng đó là một thuật ngữ gì đó liên quan đến kỹ thuật khiến bạn khó nuốt trôi. điều hiển nhiên là bạn phải hiểu về DOM, nhưng nó thật sự là thứ gì ? DOM là chữ viết tắt của Document Object Model (Mô hình Đối tượng Tài liệu).

Thật ra, DOM cũn không phải quá kho hiểu. Ở cấp độ cơ bản nhất, nó đơn giản tham chiếu đến cấu trúc của một trang web và cung cấp các phương thức rõ ràng cho nhận biết và tham chiếu từng thành phần.

Mặt khác DOM là một cây phân cấp của một trang web. Tại đỉnh bạn có một tài liệu, từ đó mở rộng xuống phần tử gốc (root) HTML và sau đó đến các phần tử head và body. Nếu bạn xem xét phần tử body trong hình minh họa dưới đây, chúng có thể nhận thấy các nhánh vươn đến các phần tử khác ở cấp thấp hơn, mỗi phần tử có nội dung là chính nó và các phần tử con.

vocabhtml-1

Chúng ta tạm xem các mối quan hệ trong sơ đồ DOM giống như cây phả hệ (family tree). Nếu một phần tử ở dưới cấp một phần tử khác, thì nó được xem như là con (child), trên nó là cha mẹ (parent). Nếu cả hai phần tử trực tiếp được chia ra từ nhánh cha mẹ, chúng sẽ có mối quan hệ anh em (siblings).

Cấu trúc này cho ta một giao diện để tương tác với các phần tử xác định thông qua trang web. Ví dụ, trong JavaScript hay ngay cả HTML, bạn có thể vận dụng kiến thức về DOM để nhắm đến phần tử con đầu tiên (first-child) của một bản danh sách không thứ tự unordered list, đó cũng chính là phần tử li đầu tiên thuộc phần tử ul

Định nghĩa trên thật sự là phiên bản đơn giản nhất để hiểu về DOM. Khi bạn đã có những hiểu biết sâu rộng để hiểu làm thế nào DOM xác định cấu trúc những tài liệu HTML, bạn có thể đi sâu với những định nghĩa phức tạp hơn. Bạn có thể tham khảo thêm định nghĩa về DOM của W3C để có những thảo luận chuyên sâu hơn nữa.

Ở đây bạn sẽ thấy DOM được tham chiếu như là một chương trình API cho các tài liệu để định nghĩa một cấu trúc đối tượng. Bạn cũng sẽ thấy rằng API này chứa vô số các modules, như CSS và các MouseEvents (các sự kiện dựa trên tháo tác của chuột), có thể thực thi theo vô số cách.

Khối và phần tử nội tuyến (Block vs. Inline Elements)

Khi bạn tạo ra các phần tử trong HTML và xác định style (kiểu, định dạng) trong CSS, bạn sẽ thấy rằng trình duyệt biên dịch các phần tử khác nhau theo nhiều cách khác nhau trên cùng một layout.

Khi bạn tạo một phần tử cấp độ khối (block-level), như một đoạn văn bản (paragraph) hay một div, nó sẽ xuất hiện thêm một dòng trên trang tài liệu. Vì vậy nếu bạn tạo ra ba khối văn bản, nó sẽ xuất hiện xếp chồng lên nhau theo hàng ngang chứ không phải thành từng cột. Sự khác biệt ở đây, các phần tử cấp độ khối (block-level) có thể được xác định chiều ngang và chiều cao.

Một phần tử nội tuyến (inline element), nói một cách khác được đặt trên cùng một dòng nội dung ở vị trí trước hoặc sau. Ví dụ, nếu bạn thêm một phần tử strong vào trong một đoạn văn bản (paragraph), nó sẽ không tạo thêm một dòng mới mà sẽ nằm trên cùng một dòng đoạn văn bản, các phần tử nội tuyến có chiều ngang và chiều cao tùy thuộc vào nội dung bên trong nó, không xác định được các giá trị cụ thể.

Bạn có thể tham khảo thêm bài viết về block, inline và float để tìm hiểu thêm

Thay đổi tính chất

Bằng cách sử dụng thuộc tính display trong CSS bạn có thể thay đổi tính chất của những phần tử nhất định. Ví dụ, ta có một phần tử a (anchor), mặc định đây là phần tử nội tuyến, nhưng ta có thể khai báo với trình duyệt để nó trở thành phần tử cấp độ khối. Sau đó ta có thể gán cho nó chiều cao và chiều rộng mà đáng một phần tử nội tuyến không thể có được.

a {
 <strong>display: block;</strong>
 background: #eee;
 height: 50px;
 width: 200px;
}

Tóm lược

Đây chỉ là những ghi chú sơ lược về các phần tử thường làm bạn nhầm lẫn trong quá trình bắt đầu học về HTML. Hy vọng những kiến thức cơ bản này sẽ giúp bạn có những hiểu biết vững chắc về cấu trúc HTML và các phần tử của nó, chắc chắn điều đó sẽ giúp ích cho bạn ở giai đoạn chuyên sâu sau này.

Biên dịch theo Web Design Vocabulary Refresh | designshack.net

Xem tiếp bài 2

Giới thiệu bài học HTML cơ bản

Đa số mọi người nghĩ rằng làm web là một công việc cực khó! Thật sự không phải hoàn toàn như vậy! Mọi người đều có thể tạo ra được website và nếu bạn đang đọc những dòng này, bạn cũng sẽ làm được.

Cũng có một số khác có ý nghĩ sai lầm rằng, phải cần những phần mềm cao cấp và đắt tiền mới có thể làm được website. Sự thật là có rất nhiều phần mềm cam đoan có thể tạo ra một website cho bạn. Có một vài trường hợp đúng như vậy. Nhưng nếu bạn muốn thật sự tạo một website đúng theo ý muốn của mình, bạn nên tự tay làm công việc này. May mắn thay, công việc đó khá đơn giản và miễn phí, tất cả những phần mềm cần thiết đều nằm trong tầm tay của bạn.

Sự trợ giúp của các bài hướng dẫn này sẽ giúp bạn thoải mái, đi đúng hướng ngay từ đầu để trở thành một nhà thiết kế web. Các bài học sẽ bắt đầu từ cơ bản và không đòi hỏi bất kỳ kiến thức gì về lập trình.

Các bài bài hướng dẫn không thể cho bạn biết mọi thứ. Vì vậy sự quyết tâm và ý chí của bạn là những điều cần thiết. Nhưng đừng quá lo lắng, học để làm web là công việc thú vị và nó sẽ mang đến cho bạn những những niềm hứng khởi mỗi khi hoàn tất nó.

Bạn có thể chọn bất kỳ cách học như thế nào. Nhưng chúng tôi khuyến nghị bạn chỉ nên đọc 2 hay 3 bài một ngày và dành thời gian thực hành với những thứ bạn vừa học trong mỗi bài.

Bao nhiêu lời chắc cũng đã đủ, nào chúng ta cùng bắt đầu nhé!

Tài liệu học được biên soạn và được tác giả bổ sung dựa theo nguồn từ trang web html.net

Mục Lục

Học HTML cơ bản – Bài 1

Bài 1: Nhập môn

Trong bài học đầu tiên bạn sẽ được giới thiệu khái quát những công cụ dùng để làm web

Những gì cần có?

Hầu như bạn đã có những thứ cần thiết.

Bạn cần có một trình duyệt. Trình duyệt là chương trình có thể mở các website như chương trình bạn đang xem trang web này.

Không quan trọng bạn sử dụng trình duyệt nào. Những trình duyệt phổ biến như Chrome, Microsoft Internet Explorer, Mozila Firefox … tất cả đều có thể sử dụng được.

Có thể bạn đã nghe nói hoặc đã sử dụng các chương trình phần mềm như  Microsoft FrontPage, Macromedia Dreamweaver và thậm chí là Microsoft Word để tạo các website. Hãy quên những phần mềm này ngay! Chúng sẽ không giúp bạn trong quá trình học code để có thể tự làm web cho chính mình được.

Thay vì đó, bạn chỉ cần phần mềm soạn thảo văn bản đơn giản. Nếu đang sử dụng hệ điều hành Window, bạn có thể dùng Notepad download, thường nó nằm ở menu Programs > Accessories.

Nếu đang sử dụng hệ điều hành khác Window, bạn có thể tìm phần mềm khác tương tự. Ví dụ, Pico (Linux) hay TextEdit (Mac).

Notepad là một mềm soạn thảo văn bản sơ khai rất thích hợp để học code, bởi vì nó sẽ không can thiệp những gì bạn gõ vào. Nó giúp bạn kiểm soát hoàn toàn. Vấn đề là đối với các phần mềm cam đoan có thể tạo ra những trang web cho bạn có rất nhiều chức năng chuẩn, tùy bạn chọn. Nhưng mặt trái, mọi thứ được những phần mềm này tạo ra theo một chuẩn nhất định, vì thế chúng sẽ không tạo ra một website chính xác như những gì bạn muốn, thậm chí đôi lúc gây phiền toái, nó sẽ tự động đổi đoạn code bạn gõ vào. Nếu sử dụng Notepad, bạn có thể tự tay kiểm nghiệm những chổ sai hoặc đúng.

Một trình duyệt và phầm mềm Notepad là quá đủ để bắt đầu, bạn đã sẵn sàng chưa?

Bạn có cần phải online?

Nếu cần thiết bạn có thể online để xem bài học, và offline để đọc hoặc thực hành trên trình duyệt của mình. Nếu bạn cần thực nghiệm và kiểm tra ngay trong lúc viết code, hãy online và xem các ví dụ trong bài để thực hành.

Tiếp theo là gì?

Xem bài tiếp theo để bắt đầu, những hứng thú sẽ đến khi bạn bước qua bài số 2

Học HTML cơ bản – Bài 2

Bài 2: HTML là gì?

Bài học này sẽ giới thiệu cho bạn một người bạn mới đó là HTML.

Chính xác HTML là gì?

HTML chính là ngôn ngữ mẹ đẻ của tất cả các trình duyệt.

Có thể tóm tắt một câu chuyện dài như sau. HTML được phát minh vào năm 1990 bởi một nhà khoa học có tên là Tim Berners-Lee. Lý do lúc đó nó giúp các nhà khoa học ở các trường đại học khác nhau có thể trao đổi tài liệu nghiên cứu của nhau dễ dàng hơn. Dự án đã phát triển lớn hơn rất nhiều so với những gì Tim Berners-Lee đã mong đợi. Bằng phát minh ra HTML, ông đã trở thành một những người xây dựng nền móng cho website như chúng ta biết ngày nay.

HTML là một ngôn ngữ có thể sư dụng để trình bày thông tin (thí dụ như nghiên cứu của các nhà khoa học) lên internet. Những gì bạn nhìn thấy ở một trang web trên Internet chính là sự biên dịch HTML của trình duyệt. Để xem các đoạn code HTML của một trang trên Internet, đơn giản bạn chỉ cần nhấp chuột phải trên trang và chọn “View source” (xem mã nguồn) hay “View page source” tùy theo trình duyệt.

Menu xem mã nguồn của trình duyệt Chrome và Internet Explorer
Menu xem mã nguồn của trình duyệt Chrome và Internet Explorer

Đối với người chưa được học HTML, nghe thì có vẻ khá phức tạp, ví thể trong bài học này các bạn sẽ được giải thích tất cả.

HTML dùng để làm gì?

Nếu bạn muốn thiết kế website, sẽ chẳng có cách nào thoát khỏi HTML. Ngay cả khi bạn sử dụng phần mềm để làm web như Dreamweaver, những kiến thức cơ bản về HTML sẽ giúp công việc làm web đơn giản hơn và website của bạn cũng sẽ tốt hơn rất nhiều. Tin tốt cho bạn là HTML dễ học, chỉ sau hai bài cơ bản bạn sẽ học được cách tạo ra website đầu tiên của mình.

HTML là để tạo ra website, đơn giản là thế!

Nhưng các chữ H-T-M-L là gì?

HTML là chữ viết tắt của “HyperText Mark-up Language” – “Ngôn ngữ Đánh dấu Siêu văn bản” – là thứ mà  bạn chẳng cần phải hiểu đúng nghĩa ở giai đoạn này. Tuy nhiên theo trình tự cũng tốt, hãy để chúng tôi cho bạn biết thêm chi tiết.

  • Hyper là ám chỉ thứ có tính chất vượt trội bất thường, phát triển trên mức bình thường hay vắn tắt là “siêu”.
  • Text là chữ, văn bản.
  • Mark-up là cách bạn đánh dấu văn bản hay chữ, như tô đậm đoạn chữ, hay đánh dấu một đoạn chữ làm tiêu đề.
  • Language như tên gọi của HTML, đó là một ngôn ngữ, đa phần sử dụng tiếng Anh.

Trong các học bài học bạn cũng sẽ biết thêm về XHTML (Extensible HyperText Mark-up Language) “Ngôn ngữ Đánh dấu Siêu văn bản mở rộng” nói vắn tắt là cách viết có cấu trúc tốt hơn HTML.

Bây giờ bạn đã có khái niệm sơ về HTML (và XHTML), nhiệm vụ tiếp theo của chúng ta là tạo ra một website cho mình.

Học HTML cơ bản – Bài 3

Bài 3: Phần tử và thẻ (elements, tags)

Ngay bây giờ bạn đã sẳn sàng học bản chất của HTML: các phần tử (elements)
Các phần tử mang lại cấu trúc cho một trang HTML và khai báo với trình duyệt về một website sẽ được trình bày như thế nào. Nói tóm lại phần tử chứa một thẻ mở, chứa nội dung và kết thúc bằng thẻ đóng.

“Thẻ” là gì?

Thẻ là nhãn bạn dùng đánh dấu nơi bắt đầu và kết thúc của một phần tử.

Tất cả các thẻ đều giống nhau ở định dạng bắt đầu bằng ký tự “<” (giống ký hiệu nhỏ hơn trong toán học) và kế thúc bằng dấu “>“. (giống ký hiệu lớn hơn trong toán học)

Nói chung, có hai loại thẻ – thẻ mở như: <html> và thẻ đóng như : </html>. Sự khác nhau của 2 thẻ này chính là dấu “/“. Nội dung của một phần tử sẽ được đặt giữa thẻ mở và thẻ đóng.

HTML chính là các thẻ. Học HTML chính là học cách sử dụng các loại thẻ khác nhau.

Các ví dụ

Phần tử em – được dùng để trình bày cho các chữ nghiêng. Tất cả những chữ trong giữa thẻ mở <em> và thẻ đóng </em> đều sẽ là chữ nghiêng. (“em” viết tắt của từ “emphasis” – chữ nghiêng.)

Ví dụ 1:

<em>Đoạn chữ nghiêng</em>

Bạn sẽ nhìn thấy đoạn chữ trên ở trình duyệt như thế này:

Đoạn chữ nghiêng.

Các phần tử h1, h2, h3, h4, h5 và h6 được dùng làm tiêu đề (h là đại diện của chữ “heading” – tiêu đề), Nếu h1 là tiêu đề chính cấp 1 có chữ to nhất, thì  h2 is sẽ là tiêu đề phụ cấp 2 sẽ có chữ nhỏ hơn, và tương tự h6 là tiêu đề có cấp cuối cùng và chữ nhỏ nhất.

Ví dụ 2:

<h1>Đây là tiêu đề chính</h1> 
<h2>Đây là tiêu đề phụ</h2>

Bạn sẽ nhìn thấy trên trình duyệt như thế này:

Đây là tiêu đề chính

Đây là tiêu đề phụ

Vậy có phải tôi cần phải luôn sử dụng thẻ mở và thẻ đóng cho một phần tử HTML?

Có một số trường hợp ngoại lệ, một số phần tử không tuân theo luật HTML là phải có thẻ mở và đóng. Những phần tử này được gọi là phần tử rỗng và không liên hệ bất cứ đoạn chữ nào mà chỉ là một nhãn độc lập, ví dụ để xuống hàng một đoạn chữ, người ta sử dụng thẻ <br />, hay tạo một đường gạch ngang trang trí: <hr />

Thẻ (Tag) nên được gõ là chữ IN HOA hay chữ thường?

Đa số các trình duyệt không phân biệt chữ IN HOA hay chữ thường, <HTML>, <html> hoặc  <HtMl> sẽ có kết quả giống như nhau. Tuy nhiên, cách  viết đúng là nên gõ code HTML với dạng chữ thường, vậy bạn hãy tập thói quen sử dụng chữ thường trong khi viết code HTML nhé.

Tôi phải đặt tất cả thẻ vào  đâu?

Bạn gõ các thẻ vào một trong một trang HTML.  Một website có thể có một hay nhiều trang HTML. Khi bạn lướt Web, bạn sẽ mở nhiều trang HTML khác nhau.

Nếu bạn tiếp tục xem bài kế tiếp trong 10 phút, bạn sẽ tự tay tạo được một website.