Tải bản đầy đủ

Nhập môn lập trình web với PHP

TRUNG TÂM TIN HỌC
ĐẠI HỌC KHOA HỌC TỰ NHIÊN-TP.HCM

NHẬP MÔN LẬP TRÌNH
WEB VỚI PHP

1

CuuDuongThanCong.com

https://fb.com/tailieudientucntt


TRUNG TÂM TIN HỌC
ĐẠI HỌC KHOA HỌC TỰ NHIÊN-TP.HCM

Bài 2: HTML cơ bản
1.
2.
3.
4.

5.
6.
7.
8.

Giới thiệu ngôn ngữ HTML
Các thành phần trong trang HTML
Các tag cơ bản
Định dạng văn bản
Hình ảnh - Image
Danh sách - List
Liên kết - Link
Bảng - Table
2

CuuDuongThanCong.com

https://fb.com/tailieudientucntt


Bài 2: HTML cơ bản

1. Giới thiệu ngôn ngữ HTML
 HTML (HyperText Markup Language) là
một ngôn ngữ đánh dấu siêu văn bản
 Sử dụng tập ký hiệu đánh dấu gọi là tag
để thiết kế trang web, các tag này còn
được gọi là Element
 Là một chuẩn Internet do tổ chức W3C
(World Wide Web Consortium) duy trì

3

CuuDuongThanCong.com

https://fb.com/tailieudientucntt


Bài 2: HTML cơ bản


2. Các thành phần trong trang HTML
 Cấu trúc của trang HTML
 Cú pháp chung của tag
 Ví dụ

4

CuuDuongThanCong.com

https://fb.com/tailieudientucntt


Bài 2: HTML cơ bản

Cấu trúc của trang HTML



Đầu trang

...<br /><br />



Nội dung của trang web

Thân trang




5

CuuDuongThanCong.com

https://fb.com/tailieudientucntt


Bài 2: HTML cơ bản

Cấu trúc của trang HTML
 : xác định phần bắt đầu và
kết thúc của trang HTML (HTML
Document)
 : chứa các thông tin tổng
quát về trang web (meta-information).
 : nội dung chính của trang
web, được thể hiện trong màn hình của
trình duyệt
6

CuuDuongThanCong.com

https://fb.com/tailieudientucntt


Bài 2: HTML cơ bản

Cú pháp chung của tag

Nội dung


 Tag không có nội dung gọi là tag rỗng
(empty tag) và có cú pháp như sau:


7

CuuDuongThanCong.com

https://fb.com/tailieudientucntt


Bài 2: HTML cơ bản

Cú pháp chung của tag
 Các đặc điểm:
– Tên tag không phân biệt chữ HOA/thường
– Trình duyệt chỉ nhận 1 khoảng trắng trong Nội
dung và bỏ qua dấu ngắt xuống dòng

8

CuuDuongThanCong.com

https://fb.com/tailieudientucntt


Bài 2: HTML cơ bản

Cú pháp chung của tag
Ví dụ:


Công cha như núi Thái sơn

Nghĩa mẹ như nước trong nguồn chảy ra



9

CuuDuongThanCong.com

https://fb.com/tailieudientucntt


Bài 2: HTML cơ bản

3. Các tag cơ bản






Định nghĩa cấu trúc trang HTML
Các tag tiêu đề – Headings
Phân đoạn – Paragraphs
Ngắt dòng – Line Break
Tag
– Horizontal rule

10

CuuDuongThanCong.com

https://fb.com/tailieudientucntt


Bài 2: HTML cơ bản

Các tag tiêu đề - Headings
 Dùng để định dạng khổ chữ có dạng tiêu
đề (giống chức năng Style của MS Word)
 Gồm các tag

,

,

,

,


 HTML sẽ tự động thêm một dòng trống
vào trước và sau dòng định dạng là
heading
11

CuuDuongThanCong.com

https://fb.com/tailieudientucntt


Bài 2: HTML cơ bản

Các tag tiêu đề - Headings
Ví dụ:

Đây là dòng heading 1


Đây là dòng heading 2


Đây là dòng heading 3


Đây là dòng heading 4


Đây là dòng heading 5

Đây là dòng heading 6



12

CuuDuongThanCong.com

https://fb.com/tailieudientucntt


Bài 2: HTML cơ bản

Phân đoạn - Paragraphs
 Sử dụng tag

để phân biệt các đoạn
văn bản
 HTML sẽ tự động thêm một dòng trắng
trước và sau đoạn văn bản

13

CuuDuongThanCong.com

https://fb.com/tailieuding ơn cha mẹ tựa biển trời



Làm sao báo hiếu hỡi người ơi?

Nếu chưa báo hiếu đừng bất hiếu

Bất hiếu làm ta khổ muôn đời.



25

CuuDuongThanCong.com

https://fb.com/tailieudientucntt


Bài 2: HTML cơ bản

5. Hình ảnh – tag img
 Chèn hình ảnh vào trang web
 Định dạng hình ảnh

26

CuuDuongThanCong.com

https://fb.com/tailieudientucntt


Bài 2: HTML cơ bản

Chèn hình ảnh vào trang web
 Dùng tag và thuộc tính src để khai
báo URL chứa tập tin hình ảnh
 Thuộc tính alt : xuất câu thông báo nếu
tập tin hình không tồn tại
Ví dụ:

Hình con tôm càngTôm là món hải sản
có vị ngọt tự nhiên rất được ưa chuộng. Bạn chỉ cần mươi phút là có thể chế
biến xong món tôm rất ngon này.

27

CuuDuongThanCong.com

https://fb.com/tailieudientucntt


Bài 2: HTML cơ bản

Định dạng hình ảnh
 width, height: độ rộng và chiều cao hình, tính
bằng pixel (mặc định) hoặc %.
 align: định vị trí xuất hiện của hình so với đọan
văn bản một cách tương đối (left, right, … )
Ví dụ:

Hình con tôm càng“align=height="60" >Tôm là món hải sản có vị ngọt tự nhiên rất được ưa chuộng. Bạn chỉ cần
mươi phút là có thể chế biến xong món tôm rất ngon này.


28

CuuDuongThanCong.com

https://fb.com/tailieudientucntt


Bài 2: HTML cơ bản

6. Danh sách – tag ul, ol
 Tạo danh sách có thứ tự - tag ol
 Tạo danh sách không có thứ tự - tag ul
 Thay đổi ký hiệu đầu dòng trong danh sách

29

CuuDuongThanCong.com

https://fb.com/tailieudientucntt


Bài 2: HTML cơ bản

Tạo danh sách có thứ tự - tag ol
 Dùng tag

  • kết hợp với tag
      , cú
      pháp như sau:
      Ví dụ:




      1. .....



      2. Thực
        đơn.....
        giải

      3. khát



          ...
        1. Cafe đá


      4. Coca cola

      5. Chanh muối



      30

      CuuDuongThanCong.com

      https://fb.com/tailieudientucntt


      Bài 2: HTML cơ bản

      Tạo danh sách không có thứ tự - tag ul
       Dùng tag
    1. kết hợp với tag
        , cú
        pháp như sau:
        Ví dụ:


        • .....

        • Thực đơn giải khát


        • .....


          • ...
            Cafe đá

          • Coca cola


        • Chanh muối



        31

        CuuDuongThanCong.com

        https://fb.com/tailieudientucntt


        Bài 2: HTML cơ bản

        Thay đổi ký hiệu đầu dòng trong danh sách
         Thuộc tính type của tag
            ,
            bảng giá trị như sau:

            32

            CuuDuongThanCong.com

            https://fb.com/tailieudientucntt


            Bài 2: HTML cơ bản

            Bàidụ:
            2: Ngôn ngữ HTML


            Danh sách - Lists


            Thực đơn



            • Buổi sáng


              1. Bánh canh cua

              2. Bún bò Huế

              3. Hủ tíếu Nam vang


            • Buổi trưa


              1. Cá lóc kho

              2. Thịt kho trứng

              3. Mục xào sa tế


            • Chiều tối


              1. Mì gói

              2. Bánh ướt




             Tạo các danh sách lồng vào nhau

            33


            CuuDuongThanCong.com

            https://fb.com/tailieudientucntt


            Bài 2: HTML cơ bản

            7. Liên kết – tag a
             tag kết hợp với thuộc tính href
            Nội dung tag

            Ví dụ:

            Click vào đây để chuyển đến trang
            Tự học web


            34

            CuuDuongThanCong.com

            https://fb.com/tailieudientucntt


            Bài 2: HTML cơ bản

            8. Bảng - Table
             Tạo Table
             Trộn dòng, cột trong Table
             Định dạng Table

            35

            CuuDuongThanCong.com

            https://fb.com/tailieudientucntt


            Bài 2: HTML cơ bản

            Tạo Table
             Bộ tag , (table row) và

            (table data)

























            nội dung nội dung
            nội dung nội dung


            36

            CuuDuongThanCong.com

            https://fb.com/tailieudientucntt


            Bài 2: HTML cơ bản

            Tạo Table
            Ví dụ:










            Dòng 1, cột 1Dòng 1, cột 2
            Dòng 2, cột 1Dòng 2, cột 2



            37

            CuuDuongThanCong.com

            https://fb.com/tailieudientucntt


            Tài liệu bạn tìm kiếm đã sẵn sàng tải về

            Tải bản đầy đủ ngay

            ×