GIÁO TRÌNH HTML CƠ BẢN pptx

HTML Elements• HTML là văn bản bao gồm các HTML Element • HTML Element được đánh dấu bởi các HTML Tag • Mỗi tag có 1 tên, được bao giữa 2 kí tự • Tag thường đi theo cặp.. Ví dụ • Thẻ

Trang 1

KHOA CNTT - TUD

HTML

Trần Khải Hoàng Khoa CNTT – TỨD

ĐH Tôn Đức Thắng

Trang 4

Giới thiệu HTML

dấu siêu văn bản

thị trang HTML

Y ou S ee I s W hat Y ou G et)

Trang 5

Ví dụ HTML

• Mở notepad++, gõ đoạn văn bản sau và lưu lại dưới tên hello.html :

• Để xem kết quả, nhấn đúp vào file hello.html

This is my first homepage

This text is bold

</body>

</html>

Trang 7

HTML Elements

• HTML là văn bản bao gồm các HTML Element

• HTML Element được đánh dấu bởi các HTML Tag

• Mỗi tag có 1 tên, được bao giữa 2 kí tự < và >

• Tag thường đi theo cặp Ví dụ 

• Thẻ đầu tiên gọi là thẻ mở (), thẻ sau gọi là thẻ đóng ()

• Văn bản giữa thẻ mở và thẻ đóng là nội dung của HTML Element

• HTML tag không phân biệt hoa thường giống 

Trang 8

– Nội dung của HTML Element là : This text is bold

– Khi hiển thị trên trình duyệt : This text is bold

– Mục đích của thẻ b là in đậm văn bản nằm trong nó

Trang 9

</body>

Trang 10

Chú ý

Mặc dầu thẻ HTML không phân biệt hoa thường và nhiều trang web sử dụng chữ hoa Thế nhưng để phù hợp với các tiêu chuẩn mới nhất của web

ta sẽ sử dụng chữ thường cho tất cả các thẻ HTML

Trang 12

<title> Title here </title>

<meta http-equiv =" content-type " content =" text/html; charset=UTF-8 " />

<! other head information here >

Trang 13

Thẻ DOCTYPE

để chỉ ra loại ngôn ngữ đánh dấu nào đang sử dụng

nào ? Nếu bỏ DOCTYPE trình duyệt sẽ render theo kiểu riêng của mình (Quirk mode) mà không theo chuẩn

•

Trang 14

Cấu trúc trang HTML đơn giản

, nhấn view source

<html>

<head>

<title> Title here </title>

<! other head information here >

Trang 15

Thẻ html

• Thẻ html là thẻ gốc phải có trong mọi trang HTML

• Thẻ html chứa nhiều nhất 1 thẻ head và chỉ 1 thẻ body

• Không có thẻ nào nằm ngoài thẻ html ngoại trừ thẻ

DOCTYPE

• Thẻ head dùng để chứa các thông tin mô tả về trang web như loại charset đang xài (utf-8, iso-8859-1), tiêu đề, tóm tắt trang, từ khóa, tác giả, CSS, javascript

• Thẻ head có thể bị lược bỏ nếu ta không cần mô tả về trang hiện tại

• Thẻ body dùng để chứa tất cả nội dung thật sự của trang web (bắt buộc phải có)

Trang 16

Tiêu đề - Thẻ h

• Thẻ heading dùng để tạo các tiêu đề, đầu đề cho trang web

• Có 6 thẻ tiêu đề bao gồm h1, h2, h3, h4, h5, h6

• Theo thứ tự h1 (quan trọng nhất) đến h6 (ít quan trọng nhất).

• Hầu hết trình duyệt đều hiển thị các thẻ heading tô đậm và sử dụng font lớn hơn bình thường h1 là lớn và đậm nhất cho đến h6 là lớn và đậm ít nhất

• Thẻ heading dùng để đánh dấu các đoạn text mang ý nghĩa

quan trọng như tiêu đề bài viết, các mục lục chứ không phải dùng để in đậm văn bản

Trang 18

Đoạn văn – Thẻ p

mỗi đoạn văn

This is a paragraph

This is another paragraph

Trang 20

Lưu ý

• Nhớ đóng thẻ

• Quên đóng thẻ là lỗi rất hay mắc phải.

• Lỗi này khiến 1 số trình duyệt hiển thị sai Tuy 1 số có thể hiển thị đúng nhưng sẽ không đúng trong mọi trường hợp

• Việc quên đóng thẻ sẽ khiến mã nguồn HTML khó đọc, khó

sửa khi có lỗi xảy ra.

• Không đóng thẻ là không tuân theo chuẩn web

This is a paragraph

This is another paragraph

Trang 21

Ngắt dòng – Thẻ br

không phải để bắt đầu 1 đoạn văn

 

This is a para graph with line breaks

Trang 22

Thẻ br demo

This is a para graph with line breaks

Trang 24

HTML Attributes

<body bgcolor = ” red ”>Hello World</body>

Tên thuộc tính Thuộc tính

element bgcolor qui định

bgcolor = red Màu nền trang web sẽ có màu đỏ

đơn (‘) dùng để đánh dấu

bắt đầu và kết thúc của giá trị thuộc tính.

Trang 25

Ví dụ HTML Attribute

– center : canh giữa

– left : canh trái

– right : canh phải

<h1 align = ” center ”>My page<h1>

Trang 26

Ví dụ HTML Attribute

#FF0000, #FFFF00 )

<body bgcolor = ” red ” text= ” yellow ” > Hello World

<body>

Trang 27

HTML color

Trang 28

Ví dụ HTML color

Trang 29

Demo HTML color

Quê hương tôi có con sông xanh biếc

Nước trong xanh soi bóng những hàng tre

Trang 30

Cách lấy màu hexa

• Nếu trong bức ảnh hoặc 1 trang web có màu chúng ta cần Làm sao ta biết giá trị hexa của nó ?

• Trả lời :

– Là ảnh : Sử dụng các chương trình chỉnh sửa ảnh như Photoshop Dùng tính năng Eye Drop ( )

– Là web : Dùng add-on ColorZilla của

Firefox (Download tại colorzilla.com) Sau khi install, click vào biểu tượng (góc trái dưới cùng) sau đó chọn điểm nào trên web cần lấy giá trị màu.

– Một cách khác là vào trang http://colorpicker.com

Trang 32

– Thẻ định dạng logic : là các thẻ chỉ định cho trình duyệt biết loại nội dung của đoạn văn bản Trình duyệt tự do hiển thị theo cách của mình.

Trang 33

Thẻ định dạng vật lý

Element Meaning Notes

 …  In nghiêng

<big> … </big> Font bự hơn 1 đơn vị

 …  Font bé hơn 1 đơn vị

Trang 34

Demo thẻ định dạng vật lý

This text is bold

This text is italic

Trang 35

Trang 36

Thẻ định dạng logic

Thẻ Ý nghĩa Hiển thị phổ biến

<abbr> … </abbr> Chữ viết tắt (abbreviation)

Ví dụ Mr M Thường

<acronym> … </acronym> Cụm từ viết tắt (acronym)

Ví dụ WWW)

Thường

<cite> … </cite> Trích dẫn nguồn In nghiêng

<code> … </code> Mã nguồn Chìều dài cố định

Trang 37

Trang 38

Demo thẻ định dạng logic

Trang 39

Lưu ý

hiển thị đoạn văn bản giống nhau( thì đều sử dụng font đậm)

qui định loại hay ngữ nghĩa của văn bản Các trình

duyệt khác nhau có thể hiển thị khác nhau

Trang 40

HTML Preformat

tự xuống dòng khi hiển thị trang HTML

Trang 41

It preserves both spaces

and line breaks

Trang 44

Địa chỉ với thẻ address

Trang 45

Viết tắt với abbr, acronym

The title attribute is used to show the spelled-out

version when holding the mouse pointer over the acronym or abbreviation.

This only works for the acronym element in IE 5.

This works for both the abbr and acronym element in

Netscape 6.2.

Trang 46

Viết từ phải qua trái với thẻ bdo

Trang 47

Trang 48

Đánh dấu chèn, xóa với ins, del

Trang 50

• Câu trả lời là dùng HTML Entities

• HTML Entities là các kí tự đặc biệt được ghi dưới 2 dạng sau :

– Kí tự & + Tên + Kí tự ;

– Kí tự & + Kí tự # + Số + Kí tự ;

Trang 52

Các HTML entities phổ biến

Khoảng trắgn    

< Nhỏ hơn < <

> Lớn hơn > >

& Và & &

" Dấu nháy kép " "

' Dấu nháy đơn ' (does

not work in IE) '

Trang 53

Một số HTML Entities khác

Kết quả Mô tả Thực thể dùng

tên Thực thể dùng số

trademark

® ®

× multiplication × ×

Trang 55

HTML Entities reference

– http://www.w3schools.com/tags/ref_entities.asp

– http://www.w3.org/TR/html4/sgml/entities.html

Trang 58

Unordered list

• Một danh sách không thứ tự bao gồm nhiều mục Mỗi mục sẽ được đánh dấu bằng 1 bullet (thường hình tròn màu đen)

• Danh sách bắt đầu bằng thẻ <ul>

• Mỗi mặt hàng bắt đầu bằng thẻ <li>

Trang 59

Các loại danh sách không thứ tự

hình dáng của bullet trong danh sách

– disc => bullet hình tròn tô đen

– circle => bullet hình tròn đen không tô

– square => bullet hình vuông

Trang 60

Demo kiểu danh sách không thứ tự

Trang 63

Demo kiểu danh sách thứ tự

Trang 64

Ví dụ danh sách lồng

Trang 65

Danh sách định nghĩa

mục Mỗi mục bao gồm 1 từ khóa (term) và một định nghĩa (description) cho từ khóa đó

– Thẻ dt (definition term) đánh dấu từ khóa

– Thẻ dd (definition description) đánh dấu định nghĩa

Trang 67

Lưu ý về danh sách

hình ảnh, âm thanh hay là 1 danh sách khác

gọi đó là 1 danh sách lồng

Trang 70

HTML Link

Trang 71

Thẻ <a>

• Cú pháp :

• Trong đó :

– href là địa chỉ của tài nguyên cần trỏ tới

– name là tên của liên kết (tùy chọn – sử dụng khi dùng anchor) – target qui định cửa sổ nào sẽ mở tài nguyên được liên kết

• target = _blank : mở liên kết trong 1 cửa sổ mới

• target = _self : mở liên kết trong cửa sổ hiện tại

• target = _parent: mở liên kết trong cửa sổ cha của cửa sổ hiện tại

<a href=”url” name=” ” target=” ”> Mô tả liên kết</a>

Trang 72

Ví dụ

được mở trong 1 cửa sổ mới

<a href= http://itam.tut.edu.vn ”> Khoa CNTT-TƯD</a>

<a href=http://tuoitre.com.vn” target=”_blank”> Báo Tuổi trẻ</a>

Trang 73

• Để có thể liên kết đến 1 nơi nào đó trong nội bộ trang Ta phải :

– Đánh dấu (Bookmark) vị trí bằng cách sử dụng thuộc tính tên của thẻ <a>

Ví dụ : ta đánh dấu vị trí trên cùng của trang web :

– Sau đó liên kết đến vị trí vừa đánh dấu sử dụng thẻ <a> và thuộc tính href

hoặc

<a name=”top”/> Chapter 1</a>

<a href=”#top”/> Go to Chapter 1</a>

<a href=”http://ebook.com/chapter1.html#top”/>

Go to Chapter 1</a>

Trang 74

Demo anchor

Trang 75

Địa chỉ URL

– Tuyệt đối : Địa chỉ tuyệt đối bao gồm cả tên miền của website

– Tương đối : Địa chỉ tương đối chỉ chứa đường dẫn đến tài nguyên so với thư mục hiện tại

<a href=”page1.htm”/> Trang 1</a>

<a href=” /Chapter2/page1.htm”/> Chapter 2 Trang 1</a>

Trang 76

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

Book

Index.html

Chapter1

Section1.html Section2.html

Section1.html Chapter2

WE ARE HERE

/Index.html

Section2.html /Chapter2/Section1.html

Trang 77

Kí hiệu đặc biệt

Trang 79

Thẻ hình ảnh <img>

đóng

thuộc tính src của <img> Đây là URL của ảnh đó

Trang 80

<img src = ” http://www.w3schools.com/images/pulpit.jpg ” alt=

”Đây là cái vách núi” />

• width, height : Dùng để qui định kích thước hiển thị của ảnh

Ta có thể dùng để phóng lớn, hoặc thu nhỏ ảnh.

<img src = ” http://www.w3schools.com/images/pulpit.jpg ” alt=

”Đây là cái vách núi” width= ”200px” height= ”200px”/>

Hình sẽ được hiển thị với kích thước 200x200

Trang 85

Tiêu đề trong bảng

Trang 86

Các thuộc tính của <table>

cellpadding

cellspacing

border

Trang 90

Cell span

hoặc nhiều dòng.

Để làm việc này, ta dùng thuộc tính rowspan trên

<td> , <th>

Để làm việc này, ta dùng thuộc tính colspan trên <td>,

<th>

Trang 93

Màu nền, hình nền cho <table>

Trang 94

Ví dụ màu nền cho <table>

Trang 96

Màu, hình nền cho <table> cell

nền giống <table> sử dụng bgcolor và background

Trang 98

Nội dung

98

giới thiệu về lý lịch bản thân.

Tiêu đề	HTML Cơ Bản
Tác giả	Trần Khải Hoàng
Trường học	Đại học Tôn Đức Thắng
Chuyên ngành	HTML
Thể loại	Giáo Trình
Thành phố	Thành phố Hồ Chí Minh

Định dạng
Số trang	98
Dung lượng	2 MB