Code Web Đơn Giản

Bài này hướng dẫn bạn tạo một trang web đơn giản và sau đó đưa trang web lên một web server miễn phí. Bạn sẽ có trải nghiệm mình làm chủ một trang web trên Internet với một tên miền mang tên bạn. Việc này nghe to tát nhưng khá đơn giản. Bạn cần hiểu đôi chút về web, nhớ một vài thẻ HTML để tự tạo một trang web đơn giản; để thêm phần thú vị, bạn cũng sẽ biết cách chép những đoạn mã sẵn có để chèn video clip trên youtube hay bản đồ của Google Map vào trang web của mình. Cuối cùng việc upload trang web lên Intenret được thực hiện khá dễ dàng với các công cụ được cung cấp sẵn bởi nhà cung cấp web server.

Làm thế nào để có được một website trên Internet

(Như ở mục 1.3 đã nói, một máy tính chỉ cần: kết nối Internet, lưu trữ website, cài đặt phần mềm web server như Apache, ISS, GWS, nginx là có thể trở thành một web server. Tuy nhiên máy tính cá nhân kết nối Internet của bạn không thể thành web server được vì còn một vấn đề nữa là địa chỉ IP tĩnh mà tài liệu này không nêu ra; bạn hãy công nhận là máy tính của mình không thể trở thành web server được.)

Khi bạn muốn có một web site trên internet thì đầu tiên bạn phải tạo ra web site đó (mục 2 sẽ hướng dẫn cách tạo trang web đơn giản). Nhưng như thế này thì web site của bạn chỉ nằm trong máy tính của bạn, không ai trên Internet truy cập được. Muốn những người khác truy cập được bạn phải đưa toàn bộ web site của mình cho một máy tính web server nào đó. Cái web server này sẽ làm nhiệm vụ phân phát trang web của bạn cho bất cứ người dùng Internet nào muốn truy cập web site của bạn. Để điều hành (thay đổi, cập nhật …) web site của mình bạn phải dùng máy tính cá nhân của bạn điều khiển từ xa web server.

Khi bạn đặt web site của bạn lên một web server nào đó thì web site của bạn phải dùng chung tên miền sẵn có của web server. Ví dụ nếu bạn đặt web site của bạn lên web server yahoo.com thì địa chỉ trang web của bạn phải bắt đầu bằng yahoo.com. Nếu bạn muốn website của bạn có tên miền riêng theo ý bạn thì bạn phải đăng kí (mua) tên miền trỏ tới web server này. Dĩ nhiên nếu bạn không mua tên miền thì người khác vẫn truy cập được web site của bạn qua địa chỉ IP của web server hoặc qua tên miền của web server.

Như vậy để có được một website trên Internet thì bạn phải làm 3 việc sau:

Bạn tự tạo trang web của mình, còn các nhà cung cấp dịch vụ mạng như FPT, VNPT, Viettel sẽ giúp bạn làm nốt 2 việc còn lại. Bạn phải trả tiền thuê web server để host web site của bạn, phải trả tiền đăng kí tên miền. Tuy nhiên cũng có nhiều nhà cung cấp dịch vụ cho bạn miễn phí 2 dịch vụ này với chất lượng khá tốt (sẽ nói ở mục 3).

Địa chỉ IP, URL và tên miền

Địa chỉ IP là địa chỉ của một máy tính trong mạng Internet

Giống như mỗi ngôi nhà trong một thành phố có một địa chỉ nhà, mỗi máy tính trên Internet cũng có một địa chỉ gọi là địa chỉ IP. Địa chỉ IP là một nhóm 4 con số viết liền và ngăn cách nhau bằng dấu chấm, ví dụ địa chỉ IP của máy tính chứa website yahoo.com là [69.147.76.15]. Mỗi địa chỉ IP sẽ xác định duy nhất một máy tính. (Bạn cũng có thể biết địa chỉ IP của máy tính của mình, bằng cách … hãy dùng google để tìm hiểu nhé.)

Tên miền – tên dùng thay cho địa chỉ IP

Địa chỉ IP với 4 con số kia rất khó nhớ, không thực tế cho con người vì thế người ta gán cho mỗi địa chỉ IP một cái tên dễ nhớ hơn gọi là tên miền (domain name).

Ví dụ tên miền của máy tính có địa chỉ IP là [69.147.76.15] là www.yahoo.com.

Mỗi tên miền sẽ tương ứng với một máy tính nào đó trên mạng.

URL là địa chỉ của một tài nguyên (file, trang web, …) trong một máy tính trên mạng Internet

Địa chỉ của một trang web trên Internet sẽ có dạng

<Địa chỉ của webserver chứa trang web>/<đường dẫn thư mục của trang web trên webserver>

Ví dụ: http://sports.yahoo.com/news/team-report-oakland-raiders-173300184–nfl.htmllà địa chỉ của một trang web. Sports.yahoo.com là địa chỉ máy tính, còn news/team-report-oakland-raiders-173300184–nfl.html là đường dẫn đến trang web trên máy tính sports.yahoo.com.

Các video clip (đoạn phim), ảnh, đoạn audio trên Internet cũng có địa chỉ; nói chung mọi thứ trên Internet đều có địa chỉ dẫn đến nó và được gọi chung là URL – Uniform Resource Locator.

Ví dụ: https://www.youtube.com/watch?v=4TyWXe3ytdY là URL của một video clip trên trang yotube.com. www.youtube.com là địa chỉ của máy tính chứa video clip, còn watch?v=4TyWXe3ytdY là truy vấn trên máy tính này để đến được video clip.

Nói chung ở cấp độ của bài này ta chỉ cần hiểu URL là một đường link dẫn đến một trang web, một video clip, một file âm thanh, một file ảnh hay bất kì một file nào đó trên Internet.

Chèn những đoạn code sẵn có vào trang web

Có nhiều khi bạn muốn trang web của mình có những chức năng phức tạp nhưng không đủ kiến thức lập trình để tự làm điều này. Cách nhanh nhất là chép các đoạn mã lập trình những chức năng này do người khác làm và chèn vào trang web của mình.

Google Map là trang web có chức năng cho người dùng xem bản đồ của bất kì vị trí nào trên hành tinh này. Ở mỗi trang bản đồ, Google Map cung cấp luôn đoạn mã HTML cho phép bạn nhúng trang bản đồ này vào trang web của bạn. (Bạn có thể tìm thấy bài hướng dẫn làm điều này bằng tìm kiếm trên google.com với từ khóa “Embed a map into a website”.)

Bước 1: Mở Google map và chọn địa điểm để hiển thị bản đồ

–       Mở trang web Google Map: maps.google.com (nếu không nhớ được địa chỉ này thì bạn dùng google.com để tìm với từ khóa “google map”). Hiện giờ Google đang thử nghiệm giao diện mới – nhưng giao diện mới chưa cung cấp mã HTML bản đồ nên bạn phải dùng giao diện cũ. Nếu bạn đang ở giao diện mới thì bấm vào biểu tượng hình bánh răng ở góc phải trên màn hình, và chọn Classical Map.

–       Trong ô tìm kiếm, bạn gõ địa chỉ bạn cần thể hiện bản đồ, dù bạn gõ tiếng Việt hay tiếng Anh, gõ địa chỉ rất cụ thể hay chung chung, Google đều hiện ra được địa điểm vùng đó. Ở góc phải trên có một nút là Map hoặc Satellite cho phép hiển thị bản đồ hay khung cảnh nhìn từ vệ tinh của địa điểm mà bạn chọn. Hình vẽ dưới đây là chúng tôi đã chọn Satellite.

Bước 2: Tạo đoạn mã HTML và copy

Bạn bấm vào biểu tượng sợi xích sau đó copy toàn bộ đoạn mã trong mục Paste HTML to embed in website. Cuối cùng bạn chèn đoạn mã này vào trang html của bạn.

(Bài tập khó) Ngày nay mạng xã hội facebook, twitter rất phổ biến bạn có thể chèn nút bấm Like, share trên trang web của mình.

Tạo trang web chứa video YouTube, bản đồ google map, ảnh photobucket

Để thực hành tất cả các kiến thức trên đây, bạn có thể tạo một trang web cá nhân đơn giản có nhúng 3 đối tượng multimedia: một video clip trên youtube, một bức ảnh trên photobucket, một bản đồ trên google map như dưới đây.

(Vì lí do in ấn, chúng tôi buộc phải bố trí sao cho cả 3 đối tượng video, ảnh, bản đồ hiển thị vừa đủ trong một trang màn hình như dưới đây, nhưng chúng tôi mong bạn không theo cách này, hãy trình bày đẹp hơn. Kích thước khung bản đồ, khung ảnh, khung video là dài-rộng: 800*180, 400*180, 400*180.)

Mã nguồn được soạn thảo bằng phần mềm Notepad++ để hiển thị các tag được rõ ràng hơn, nhưng bạn đọc dùng Notepad cũng đủ để làm.

Nhắc lại ở mục 1.4 rằng, để có thể có một trang web của riêng mình trên Internet thì bạn phải làm 2 hoặc 3 việc sau:

(1)  Tạo ra trang web trên máy tính cá nhân của mình

(2)  Upload trang web từ máy tính cá nhân của mình lên một web server nào đó.

(3)  (Tùy chọn) Đăng kí tên miền cho trang web của mình

Mục 2 đã hướng dẫn bạn tạo ra trang web của riêng mình.

Với 2 công đoạn còn lại, các nhà cung cấp dịch vụ Internet sẽ cho bạn một web server tốt và một tên miền theo ý của bạn nhưng họ sẽ tính phí rất đắt. Dưới đây chúng tôi nêu ra nhà cung cấp dịch vụ Internet là Byethost.comcho phép bạn upload web site của bạn lên web server của họ đồng thời cho bạn một tên miền con (subdomain) có dạng tên_bạn.byethost.com. Dĩ nhiên tất cả là miễn phí và dễ dàng thao tác.

–       Bước 1: Đăng kí tài khoản với Byethost.com. Trong bước này bạn sẽ chỉ ra tên miền trang web của bạn.

–       Bước 2: Bạn upload trang web của bạn lên web server của Byethost.

Đến đây bạn sẽ có trang web cá nhân của bạn trên Internet (do bạn tự tạo ra) với tên miền con mang tên bạn.

Trước khi bắt tay vào việc bạn cần chuẩn bị hai thứ sau:

–       Bạn phải có một email, của chúng tôi ở đây là [email protected], và chúng tôi sẽ lấy tên miền con là tranhuythang, nên tên miền cuối cùng là tranhuythang.byethost.com.

–       Bạn phải chuẩn bị một trang web, ví dụ là trang profile.htmlnói ở mục 2.

Cái đích của 2 bước dưới đây là upload file profile.html lên làm thành trang web tranhuythang.byethost.com. Như vậy mỗi lần truy cập vào tranhuythang.byethost.com thì trang profile.html sẽ hiện ra.