Học HTML cơ bản -Bài 13

Học HTML cơ bản -Bài 13

Thứ Năm, 18 tháng 8, 2016 / No Comments

Học HTML cơ bản : Đưa web lên google

Bài 13: Tải Trang Web Lên Internet

Nếu bạn đã hoàn thành một website nhỏ cho mình qua các bài đã học, đây là lúc bạn nên tải nó lên internet để mọi người cùng xem.

1.TÔI PHẢI CẦN CHUẨN BỊ NHỮNG GÌ?

Trước hết, bạn cần có một nơi lưu trữ trên internet (hosting) và một chương trình FTP.

Ở  khuôn khổ đang trong quá trình học, bạn có thể đăng ký một số dịch vụ hosting miễn phí, ví dụ như www.000webhost.com bạn có thể đăng ký  miễn phí. Sau khi đăng ký bạn sẽ nhận email kích hoạt, được thông tin địa chỉ trang Web tương lai của bạn sẽ được tải lên ví dụ như http://baitapwebsite.site90.com và thông tin máy chủ cùng với tên đăng nhập và mật khẩu. Bên dưới là một bảng quản trị hosting (hosting control panel) tại 000webhost.com sau khi bạn kích hoạt đăng ký thành công thông tin cần có cho việc tải web lên máy chủ nằm trong khung màu đỏ.

2.BẠN CÒN CẦN THÊM GÌ NỮA?

Để truy cập vào máy chủ và tải trang Web của lên, bạn cần một chương trình FTP. FTP là chữ viết tắt của File Transfer Protocol (Nghi thức chuyển tập tin). Chương trình FTP dùng để kết nối máy tính hai máy tính thông qua mạng Internet và giúp chuyển các tập tin từ máy tính này sang máy tính khác (máy chủ). Có rất nhiều chương trình FTP trả tiền, tuy nhiên có một chương trình FTP miễn phí khá tốt đó là FileZillabạn có thể tải xuống tại địa chỉ filezilla.sourceforge.net.

3.TẢI TRANG WEB LÊN MÁY CHỦ NHƯ THẾ NÀO?

Những mô tả dưới đây sẽ hướng dẫn cho bạn cách tải trang Web lên dịch vụ hosting miễn phí  000webhost.com bằng FileZilla. Dĩ nhiên mỗi máy chủ và chương trình FTP khác sẽ không giống hoàn toàn nhưng về nguyên tắc chung bạn vẫn có thể áp dụng.

Nếu bạn có bất kỳ câu hỏi nào về cách sử dụng chương trình Filezilla xin đặt câu hỏi ở đây

Bạn hãy mở chương trình FTP và điền đầy đủ các phần Host Name (ví dụ address: ftp.baitapwebsite.site90.net), tên đăng nhập – username, mật khẩu – password và nhấp chuột vào “Connect”. Bây giờ bạn đã kết nối vào máy chủ. Trong cửa sổ chương trình bạn sẽ thấy một bên trái sẽ là máy tính của bạn (Local site) và bên phải sẽ là máy chủ (Remote site)

Tìm nơi lưu các tập tin HTML và hình ảnh trên máy tính của bạn (Local site) và chuyển chúng lên máy chủ (Remote site) bằng cách kéo thả qua cửa sổ bên phải hoặc nhấp chuột hai lần (double-click) lên tập tin.

Theo mặc định các tập tin có tên index.htm hoặc (index.html, default.htm) sẽ là trang chủ. Do đó nếu bạn muốn trang Web nào được ấn định làm trang chủ hãy đặt tên cho nó là index.htm. Khi bạn xem địa chỉ trang web, ví dụ như http://baitapwebsite.site90.net có nghĩa là bạn đang xem http://baitapwebsite.site90.net/index.htm

Sau này, khi đã có thể trở thành một nhà thiết kế web chuyên nghiệp, bạn có thể sẽ quan tâm đến các tên miền (domain) riêng cho mình, bạn có thể đặt mua tại các dịch vụ bán tên miền như goddady.com, namecheap.com hay name.com. Kết thúc phần này xem như bạn đã có khái niệm cơ bản về thiết kế web bằng HTML, bạn cần thực hành nhiều hơn nữa để nắm rõ các kỹ thuật cơ bản. Chúng ta sẽ xem tiếp bài kế tiếp về cách xác định tập tin HTML theo chuẩn để website có thể hiển thị tốt nhất trên mọi trình duyệt.

Hãy thực hành ngay thôi nào !!!

Học tiếp bài 14 nhé

Học HTML cơ bản -Bài 12

Học HTML cơ bản -Bài 12

/ No Comments

Bài 12: Dàn Trang – Layout (CSS)

Chắc chắn khi nói đến thiết kế website, là phải nói đến công đoạn dàn trang (layout), dàn trang là cách bạn sắp xếp, bố trí các phần tử của web như hình ảnh, chữ, tiêu đề … theo ý tưởng của mình.

1.TÔI PHẢI THỰC HIỆN NHƯ THẾ NÀO?

Để thực hiện công việc web layout bạn có thể sử dụng Cascading Style Sheets (CSS). Trong bài học này, bạn sẽ được giới thiệu khái quát về CSS. Tuy nhiên bạn có thể học CSS từ cơ bản ở một phần hướng dẫn khác cũng tại website của chúng tôi. Vì vậy hãy xem đây là một lời giới thiệu ngắn gọn để bạn làm quen với CSS.

CSS là một người bạn song hành cùng với HTML. Trong việc viết code bạn có thể xem như: HTML chịu trách nhiệm phần xây dựng cơ bản (cấu trúc khung sườn), trong khi đó CSS sẽ phụ trách phần trang trí (layout).

Như bạn đã được hướng dẫn trong bài số 7, CSS có thể được thêm các thuộc tính. Ví dụ: bạn có thể xác định kích cỡ chữ và loại font

Ví dụ 1:

<p style="font-size:20px;">This is typed in size 20px</p> 


 


<p style="font-family:courier;">This is typed in Courier</p> 


 


<p style="font-size:20px; font-family:courier;">This is typed in Courier size 20px</p>

Trình duyệt như sau:

This is typed in size 20px

This is typed in Courier

This is typed in Courier size 20px

Trong ví dụ trên, chúng tôi sử dụng thuộc tính  style để xác định loại font chữ được sử dụng ( font-family) và kích cỡ font chữ  (font-size). Chú ý, ở đoạn văn thứ 3, chúng tôi sử dụng dấu ; để phân biệt 2 thuộc tính : loại font chữ ( font-family) và kích cỡ font chữ (font-size).

2.VẬY PHẢI MẤT RẤT NHIỀU THỜI GIAN?

Một trong những chức năng thông minh của CSS là quản lý layout của bạn từ theo phương pháp trung tâm. Thay vì sử dụng thuộc tính style ở mỗi thẻ, bạn có thể khai báo layout cả trang Web cho trình duyệt:

Ví dụ 2:

<html> 
 
<head> 
 
<title>My first CSS page</title> 
 
<style type="text/css"> 
h1 {font-size: 30px; font-family: arial;} 
h2 {font-size: 15px; font-family: courier;} 


p {font-size: 8px; font-family: "times new roman";} 


</style> 
</head> 
 
<body> 
 
<h1>My first CSS page</h1> 
<h2>Welcome to my first CSS page</h2> 
<p>Here you can see how CSS works </p> 
 
</body> 
 
</html>

XEM VÍ DỤ

Ở ví dụ trên, CSS được chèn vào phần head và áp dụng cho toàn trang Web. Để thực hiện điều đó bạn chỉ cần sử dụng thẻ <style type="text/css"> để khai báo với trình duyệt bạn đang viết code CSS.

Ở ví dụ trên, các tiêu đề của trang sẽ dử dụng đồng nhất font chữ Arial với kích cỡ 30px, còn phụ đề sẽ áp dụng  font chữ Courier, kích cỡ 15px và toàn bộ các đoạn chữ sẽ sử dụng loại font Times New Roman, kích cỡ 8px.

Một lựa chọn khác để sử dụng CSS với HTML là sử dụng tập tin rời bên ngoài. Với cách sử dụng tập tin rời, bạn có thể kiểm soát layout của hàng loạt trang Web cùng một lúc. Đây là một lựa chọn thông minh nếu bạn muốn thay đổi font chữ hoặc kích thước của một website lớn có hàng ngàn trang. Chúng ta sẽ học điều đó ở các bàihọc cơ bản CSS.

3.CSS CÒN CÓ NHỮNG CHỨC NĂNG GÌ?

CSS còn có có nhiều chức năng ngoài việc định dạng loại font và kích cỡ chữ. Ví dụ bạn có thể thêm màu sắc và nền. Đây là một vài ví dụ khác:

<body style="background-image: url('http://thietke.website/tkws_logo.png');"> 


 


<h1 style="background-color: blue;">Heading on blue background</h1> 


 


<p style="color:green;">Green text</p> 


</body>

Hãy thực hành những gì bạn vừa học bằng cách thêm CSS vào thẻ HTML hoặc tạo CSS trong phần head của HTML.

4.NGOÀI FONT CHỮ, KÍCH CỠ CHỮ, MÀU SẮC VÀ NỀN, CSS CÒN CÓ NHỮNG GÌ?

Ngoài những gì bạn đã biết ở trên, CSS còn có thể được sử dụng để kiểm soát, thiết lập và trình bày trang HTML (như lề – margins, phần tử trôi nổi – float, so hàng – alignment, chiều rộng – width, chiều cao – height ).

Xác định các phần tử khác nhau bằng CSS bạn có thể bố trí các trang Web của bạn một cách trang nhã và chính xác.

Ví dụ 3:

<p style="padding:25px;border:1px solid red;">I love CSS</p>

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

I love CSS

Với thuộc tính float có thể trôi nổi dạt qua trái hoặc phải. Ví dụ sau sẽ cho bạn hình dung như thế nào:

Ví dụ 4:

<img style="float: left;" src="http://thietke.website/tkws_logo.png" alt="TKWS logo" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat...

Xem trên trình duyệt:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat…

Ở ví dụ trên bạn nhận thấy đoạn chữ đã chừa ra một khoảng trống bên trái để cho vị trí của hình ảnh.

Với thuộc tính position, bạn có thể đặt một phần tử ở bất cứ nơi nào mình muốn trên trang một cách chính xác:

Ví dụ 6:

<img src="http://thietke.website/tkws_logo.png" alt="TKWS logo" style="position:absolute;bottom:50px;right:10px;" />

XEM VÍ DỤ

Ví dụ trên, hình ảnh được đặt ở ví trí cách đáy màn hình 50 pixels, và cách lề phải 10 pixels, dĩ nhiên bạn có thể đặt ở bất cứ vị trí nào mình muốn.

THẬT TUYỆT, NHƯNG THỰC HIỆN CÓ DỄ DÀNG KHÔNG?

Bạn không thể học CSS trong 10 phút. Và như chúng tôi đã nói ở trên, đây chỉ là bài giới thiệu khái quát, nếu bạn muốn học CSS, bạn có thể xem bài hướng dẫn học CSS cơ bản sau này.

Còn bây giờ, bạn hãy tập trung vào học code HTML và tiếp tục xem tiếp các bài mới trong trang kế tiếp để học cách làm thế nào để tải website đầu tiên của bạn lên internet.

Học HTML cơ bản -Bài 11

Học HTML cơ bản -Bài 11

Thứ Tư, 17 tháng 8, 2016 / No Comments

Bài 11: Tìm Hiểu Thêm Về Bảng – Table

Ở bài học số 10, bạn đã biết đôi chút về table, có thể nó gây cho bạn một chút chán nãn. Nhưng thật sự, nếu bạn nắm vững các hiểu biết về table, chắc chắn sẽ không còn gì ở HTML có thể làm khó được bạn nữa.

NHỮNG GÌ BẠN CHƯA BIẾT?

Đó là 2 thuộc tính colspan và rowspan nếu bạn muốn tạo ra bảng có những tính chất đặc biệt hơn.

Colspan là từ viết tắt của “column span” – mở rộng cột. Colspan được sử dụng trong thẻ <td> để xác định một ô sẽ mở rộng ra thêm bao nhiêu cột:

Ví dụ 1:

<table border="1">


<tbody>


<tr>


<td colspan="3">Ô1</td>


</tr>


<tr>


<td>Ô 2</td>


<td>Ô 3</td>


<td>Ô 4</td>


</tr>


</tbody>


</table>

Đây là kết quả bạn nhìn thấy trên trình duyệt:

Ô1
Ô 2	Ô 3	Ô 4

Khi thiết lập colspan bằng “3”, Ô của hàng đầu tiên sẽ mở rộng ra bằng 3 cột. Nếu bạn thiết lập colspan bằng  “2”, ô sẽ mở rộng ra thành 2 cột , do đó bạn cần thêm 1 ô nữa để đủ 3 cột trong hàng đầu tiên, như thế nó mới có thể cân bằng với số cột ở hàng thứ hai .

Example 2:

<table border="1">


<tbody>


<tr>


<td colspan="2">Ô 1</td>


<td>Ô 2</td>


</tr>


<tr>


<td>Ô 3</td>


<td>Ô 4</td>


<td>Ô 5</td>


</tr>


</tbody>


</table>

Xem trên trình duyệt bạn sẽ có bảng như sau:

Ô 1		Ô 2
Ô 3	Ô 4	Ô 5

ROWSPAN SẼ NHƯ THẾ NÀO?

Chắc bạn cũng đoán ra, nó sẽ cũng tương tự, rowspan xác định một ô sẽ mở rộng ra bao nhiêu hàng:

Example 3:

<table border="1">


<tbody>


<tr>


<td rowspan="3">Ô1</td>


<td>Ô 2</td>


</tr>


<tr>


<td>Ô 3</td>


</tr>


<tr>


<td>Ô 4</td>


</tr>


</tbody>


</table>

Xem trên trình duyệt bạn sẽ có bảng như sau:

Ô1	Ô 2
	Ô 3
	Ô 4

Trong ví dụ trên rowspan được thiết lập bằng “3” trong ô 1. Điều này có nghĩa ô này sẽ mở rộng ra 3 hàng (1 ô của nó và chiếm thêm 2 ô kế tiếp). Ô 1 và Ô 2 được xem là 1 hàng, trong khi đó Ô 3 và Ô 4 được xem như hai hàng độc lập.

Nó có một chút phức tạp, nếu bạn khó hình dung, hãy vẽ bảng mà bạn muốn tạo lên giấy, sau đó hãy viết code.

Hãy thực hành thật nhiều với colspan và rowspan bạn sẽ nắm vững kỹ thuật tạo bảng.

Học HTML cơ bản -Bài 10

Học HTML cơ bản -Bài 10

/ No Comments

Bài 10: Bảng – Table

Học html cơ bản

Tạo các bảng trong HTML thoạt đầu trong có vẻ phức tạp nhưng nếu bạn tiếp tục bình tĩnh và xem từng bước tiếp theo, nó thật sự rất logic cũng giống như mọi thứ khác trong HTML.

Ví dụ 1:

<table>


<tbody>


<tr>


<td>Cell 1</td>


<td>Cell 2</td>


</tr>


<tr>


<td>Cell 3</td>


<td>Cell 4</td>


</tr>


</tbody>


</table>

Đây là kết quả xem trên trình duyệt:

Cell 1	Cell 2
Cell 3	Cell 4

SỰ KHÁC NHAU GIỮA <TR> VÀ<TD>?

Như bạn đã xem ở trên, đây có lẽ là ví dụ phức tạp nhất trong các bài học về HTML vừa qua, chúng ta hãy cùng xem xét từng thẻ khác nhau trong ví dụ trên.

Có 3 phần tử trong cấu trúc bảng:

• Thẻ mở <table> và thẻ đóng </table> bắt đầu và kết thúc tạo bảng, rất logic.
• <tr> là viết tắt của “table row” là bắt đầu và kết thúc tạo ra 1 hàng ngang. rất logic.
• <td> là viết tắt của “table data”. Thẻ này bắt đầu và kết thúc để ra một ô (cell) trong hàng. Tất cả đều đơn giản và hợp lý.

Đây là cách giải thích ở ví dụ 1: Một bảng sẽ bắt đầu bằng thẻ mở <table>, sau đó là thẻ mở <tr>, để xác định một hàng được thêm vào. Có 2 ô trong hàng này, vì vậy ta có: <td>Cell 1</td> and <td>Cell 2</td>. Tiếp theo là thẻ đóng hàng thứ nhất </tr> và một hàng mới được thêm vào bằng thẻ mở <tr> và tiếp theo sẽ tương tự như hàng thứ nhất, hàng thứ hai cũng có 2 ô. Sau cùng bảng sẽ được đóng bằng thẻ </table>.

Bạn phải phân biệt rõ ở đây: hàng (rows) là các đường ngang của các ô (cellls) và cột là đường dọc của các ô.

Cell 1	Cell 2
Cell 3	Cell 4

Cell 1 và Cell 2được xem là hàng. Cell 1 và Cell 3 được xem là cột.

Ở ví dụ trên, ta có hai hàng và hai cột, trên thực tế bạn có thể tạo ra các bảng có không giới hạn số cột và số hàng.

Ví dụ 2:

<table>


<tbody>


<tr>


<td>Cell 1</td>


<td>Cell 2</td>


<td>Cell 3</td>


<td>Cell 4</td>


</tr>


<tr>


<td>Cell 5</td>


<td>Cell 6</td>


<td>Cell 7</td>


<td>Cell 8</td>


</tr>


<tr>


<td>Cell 9</td>


<td>Cell 10</td>


<td>Cell 11</td>


<td>Cell 12</td>


</tr>


</tbody>


</table>

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

Cell 1	Cell 2	Cell 3	Cell 4
Cell 5	Cell 6	Cell 7	Cell 8
Cell 9	Cell 10	Cell 11	Cell 12

CÓ THUỘC TÍNH NÀO CHO BẢNG KHÔNG?

Dĩ nhiên có một số thuộc tính dành cho bảng, ví dụ như border – dùng để tạo độ dày các đường biên xung quanh bảng.

Example 3:

<table border="1">


<tbody>


<tr>


<td>Cell 1</td>


<td>Cell 2</td>


</tr>


<tr>


<td>Cell 3</td>


<td>Cell 4</td>


</tr>


</tbody>


</table>

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

Cell 1	Cell 2
Cell 3	Cell 4

Độ dày của đường biên được xác định bởi thuộc tính border

Cũng như các hình ảnh, bạn cũng có thể xác định chiều ngang của table bằn pixels hoặc phần trăm

Ví dụ 4:

<table border="1" width="30%"></table>

Như ví dụ trên table sẽ có chiều ngang bằng 30% chiều ngang mà hình.

THêM CÁC THUỘC TÍNH KHÁC?

Có rất nhiều thuộc tính khác, đây là hai thuộc tính kể thêm:

• align: dùng để xác định lề so hàng theo chiều ngang của nội dung bên trong ô. Ví dụ như trái – left, giữa – center hay phải – right.
• valign: dùng để xác định lề so hàng theo chiều đứng của nội dung bên trong ô. Ví dụ như, trên – top, giữa  -middle hay đáy – bottom.

Ví dụ 5:

<td align="right" valign="top">Cell 1</td>

CÓ THỂ CHÈN NHỮNG GÌ VÀO TABLE?

Theo lý thuyết, bạn có thể chèn bất cứ thứ gì vào trong bảng như chữ, liên kết và hình ảnh … nhưng vì table có công dụng để trình bày bảng dữ liệu (dữ liệu trình bày theo hàng và cột), vì vậy hãy đặt tất cả mọi thứ vào trong bảng khi bạn muốn sắp xếp chúng theo thứ tự ngang và dọc.

Trong quá khứ vài năm trước đây, table đã được dùng như là một công cụ để dàn trang  Web. Nhưng nếu bạn thật sự muốn trang web mình có một layout chính xác, và chi tiết như ý muốn, bạn nên áp dụng dàn trang bằng cách kết hợp CSS. Bạn có thể xem các hướng dẫn ở các bài học CSS sau này. Còn bây giờ, hãy thực tập thậtt nhiều với những gì đã học.