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.
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í.
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.
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.
Bên cạnh đó bạn cũng có thể sử dụng những chương trình WYSIWYG miễn phí trên mạng. Hoặc bạn có thể download những phần mềm CMS như: WordPress, Joomla hoặc Drupal miễn phí. Bạn chỉ việc download về, đọc cách sử dụng và install nó. Chỉ trong vòng vài phút là bạn đã có một trang web hoàn chỉnh rồi.
Chạy thử và kiểm tra lỗi trang web của bạn
Việc kiểm tra kỹ càng trang web của bạn trước khi tải lên web host là khá quan trọng nhưng lại bị nhiều người bỏ qua. Ở bước này, bạn nên tập trung vào kiểm tra những đường link, hình ảnh, căn chỉnh, font chữ … nói chung tất cả những gì mà bạn đã tạo cho trang web của mình, bạn cần kiểm tra kỹ lưỡng lài. Đặc biệt những đường link và thanh di chuyển trên trang web. Người đọc khi đến với trang của bạn mà lại gặp vài đường link hỏng thì rất nản.
Việc quan trọng tiếp theo là chạy thử trang web của bạn ở 2 trình duyệt web phổ biến nhất hiện nay là Internet Explorer 7 và Firefox. Hai trình duyệt hỗ trợ code khác nhau, cho nên đôi khi ở trình duyệt này mọi thứ hiển thị chính xác như khi bạn thiết kế, nhưng sang trình duyệt khác nó lại bị “méo mó” đi một số chỗ. Do vậy bạn muốn trang web của mình được hiển thị tốt ở cả hai trình duyệt.
Cuối cùng nhưng cũng rất quan trọng là lỗi chính tả trên trang web. Việc để quá nhiều lỗi chính tả trên trang web tạo cho người đọc có cảm giác bạn không chuyên nghiệp cho nên thông tin bạn viết ra cũng không đáng tin. Nếu một vài lỗi nhỏ, có thể bỏ qua, nhưng cứ vài đoạn là gặp một lỗi thì cũng rất đáng phàn nàn.
5. Quảng cáo trang web của bạn
Quảng cáo trang web là bước cuối cùng bạn cần làm để mọi người biết về trang web của mình. Nhưng bạn không nên quá vội vàng quảng cáo trang web khi mà nội dung còn chưa hoàn tất, đường liên kết, hình ảnh còn đang trong quá trình xây dựng. Người đọc sẽ có cảm giác là trang web này không thực sự chuyên nghiệp khi liên tục gặp những đường link hỏng hoặc lỗi hình ảnh. Cho nên bạn hãy chỉ quảng cáo trang web rộng rãi khi nội dung trên trang đa phần hoàn thành. Đừng nóng vội, hấp tấp mà để mất đi lượng người đọc lúc ban đầu.
Kết luận
Để tạo được một trang web bạn chỉ cần 5 bước đơn giản ở trên. Nhưng đó chỉ là phương hướng cho bạn biết cách đi. Bài này chỉ có vai trò như là tấm bản đồ chỉ đường cho bạn đi từ A đến Z bạn phải đi qua những chữ cái nào trước. Nhưng để tạo được một trang web và thu hút được nhiều người đọc đòi hỏi nhiều bước khác nữa mà nếu bạn tìm hiểu trên izwebz bạn sẽ làm được.
1. Tạo tài liệu HTML đầu tiên
Các tag của HTML
<html>...</html>
<head>..</head>
<title>...</title> : Chữ xuất hiện trên thanh tiêu đề
<body>...</body> : Chứa thân của trang web
Các tag định dạng
bổ sung một số Tag HTML
<h N> Tiêu đề </h N> : N chạy từ 1 ->6
<p>..</p> : xuống dòng và thêm một dòng trống
<br>..<br /> : Xuống dòng
<hr bgcolor="red" width=20% size=20>: Dòng cứng
<pre>..</pre>: căn lề do mình chỉnh
<div align="center"> căn chỉnh cho một doạn văn </div>
<font size=+ N color=red> Phông chữ</font>
<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>
Thứ sáu, 26 Tháng 3 2010 16:20 Zinaki Seo
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>