Chuyên mục lưu trữ: HTML

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

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.

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

Khởi tạo website – lần đầu làm chuyện “ấy”

Với những gì bạn đã được học trong các bài trước, bây giờ bạn có thể tạo ra một trang web chỉ trong vài phút.

Bắt đầu như thế nào?

Trong bài số 1, chúng ta đã được biết những gì cần thiết để làm web là: một trình duyệt và phần mềm Notepad. Khi bạn đang đọc những dòng này, có nghĩa là bạn đã mở một trình duyệt, điều cần làm là bạn chỉ mở thêm 1 tab hoặc một cửa sổ mới, như thế bạn có thể vừa xem hướng dẫn, vừa thực hành những gì đã học để có website đầu tiên của mình.

Bạn có thể mở Notepad như hình sau (Programs > Accessories > Start menu):

notepad

Nào, bây giờ chúng ta cùng bắt đầu!

Làm gì bây giờ?

Hãy để chúng tôi giúp bạn mọi việc dễ dàng hơn. Giả sử bạn muốn có một trang web với dòng chữ “Tuyệt vời! Đây là website đầu tiên của tôi”. Vậy hãy đọc tiếp, bạn sẽ khám phá việc này rất đơn giản.

HTML rất đơn giản và hợp với luận lý học. Trình duyệt đọc HTML giống như bạn đọc chữ từ trên xuống và từ từ trái sang phải. Vì thế, một trang HTML bắt đầu sẽ bắt đầu theo trình tự trước và sau.

Điều đầu tiên bạn cần làm là khai báo cho trình duyệt biết bạn sẽ “nói” với nó bằng ngôn ngữ HTML bằng cách sử dụng thẻ <html>Do đó, trước khi bạn định làm bất cứ điều gì hãy gõ thẻ  <html> vào dòng đầu tiên trên chương trình Notepad.

Nếu bạn còn nhớ bài học trước, <html> là thẻ mở và nó cần phải có thẻ đóng trước khi bạn hoàn tất trang HTML. Do vậy hãy đảm bảo bạn không quên thẻ đóng  “</html>“. Tốt nhất bạn nên xuống vài dòng và gõ vào sau đó bạn có thể chèn các các phần tử khác vào giữa 2 thẻ <html> và </html>.

Công việc kế tiếp, trang Web bạn cần là thẻ head, đây là phần cung cấp thông tin về trang HTML của bạn, và thẻ body, nơi chứa tất cả nội dung của trang. Như bạn đã biết, HTML sẽ không được trình duyệt hiểu nếu nó không tuân thủ luận lý học, do đó các thẻ này sẽ được viết như sau phần head bào gồm cặp thẻ (<head> and </head>) và kế đến là body  với (<body> and </body>).

Trang của bạn sẽ phải như thế này:

<html> 
    <head> 
    </head>
    <body> 
    </body> 
</html>	

Chú ý: chúng tôi sắp xếp các thẻ trên các dòng khác nhau, hoặc thụt đầu dòng. Về nguyên tắc, điều này chẳng ảnh hưởng đến cấu trúc đến trang HTML của bạn, nhưng nó sẽ giúp bạn có thể đọc code và xem tổng quát toàn trang, chúng tôi khuyến nghị bạn nên sắp xếp trang HTML một cách gọn gàng với xuống dòng và thụt đầu dòng như ở trên trong quá trình học.

Nếu như trang HTML của bạn đã giống như ví dụ trên, bạn thật sự đã hoàn tất website đầu tiên của mình, mặc dù trông nó khá là chán và không như những gì bạn mong muốn, nhưng dù gì nó cũng đã là một website. Những gì bạn vừa làm sẽ là loại trang mẫu (template) cho tất cả những trang HTML sau này.

Làm thế nào tôi có thể đưa nội dung vào trang HTML?

Cũng như bạn đã được học trước đó, HTML có hai phần headbody. Trong phần head, bạn sẽ ghi lại thông tin của trang, và ở phần body, nó sẽ chứa tất cả những thông tin cấu thành trang web.

Ví dụ bạn muốn một dòng tiêu đề xuất hiện ở đầu thanh cửa sổ trình duyệt, bạn có thể thực hiện trong phần head. Phần tử được sử dụng là  title. và viết theo cách thẻ đóng và mở <title> … </title>:

<title>Website đầu tiên của tôi</title>

Chú ý tiêu đề này không xuất hiện trên trang. Bất cứ những thứ gì bạn muốn xuất hiện trên trang đều là phần nội dung và nó phải được thêm vào giữa 2 thẻ đóng và mở body.

Như đã nói đầu bài, bạn muốn có một trang web với dòng chữ “Tuyệt vời! Đây là website đầu tiên của tôi”. Đây là đoạn chữ mang thông điệp thuộc phần body. Vì vậy trong phần body, bạn gõ vào như sau:

<p>Tuyệt vời! Đây là website đầu tiên của tôi</p>

Thẻ <p> là chữ viết tắt của “paragraph” – (đoạn văn bản) đó cũng là ý nghĩa của thẻ.

Trang HTML sẽ như sau:

<html> 
  <head> 
  <title>Website đầu tiên của tôi</title> 
  </head> 

 <body> 
 <p>Tuyệt vời! Đây là website đầu tiên của tôi.</p> 
 </body>

</html>

Xem như xong! Bạn thật sự đã có một website!

Kế tiếp, tất cả những gì bạn phải làm là lưu vào ổ cứng và mở nó bằng trình duyệt:

  • Trong Notepad chọn “Save as…” trong menu “File” ở thanh cửa sổ trên.
  • Chọn “All Files” trong hộp “Save as type”. Việc này rất quan trọng, nếu bạn làm không đúng, nó sẽ lưu thành tập tin văn bản thông thường.
  • Bây giờ bạn hãy đặt tên cho tập tin là “page1.htm” (sử dụng phần mở rộng là “.htm” để xác định đây là trang HTML. “.html” cũng có kết quả tương tự “.htm“, bạn có thể chọn bất cứ loại nào bạn muốn. Hãy lưu ở nơi nào trên ổ cứng mà bạn dễ tìm lại sau này.

saveas

Bây giờ bạn hãy trở lại trình duyệt đang mở:

  • Hãy chọn “Open” ở menu  “File” (hoặc dùng tổ hợp phím CTRL+O).
  • Nhấp vào “Browse” trong hộp thoại xuất hiện.
  • Truy xuất đến nơi trang HTML đã lưu trước đó và chọn “Open”.

open

Bây giờ chắc bạn đã thấy dòng chữ  “Tuyệt vời! Đây là website đầu tiên của tôi”  trên trình duyệt. Chúc mừng bạn!

Nếu bạn muốn mọi người đều có thể xem trang Web của bạn vừa tạo, bạn hãy lướt ngay đến bài 13 học cách tải trang Web của bạn lên Internet. Nếu không, hãy kiên nhẫn và đọc tiếp. Những điều thú vị mới bắt đầu!

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

Bài 5: Bạn đã học được những gì?

Bạn nên luôn bắt đầu bằng trang mẫu (template) như những gì bạn đã học ở bài trước, đây là trang mẫu:

<html> 

<head> 
<title></title> 
</head> 

<body>
</body> 

</html>

Ở phần head, bạn nên luôn gõ vào tiêu đề trang <title>Đây là tiêu đề trang</title> Bạn sẽ nhìn thấy tiêu đề ở tab của sổ trình duyệt

tab

title là một phần rất quan trọng, nó sẽ được các cổ máy tìm kiếm như google dùng để tham chiếu nội dung của trang web và đưa ra kết quả cho người tìm.

serach-result

Ở phần body là nơi bạn sẽ ghi vào nội dung của trang web, bạn cũng đã được biết một số phần tử HTML quan trọng

<p>Đây là đoạn văn bản</p> 
<em>Đây là đoạn chữ in nghiêng</em> 
<h1>Tiêu đề chính</h1> 
<h2>Tiêu đề phụ</h2> 
<h3>Tiêu đề con</h3> 

Hãy nhớ rằng, cách duy nhất để học HTML là thực hành và gặp lỗi. Nhưng bạn cũng đừng quá lo lắng, nó sẽ không phá hư máy tính hay internet của bạn. Do vậy hãy cứ thử làm – đó cũng là cách giúp bạn có kinh nghiệm.

Những thứ đã học có ích gì?

Không ai có thể trở thành một nhà thiết kế web giỏi chỉ bằng cách thực hành bài học này. Những gì bạn đã học trong bài này chỉ đơn giản là các kiến thức cơ bản để tạo dựng các khối (block), để trở thành người thiết kế giỏi, bạn phải tạo dựng được các khối (block) theo cách riêng của mình và phải thật sáng tạo.

Dù sao đây cũng chỉ là giai đoạn khởi đầu, nào chúng ta sẽ tiếp tục

Tiếp đến là gì?

Bạn hãy thử tự tay tạo ra vài trang. Để  bắt đầu bạn có thể tạo ra một trang với title và các  tiêu đề , nội dung chữ. Bạn có thể xem ví dụ trong bài này và thực hành lại. Chẳng bao lâu sau, chắc chắn bạn sẽ tạo được trang web mà không cần phải nhìn vào bài hướng dẫn. Hãy tiếp tục, ở bài sau bạn sẽ được học thêm nhiều phần tử (element) mới.

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

Bài 6: Một số phần tử cần biết

Bạn đã có một trang mẫu HTML qua các bài học trước chưa? Đây là ví dụ:

<html> 

 <head> 
   <title>My website</title> 
 </head> 

 <body> 

   <h1>Tiêu đề bài viết</h1> 
   <p>Nội dung bài viết</p> 
   <h2>Tiêu đề phụ</h2> 
   <p>Nội dung bài viết</p> 

 </body> 

</html>

Bạn sẽ được học gì tiếp theo?

Bây giờ bạn sẽ được học 7 phần tử (element) mới.

Tương tự như cách bạn làm nghiêng đoạn chữ bằng cách đặt nó vào giữa cặp thẻ <em></em>. Bạn cũng có thể in đậm một đoạn chữ bằng cách tương tự, đặt vào giữa cặp thẻ mở  <strong> và thẻ đóng </strong>.

Ví dụ 1:

<strong>Chữ in đậm</strong>

Bạn sẽ có kết quả như dưới đây khi xem trên trình duyệt:

Chữ in đậm.

Tiếp theo, đây là cách để thu nhỏ một đoạn chữ bằng cách sử dụng thẻ small:

Ví dụ 2:

<small>Đoạn chữ thu nhỏ.</small>

Bạn sẽ nhìn thấy như bên dưới ở trình duyệt:

Đoạn chữ thu nhỏ.

Tôi có thể dùng nhiều thẻ cùng một lúc được không?

Bạn có thể dùng cùng lúc nhiều thẻ cho cùng một nội dung nhưng phải tránh các phần tử chồng xen kẻ với nhau. Đây là một ví dụ:

Ví dụ 3:

Nếu bạn muốn thu nhỏ một đoạn chữ và cùng lúc tạo nghiêng, đoạn code sẽ như sau:

<em><small>Chữ in đậm và nghiêng</small></em>	

và KHÔNG được như thế này: <small><em>Chữ in đậm và nghiêng</small></em>

Điểm khác nhau mấu chốt là bạn phải đóng thẻ mở đầu tiên ở cuối cùng, điều này tránh cho trình duyệt không lúng túng khi đọc đoạn code của bạn.

Thêm một vài phần tử khác!

Như đã từng đề cập ở bài số 3, một số phần tử chỉ có một thẻ đơn. Đây là các phần tử rỗng và độc lập. Đây là một ví dụ về thẻ <br /> nó dùng để ngắt dòng và xuống hàng:

Ví dụ 4:

Đây là một đoạn chữ <br /> và thêm một đoạn khác được ngắt xuống dòng.

Bạn sẽ có được kết quả trên trình duyệt như sau:

Đây là một đoạn chữ
và thêm một đoạn khác được ngắt dòng

Chú ý rằng các thẻ đơn không có thẻ mở và đóng mà chỉ có tên thẻ + khoảng trắng + dấu / như thẻ này: <br />.

Tương tự, một thẻ khác là <hr /> được dùng làm đường kẻ ngang (“hr” là chữ viết tắt của “horizontal rule” – đường kẻ ngang):

Ví dụ 5:

<hr />

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


Những ví dụ khác về thẻ có đủ một cặp đóng và mở, như thẻ dùng để tạo danh sách liệt kê là  ul, ol và li.

ul là chữ viết tắt của “unordered list” danh sách không có số thứ tự chỉ có chấm hoặc gạch đầu dòng. ol là viết tắt của “ordered list” là danh sách có đánh số thự tự đầu dòng. Các mục được liệt kê trong danh sách sẽ được thêm vào bằng thẻ li  (“list item” – mục liệt kê). hơi rắc rối, nhưng bạn có thể xem ví dụ bên dưới:

Ví dụ 7:

<ul> 
<li>mục liệt kê</li> 
<li>thêm một mục liệt kê khác</li></ul>

và đây là những gì bạn thấy trên trình duyệt:

  • mục liêt kê khác
  • thêm một mục liêt kê khác

Ví dụ 8:

<ol> 
<li>Mục số một</li> 
<li>Mục số hai</li> 
</ol>

và đây là kết quả:

  1. Mục số một
  2. Mục số hai

Đã hoàn tất bài học?

Tạm thời là như thế, Một lần nữa, hãy thực hành và tự tay tạo ra các trang có chứa các phần tử bạn vừa học trong bài này bao gồm:

<strong> Chữ in đậm </strong> 
<small> Chữ thu nhỏ </small> 
<br /> Xuống hàng 
<hr /> Gạch dòng ngang
<ul>Danh sách liệt kê</ul> 
<ol>Danh sách liệt kê có đánh số</ol> 
<li>Mục liệt kê</li>

Và sẵn sàng cho bài kế tiếp nhé!

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

Bài 7: Thuộc tính (Attributes)

Bạn có thể thêm thuộc tính vào một số phần tử.

Thuộc tính là gì?

Nếu bạn còn nhớ, những phần tử tạo nên cấu trúc trang HTML và khai báo với trình duyệt bạn muốn website sẽ được trình bày như thế nào (ví dụ <br /> là thẻ khai báo cho trình duyệt khi muốn xuống dòng trong một đoạn chữ). Ở một vài phần tử bạn có thể thêm thông tin vào. Loại thông tin được thêm vào này được gọi là thuộc tính (attribute)

Ví dụ 1:

<h2 style="background-color:#ff0000;">Tôi đang học HTML</h2>

Thuộc tính luôn được đặt trong thẻ mở và theo sau là dấu = cùng chi tiết nằm giữa cặp ngoặc kép, dấu chấm phẩy sẽ dùng để tách các nội dung thuộc tính, chúng ta sẽ nói về điều này sau.

Tìm hiểu rõ hơn về thuộc tính

Có rất nhiều thuộc tính. Cái đầu tiên bạn sẽ học sẽ là style (kiểu dáng, định dạng), bằng cách sử dụng style bạn có thể tạo kiểu cho website của mình. Ví dụ như background colour: (màu nền )

Ví dụ 2:

<html> 
<head> 
</head> 
<body style="background-color:#ff0000;"> 
</body> 
</html>

Đoạn code trên sẽ thêm màu đỏ vào nền trang Web của bạn, hiển thị trên trình duyệt – bạn hãy thử và sẽ thấy. Chúng tôi sẽ giải thích chi tiết hệ thống màu hoạt động như thế nào chí trong chốc lát nữa.

Chú ý rằng một số thẻ sử dụng tiếng Anh của Hoa Kỳ, do đó color sẽ được dùng thay vì colour. Điều này bạn nên cẩn thận, vì nếu viết sai trình duyệt sẽ không hiểu code bạn viết. Một lưu ý khác cũng rất quan trọng, bạn phải luôn dùng dấu ngoặc kép để đóng lại thuộc tính.

Làm thể nào tạo màu đỏ cho nền trang web?

Như ví dụ bạn vừa xem, để tạo màu đỏ chúng tôi dùng đoạn code “#ff0000”. Đây là mã của màu đỏ được tính theo hệ thập lục phân  – hexadecimal numbers (HEX).Mỗi màu sẽ có một mã riêng theo hệ thập lục phân, đây là một số mã màu thường được dùng:

White: #ffffff – Trắng
Black: #000000 (zeros) – Đen
Red: #ff0000 – Đỏ
Blue: #0000ff –  Xanh da trời
Green: #00ff00 – Xanh lá cây
Yellow: #ffff00 – Vàng

Một màu thập lục phân (viết tắt là HEX) bao gồm dấu # và sáu chữ hoặc số theo sau. Có hơn 1000 mã màu HEX và rất khó hình dung mã số nào sẽ là màu gì. Để dễ dàng hơn, bạn có thể tham khảo bảng 216 màu thường được sử dụng của bảng Web Safe Color.

Bạn cũng có thể dùng tên màu chuẩn theo tiếng Anh như (white, black, red, blue, green and yellow).

Ví dụ 3:

<body style="background-color: red;"></body>

Bạn đã có khái niệm vừa đủ về màu. Bây giờ chúng ta sẽ quay lại với thuộc tính.

Những phần tử nào có thể sử dụng thuộc tính?

Có rất nhiều thuộc tính khác nhau có thể áp dụng lên đa số các phần tử.

Bạn sẽ thường xuyên sử dụng thuộc tính đối với một số thẻ như <body> và chẳng khi nào áp dụng thuộc tính lên thẻ như <br />, bởi vì  sự ngắt dòng hầu như không cần có thêm bất cứ tham số nào để điều chỉnh.

Cũng như các phần tử, có rất nhiều thuộc tính khác nhau. Một số thuộc tính được tạo ra để đáp ứng riêng cho chính các phần tử đó, một số khác có thể sử dụng đại trà đối với nhiều phần tử khác nhau. Ngược lại một số phần tử chỉ có thể chứa một loại thuộc tính và số khác phần tử có thể chứa nhiều thuộc tính khác nhau.

Bạn sẽ có một chút khó hiểu ở đây, nhưng một khi đã làm quen với những thuộc tính khác nhau, bạn sẽ thấy nó thật sự rất logic và bạn cũng sẽ nhận ra sử dụng chúng rất dễ dàng cùng với các khả năng được cung cấp bởi chúng nhiều như thế nào.

Ví dụ dưới đây sẽ cho bạn thấy những thuộc tính quan trọng nhất

Chính xác là có bao nhiêu thành phần trong một phần tử?

Nói tổng quát, một phần tử bao gồm: một thẻ mở có chứa hoặc không chứa một hay nhiều thuộc tính, một số nội dungthẻ đóng. Hãy xem hình minh họa dưới.

anatomy-of-an-html-element
Phân tích một phần tử

 

anatomy-of-an-html-element2
Phân tích chi tiết 2 loại phần tử 1- Phần tử thông thường luôn có 1 cặp thẻ mở và đóng 2 – Phần tử đơn chỉ có 1 thẻ duy nhất.

Xem bài kế tiếp

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

Bài 8: Liên kết – Links

Trong bài này bạn sẽ học cách làm thế nào để liên kết các trang web lại với nhau.

Bạn cần những gì để tạo liên kết?

Để tạo ra các liên kết, bạn sử dụng thứ mà bạn luôn gặp phải khi code HTML đó là: phần tử. Một phần tử đơn giản với một thuộc tính và bạn có thể tạo ra một liên kết đến bất cứ thứ gì bạn muốn. Xem ví dụ.

Ví dụ 1:
<a href="http://thietke.website/">Đây là liên kết của trang thietke.website</a>

Bạn sẽ thấy như dưới đây nếu xem trên trình duyệt:

Phần tử  a là chữ đại diện của từ “anchor”(neo). Và thuộc tính  href là từ viết tắt của từ “hypertext reference” (tham chiếu siêu văn bản), là nơi để xác định liên kết đến đâu, thông thường đó là một địa chỉ của một trang web, website hoặc một tập tin.
Trong ví dụ trên, thuộc tính href có giá trị là “http://www.thietke.website”, đó cũng là địa chỉ đầy đủ của website chúng tôi trên internet, nó được gọi là URL (Uniform Resource Locator – định vị nguồn đồng dạng). Chú ý rằng “http://” phải luôn được thêm vào trong URL. Phần chữ “Đây là liên kết của trang thietke.website”  sẽ được trình bày trên trình duyệt như là một liên kết. Hãy luôn nhớ kết thúc phần tử liên kết bằng thẻ đóng </a>.

Những liên kết các trang trên cùng một website của tôi sẽ được thực hiện như thế nào?

Nếu bạn muốn liên kết các trang trong cùng một website, bạn không cần phải khai báo đầy đủ địa chỉ (URL) của trang web. Ví dụ, nếu bạn  tạo ra 2 trang (tạm gọi là page1.htm và page2.htm) và lưu chúng trong cùng một thư mục, bạn có thể tạo ra một liên kết từ trang này đến trang kia chỉ bằng cách nhập đúng tên tập tin của trong liên kết. Trong trường hợp cụ thể một liên kết từ trang page1.htm đến page2.htm chỉ cần thực hiện như sau:

Ví dụ 2:
<a href="page2.htm">Nhấp chuột vào đây để xem trang 2</a>

Nếu trang page2.htm được đặt trong một thư mục con có tên là “subfolder” liên kết sẽ như sau:

Ví dụ 3:
<a href="subfolder/page2.htm">Nhấp chuột vào đây để xem trang 2</a>

Trong trường hợp ngược lại, page2.htm muốn liên kết đến page1, URL sẽ như sau:

Ví dụ 4:
<a href="../page1.htm">Nhấp chuột vào đây để xem trang 1</a>	

../” để chỉ đến thư mục trên một cấp so với vị trí hiện hành của tập tin. Tương tự nếu trên 2 cấp bạn có thể dùng như sau “../../“.

Để hiểu rõ hơn về các trường hợp kể trên bạn nên tìm hiểu về đường dẫn tuyệt đối (absolute path – ví dụ 1) và  đường dẫn tương đối (relative path – ví dụ 2,3,4) ở các lớp vi tính cơ bản.

Những liên kết nội bộ chỉ trên cùng một trang Web sẽ được thực hiện như thế nào?

Bạn có thể tạo ra các liên kết nội bộ ở trên cùng một trang Web, thí dụ bạn có một bản mục lục các nội dung ở đầu trang và bạn cần các liên kết đến các mục con nằm bên dưới trên cùng một trang đó, bạn có thể dùng thuộc tính rất hữu dụng là id (identification) và ký tự là “#” (hash)

Sử dụng thuộc tính id để đánh dấu phần tử mà bạn muốn liên kết đến, ví dụ:

<h1 id="heading1">heading 1</h1>

Bây giờ bạn cần tạo một liên kết đến phần tử đó bằng cách sử dụng dấu “#” trong phần thuộc tính của liên kết. Dấu “#” phải đứng trước id của thẻ mà bạn gắn liên kết:

<a href="#heading1">Link to heading 1</a>

Tất sẽ rõ ràng ở ví dụ sau:

Ví dụ 5:
<html> 

<head> 
</head> 

<body> 
<p><a href="#heading1">Link to heading 1</a></p> 
<p><a href="#heading2">Link to heading 2</a></p> 



<h1 id="heading1">heading 1</h1> 
<p>Text text text text</p> 



<h1 id="heading2">heading 2</h1> 
<p>Text text text text</p> 
</body> 

</html>

bạn sẽ thấy trên trình duyệt giống như dưới đây, hãy nhấp chuột vào liên kết:

Link to heading 1

Link to heading 2

Heading 1

Text text text text

Heading 2

Text text text text

Chú ý: Một thuộc tính id luôn phải có tên bắt đầu là một ký tự

Có còn các liên kết nào khác?

Bạn có thể tạo ra một liên kết đến địa chỉ email. Nó giống như khi bạn liên kết đến một trang tài liệu:

Example 6:
<a href="mailto:nobody@thietke.website>Gởi email đến thietke.website</a>

trên trình duyệt bạn sẽ thấy giống như dưới đây

Sự khác nhau giữa liên kết đến một tập tin và đến một email đó là thay vì gõ đầy đủ địa chỉ tài liệu thì bạn chỉ cần nhập vào mailto: và theo sau là một địa chỉ e-mail. Khi bạn nhấp chuột vào liên kết, chương trình email mặc định sẽ được mở lên ở chế độ đang soạn thảo với dòng địa chỉ gởi đi là email đã được gắn trong liên kết. Lưu ý chức năng này chỉ hoạt động nếu người xem đã cái đặt sẳn trong máy tính một chương trình duyệt email mặc định.

Còn có các thuộc tính nào tôi cần lưu ý?

Khi tạo ra một liên kết, bạn nên luôn sử dụng thuộc tính  href. Thêm vào đó, bạn cần thêm  thuộc tính title trong liên kết

Ví dụ 7:
<a href="http://thietke.website/" title="Đến xem trang thietke.website">Trang thietke.website</a>

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

Thuộc tính title là một loại mô tả sơ lược về liên kết của bạn, nếu bạn đừng nhấp chuột, chỉ để con trỏ lên liên kết, bạn sẽ thấy dòng chữ “Đến xem trang thietke.website”

 Bài kế tiếp