65
LOGO ng dng phân tán Chđề 1b HTML GV: Nguyễn Trường Sơn

01b udpt html

Embed Size (px)

DESCRIPTION

 

Citation preview

LOGO

Ứng dụng phân tán

Chủ đề 1b

HTML

GV:  Nguyễn  Trường  Sơn  

Giới thiệu

Users (clients) Browse

Internet

(WWW)

WWW Servers

Authors write HTML

44resources

(HTML files)

2  Cơ chế hoạt động của ứng dụng web - static

http://www.example.com/page1.html

1 2

3

6 5

4

Giới thiệu

Authors write PHP, ASP,

ASPX, JSP, …

44resources

(PHP, ASP, ASPX, JSP

files)

3  Cơ chế hoạt động của ứng dụng web - dynamic

http://www.example.com/page2.php

Users (clients) Browse

Internet

(WWW)

WWW Servers

7 5

4

Biên  dịch  và  phát  sinh  trang  HTML

3

1

2

5

Giới thiệu về HTML

•  HTML  (Hyper  Text  Markup  Language)  -­‐  Ngôn  ngữ  đánh  dấu  siêu  văn  bản  

•  Là  một  ngôn  ngữ  dùng  để  xây  dựng  một  trang  Web.    

•  Chứa  các  thành  phần  định  dạng  để  báo  cho  trình  duyệt  Web  biết  cách  để  hiển  thị  một  trang  Web.  

•  Một  trang  web  thông  thường  gồm  có  2  thành  phần  chính:  –  Dữ  liệu  của  trang  web  (văn  bản,  âm  thanh,  hình  ảnh,...)  –  Các  thẻ  (tag)  HTML  dùng  để  định  dạng  mô  tả  cách  thức  các  dữ  liệu  

trên  hiển  thị  trên  trình  duyệt.  

4  

Trình  duyệt  web  (Browser)   Trình  soạn  thảo  (Editor)  

5  

Trình duyệt và trình soạn thảo

Thẻ (TAG)

•  Một  tài  liệu  HTML  được  tạo  thành  bởi  dữ  liệu  và  các  thẻ  (TAG)  mô  tả  cấu  trúc  tài  liệu  và  cách  trình  bày  của  dữ  liệu  đó.  <HTML>    <HEAD>      <TITLE>  Welcome  to  HTML</TITLE>    </HEAD>    <BODY  BGCOLOR  =  lavender>      <H3>  My  first  HTML  document</H3>      <B>  This  is  content    </B>    </BODY>  

</HTML>  

HTML HEAD TITLE BODY

H3 B I P FONT TABLE LI …

Thẻ mô tả cấu trúc:

Thẻ trình bày nội dung:

Thẻ (TAG)

•  <Tag  mở>  Dữ  liệu  </Tag  đóng>  <b>  Dòng  chữ  này  được  in  đậm  </b>  

•  Tên  Tag  à  mang  ynh  gợi  nhớ  –  Ví  dụ:  B  ~  Bold,  I  ~  Italic,  P  ~  Paragraph  

•  Đôi  khi  không  cần  Tag  đóng  <br>,  <hr>  •  Cú  pháp  chung  

<TAG    Tên_thuộc_Znh=‘giá_trị’    ……..>  Dữ  liệu  </TAG>  

Thẻ (TAG)

Mã  HTML   Hiển  thị  

<b>  Đây  là  một  dòng  được  in  

Đậm</b>  

<h3>  Mức  chữ  ở  �êu  đề  3  </h3>  

Đây  là  một  dòng  được  in  Đậm  

Mức  chữ  ở  �êu  đề  3    

Mã  HTML   Hiển  thị  

<font  FACE=‘Arial’  Size=‘3’>  

 Hello  

</font>  

Hello  

Lưu  ý  :  •   Giá  trị  Thuộc  ynh  của  Thẻ  nên  đặt  trong  dấu  nháy  đơn  hoặc  nháy  kép  •   Không  phân  biệt  chữ  HOA  và  thường  •   Bỏ  qua  các  khoảng  trắng  thừa  và  các  dấu  ngắt  dòng,  xuống  dòng    

8  

Cấu trúc 1 tài liệu HTML

9  

<html>    <head>      <�tlte>  Tiêu  đề  </�tle>  

   </head>  

   <body>  

   Nội  dung  1    Nội  dung  2    Nội  dung  3  

   </body>  

</html>  

Bắt đầu và Kết thúc của trang

HTML

Phần đầu trang HTML

Nội dung trang HTML

Cấu trúc 1 tài liệu HTML

•  <html></html>  :  Định  nghĩa  phạm  vi  của  văn  bản  HTML  

•  <head></head>  :  Định  nghĩa  các  mô  tả  về  trang  HTML:  �êu  đề,  khai  báo  CSS,  mã  nguồn  Javascript    

–  Thông  �n  trong  tag  này  không  được  hiển  thị  trên  trang  web  

•  <�tle></�tle>  :  Mô  tả  �êu  đề  trang  web  

•  <body></body>  : Xác  định  vùng  thân  của  trang  web,  nơi  chứa  các  thông  �n  

•  Các  thẻ  trong  tài  liệu  HTML  nên  lồng  nhau  tuyệt  đối  

10  

Cấu trúc 1 tài liệu HTML – Ví dụ

<HTML>

<HEAD>

<TITLE>Welcome to HTML</TITLE>

</HEAD>

<BODY BGCOLOR = lavender>

<H3>My first HTML document</H3>

</BODY>

</HTML>  

11  

Trình bày nội dung tài liệu HTML

•  Thẻ  cơ  bản  –  Các  thẻ  xử  lý  văn  bản  

• Định  dạng  chuỗi  • Định  dạng  khối  

–  Thẻ    hình  ảnh  –  Thẻ  âm  thanh  

•  Thẻ  danh  sách  •  Thẻ  liên  kết  trang  •  Thẻ  kẻ  bảng  •  DIV/SPAN  

Thẻ định dạng văn bản

•  Các  thẻ  định  dạng  khối  văn  bản  –  Tiêu  đề  (Heading)  :  <h1>,  <h2>,  <h3>,  <h4>,  <h5>,  <h6>  –  Đoạn  văn  bản  (Paragraph):  <p>  –  Danh  sách  (List  Items):  <li>  –  Đường  kẻ  ngang  (Horizontal  Rules):  <hr>  

•  Các  thẻ  định  dạng  chuổi  văn  bản  –  Định  dạng  chữ  :  <em>,  <i>,  <b>  và  <font>  –  Tạo  liên  kết  :  <a>  –  Xuống  dòng  :  <br>  

13  

Ví dụ - Heading (H1, H2, …, H6)

<HTML>  <HEAD>  <TITLE>Introduc�on  to  HTML</TITLE>  </HEAD>  <BODY>  

<H1>  Introduc�on  to  HTML  -­‐  H1</H1>  <H2>  Introduc�on  to  HTML  -­‐  H2</H2>  

             <H3>  Introduc�on  to  HTML  -­‐  H3</H3>                <H4>  Introduc�on  to  HTML  -­‐  H4</H4>                <H5>  Introduc�on  to  HTML  -­‐  H5</H5>                <H6>  Introduc�on  to  HTML  -­‐  H6</H6>          </BODY>  </HTML>  

Ví dụ: Paragraph (P)

<html>  <head>  

       <�tle>Welcome  to  HTML</�tle>  </head>  

<body  bgcolor=‘lavender’>          <h3>My  first  HTML  document</h3>  

       <p>                    This  is  going  to  be  real  fun  

   <h2>Using  another  heading</h2>          </p>  

       <p  align=‘center’>Another  paragraph  element</p>  </body>  

</html>  

15  

Ví dụ: Horizontal rules (HR)

•  <HR  …>  –  Thuộc  ynh  :  

•  align  :  Canh  hàng  đường  kẻ  ngang  so  với  trang  web  •  width  :  Chiều  dài  đường  kẻ  ngang  •  size  :  Bề  rộng  của  đường  kẻ  ngang  •  noshade  :  Không  có  bóng  

16  

<body>      This  is  a  horizontal  rule:  <hr  size=“15”  align=“center”  width=“80%”  />    </body>  

Ví dụ khác …

•  Định  dạng  

17  

Ví dụ khác

18  

Ví dụ khác … Thẻ PRE

•  Hiển  thị  đúng  dạng  văn  bản  đã  soạn  thảo  (khoảng  trắng,  xuống  dòng,  tag,…)  

Ví  dụ:  <FONT SIZE=4> <pre>    Ban  co  the  xuong  dong    

         va  cach  khoang  trang          thoai  mai   </pre>

</FONT>

19  

Trình bày ký tự đặc biệt

•  Làm  sao  hiển  thị  các  ký  hiệu  đặc  biệt  ?  •  Dấu  <,  >,  &  •  Dấu  nháy  kép  “  •  Các  ký  tự  đặc  biệt  :  @  ©  ®    •  ……  

20  

Trình bày ký tự đặc biệt

Result   Descripson   Ensty  Name   Ensty  Number  

"   quota�on  mark   &quot;   &#34;  

&   ampersand   &amp;   &#38;  

<   less-­‐than   &lt;   &#60;  

>   greater-­‐than   &gt;   &#62;  

Để  hiện  thị  được  thì  mã  HTML  tương  ứng  là  :    

<Khoa hoa tu nhien> "Khoa hoc tu nhien"

&lt;Khoa hoa tu nhien&gt;&nbsp;&nbsp;&nbsp;&nbsp; &quot;Khoa hoc tu nhien&quot;

21  

Thẻ hình ảnh: IMG

•  Có  thể  không  cần  thẻ  đống  •  Các  thuộc  ynh  của  tag  <img>:  

–  SRC  :  Đường  dẫn  đến  file  hình  ảnh  –  ALT  :  Chú  thích  cho  hình  ảnh  –  Height,  Width:  Chiều  cao  và  rộng  của  hình  ảnh  (pixel)  –  Border  :  Độ  dày  nét  viền  quanh  ảnh  (default=0)  –  Align:  top,  middle,  bo¯om,  le°,  right  

•  Đặt  ảnh  nền  cho  trang  web  –  Sử  dụng  thẻ  <body  Background=‘Image  Path’>  

22  

Thẻ hình ảnh

23  

Tag hình hảnh

Align  =  “LEFT”   Align  =  “BOTTOM”  (Mặc  định)  

24  

Tag âm thanh

•  <bgsound>  :  Không  có  tag  đóng  •  Thuộc  ynh  của  tag  <bgsound>  

–  SRC  :  Đường  dẫn  đến  file  âm  thanh  –  Loop  :  Số  lần  lặp  (bằng  -­‐1  :  Lặp  vô  hạn)  –  <bgsound>  Thường  đặt  trong  tag  <head>  của  trang  web.  

•  Ví  dụ:  <BGSOUND src=‘batman.mid’ LOOP=‘1’>  

25  

Trình bày nội dung tài liệu HTML

•  Thẻ  cơ  bản  –  Thẻ  xử  lý  văn  bản  

• Định  dạng  chuỗi  • Định  dạng  khối  

–  Thẻ  hình  ảnh  –  Thẻ  âm  thanh  

•  Thẻ  danh  sách  •  Thẻ  liên  kết  trang  •  Thẻ  kẻ  bảng  •  DIV/SPAN  

Các loại thẻ danh sách

Kiểu  danh  sách   Thẻ   Phần  tử  trong  DS  Danh  sách  có  thứ  tự   <OL>   <LI>  

Danh  sách  không  có  thứ  tự   <UL>   <LI>  

Danh  sách  tự  định  nghĩa   <DL>   <DT>,  <DI>  

Danh  sách  lồng  nhau  

Dạng  khác   <menu>  <dir>  

27  

Các tag Danh sách – Danh sách có thứ tự

28  

Các tag Danh sách – Danh sách có thứ tự

29  

Các tag Danh sách – Danh sách không có thứ tự

30  

Trình bày nội dung tài liệu HTML

•  Thẻ  cơ  bản  –  Thẻ  xử  lý  văn  bản  

• Định  dạng  chuỗi  • Định  dạng  khối  

–  Thẻ  hình  ảnh  –  Thẻ  âm  thanh  

•  Thẻ  danh  sách  •  Thẻ  liên  kết  trang  •  Thẻ  kẻ  bảng  •  DIV/SPAN  

Thẻ liên kết trang - URL

•  protocol://site address/directory/filename •  Các  dạng  địa  chỉ  HTTP:  TH1:  h¯p://server/  

Ví  dụ:    h¯p://www.yahoo.com/  

TH2:  h¯p://server/file  Ví  dụ:  h¯p://games.yahoo.com/index.php  

TH3:  h¯p://server/directory/  h¯p://games.yahoo.com/games/  

TH4:  h¯p://server/directory/file  h¯p://games.yahoo.com/download/  Dominoes.exe  

32  

Tag liên kết trang - URL

TH5:  h¯p://server/directory/file#marker  h¯p://games.yahoo.com/index.php#  Puzzle  

TH6:  h¯p://server/directory/file?parameters    h¯p://www.google.com.vn/search?hl=vi&q=Teach&meta=  

TH7:  h¯p://server:port/directory/file  h¯p://www.microso°.com:8080/products/gree�ngs.html  

 

33  

Thẻ liên kết trang <a> (anchor)

•  Cú  pháp  :  <a  href="URL“  target=‘……’>  Linked  content  </a>      

•  Thuộc  ynh  target  của  tag  <a>  –  name:  tải  trang  web  vào  frame  có  tên  NAME  –  _blank:  tải  trang  web  vào  cửa  sổ  mới  –  _parent:  tải  trang  web  vào  cửa  sổ  cha  của  nó  –  _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ố  cao  nhất  

34  

Ví dụ

35  

Thẻ liên kết – Phân loại

•  Phân  loại  :  –  Liên  kết  ngoại  (external  link)  –  Liên  kết  nội  (internal  link)  –  Liên  kết  email  (email  link)  

36  

Liên kết ngoại (External Link)

………………… ………………… …………………

Bài học 2 ………………… …………………

Trang hiện tại

baihoc1.htm

………………… ………………… ………………… ………………… ………………… …………………

Trang có địa chỉ xác định từ URL

baihoc2.htm

Click chuột

<a href=“URL”> Text đại diện </a>

37  

Liên kết nội (Internal Link)

<a name=“TenViTri"> Vi tri bat dau </a> <a href=“#TenViTri"> Text đại diện </a>

………………… ………………… Text đại diện ………………… ………………… ………………… ………………… Vi tri bat dau .…abcdefgh… ...01234567… .…………………

Nội dung trang khi chưa liên

kết

.…………………

.………………… Text đại diện ………………… ………………… ………………… ………………… Vi tri bat dau .…abcdefgh… ...01234567… .………………… .………………… .………………… .………………… .…………………

Nội dung trang khi bấm liên

kết

Click chuột

38  

Liên kết email

………………… ………………… ………………… Liên hệ Admin ………………… …………………

Click chuột

<a href=“mailto:emailAddress">Liên hệ Admin</a>

39  

Phân loại địa chỉ URL

•  Địa  chỉ  URL  phân  làm  2  loại  :  –  Địa  chỉ  tuyệt  đối  :  Là  vị  trí  tuyệt  đối  so  với  Mạng  Internet  

–  Địa  chỉ  tương  đối  :  Là  vị  trí  tương  đối  so  với  trang  web  hiện  hành  đang  chứa  liên  kết.  

<a href="URL“ target=‘……’> Linked content </a>

Ký hiệu Ý  nghĩa

/ Trở  về  thư  mục  gốc  của  website

./ Thư  mục  hiện  tại  của  trang  web  sử  dụng  link  (mặc  định)

../ Quay  ra  thư  mục  cha  /  đi  ngược  lại  1  cấp  thư  mục

§ Một  số  ký  hiệu  đường  dẫn  đặc  biệt:  

40  

Ví dụ

file A có link đến file B, vậy trong file A có HTML element:

<a href=“URL”>liên kết đến B</a>

http://127.0.0.1/demo/Thu muc 1/file B.htm

URL =

/demo/Thu muc 1/file B.htm

# 127.0.0.1/demo

Thu muc 1/file B.htm

./Thu muc 1/file B.htm

41  

file B có link đến file C, vậy trong file B có HTML element:

<a href=“URL”>liên kết đến C</a>

http://127.0.0.1/demo/Thu muc 1/

Thu muc 1_1/file C.htm

URL =

/demo/Thu muc 1/Thu muc 1_1/file C.htm

# 127.0.0.1/demo

Thu muc 1_1/file C.htm

./Thu muc 1_1/file C.htm

42  

Ví dụ

file C có link đến file D, vậy trong file D có HTML element:

<a href=“URL”>liên kết đến D</a>

http://127.0.0.1/demo/Thu muc 1/

Thu muc 1_2/file D.htm

URL =

/demo/Thu muc 1/Thu muc 1_2/file D.htm

# 127.0.0.1/demo

../Thu muc 1_2/file D.htm

./../Thu muc 1_2/file D.htm

43  

Ví dụ

file D có link đến file F, vậy trong file F có HTML element:

<a href=“URL”>liên kết đến F</a>

http://127.0.0.1/demo/Thu muc 2/file F.htm URL =

/demo/Thu muc 2/file F.htm

# 127.0.0.1/demo

../../Thu muc 2/file F.htm

./../../Thu muc 2/file F.htm

44  

Ví dụ

file F có link đến file E, vậy trong file F có HTML element:

<a href=“URL”>liên kết đến E</a>

http://127.0.0.1/demo/Thu muc 1/ Thu muc

1_2/Thu muc 1_2_1/file E.htm

URL =

/demo/Thu muc 1/Thu muc 1_2/

Thu muc 1_2_1/file E.htm

# 127.0.0.1/demo

../Thu muc 1 /Thu muc 1_2/Thu muc1_2_1/

file E.htm 45  

Ví dụ

file E có link đến file A ở vị trí xác định, vậy trong file A có HTML element:

<a name=“positionB”></a>

<a href=“URL”>liên kết đến A tai vi tri B</a>

URL =

# 127.0.0.1/demo

../../../file A.htm#positionB

46  

Ví dụ

Trình bày nội dung tài liệu HTML

•  Thẻ  cơ  bản  –  Thẻ  xử  lý  văn  bản  

• Định  dạng  chuỗi  • Định  dạng  khối  

–  Thẻ  hình  ảnh  –  Thẻ  âm  thanh  

•  Thẻ  danh  sách  •  Thẻ  liên  kết  trang  •  Thẻ  kẻ  bảng  •  DIV/SPAN  

Tag kẻ bảng - Table

48  

STT   Thẻ   Ý  nghĩa   Ghi  chú  1   <table>  </table>   Định  nghĩa  bảng  2   <tr>  </tr>   Định  nghĩa  dòng   Phải  nằm  trong  thẻ  <table>  3   <td>  </td>   Định  nghĩa  ô   Phải  nằm  trong  thẻ    <tr>  4   <th></th>   Định  nghĩa  ô  �êu  đề   Phải  nằm  trong  thẻ  <tr>  

<table border=“1”> <tr> <th>STT</th> <th>Thành phố</th> </tr> <tr> <td>1</td> <td>Hà Nội</td> </tr> <tr> <td>2</td> <td>Hồ Chí Minh</td> </tr> </table>

STT   Thành  phố  

1   Hà  Nội  

2   Hồ  Chí  Minh  

Tag kẻ bảng – Table (tt)

•  Colspan:  Thiết  lập  độ  rộng  của  ô  cột  •  Rowspan:  Thiết  lập  chiều  cao  của  ô  theo  dòng  

49  

<table  border=“1”>            <tr>                    <th>Name</th>                  <th  colspan=“2”>Telephone</th>          </tr>          <tr>                  <td>Bill  Gates</td>                  <td>3333333</td>                  <td>2222222</td>          </tr>  </table>  

<table  border=“1”>            <tr>                    <th>Name</th>                  <td>Bill  Gates</td>          </tr>          <tr>                  <th  rowspan=“2”>Telephone</th>                  <td>3333333</td>                            </tr>          <tr>                  <td>2222222</td>          </tr>  </table>  Name   Telephone  

Bill  Gates   3333333   2222222  

Name   Telephone  

Telephone   3333333  

2222222  

•  Border:    –  thiết  lập  độ  rộng  đường  viền  cho  thẻ  <table>  <tr>  <td>  <th>  

•  Background  –  Thiết  lập  hình  nền  cho  thẻ  <table>  <tr>  <td>  <th>  

•  Bgcolor  –  Thiết  lập  màu  nền  cho  thẻ  <table>  <tr>  <td>  <th>  

 

Sử dụng thẻ table

•  Thiết  kế  giao  diện  cho  website  

Menu

Header

Content

Logo

Footer

51  

Các thành phần của một layout

52  

Các loại layout phổ biến

53  

Ví dụ: Sử dụng thẻ table

54  

Bottom.png

Topleft.png Topright.png

bottomleft.png bottomright.png

Top.png

left.png right.png

55  

56  

DIV / SPAN

•  Không  mang  ngữ  nghĩa  

•  Dùng  để  gom  nhóm  các  khối  phần  tử.  –  DIV:  tách  khối  –  SPAN:  không  tách  khối  

•  Thường  dùng  với  CSS  

XML (eXtensible Markup Language)

•  XML:  Ngôn  ngữ  đánh  dấu  văn  bản    

•  Làm  dễ  dàng  cho  việc  chia  sẽ  /  trao  đổi    thông  �n  qua  internet,  giữa  các  hệ  thống.  

•  Có  khả  năng  tự  mô  tả    

58  

Ví dụ về một tài liệu XML

59  

Cặp  thuộc  Znh  =  giá  

trị  

<?xml  version="1.0"  encoding="UTF-­‐8"?>  <group>    <student  id=“0112123”  >          <name>Nguyễn  Văn  A</name>    </student>    <student  id=“0112124”  >        <name>Trần  Thị  B</name>    </student>  

</group>  

Thẻ  gốc:  Bao  toàn  bộ  tài  liệu  

XML  

Thẻ  con  

Thẻ  con  

XHTML

•  XHTML:  Extensible  HyperText  Markup  Language  •  Chuẩn  đưa  ra  bởi  W3C  (ngày  26/2/2000)  •  Là  ngôn  ngữ  thoả  XML  +  HTML    •  Cú  pháp  chặt  chẻ  hơn  

60  

HTML và XHTML

•  Các  phần  tử  phải  được  lồng  nhau  tuyệt  đối  

61  

HTML  <b>  <i>  This  text  is  bold  and  italic  </b>  </i>    

XHTML  <b>  <i>  This  text  is  bold  and  italic  </i>  </b>    

HTML và XHTML

•  Tên  của  thẻ  đều  phải  viết  thường    •  Tất  cả  các  phần  tử  XHTML  phải  được  đóng  lại  

62  

HTML  <p>This  is  a  paragraph  <p>This  is  another  paragraph    

XHTML  <p>This  is  a  paragraph</p>    <p>This  is  another  paragraph</p>    

HTML và XHTML

•  Các  phần  tử  rỗng  cũng  phải  được  đóng  lại    

63  

HTML  This  is  a  break<br>    Here's  an  image  <img  src="happy.gif"  alt="Happy  face”    >    

XHTML  This  is  a  break<br  />    Here's  an  image  <img  src="happy.gif"  alt="Happy  face"  />    

HTML và XHTML

•  Không  sử  dụng  rút  gọn  

HTML   XHTML  <input  checked>    <input  readonly>    <input  disabled>  

<input  checked="checked"  />    <input  readonly="readonly"  />    <input  disabled="disabled"  />    

64  

LOGO

Ứng dụng phân tán

Hết