Quá trình tạo một trang web

• April 5, 2010 18 comments

Hôm nay bạn Giang Ha có email hỏi tôi về quá trình cụ thể để tạo ra một trang web. Nhận thấy câu hỏi này có thể là thắc mắc của nhiều người mới bắt đầu học làm trang web, cho nên tôi viết một bài giải thích kỹ lương cả quá trình tạo ra một trang web. Tất nhiên bài này chỉ dành cho người mới bắt đầu.

Cũng như làm bất cứ việc gì bao giờ cũng có những gia đoạn như chuẩn bị, tiến hành và đưa vào sử dụng. Làm web cũng vậy và dưới đây là ba bước chính. Trong bài tôi cố gắng liên kết đến những bài viết đã có trên izwebz để bạn tiện tham khảo thêm.

Bước chuẩn bị

Công cụ bạn cần để làm một trang web

Tùy vào nhu cầu và tùy vào đặc thù công việc mà cần những công cụ khác nhau. Nhưng với một trang web cơ bản thì công cụ cần thiết để làm một trang web là: một trình soạn thảo code, một phần mềm đồ họa như Photoshop hoặc FireWorks, phần mềm FTP và một máy tính nối mạng.

• Công cụ để làm web

• Công cụ tối thiểu

Chọn tên miền

Nếu bạn mới chỉ bắt đầu và chưa muốn mua tên miền thì bạn có thể đăng ký một tên miền miễn phí để sử dụng thử cho đến khi bạn đã sẵn sàng để mua tên miền. Việc sử dụng tên miền miễn phí thì cái lợi duy nhất là không phải trả tiền, nhưng đằng sau nó là rất nhiều những thứ bất tiện khác mà bạn không thể khống chế được. Hơn nữa mua tên miền cũng không đắt chỉ khoảng dưới $10 là bạn đã có một tên miền cấp một sử dụng trong vòng một năm. Hiện tại nhiều dịch vụ host đều cho tên miền miễn phí khi bạn đăng ký dịch vụ với họ. Dịch vụ tôi đang dùng là 1and1 cho bạn tên miền miễn phí (Affliate Link) cùng gói dịch vụ host, miễn là bạn ở với họ thì tên miền sẽ luôn được miễn phí.

• Cách chọn domain

Chọn một dịch vụ host

Cũng như tên miền, host cũng có nhiều dịch vụ miễn phí. Cái được duy nhất là không phải trả tiền nhưng cái mất thì không thể nói hết được. Đặc tính của host miễn phí là không ổn định, quảng cáo tràn lan, thiếu nhiều tính năng quan trọng và không đủ độ tin cậy để xây dựng một trang web lâu dài.

• Cách chọn web host (phần 1)

• Cách chọn web host (phần 2)

Thiết kế trang web

Khi học làm web việc biết sử dụng thành thạo một phần mềm đồ hoạ là điều gần như bắt buộc. Cho dù bạn có là một lập trình viên, nhưng kiến thức cơ bản về một phần mềm đồ hoạ tiêu biểu như Photoshop hoặc FireWorks giúp ích rất nhiều sau này. Tôi đã có 2 series video tutorial hướng dẫn cách tạo giao diện trong Photoshop. Bạn có thể tham khảo.

• Giao diện với Photoshop

• Thiết kế theme WordPress với Photoshop

bổ sung một số Tag HTML

1. <h N> Tiêu đề </h N> : N chạy từ 1 ->6

2. <p>..</p> : xuống dòng và thêm một dòng trống

3. <br>..<br /> : Xuống dòng

4. <hr bgcolor="red" width=20% size=20>: Dòng cứng

5. <pre>..</pre>: căn lề do mình chỉnh

6. <div align="center"> căn chỉnh cho một doạn văn </div>

7. <font size=+ N color=red> Phông chữ</font>

8. <b title ="chữ viết tắt > CVT</b>

Tạo Bảng

<caption> Đặt tiêu đề cho bảng </caption>

• <table bgcolor="red" border=3 cellspacing=3 cellpadding=4> độ rộng đường viền

• độ rộng của cell

• <tr bgcolor=blue align=center,right,left><!-- Các định dạng cho hàng -->

• <td bgcolor=yellow valign=top,middle,bottom> các định dạng cho ô</td>

• <td> ô 2 hàng 1</td>

• <td> ô 3 hàng 1</td>

• </tr>

• <tr>

• <td colspan=2>ô 4 hàng 2</td> gộp 2 cột trên một hàng

• <td rowspan=2>ô 5 hàng 2</td>Gộp 2 dòng trên một cột

• <td>ô 6 hàng 2 </td>

• </tr>

• </table>

Danh sách

—Đánh đấu danh sách: <dl>…..</dl>

—Mô tả tiêu đề: <dt> tiêu đề </dt>

—Miêu tả nội dung: <dd> nội dung </dd>

Ý Nghĩa Các Thẻ Meta Trong SEO - Phần II

Tiếp theo sau bài " Ý Nghĩa Các Thẻ Meta Trong Seo" , hôm nay mình xin gửi tới các bạn phần 2 trong loạt bài về thẻ meta. Bài viết này chủ yếu giới thiệu với các bạn những meta không khuyến khích sử dụng . Sau đây là các thẻ không được khuyến khích sử dụng: Meta Content Script Type, Meta Content Style Type, Meta Distribution, Meta Expires, Meta Generator, Meta MS Smart Tags, Meta Pragma No-Cache, Meta Publisher, Meta Rating, Meta Reply-To, Meta Resource Type, Meta Revisit After, Meta Set Cookie, Meta Subject 1.Meta Content Script TypeThẻ này được dùng để cho biết các mã script sử dụng trong tài liệu HTML là gì. Thẻ này bạn không cần dùng bởi vì các bot của SE dùng có cách riêng của nó để nhận biết được script trong HTML của bạn là loại gì. Ngoài ra các trình duyệt (browser) cũng được phát triển các phương thức riêng để nhận biết loại script trong HTML.

Ví dụ:

<Head>

<Meta http-equiv="Content-Script-Type" Content="text/javascript">

</Head>

2.Meta Content Style Type

Thẻ này được dùng để cho biết kiểu (style) bạn dùng để định dạng văn bản là loại gì.Tương tự như trên thì thẻ này cũng không cần thiết phải dùng.

Ví dụ:

<Head>

<Meta http-equiv="Content-Style-Type" Content="text/css">

</Head>

3.Meta Distribution

Thẻ này dùng để khai báo thông tin rằng nội dung web của bạn được phân bố trong phạm vi thế nào. Thẻ này bạn cũng không cần phải dùng đến vì nếu để giới hạn phạm vi sử dụng thì bạn có thể dùng robots.txt hoặc .htaccess. Có 3 loại lựa chọn cho thẻ này:

* Global (toàn bộ website)

* Local (Chỉ dùng cho nhóm ip của website)

* IU (Internal Use - Sử dụng nội bộ, không public ra ngoài).

Ví dụ :

<Head>

<Meta Name="Distribution" Content="Global">

</Head>

4.Meta Expires

Thẻ này dùng để thông báo thời gian trang nội dung của bạn sẽ bị hết hạn.Thẻ này bạn cũng không cần thiết phải sử dụng vì những bot ví dụ như Google cũng chẳng quan tâm đến và mặc dù bạn có để thẻ này thì google vẫn cache website của bạn như thường. Vì vậy bạn không cần phải mất thời gian quan tâm đến thẻ này.

Ví dụ :

<Head>

<Meta http-equiv="expires" Content="Wed, 26 Feb 2004 08:21:57 GMT">

</Head>

5.Meta Generator

Thẻ này dùng để cung cấp thông tin về công cụ bạn dùng để tạo ra tài liệu HTML của bạn. Ngay cả về ý nghĩa của nó bạn đã thấy điều này hoàn toàn chẳng cần thiết và bạn cũng nên xóa nó đi nếu như công cụ bạn dùng tạo ra nó để nhìn cho gọn gàng hơn và tập trung vào những thứ cần thiết.

Ví dụ:

<Head>

<meta name="generator" content="Joomla! 1.5 - Open Source Content Management" />

</Head>

6.Meta Pragma No-Cache

Thẻ này được dùng để báo cho trình duyệt biết tất cả các đối tượng trong web của bạn đều phải được load từ server chứ không dùng cache. Các SE không quan tâm đến thẻ này, ý nghĩa của nó chỉ đơn thuần là hướng tới người dùng. Giả sử như javascript, css hay hình ảnh bạn thường xuyên thay đổi mà muốn người dùng nhìn thấy phiên bản mới thì mới dùng trong mục đích này.Tuy nhiên việc lúc nào cũng truy xuất đến server của bạn cũng sẽ làm ảnh hưởng rất lớn đến hiệu suất hoạt động của server và website của bạn tất nhiên sẽ hoat động chậm hơn do server của bạn phải phản hồi lượng request nhiều hơn.

Ví dụ :

<Head>

<Meta http-equiv="Pragma" Content="no-cache">

</Head>

7.Meta Publisher

Thẻ này tương tư như thẻ Meta Generator . Thẻ này không được đề cập đến từ W3C và chỉ dùng để hiển thị cho điểm đánh giá nội dung website của bạn. Cách sử dụng cũng không rõ ràng và bot cũng không quan tâm đến thẻ này.

Ví dụ :

<Head>

<Meta Name="Publisher" CONTENT="FrontPage 4.0">

</Head>

8.Meta Reply-To

Thẻ này không nên dùng vì dễ dàng tạo điều kiện cho các spammers gửi email đến bạn và mục đích của thẻ này chỉ nhằm để cho biết ai là người sẽ chịu trách nhiệm nhận email cho hệ thống website của bạn.

Ví dụ :

<Head>

<Meta name="reply-to" content=" your.email@address.com " />

</Head>

9.Meta Resource Type

Thẻ này được dùng để khai báo kiểu dữ liệu cho trang web của bạn. Bạn không cần thiết phải dùng thẻ này, thay vì dùng thẻ này bạn nên dùng kiểu khai báo của các DTD sẽ tốt hơn.

Ví dụ :

<Head>

<Meta name="resource-type" content="document">

</Head>

10.Meta Revisit After

Thẻ này theo một số thông tin cho biết được dùng để khai báo cho bot biết nên quay lại lúc nào để cập nhật thông tin website của bạn nhưng điều này thật sự không chính xác bởi vì các bot đều viếng thăm website của bạn theo chu kỳ lịch trình riêng của nó. Vì vậy bạn cũng không cần phải sử dụng thẻ này.

Ví dụ:

<Head>

<Meta Name="Revisit-After" Content="3 days Days">

</Head>

11.Meta Robots

Thẻ này mục đích chỉ để thông báo cho bot biết có nên index lại nội dung hay không, các liên kết trong website đó có cần phải ghi nhận lại hay không. Thay vì dùng thẻ này thì bạn nên dùng .htaccess hoặc robots.txt sẽ tốt hơn. Có một số ý kiến cho rằng file robots.txt sẽ không được đọc đến nếu như bot đi từ trang trong chứ không phải trang chính, điều này không đúng. Để kiểm nghiệm bạn có thể xem logs website của mình.

Ví dụ:

<Head>

<meta name="robots" content="index, follow" />

</Head>

12.Meta Set Cookie

Thẻ này bạn không cần thiết phải dùng bởi vì nó đã quá xưa rồi và các ngôn ngữ lập trình server side hỗ trợ tốt hơn nhiều cho việc lưu thông tin cookie thay vì phải dùng qua thẻ của HTML.

Ví dụ :

<Head>

<Meta http-equiv="Set-Cookie" Content="cookievalue=xxx;expires=Wednesday, 21-Oct-98 16:14:21 GMT; path=/">

</Head>

13.Meta Subject

Thẻ này để khai báo chủ đề của website. Bạn không cần thiết phải dùng thẻ này do cả trình duyệt lẫn bot đều không hỗ trợ cho thẻ này.

Ví dụ :

<Head>

<Meta name="Subject" Content="Web Page Subject">

</Head>