Học Làm Web

Tự học thiết kế trang web từng bước từng bước một

Dạo nhiều vòng trên mạng Khoan Cắt Bê Tông thấy rằng nhiều người sau một thời gian sử dụng máy tính, lên mạng thì có mong muốn tự thiết kế cho riêng mình một trang web để “ghi dấu ấn” của mình lên mạng Internet.

Khoan Cắt Bê Tông đã viết:Tài liệu tham khảo / đọc thêm
Chúng tôi có sử dụng những tài liệu tham khảo sau để viết nên chủ đề này. Các bạn theo dõi chủ đề nên download về sử dụng.Simple CSS Standard Edition (đã dịch sang tiếng Việt, file dạng PDF, kích cỡ 600KB) (Link dự phòng:http://www.box.net/shared/6j2irskgk4 )

iHTML – Hướng dẫn thiết kế Web (trang web)

Hướng dẫn xây dựng website (tiếng Việt, file dạng PDF, kích cỡ 623KB)

Những năm gần đây, phong trào các mạng xã hội ảo, blog,… đã tạo thuận lợi nhiều để tự cá nhân có một ngôi nhà của mình trên mạng Internet mà không cần phải biết chút gì về việc thiết kế đồ họa, kiến thức về trang web. Tuy nhiên, tự tay làm một trang web đưa lên mạng hẳn sẽ khiến bạn hào hứng và thích thú hơn.

Mình sẽ hướng dẫn các bạn từng bước một, có hình ảnh minh họa theo cách đơn giản nhất, dễ hiểu, cách mà mình từng thực hiện các đây vài năm để các bạn có thể sớm có một trang web “Made in bởi tui”. Nào ta bắt đầu.

Chúng ta sẽ không bàn đến lý thuyết nhiều về giao thức mạng, trình duyệt,… sẽ làm cho vấn đề trở nên rối rắm và không cần thiết. Cứ làm được một trang web nho nhỏ rồi sẽ tự đọc tìm hiểu thêm để hiểu các vấn đề xung quanh.

Các bạn bật máy tính lên. Bấm phím kết hợp: phím có hình (xem hình 1 bên dưới) kết hợp với R

Hình ảnh (hình 1)
Hình dự phòng
Hình 1: Phím này bấm đè, và bấm phím R (như kiểu bạn bấm Ctrl + C hoặc Shift + phím bất kỳ vậy)
sẽ bung ra cửa sổ như sau:

Hình ảnh (hình 2)
Hình dự phòng
Hình 2
gõ vào từ notepad và enter để gọi chương trình giúp ta thiết kế trang web đầu tay.

Nó sẽ hiển thị cửa sổ soạn thảo notepad, trông như Hình 3

Hình ảnh
Hình dự phòng
Hình 3

Giờ thì bạn gõ vào đúng như những dòng chữ sau:

MÃ: CHỌN TẤT CẢ
<html>
<head>
<title>Trang web dau tay cua toi</title>
</head>
<body>
<p>Xin chao cac ban,<br>
Day la trang web dau tay cua toi, toi muon het to voi ca the gioi rang: TOI BIET LAM WEB
</p>
</body>
</html>

Bạn cần gõ tiếng Việt không dấu như trên cái đã. Vì nếu gõ có dấu lại dính dáng đến vấn đề font chữ, kiểu chữ, bảng mã,… thêm phức tạp vấn đề. Cứ theo như những gì mình làm và làm theo, sau này khi bạn đã thành thạo các điều căn bản, mình sẽ mở rộng thêm – không nên lo lắng.

Kết quả khi bạn gõ xong đoạn trên như hình 4

Hình ảnh
Hình dự phòng
Hình 4

Bây giờ bạn phải lưu trang web lại thì mới có thể xem nó ra làm sao được. Hãy vào menu File và chọn mụcSave hoặc bấm phím Ctrl + S (xem hình 5) lúc này bạn đang ở cửa sổ soạn thảo Notepad nhé, không phải ở cửa sổ của trang web này đâu :)

Hình ảnh
Hình dự phòng
Hình 5

Nó sẽ bung cửa sổ cho bạn Lưu (Save) tập tin (file) vừa soạn. Hãy đặt tên tập tin là “trangWeb.html”(có cả dấu ngoặc kép mở và đóng nhé) – Hình 6

Hình ảnh
Hình dự phòng
Hình 6

Xong. Như vậy là bạn đã có một trang web đầu tay rồi đấy.

Bạn sẽ hỏi “Đâu nào? Tôi có thấy gì đâu mà bảo là trang web đầu tay?” Câu trả lời là: Có rồi. Bây giờ chỉ việc xem nó mà thôi.

Ta mở trình duyệt web ra để có thể xem được nó. Hãy nhấp kép vào Hình ảnh (hình dự phòng) ở màn hình Desktop hoặc chính cái bạn dùng xem trang web này, bạn bấm Ctrl + N để mở cửa sổ mới. Từ đó bạn vào menu File của trình duyệt web (web browser) để mở trang web bạn vừa “thiết kế” lúc nãy. Menu File -> Open -> tìm đến thư mục My Documents, mở file trangWeb.html của bạn và bấm nút Browse để tìm đến file trangWeb.html trong thư mục My Documents và chọn nó để xem (Hình 7)

Hình ảnh
Hình dự phòng
Hình 7

Bạn thấy trang web thế nào? Nó có giống Hình 8 sau?

Hình ảnh
Hình dự phòng
Hình 8

Nếu giống: Bạn ĐÃ THÀNH CÔNG bước đầu. Xin chúc mừng bạn!

Nếu chưa giống: bạn cần kiểm tra và thực hiện lại từng bước đúng theo chỉ dẫn trên. Nếu vẫn không ra, gửi bài lên đây và cho địa chỉ email, nick chat của bạn để chúng tôi trợ giúp thêm.

Tiếp Theo >>

%d bloggers like this: