Adobe Dreamweaver CS6

NỘI DUNG CHƯƠNG TRÌNH
Bài 1: Tổng quan về mạng Internet
Bài 2: Ngôn ngữ HTML
Bài 3: Giới thiệu, định nghĩa Site
Bài 4: Thiết kế, trình bày trang Web
Bài 5: Xây dựng nội dung trang
Bài 6: CSS
Bài 7: Biểu mẫu – Form
Bài 8: Template
Bài 9: Frameset
Bài 1: TỔNG QUAN VỀ MẠNG INTERNET

Internet là gì?
Các khái niệm cơ bản
Các dịch vụ Internet
Bài 2: NGÔN NGỮ HTML

Giới thiệu ngôn ngữ HTM
Cấu trúc trang Web
Định dạng trang Web
Định dạng văn bản
Hình ảnh
Liên kết
Bảng biểu
Biểu mẫu và các thành phần
GIỚI THIỆU NGÔN NGỮ HTML

HTML là chữ viết tắt của Hyper Text Markup Language (Ngôn ngữ hiển thị siêu văn bản)
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.
Một file HTML là một file text bao gồm những tag nhỏ

Thẻ HTML có thể chia ra các loại:
Định dạng trang Web
Định dạng văn bản
Hình ảnh
Liên kết
Bảng biểu
Biểu mẫu và các thành phần
GIỚI THIỆU NGÔN NGỮ HTML

Tập tin HTLM có thể được tạo ra từ các phần mềm soạn thảo văn bản, nhưng có phần mở rộng là HTM hoặc HTML .
Vd : NotePad
Thẻ HTML được bao quanh bởi hai ký tự “<“ và “>”
Thẻ HTML thường có một cặp: Thẻ thứ nhất là thẻ mở đầu, thẻ thứ hai là thẻ kết thúc và dòng chữ ở giữa hai thẻ bắt đầu và kết thúc chính là nội dung.
Ví dụ:

Tiêu đề 1

Thẻ HTML không phân biệt in HOA và viết thường.
Một số thẻ HTML có thêm các thuộc tính giúp bạn xác định thêm thông tin về thẻ. Mỗi thuộc tính đều có dạng tên_thuộc_tính=giá_trị. Nếu thẻ có nhiều thuộc tính thì phải liệt kê từng thuộc tính, cách nhau bằng khoảng trắng.
Ví dụ:
Các thẻ cũng có thể lồng vào nhau.
Ví dụ : Nội dung sẽ in đậm và nghiêng
CẤU TRÚC TRANG WEB
: định nghĩa phạm vi của văn bản HTML
: Định nghĩa các mô tả về trang HTML. Các thông tin trong tag này không được hiển thị trên trang web
: mô tả tiêu đề trang web.
xác định vùng thân của trang web, nơi chứa các thông tin.
- 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
CẤU TRÚC TRANG WEB
Màu nền cho toàn trang
Backgound: định hình nền.
bgColor: định màu nền cho trang
leftMargin, topMargin, rightMargin, bottomMargin: định khoảng cách giữa nội dung và các lề của trang (lề trái, trên, phải, dưới)
style: Định các thuộc tính mở rộng cho trang web
Ví dụ



Ví dụ
ĐỊNH DẠNG VĂN BẢN
Định dạng font chữ:
: cho toàn bộ văn bản bắt đầu từ thẻ
: cho một đoạn văn bản
Các thuộc tính phông:
face: tên phông
color: Màu văn bản
size: kích cở văn bản, được định theo đơn vị tính từ 1  7
(1 7.5pt, 2 10pt, 3 12pt, 4 13.5pt, 5 18pt, 6 24pt, 7 36pt) hoặc có thể là +/-<đơn vị>

Ví dụ: Định một đoạn cho văn bản là “tahoma”, màu #FF0000, kích cở 12pt:


Xin chào các bạn

ĐỊNH DẠNG VĂN BẢN
Headings:
Headings được định dạng với hai thẻ

đến

.

xác định heading lớn nhất.

xác định heading nhỏ nhất
HTML sẽ tự động thêm một dòng trắng trước và sau mỗi heading.

Các thuộc tính văn bản:
đậm
nghiêng
gạch chân
_subscripted hoặc H ₂ O
^{superscripted} hoặc X ²
ĐỊNH DẠNG VĂN BẢN –

Thẻ 
 
: Giữ nguyên khoảng trắng, ngắt dòng, ký tự đặc biệt
ĐỊNH DẠNG VĂN BẢN
Ví dụ - ĐỊNH DẠNG VĂN BẢN
List – Danh sách liệt kê
Quy tắc khái báo 
Để tạo một danh sách ta phải thực hiện 2 bước:
Bước 1: Khai báo loại danh sách cần tạo (ol, ul)
Viết các thành phần nội dung trong thẻ. (li)
Ví dụ
List – Danh sách liệt kê
Danh sách có thứ tự : 

Vd : 	

		
 Clb nhiếp ảnh 

		
 Clb đoàn 

	
	 
 Danh sách không thứ tự : 

	Vd : 	

			
 Clb tiếng anh

			
 Clb võ thuật

		

Các thuộc tính văn bản:
 type: kiểu danh sách:
 Có thứ tự: 1, a, A, i, I
 Không thứ tự: Circle/Disc/Square
 start: thứ tự bắt đầu (danh sách có thứ tự)
Ví dụ - List
Tạo danh sách có thứ tự:

Học phần 1
Học phần 2
Học phần 3

Tạo danh sách không thứ tự:

Đồ hoạ
Mỹ thuật
Web
Tạo danh sách kết hợp :

Học phần 1
Word
Excel
Access
Học phần 2
Corel
Photoshop
Học phần 3 
Dream 
Flash
List – Danh sách liệt kê
VÍ DỤ
CHÈN HÌNH Ảnh – 
Liên kết hình ảnh vào trang Web, thẻ  với các thuộc tính:
 src=“url”: đường dẫn tập tin
 alt=“text”: ghi chú
 align=“aligment”: gióng hàng giữa hình ảnh và văn bản
 border=x: độ dày đường biên khung ảnh
 width/height=“x”: chiệu rộng, cao hình ảnh
 vspace/hspace=“x”: khoảng cách chiều cao và rộng giữa hình và văn bản

Ví dụ: chèn tập tin “picture.gif” vào trang web, không có đường biên:

CHÈN HÌNH Ảnh – 
Cấu trúc: 
Đường dẫn đến ảnh:
Đường dẫn tuyệt đối
Lấy địa chỉ từ trình duyệt

Đường dẫn tương đối
Hình và file html lưu trong cùng thư mục

Hình nằm trong thư mục con (image) của thư mục (demo) chứa file html

Thư mục chứa file html (file_html) là con của thư mục chứa hình (image)

Thư mục demo chứa hai thư mục image (chứa ảnh) và template (chứa file html)
 
MARQUEE – HÌNH / CHỮ CHẠY
Cho hình biết chạy, sử dụng thẻ 
Các thuộc tính của thẻ:
Direction=“hướng chạy” : hướng chạy (left, right, up, down)
Behavior=“kiểu chạy”: quy định kiểu chạy
Slide: chỉ chạy một lần
Scroll: chạy bình thường
Alternate: chạy đi chạy lại
Scrollamount=“tốc độ chạy”: số nguyên, số càng lớn tốc độ chạy càng nhanh
Onmouseover=“this.stop()”: dừng lại khi rê chuột vào
Onmouseout=“this.start()”
		Scrollamount=“ tốc độ”
		Scrolldelay    =“ thời gian nghĩ ”> Nội dụng chạy

Vd1 : 
		
		
	 
MARQUEE – HÌNH / CHỮ CHẠY
Cho hình chạy từ trái qua phải, đưa chuột vào đổi hướng chạy, đưa chuột ra chạy bình thường
onMouseOver = “this.direction = ‘right’ ”
onMouseOut = “this.direction = ‘left’ ”
MARQUEE – HÌNH / CHỮ CHẠY
Cho hình chạy, khi click ngừng lại, double Click chạy tiếp
onClick = “this.stop()”
onDblClick = “this.start()”
MARQUEE – HÌNH / CHỮ CHẠY
Chữ chạy theo hình sin và hình chữ Z
MARQUEE – HÌNH / CHỮ CHẠY
Một số kiểu hiển thị khác
MARQUEE – HÌNH / CHỮ CHẠY
Đổi màu nền khi di chuyển chuột vào/ra khỏi nội dung
MARQUEE – HÌNH / CHỮ CHẠY
Cho hình biết chạy, sử dụng thẻ 
Các thuộc tính của thẻ:
direction : hướng chạy (left, right, up, down)
Vd1 : 
		
		
	 
Vd2 : Cho hình chạy từ trái qua phải, đưa chuột vào đổi hướng chạy, đưa chuột ra chạy bình thường
onMouseOver = “this.direction = ‘right’ ”
onMouseOut = “this.direction = ‘left’ ”
Vd3 : Cho hình chạy, khi click ngừng lại, double Click chạy tiếp
onClick = “this.stop()”
onDblClick = “this.start()”
Vd4 : Đưa chuột vào đổi hình hoặc đưa vào đổi hình khác

	


LIÊN KẾT
Tạo liên kết giữa các trang web, email, hay địa chỉ URL, cặp thẻ  với các thuộc tính:
 href: địa chỉ URL
 target: chế độ mở Browser (“_blank”, ”_top”, ”_parent”, ”_self”)
 name: tên điểm dừng (anchor)
 Target:
_bank: Mở trang được liên kết trong cửa sổ mới
_seft: Tải tài liệu được liên kết trong cửa sổ của trình duyệt.
_top: Tải tài liệu được liên kết trong cửa sổ tận cùng của một frameset
_parent: Tải tài liệu được liên kết trong frameset của tài liệu hiện hành
LIÊN KẾT
 Các loại liên kết:
 Nội: href=“ten_tap_tin.html”
 Ngoại: href=“http://www...”
 Email: href=“mailto:abcxyz123@gmail.com”
 Điểm dừng: href=#ten_diem_dung
 Rỗng: href=“#”
Vd:  Nộ dung liên kết 
LIÊN KẾT
Cấu trúc:  Click here
Đường dẫn liên kết:
Đường dẫn tuyệt đối
Lấy địa chỉ từ trình duyệt
 Chuyến đến trang web trường
Đường dẫn tương đối
Hai file trangchu.html và gioithieu.html nằm trong cùng thư mục
 Chuyển đến trang gioithieu
Thư mục (chuyenmuc) chứa file gioithieu.html nằm trong thư mục chứa file trangchu.html. Từ trang chủ liên kết qua trang giới thiệu
click here
Thư mục (chuyenmuc) chứa file gioithieu.html nằm trong thư mục chứa file trangchu.html. Từ trang gioithieu.html liên kết đến trang trangchu.html
click here
Thư mục demo chứa hai thư mục index(trangchu.html) và template (gioithieu). Từ trangchu.html chuyển sang trang gioithieu.html
click here
LIÊN KẾT
Tạo liên kết nội 
Bước 1: Đánh dấu vị trí liên kết nội
 Chapter 1
Bước 2: Tạo liên kết nội
 Go to Chapter 1
hoặc 
 Hypertext
LIÊN KẾT TRONG TRANG
Liên kết trong trang là một biến thể khác của thẻ .
Thuộc tính href=“#dauneo” (thay cho đường dẫn url)
Ví dụ:
Quy tắc 1
VÍ DỤ - LIÊN KẾT TRONG TRANG
LIÊN KẾT TRONG TRANG
Tạo các Hotspot bản đồ ảnh
Bước 1: Chèn hình ảnh cần tạo bản đồ ảnh
Bước 2: Nhấp menu window  properties
Bước 3: Chọn các công cụ hotspot để xác định vùng ảnh link
Bước 4: NHập Link cho hotspot và nhập text thay thế (alternate)
Tiếp tục tạo hotspot cho đến khi xong.
Muốn hiệu chỉnh hotspot đã tạo chọn công cụ Pointer để hiệu chỉnh
TABLE và FRAME
Những giá trị cho thuộc tính frame
TABLE và FRAME
Những giá trị cho thuộc tính rules
TABLE và FRAME
Bố cục bảng trong bảng
Page 228
FORM
Dạng form nhập liệu
Dạng form lựa chọn
Dạng form submit
Cú pháp: 

FORM – THUỘC TÍNH
FORM – THUỘC TÍNH
FORM – THUỘC TÍNH
FORM
Xây dựng trang biểu mẫu để gởi nhận thông tin giữa người dùng và quản trị Web. (không nên dùng thẻ form để điều khiển layout)
 
 
: khai báo biểu mẫu
 Các thuộc tính của thẻ FORM:
 id: Định danh biểu mẫu
 action: Xử lý thông tin (bắt buột phải có)
 method: Phương thức lấy thông tin
 name: Tên biểu mẫu
Ví dụ: tạo một đối tượng biểu mẫu:
	

	….
	

FORM
Trong 
 bắt buộc phải có tham số action.
	

Một 
 có thể chứa thành phần    như trường text, checkbox, radio-button, button, submit,...
Một  cũng có thể chứa thành phần , , <fieldset>, <legend> và <label>.<br>Bên trong form cũng có thể chứa các tag khác.<br>FORM - INPUT<br>Thẻ <INPUT> tạo các đối tượng nhập liệu như: Text Input, Radio Button, Check box, hộp Browse, nút bấm..<br> Các thuộc tính thẻ INPUT<br> name: tên của đối tượng.<br> id: định danh<br> value: giá trị của đối tượng.<br> size: số ký tự<br> type: kiểu đối tượng.<br> text: Hộp nhập liệu<br> checkbox: hộp kiểm nhiều lựa chọn <br> radio: hộp kiểm loại trừ<br> file: hộp tìm kiếm tập tin<br> Submit: nút giử thông tin<br> Reset: nút điền lại thông tin<br>FORM – ví dụ<br>FORM – ví dụ<br>FORM – ví dụ<br>FORM – TEXTAREA<br>Cặp thẻ <TEXTAREA> tạo ô nhập liệu nhiều dòng<br> Các thuộc tính:<br> Name: Tên của hộp nhập liệu<br> Cols: số ký tự hiển thị<br> Rows: số dòng hiển thị<br> Vd : Tạo hộp nhập liệu có 5 dòng, 30ký tự:<br><Textarea name=“noidung" cols=“30“ rows=“5”><br>	Trung Tâm Tin Học – Đại học Khoa học Tự nhiên<br>
FORM - SELECT
Cặp thẻ  tạo danh sách chọn lựa
Các thuộc tính:
 Name: Tên của danh sách chọn lựa
 Size: số dòng hiển thị
Multiple: Cho phép người dùng chọn nhiều giá trị.
 Cặp thẻ  tạo các mục chọn lựa
 Ví dụ : Tạo hộp danh sách chọn lựa gồm các mục: “Dai Hoc”, “Cao Dang”,  “Trung cap”, “Ky Thuat Vien”,..
 
       Dai Hoc
       Cao Dang
       Trung cap 
       Ky thuat vien
 
FORM – VÍ DỤ
Form – FIELDSET
Tag 
 được dùng để nhóm các thành phần bên trong  một cách hợp lý.
Tag 
 tạo đường bao ngoài, bao quanh các thành phần trong .
Tag 
 được viết bên trong .
Tag 
 sử dụng kèm với các 
 (là tag định nghĩa một chú thích cho 
).
Form – FIELDSET
Form – FIELDSET
Form – OPTION
 Xác định các giá trị riêng trong dãy
Value=“x”
Selected=“selected”: Biểu thị giá trị mặc định trong danhh sách.
Form – Ví dụ
 Xác định các giá trị riêng trong dãy
Value=“x”
Selected=“selected”: Biểu thị giá trị mặc định trong danhh sách.
CSS (Cascading Style Sheet)
CSS có nhiều kiểu nhưng gom lại thì chúng ta sẽ có các thể loại CSS thông dụng như sau:
Background: CSS tùy chỉnh hình nền
Text: CSS tùy chỉnh cách hiển thị đoạn text
Font: CSS tùy chỉnh kích thước, kiểu chữ
Link: CSS tùy chỉnh link
List: CSS tùy chỉnh danh sách
Table: CSS tùy chỉnh bảng
Box model: Mô hình box model kết hợp padding, margin, border.
...
CSS – viết ở đâu
inline: viết trực tiếp trên thẻ thông qua thuộc tính style
external: viết riêng một thẻ có phần đuôi .css rồi sau đó import vào bằng thẻ link.
internal: viết tại file html hiện tại và nằm trong thẻ style
CSS – cú pháp
Cú pháp:
selector: selector sẽ trỏ đến những đối tượng (html) chịu ảnh hưởng bởi CSS
declaration: các thuộc tính CSS dùng để style cho thẻ selector
Thuộc tính css đều có định dạng:
Tên dấu_hai_chấm giá_trị dấu_chấm_phẩy  
CSS – viết ở đâu
inline: viết trực tiếp trên thẻ thông qua thuộc tính style
CSS – viết ở đâu
external: viết riêng một thẻ có phần đuôi .css rồi sau đó import vào bằng thẻ link.
 
Tập tin mystyles.css chứa mọi thứ nằm trong phạm vi thẻ 
CSS – viết ở đâu
internal: viết tại file html hiện tại và nằm trong thẻ style
Một số chú ý
: Xác định vùng chứa CSS không ngắt dòng, được dùng trong câu hoặc tiêu đề để thay đổi từng chữ.
Style=: Cung cấp kiểu CSS cụ thể để áp dụng cho thẻ span, hoặc định nghĩa kiểu CSS để áp dụng cho thẻ div
class=: Xác định lớp kiểu CSS được áp dụng cho thẻ span
 Xác định vùng chứa CSS hoạt động giống như thẻ 
, buộc ngắt dòng trước và sau.
Một số chú ý
 Tham chiếu bảng kiểu CSS bên ngoài bằng tên
Một số chú ý
: Xác định vùng chứa CSS không ngắt dòng, được dùng trong câu hoặc tiêu đề để thay đổi từng chữ.
Style=: Cung cấp kiểu CSS cụ thể để áp dụng cho thẻ span

Hai thẻ 
 và  được dùng trong css
Sự khác biệt của 
 và 
 được dùng như thẻ chứa dạng khối (giống như thẻ 
)
 được dùng bên trong khối (như thẻ )
Một định nghĩa, nhiều tham chiếu
sâ
Thêm Sound


  
   
 ↓   ↓

  



    Gửi ý kiến





                                  

                          

          

        
        

                

              

    
Website được thừa kế từ Violet.vn,
    người quản trị: Thiều Thị Thủy Ngân