Bài giảng Phát triển ứng dụng web 1: Ngôn ngữ HTML - ĐH Sài Gòn

Bài giảng Phát triển ứng dụng web 1: Ngôn ngữ HTML cung cấp cho người học các kiến thức: Các bước thiết lập website, thiết kế lập trình website, xây dựng website dưới góc nhìn ngộ nghĩnh. Mời các bạn cùng tham khảo.

Trang 1

Ngôn ng HTML ữ

Phát tri n ng d ng web 1 ể ứ ụ

Đ i H c Sài Gòn – Khoa CNTT ạ ọ

Trang 2

N i dung bu i h c tr ộ ổ ọ ướ c

• Thi t k giao di n ế ế ệ

Trang 4

Gi i thi u v HTML ớ ệ ề

văn b n, dùng đ xây d ng m t webpage.ả ể ự ộ

§ HTML: ch a các thành ph n đ nh d ng đ báo cho browser bi t ứ ầ ị ạ ể ếcách hi n th m t webpage.ể ị ộ

§ M t trang web thông thộ ường g m: ồ

• D li u (văn b n, âm thanh, hình nh, …) ữ ệ ả ả

• Các tag (th ) HTML đ đ nh d ng mô t cách th c các d li u hi n th ẻ ể ị ạ ả ứ ữ ệ ể ị trên trình duy t ệ

§ Web browser: phân tích & “hi u” các tags HTML, hi n th n i ể ệ ị ộ

Webpage HTML: 1 file *.htm || *.html

Trang 5

Trình duy t – Trình so n th o ệ ạ ả

Web browser – trình duy t web ệ

Notepad

Dreamweaver

Trang 7

§ Thu c tính c a tag cung c p thông tin b t bu c/tùy ch n cho tag ộ ủ ấ ắ ộ ọ

§ M t s web browser không hi u m t s tag ho c thu c tính ộ ố ể ộ ố ặ ộ

§ Không phân bi t ch hoa, th ệ ữ ườ ng

§ B qua các kho ng tr ng ỏ ả ắ

Trang 9

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. Thông tin trong tag này ị ả ềkhông được hi n th trên trang webể ị

§ <title></title> : Mô t tiêu đ trang webả ề

§ <body></body> :

Xác đ nh vùng thân c a trang web, n i ch a các thông tinị ủ ơ ứ

Trang 12

Ví d : Tag Heading ụ

Ngôn ng HTML ữ Trong trình so n th o ạ ả

N i dung hi n th ộ ệ ị Trong trình duy t ệ

Trang 13

Ví d : Tag Paragraph ụ

Thu c tính c a tag <body> ộ ủ

Trang 14

<HR …>

–Thu c ti nh :ộ ́

• 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

Trang 17

Đ nh d ng theo tag <Pre> ị ạ

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

Trang 18

Các ký t đ c bi t ự ặ ệ

Kho ng tr ng ả ắ    

“ Ngo c kép ặ " "

Trang 19

–alt : Chú thi ch cho hình nh́ ả

Trang 22

§ Thu c tínhộ type c a các tag danh sáchủ

Trang 23

§ Vd: Danh sách có th t : ứ ự

Trang 24

Danh sách có th t ứ ự

Trang 25

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

§ Vd: Danh sách không có th t : ứ ự

Trang 26

Danh sách t đ nh nghĩa ự ị

Trang 29

Tag liên k t trang URL ế

§ Tag liên k t trang – Tag <a> (anchor)ế

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

§ Thu c tínht target c a tag <a>ộ ủ

• 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ả ử ổ ấ

• Ví d :ụ

Trang 30

Phân lo i liên k t ạ ế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)ế

Trang 31

Liên k t ngo i (external link) ế ạ

<a href = “URL> Linked content </a>

Trang 32

Liên k t n i (internal link) ế ộ

Trang 34

Phân lo i URL ạ

<a href = “URL” target=‘….’> Link content </a>

§ Đ 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. ứ ế

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

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

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

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

Trang 35

./Thumuc1/fileB.html Thumuc1/fileB.html

Trang 36

./Thumuc1_1/fileC.html Thumuc1_1/fileC.html

Trang 37

./ /Thumuc1_2/fileD.html /Thumuc1_2/fileD.html

Trang 38

./ / /Thumuc2/fileF.html / /Thumuc2/fileF.html

Trang 39

Phân lo i URL ạ

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

Liên k t đ n E ế ế </a>

§ URL =

http://172.0.0.1/demo/Thumuc1/Thumuc1_2/Thumuc1_2_1/fileE.html /demo/Thumuc1/Thumuc1_2/Thumuc1_2_1/

fileE.html /Thumuc1/Thumuc1_2/Thumuc1_2_1/fileE.html

Trang 42

Tag k b ng Table ẻ ả

<table> </table> Kh i t o 1 b ng ở ạ ả

<tr> …</tr> T o 1 dòng, th <tr> n m trong th <table> ạ ẻ ằ ẻ

<th> …</th> T o 1 ô tiêu đ , th <th> n m trong th <tr> ạ ể ẻ ằ ẻ

<td> …</td> T o 1 ô, th <td> ph i n m trong th <tr> ạ ẻ ả ằ ẻ

§ Ví d minh hoụ ạ

Tên th và các thu c tính c a th ẻ ộ ủ ẻ

Trang 47

M t s ví d Table ộ ố ụ

Picture reference from: GV. Tr n Th Bích H nh (2007) ầ ị ạ Bài gi ng Môn L p trình và thi t k web, K.CNTT, ĐHKHTN ả ậ ế ế

Trang 48

M t s ví d Table ộ ố ụ

Trang 50

Ngôn ng HTML ữ

Bài th c hành ự

Đ i H c Sài Gòn – Khoa CNTT ạ ọ

Trang 51

Giới thiệu 1 số website tham khảo làm đồ án

Trang 53

Giới thiệu 1 số website tham khảo làm đồ án

§ Bán đi n tho i di d ng ệ ạ ộ

http://www.muabandtdd.com/

http://www.thegioididong.com/

§ Các trang t ươ ng t khác ự

…

Trang 55

Thank you !

Định dạng
Số trang	55
Dung lượng	2,33 MB