html cơ bản

Thiết kế Web 1

HTML cơ bảnVũ Chí Hi uế

[email protected]

Thiết kế Web 1

2

Gi i thi u HTMLớ ệ C u trúc tài li u HTMLấ ệ Các tag c b nơ ả Các tag danh sách Tag liên k tế Tag k b ngẻ ả Tag hình nhả

Nội dung

Thiết kế Web 1

3

HTML (HyperText Markup Language): Ngôn ng ữđánh d u siêu văn b nấ ả

Là m t ngôn ng đ xây d ng trang webộ ữ ể ự Ch a các thành ph n đ nh d ng đ báo cho trình ứ ầ ị ạ ể

duy t bi t cách hi n th m t trang webệ ế ể ị ộ Trang web có 2 thành ph n chínhầ

◦ D li u trang web (văn b n, âm thanh, hình nh,…)ữ ệ ả ả◦ Các th HTML (tag) đùng đ mô t cách th c d li u hi n ẻ ể ả ứ ữ ệ ể

th trên trình duy tị ệ Ph n m r ng: ầ ở ộ .html, .htm

Giới thiệu HTML

Thiết kế Web 1

4

Thẻ HTML (Tag)

Thiết kế Web 1

5

C u trúcấ<tag m >ở D li uữ ệ <tag đóng>

Tên tag th ng mang tính g i nhườ ợ ớ Đôi khi không c n tag đóng: <br>, <hr>ầ Cú pháp chung

<tag tên_thu c_tính=“…”ộ >D li uữ ệ </tag>

Thẻ HTML (Tag)

Thiết kế Web 1

6

L u ý:ư◦ Giá tr c a thu c tính nên đ t trong c p d u nháy đ n ị ủ ộ ặ ặ ấ ơ

ho c nháy képặ◦ Không phân bi t ch HOA/th ngệ ữ ườ◦ Trình duy t b qua các kho ng tr ng th a, d u ng t dòngệ ỏ ả ắ ừ ấ ắ

Thẻ HTML (Tag)

Thiết kế Web 1

7

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

Thiết kế Web 1

8

<html></html>: Đ nh nghĩa ph m vi văn b n HTMLị ạ ả <head></head>: Đ nh nghĩa mô t v trang HTMLị ả ề <title></title>: Tiêu đ trangề <body>/body>: Vùng thân trang web, n i ch a ơ ứ

thông tin

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

Thiết kế Web 1

9

Các tag x lý văn b nử ả Tag hình nhả Tag âm thanh

Các tag cơ bản

Thiết kế Web 1

10

Các tag đ 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 Ruler): ườ ẻ <hr>◦ Hi n th đúng d ng văn b n: ể ị ạ ả <pre>

Các tag đ nh d ng chu i văn b nị ạ ỗ ả◦ Đ nh d ng ký t : ị ạ ự <i>, <em>, <b>, <font>◦ Liên k t: ế <a>◦ Xu ng dòng: ố <br>

Các tag xử lý văn bản

Thiết kế Web 1

11

Làm sao hi n th : ể ị “Khoa T Nhiên” <CĐSP>ự Dùng ký t đ c bi t:ự ặ ệ

"Khoa T Nhiênự " <CĐSP>

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

Thiết kế Web 1

12

<img>: Không có th đóngẻ Các thu c tính c a tag ộ ủ <img>:

◦ src: đ ng d n đ n file hình nhườ ẫ ế ả◦ alt: Chú thích cho hình nhả◦ position: v trí (Top, Bottom, Middle)ị◦ border: đ dày đ ng vi n quanh nh (m c đ nh=0)ộ ườ ề ả ặ ị

Đ t nh n n cho trang webặ ả ề◦ S d ng th ử ụ ẻ <body background=“đ ng d n nh”ườ ẫ ả >

Tag hình ảnh

Thiết kế Web 1

13

<bgsound>: Không có tag đóng Thu c tính c a tag ộ ủ <bgsound>:

◦ src: Đ ng d n đ n file âm thanhườ ẫ ế◦ loop: s l n l p phát l i (ố ầ ặ ạ loop=-1: l p vô h n)ặ ạ◦ <bgsound> th ng đ t trong tag ườ ặ <head> c a trang webủ

Ví d : ụ<bgsound src=“ngoilaibennhau.mp3” loop=“1”>

Tag âm thanh

Thiết kế Web 1

14

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>,<dd>

Các tag danh sách

Thiết kế Web 1

15

Danh sách có thứ tự

Thiết kế Web 1

16

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

Thiết kế Web 1

17

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

Thiết kế Web 1

18

Cú pháp<a href=“…” target=“”>N i dungộ </a>◦ href: Ch ra URL c n liên k t t i (t ng đ i/tuy t đ i)ỉ ầ ế ớ ươ ố ệ ố◦ Các giá tr c a ị ủ target:

name: T i trang web vào frame có tên là nameả _blank: T i trang web vào c a s m iả ử ổ ớ _parent: T i trang web vào c a s chaả ử ổ _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 m c cao nh tả ử ổ ứ ấ

Ví d :ụ

Tag liên kết

Thiết kế Web 1

19

Tên tag Mô tả

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

<tr>…</tr> Tạo một dòng. Tag <tr> phải nằm trong tag <table>

<th>…</th> Tạo một ô tiêu đề. Tag <th> phải nằm trong tag <tr>

<td>…</td> Tạo một ô (chứa dữ liệu). Tag <td> phải nằm trong tag <tr>

Tag kẻ bảng (Table)

Thiết kế Web 1

20

Bảng – Ví dụ

Thiết kế Web 1

21

Thuộc tính Mô tả

colspan Thiết lập ô có độ rộng bằng bao nhiêu cột

rowspan Thiết lập ô có độ cao bằng bao nhiêu dòng

background, bgcolor Thiết lập ảnh nền/màu nền cho thẻ <table>, <tr>,<td>

cellpadding Khoảng cách từ đường viền đến văn bản trong ô

cellspacing Khoảng cách giữa các ô trong bảng

Bảng - Các thuộc tính

Thiết kế Web 1

22

Bảng – Ví dụ

Thiết kế Web 1

23

Tạo bảng theo cấu trúc

Thiết kế Web 1

24


Thiết kế Web 1

25


Thiết kế Web 1

26


Thiết kế Web 1

27

Bài tập thực hành

Thiết kế Web 1

28

S d ng NotePad đ thi t k trang web cá nhân, ử ụ ể ế ếtrình bày các thông tin sau:◦ H và tênọ◦ Đ a ch liên l cị ỉ ạ◦ Đi n tho iệ ạ◦ Email◦ Hình cá nhân◦ Môn h c yêu thíchọ◦ Website yêu thích◦ Th i khóa bi u h c t pờ ể ọ ậ

Bài tập 1

Thiết kế Web 1

29

S d ng NotePad thi t k trang web gi i thi u v ử ụ ế ế ớ ệ ềl p mình, g m các thông tin:ớ ồ◦ Tên l p, sĩ sớ ố◦ Hình nh ho t đ ng c a l pả ạ ộ ủ ớ◦ Danh sách thành viên c a l pủ ớ◦ Đ a ch website c a l pị ỉ ủ ớ

Bài tập 2

Thiết kế Web 1

30

Gợi ý chủ đề website

Thiết kế Web 1

31

Website tr ng h c, khoaườ ọ Website nhà hàng, quán cafe, ti m bán hoa,…ệ Website công ty nhà đ t, cây c nh, nhà sách,…ấ ả Website t ch c, câu l c b , nhóm làm vi c,…ổ ứ ạ ộ ệ Website h tr h c t p, h c online,…ỗ ợ ọ ậ ọ Website gi i thi u các môn th thao, trò ch i dân ớ ệ ể ơ

gian,… …

Các chủ đề

Thiết kế Web 1

32

Gi i thi u v nhóm thi t kớ ệ ề ế ế Thông tin v ch s h u website, m c đích websiteề ủ ở ữ ụ Thông tin v s n ph m/n i dung c n gi i thi uề ả ẩ ộ ầ ớ ệ Thông tin v các website t ng tề ươ ự Đ a hình nh liên quanư ả

Yêu cầu về chức năng

Thiết kế Web 1

33

HTML◦ S d ng liên k t, hình nh, danh sáchử ụ ế ả◦ S d ng table t o layoutử ụ ạ

CSS JavaScript

Yêu cầu về kỹ thuật

Thiết kế Web 1

34

1. Phân tích yêu c u website: c nhómầ ả◦ M c đích?ụ◦ C n bao nhiêu trang web?ầ◦ Màu s c?ắ

2. Phác th o s b giao di n web: 1-2 ng iả ơ ộ ệ ườ3. Thu th p tài li u, hình nh liên quan: 1-2 ng iậ ệ ả ườ4. Thi t k hình nh giao di n (Photoshop): 1 ng iế ế ả ệ ườ5. Thi t k giao di n web (HTML, CSS, JavaScript): ế ế ệ

c nhómả6. Ki m tra hi n th trên các trình duy t: c nhómể ể ị ệ ả7. Đ a lên Internet (host)ư

Quy trình làm việc

Thiết kế Web 1

35

html cơ bản

Documents