Bài giảng thiết kế và triển khai website chương 3 GV bùi quang trường

Tổng quan về HTML • HTML HyperText Markup Language là ngôn ngữ đánh dấu siêu văn bản được thiết kế ra để tạo nên các trang web.. Tập tin File HTML là một văn bản có chứa các thẻ đánh dấ

Trang 2

11/18/2013 Công cụ thiết kế Web - HTML 2

Trang 3

Trang 4

3.1.1 Tổng quan về HTML

• HTML (HyperText Markup Language) là ngôn ngữ đánh dấu siêu văn bản được thiết kế ra để tạo nên các trang web Tập tin (File) HTML là một văn bản có chứa các thẻ đánh dấu (markup tags), các thẻ đánh dấu này giúp các trình duyệt Web hiểu được cách trình bày và hiển thị trang Web File HTML có phần mở rộng (Extension) là htm hay html và có thể được tạo ra bằng bất cứ chương trình xử lý văn bản đơn giản nào

Trang 5

thẻ> (thẻ kết thúc), văn bản nằm giữa cặp thẻ này là

nội dung của phần tử Các thẻ HTML không phân biệt chữ hoa và chữ thường, có nghĩa là các kiểu chữ đều được xem như nhau

Trang 6

Cấu trúc cơ bản

3

Một document HTML luôn bắt đầu bằng <html> và kết thúc bằng </html> (trong

đó bạn cũng có thể viết nhỏ hoặc viết hoa <html> và </html>) Nhờ có cặp TAG này mà Browser biết được đó là HTML - document dành cho trình duyệt Những chữ đó chỉ để dành riêng cho Browser, người đọc chỉ nhận được những gì viết

giữa cặp TAG <body> và </body> Trong một document html, chú thích được

Trang 7

Một trang web bao giờ cũng có hai phần cơ bản là tiêu đề và phần thân Tiêu đề luôn được viết to Bạn có thể dùng size lớn hơn và cũng có thể dùng những TAG đã được định sẵn cho tiêu đề

<html>

<h1>Tiêu đề của trang web</h1><br>

<h2>Welcome to my Homepage!</h2><br>

Trang 8

Trong một HTML Document, ngoài phần body còn có phần head, được viết bởi cặp tag <head></head> Nếu bạn sử dụng cặp tag này, bạn bắt buộc phải viết thêm một cặp tag nữa, đó là <title></title> Giữa <title> và </title> là tên của trang web được browser trình bày phía trên cùng của menubar Như vậy một trang web với "đầu" sẽ

có cấu trúc như sau:

Trang 9

11/18/2013 Cụng cụ thiết kế Web - HTML 9

3.1.2 Cỏc thẻ HTML

I Các thẻ định cấu trúc tài liệu

1.1 HTML 1.2 HEAD 1.3 TITLE 1.4 BODY

Trang 10

1.1 HTML

• <HTML>

• Toàn bộ nội của tài liệu đợc đặt ở đây

• </HTML>

Trang 11

Trang 12

1.3 TITLE

<TITLE>Tiêu đề của tài liệu</TITLE>

Trang 13

1.4 BODY

• <BODY>

• phần nội dung của tài liệu đợc đặt ở đây

• </BODY>

Trang 14

1.4 BODY (TT)

Trang 15

3.1.2 Cỏc thẻ HTML (TT)

II Các thẻ định dạng khối

2.1 Thẻ trình bày một đoạn P

2.2 Các thẻ định dạng tiêu đề H1/H2/H3/H4/H5/H6 2.3 Thẻ ngắt xuống dòng BR

2.4 Thẻ định dạng văn bản(văn bản đợc định dạng trớc trong tài liệu HTML và khi trình duyệt hiển thị thì sẽ tuân theo định dạng này) PRE

Trang 16

III Các thẻ định dạng danh sách

Cú pháp:

<UL>

<LI> Mục thứ nhất

<LI> Mục thứ hai

Trang 17

Trang 18

4.1 Các thẻ định dạng in ký tự

Trang 19

4.2 C¨n lÒ v¨n b¶n trong trang Web

Trang 20

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

Trang 21

4.4 Sö dông mµu s¾c trong thiÕt kÕ c¸c

trang Web

Sau ®©y lµ mét sè gi¸ trÞ mµu c¬ b¶n:

Trang 22

trang Web (TT)

Cú pháp:

Trang 23

trang Web (TT)

Sau ®©y lµ ý nghÜa c¸c tham sè cña thÎ BODY:

Trang 24

Trang 25

4.6 Kh¸i niÖm v¨n b¶n siªu liªn kÕt

•§Ó t¹o ra mét siªu v¨n b¶n chóng ta sö dông thÎ <A>

•Có ph¸p:

Trang 26

4.6 Khái niệm văn bản siêu liên kết

TABLEINDEX Thứ tự di chuyển khi ấn phím Tab

TITLE Văn bản hiển thị khi di chuột trên siêu liên kết

TARGET Mở trang Web đợc liên trong một cửa sổ mới (_blank)

hoặc trong cửa sổ hiện tại (_self), trong một frame

(tên frame)

Trang 27

3.1.2 Các thẻ HTML (TT)

V C¸c thÎ chÌn ©m thanh, h×nh ¶nh

1 §a ©m thanh vµo mét tµi liÖu HTML:

2 ChÌn mét h×nh ¶nh, mét ®o¹n video vµo tµi

liÖu HTML:

Trang 28

§a ©m thanh vµo mét tµi liÖu HTML

Cú pháp:

<BGSOUND

SRC = url LOOP = n

>

Trang 29

Trang 30

VI Các thẻ định dạng bảng biểu

Sau đây là các thẻ tạo bảng chính:

<TABLE> </TABLE> Định nghĩa một bảng

Trang 31

ALIGN = LEFT / CENTER / RIGHT

VALIGN = TOP / MIDDLE / BOTTOM

Trang 32

3.1.2 Các thẻ HTML (TT)

VII FORM

1 HTML Forms:

2 T¹o Form:

3 T¹o mét danh s¸ch lùa chän:

4 T¹o hép so¹n th¶o v¨n b¶n :

Trang 33

Trang 34

T¹o mét danh s¸ch lùa chän

Cú pháp:

<SELECT NAME="tªn danh s¸ch" SIZE="chiÒu cao">

<OPTION VALUE=value1 SELECTED> Tªn môc chän

thø nhÊt

<OPTION VALUE=value2> Tªn môc chän thø hai

<! Danh s¸ch c¸c môc chän >

</SELECT>

Trang 35

T¹o hép so¹n th¶o v¨n b¶n

Trang 36

3.1.3 Sử dụng Frontpage thiết kế

web tĩnh bằng HTML

1 Khởi động FrontPage

2 Tạo 1 trang web mới

3 Tạo 1 website mới

4 Ðặt thuộc tính trang web: tiêu đề, ảnh nền, nhạc nền, lề

Trang 37

Khởi động FrontPage

• Click chuột vào Start/Programs/Microsoft FrontPage Màn hình sau sẽ xuất hiện:

Trang 38

Tạo 1 trang web mới

• Chọn File/New/Page

Trang 39

Tạo 1 website mới

• Chọn File/New/Web

Trang 40

Ðặt thuộc tính trang web: tiêu đề, ảnh

nền, nhạc nền, lề

• Click File/Properties, Chọn tab General

Trang 41

nền, nhạc nền, lề (TT)

• Click File/Properties, Chọn tab Background:

Trang 42

nền, nhạc nền, lề (TT)

• Click File/Properties, Chọn tab Margin:

Trang 43

Ðịnh dạng đoạn

•Thanh formatting:

Trang 44

Ðịnh dạng ký tự

Trang 45

Tạo hyperlink

• Chọn Insert/Hyperlink

Trang 46

Tạo các điểm dừng(Bookmark) trong

trang

• Chọn chức năng Insert/Bookmark

Trang 47

Chèn hình ảnh

• Di chuyển con nháy đến vị trí muốn chèn hình, click nút

Trang 48

Tạo table

• Chọn Table/Insert/Table

Trang 49

Mở trang web hoặc web site đã có

• Click biểu tượng

Trang 50

12 Height & Width

13 Float & Clear

14 Position

15 Layers

Trang 51

Giới thiệu

1 CSS là gì?

2 Tại sao CSS?

Trang 52

Một Số Quy Ước Về Cách Viết

Trang 53

Cú pháp CSS

Để tìm hiểu cú pháp CSS chúng ta hãy thử xem một ví dụ sau

Ví dụ: Để định màu nền cho một trang web là xanh nhạt (light cyan) chúng ta dùng

code sau:

+ Trong HTML: <body bgcolor=”#00BFF3”>

+ Trong CSS: body { background-color:#00BFF3; }

Ví dụ: body { background:#FFF; color:#FF0000; font-size:14pt }

Ví dụ: body { background:#FFF; bolor:#FF0000; font-size:14pt } Đối với một trang

web có nhiều thành phần có cùng một số thuộc tính, chúng ta có thể thực hiện gom gọn lại như sau:

h1 { color:#0000FF; text-transform:uppercase }

h2 { color:#0000FF; transform:uppercase; } h3 { color:#0000FF; transform:uppercase; }

text-Chú thích trong CSS được viết như sau /* Nội dung chú thích */ Ví dụ: /* Màu chữ

cho trang web */ body { color:red }

Trang 54

Đơn vị CSS

Đơn vị chiều dài

Đơn vị màu sắc

Trang 55

Vị trí đặt CSS

+ Cách 1: Nội tuyến (kiểu thuộc tính)

Trang 56

Vị trí đặt CSS (TT)

Trang 57

+ Cách 3: Bên ngoài (liên kết với một file CSS bên ngoài)

Trang 58

+ Cách 3: Bên ngoài (liên kết với một file CSS bên ngoài)

Trang 59

Sự ưu tiên

Trang 60

Background

1 Màu nền (thuộc tính background-color

2 Ảnh nền (thuộc tính background-image)

3 Lặp lại ảnh nền (thuộc tính background-repeat)

4 Khóa ảnh nền (thuộc tính

background-attachment)

5 Định vị ảnh nền (thuộc tính

background-position)

Trang 61

Màu nền (thuộc tính

background-color

Ví dụ:

Trang 62

Ảnh nền (thuộc tính

background-image)

ảnh logo của blog Pearl Viết CSS để đặt logo này làm ảnh nền

trang web như sau:

body { background-image:url(logo.png) }

h1 { background-color:red }

h2 { background-color:orange }

p { background-color: FDC689 }

Trang 63

Lặp lại ảnh nền (thuộc tính

background-repeat)

• Thuộc tính này có 4 giá trị:

+ repeat-x: Chỉ lặp lại ảnh theo phương ngang

+ repeat-y: Chỉ lặp lại ảnh theo phương dọc

+ repeat: Lặp lại ảnh theo cả 2 phương, đây là giá trị mặc định

+ no-repeat: Không lặp lại ảnh

Trang 64

Khóa ảnh nền (thuộc tính background-attachment)

Thuộc tính này có 2 giá trị:

+ scroll: Ảnh nền sẽ cuộn cùng nội dung trang web, đây là giá trị mặc định

+ fixed: Cố định ảnh nền so với nội dung trang web Khi áp dụng giá trị này, ảnh nền sẽ đứng yên khi bạn đang cuộn trang web

Trang 65

Định vị ảnh nền (thuộc tính

background-position)

Ví dụ:

Thuộc tính background rút gọn

Trang 66

Trang 67

Trang 68

Pseudo-classes For Links

Pseudo-classes cho phép bạn xác định các hiệu ứng định dạng cho một đối tượng liên kết ở một trạng thái xác định như khi liên kết chưa được thăm (a:link), khi rê chuột lên liên kết (a:hover), khi liên kết được thăm (a:visited) hay khi liên kết đang được kích hoạt – đang giữ nhấn chuột (a:active)

Ví dụ này chúng ta sẽ áp dụng 4 màu sắc khác nhau cho từng trạng thái liên kết:

Trang 69

Class & id

Trang 70

Nhóm phần tử với class

Trang 71

Nhận dạng phần tử với id

Trang 72

Span & div

1 Nhóm phần tử với <span>

2 Nhóm phần tử với <div>

Trang 73

Nhóm phần tử với <span>

Trang 74

Nhóm phần tử với <div>

Trang 75

Box Model

Trang 76

Margin & padding

1 Thuộc tính margin

2 Thuộc tính padding

Trang 77

Thuộc tính margin

Trang 78

Thuộc tính padding

• Cú pháp:

Padding:top> | right> | bottom> | <padding-left>

Trang 79

<padding-11/18/2013 Công cụ thiết kế Web - HTML 79

Border

Trang 80

Height & width

Trang 81

Float & clear

1 Thuộc tính float

Trang 82

Thuộc tính float

Thuộc tính float có 3 giá trị:

+ Left: Cố định phần tử về bên trái

+ Right: Cố định phần tử về bên phải

+ None: Bình thường

Trang 83

Thuộc tính clear

Thuộc tính clear có tất cả 4 thuộc tính:

• left (tràn bên trái)

• right (tràn bên phải)

• both (không tràn)

• none

Trang 84

Position

1 Absolute position

2 Relative position

Trang 85

Absolute position

Trang 86

Relative position

• Sự định vị tương đối cho một thành phần là sự định

vị được tính từ vị trí gốc trong tài liệu Các thành phần đã được định vị tương đối sẽ để lại khoảng không trong tài liệu Các thành phần được định vị tương đối sẽ nhận giá trị position là relative

Trang 87

Định dạng
Số trang	87
Dung lượng	4,58 MB