Chào các bạn ! Sau khi về quê nghỉ ngơi và xả strees, mình đã có lại cảm hứng để tiếp tục mọi việc. Hôm nay mình xin viết tiếp chuỗi bài về tự học lập trình blog, website. Qua bài viết trước, các bạn đã biết đến thẻ liên kết a, và qua bài viết này các bạn sẽ biết thêm về TABLE - thẻ dùng tạo bảng biểu trong HTML

Trong Word, table được tạo nên bởi hàng và cột thì trong HTML table cũng được tạo nên khi có 2 yếu tố đó. Trước đây, khi lập trình web, đa số đều sử dụng table để dàn trang vì dễ và tính hiệu quả của nó tương đối ổn. Ở Blogspot, không có nút như Word để tạo bảng nhanh, vì vậy, vì đặc thù công việc thì việc nhớ code tạo bảng sẽ rất có ích.

Cú pháp:
<table>...</table>
- Mỗi dòng trong bảng được tạo ra bởi thẻ <tr>...</tr>
- Mỗi ô được định nghĩa bởi thẻ <td>...</td>
- Tiêu đề của dòng hoặc cột được định nghĩa bởi thẻ <th>...</th>

* Dữ liệu trong các ô có thể là hình ảnh, âm thanh, văn bản, hoặc cũng có thể chứa một bảng khác.

Mình xét một ví dụ:

<table border="1">
<tr><!-- dòng 1 -->
      <td>Buổi</td> <!-- ô 1-->
      <th>Sáng</th>
      <th>Chiều</th>
      <th>Tối</th>
</tr>
<tr><!-- dòng 2 -->
      <th>Công việc</th>
      <td>Đi học</td>
      <td>Học tiếng anh</td>
      <td>Làm bài tập</td>
</tr>
</table>

Buổi	Sáng	Chiều	Tối
Công việc	Đi học	Học tiếng anh	Làm bài tập

Nhìn vào bảng hiển thị, các bạn có thể sẽ rõ hơn chức năng của từng thẻ trong bảng, tuy nhiên vẫn còn những thuộc tính chúng ta cần nắm:
Thẻ <TABLE> bao gồm các thuộc tính:

• border  : xác định độ dày đường kẻ bảng, như ví dụ trên là 1px.
• align : dùng để căn lề, có 3 giá trị: left, center, right. Không hỗ trợ trong HTML5
• background: xác định ảnh nền.
• bgcolor : xác định màu nền.Không hỗ trợ trong HTML5
• height, width : xác định chiều cao và độ rộng bảng, giá trị có thể là px(pixels) hoặc %.
• cellspacing : xác định khoảng cách giữa các ô. Không hỗ trợ trong HTML5
• cellpadding: xác định khoảng cách giữa dữ liệu trong ô và các cạnh của ô.Không hỗ trợ trong HTML5

>>Xem ví dụ về <TABLE>

Trong thẻ table có các thẻ con cấu thành nó, bao gồm:
Thẻ <TR> : (Table Rows): tạo ra các dòng cho bảng.

*Thuộc tính: 

• align: căn lề cho các ô trong cùng một dòng. Không hỗ trợ trong HTML5.
• valign: căn lề theo chiều dọc. có các giá trị : "top" - trên ; "middle" - trung  tâm ; "bottom" - dưới.; "baseline" - viết cách trên 1 dòng cơ bản. Không hỗ trợ trong HTML5.
• bgcolor: xác định màu nền cho dòng. Không hỗ trợ trong HTML5.

>>Xem ví dụ về <TR>

Thẻ <TH> : (Table Heading cell) - Tạo tiêu đề cho 1 ô hoặc 1 dòng.
Thẻ <TD> : (Table Data) - Tạo 1 ô dữ liệu.

* Thuộc tính:

• align, valign: căn lề cho dữ liệu theo chiều ngang, chiều dọc. Không hỗ trợ trong HTML5.
• background, bgcolor: xác định ảnh nền, màu nền cho ô dữ liệu. Không hỗ trợ trong HTML5.
• height, width: xác định chiều cao, chiều dài của ô. Không hỗ trợ trong HTML5.
• rowspan: xác định phạm vi mở rộng của ô theo hàng. Không hỗ trợ trong HTML5.
• colspan: xác định phạm vi mở rộng của ô theo cột. Không hỗ trợ trong HTML5.

>> Xem ví dụ về <TH><TD>

Hiện nay, thẻ table còn có các thẻ con quy định vị trí của từng phần trong bảng:
<thead> : quy định dữ liệu sẽ luôn ở trên cùng của bảng, thường làm tiêu đề của cột.
<tbody>: quy định dữ liệu phần giữa bảng, sau thẻ </thead>
<tfoot>: quy định dữ liệu cuối bảng.

* Thuộc tính:

• align, valign: căn lề cho dữ liệu theo chiều ngang, chiều dọc. Không hỗ trợ trong HTML5.
• background, bgcolor: xác định ảnh nền, màu nền cho phần tử bảng. Không hỗ trợ trong HTML5.
• height, width: xác định chiều cao, chiều dài của phần tử bảng. Không hỗ trợ trong HTML5.

Để phân biệt các thẻ này, trình duyệt tự động tạo ra đường viền lớn hơn giao giữa 3 phần và đặc biệt, dù bạn có sắp xếp lộn xộn các thẻ này cho nhau thì trình duyệt sẽ vẫn hiện đúng

Bạn xem qua ví dụ đây

Thực hành tại đây :)

Cảm ơn mọi người đã đọc bài viết, hẹn gặp lại ! Thân !

Xem Chi Tiết…

Hôm nay mình sẽ gửi tới các bạn bài hướng dẫn ghép hình bằng PhotoShop. Bài viết được thực hiện trên PTS CS5, các bản khác cũng làm tương tự. Bài viết sẽ hướng dẫn các Bạn thực hiện 1 cách chi tiết để xây dựng 1 "Bức tranh" bằng PhotoShop. Vì để cho tất cả các Bạn ai cũng hiểu và thực hiện được nên bài viết sẽ có phần dài dòng và chi tiết.

Để tránh làm mất thời gian chúng ta sẽ đi thẳng vào vấn đề:

Chúng ta chuẩn bị 1 hình ảnh làm nền ban đầu ( Hình 1): 

Hình 1.

khởi động Photoshop và mở hình đó. Save lại với tên file: Ghephinh.PSD

Hình 2.

Tiếp theo chúng ta sẽ ghép vào 1 con đường, Ở đây chúng ta sẽ chọn hình này: Duong.jpg (Hình 3)

Hình 3

Mở file Duong.jpg bằng Photoshop, Move sang file Ghephinh, trở thành Layer 1. Ta được kết quả ở Hình 4:

Hình 4

Bây giờ chúng ta cần phải loại bỏ nền trắng 2 bên con đường, chỉ giữ lại con đường với bờ có xanh 2 bên. Chúng ta sẽ sử dụng hiệu ứng CHANNELS để lọc bỏ nền trắng với Layer 1. Thực hiện như sau:

 Đầu tiên: Tắt con mắt ở Layer Background để hiển thị mình Layer 1 (Hình 5)

Hình 5

Chọn Layer 1 và chuyển sang Tab CHANNELS (Hình 6):

Hình 6

Ở đây, chúng ta thấy kênh Blue có màu sắc tương phản với nền nhất, vì thế chúng ta chỉ bật con mắt ở kênh Blue, sau đó rê chuột, nhân đôi Layer Blue và đặt tên kênh mới nhân lên là Matna (Hình 7)

Hình 7

Bây giờ chúng ta sẽ làm việc với mình Layer Matna.

Trên kênh Matna: Nhấn Ctrl + L để mở hộp thoại Levels,  thay đổi các thông số trong hộp thoại Levels sao cho sự tưởng phản giữa 2 màu trắng đen là rõ nhất như trong hình 8 và nhấn OK.

Hình 8.

Bây giờ phần nền và hình đã có sự tương phản đen trắng và sắc nét.

Ý đồ là chúng ta tô màu đen cho hình và màu trắng cho nền. sau đó dùng Layer Matna để tạo Mask.

Tiếp theo chúng ta dùng công cụ Polygonal Lasso Tool

(Phím tắt L):

Để tạo vùng chọn trong khu vực hình, vùng cỏ 2 bên không cần chọn hết vì vùng này đã chuyển sang màu đen gần hết (Hình 9).

  Hình 9.

Tiếp theo nhấn phím D để đưa màu sắc về mặc định đen/trắng và chú ý đảo màu đen lên trên

Nhấn tổ hợp phím Alt + Delete để tô màu đen cho vùng chọn lúc nãy chúng ta đã khoanh vùng. Nhấn Ctrl + D để bỏ vùng chọn, chúng ta có hình 10

Hình 10.

Dùng công cụ Zoom (Phím Z) để Zoom to hình và kiểm tra các mép viền xung quanh, chỗ bờ cỏ 2 bên giáp nhau với nền, tại những điểm còn sót, chúng ta dùng công cụ Burn Tool (Phím tắt O) và để chế độ Shadows trên thanh công cụ, Exposure khoảng 50%, tô hết vùng hình để được 1 khối màu đen thuần khiết (Hình 11).   

Hình 11

Bây giờ chúng ta tắt con mắt ở kênh Matna và bật con mắt tất cả các kênh khác lên, Nhấn Ctrl kết hợp với Click chuột trái vào kênh Matna để lấy vùng chọn là màu trắng của kênh Matna, nhấn Shift + F7 để đảo màu.

Chuyển lại Tab LAYERS, Bật hết con  mắt ở các Layer lên, chọn vào Layer 1 (Chứa hình con đường và nhấn vào biểu tượng tạo Mask. Ta được hình con đường đã được loại bỏ nền (Hình 12). Chúng ta có thể xóa kênh Matna đã tạo lúc nãy.

Hình 12.

Bây giờ, chúng ta có thể thêm các hình ảnh khác vào để tấm hình thêm sinh động.

Chọn 1 chiếc xe đạp và thêm chiếc xe vào hình

tạo thành Layer 2 (Hình 13):

Hình 13

Giờ chúng ta cần tạo bóng đổ cho chiếc xe đạp.

Nhấn Ctrl + Shift + N để tạo 1 Layer mới và rỗng, đặt tên là Layer 3. Đưa Layer 3 xuống phía dưới Layer 2 và chọn chế độ hòa trộn Multiply (Hình 14).

Hình 14.

Khi vẫn đang ở Layer 3, Nhấn Ctrl và Click chuột trái vào ô Thumbnail của Layer 2, một vùng chọn mới trên Layer 3 được tạo ra là vùng hình ảnh của Layer 2.

Nhấn ALT + Delete để tô màu cho vùng chọn trên Layer 3, sau đó nhấn Ctrl + D để bỏ vùng chọn đó. Bây giờ chúng ta đã được 1 hình màu đen là hình dạng của chiếc xe đạp của Layer 2 trên Layer 3 (Hình 15).

 Hình 15

Trên Layer 3, Nhấn Ctrl + T, Click chuột phải chọn Distort (Hình 16)

Hình 16.

Đưa chuột vào các góc, Xô cho hình mà đen giống với cái bóng của xe trải trên đường và nhấn OK. Sau đó cho Opacity của Layer 3 là khoảng 60% (hình 17).

Hình 17.

Vào Filter/Blur/Gaussian Blur...

Hộp thoại Gaussian Blur hiện ra, Lấy Radius là 4 và nhấn OK để làm cho bóng đổ bị nhòe đi một chút.

Dùng công cụ Eraser Tool, Opacity khoảng 20% để xóa cho bóng đổ mờ dần. Ta được bóng đổ hoàn chỉnh cho chiếc xe đạp (Hình 18).

 Hình 18.

Tiếp theo: Chọn 1 tấm hình người để đưa vào bức hình, làm cho bức hình thêm sinh động. Ở đây ta chọn và tách tấm hình này để đưa vào (Hình 19).

 Hình 19.

Đưa tấm hình 2 người vào bức ảnh, tạo ra 1 Layer mới đặt tên là Layer 4 (Hình 20).

Hình 20.

Dùng công cụ Pen (Phím P) để tạo 1 vùng bao quanh nhân vật. Sau đó nhấn Ctrl + Enter để tạo thành vùng chọn (Hình 21):

 Hình 21

Một vùng chọn được bao quanh nhân vật, Chúng ta không khoanh vùng tóc mà sẽ để riêng vùng tóc để tách riêng tóc ra cho sắc nét.

Nhấn Shift + F7 để đảo vùng chọn, Nhấn tiếp Shift + F6 để lấy Feather, Hộp thoại Feather hiện ra nhập Feather là 0.5.

Nhấn Dalete để xóa toàn bộ vùng nền bao quanh nhân vật (Hình 22).

Hình 22.

Nhấn Ctrl + T và thu nhỏ nhân vật về kích thước phù hợp (Có thể Convert To Smart Object trước khi thu nhỏ cho ảnh sắc nét hơn).

Bây giờ chúng ta sẽ tiến hành tách tóc và làm bóng đổ cho nhân vật, cách làm bóng đổ chúng ta sẽ làm tương tự như làm với xe đạp, còn tách tóc chúng ta sẽ thực hiện lần lượt từng bước:

Dùng công cụ Lasso Tool, khoanh 1 vùng quang đầu 2 nhân vật, đây là vùng chứa tóc và phần nền ban đầu ta chưa xóa.

Sau đó nhấn Ctrl + J để Copy vùng chọn ra 1 Layer mới là Layer 5 chứa mình vùng chọn chúng ta mới khoanh. Đưa Layer 5 xuống dưới Layer 4:

  Tắt hiển thị Layer 4, Chọn chế độ hòa trộn Multiply cho Layer 5. Nhấn Ctrl +L để mở hộp thoại Levels, chọn thông số như hình để tăng cường tương phản giữa tóc và nền trên layer 5:

Bật hiển thị và chọn lại Layer 4, dùng Công cụ Eraser (Phím E) và xóa nền trắng còn lại trên Layer 4, có thể xóa phạm 1 chút vào phần tóc, phần bị xóa sẽ được tóc trên Layer 5 bù vào. Kết quả sau khi xóa xong:

Và bức hình sau khi xóa nền và tạo bóng đổ cho nhân vật:

Thêm vào chiếc khinh khí cầu cho bức ảnh: 

Đưa vào trong hình được Layer 6 chứa Khinh khí cầu, nhấn ALT đồng thời rê chuột để Copy ra làm 2 hình, đặt là Layer 7 thu nhỏ lại để có kích thước phù hợp.

Chúng sẽ thêm khóm hoa vào trong hình để tấm hình được đẹp hơn:

Kết quả sau khi đã thêm khóm hoa và chiếc khing khí cầu:

Kết quả cuối cùng khi ta thêm 1 cành lá màu xanh cho tấm hình thêm sức sồng:

--->> OK

Tới đây thì mỏi tay rồi! Chúc mọi người có những trải nghiệm thú vị!

File PDF Download:  http://adf.ly/cgg44

Xem Chi Tiết…

Cách chèn code vào bài viết

 | Nếu bạn cần chèn đoạn code gì đó vào bài viết trong Blogger/blogspot theo cách thông thường sẻ rất mất thẩm mỹ và khó cho người lấy để sử dụng hoặc có thể xảy ra lỗi gì đây, vì vậy mình giới thiệu tới bạn những code box khá đẹp và phong cách.

Các bước để thực hiện

• 1. Vào bảng điều khiển --> Mẫu -->Chỉnh sữa HTML
• 2. Sử dụng Ctrl + F tìm đến thẻ ]]></b:skin>
• 3. Chọn kiểu mà bạn thích dưới đây và chèn vào bên trên thẻ ]]></b:skin>

Style 1

#BLTextbox1 {
font-family:'Century Gothic',futura,'URW Gothic L',Verdana,sans-serif;font-weight:normal;font-style:normal;font-size:16px;
padding-left:10px;padding-top:12px;padding-bottom:12px;padding-right:10px; margin-top:15px;margin-bottom:15px;
color:black;background:#77A8E0;
overflow:auto;
width:550px;height:auto;max-height:300px;
border:2px solid #878787;
-moz-transition:all .8s linear ;
-webkit-transition:all .8s linear ;
-o-transition:all .8s linear ;
transition:all .8s linear ;
}
#BLTextbox2 p {width:100%; }
#BLTextbox2:hover {
background:#71A4DF;
border-color:#F1D66B;
-moz-transition:background .4s ease-in 20ms;
-webkit-transition:background .4s ease-in 20ms;
-o-transition:background .4s ease-in 20ms;
transition:background .4s ease-in 20ms;
}

Khi cần chèn vào bài viết bạn sử dụng code dạng sau ở chế độ html trong bài viết

<div id="BLTextbox1">
<p>
code của bạn đặt ở đây....
</p>
</div>

Style 2

#BLTextbox2 {
font-family:'Century Gothic',futura,'URW Gothic L',Verdana,sans-serif;font-weight:normal;font-style:normal;font-size:15px;
padding-left:10px;padding-top:5px;padding-bottom:5px;padding-right:10px; margin-top:15px;margin-bottom:15px;
color:#626279;background:rgba(230,189,66,0.8);
overflow:auto;
width:550px;height:auto;max-height:300px;
border:2px solid #878787;
filter:alpha(opacity=75%);
-moz-opacity:0.75;-khtml-opacity:0.75;
opacity:0.75;
-moz-transition:all .8s ease ;
-webkit-transition:all .8s ease ;
-o-transition:all .8s ease ;
transition:all .8s ease ;
}
#BLTextbox3 p {width:100%; }
#BLTextbox3:hover {
background:#E9C845;
border-color:#cc2196;
-moz-transition:background .4s ease-in 20ms;
-webkit-transition:background .4s ease-in 20ms;
-o-transition:background .4s ease-in 20ms;
transition:background .4s ease-in 20ms;
}

Sử dụng trong bài viết

<div id="BLTextbox2">
<p>
code của bạn đặt ở đây.......
</p>
</div

Style 3

#BLTextbox3 {
font-family:'Arial Narrow','Nimbus Sans L',sans-serif;
padding-left:10px;padding-top:2px;padding-bottom:4px;padding-right:10px; margin-top:15px;margin-bottom:15px;
color:#212121;background:#CBCAC7;
overflow:auto;
width:550px;height:auto;max-height:300px;
border:2px solid #ACABA7;
border-radius:8px;-moz-border-radius:8px;-webkit-border-radius:8px;
-moz-transition:all .8s linear ;
-webkit-transition:all .8s linear ;
-o-transition:all .8s linear ;
transition:all .8s linear ;
}
#BLTextbox4 p {width:100%; }
#BLTextbox4:hover {
background:#BFBFBE;
border-color:#C49782;
-moz-transition:background .4s cubic-bezier 20ms;
-webkit-transition:background .4s cubic-bezier 20ms;
-o-transition:background .4s cubic-bezier 20ms;
transition:background .4s cubic-bezier 20ms;
}

Sử dụng trong bài viết

<div id="BLTextbox3">
<p>
code của bạn đặt ở đây.......
</p>
</div>

Style 4

#BLTextbox4 {
font-family:'Arial Narrow','Nimbus Sans L',sans-serif;
padding-left:12px;padding-top:2px;padding-bottom:4px;padding-right:10px; margin-top:15px;margin-bottom:15px;
color:#555555;background:#ccc;
width:550px;height:auto;max-height:350px;
overflow:auto;
border:2px dotted #59903E;
-moz-opacity:0.75;
-khtml-opacity:0.75;
filter:alpha(opacity=75%);
opacity:0.75;
-moz-transition:all .9s ease-in-out ;
-webkit-transition:all .9s ease-in-out ;
-o-transition:all .9s ease-in-out ;
transition:all .9s ease-in-out ;
}
#BLTextbox11 p {width:100%;}
#BLTextbox11:hover {
background:#ccc;
color:#333;
filter:alpha(opacity=97%);
-moz-opacity:0.97;
-khtml-opacity:0.97;
opacity:0.97;
-moz-transition:all .3s ease-in ;
-webkit-transition:all .3s ease-in ;
-o-transition:all .3s ease-in ;
transition:all .3s ease-in ;
}

Áp dụng vào bài viết

<div id="BLTextbox4">
<p>
Code của bạn ở đây
</p>
</div

Xem Chi Tiết…