Thực hành HTML và CSS

Hôm nay JaL sẽ hướng dẫn các bạn thực hành với HTML và CSS.

Nội dung bài này sẽ gồm có:

1. Chèn hình vào Blog.
2. Canh chỉnh chữ trong Y!Mash (Đừng xem thường, hehe)

OK, chúng ta bắt tay vào làm bài nèo. Nhưng trước hết xin mời các bạn ôn lại bài cũ

• Căn bản CSS (Ứng dụng trên Y!Mash)
• Một số tag HTML thường sử dụng

1. Chèn hình vào Blog:

Có thể 1 số bạn cho rằng bài viết này là hơi dư, nhưng bạn khoan hẵng nóng vội.

Như các bạn đã biết, cách chèn hình vào blog khá là đơn giản.

<img src=”link hình />

Hoặc <img src=”link hình”></img>

Thật đơn giản phải không, nhưng kết quả là ….

Như thế này đây >”<

Nhưng như vậy thì quá xấu phải không nào ?

Chúng ta muốn hình nằm bên phải, và dòng chữ nằm xung quanh bao gọn tấm hình như thướng thấy khi ta làm word, hoặc trên các web báo chí online

Ok, nếu như bạn đã từng học html hoặc qua trường lớp, và như JaL được biết đến hơn 90% website VN ngày nay vẫn dùng cách này, đó là sử dụng table trong trường hợp này.

Hãy xem source của trang web vừa rồi.

   1: <td>

   2: <p class="Title">Kỷ lục mới của Internet2 là 100 Gb/giây</p>

   3: <table align="left" border="0" cellpadding="3" cellspacing="0" width="1">

   4: <tbody><tr>

   5: <td><img alt="Ảnh: Info.gov.hk." src="Net2.jpg" border="1" height="100" width="130"></td></tr>

   6: <tr>

   7: <td class="Image" align="right">Ảnh: <em>Info.gov.hk</em>.</td></tr></tbody></table>

   8: <p class="Lead">Mạng siêu tốc này đạt tốc độ 10 Gb/giây, nhanh hơn hàng nghìn lần so với kết nối băng rộng tại gia đình. Sử dụng 10 bước sóng ánh sáng qua một cáp đơn, các nhà cung cấp có thể tăng tổng băng thông lên 100 Gb/giây.</p>

   9: <p class="Normal">Nhờ đó, phim <em>The Matrix</em> chất lượng cao sẽ được tải trong nháy mắt thay vì nửa phút nếu dùng mạng <a href="/Vietnam/Vi-tinh/2004/09/3B9D6353/" class="Normal">Internet2 cũ</a> hay vài giờ qua đường broadband hiện nay.</p>

  10:  

  11: <p class="Normal">Trong buổi thử nghiệm hôm 9/9, tiến sĩ Carl Lundstedt thuộc Đại học Nebraska-Lincoln (Mỹ) đã thiết lập đường truyền kết nối trường này với khu nghiên cứu Fermilab ở Batavia, Illinois và gửi đi 1/3 terabyte dữ liệu trong 5 phút.</p>

  12: <p class="Normal">Internet2, do hãng truyền thông Level 3 Communications (Mỹ) quản lý và hoạt động song song với mạng Internet thông thường, giúp hơn 200 trường đại học, cơ quan chính phủ và khu công nghiệp Mỹ chia sẻ những khối lượng thông tin lớn với nhau theo thời gian thực. </p>

  13: <p class="Normal">Mỗi đơn vị này được trang bị 10 bộ kết nối 10 Gb/giây, mỗi bộ hoạt động trên một bước sóng riêng, cộng lại thành băng thông 100 Gb/giây. Các nhà phát triển Internet2 cho hay trong thời gian tới, họ có thể nâng cấp mạng lên 100 bước sóng.</p>

  14: <p class="Normal" align="right"><strong>Phương Thúy</strong> (theo <em>ArsTechnica</em>)</p>

  15: </td>

Đây là đoạn code dùng để trình bày cho bài báo http://vnexpress.net/Vietnam/Vi-tinh/2007/10/3B9FB243/

Poor them, các bạn hãy để ý, từ dòng 3 đến dòng 5, ta sẽ có 1 table <table> </table>  bao gồm 2 dòng <tr> </tr> 1 cột <td> </td> được tạo ra chỉ để … chèn 1 tấm hình vào bài viết T_T. Và cứ 1 tấm hình như vậy, ta sẽ phải có … 1 table T_T.

Còn đây là kĩ thuật của JaL, và cũng là modern solution cho vấn đề này.

Ta hãy mở CT soạn thảo CSS lên nào.

Ta sẽ làm tấm hình nằm bên trái của đoạn văn tương tự như trang vừa rồi.

Hãy ghõ vào:

   1: .img-left{

   2: float:left;

   3: }

Sau đó copy và paste vào Y!Mash của bạn (Thêm vào code cũ của bạn nhé, đừng xóa code cũ đi)
OK, ta hãy bắt đầu 1 viết code HTML nào:

   1: <p class="Title">Kỷ lục mới của Internet2 là 100 Gb/giây</p>

   2: <img alt="Ảnh: Info.gov.hk." src="http://vnexpress.net/Vietnam/Vi-tinh/2007/10/3B9FB243/Net2.jpg" border="1" height="100" width="130" class="img-left">

   3: <td class="Image" align="right">Ảnh: <em>Info.gov.hk</em>.</td></tr></tbody></table>

   4: <p class="Lead">Mạng siêu tốc này đạt tốc độ 10 Gb/giây, nhanh hơn hàng nghìn lần so với kết nối băng rộng tại gia đình. Sử dụng 10 bước sóng ánh sáng qua một cáp đơn, các nhà cung cấp có thể tăng tổng băng thông lên 100 Gb/giây.</p>

   5: <p class="Normal">Nhờ đó, phim <em>The Matrix</em> chất lượng cao sẽ được tải trong nháy mắt thay vì nửa phút nếu dùng mạng <a href="/Vietnam/Vi-tinh/2004/09/3B9D6353/" class="Normal">Internet2 cũ</a> hay vài giờ qua đường broadband hiện nay.</p>

   6:  

   7: <p class="Normal">Trong buổi thử nghiệm hôm 9/9, tiến sĩ Carl Lundstedt thuộc Đại học Nebraska-Lincoln (Mỹ) đã thiết lập đường truyền kết nối trường này với khu nghiên cứu Fermilab ở Batavia, Illinois và gửi đi 1/3 terabyte dữ liệu trong 5 phút.</p>

   8: <p class="Normal">Internet2, do hãng truyền thông Level 3 Communications (Mỹ) quản lý và hoạt động song song với mạng Internet thông thường, giúp hơn 200 trường đại học, cơ quan chính phủ và khu công nghiệp Mỹ chia sẻ những khối lượng thông tin lớn với nhau theo thời gian thực. </p>

   9: <p class="Normal">Mỗi đơn vị này được trang bị 10 bộ kết nối 10 Gb/giây, mỗi bộ hoạt động trên một bước sóng riêng, cộng lại thành băng thông 100 Gb/giây. Các nhà phát triển Internet2 cho hay trong thời gian tới, họ có thể nâng cấp mạng lên 100 bước sóng.</p>

  10: <p class="Normal" align="right"><strong>Phương Thúy</strong> (theo <em>ArsTechnica</em>)</p>

Ờ dòng 2 như các bạn thấy, toàn bộ table, tr, td đều đã bị JaL remove đi, thay vào đó là class img-left cho 1 div bao quanh tấm hình và dòng chú thích.

Vậy vấn đề ở đây chính là đoạn CSS của chúng ta, chính thuộc tính float:left xác định rằng div chứa tấm hình sẽ nằm bên phải và được các thành phần xung quanh bao bọc lấy . Ta cũng có thể sử dụng float:right để nằm tấm hình nằm bên phải 1 cách dễ dàng.

Tuy nhiên … kết quả vẫn chưa như ý ta muốn :-<, tấm hình nằm quá sát những chữ xung quanh, hãy giải quyết vấn đề này đơn giản bằng cách thêm padding cho div như sau:

   1: .img-left{

   2: float:left;

   3: padding:0 5px;

   4: }

Nếu bạn vẫn có nhớ bài trước, thì bạn sẽ biết rằng ở đây ta đang qui định padding-top:0px, right:5px, bottom:0px, và left :5px;

Save lại đoạn code của ta và … yeah ^^, (JaL không test nên có thể pading hơi lớn, các bạn có thể để 2px thử)

Simply ? Và bạn có thể sử dụng <div class=”img-left”></div> cho bất cứ chỗ nào bạn muốn, cho dù là hình, hay chữ

Đây là 1 số kết quả :

Như bạn thấy tấm hình đã nằm như ta mong muốn

 

 

 

 

 

Và tương tự cho chữ I (Drop cap effect, like word ý ^^ )

Nhưng, hãy khoan mừng vội … Chúng ta có 1 lỗi nhỏ ở đây …

Khi đoạn văn của bạn ngắn hơn tấm hình … thì những đoạn văn sau vẫn bị tấm hình chèn, không xuống đoạn mới được ( .

Thông thường cách đơn giản nhất là … thêm tag <br /> (Xuống hàng) cho đến hết độ dài của tấm hình .

Nhưng … cách đó đã quá xưa rồi, hãy dùng phương pháp chính thức được sử dụng rộng rãi ngày nay .

Và với phương pháp này … bạn chẳng cần làm gì nhiều . Y!Mash đã làm sẵn, ta chỉ việc sử dụng, ka ka ka, vì chính Y!Mash cũng dùng phương pháp này ý :”>.

Sau khi inspect sườn CSS của Y!Mash, JaL phát hiện ra chính class clearfix làm điều này, hehe

Và đây là code HTML đạt được

   1: <p class="Title">Kỷ lục mới của Internet2 là 100 Gb/giây</p>

   2: <div class="clearfix"><div class="img-left"><img alt="Ảnh: Info.gov.hk." src="http://vnexpress.net/Vietnam/Vi-tinh/2007/10/3B9FB243/Net2.jpg" border="1" height="100" width="130"></div>

   3: <p class="Lead">Mạng siêu tốc này đạt tốc độ 10 Gb/giây, nhanh hơn hàng nghìn lần so với kết nối băng rộng tại gia đình. Sử dụng 10 bước sóng ánh sáng qua một cáp đơn, các nhà cung cấp có thể tăng tổng băng thông lên 100 Gb/giây.</p>

   4: <p class="Normal">Nhờ đó, phim <em>The Matrix</em> chất lượng cao sẽ được tải trong nháy mắt thay vì nửa phút nếu dùng mạng <a href="/Vietnam/Vi-tinh/2004/09/3B9D6353/" class="Normal">Internet2 cũ</a> hay vài giờ qua đường broadband hiện nay.</p>

   5: </div>

   6: <!--Tui mún chỗ này ngắt đoạn văn mùm -->

   7: <p class="Normal">Trong buổi thử nghiệm hôm 9/9, tiến sĩ Carl Lundstedt thuộc Đại học Nebraska-Lincoln (Mỹ) đã thiết lập đường truyền kết nối trường này với khu nghiên cứu Fermilab ở Batavia, Illinois và gửi đi 1/3 terabyte dữ liệu trong 5 phút.</p>

   8: <div class="img-left"><font size="+6">I</font></div>

   9: nternet2, do hãng truyền thông Level 3 Communications (Mỹ) quản lý và hoạt động song song với mạng Internet thông thường, giúp hơn 200 trường đại học, cơ quan chính phủ và khu công nghiệp Mỹ chia sẻ những khối lượng thông tin lớn với nhau theo thời gian thực.Mỗi đơn vị này được trang bị 10 bộ kết nối 10 Gb/giây, mỗi bộ hoạt động trên một bước sóng riêng, cộng lại thành băng thông 100 Gb/giây. Các nhà phát triển Internet2 cho hay trong thời gian tới, họ có thể nâng cấp mạng lên 100 bước sóng.

  10: <p class="Normal" align="right"><strong>Phương Thúy</strong> (theo <em>ArsTechnica</em>)</p>

, đơn giản phải không nào

Nói tóm lại ta sẽ có code như sau:

   1: <div class="clearfix">

   2:     <div class=img-left"><img src="link hình" /></div>

   3:     Nội dung ở đây

   4: </div>

   5: Và đây là một đoạn văn khác không bao quanh tấm hình

Thật đơn giản !!!

2. Canh chỉnh chữ trong blog

Tôi muốn chia khung Y!Mash tui thành 3 cột.

Tui thì mún 2 cột.

Tui mún 5 cột lun ( siD, tham thế =.=”)

Tui mún chữ canh trái, nằm ở giữa, canh phải, canh đều 2 bên lề (justify)

Tui mún chữ … etc và etc …

=.=” Tất cả sẽ được giả đáp ở đây.

2 cột, 3 cột, 5 cột, bao nhiêu có bấy nhiêu

Hãy tận dụng lại những thứ đã dùng ở bài 1

   1: <div class="clearfix">

   2:     <div class="img-left" style="width:50%">Nội dung cột 1</div>

   3:     <div class="img-left" style="width:50%">Nội dung cột 2</div>

   4: </div>

CSS:

   1: .img-left{

   2: float:left;

   3: padding:0 5px;

   4: width:50%;

   5: }

Nếu bạn muốn có 3 cột 4 cột, bạn chỉ việc lặp lại div có class=”text-left”, và tính % kích thước, xong , so clear, so fun

Và ta cũng học được thêm 1 điều nữa, bạn có thấy dòng style=”width:50%” chứ, đây là 1 cách khác để gán style vào cho 1 đối tượng (Phần 1 bài tut CSS mình có nói ý)

Ứng dụng : Hãy thử trình bày 1 bài thơ như thế này xem nào:

 

Đọc thêm trong ngày hôm nay:

http://www.w3schools.com/css/css_background.asp

http://www.w3schools.com/css/css_text.asp

http://www.w3schools.com/css/css_font.asp

 

Ngoài ra các bạn cũng có thể đọc thêm các bài khác, nhưng JaL khuyên nên đọc 3 bài này trước để kịp tiêu hóa, và 3 bài này cũng liên quan chặt chẽ đến bài viết của chúng ta hôm nay :d.