- Trang chủ >>
- Y - Dược >>
- Y học công cộng
Bài giảng Phát triển ứng dụng web 1: Ngôn ngữ HTML - ĐH Sài Gòn
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (2.25 MB, 20 trang )
<span class='text_page_counter'>(1)</span><div class='page_container' data-page=1>
4 – Ngôn ng HTMLữ <b>1</b>
<b>Ngôn ng HTML</b>
<b>ữ</b>
<b>Phát tri n ng d ng web 1</b>
<b>ể ứ</b>
<b>ụ</b>
</div>
<span class='text_page_counter'>(2)</span><div class='page_container' data-page=2>
4 – Ngôn ng HTMLữ <b>2</b>
N i dung bu i h c tr
ộ
ổ ọ
ướ
c
1.
Các b
ướ
c thi t l p website
ế ậ
2.
Thi t k l p trình website
ế ế ậ
•
Thi t k giao di n
ế ế
ệ
3.
Xây d ng website d
ự
ướ
i góc nhìn
</div>
<span class='text_page_counter'>(3)</span><div class='page_container' data-page=3>
4 – Ngơn ng HTMLữ <b>3</b>
N i dung
ộ
1.
Gi i thi u v HTML
ớ
ệ
ề
2.
C u trúc 1 tài li u HTML
ấ
ệ
3.
Các tag (th ) HTML
ẻ
4.
H
ướ
ng d n th c hành HTML
ẫ
ự
</div>
<span class='text_page_counter'>(4)</span><div class='page_container' data-page=4>
4 – Ngôn ng HTMLữ <b>4</b>
Gi i thi u v HTML
ớ
ệ
ề
§ HTML (Hyper Text Markup Language): ngơn ng đánh d u siêu ữ ấ
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 ttrangwebthụngth ngg m:
ã D li u(vnb n,õmthanh,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 ể ệ ị ộ
dung web cho người dùng
</div>
<span class='text_page_counter'>(5)</span><div class='page_container' data-page=5>
4 – Ngơn ng HTMLữ <b>5</b>
Trình duy t – Trình so n th o
ệ
ạ
ả
Web browser – trình duy t webệ
Notepad
</div>
<span class='text_page_counter'>(6)</span><div class='page_container' data-page=6>
4 – Ngơn ng HTMLữ <b>6</b>
HTML căn b n Tag (th ) HTML
ả
ẻ
<html>
<head>
<title>
First page title
</title>
</head>
<body>
Hello world!
<br>
It's my first html.
</div>
<span class='text_page_counter'>(7)</span><div class='page_container' data-page=7>
4 – Ngơn ng HTMLữ <b>7</b>
Cú pháp, đ c tính c a HTML
ặ
ủ
<TAG ten_thuoc_tinh=“gia tri” ……..> D li u ữ ệ </TAG>
HTML tag:
§ Tên g i nhợ ớ
§ Tag được quy đ nh trong c p d u ngo c ị ặ ấ ặ <>
§ Ph n l n tag g m 2 ph n m ầ ớ ồ ầ ở <tag> và đóng </tag>
§ M t s tag ch có 1 ph n & khơng có d li u: ộ ố ỉ ầ ữ ệ <br>, <hr>
§ C u trúc l ngấ ồ
§ 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ộ ố ể ộ ố ặ ộ
</div>
<span class='text_page_counter'>(8)</span><div class='page_container' data-page=8>
4 – Ngôn ng HTMLữ <b>8</b>
C u trúc m t webpage HTML
ấ
ộ
</div>
<span class='text_page_counter'>(9)</span><div class='page_container' data-page=9>
4 – Ngơn ng HTMLữ <b>9</b>
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> :
</div>
<span class='text_page_counter'>(10)</span><div class='page_container' data-page=10>
4 – Ngơn ng HTMLữ <b>10</b>
Các tag HTML c b n
ơ ả
§ Tag x lý đ nh d ng văn b nử ị ạ ả
§ Tag danh sách
</div>
<span class='text_page_counter'>(11)</span><div class='page_container' data-page=11>
4 – Ngơn ng HTMLữ <b>11</b>
Tag x lý đ nh d ng văn b n
ử
ị
ạ
ả
§ Tiêu đ heading tags: <h1>, <h2>, …, <h6>ề
§ Đo n văn b n: <p>ạ ả
§ Đ nh d ng chu i: <em>, <i>, <b>, và <font>ị ạ ỗ
§ Đường k ngang: <hr>ẻ
§ Xu ng dịng <br>ố
</div>
<span class='text_page_counter'>(12)</span><div class='page_container' data-page=12>
4 – Ngơn ng HTMLữ <b>12</b>
Ví d : Tag Heading
ụ
Ngơn ng HTMLữ
Trong trình so n th oạ ả
</div>
<span class='text_page_counter'>(13)</span><div class='page_container' data-page=13>
4 – Ngơn ng HTMLữ <b>13</b>
Ví d : Tag Paragraph
ụ
Thu c tính c a tag <body>ộ ủ
</div>
<span class='text_page_counter'>(14)</span><div class='page_container' data-page=14>
4 – Ngơn ng HTMLữ <b>14</b>
Horizontal rules
<b><HR …></b>
–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
</div>
<span class='text_page_counter'>(15)</span><div class='page_container' data-page=15>
4 – Ngơn ng HTMLữ <b>15</b>
Đ nh d ng ch
ị
ạ
ữ
<b>Đ nh d ng:ị</b> <b>ạ</b>
<font>Hello world</font>
<font style="fontfamily:Verdana, Geneva, sansserif"
color="#000099" size="3"> Hello world </font>
<b>This text is bold</b>
<strong>This text is strong </strong>
<big>This text is big </big>
<em>This text is emphasized </em>
<i>This text is italic </i>
<small>This text is small</small>
This text contains a<sub>2</sub>
</div>
<span class='text_page_counter'>(16)</span><div class='page_container' data-page=16>
4 – Ngôn ng HTMLữ <b>16</b>
Đ nh d ng ch
ị
ạ
ữ
<EM>Computer Sciences</EM>
<STRONG> Computer Sciences </STRONG>
<DFN> Computer Sciences </DFN>
<CODE> Computer Sciences </CODE>
<KBD> Computer Sciences </KBD>
<VAR> Computer Sciences </VAR>
<CITE> Computer Sciences </CITE>
<BLINK> Computer Sciences </BLINK>
<DEL> Computer Sciences </DEL>
</div>
<span class='text_page_counter'>(17)</span><div class='page_container' data-page=17>
4 – Ngôn ng HTMLữ <b>17</b>
Đ nh d ng theo tag <Pre>
ị
ạ
</div>
<span class='text_page_counter'>(18)</span><div class='page_container' data-page=18>
4 – Ngôn ng HTMLữ <b>18</b>
Các ký t đ c bi t
ự ặ
ệ
Result Description Entity name Entity number
Kho ng tr ngả ắ <sub> </sub> <sub> </sub>
& D u vàấ <sub>&</sub> <sub>&</sub>
“ Ngo c képặ <sub>"</sub> <sub>"</sub>
< Nh h nổ ơ <sub><</sub> <sub><</sub>
> L n h nớ ơ <sub>></sub> <sub>></sub> <sub>..v ..v..</sub>
§ Hi n th các ký t đ c bi tể ị ự ặ ệ
Ví d :ụ
Đ hi n th để ể ị ược: <Dai hoc sai Gon> & “SGU”
<Dai hoc sai Gon>  ; &
;   ; "SGU"
</div>
<span class='text_page_counter'>(19)</span><div class='page_container' data-page=19>
4 – Ngơn ng HTMLữ <b>19</b>
Tag hình nh
ả
§ <img> : Khơng có th đóngẻ
§ <img src=“URL” alt=“Description” width=“Number”
height=“Number”>
§ Các thu c ti nh c a tag <img>:ộ ́ ủ
–src : Đường d n đ n file hình nhẫ ế ả
–alt : Chú thi ch cho hình nh́ ả
- width: chi u r ng c a hình khi hi n thề ộ ủ ể ị
- height: chi u dài c a hình khi hi n thề ủ ể ị
–position: Top, Bottom, Middle
</div>
<span class='text_page_counter'>(20)</span><div class='page_container' data-page=20>
4 – Ngơn ng HTMLữ <b>20</b>
Tag hình nh
ả
§ Giá tr m c đ nh c a 2 thu c tính width, height là kích thị ặ ị ủ ộ ước th t ậ
c a file nh.ủ ả
§ Đ t nh n n cho trang webặ ả ề
–S dung th ử ̣ ẻ <body background=‘Image Path’>
§ ví d :ụ
<body>
<img src=“123.jpg” alt=“Something is here” width =“45”
height=“45” >
</div>
<!--links-->
