Tạo trang web đơn giản và đưa lên Internet

Giới thiệu

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.

---

1. Hiểu biết cơ bản về Web

1.1 Webpage – website – world wide web

Trang web. Trang web là một trang văn bản (chứa text, hình ảnh, âm thanh, video, các nút bấm, form điền dữ liệu) thường chứa các đường liên kết, gọi là đường link, đến các trang web khác. Khi bạn bấm vào đường link (dòng chữ màu xanh) trên một trang web, đường link đó sẽ đưa bạn sẽ nhảy đến một trang web khác. Bởi web là văn bản liên kết với văn bản khác nên người ta còn gọi trang web là siêu văn bản (hyper text).

Webpage vs website. Webpage (trang web) là một trang web đơn, còn website là một tập nhiều các trang web đơn của một tổ chức nào đó. Ví dụ website http://www.yahoo.com/của tập đoàn Yahoo có chứa rất nhiều webpage, ví dụ http://sports.yahoo.com/news/team-report-oakland-raiders-173300184–nfl.htmllà một trang web trong website này.

World wide web. Vì có rất nhiều trang web, websites, các trang web này lại được liên kết với trang web khác nên tất cả các trang web hành tinh này tạo thành một mạng lưới các trang web và người ta gọi mạng lưới này là World wide web (web toàn cầu) hay viết tắt là www. Dĩ nhiên WWW là mạng lưới web của cả hành tinh này nên nó là duy nhất, mọi mạng lưới web chỉ là tập con của WWW thôi.

1.2 Đị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.

1.3 Cách thức hoạt động của web

Các trang web trên Internet hiển nhiên phải được lưu trữ ở một máy tính nào đó, máy tính này được gọi là server, hay web server (vì nó lưu web). Ví dụ: các trang web của website yahoo.com được lưu trữ trên máy tính có địa chỉ IP là [65.55.206.228], hay người ta nói web server 65.55.206.228 host (lưu giữ) website yahoo.com. Tương tự như vậy web server [65.55.206.228] host website msn.com, còn web server [17.149.160.49] host website apple.com, v.v.

Khi người dùng lướt web, thực chất là trình duyệt web (như Internet Explorer, Firefox, Google Chrome, …) tải trang web từ web server về máy của người dùng rồi hiển thị lên cho người dùng xem. Cụ thể hơn là khi người dùng gõ địa chỉ trang web thì dựa theo địa chỉ trang web này trình duyệt web sẽ phát ra một yêu cầu (request) cần lấy trang web đến đúng webserver có chứa trang web. Nhận được request, web server sẽ đáp trả (response) trang web cho trình duyệt web.

Máy tính người dùng thì luôn request các trang web nó giống như client (khách hàng). Còn web server, tức là máy tính lưu trang web, thì luôn phải gửi trả trang web phục vụ client vì thế mà người ta dùng tên “server” – người phục vụ. Quan hệ giữa client và server là request và response.

Ở trên nói là máy tính người dùng, nhưng cần được hiểu là phần mềm trình duyệt web trên máy tính người dùng, tạo ra request đến server. Tương tự như vậy khi nói web server thì hiểu là có phần mềm trên máy tính werb server chuyên gửi đáp các trang web, và phần mềm web server thường được dùng  là Apache (của ASF) hay ISS (của Microsoft), GWS (của Google), nginx (của NGINX).

1.4 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:

• (1) Tạo ra web site
• (2) Upload web site đó lên một web server nào đó
• (3) (Tùy chọn) Đăng kí (mua) tên miền cho web site của mình.

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).

2. Tạo một trang web đơn giản

2.1 HTML là cách thức tạo một trang web

Trang web là một trang văn bản, cũng giống như văn bản .docx của Microsoft Word, chứa 2 phần:

1. phần chữ (nội dung)
2. phần trình bày, bao gồm:

• in đậm, nghiêng, gạch chân cho chữ, căn lề, thụt đầu dòng, v.v. chèn hình ảnh, bảng biểu, v.v,
• đặc biệt trang web còn có đường liên kết đến trang web khác và các nút bấm, form điền

Một file văn bản dù là văn bản .docx hay văn bản trang web, ngoài phần chữ (nội dung) ra còn có các thông tin giúp cho việc trình bày văn bản được đẹp mắt. Mỗi phần mềm đọc văn bản sẽ có qui ước riêng về các thông tin trình bày đẹp mắt này: với Microsoft Word sẽ có một cách, với các trình duyệt web sẽ có một kiểu khác.

Tập các qui tắc, mà các trình duyệt web tuân theo, về việc trình bày (cho đẹp mắt) phần nội dung (chữ) của trang web được gọi là HTML – Hyper Text Mark up Language, ngôn ngữ đánh dấu (cho) siêu văn bản. Siêu văn bản là các văn bản có đường liên kết với các văn bản khác, tức là trang web mà chúng ta đang bàn. Vậy còn ngôn ngữ đánh dấu là gì? Xem ví dụ sau:

Ví dụ 1: In đậm một đoạn chữ (chú ý kí hiệu <b>và </b>)

Nội dung của file văn bản Tim.html	Hiển thị trang web Tim.html trong trình duyệt
I am <b>Tim Berners-Lee</b>, who invented the World Wide Web.	I am Tim Berners-Lee, who invented the World Wide Web.

Các văn bản trang web sẽ dùng cặp kí hiệu <b> … </b>đểđánh dấuđoạn chữ (kẹp giữa) cần được in đậm lên khi hiển thị trong trình duyệt web. Để in nghiêng, gạch chân, … người ta dùng các “kí tự đánh dấu” là <i>…</i>, <u>…</u>,… và tập các “kí tự đánh dấu”, gọi là “tag”, kiểu này gọi là HTML – ngôn ngữ đánh dấu cho các siêu văn bản (= trang web).

Một trang web chính là một file có sử dụng HTML và có tên là *.html, cũng gọi là trang html.

Văn bản .docx của Microsoft Word cũng giống như văn bản trang web HTML, nó cũng cần những tagkiểu <b>,</b>này nhưng Microsoft Word tự làm việc này cho bạn, nó cung cấp sẵn cho bạn các công cụ trực quan giúp bạn làm việc mà không phải quan tâm đến những thứ này. Theo cách này Word được gọi là công cụ What You See Is What You Get (WYSIWYG). Bạn cũng sẽ có những công cụ WYSIWYG cho việc tạo web, nhưng để hiểu về web thì bạn nên tập gõ code HTML.

Ví dụ 2: Tạo trang web có chứa hình ảnh, đường link

Các file văn bản web là các plain text file nên bạn hãy dùng Notepad để soạn thảo trang web. Thực hành:

• Bước 1: mở Notepad và soạn thảo file văn bản trang web (như dưới đây) và ghi lại thành, ví dụ C:\Tim.html.
• Bước 2: mở trình duyệt web (như Intenret Explorer) và gõ vào ô địa chỉ đường dẫn file trang web:C:\Tim.html.

Notepad: Nội dung file C:\Tim.html

I am <b>Tim Berners-Lee</b>, who invented the World Wide Web.   My picture is <img src=”http://upload.wikimedia.org/wikipedia/commons/f/f8/Tim_Berners-Lee.jpg“>   Click <a href=”http://www.google.com“>here</a> to jump to the search page.

Internet Explorer (IE): Gõ C:\Tim.html trong ô Address để hiển thị trang web Tim.html trong IE

I am Tim Berners-Lee, who invented the World Wide Web. My picture is Click here to jump to the search page.

Nếu bạn bấm chuột vào “here” thì trang web sẽ đưa bạn đến trang google.com

Ở đây:

• <img src=”my image link”>: chèn ảnh có đường link trên là “my image link”
• <a href=”some link”> xyz </a>: chèn đường link có địa chỉ là “some link” và hiển thị đường link này thành “xyz”.

Bức ảnh trên được lấy từ trên Internet (mục từ Tim Berners-Lee trên Wikipedia) nhưng bạn cũng có thể tự chèn một file ảnh trên máy tính của mình vào – thay đường link trên bằng C:\myphoto.jpg.

2.2 Một số tag cơ bản của HTML

Như ở trên đã nói HTML là một tập các tag để mô tả cách trình bày/hiển thị nội dung text của trang web cho trình duyệt web. Các tag thường có 2 dạng:

• Cặp tag mở và đóng. Ví dụ <b>là tag mở, </b>là tag đóng được dùng để trình bày đoạn chữ nằm giữa hai tag theo cách của tag, cụ thể ở đây là in đậm. Người ta cũng gọi cụm 3 thành phần: tag mở, đoạn chữ, tag đóng, như <b>Tim Berners-Lee </b>,là một element.
• Tag đơn. Ví dụ <br>(xuống dòng) là một tag đơn

Các trang web (tĩnh) có phần mở rộng là .html, nó là một loại file plain text – chỉ chứa kí tự.

2.2.1.1 Cấu trúc của một file .html

<html> <head> Thông tin mô tả thêm về trang web, không phải nội dung trang web, không được hiển thị </head>   <body> Nội dung trang web – sẽ được hiển thị trong trình duyệt </body> </html>

Một file được phân loại là html nếu nó có cặp tag: <html> ở đầu và </html> ở cuối file. (Thực ra bạn không cần có cặp tag <html> </html> hay <body> </body> thì trình duyệt web vẫn xử lí file như là html file như ở ví dụ trên, nhưng có những khi file của bạn được xử lí bằng các chương trình khác nên vẫn rất cần cặp tag này để chỉ đây là một html file.)

Tất cả những gì nằm trong html file được đặt trong <html> và</html>, bao gồm hai phần:

–       Phần đầu đặt trong <head> và </head>. Đây là những thông tin mô tả về trang web, không phải nội dung trang web, bao gồm:

• Tên của trang web, sẽ nằm trên thanh tiêu đề của trình duyệt, được đặt trong <title>và </title>
• Tên tác giả
• Stylesheet, … (vượt qua phạm vi của tài liệu này)

–       Phần nội dung trang web đặt trong <body>và </body>. Tất cả chữ, ảnh, đường link v.v. phải được đặt trong 2 tag này.

2.2.1.2 Các tag định dạng chữ, đoạn văn bản

• In đậm (bold): <b> </b>, In nghiêng (italic): <i> </i>, Gạch chân (underlie): <u> </u>
• Chữ nhỏ <small> </small>, Chữ to <big> </big> Mỗi tag <small> hoặc <big> sẽ giảm hoặc tăng cỡ chữ lên 1 đơn vị (chú ý là HTML 5 không có tag <big> này!)
• Đề mục phân cấp <h?> </h?> trong đó ? là các số từ 1 đến 7. Đề mục cấp <h1>sẽ chứa các đề mục cấp con là cấp <h2>, đề mục cấp <h2>sẽ chứa đề mục cấp <h3>, …
• Trích dẫn <blockquote> </blockquote>. Đoạn chữ nằm trong 2 tag này sẽ được xuống dòng và có lề trái to hơn bình thường – để thể hiện trích dẫn theo văn phong sách, báo.
• Chèn mã nguồn <code> </code>. Đoạn chữ trong 2 tag này sẽ được hiển thị theo kiểu của mã nguồn phần mềm.
• Màu chữ <font color = “#??????”> </font>Con số 6 chữ số ?????? là mã màu. (không nên dùng tag này mà thay vào đó dùng CSS)
• Chèn xuống dòng <br/>. Mỗi <br/> là một dấu xuống dòng, có thể có nhiều <br> liền nhau.
• Thẻ đoạn văn bản <p> </p>. Đoạn chữ đặt trong <p> và </p>sẽ được coi là một đoạn văn bản, khoảng cách giữa các đoạn văn bản sẽ lớn hơn khoảng cách giữa các dòng trong cùng một đoạn.

Xem thêm về các bài học thiết kế web với HTML và CSS.

2.2.1.3 Các tag nhúng link, video, audio, photo, email vào trang web

Chèn đường link đến một trang web khác

• Tag chèn link: <a href=”url”>link text </a>, trong đó “link text” là phần chữ hiển thị màu xanh mà ẩn dưới là đường link, đường link được cho bởi “url”. Việc bấm vào đường link sẽ khiến trang web hiện thời của bạn mất đi để tải trang web mà đường link trỏ tới. Nếu bạn muốn trang web được trỏ tới mở trong một cửa sổ mới (hoặc một tab mới) thì thêm thuộc tính target = “_blank” vào, ví dụ: <a href=”url” target = “_blank”>link text </a>

• Chèn địa chỉ email vào trang web: <a href=”mailto:real_email_address”>email_to_show </a> trong đó email_to_show là cái hiển thị ra mà ẩn dưới đó là my_email_address – địa chỉ email cần chèn vào. Khi người lướt web bấm vào địa chỉ email thì trình duyệt sẽ gọi chương trình soạn email ra, như Outlook, Thunderbird, … để cho người dùng soạn email gửi đến my_email_address.
• Nhúng ảnh, video vào trang web

Để nhúng ảnh, video vào trang web thì trước tiên ảnh, video phải được đưa lên Internet, khi đó chúng ta sẽ có URL dẫn đến nó. Sử dụng URL này bạn sẽ nhúng được ảnh, video vào trang web của bạn.

Cách đưa ảnh, video lên Internet để lấy URL truy cập sẽ được nói riêng ở mục 2.3.

• Tag để chèn ảnh: <img src=”url”>với “url” là đường link đến ảnh của bạn.

Theo mặc định ảnh sẽ được hiển thị theo kích thước thật của nó, nếu muốn thu nhỏ, phóng to ảnh ra, dùng thêm thuộc tính width = “?” height = “?” để chỉ ra kích thước mong đợi (tính theo pixel).

<img src=”url” width = “?” height = “?”>

• Tag để chèn video: <iframe src=”url”> </iframe>với url là đường link đến video của bạn.

Theo mặc định video sẽ được hiển thị theo kích thước thật của nó, nếu muốn chỉ rõ kích thước cho video (tính theo pixel) dùng thêm thuộc tính width = “?” height = “?”

<iframe src=”url” width = “?” height = “?”> </iframe>

• HTML 5 và tag chèn video, audio

HTML 5 được đưa ra vào cuối năm 2012, (hiện vẫn còn trong giai đoạn thử nghiệm, chưa trở thành chuẩn nhưng tất cả các trình duyệt web quen thuộc phiên bản 2013 đều hỗ trợ), HTML 5 có các tag riêng cho việc chèn video, audio vào trang web. (Tinh thần của HTML 5 là hỗ trợ tối đa dữ liệu multimedia như ảnh, video). Tương tự như trên, 2 ví dụ sau sẽ giúp bạn hiểu:

<audio controls>
<source src=”url” type=”audio/ogg”>
</audio>

<video width=”?” height=”?” controls>
<source src=”url” type=”video/mp4″>
</video>

Thuộc tính controls để hiển thị nút play, stop, pause.

2.3 Cách upload ảnh, video lên Internet và lấy direct link

Làm thế nào để upload ảnh, video của bạn lên Internet và sau đó nhúng những file ảnh, video này vào trang web của bạn.

Khi bạn định đưa website của bạn lên Internet thì bạn cũng có thể upload ảnh, video lên chính webserver mà host (chứa) website của bạn. Nhưng bạn cũng có thể upload ảnh (image), video lên các server chuyên nghiệp về ảnh, video – gọi là image/video hosting server.

Trang web (hay server) tuyệt vời (nổi tiếng, miễn phí, chất lượng) để upload video là youtube.com.

Với ảnh thì tuy có nhiều trang cho bạn upload ảnh lên nhưng lại có một vấn đề là không phải trang nào cũng đồng ý cho bạn nhúng ảnh được upload lên vào trang web của bạn – chức năng này gọi là hot-linking. Ví dụ trang web chia sẻ ảnh lớn nhất thế giới là flickr.com, họ chỉ cho upload ảnh, chia sẻ ảnh nhưng cấm hot-linking. Quên Flickr đi, bạn có thể dùng photobucket.com, tinypic.com – vừa miễn phí, vừa có hot-linking.

Cách upload video, ảnh lên hosting server, ví dụ photobucket.com, youtube.com

Bước 1: Đăng kí tài khoản trên photobucket, youtube.com

Bước 2: upload phim, ảnh

Trên youtube.com, bạn bấm vào nút Upload, rồi bấm chuột vào vùng Select files to upload.

Sau bước trên, bạn chọn file để upload lên và bấm OK. Tiếp đó đợi cho đến khi quá trình hoàn thành, youtube hay photobucket sẽ đưa bạn đến chính trang chứa video, ảnh bạn vừa upload.

Cách lấy direct link của ảnh, video trên photobucket.com, youtube.com

Trên photobucket.com, bạn tìm đến ảnh cần lấy URL (bấm vào Browse, chọn Top Categories), bấm vào nút  sau đó:
–       Chọn mục Direct: để lấy mỗi URL trực tiếp đến ảnh
–       Chọn mục HTML: để lấy nguyên cả đoạn code nhúng ảnh vào trong trang web.

Trên youtube.com, bạn tìm đến video cần lấy URL, bấm vào nút Share, rồi đến nút Embed.

Cuối cùng bạn có thể lại toàn bộ đoạn mã HTML để chèn video này vào trang web của bạn.

2.4 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.

Ví dụ 1: Chèn chức năng bản đồ của Google map vào trang HTML

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.

Ví dụ 2: Chèn các nút Like, Share của các Mạn xã hội vào trang web

(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.

2.5 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.)

Dưới đây là mã nguồn:

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.

3. Đưa website lên Internet

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ạn cần làm 2 bước sau:

–       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à tranhuythang@gmail.com, 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.

3.1 Bước 1: Đăng kí tài khoản để có chỗ upload website đồng thời đăng kí tên miền con

• Bạn vào trang chủ là http://byethost.com/, bấm vào nút Sign up
• Bạn được chuyển đến trang Signup for free hosting, và bạn điền vào các thông tin của bạn (email, username, password), và đặt:
  • Script to Install: Do not install
  • Site Category: Personal
  • Site language: English

Cuối cùng bạn gõ nhắc lại Security Code và bấm nút Register. Nếu bước này thành công, bạn sẽ nhận được thông báo “An activation email has now been sent to tranhuythang@gmail.com , please click the activation link in the email to activate this account” tức là Byethost.com đã gửi thư xác nhận email của bạn là có thật, hợp lệ.

• Bạn check mail, có thể phải đợi một lúc sẽ thấy email của Byethost với tiêu đề là “Action required to activate hosting account tranhuythang.byethost7.com”, mở ra bấm vào đường link trong email để kích hoạt tài khoản.
• Bạn nhận được thông báo: “We see you did not pick a script to install. Please choose a script or just press Continue to move on” và bạn sẽ chọn “press Continue to move on” tức là không làm gì mà chỉ bấm vào nút Continue.
• Tiếp đó bạn nhận được thông báo: “Your account will be active in 60 seconds. Please do not refresh this page, it will automatically reload once the account is created.” Bạn đợi 60 giây và thông báo sẽ biến mất
• Tiếp đó bạn check mail lần nữa và thấy có thêm một email nữa với tiêu đề “Your new byethost7.com hosting account”. Mở email này ra, bạn nhận được các thông tin quan trọng nhất sau đây cần ghi nhớ:

————————————————— Cpanel Username:        b7_13539346 Cpanel Password:        Abc83573   Your URL: http://tranhuythang.byethost7.com or http://www.tranhuythang.byethost7.com   FTP Server :            ftp.byethost7.com FTP Login :             b7_13539346 FTP Password :          Abc83573   MySQL Database Name:    MUST CREATE IN CPANEL MySQL Username :        b7_13539346 MySQL Password :        Abc83573 MySQL Server:           SEE THE CPANEL   Cpanel URL:             http://cpanel.byethost7.com —————————————————

Những dòng đáng chú y nhất là

• Your URL: đây là trang web của bạn, cụ thể ở đây là http://tranhuythang.byethost7.comvà http://www.tranhuythang.byethost7.com(chỉ khác nhau ở www)
• Cpanel URL: đây là trang web giúp bạn quản trị (upload, cập nhật, …) website của bạn, cụ thể ở đây là http://cpanel.byethost7.com. Để đăng nhập được vào trang này bạn cần Cpanel username và Cpanel Password. Ở bước 2 chúng ta sẽ làm việc với trang Cpanel này.

Bước 1+: Sau bước 1 ở trên, bạn được cấp một thư mục tên là htdocstrên web server của Byethost để upload web site của bạn vào đó (sẽ nói ở bước 2 dưới đây). Đồng thời bạn tạo được 2 tên miền là http://tranhuythang.byethost7.comvà http://www.tranhuythang.byethost7.com. Hãy thử truy cập vào 2 địa chỉ này xem sao?

Trong thư mục htdocs, Byethost đã đặt sẵn file index.html và thiết lập mặc định để khi bạn truy cập 2 địa chỉ trên thì sẽ vào trang index.html. Nội dung trang index.html này như sau:

Congratulations! Your free hosting account has been activated. Replace this index.html file with your website using FTP or the file manager. Premium Hosting   Business Hosting   VPS Servers   Reseller Hosting   Free Domain[……]

Byethost đã nhắc bạn là “Replace this index.html file with your website using FTP or the file manager.” tức là bạn nên thay cái file index.html được tạo sẵn này bằng file của bạn và để làm việc này bạn có thể dùng FTP client hoặc File manager của chính Byethost. Dưới đây chúng tôi chọn file manager.

3.2 Bước 2: Upload website lên web server

–       Sau khi cấp cho bạn thư mục htdocstrên web server để lưu giữ website của bạn, Byethost cũng cho bạn công cụ cPanel để quản trị website cho bạn. Công cụ cPanel là một trang web, địa chỉ của nó được cho trong email Byethost gửi cho bạn (xem bảng ở phần trên) và là http://cpanel.byethost.com, bạn đăng nhập vào trang này cũng bằng cpanel username, cpanel password mà Byethost gửi cho bạn (xem hình bên).

–       Sau khi đăng nhập bạn sẽ vào trang web cPanel. Hộp thoại Welcome New User hiện ra mời bạn tham quan và hướng dẫn bạn, bạn nên chọn “No I’m fine, Thanks” để bỏ qua hộp thoại này. Bạn cũng nên chọn “Don’t show me this again” để lần sau hộp thoại này không hiện ra nữa.

–       Như bạn thấy cPanel là một tập rất nhiều công cụ, nhưng ở cấp độ của bài viết này bạn chỉ dùng Online File Manager – công cụ quản lí file, thư mục con trong thư mục htdocs (nhắc lại rằng htdocs là thư mục lưu website của bạn). Bấm vào Online File Manager, bạn sẽ vào trang web dưới đây:

• Bạn có thể nhìn thấy ngay thư mục htdocs , bạn bấm chuột vào htdocs
• Byethost cũng chú ý bạn là bạn chỉ được upload website của bạn vào bên trongthư mục htdocs, không được upload website vào chỗ bên cạnhthư mục htdocs, nên Byethost tạo một file có tên “DO NOT UPLOAD FILES HERE” thay cho thông báo.

• Khi bạn vào bên trong thư mục htdocs, bạn sẽ thấy mọi thứ như dưới đây:
  • Trong thư mục htdocs, Byethost tạo sẵn 2 file là index2.html và “files for your website should be uploaded here!”. Cái tên file thứ hai dài loằng ngoằng này được dùng thay cho lời thông báo là bạn nên upload website của bạn vào đây.
  • Bạn hãy để ý đến các nút bấm giúp bạn làm việc với file, thư mục ở trong htdocs này:
    • New dir: tạo một thư mục mới
    • New file: tạo một file mới
    • Upload: đây là nút để chúng ta upload website lên
    • Copy: sao chép file, thư mục
    • Move: di chuyển file, thư mục
    • Delete: xóa file, thư mục
    • Rename: đổi tên file, thư mục
  • Bạn bấm vào nút Upload, trang web sau sẽ hiện ra. Đến đây bạn sẽ upload file trang web của mình lên – cụ thể là file profile.html.
    • Bạn bấm vào Choose file để ra hộp thoại cho bạn chọn file để upload.

 

• Sau khi tìm được file profile.html xong, bạn bấm vào nút Open. Bạn sẽ thấy tên “profile.html” sẽ hiện ra bên cạnh nút bấm Choose file.
• Cuối cùng bạn bấm vào nút  . Đợi một lúc bạn sẽ thấy:

Thông báo Checking files: “File profile.html” is OK và “File profile.html has been transferred” thể hiện việc upload file đã thành công

• Bạn bấm nút  để quay lại giao diện quản lí file như dưới đây và sẽ thấy xuất hiện thêm file profile.html – chính là file bạn vừa upload.
• Đến đây, mỗi lần truy cập vào tranhuythang.byethost.com/profile.html bạn sẽ ra được trang web html do bạn tạo. Việc gõ đuôi “profile.html” không thật dễ nhớ, bạn có thể thiết lập để mỗi lần truy cập tranhuythang.byethost.com thì bạn sẽ đến được trang profile.html kia bằng cách đổi tên profile.html thành index.html:
  • Bạn tick dấu nhân vào vào profile.html
  • Chọn Rename và bạn nhận được hộp thoại sau:
  • Bạn gõ tên mới là “index.html” trong ô New name, bấm vào nút để thi hành. Nếu thành công, bạn nhận được thông báo “profile.html was successfully renamed to index.html”
  • Cuối cùng bạn bấm vào  để quay về thư mục htdocs, bạn sẽ thấy mình có file index.html như dưới đây.
• Bước cuối cùng là bạn bấm vào nút  để thoát khỏi file manager. Một thông báo hiện ra nhắc bạn đóng lại cả trang web để những người khác không truy cập vào được file manager nữa, bạn bấm vào Close để hoàn tất mọi việc.

Sau 2 bước trên bạn đã upload thành công trang web của mình và mỗi lần truy cập tranhuythang.byethost.com bạn sẽ thấy nội dung trang profile.html hiện ra.