bài 1. ngôn ngữ htmldulieu.tailieuhoctap.vn/books/cong-nghe-thong-tin/lap-trinh-web/file... ·...

1

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: [email protected]

Ngôn ngữ HTML

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

NGÔN NGỮ HTML

HTML là gì?

Các thẻ trong HTML.

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

HTML LÀ GÌ?

Hyper 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


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.


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, …)


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ở


CÚ PHÁP THẺ

Thẻ mở

<tên_thẻ>

Bắt đầu một lệnh HTML

Ví dụ <html>, <head>, <body>

Thẻ đóng

</tên_thẻ>

Kết thúc một lệnh HTML

Ví dụ </html>, </head>, </body>


CÚ PHÁP THẺ

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

<tên_thẻ>…</tên_thẻ>

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

Một số thẻ chỉ có thẻ mở

<img>, <br>, <hr>


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_thẻ tên_TT1=“giá_trị1” tên_TT2=“giá_trị2”

…>


THUỘC TÍNH CỦA THẺ

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

<h1 align=“center”>Hello world</h1>

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

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

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


TRANG WEB ĐẦU TIÊN

11

<html>

<head>

<title>Title of page</title>

</head>

<body>

This is my first homepage.

<b>This text is bold</b>

</body>

</html>


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


GIẢI THÍCH

Thành phần <b>This text is bold</b>

<b> là thẻ mở

</b> 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


CÁC THẺ HTML CƠ BẢN

<html> … </html>

Đánh dấu một file HTML

<head> … </head>

Đánh dấu phần đầu của file HTML

<body> … </body>

Đá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


ẢNH NỀN TRANG WEB

16

<html>

<head>

<title>Background Image</title>

</head>

<body background=“globe.png”>



</body>

</html>


MÀU NỀN TRANG WEB

17

<html>

<head>

<title>Background Image</title>

</head>

<body bgcolor=“green”>



</body>

</html>


ĐỀ MỤC

Đƣợc sử dụng với các thẻ từ <h1> đến <h6>

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

<h6> 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ề


ĐỀ MỤC

19

<h1> Đề mục mức 1 </h1>







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

<p> … </p>

Đá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”

<br>

Chèn ký tự xuống dòng

<hr>

Chèn đƣờng kẻ ngang



21

<html>

<head>

<title>Paragraph</title>

<meta http-equiv="Content-Type"

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

</head>

<body>

<p>Đây là paragraph 1. Căn trái.</p>

<p align="center">Đây là paragraph 2. Căn

giữa.</p>

<p align="right">Đây là paragraph 3. Căn phải.</p>

<hr>

Dòng 1<br>

Dòng 2<br>

</body>

</html> Đại học Bách khoa Hà nội

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

<b>…</b> chữ đậm

<i>…</i> chữ nghiêng

<u>…</u> chữ gạch chân

<big>…</big> chữ to

<small>…</small> chữ nhỏ

<sup>…</sup> chỉ số trên

<sub>…</sub> chỉ số dưới



<font>…</font>

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



25

<html>

<head>

<title>Formating</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

</head>

<body>

<b>Chữ đậm.</b> <i>Chữ nghiêng.</i> <u>Chữ gạch chân.</u>

<br>

<big>Chữ to.</big> <small>Chữ nhỏ.</small>

<br>

<sup>Chỉ số trên.</sup> <sub>Chỉ số dưới.</sub>

<br>

<font size="1" color="blue">Font chữ kích thước 1</font><br>

<font size="5" color="red">Font chữ kích thước 5</font><br>

<font face="Arial" color="green">Font chữ Arial</font><br>

</body>


CÁC KÝ TỰ ĐẶC BIỆT

Không nhập trực tiếp đƣợc từ bàn phím

Trùng với các thẻ HTML, không đƣợc hiển thị

trên màn hình

Sử dụng các ký hiệu đƣợc quy định để chèn vào

trang web



Ký tự Tên ký hiệu Số hiệu

< < <

> > >

& & &

“ " "

„ ' '

28



Ký tự Tên ký hiệu Số hiệu

¢ ¢ ¢

£ £ £

¥ ¥ ¥

€ € €

§ § §

© © ©

® ® ®

× × ×

÷ ÷ ÷ 29


30


Character_Entities.html

CHÈN HÌNH ẢNH VÀO TRANG WEB

<img src=“nguồn_ảnh”>

Thuộc tính src chỉ ra vị trí chứa ảnh, có thể là trên máy có trang web hoặc trên máy khác đƣợc nối mạng

Thuộc tính alt chỉ ra hƣớng dẫn trong trƣờng hợp không hiển thị đƣợc ảnh.

Thuộc tính border tạo khung cho ảnh

Thuộc tính height, width xác định chiều cao và chiều rộng ảnh

Có thể theo giá trị tuyệt đối hoặc giá trị tƣơng đối


CHÈN HÌNH ẢNH VÀO TRANG WEB

32

<html>

<head>

<title>Image</title>

<meta http-equiv="Content-Type"

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

</head>

<body>

<h2>Image</h2>

<img src="globe.png">

<img src="globe.png" border="1"><br>

<img src="globe.png" width="100"

height="100">

<img src="globe.jpg" alt="Ảnh địa

cầu">

</body>


TẠO DANH SÁCH

Danh sách không sắp thứ tự

Danh sách sắp thứ tự

Các danh sách có thể lồng nhau


DANH SÁCH KHÔNG SẮP THỨ TỰ

<ul>

<li>Ô tô</li>

<li>Xe máy</li>

<li>Tàu hỏa</li>

</ul>


DANH SÁCH SẮP THỨ TỰ

<ol>

<li>Mục 1</li>

<li>Mục 2</li>

<li>Mục 3</li>

</ol>


DANH SÁCH LỒNG NHAU

<ol> <li> Phương tiện đi lại <ul> <li>Ô tô</li> <li>Xe máy</li> </ul> </li> <li>Sở thích <ol> <li>Bóng đá</li> <li>Bóng bàn</li> </ol> </li> </ol>


TẠO BẢNG

Sử dụng thẻ <table>…</table>

Mỗi dòng đƣợc định nghĩa bởi thẻ <tr>…</tr>

Mỗi ô đƣợc định nghĩa bởi thẻ <td>…</td>

Tiêu đề của dòng hoặc cột đƣợc định nghĩa bởi

thẻ <th>…</th>

Dữ liệu trong các ô có thể là văn bản, hình ảnh,

hoặc một bảng khác.


TẠO BẢNG

<table border=“1”>

<tr>

<th>Thứ 2</th>

<th>Thứ 3</th>

<th>Thứ 4</th>

</tr>

<tr>

<td>Toán</td>

<td>Lý</td>

<td>Hóa</td>

</tr>

</table>


THẺ <TABLE>

Thuộc tính border xác định độ dày đƣờng kẻ của bảng

Thuộc tính align căn lề cho bảng

Thuộc tính background xác định ảnh nền

Thuộc tính bgcolor xác định màu nền

Thuộc tính height, width xác định chiều cao và chiều rộng bảng

Thuộc tính cellspacing xác định khoảng cách giữa các ô

Thuộc tính cellpadding xác định khoảng cách giữa dữ liệu và các cạnh của ô


THẺ <TR>

Thuộc tính align căn lề cho các ô trong cùng

dòng

Thuộc tính valign căn lề theo chiều dọc

Thuộc tính bgcolor xác định màu nền cho dòng


THẺ <TH>, <TD>

Thuộc tính align, valign căn lề cho dữ liệu theo chiều ngang

và chiều dọc

Thuộc tính background, bgcolor xác định ảnh nền và màu

nền cho ô dữ liệu

Thuộc tính height, width xác định chiều cao và chiều dài của

ô

Thuộc tính rowspan xác định phạm vi mở rộng của ô theo

hàng

Thuộc tính colspan xác định phạm vi mở rộng của ô theo cột


TẠO SIÊU LIÊN KẾT (HYPERLINK)

Mục đích để liên kết đến các trang web khác hoặc các phần

trong cùng trang web

Sử dụng thẻ <a>…</a> để tạo siêu liên kết hoặc đặt tên cho

một liên kết

Thuộc tính href chỉ ra địa chỉ của trang web cần liên kết đến

Thêm #tên trong địa chỉ để liên kết đến các phần trong trang web

Thuộc tính target xác định nơi mà trang web đƣợc mở. Nếu có giá

trị là _blank thì mở trên một cửa sổ trình duyệt mới.


ĐẶT TÊN CHO MỘT PHẦN CỦA TRANG WEB

Sử dụng thẻ <a> với thuộc tính name

Cú pháp <a name=“tên”>…</a>


VÍ DỤ

<h2>Trang web 1</h2>

<a href=“link2.htm”>Liên kết đến trang web 2</a>

44

<h2>Trang web 2</h2>

<a href=“link1.htm”>Liên kết đến trang web 1</a>


VÍ DỤ


SỬ DỤNG ẢNH LÀM LIÊN KẾT

<a href=http://www.google.com.vn

target=“_blank”><img src=“globe.png”></a>


http://www.google.com.vn/

LIÊN KẾT ĐA PHƢƠNG TIỆN

<a href=“globe.png”>Hình ảnh</a><br>

<a href=“hello.wma”>Âm thanh</a><br>

<a href=“movie.avi”>Đoạn phim</a>


VÍ DỤ

Đặt tên cho một phần của trang

<a name=“muc1”>Đây là mục 1</a>

Tạo liên kết đến phần đã được đặt tên

<a href=“#muc1”>Di chuyển đến mục 1</a>


CHIA KHUNG CHO TRANG WEB

Chia cửa sổ trình duyệt thành các khung khác

nhau, mỗi khung có thể hiển thị một trang web.

Chia thành các trang lựa chọn và trang nội dung,

mỗi mục trên trang lựa chọn liên kết đến một

trang nội dung.


VÍ DỤ


THẺ <FRAMESET>

Chia cửa sổ trình duyệt thành các khung

Thuộc tính cols chia thành các cột

Xác định độ rộng cột theo giá trị tuyệt đối hoặc giá trị tƣơng đối

Các cột cách nhau bởi dấu phẩy “,”

Ví dụ :

<frameset cols=“50%,50%”>…</frameset>

<frameset cols=“25%,50%,25%”>…</frameset>

<frameset cols=“100,300”>…</frameset>

<frameset cols=“20%,*”>…</frameset>


THẺ <FRAMESET>

Thuộc tính rows giống nhƣ thuộc tính cols nhƣng

chia cửa sổ trình duyệt thành các hàng

Thuộc tính border xác định độ dày đƣờng kẻ

phân chia các khung, giá trị mặc định là 1

Không đặt trong thẻ <body>


THẺ <FRAME>

Xác định trang web đƣợc hiển thị trong một

khung.

Thuộc tính src chỉ ra địa chỉ của trang web.

Thuộc tính noresize không cho phép thay đổi

kích thƣớc của khung.

Thuộc tính scrolling cho phép hoặc không cho

phép sử dụng các thanh cuộn, có các giá trị “yes”,

“no” và “auto”


VÍ DỤ - MAINFRAME.HTM

<html>

<head>

<title>Main Frame</title>

</head>

<frameset rows="50%,50%" >

<frame src="frame_a.htm">

<frame src="frame_b.htm">

</frameset>

<body></body>

</html>


VÍ DỤ - MAINFRAME2.HTML

<html>

<head>

<title>Main Frame</title>

</head>

<frameset rows="30%,*">

<frame src="first.htm" noresize scrolling="no">

<frameset cols="30%,*">

<frame src="frameselect.htm" noresize scrolling="no">

<frame src="frame_a.htm" name="ShowFrame">

</frameset>

</frameset>

<body></body>

</html>


VÍ DỤ - FRAMESELECT.HTM

<html>

<head>

<title>Select Frame</title>

</head>

<body>

<a href="frame_a.htm" target="ShowFrame">Frame A</a><br>

<a href="frame_b.htm" target="ShowFrame">Frame B</a>

</body>

</html>


VÍ DỤ


TẠO FORM TRÊN TRANG WEB

Form đƣợc sử dụng để nhập thông tin về ngƣời sử

dụng

Một form chứa nhiều thành phần

Mỗi thành phần cho phép ngƣời sử dụng nhập

thông tin ở các dạng khác nhau nhƣ nhập văn

bản, lựa chọn, đánh dấu


VÍ DỤ - YAHOO


TẠO FORM TRÊN TRANG WEB

Sử dụng thẻ <form>…</form>

Cú pháp

<form>

<input>

<input>

…

</form>

Mỗi thẻ <input> xác định một dạng nhập dữ liệu.


THẺ <INPUT>

Thuộc tính type xác định kiểu nhập dữ liệu

Có các kiểu button, checkbox, radio, text,

password,…

Thuộc tính name đặt tên cho đối tƣợng

Thuộc tính value xác định giá trị ban đầu cho đối

tƣợng


NHẬP DỮ LIỆU VĂN BẢN

<html>

<head>

<title>TextField</title>

</head>

<body>

<form>

Ho ten: <input type="text" name="hoten"> <br><br>

Dia chi: <input type="text" name="diachi" value="Ha Noi"><br><br>

Mat khau: <input type="password" name="matkhau">

</form>

</body>

</html>


NHẬP DỮ LIỆU VĂN BẢN

<html>

<body>

<h2>Vi du ve TextArea</h2>

<textarea cols="50" rows="10">

Chao cac ban.

</textarea>

</body>

</html>


LỰA CHỌN, ĐÁNH DẤU <html>

<head>

<title>Option</title>

</head>

<body>

<form>

Gioi tinh:<br>

Nam <input type="radio" name="gioitinh" value="nam">

Nu <input type="radio" name="gioitinh" value="nu">

<br><br>

So thich:<br>

<input type="checkbox" name="sothich" value="docsach">Doc sach

<input type="checkbox" name="sothich" value="xemphim">Xem phim

<input type="checkbox" name="sothich" value="nghenhac">Nghe nhac

</form>

</body>

</html>


DANH SÁCH LỰA CHỌN

<html>

<body>

<form>

<select name="cars">

<option value="volvo">Volvo</option>

<option value="saab">Saab</option>

<option value="fiat" selected="selected">Fiat</option>

<option value="audi">Audi</option>

</select>

</form>

</body>

</html>


ĐẶT CHÚ THÍCH VÀO TRONG HTML

<body>

<h2>Hello world</h2>



Chào các bạn.

</body>

BÀI TẬP VỀ NHÀ

Thực hành tất cả các ví dụ đã nêu trong bài

Đọc trƣớc về JavaScript


bài 1. ngôn ngữ htmldulieu.tailieuhoctap.vn/books/cong-nghe-thong-tin/lap-trinh-web/file... ·...

Documents