Hướng dẫn học thiết kế web cơ bản

Thiết kế web những điều bạn cần biết khi tự học

Trong quá trình học để trở thành một lập trình viên hiện nay ở các trường đại học thì có một giai đoạn khá quan trọng là lập trình thiết kế website. Tuy nhiên, cũng có khá nhiều người sau khi tốt nghiệp vẫn hầu như chưa hề biết quá trình thiets kế một website như thế nào và cũng có khá nhiều người đã biết về lập trình nhưng chưa hề biết đến việc lập trình một website.

Bạn cũng là một người trong số đó và đang mù mờ về các kiến thức website? Sau khi đọc bài viết về quá trình tự học thiết kế website này, hi vọng sẽ giúp ích được cho các bạn đang muốn tìm hiểu về thiết kế website

Quá trìnhtự học thiết kế website

Nếu bạn tìm được một website cho down mã nguồn diễn đàn bằng PHP với MySQL và có hướng dẫn cài đặt, hướng dẫn thay đổi các chức năng... bạn hãy down về và làm theo hướng dẫn. Chỉ cần để ý, dần dần quen với cấu trúc và cách viết code và hiểu được một website hoạt động như thế nào.

Nếu bạn không phải là một người có thói quen cầm một cuốn sách dày hay đọc một đống tài liệu học từng bước. Bạn cũng không phải một người hay thích lên lớp nghe thầy cô giảng nhiều về lý thuyết mà chỉ thích tự tìm hiểu. Đối với PHP bạn  chỉ cần đọc đúng bài hướng dẫn tự học đầu tiên về cách khai báo các biến (variables), khai báo các hàm (functions) và các đặc điểm chính của nó rồi tự đọc mã nguồn có sẵn để biết cách viết.

Về sau bạn bắt đầu tự viết được các thay đổi cho mã nguồn diễn đàn đó, từ đó bạn có thể viết được hẳn một chức năng lớn cho forum và còn có thể thay đổi hầu hết cấu trúc của nó. Đây chính là con đường tự học thiết kế website.

Cùng với việc tự mày mò những source code có sẵn bạn hãy tham gia các diễn đàn xem người ta thảo luận và cũng thường hay hướng dẫn người khác. Bạn hay tìm tòi để có thêm kiến thức hướng dẫn người khác cũng là một cách rất dễ để tiến bộ.  Nhiều khi có những vấn đề người khác hỏi tôi không biết, thế là tôi lại lên mạng tìm hiểu rồi hướng dẫn lại. Hoặc lắm khi trên các diễn đàn thảo luận trực tuyến cũng có nhiều người đưa các vấn đề hóc búa mà mình chưa từng gặp để giải quyết. Dần dần bạn sẽ có nhiều kinh nghiệm cho chính mình.

Các yếu tố cần thiết để tự học thiết kế website

Tóm lại, để tự học thiết kế website thì yếu tố cần là bạn biết được được các thuật toán được dùng trong lập trình, đã có tư duy lập trình, cơ bản về cơ sở dữ liệu và đã biết sử dụng website.

Bạn có thể tìm hiểu về html trước, sau đó là PHP (nếu bạn đã biết về C) hoặc JSP (nếu bạn đã biết về lập trình Java) hay ASP.NET (nếu bạn đã biết về VB.NET hoặc C#). Có thời gian rỗi rãi thì bạn tìm hiểu thêm về css để có thể làm cho website của bạn thêm bắt mắt và javascript để có các hiệu ứng phụ dễ sử dụng cho người dùng.

Nếu bạn có vốn tiếng Anh (không cần phải quá giỏi) cũng là một lợi thế cho bạn. Bạn cũng nên tìm và đọc các tài liệu nước ngoài bằng tiếng Anh. Bởi vì các tài liệu về kỹ thuật viết bằng tiếng Anh sẽ chuẩn hơn viết bằng tiếng Việt hoặc được dịch sang tiếng Việt.

Hướng dẫn thiết kế website bằng HTML

Phần 1: Giới thiệu về HTML

Một file có định dạng HTML là gì?

- HTML là chữ viết tắt của Hyper Text Markup Language (Ngôn ngữ hiển thị siêu văn bản).

- Một file HTML là một file text bao gồm những tag nhỏ

- Những tag hiển thị nói cho trình duyệt biết nó phải hiển thị trang đó như thế nào

- Một file HTML phải có phần mở rộng là .htm hoặc .html

- Một file HTML có thể được tạo bởi một trình soạn thảo đơn giản.

Bạn có muốn thử không?

Nếu bạn sử dụng Window hãy mở Notepad, nếu bạn sử dụng Mac mở ứng dụng Simple Text. Với OSX bạn mở TextEdit và thay đổi lựa chọn sau: Select (trong cửa sổ preference) > Plain Text thay vì Rich Text và chọn "Ignore rich text commands in HTML files". Việc này rất quan trọng bởi vì nếu bạn không làm vậy thì code HTML có thể không đúng.

Sau đó bạn gõ vào những dòng sau:

<.html> <.head> <.title>Công ty thiết kế website chuyên nghiệp <.title> <./head> <.body> ESVN:<.b>công ty thiết kế website <./b> <./body> <./html>

Lưu ý: Các bạn bỏ dấu . ở đầu mỗi thẻ nhé

Lưu file lại với tên là "mypage.htm" vào desktop cũng được. Sau đó bạn đóng trình soạn thảo Notepad hoặc Simple Text lại và tìm đến file mypage.htm ở desktop rồi nhấp đúp vào trình duyệt sẽ hiển thị nội dung của trang.

Giải thích ví dụ trên:

Thẻ đầu tiên trong tài liệu HTML là

. Thẻ này nói cho trình duyệt biết đây là điểm khởi đầu của một tài liệu HTML. Thẻ cuối cùng của tài liệu là, thẻ này nói cho trình duyệt biết đây là điểm kết thúc của văn bản.

Đoạn chữ nằm giữa hai thẻ

vàlà thông tin của header. Thông tin header sẽ không được hiển thị trên cửa sổ trình duyệt. 
Đoạn chữ nằm giữa cặp thẻ

là những gì nó sẽ thể hiện trên trình duyệt của bạn.

Đoạn chữ nằm giữa hai thẻ và sẽ xuất hiện dưới dạng đậm

Phần mở rộng là HTM hay HTML?

Khi bạn lưu một văn bản dưới dạng HTML, bạn có thể sử dụng cả hai dạng là .htm và .html. Chúng ta đã sử dụng dạng .htm trong ví dụ trên. Lý do này bắt nguồn từ nguyên nhân ngày trước là có những phần mềm chỉ cho phép phần mở rộng có tối đa là 3 chữ cái. Với những phần mềm mới hiện nay chúng ta nghĩ sẽ tốt hơn nếu bạn lưu lại với phần mở rộng là .html

Một chú ý khi sử dụng trình soạn thảo HTML:

Bạn có thể dễ dàng chỉnh sửa một tài liệu HTML bằng cách sử dụng WYSIWYG (what you see is what you get = thấy gì có đó) như là Frontpage, Claris Homepage, Dream weaver hoặc Adobe PageMill thay vì bạn phải t�� viết những cặp thẻ từ đầu đến cuối. Nhưng nếu bạn muốn trở thành một web master đầy kỹ thuật, tôi khuyên bạn nên sử dụng những trình soạn thảo text đơn giản để học và làm quen với cấu trúc câu lệnh của HTML.

Những câu hỏi thường gặp

Q: Sau khi tôi đã chỉnh sửa một file HTML, nhưng tôi không thể xem được kết quả ở trình duyệt. Tại sao vậy?
A: Bạn phải chắc rằng bạn đã lưu file đó với phần mở rộng là .htm hoặc .html, như ở ví dụ trên là mypage.htm.

Q: Tôi đã thử chỉnh sửa file HTML của tôi nhưng lại không thấy thay đổi gì ở trình duyệt cả. Tại sao vậy?
A: Trình duyệt tự động cach trang của bạn do đó nó không phải đọc cùng một trang hai lần. Khi bạn thay đổi gì đó ở một trang, trình duyệt nó không thể nhận ra được những thay đổi đó. Sử dụng nút refresh hoặc reload của trình duyệt để bắt nó đọc lại những thay đổi bạn tạo ra.

Q: Tôi nên sử dụng trình duyệt nào?
A: Bạn có thể thực tập tất cả những bài thực hành trong phần này với những trình duyệt thông dụng như Internet Explorer, Mozilla, Netscape hoặc Opera. Tuy nhiên, một vài ví dụ trong phần nâng cao đòi hỏi bạn phải có phiên bản mới nhất của trình duyệt.

Q: Tôi bắt buộc phải sử dụng Window sao? còn Mac thì sao?
A: Bạn có thể thực tập tất cả những bài thực hành trong phần này với hệ điều hành không phải là Windows như Mac. Tuy nhiên một vài ví dụ trong phần nâng cao đòi hỏi bạn phải có phiên bản mới hơn của Windows, như là Window98 hoặc Windows 2000.

 Hướng dẫn sử dụng công cụ thiết kế web : PHP Designer 8

Với những người lập trình PHP thì việc sở hữu một công cụ thiết kế web như PHP Designer là việc nên làm. Vì nó rất dễ dùng, nhẹ máy và tích hợp các tính năng hỗ trợ viết code.

(Nếu bạn nào chưa biết cách cài đặt thì có thể tham khảo tại: Cách cài đặt PHP designer) 

Bây giờ chúng ta khởi động chương trình lên và tiến hành cấu hình cho PHP Designer.

Chúng ta vào Tools chọn Preferences.
Chọn General rồi chọn các mục như hình.

Chọn mục localhost và khai báo như hai mục dưới hình nếu bạn dùng máy làm máy local. Có thể nhập địa chỉ khác nếu bạn có host và tên miền trên Internet.
- Server path: tên miền máy chủ.( cái này để nhập trên trình duyệt).
- Local server path: thư mục gốc của tên miền.( nơi chứa mã nguồn website).

Ta đã cấu hình xong cho PHP Designer 8.
- Bước tiếp theo để tạo một project mới ta vào menu chọn Project > Project manager (có thể nhấn F11) chọn New.

- Khai báo xong tên project  chọn Next.

- Khai báo nơi lưu trữ project phải đặt trong đường dẫn khi ta cấu hình ở mục local server path ở trên.

- Ở mục này có thể thêm thư viện nếu có, còn không thì nhấn Next.

- Mục FTP accounts. Thêm tài khoản FTP còn không thì next.

- Mục Filters để mặc định. Nhấn next.

- Mục Sumary nhấn Finish để hoàn tất.

Như vậy, bạn đã tạo xong một project. Đơn giản phải không? Bây giờ hãy tự thiết kế trang web cho mình bằng cách tạo ra trang html hoặc php nhé.
Chúc các bạn thành công.