1 of 82

CHỦ ĐỀ 4. GIẢI QUYẾT VẤN ĐỀ VỚI SỰ TRỢ GIÚP CỦA MÁY TÍNH�BÀI 7. HTML VÀ CẤU TRÚC TRANG WEB

  • Giáo viên: Phan Thiện Huệ
  • SĐT/Zalo/FB: 0382 1682 32
  • Công tác: Trường THPT Chuyên Thoại Ngọc Hầu

2 of 82

1. TRANG WEB VÀ HTML

Trang web

Trang nguồn (mã nguồn)

3 of 82

1. TRANG WEB VÀ HTML

Trang html

Ngôn ngữ html

Phần tử html

Thẻ html (tag)

Ngôn ngữ HTML (HyperText Markup Language): ngôn ngữ đánh dấu siêu văn bản, được sử dụng để tạo trang web

4 of 82

1. TRANG WEB VÀ HTML

a) Thẻ đánh dấu HTML (tag)

  • Được viết trong cặp dấu “<“, “>”
  • Không phân biệt chữ hoa chữ thường
  • Thẻ đôi: có thẻ bắt đầu (opening tag) và thẻ kết thúc (closing tag)

<p> … </p>

  • Thẻ đơn: chỉ có thẻ bắt đầu

<hr> hoặc <hr/>

  • Có thể kèm các thông tin thuộc tính

<p style=“color:red”> Đây là dòng đầu tiên </p>

  • Các thẻ có thể lồng nhau

<body><div><p> … </p></div></body>

5 of 82

1. TRANG WEB VÀ HTML

b) Phần tử HTML (element)

  • Phần tử HTML: thẻ + nội dung của thẻ

(thẻ có chức năng định dạng nội dung)

    • Thẻ đôi: <tên thẻ>Nội dung</tên thẻ>

<h1>Trang Web và HTML</h1>

    • Thẻ đơn: <tên thẻ>

<hr>

    • Thẻ lồng nhau:

<tên thẻ cha>

<tên thẻ con>Nội dung </tên thẻ con>

</tên thẻ cha>

<head><title>Tên trang Web</title></head>

  • Tệp HTML: tập hợp các phần tử HTML

6 of 82

2. CẤU TRÚC CƠ BẢN CỦA MỘT TỆP HTML

html

head

body

meta

title

div

p

h1

p

hr

p

em

7 of 82

2. CẤU TRÚC CƠ BẢN CỦA MỘT TỆP HTML

html

head

body

meta

title

div

p

h1

p

hr

p

em

Cấu trúc hình cây:

  • Gốc cây: phần tử <html>
  • Quan hệ cha-con: các phần tử lồng nhau

​

8 of 82

3. PHẦN MỀM SOẠN THẢO HTML

a) Phần mềm Notepad

  • Khởi động phần mềm Notepad
  • Nhập nội dung trang html vào Notepad
  • Lưu tệp với định dạng html (đuôi .html)

9 of 82

3. PHẦN MỀM SOẠN THẢO HTML

b) Phần mềm soạn thảo HTML chuyên nghiệp nguồn mở

Phần mềm Notepad++

Phần mềm Sublime Text

10 of 82

3. PHẦN MỀM SOẠN THẢO HTML

b) Phần mềm soạn thảo HTML chuyên nghiệp nguồn mở

Phần mềm Notepad++

Phần mềm Sublime Text

11 of 82

3. PHẦN MỀM SOẠN THẢO HTML

c) Sử dụng trang web hỗ trợ soạn thảo HTML trực tuyến

12 of 82

CHỦ ĐỀ 4. GIẢI QUYẾT VẤN ĐỀ �VỚI SỰ TRỢ GIÚP CỦA MÁY TÍNH�BÀI 8. ĐỊNH DẠNG VĂN BẢN

Giáo viên: PHAN THIỆN HUỆ

SĐT/Zalo/FB: 0382 168 232

Công tác: Trường THPT Chuyên Thoại Ngọc Hầu

13 of 82

1. Thuộc tính thẻ

<h2> Xin chào mọi người</h2>

<hr>

<h2 style="color:red" align="center"> Xin chào mọi người</h2>

13

14 of 82

1. Thuộc tính thẻ

14

Thẻ có thể có hoặc không có thuộc tính

Cú pháp: tên_thuộc_tính = “giá trị”

Bổ sung thông tin, làm rõ cách xử lí của thẻ

Nằm trong thẻ bắt đầu, sau tên thẻ

Các thuộc tính được ngăn cách bởi dấu cách

15 of 82

2. Các thẻ định dạng trình bày văn bản�a) Định dạng tiêu đề

<hx> … </hx> (x = 1, 2, 3, 4, 5, 6)

<html>

<title>ThayHueTNH</title>

<h1>Tin học 12</h1>

<h2>Phần chung</h2>

<h3>Chủ đề 1. Máy tính và xã hội tri thức</h3>

<h4>1. Trí tuệ nhân tạo và ứng dụng</h4>

<h4>2. Trí tuệ nhân tạo trong khoa học và đời sống</h4>

<h3>Chủ đề 2. Mạng máy tính và internet</h3>

<h4>3. Một số thiết bị mạng thông dụng</h4>

<h4>4. Thiết bị mạng</h4>

</html>

15

16 of 82

2. Các thẻ định dạng trình bày văn bản

<html>

<title>ThayHueTNH</title>

<h1>Tin học 12</h1>

<h2>Phần chung</h2>

<h3>Chủ đề 1. Máy tính và xã hội tri thức</h3>

<h4>1. Trí tuệ nhân tạo và ứng dụng</h4>

<h4>2. Trí tuệ nhân tạo trong khoa học và đời sống</h4>

<h3>Chủ đề 2. Mạng máy tính và internet</h3>

<h4>3. Một số thiết bị mạng thông dụng</h4>

<h4>4. Thiết bị mạng</h4>

</html>

​

​

16

17 of 82

2. Các thẻ định dạng trình bày văn bản�b) Định dạng đoạn văn bản

17

18 of 82

2. Các thẻ định dạng trình bày văn bản�b) Định dạng đoạn văn bản

18

Thẻ

Mô tả

<p> … </p>

Đoạn văn bản, có khoảng trống trước và sau đoạn

<div> … </div>

Khối văn bản (block), chứa nội dung bất kì giữa 2 thẻ

<span> … </span>

Khối văn bản bên trong (inline) với quy mô nhỏ

<br>

Xuống dòng

<hr>

Đường kẻ ngang

19 of 82

3. Các thẻ định dạng phông chữ�a) Định dạng kiểu chữ

19

Ví dụ

Hiển thị trên trình duyệt

Đây <strong>là câu</strong> chuẩn

Đây là câu chuẩn

20 of 82

3. Các thẻ định dạng phông chữ�a) Định dạng kiểu chữ

20

21 of 82

3. Các thẻ định dạng phông chữ�b) Định dạng phông chữ

21

22 of 82

3. Các thẻ định dạng phông chữ�b) Định dạng phông chữ

22

<p style = “color : màu”> … </p>

23 of 82

3. Các thẻ định dạng phông chữ�b) Định dạng phông chữ

23

24 of 82

3. Các thẻ định dạng phông chữ�b) Định dạng phông chữ

24

<p style = “font-family : tên phông”> … </p>

25 of 82

3. Các thẻ định dạng phông chữ�b) Định dạng phông chữ

25

<p style = “font-size : cỡ”> … </p>

26 of 82

3. Các thẻ định dạng phông chữ�b) Định dạng phông chữ

26

<p style = “text-align : loại lề”> … </p>

27 of 82

3. Các thẻ định dạng phông chữ�b) Định dạng phông chữ

27

<p style = “text-decoration : loại gạch ngang”>

…

</p>

28 of 82

4. THỰC HÀNH ĐỊNH DẠNG VĂN BẢN VÀ PHÔNG CHỮ

Nhiệm vụ: Viết đoạn mã HTML để trình bày đoạn văn bản trong Hình 8.3

Bước 1. Phân tích thành phần của văn bản

Dòng tiêu đề

Dòng tiêu đề

Dòng tiêu đề

Đoạn văn

In đậm

In nghiêng

Xuống dòng

In đậm

Chỉ số dưới

Chỉ số trên

Màu đỏ

29 of 82

4. THỰC HÀNH ĐỊNH DẠNG VĂN BẢN VÀ PHÔNG CHỮ

Nhiệm vụ: Viết đoạn mã HTML để trình bày đoạn văn bản trong Hình 8.3

Dòng tiêu đề

Dòng tiêu đề

Dòng tiêu đề

Đoạn văn

In đậm

In nghiêng

Xuống dòng

In đậm

Chỉ số dưới

Chỉ số trên

Màu đỏ

Bước 2. Dùng thẻ HTML để định dạng văn bản

<h2>

<h3>

<h3>

<p>

<b>

<i>

<br>

<b>

<sub>

<sup>

<span style=“color:red”

30 of 82

VẬN DỤNG

​

​

​

​

​

​

​

​

​

​

​

2. Hãy đưa ra cách định dạng một đoạn văn bản để được kết quả như sau:

31 of 82

CHỦ ĐỀ 4. GIẢI QUYẾT VẤN ĐỀ �VỚI SỰ TRỢ GIÚP CỦA MÁY TÍNH�BÀI 9. TẠO DANH SÁCH, BẢNG

Giáo viên: PHAN THIỆN HUỆ

SĐT/Zalo/FB: 0382 168 232

Công tác: Trường THPT Chuyên Thoại Ngọc Hầu

32 of 82

1. Tạo danh sách

a) Danh sách có hoặc không có thứ tự

Cấu trúc:

<thẻ bắt đầu>

<li> mục thứ 1 </li>

…

<li> mục thứ n </li>

</thẻ kết thúc>

32

33 of 82

1. Tạo danh sách

Danh sách có thứ tự dùng cặp thẻ <ol>..</ol>

ol = order list

li = list item

Chọn kiểu đánh thứ tự và giá trị bắt đầu, thuộc tính type và start

type: xác định kiểu đánh số, ví dụ: “1”, “a”, “A”, “I”, “i”.

start: xác định giá trị bắt đầu đánh số.

33

34 of 82

1. Tạo danh sách

Danh sách có thứ tự

Ví dụ:

Các ngành học hot nhất hiện nay:

  1. Công nghệ thông tin
  2. Truyền thông marketing
  3. Công nghệ ô tô
  4. Du lịch khách sạn
  5. Thiết kế đồ họa
  6. Trí tuệ nhân tạo

​

Code HTML

Các ngành học hot nhất hiện nay:

<ol type=“1”>

<li>Công nghệ ..</li>

<li>Truyền thông ..</li>

<li>Công nghệ ô tô</li>

…

</ol>

34

35 of 82

1. Tạo danh sách

Danh sách không có thứ tự dung cặp thẻ <ul>..</ul>

ul = unorder list

li = list item

Chọn kiểu ký tự đầu dòng:

Thiết lập giá trị thuộc tính list-style-type

Thuộc tính style tương ứng trong 4 giá trị: disc, circle, square và none

35

36 of 82

1. Thuộc tính thẻ

Danh sách không có thứ tự

Ví dụ:

Các ngành học hot nhất hiện nay:

  • Công nghệ thông tin
  • Truyền thông marketing
  • Công nghệ ô tô
  • Du lịch khách sạn
  • Thiết kế đồ họa
  • Trí tuệ nhân tạo

< ul stype=“list-stype-type:disc”>

<li>Mục 1</li>

<li>Mục 2</li>

<li> …… </li>

<li>Mục n</li>

</ul>

list-stype-type: disc, circle, square, none

36

37 of 82

1. Thuộc tính thẻ

b) Danh sách mô tả

37

<dl> ... </dl>

<dt> ... </dt>

dl = description list

dt = description term

<dd> ... </dd>

dd = description definition

38 of 82

1. Thuộc tính thẻ

<html>

<dl>

<dt>Kem</dt>

<dd>Món ăn ngọt, ở dạng đông lạnh</dd>

<dt>Trà sữa</dt>

<dd>Đồ uống làm từ trà và sữa</dd>

<dt>Bánh bông lan</dt>

<dd>Loại bánh làm từ bột mì và trứng</dd>

</dl>

</html>

38

39 of 82

1. Thuộc tính thẻ

Danh sách các môn học bậc THPT:

  1. Môn học bắt buộc

1. Toán

2. Ngữ văn

3. Ngoại ngữ

  • Môn học tự chọn

4. Vật lý

5. Hóa học

6. Sinh học

7. Lịch sử

8. Địa lý

<ol type="A">

<li>Môn học bắt buộc

<ol type="1" start="1">

<li>Toán</li>

</ol>

</li>

<li>Môn học tự chọn

<ol type="1" start="4">

<li>Vật lý</li>

</ol>

</li>

</ol>

39

40 of 82

2. Thiết lập bảng <table>

<table> … </table>

<th> … </th>

<td> … </td>

<tr> … </tr>

Thiết lập bảng

Thiết lập các hàng (table row)

Thiết lập tiêu đề hàng (table header)

Thiết lập nội dung (table cell data)

<caption> … </caption>

Thiết lập tên bảng

41 of 82

<table>

<tr>

<th>Họ và tên</th>

<th>Điểm thi</th>

<th></th>

<th></th>

</tr>

<tr>

<td></td>

<td>Toán</td>

<td>Vật lý</td>

<td>Hóa học</td>

</tr>

</table>

<table border="1" cellspacing="0">

<caption>Bảng điểm</caption>

<tr bgcolor=“#9FE2BF”>

<td align=“center”>Toán</td>

<td align=“center”>Vật lý</td>

<td align=“center”>Hóa học</td>

<th rowspan=“2”>Họ và tên</th>

<th colspan=“3”>Điểm thi</th>

2. Thiết lập bảng

42 of 82

2. Thiết lập bảng

43 of 82

2. Thiết lập bảng

44 of 82

3. Thực hành tạo danh sách

và bảng

Yêu cầu

Viết đoạn mã html để tạo danh sách các câu lạc bộ của trường như Hình 9.7

45 of 82

Bước 1. Xác định thành phần của văn bản

Danh sách Câu lạc bộ

​

  • THỂ THAO
    1. Bóng đá
    2. Bóng chuyền
    3. Bóng rổ
    4. Võ
      1. Karatedo
      2. Taekwondo
      3. Vovinam
    5. Bơi
  • NGHỆ THUẬT
    • Mĩ thuật
    • Nhiếp ảnh
    • Âm nhạc
      • Thanh nhạc
      • Piano
      • Violin
    • Khiêu vũ

<h2>

</h2>

<ul>

</ul>

<li>

</li>

<li>

</li>

<ol>

</ol>

<li>

<li>

<li>

<li>

​

​

​

<li>

</li>

</li>

</li>

</li>

​

​

​

</li>

<li>

<li>

<li>

​

​

​

<li>

</li>

</li>

</li>

​

​

​

</li>

<li>

<li>

<li>

</li>

</li>

</li>

<li>

<li>

<li>

</li>

</li>

</li>

<ol>

​

</ol>

<ol>

​

</ol>

<ol>

</ol>

46 of 82

3. Thực hành tạo danh sách và bảng

Yêu cầu

Tạo bảng lịch hoạt động của các câu lạc bộ (Hình 9.8)

47 of 82

Dòng tiêu đề của bảng

(caption)

Bảng (border=“1”)

(7 hàng và 7 cột)

Gộp ô

(rowspan=“2”)

Gộp ô

(rowspan=“2”)

Gộp ô

(colspan=“5”)

48 of 82

BÀI 10.

TẠO LIÊN KẾT

49 of 82

DU LỊCH ĐÀ NẴNG

Đà Nẵng một trong những thành phố sạch và đẹp nhất tại Việt Nam, có tốc độ phát triển kinh tế nhanh. Là thành phố có nhiều danh lam thắng cảnh nổi tiếng như: Ngũ Hành Sơn, Đảo Cù lao Chàm, sông Hàn… và nhiều khu vui chơi giải trí. Đặc biệt, Đà Nẵng có nhiều cây cầu đi vào huyền thoại với kiến trúc độc đáo như Cầu Rồng, Cầu Sông Hàn…

Khách sạn Đà Nẵng

https://www.tourismdanang.vn/

1. SIÊU VĂN BẢN VÀ ĐƯỜNG DẪN

Siêu văn bản

Văn bản

Liên kết

Hình ảnh

Video

Siêu văn bản

Siêu văn bản (hypertext): loại văn bản chứa nhiều loại dữ liệu (văn bản, âm thanh, hình ảnh, video, …) và các liên kết tới siêu văn bản khác.

50 of 82

1. SIÊU VĂN BẢN VÀ ĐƯỜNG DẪN

Siêu liên kết

Siêu liên kết (hyperlink): tham chiếu để liên kết tới siêu văn bản khác.

DU LỊCH ĐÀ NẴNG

Đà Nẵng một trong những thành phố sạch và đẹp nhất tại Việt Nam, có tốc độ phát triển kinh tế nhanh. Là thành phố có nhiều danh lam thắng cảnh nổi tiếng như: Ngũ Hành Sơn, Đảo Cù lao Chàm, sông Hàn… và nhiều khu vui chơi giải trí. Đặc biệt, Đà Nẵng có nhiều cây cầu đi vào huyền thoại với kiến trúc độc đáo như Cầu Rồng, Cầu Sông Hàn…

Khách sạn Đà Nẵng

https://www.tourismdanang.vn/

KHÁCH SẠN ĐÀ NẴNG

Những resort, khách sạn 5 sao nổi tiếng ở Đà Nẵng bạn có thể tham khảo gồm InterContinental Đà Nẵng Sun Peninsula Resort, Hyatt Regency Danang Resort and Spa, Pullman, Furama Resort Danang, Four Points by Sheraton Danang, Novotel, Hilton, Fusion Suites, Danang Golden Bay Hotel... Giá phòng dao động từ 1.200.000 đến 10.000.000 đồng một đêm.

Du lịch Đà Nẵng

https://vi.hotels.com/

Siêu liên kết

51 of 82

DU LỊCH ĐÀ NẴNG

Đà Nẵng một trong những thành phố sạch và đẹp nhất tại Việt Nam, có tốc độ phát triển kinh tế nhanh. Là thành phố có nhiều danh lam thắng cảnh nổi tiếng như: Ngũ Hành Sơn, Đảo Cù lao Chàm, sông Hàn… và nhiều khu vui chơi giải trí. Đặc biệt, Đà Nẵng có nhiều cây cầu đi vào huyền thoại với kiến trúc độc đáo như Cầu Rồng, Cầu Sông Hàn…

Khách sạn Đà Nẵng

https://www.tourismdanang.vn/

1. SIÊU VĂN BẢN VÀ ĐƯỜNG DẪN

Thẻ HTML cho siêu liên kết

<a href=“URL”>Nội dung hiển thị</a>

​

<a href=“https://vi.hotels.com”>

Khách sạn Đà Nẵng

</a>

  • URL: địa chỉ (đường dẫn) tham chiếu tới tài liệu được liên kết
  • Tài liệu được liên kết:
    • Trang web
    • Đoạn văn bản
    • Hình ảnh
    • Tệp âm thanh
    • Video
    • …

KHÁCH SẠN ĐÀ NẴNG

Những resort, khách sạn 5 sao nổi tiếng ở Đà Nẵng bạn có thể tham khảo gồm InterContinental Đà Nẵng Sun Peninsula Resort, Hyatt Regency Danang Resort and Spa, Pullman, Furama Resort Danang, Four Points by Sheraton Danang, Novotel, Hilton, Fusion Suites, Danang Golden Bay Hotel... Giá phòng dao động từ 1.200.000 đến 10.000.000 đồng một đêm.

Du lịch Đà Nẵng

https://vi.hotels.com/

52 of 82

1. SIÊU VĂN BẢN VÀ ĐƯỜNG DẪN

Đường dẫn tuyệt đối

https://www.danang.edu.vn/homedn

Giao thức

Tên miền

Tên đường dẫn

Đường dẫn tuyệt đối cung cấp địa chỉ đầy đủ bao gồm: giao thức, tên miền và đường dẫn chi tiết

<a href=“URL”>Sở Giáo dục và Đào tạo</a>

53 of 82

1. SIÊU VĂN BẢN VÀ ĐƯỜNG DẪN

Đường dẫn tương đối

Đường dẫn tương đối cung cấp liên kết tới một tài liệu khác trên cùng website, không yêu cầu giao thức và tên miền, chỉ cần tên đường dẫn

<a href=“URL”>Bài tập 1</a>

bai_tap/bai_tap_1.html

Tên đường dẫn

54 of 82

2. CÁC CÁCH LIÊN KẾT TỚI MỘT TRANG WEB

a) Liên kết tới một trang web khác

Liên kết từ một trang web tới một trang web khác trên Internet gọi là liên kết ngoài.

<a href=“Đường dẫn tuyệt đối”>Nội dung hiển thị</a>

<a href=“https://vi.hotels.com/index.html”>Khách sạn Đà Nẵng</a>

55 of 82

2. CÁC CÁCH LIÊN KẾT TỚI MỘT TRANG WEB

b) Liên kết đến một vị trí khác trong cùng website

Liên kết trỏ tới các trang web trong cùng website gọi là liên kết trong.

<a href=“Đường dẫn tương đối”>Nội dung hiển thị</a>

56 of 82

BÀI 11.

CHÈN TỆP TIN ĐA PHƯƠNG TIỆN VÀ KHUNG NỘI TUYẾN VÀO TRANG WEB

57 of 82

1. CHÈN TỆP ẢNH VÀO TRANG WEB

<img src = “…” alt = “…” width = “…” height = “…”>

Thuộc tính:

  • src: đường dẫn tới tệp tin ảnh (bắt buộc)
    • Tệp ảnh cùng thư mục với tệp html: đường dẫn=“tên tệp tin”

src = “hoa_mai.png”

    • Tệp ảnh khác thư mục với tệp html: đường dẫn=“tên thư mục/tên tệp tin”

src = “hinh_anh/hoa_mai.png”

Các định dạng ảnh được hỗ trợ: png, jpg, gif, svg, webp

  • alt: đoạn văn bản thay thế khi hình ảnh không hiển thị
  • width: chiều rộng ảnh (px)
  • height: chiều cao ảnh (px)

58 of 82

DU LỊCH ĐÀ NẴNG

Đà Nẵng một trong những thành phố sạch và đẹp nhất tại Việt Nam, có tốc độ phát triển kinh tế nhanh. Là thành phố có nhiều danh lam thắng cảnh nổi tiếng như: Ngũ Hành Sơn, Đảo Cù lao Chàm, sông Hàn… và nhiều khu vui chơi giải trí. Đặc biệt, Đà Nẵng có nhiều cây cầu đi vào huyền thoại với kiến trúc độc đáo như Cầu Rồng, Cầu Sông Hàn…

https://www.tourismdanang.vn/

<img src = “hinh_anh/cau_vang.png”

width = “500” height = “300”

alt = “Cầu Vàng Đà Nẵng” >

1. CHÈN TỆP ẢNH VÀO TRANG WEB

59 of 82

2. CHÈN ÂM THANH VÀ VIDEO VÀO TRANG WEB

Chèn âm thanh vào trang web

Thuộc tính:

  • src: đường dẫn đến tệp tin

Các định dạng audio được hỗ trợ: mp3, wav, ogg

  • controls: hiển thị thành phần điều khiển

​

​

  • autoplay: tự động phát ngay khi hiển thị
  • muted: tắt âm thanh

<audio src = “...” controls autoplay muted ></audio>

60 of 82

Chèn âm thanh vào trang web

<audio src = “mysong.mp3”

controls autoplay muted>

</audio>

DU LỊCH ĐÀ NẴNG

Đà Nẵng một trong những thành phố sạch và đẹp nhất tại Việt Nam, có tốc độ phát triển kinh tế nhanh. Là thành phố có nhiều danh lam thắng cảnh nổi tiếng như: Ngũ Hành Sơn, Đảo Cù lao Chàm, sông Hàn… và nhiều khu vui chơi giải trí. Đặc biệt, Đà Nẵng có nhiều cây cầu đi vào huyền thoại với kiến trúc độc đáo như Cầu Rồng, Cầu Sông Hàn…

https://www.tourismdanang.vn/

2. CHÈN ÂM THANH VÀ VIDEO VÀO TRANG WEB

Chèn âm thanh vào trang web

61 of 82

Chèn âm thanh vào trang web

Thuộc tính:

  • src: đường dẫn đến tệp tin
  • type: loại tệp tin

<audio controls autoplay muted >

<source src = “mysong.mp3” type = “audio/mp3”>

<source src = “mysong.wav” type = “audio/wav”>

</audio>

2. CHÈN ÂM THANH VÀ VIDEO VÀO TRANG WEB

62 of 82

Chèn video vào trang web

<video src = “...” width=“…” height=“…” controls autoplay muted poster ></video>

Thuộc tính:

  • src: đường dẫn đến tệp tin

Các định dạng video được hỗ trợ: mp4, webm

  • width: chiều rộng (px)
  • height: chiều cao (px)
  • controls: hiển thị thành phần điều khiển
  • autoplay: tự động phát ngay khi hiển thị
  • muted: tắt âm thanh
  • poster: hiển thị đường dẫn đến tệp ảnh

2. CHÈN ÂM THANH VÀ VIDEO VÀO TRANG WEB

63 of 82

Chèn video vào trang web

<video src = “myvideo.mp4”

width = “500” height = “300” autoplay>

</video>

DU LỊCH ĐÀ NẴNG

Đà Nẵng một trong những thành phố sạch và đẹp nhất tại Việt Nam, có tốc độ phát triển kinh tế nhanh. Là thành phố có nhiều danh lam thắng cảnh nổi tiếng như: Ngũ Hành Sơn, Đảo Cù lao Chàm, sông Hàn… và nhiều khu vui chơi giải trí. Đặc biệt, Đà Nẵng có nhiều cây cầu đi vào huyền thoại với kiến trúc độc đáo như Cầu Rồng, Cầu Sông Hàn…

https://www.tourismdanang.vn/

2. CHÈN ÂM THANH VÀ VIDEO VÀO TRANG WEB

64 of 82

Chèn video vào trang web

<video width = “500” height = “300” autoplay>

<source src = “myvideo.mp4” type = “video/mp4”>

<source src = “myvideo.ogg” type = “video/ogg”>

</video>

Thuộc tính:

  • src: đường dẫn đến tệp tin
  • type: loại tệp tin

2. CHÈN ÂM THANH VÀ VIDEO VÀO TRANG WEB

65 of 82

https://www.taotrangweb.com/

Các trang web dạy ngôn ngữ HTML và thiết kế website:

3. TẠO KHUNG NỘI TUYẾN TRONG TRANG WEB

Khung nội tuyến

Khung nội tuyến (iframe – inline frame): khung chứa tài nguyên web khác trong trang web hiện tại.

​

Tài nguyên web:

  • Hình ảnh
  • Video
  • Trang web
  • …

66 of 82

Chèn khung nội tuyến vào trang web

<iframe src = “…” width = “…” height = “…”> </iframe>

Thuộc tính:

  • src: đường dẫn đến nội dung hiển thị trong khung
    • Đường dẫn tương đối: src = “thong_tin.html”
    • Đường dẫn tuyệt đối: src = “https://forlangworld.blogspot.com/”
  • width: chiều rộng (px)
  • height: chiều cao (px)

3. TẠO KHUNG NỘI TUYẾN TRONG TRANG WEB

67 of 82

Chèn khung nội tuyến vào trang web

<iframe src = “thong_tin.html”

width=“500” height=“400” >

</iframe>

3. TẠO KHUNG NỘI TUYẾN TRONG TRANG WEB

68 of 82

<iframe

src = “https://forlangworld.blogspot.com”

width = “600” height = “400” >

</iframe>

3. TẠO KHUNG NỘI TUYẾN TRONG TRANG WEB

Chèn khung nội tuyến vào trang web

69 of 82

BÀI 12.

TẠO BIỂU MẪU

70 of 82

1. BIỂU MẪU WEB

Web Server

abcd@gmail.com

12345678

www.facebook.com/login.asp

Biểu mẫu (form): công cụ để người dùng nhập dữ liệu vào trang web.

Biểu mẫu là gì?

71 of 82

1. BIỂU MẪU WEB

Cách tạo biểu mẫu

Web Server

<form action = "..." method = "...">

Các phần tử của biểu mẫu

</form>

  • action: trang web xử lí dữ liệu
  • method: phương thức gửi dữ liệu
    • GET
    • POST

72 of 82

1. BIỂU MẪU WEB

Cách tạo biểu mẫu

Web Server

<form action="login.asp" method="post">

<input type="text" name="tendangnhap">

<input type="password" name="matkhau">

<input type="submit" value= "Đăng nhập">

</form>

73 of 82

1. BIỂU MẪU WEB

Các phần tử của biểu mẫu

  • label
  • input
    • text
    • password
    • date
    • radio
    • checkbox
    • file
    • button
    • submit
  • select
  • textarea
  • fieldset

74 of 82

1. BIỂU MẪU WEB

Các phần tử của biểu mẫu

  • label
  • input
    • text
    • password
    • date
    • radio
    • checkbox
    • file
    • button
    • submit
  • select
  • textarea
  • fieldset

<input type="text" id="hoten" name="hoten">

<input type="password" id="matkhau" name="matkhau">

<input type="date" id="ngaysinh" name="ngaysinh">

<label for="hoten">Họ tên:</label>

  • <input type ="text">: tạo trường nhập văn bản
  • <input type ="password">: tạo trường nhập mật khẩu
  • <input type ="date">: tạo trường nhập ngày tháng
    • id: mã định danh
    • name: tên
  • <label>: tạo nhãn cho các phần tử khác
    • for: mã định danh của phần tử tương ứng

75 of 82

1. BIỂU MẪU WEB

Các phần tử của biểu mẫu

  • label
  • input
    • text
    • password
    • date
    • radio
    • checkbox
    • file
    • button
    • submit
  • select
  • textarea
  • fieldset

<input type="radio" id="gioitinh1" name="gioitinh" value="nam">

<input type="radio" id="gioitinh2" name="gioitinh" value="nu" >

<input type="checkbox" id="sothich1" name="sothich1" value="covua">

<input type="checkbox" id="sothich2" name="sothich2" value="game">

<input type="checkbox" id="sothich3" name="sothich3" value="dulich">

<input type="checkbox" id="sothich4" name="sothich4" value="camhoa">

<input type="checkbox" id="sothich5" name="sothich5" value="nauan">

  • <input type ="radio">: tạo ô chọn 1 giá trị duy nhất
  • <input type ="checkbox">: tạo ô chọn nhiều giá trị
    • id: mã định danh
    • name: tên
    • value: giá trị

Nam

Nữ

76 of 82

1. BIỂU MẪU WEB

Các phần tử của biểu mẫu

  • label
  • input
    • text
    • password
    • date
    • radio
    • checkbox
    • file
    • button
    • submit
  • select
  • textarea
  • fieldset

<input type="file" id="hoso" name="hoso">

<input type="button" name="loichao" value="Lời chào">

<input type="submit" name="dangki" value="Đăng kí">

  • <input type ="file">: tạo nút chọn tệp tin để tải lên máy chủ
  • <input type ="button">: tạo nút bấm
  • <input type ="submit">: tạo nút gửi thông tin đến máy chủ
    • id: mã định danh
    • name: tên
    • value: giá trị hiển thị trên nút bấm

77 of 82

1. BIỂU MẪU WEB

Các phần tử của biểu mẫu

  • label
  • input
    • text
    • password
    • date
    • radio
    • checkbox
    • file
    • button
    • submit
  • select
  • textarea
  • fieldset

<select id="thethao" name="thethao">

<option value="bongda">Bóng đá</option>

<option value="bongban">Bóng bàn</option>

<option value="bongro">Bóng rổ</option>

<option value="bongchuyen">Bóng chuyền</option>

<option value="caulong">Cầu lông</option>

<option value="boiloi">Bơi lội</option>

<option value=“vothuat">Võ thuật</option>

</select>

  • < select>: tạo danh sách các lựa chọn

78 of 82

1. BIỂU MẪU WEB

Các phần tử của biểu mẫu

  • label
  • input
    • text
    • password
    • date
    • radio
    • checkbox
    • file
    • button
    • submit
  • select
  • textarea
  • fieldset

<textarea id="diachi" name="diachi" rows="5" cols="20">

</textarea>

<fieldset><legend>Thông tin cá nhân:</legend></fieldset >

  • <textarea>: tạo vùng nhập văn bản có nhiều dòng và cột
  • <fieldset>: nhóm các phần tử có liên quan

Thông tin cá nhân:

79 of 82

2. THỰC HÀNH TẠO BIỂU MẪU

Nhiệm vụ 1: Tạo biểu mẫu

80 of 82

2. THỰC HÀNH TẠO BIỂU MẪU

Nhiệm vụ 2: Tạo biểu mẫu

Yêu cầu

Tạo biểu mẫu để nhập thông tin đăng kí môn thi tốt nghiệp (Hình 12.3)

81 of 82

Bước 1. Phân tích biểu mẫu

<h2>

<input type=“text”>

<input type=“text”>

<input type=“date”>

<input type=“radio”>

<input type=“checkbox”>

<input type=“submit”>

<fieldset>

<label>

<select>

<form>

82 of 82

Bước 3. Bổ sung thẻ <h1> và thẻ <fieldset>