Slide thiết kế web cơ bản nhất
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 (6.49 MB, 152 trang )
1
Nội Dung
Giới thiệu ngôn ngữ HTML
Định dạng văn bản
Danh sách
Hình ảnh – Âm thanh – Liên kết
Bảng và trình bày trang - Khung
Biểu mẫu (Form) – Kết xuất
2
GiỚI THIỆU NGÔN NGỮ HTML
HTML (Hyper Text Markup Language): Ngôn ngữ
đánh dấu siêu văn bản
Là một ngôn ngữ dùng để xây dựng một trang Web.
Chứa các thành phần định dạng để báo cho trình duyệt
Web biết cách để hiển thị một trang Web.
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.
CÁC KHÁI NiỆM LIÊN QUAN TỚI THẺ
1. Khái niệm thẻ
Cú pháp tổng quát:
<TagName property1 ="ValueA" property2 ="ValueB" …>
TagName: tên tag HTML được đặt giữa hai dấu ngoặc
nhọn ( < > ) để báo cho trình duyệt biết cách thể hiện văn
bản.
Property: thuộc tính của thẻ, cung cấp các tuỳ chọn cho
thẻ. Các thuộc tính cách nhau bởi khoảng trắng. Thuộc
tính thường có trị (value) xác định cách tác động của thẻ.
Không phân biệt chữ hoa chữ thường.
CÁC KHÁI NiỆM LIÊN QUAN TỚI THẺ
1. Khái niệm thẻ
CÁC KHÁI NiỆM LIÊN QUAN TỚI THẺ
2. Thẻ chứa (Container tag)
Thẻ mở (Opening thẻ): <TagName [Attribute]>
Thẻ đóng (Closing thẻ): </TagName>
Các thành phần đặt giữa thẻ mở và thẻ đóng chịu tác động
của thẻ đó.
Ví dụ:
<B> Xin chào bạn </B> Nguyễn An
CÁC KHÁI NiỆM LIÊN QUAN TỚI THẺ
3. Thẻ rỗng (Empty tag)
Chỉ có thẻ mở không có thẻ đóng dùng để hiển thị yêu
cầu 1 lần.
Ví dụ: xuống dòng
, chèn đường kẻ ngang <hr>
Lưu ý: Khi soạn thảo nhấn phím Space (nhiều ký tự
trắng), Enter (xuống dòng) … không có hiệu lực khi hiển
thị trên trình duyệt mà phải dùng các thẻ.
CÁC KHÁI NiỆM LIÊN QUAN TỚI THẺ
4. Các thẻ lồng nhau
Các thẻ có thể lồng nhau, nội dung nào nằm trong nhiều
thẻ sẽ chịu tác động của các thẻ đó.
Lưu ý: mở trước đóng sau/mở sau đóng trước.
Ví dụ:
<B>Chào bạn đến với <I>WebSite </I> trung tâm ABC
</B>
CẤU TRÚC CƠ BẢN CỦA TRANG WEB
1. Cấu trúc
<HTML>
<HEAD>
<TITLE> Title of Web page</TITLE>
Nội dung thông tin của trang web
</HEAD>
<BODY>
Nội dung hiển thị trên trình duyệt
</BODY>
</HTML>
2. Soạn thảo
Dùng Notepad, Wordpad, Word
3. Hiển thị
Khởi động trình duyệt Internet Explorer
Chọn menu file,open, dùng browse tìm tập tin html mới tạo
Hoặc double click vào tên tập tin .htm
CẤU TRÚC CƠ BẢN CỦA TRANG WEB
CÁC TAG HTML CƠ BẢN
1. <!DOCTYPE> là dòng đầu tiên của trang HTML, ghi
thông tin về version HTML dùng trong trang HTML
này.
Ví dụ: HTML 4.0 transitional//en">
2. <HTML> … </HTML> định nghĩa phạm vi của văn
bản HTML.
3. <HEAD> … </HEAD> định nghĩa các mô tả về trang
HTML. Các thông tin này sẽ không hiển thị trong nội
dung trang web.
CÁC TAG HTML CƠ BẢN
4. <TITLE> Nội dung tiêu đề </TITLE> mô tả tiêu đề của
trang, thường được hiển thị trên thanh tiêu đề của cửa sổ
hiển thị trang web. Tiêu đề được dùng khi bookmark trang
Web này và làm chỉ mục khi tìm kiếm trang Web (search
engines index).
5. <!- - nội dung chú thích … - -> trình duyệt web bỏ qua
không đọc, không hiển thị trên trang Web.
Lưu ý: Không được có khoảng trắng giữa
<COMMENT> … </COMMENT> tương tự <!- - … - ->
CÁC TAG HTML CƠ BẢN
6. < BODY ListProperties> … </BODY> xác định phần
"thân" của trang web.
Các thuộc tính của <Body>
BgColor: thiết lập màu nền của trang
Text: thiết lập màu chữ
Link: màu của siêu liên kết
Vlink: màu của siêu liên kết đã xem qua
Background: load một hình làm nền cho trang
LeftMargin: Canh lề trái
TopMargin: Canh lề trên của trang
CÁC TAG HTML CƠ BẢN
CÁC TAG HTML CƠ BẢN
7. <BASE>
HREF: khai báo URL gốc của tài liệu (dùng để tạo URL tương đối).
TARGET: quy định đích đến mặc định cho các link trong trang Web.
8. <META> đặt ở giữa <head>…</head>, thường dùng quy
định thuộc tính cho trang web
NAME: nhúng thêm thông tin.
HTTP-EQUIV: tự động chuyển đến trang Web khác và ấn định ngôn ngữ
viết kịch bản mặc định.
Ví dụ:
<META name="GENERATOR" content="Microsoft FrontPage 5.0">
<META name="description" content="ABC - NamVietCompany., Ltd" >
<META http-equiv="Refresh" content=" 3; url=http://domain/directory/file.html">
CÁC TAG HTML CƠ BẢN
9. <HR> (horizontal rule) thêm đường kẻ ngang.
Cú pháp:
Size=value color=#rrggbb>
CÁC TAG HTML CƠ BẢN
Một số giá trị màu cơ bản
CÁC TAG HTML CƠ BẢN
9. <HR> (horizontal rule) thêm đường kẻ ngang.
Ví dụ:
<HTML>
<HEAD><TITLE>Welcome to HTML </TITLE></HEAD>
<BODY>
<H3> My first HTML document</H3>
<HR size = 5 align = center width = 50%>
<HR size = 15 align = left width = 80%>
<P> This is going to be real fun
</BODY>
</HTML>
CÁC TAG HTML CƠ BẢN
10. <BR> ngắt xuống dòng mới nhưng vẫn thuộc cùng đoạn.
Ví dụ: <HTML><HEAD><TITLE>nguyen</TITLE></HEAD>
<BODY>
<!--Chu thich cach 1-->
<comment>Chu thich cach 2</comment>
<HR align=left width="50%" color=blue SIZE=10>
Chao ban den voi WebSite trung tam ABC
<HR>
Chao ban den voi WebSite<BR>trung tam ABC
<HR>
Chao ban den voi
WebSite
trung tam ABC
</BODY>
</HTML>
CÁC TAG HTML CƠ BẢN
Một số thao tác trong cửa sổ trình duyệt
Cách load lại trang Web: Click biểu tượng Refresh (F5) trên
thanh công cụ.
Chỉnh sửa size chữ hiển thị trên trang: Chọn Menu
View>Text size
Chỉnh lại font chữ: Chọn Menu View->EndCoding
Trong trường hợp trang Web không hiển thị được Font tiếng
Việt:
Chọn menu Tool chọn Internet Options->Chọn Tab Fonts
chọn Font tiếng Việt
Nếu chọn rồi mà không hiển thị được font tiếng Việt thì chọn
Menu View>EndCodingchọn các font như User
defined,Vietnamese….
CÁC TAG HTML CƠ BẢN
Một số thao tác trong cửa sổ trình duyệt
Các tuỳ chọn khác cho trang Web: Tools Internet option:
Không Load hình xuống, định dạng liên kết,…
Chọn trang web mặc định khi mở trình duyệt
CÁC TAG HTML CƠ BẢN
Một số thao tác trong cửa sổ trình duyệt
Các tuỳ chọn khác cho trang Web: Tools Internet option:
Không Load hình xuống, định dạng liên kết,…
Chọn trang web mặc định khi mở trình duyệt
• Use Current: chọn trang hiện tại để load lên mỗi
lần khởi động IE
• Use Default: địa chỉ trang Web mặc định mỗi khi
mở trình duyệt
• History: lưu lại các trang web đã duyệt qua tại
máy Client và thông tin đăng nhập của user hiện
hành…
• Nếu khộng muốn lưu lại: Chọn Delete Cookies và
Delete Files.
• Có thể thiết lập khoảng thời gian lưu trữ trang
trong đối tượng History bằng cách thay đổi giá trị
trong ô “Days to keep pages in history” .
• Nếu muốn xoá đối tượng này thì nhấn Clear
history
CÁC TAG HTML CƠ BẢN
Một số thao tác trong cửa sổ trình duyệt
• Ngăn chặn không cho tải hình xuống trang
web
• Màu liên kết, cách thể hiện liên kết trên
trang
• Copy hình ảnh từ trang Web: Click phải vào
hình ảnh cần sao chép rồi chọn Save
picture as, hoặc Save background as,…
• Load về trang Web bao gồm các hiệu ứng,
script, hình ảnh… chứa trên trang: Chọn
Menu File Save As Chọn vị trí lưu
file Save.
• Hiệu chỉnh trang Web: View source->hiệu
chỉnhchọn File Save để lưu lại F5 để
cập nhật lại nội dung vừa hiệu chỉnh
ĐỊNH DẠNG VĂN BẢN – Định dạng ký tự
Các thẻ thường dùng
ĐỊNH DẠNG VĂN BẢN – Định dạng ký tự
1. Tag <B>: định dạng chữ đậm
Cú pháp:
<B> Nội dung chữ đậm</B>
2. Tag <I>: Định dạng chữ nghiêng
Cú pháp:
<I> Nội dung chữ nghiêng</I>
3. Tag <U>: Gạch chân văn bản
Cú pháp:
<U> Nội dung chữ gạch chân</U>
4. Tag <BIG> và <SMALL>: Chỉnh cỡ chữ to hoặc nhỏ hơn
cỡ chữ xung quanh
Cú pháp:
<BIG> Nội dung chữ to </BIG>
<SMALL> Nội dung chữ nhỏ </SMALL>
