Vũ Chí Hiếu hieuvc@gmail.com

 Giới thiệu HTML  Cấu trúc tài liệu HTML  Các tag cơ bản  Các tag danh sách  Tag liên kết  Tag kẻ bảng  Tag hình ảnh

2

 HTML (HyperText Markup Language): Ngôn ngữ

đánh dấu siêu văn bản

 Là một ngôn ngữ để xây dựng trang web  Chứa các thành phần định dạng để báo cho trình

duyệt biết cách hiển thị một trang web

 Trang web có 2 thành phần chính

◦ Dữ liệu trang web (văn bản, âm thanh, hình ảnh,…) ◦ Các thẻ HTML (tag) đùng để mô tả cách thức dữ liệu hiển

thị trên trình duyệt

 Phần mở rộng: .html, .htm

3

4

 Cấu trúc

Dữ liệu

 Tên tag thường mang tính gợi nhớ  Đôi khi không cần tag đóng:
,

 Cú pháp chung

Dữ liệu

5

 Lưu ý:

◦ Giá trị của thuộc tính nên đặt trong cặp dấu nháy đơn hoặc

nháy kép

◦ Không phân biệt chữ HOA/thường ◦ Trình duyệt bỏ qua các khoảng trắng thừa, dấu ngắt dòng

6

7

 : Định nghĩa phạm vi văn bản HTML  : Định nghĩa mô tả về trang HTML  : Tiêu đề trang  /body>: Vùng thân trang web, nơi chứa

thông tin

8

 Các tag xử lý văn bản  Tag hình ảnh  Tag âm thanh

9

 Các tag định dạng khối văn bản

◦ Tiêu đề (Heading):

,

,

,

,

,
◦ Đoạn văn bản (Paragraph):

◦ Danh sách (List Items):

  • ◦ Đường kẻ ngang (Horizontal Ruler):
    ◦ Hiển thị đúng dạng văn bản: 
     Các tag định dạng chuỗi văn bản

    • ◦ Định dạng ký tự: , , , ◦ Liên kết: ◦ Xuống dòng:

    10

     Làm sao hiển thị: “Khoa Tự Nhiên”  Dùng ký tự đặc biệt:

    "Khoa Tự Nhiên"   

    11

    : Không có thẻ đóng  Các thuộc tính của tag : ◦ src: đường dẫn đến file hình ảnh ◦ alt: Chú thích cho hình ảnh ◦ position: vị trí (Top, Bottom, Middle) ◦ border: độ dày đường viền quanh ảnh (mặc định=0)

     Đặt ảnh nền cho trang web

    ◦ Sử dụng thẻ

    12

    : Không có tag đóng  Thuộc tính của tag : ◦ src: Đường dẫn đến file âm thanh ◦ loop: số lần lặp phát lại (loop=-1: lặp vô hạn) ◦ thường đặt trong tag của trang web

     Ví dụ:

    13

    Kiểu danh sách

    Thẻ

    Phần tử trong DS

    1. Danh sách có thứ tự

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

        ,

        Danh sách tự định nghĩa

        14

        15

        16

        17

         Cú pháp

        Nội dung ◦ href: Chỉ ra URL cần liên kết tới (tương đối/tuyệt đối) ◦ Các giá trị của target:

         name: Tải trang web vào frame có tên là name  _blank: Tải trang web vào cửa sổ mới  _parent: Tải trang web vào cửa sổ cha  _self: Tải trang web vào chính cửa sổ hiện hành  _top: Tải trang web vào cửa sổ mức cao nhất

         Ví dụ:

        18

        Tên tag

        Mô tả

        …
        Khởi tạo bảng

        …

        Tạo một dòng. Tag phải nằm trong tag

        Tạo một ô tiêu đề. Tag

        Tạo một ô (chứa dữ liệu). Tag

        19

        20

        Thuộc tính

        Mô tả

        colspan

        Thiết lập ô có độ rộng bằng bao nhiêu cột

        rowspan

        Thiết lập ô có độ cao bằng bao nhiêu dòng

        background, bgcolor

        Thiết lập ảnh nền/màu nền cho thẻ

        … phải nằm trong tag
        … phải nằm trong tag
        , ,

        cellpadding

        Khoảng cách từ đường viền đến văn bản trong ô

        cellspacing

        Khoảng cách giữa các ô trong bảng

        21

        22

        23

        Sử dụng các thẻ HTML đã học tạo bảng theo cấu trúc sau: số 5 & 7

        24

        25

        26

         Sử dụng để chuyển dữ liệu lên máy chủ
        …

         Các phần tử nhập liệu trong form

        ◦ Text Field ◦ Password Field ◦ Check Box ◦ Radio Button ◦ Select List ◦ TextArea ◦ FieldSet, Legend ◦ Label

        27

        28

        29

        30

        31

        32

        33

        34

        35

        36

        37

         Sử dụng NotePad để thiết kế trang web cá nhân,

        trình bày các thông tin sau: ◦ Họ và tên ◦ Địa chỉ liên lạc ◦ Điện thoại ◦ Email ◦ Hình cá nhân ◦ Môn học yêu thích ◦ Website yêu thích ◦ Thời khóa biểu học tập

        38

         Sử dụng NotePad thiết kế trang web giới thiệu về

        lớp mình, gồm các thông tin: ◦ Tên lớp, sĩ số ◦ Hình ảnh hoạt động của lớp ◦ Danh sách thành viên của lớp ◦ Địa chỉ website của lớp

        39

        40

         Website trường học, khoa  Website nhà hàng, quán cafe, tiệm bán hoa,…  Website công ty nhà đất, cây cảnh, nhà sách,…  Website tổ chức, câu lạc bộ, nhóm làm việc,…  Website hỗ trợ học tập, học online,…  Website giới thiệu các môn thể thao, trò chơi dân

        gian,…

         …

        41

         Giới thiệu về nhóm thiết kế  Thông tin về chủ sở hữu website, mục đích website  Thông tin về sản phẩm/nội dung cần giới thiệu  Thông tin về các website tương tự  Đưa hình ảnh liên quan

        42

         HTML

        ◦ Sử dụng liên kết, hình ảnh, danh sách ◦ Sử dụng table tạo layout

         CSS  JavaScript

        43

        1. Phân tích yêu cầu website: cả nhóm

        Cần bao nhiêu trang web?

        ◦ Mục đích? ◦ ◦ Màu sắc?

        2. Phác thảo sơ bộ giao diện web: 1-2 người 3. Thu thập tài liệu, hình ảnh liên quan: 1-2 người 4. Thiết kế hình ảnh giao diện (Photoshop): 1 người 5. Thiết kế giao diện web (HTML, CSS, JavaScript): cả

        nhóm

        6. Kiểm tra hiển thị trên các trình duyệt: cả nhóm 7. Đưa lên Internet (host)

        44

        45

        Tài liệu liên quan

        Tài liêu mới

        Giới thiệu

        Về chúng tôi

        Việc làm

        Quảng cáo

        Liên hệ

        Chính sách

        Thoả thuận sử dụng

        Chính sách bảo mật

        Chính sách hoàn tiền

        DMCA

        Hỗ trợ

        Hướng dẫn sử dụng

        Đăng ký tài khoản VIP

        Zalo/Tel:

        093 303 0098

        Email:

        support@tailieu.vn

        Phương thức thanh toán

        Theo dõi chúng tôi

        Facebook

        Youtube

        TikTok

        chứng nhận
        Chịu trách nhiệm nội dung: Nguyễn Công Hà
        Doanh nghiệp quản lý: Công ty TNHH Tài Liệu trực tuyến Vi Na - GCN ĐKDN: 0307893603
        Địa chỉ: 54A Nơ Trang Long, P. Bình Thạnh, TP.HCM - Điện thoại: 0283 5102 888 - Email: info@tailieu.vn
        Giấy phép Mạng Xã Hội số: 38/GP-BVHTTDL cấp ngày 09/3/2026