Tải bản đầy đủ

Ngôn ngữ lập trình HTML

Ngôn ngữ HTML
Giảng viên: Hoàng Văn Hiệp
Bộ môn: Kỹ Thuật máy tính
Viện CNTT-TT – ĐH Bách Khoa Hà Nội
Email: hiephv@soict.hut.edu.vn
Đại học Bách khoa Hà nội
CuuDuongThanCong.com

1
https://fb.com/tailieudientucntt


NGÔN NGỮ HTML

 HTML

là gì?
 Các thẻ trong HTML.

Đại học Bách khoa Hà nội
CuuDuongThanCong.com


https://fb.com/tailieudientucntt

2


HTML LÀ GÌ?
Text Markup Language – Ngôn ngữ
đánh dấu siêu văn bản
 Đƣợc sử dụng để tạo nên các trang web
 Trình duyệt đọc file HTML để hiển thị nội
dung
 Là một file văn bản có chứa các thẻ (tag) và
nội dung trang web
 Hyper

Đại học Bách khoa Hà nội
CuuDuongThanCong.com

https://fb.com/tailieudientucntt

3


HTML LÀ GÌ?
 Các

thẻ đƣợc sử dụng để định dạng dữ liệu,
quy định cách thức hiển thị nội dung trang
web
 HTML không phân biệt chữ hoa hay chữ
thƣờng
 HTML không báo lỗi cú pháp, nếu sai cú pháp
kết quả hiển thị không đúng.
Đại học Bách khoa Hà nội
CuuDuongThanCong.com

https://fb.com/tailieudientucntt

4




HTML LÀ GÌ?
 Một

file HTML phải có phần mở rộng là htm
hoặc html
 File HTML có thể đƣợc tạo bởi bất kỳ chƣơng
trình soạn thảo nào (word, notepad, …)

Đại học Bách khoa Hà nội
CuuDuongThanCong.com

https://fb.com/tailieudientucntt

5


CÁC THẺ TRONG HTML
 Đƣợc

sử dụng để đánh dấu các thành phần của
HTML
 Có nhiều kiểu thẻ, mỗi kiểu thẻ có tác dụng
khác nhau
 Có 2 loại: thẻ đóng và thẻ mở

Đại học Bách khoa Hà nội
CuuDuongThanCong.com

https://fb.com/tailieudientucntt

6


CÚ PHÁP THẺ
 Thẻ

mở


 Bắt

đầu một lệnh HTML
 Ví dụ , ,
 Thẻ

đóng


 Kết

thúc một lệnh HTML
 Ví dụ , ,
Đại học Bách khoa Hà nội
CuuDuongThanCong.com

https://fb.com/tailieudientucntt

7


CÚ PHÁP THẺ
 Thẻ

đóng và thẻ mở thƣờng đi liền với nhau


 Tác

 Một

động đến dữ liệu bên trong cặp thẻ

số thẻ chỉ có thẻ mở

,


,


Đại học Bách khoa Hà nội
CuuDuongThanCong.com

https://fb.com/tailieudientucntt

8


THUỘC TÍNH CỦA THẺ
 Mỗi

thẻ có thể có 1 hoặc nhiều thuộc tính
 Mỗi thuộc tính có tên thuộc tính và giá trị, giá
trị đƣợc đặt trong dấu “”
 Cú pháp

tên_TT1=“giá_trị1” tên_TT2=“giá_trị2”

…>

Đại học Bách khoa Hà nội
CuuDuongThanCong.com

https://fb.com/tailieudientucntt

9


THUỘC TÍNH CỦA THẺ
 Thuộc

 Các

tính đƣợc viết trong thẻ mở

align=“center”>Hello world

thuộc tính có thể đổi vị trí cho nhau


align=“center” src=“hello.png”>


Đại học Bách khoa Hà nội
CuuDuongThanCong.com

https://fb.com/tailieudientucntt

10


TRANG WEB ĐẦU TIÊN


Title of page


This is my first homepage.
This text is bold


Đại học Bách khoa Hà nội
CuuDuongThanCong.com

https://fb.com/tailieudientucntt

11


HIỂN THỊ TRÊN TRÌNH DUYỆT

Đại học Bách khoa Hà nội
CuuDuongThanCong.com

https://fb.com/tailieudientucntt

12


HIỂN THỊ TRÊN TRÌNH DUYỆT

Đại học Bách khoa Hà nội
CuuDuongThanCong.com

https://fb.com/tailieudientucntt

13


GIẢI THÍCH
 Thành

phần This text is bold

là thẻ mở
 là thẻ đóng tƣơng ứng
 Nội dung của thành phần nằm giữa 2 thẻ
 Tác dụng: làm đậm nội dung khi hiển thị trên trình
duyệt


Đại học Bách khoa Hà nội
CuuDuongThanCong.com

https://fb.com/tailieudientucntt

14


CÁC THẺ HTML CƠ BẢN



 Đánh




 Đánh



dấu một file HTML
dấu phần đầu của file HTML


 Đánh

dấu phần nội dung đƣợc hiển thị
 Thuộc tính bgcolor xác định màu nền của trang web
 Thuộc tính background xác định ảnh nền trang web
Đại học Bách khoa Hà nội
CuuDuongThanCong.com

https://fb.com/tailieudientucntt

15


ẢNH NỀN TRANG WEB


Background Image


This is my first homepage.
This text is bold



Đại học Bách khoa Hà nội
CuuDuongThanCong.com

https://fb.com/tailieudientucntt

16


MÀU NỀN TRANG WEB


Background Image


This is my first homepage.
This text is bold



Đại học Bách khoa Hà nội
CuuDuongThanCong.com

https://fb.com/tailieudientucntt

17


ĐỀ MỤC
Đƣợc sử dụng với các thẻ từ

đến


có kích thƣớc lớn nhất

có kích thƣớc nhỏ nhất
 Tự động thêm một dòng trống trƣớc và sau đề
mục
 Thuộc tính


 align=“left”,

“right”, “center”, “justify” căn chỉnh

lề
Đại học Bách khoa Hà nội
CuuDuongThanCong.com

https://fb.com/tailieudientucntt

18


ĐỀ MỤC

Đề mục mức 1


Đề mục mức 2


Đề mục mức 3


Đề mục mức 4


Đề mục mức 5

Đề mục mức 6


Đại học Bách khoa Hà nội
CuuDuongThanCong.com

https://fb.com/tailieudientucntt

19


ĐOẠN VĂN, NGẮT DÒNG



 Đánh

dấu một đoạn văn bản
 Tự động thêm một dòng trống trƣớc và sau đoạn
 Thuộc tính align căn lề cho đoạn văn bản, giá trị mặc
định là “left”




 Chèn



ký tự xuống dòng



 Chèn

đƣờng kẻ ngang
Đại học Bách khoa Hà nội
CuuDuongThanCong.com

https://fb.com/tailieudientucntt

20


ĐOẠN VĂN, NGẮT DÒNG


Paragraph
content="text/html; charset=utf-8">


Đây là paragraph 1. Căn trái.


Đây là paragraph 2. Căn
giữa.


Đây là paragraph 3. Căn phải.




Dòng 1

Dòng 2


Đại học Bách khoa Hà nội

CuuDuongThanCong.com

https://fb.com/tailieudientucntt

21


ĐOẠN VĂN, NGẮT DÒNG

Đại học Bách khoa Hà nội
CuuDuongThanCong.com

https://fb.com/tailieudientucntt

22


ĐỊNH DẠNG VĂN BẢN










chữ đậm
chữ nghiêng
chữ gạch chân
chữ to
chữ nhỏ
chỉ số trên
chỉ số dưới
Đại học Bách khoa Hà nội
CuuDuongThanCong.com

https://fb.com/tailieudientucntt

23


ĐỊNH DẠNG VĂN BẢN



 Chọn

font chữ cho văn bản
 Thuộc tính face xác định kiểu font
 Thuộc tính size xác định kích thƣớc
 Thuộc tính color xác định màu sắc

Đại học Bách khoa Hà nội
CuuDuongThanCong.com

https://fb.com/tailieudientucntt

24


ĐỊNH DẠNG VĂN BẢN


Formating



Chữ đậm. Chữ nghiêng. Chữ gạch chân.


Chữ to. Chữ nhỏ.


Chỉ số trên. Chỉ số dưới.


Font chữ kích thước 1

Font chữ kích thước 5

Font chữ Arial


Đại học Bách khoa Hà nội

CuuDuongThanCong.com

https://fb.com/tailieudientucntt

25


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

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

×