Trang chủ Viện

Hướng dẫn › Dạy theo môn

Hướng dẫn: Tập làm trang web

Gõ HTML, CSS, JavaScript vào ba ô và xem ngay trang web vừa làm ở khung bên cạnh. Dùng khi học lập trình web ở môn Tin học: thầy cô chiếu và sửa mã trước lớp, học sinh thực hành ở phòng máy hoặc ở nhà mà không phải cài gì.

Mở công cụ

Cần chuẩn bị

Làm quen với ba ô và khung xem thử

  1. Mở Tập làm trang web. Ô Bài đang chọn "1. Trang web đầu tiên"; bên trái là mã, bên phải là khung Trang web của em.
  2. Ở thẻ HTML, sửa chữ "Xin chào!" thành tên của em. Ngừng gõ chưa đến một giây, khung bên phải đổi theo.
  3. Bấm thẻ CSS, gõ "h1 { color: blue; }". Tiêu đề trong khung chuyển sang màu xanh.
  4. Bấm thẻ JavaScript, gõ "console.log(1 + 2);" rồi bấm Chạy. Số 3 hiện ở mục Thông báo dưới khung.
  5. Dòng chữ bên phải tiêu đề khung ghi "Đã chạy lúc …" mỗi lần trang chạy lại.

Sửa ô HTML, CSS thì trang tự chạy lại. Sửa ô JavaScript thì phải bấm Chạy hoặc Ctrl + Enter. Muốn tự bấm Chạy cả khi sửa HTML, CSS thì bỏ tích ô Tự chạy lại khi sửa HTML, CSS.

Học theo bài mẫu

  1. Bấm ô Bài, chọn một bài, ví dụ "4. Bảng". Mã của bài hiện ở ba ô, dòng nền xanh phía trên gợi ý việc nên thử.
  2. Làm theo gợi ý, ví dụ thêm cột Thứ Tư vào bảng thời khóa biểu, và xem khung bên phải.
  3. Chọn bài khác lúc nào cũng được. Phần em đã sửa ở mỗi bài được giữ lại, quay lại bài vẫn còn.
  4. Bấm Làm lại từ đầu, bấm đồng ý để bỏ phần đã sửa và đưa bài đang chọn về như lúc đầu.
  5. Chọn "Trang của em (trang trống)" để tự làm một trang theo ý mình.

Có 10 bài: trang web đầu tiên; tiêu đề, đoạn văn, danh sách; liên kết và ảnh; bảng; biểu mẫu; CSS màu và chữ; CSS khung, khoảng cách; JavaScript bấm nút; lấy dữ liệu từ ô nhập; đổi kiểu trang bằng sự kiện.

Tìm và sửa lỗi JavaScript

  1. Bấm Chạy. Nếu mã có lỗi, mục Thông báo hiện dòng nền đỏ, ví dụ "Lỗi JavaScript ở dòng 2: ReferenceError: khongCo is not defined. Tên này chưa được khai báo…".
  2. Xem số dòng trong thông báo, tìm dòng đó ở thẻ JavaScript (số dòng ghi ở lề trái).
  3. Sửa lại rồi bấm Chạy. Hết lỗi thì dòng đỏ không còn.
  4. Muốn xem giá trị của một biến, thêm câu lệnh console.log(tên biến); giá trị hiện ở mục Thông báo.

Phần tiếng Anh trong thông báo là lời của trình duyệt; câu tiếng Việt đi kèm giải thích các lỗi hay gặp.

Chiếu lên lớp

  1. Bấm Chữ to để chữ trong ô soạn mã lớn lên cho cả lớp đọc được. Bấm lần nữa để về cỡ thường.
  2. Bấm Toàn màn hình. Nút đổi thành Thoát toàn màn hình.
  3. Sửa mã trước lớp; mỗi lần sửa, cả lớp thấy trang đổi theo.

Tải trang web về máy, nộp bài

  1. Bấm Tải trang web về máy. Máy tải về tệp "trang-web.html" gồm cả HTML, CSS và JavaScript của bài đang chọn.
  2. Bấm đúp vào tệp để mở bằng trình duyệt. Trang chạy như một trang web thật, không còn giới hạn của khung xem thử.
  3. Đổi tên tệp theo yêu cầu của thầy cô, ví dụ "10A1-to2-bai4.html", rồi nộp qua hệ thống học trực tuyến của trường hoặc thư điện tử.

Lưu ý

Hỏi đáp

Gõ mã JavaScript rồi mà trang không đổi?
Sửa ô JavaScript thì trang không tự chạy lại. Bấm Chạy hoặc Ctrl + Enter.
Hiện "Trang chưa chạy xong sau 5 giây"?
Nếu không phải trang đang chờ em bấm một hộp thoại thì mã JavaScript có vòng lặp không dừng, ví dụ while (true) {}. Sửa điều kiện lặp ở thẻ JavaScript rồi bấm Chạy.
Mở lại trang thì thấy "Lần chạy trước chưa xong…" và khung để trống?
Lần trước trang đóng khi mã chưa chạy xong, nên máy không tự chạy lại để khỏi bị treo. Kiểm tra vòng lặp trong ô JavaScript rồi bấm Chạy.
Thẻ img dùng địa chỉ ảnh trên mạng nhưng không hiện ảnh?
Khung xem thử chặn ảnh từ máy chủ khác, mục Thông báo có ghi địa chỉ bị chặn. Mã của em không sai: bấm Tải trang web về máy, mở tệp bằng trình duyệt sẽ thấy ảnh.
Bài làm có gửi cho thầy cô không?
Không. Bài chỉ nằm trên máy của em. Muốn nộp thì bấm Tải trang web về máy rồi gửi tệp.
Mất mạng có làm tiếp được không?
Được, nếu trang đã mở xong. Mọi thứ chạy ngay trên máy. Chỉ ảnh mẫu ngoi-nha.svg là không tải được khi mất mạng.