Hướng dẫn thiết kế Web tĩnh HTML+Java
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 (5.05 MB, 162 trang )
THIẾT KẾ WEB – PHẦN 1 – WEB TĨNH - SANGIT
Trang 1 Web: Sangit.sharepoint.com Email:
1. WEB TĨNH:
1.1. HTML
1.2. Dreamweaver
1.3. JavaScript
2. CSDL:
2.1. Phân tích, thiết kế CSDL
2.2. Triển khai hệ quản trị CSDL
3. WEB ðỘNG:
3.1. Lập trình kết nối CSDL
3.2. Lập trình máy chủ
THIẾT KẾ WEB – PHẦN 1 – WEB TĨNH - SANGIT
Trang 2 Web: Sangit.sharepoint.com Email:
PHẦN I – WEB TĨNH
1. Các khái niệm:
* Internet : mạng máy tính toàn cầu, các máy truyền thông với nhau bằng giao thức
chung là TCP/IP (Transfer Control Protocol/Internet Protocol)
* Intranet : là mạng cục bộ không nối vào Internet,
truyền thông bằng giao thức TCP/IP.
* Mô hình Client – Server: mô hình khách – chủ. Server chứa tài nguyên dùng
chung cho nhiều máy Client
* Internet Server: là các Server cung cấp các dịch vụ Internet (Web Server, Mail
Server, FTP Server…)
* Internet Service Provider (ISP): Nhà cung cấp dịch vụ Internet cho khách hàng.
Mỗi ISP có nhiều khách hàng và có thể có nhiều loại dịch vụ Internet khác nhau.
* Internet Protocol : tiêu chuẩn chi phối việc chuyển tải thông tin giữa các máy
tính trong mạng
* World Wide Web (WWW): dịch vụ tra cứu thông tin Internet. Dịch vụ này ñưa ra
cách truy xuất các tài liệu của các máy phục vụ dễ dàng thông qua các giao tiếp ñồ họa. ðể sử
dụng dịch vụ này máy Client cần có một chương trình gọi là Web Browser.
THIẾT KẾ WEB – PHẦN 1 – WEB TĨNH - SANGIT
Trang 3 Web: Sangit.sharepoint.com Email:
* Web Browser : trình duyệt Web. Dùng ñể truy xuất các tài liệu trên các Web
Server.
– Internet Explorer
– Firefox
– Opera
– Chrome
– Safari…
* Home page : là trang web ñầu tiên trong web site
* Hosting Provider : là công ty hoặc tổ chức ñưa các
* Publish : Xuất bản trang web
* Web Server : là một chương trình ñáp ứng yêu cầu truy xuất tài nguyên.
Web Server là dạng phần mềm cài trên máy Server ñể phục vụ quản lý các website (APACHE,
IIS). Tích hợp các giao diện lập trình bằng một ngôn ngữ cụ thể.
* Web : là ứng dụng (trên mạng Client – Server) ñược chia sẻ trên
mạng Internet.
* URL (Unioform Resource Locator): một ñịa chỉ chỉ ñến một file cụ thể trong
nguồn tài nguyên mạng. Ví dụ: 207.46.130.149 ñược biểu diễn trong URL là www.microsoft.com
+ URL tuyệt ñối : ñịa chỉ Internet ñầy ñủ của một trang hoặc file, bao gồm giao
thức, vị trí mạng, ñường dẫn tự chọn và tên file.
Ví dụ, http:// www.microsoft.com/ms.html
+ URL tương ñối : ñịa chỉ tập tin kết nối có cùng ñường dẫn với tập tin hiện
hành, URL tương ñối ñơn giản bao gồm tên và phần mở rộng
của tập tin.
* HTML (HyperText makup Language): gồm các ñoạn mã chuẩn ñược quy ước
ñể thiết kế Web và ñược hiển thị bởi trình duyệt Web
+ Hypertext (Hypertext Link) : là một từ hay một cụm từ ñặc biệt dùng ñể tạo liên kết
giữa các trang web
+ Mark Up : là cách ñịnh dạng văn bản ñể trình duyệt hiểu và thông
dịch ñược.
+ Language : tập những quy luật ñể ñịnh dạng văn bản trên trang
Web.
* Trình soạn thảo trang web: Có thể soạn thảo web trên bất kỳ trình soạn thảo văn
bản nào: Notepad, FrontPage hoặc Dreamweaver.
THIẾT KẾ WEB – PHẦN 1 – WEB TĨNH - SANGIT
Trang 4 Web: Sangit.sharepoint.com Email:
2. Cấu trúc HTML:
2.1. Tag HTML:
<HTML>
<HEAD>
<TITLE> Tiêu ñề trang web</TITLE>
</HEAD>
<BODY>
Nội dung trang web
</BODY>
</HTML>
HEAD : Phần ñầu
BODY : Phần thân
TAG : Thẻ
<Tên Tag> : tag mở
</Tên Tag> : tag ñóng
- Các thuộc tính của tag: <Tên Tag các thuộc tính…></Tên Tag>
Left : Canh trái Center : Canh giữa
Right : Canh phải Justify : Canh ñều
- Cú pháp: <TagName ListProperties> Object </TagName>
TagName : tên tag HTML, liền với dấu “ < ”, không có khoảng trắng
Object : ñối tượng hiển thị trên trang Web
ListPropeties: danh sách thuộc tính của Tag
- Nếu có nhiều thuộc tính thì các thuộc tính cách nhau khoảng trắng
<TagName property1= “Value1” Property2= “Value2”…> Object </TagName>
Ví dụ:
<Body BGCOLOR=”RED” TEXT=“#FFFF00”> Nội dung </Body>
2.2. <Title> :
- Hiển thị nội dung tiêu ñề của trang web trên thanh tiêu ñề của trình duyệt
- Cú pháp: <TITLE> Nội dung tiêu ñề </TITLE>
<HTML>
<HEAD>
<TITLE> .: Sangit.com - Trang Chu :.</TITLE>
</HEAD>
</HTML>
THIẾT KẾ WEB – PHẦN 1 – WEB TĨNH - SANGIT
Trang 5 Web: Sangit.sharepoint.com Email:
2.3. <Hn>:
- Tạo Header, gồm 6 cấp Header, ñược ñặt trong phần BODY
- Cú pháp: <Hn ALIGN= “Direction”> Nội dung của Header </Hn>
Ví dụ:
<HTML>
<HEAD>
<TITLE> .: Sangit.com - Trang Chu :.</TITLE>
</HEAD>
<BODY>
<H1 ALIGN=Left>Head 1</H1>
<H2 ALIGN=Center>Head 2</H2>
<H3 ALIGN=Center>Head 3</H3>
<H4 ALIGN=Center>Head 4</H4>
<H5 ALIGN=Center>Head 5</H5>
<H6 ALIGN=Center>Head 6</H6>
</BODY>
</HTML>
2.4. <P> :
- Dùng ñể ngắt ñoạn và bắt ñầu ñoạn mới
- Cú pháp: <P Align = “Direction”> Nội dung của ñoạn </P>
THIẾT KẾ WEB – PHẦN 1 – WEB TĨNH - SANGIT
Trang 6 Web: Sangit.sharepoint.com Email:
<HTML>
<HEAD>
<TITLE> .: Sangit.com - Trang Chu :.</TITLE>
</HEAD>
<BODY>
<P Align=“Left”> Qua Ðèo Ngang
Bước tới ñèo ngang bóng xế tà,
Cỏ cây chen ñá lá chen hoa
…
</P>
</BODY>
</HTML
2.5. <BR>:
- Ngắt dòng tại vị trí của tag.
- Cú pháp: <BR> Nội dung </BR>
⇔
⇔⇔
⇔
<BR/>
Ví dụ:
<HTML>
<HEAD>
<TITLE> .: Sangit.com - Trang Chu :.</TITLE>
</HEAD>
<BODY>
<BR><B>Qua Ðèo Ngang</B></BR>
<BR>Bước tới ñèo ngang bóng xế tà</BR>
<BR>Cỏ cây chen ñá lá chen hoa</BR>
…
</BODY>
</HTML
THIẾT KẾ WEB – PHẦN 1 – WEB TĨNH - SANGIT
Trang 7 Web: Sangit.sharepoint.com Email:
2.6. <HR>:
- Kẻ ñường ngang trang
- Cú pháp: <HR Align= Direction Width= “Value” Size= “Value” Color = “ #RRGGBB”>
Ví dụ:
<HTML>
<HEAD>
<TITLE> .: Sangit.com - Trang Chu :.</TITLE>
</HEAD>
<BODY>
<HR Align=Left Width=“750” Size="20" Color="#00FFFF">
</BODY>
</HTML
2.7. <FONT>:
- ðịnh dạng font chữ
- ðịnh dạng Font chữ cho cả tài liệu thì ñặt tag <Font> trong phần <Body>
- ðịnh dạng từng phần hoặc từng từ thì ñặt tại vị trí muốn ñịnh dạng
- Cú pháp: <FONT Face= “FontName1, FontName2, FontName3” Size=
“Value”Color= “RRGGBB”> Nội dung hiển thị </FONT>
Ví dụ:
<HTML>
<HEAD>
<TITLE> .: Sangit.com - Trang Chu :.</TITLE>
</HEAD>
<BODY>
<FONT Face=“ARIAL” Size=“20” Color=”#00FFFF”> QUA ÐÈO NGANG</FONT>
</BODY>
</HTML
THIẾT KẾ WEB – PHẦN 1 – WEB TĨNH - SANGIT
Trang 8 Web: Sangit.sharepoint.com Email:
2.8.
<BODY > :
- Chứa nội dung của trang web
- Cú pháp: <BODY> Nội dung chính của trang web </BODY>
- 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
<HTML>
<HEAD>
<TITLE> Learning HTML </TITLE>
</HEAD>
<BODY BgColor="#00FFFF" Text="Black">Chào các ban!<Font Color ="LIMEGRREN">
Welcome to HTML </FONT>
</BODY>
</HTML>
2.9. <IMG> :
- Chèn một hình ảnh vào trang Web
- Cú pháp: <Img Src=“URL of Image” Alt=“Text” Width= “Value” Height=
“Value” Border=Value>
<HTML>
<HEAD>
<TITLE> .: Sangit.com – Trang Chu :. </TITLE>
</HEAD>
<BODY>
<IMG SRC="internet.jpg" Alt="Welcome" Width="500" Height="350"
Border= “5”></IMG>
</BODY>
</HTML>
THIẾT KẾ WEB – PHẦN 1 – WEB TĨNH - SANGIT
Trang 9 Web: Sangit.sharepoint.com Email:
2.10. <BgSound> :
- Chèn một âm thanh vào trangWeb. Âm thanh này sẽ ñược phát mỗi khi người sử
dụng mở trang Web.
- Cú pháp: <BgSound src=”Filenhac” Loop=Value>
<HTML>
<HEAD>
<TITLE> .: Sangit.com – Trang Chu :. </TITLE>
</HEAD>
<BODY>
<BgSound SRC=“sang.mp3” Loop=500></BgSound>
</BODY>
</HTML>
THIẾT KẾ WEB – PHẦN 1 – WEB TĨNH - SANGIT
Trang 10 Web: Sangit.sharepoint.com Email:
2.11. <EMBED>:
- Cho phép ñưa âm thanh trực tiếp vào trang WEB.
- Cú pháp: <EMBED SRC="URL" Width=Value Height=Value >
<HTML>
<HEAD>
<TITLE> .: Sangit.com – Trang Chu :. </TITLE>
</HEAD>
<BODY>
<EMBED SRC="LongRuoi.flv" Width="50%" Height="25%" Autostart="True"
Loop="True" Hidden="False">
</EMBED>
</BODY>
</HTML>
2.12. <MARQUEE > :
- ðiều khiển ñối tượng chạy một cách tự ñộng trên trang Web
- Cú pháp: <MARQUEE >Object</MARQUEE>
<MARQUEE DIRECTION="LEFT"> Welcome to Sangit.sharepoint.com</MARQUEE>
← ← ← Welcome to Sangit.sharepoint.com
<MARQUEE DIRECTION="Right"> Welcome to Sangit.sharepoint.com</MARQUEE>
→ → → Welcome to Sangit.sharepoint.com
2.13. <! Ghi chú >:
- Không hiển thị trong trang
- Cú pháp: <! Nội dung lời chú thích >
THIẾT KẾ WEB – PHẦN 1 – WEB TĨNH - SANGIT
Trang 11 Web: Sangit.sharepoint.com Email:
2.14. BIG – 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>
<BIG>Nhà tôi có hoa vàng trước ngõ,</BIG> tường thật là cao,…
Nhà tôi có hoa vàng trước ngõ,
tường thật là cao,…
<SMALL>Nhà tôi có hoa vàng trước ngõ,</SMALL> tường thật là cao,…
Nhà tôi có hoa vàng trước ngõ,
tường thật là cao,…
2.15. <SUP> và <SUB> :
- ðưa chữ lên cao hoặc xuống thấp so với văn bản bình thường
- Cú pháp:
<SUP> Nội dung chữ dưa lên cao </SUP>
<SUB> Nội dung chữ ñưa xuống thấp </SUB>
3X<SUP>2</SUP>
→ 3X
2
H<SUB>2</SUB>O
→ H
2
O
2.16. <STRIKE>:
- Gạch ngang văn bản
- Cú pháp: <STRIKE> Nội dung văn bản bị gạch ngang </STRIKE>
Tình yêu hoa gió – Ca Sĩ: <STRIKE>SangIT</STRIKE>
Tình yêu hoa gió – Ca Sĩ: SangIT
2.17. <CODE>:
- Dùng ñể nhập một dòng mã có ñịnh dạng ký tự riêng. Dòng mã này không ñược
thực hiện mà ñược hiển thị dưới dạng văn bản bình thường
- Cú pháp: <CODE> Nội dung văn bản muốn ñịnh dạng </CODE>
<CODE> If A < B Then <BR> A = A + 1 </CODE>
THIẾT KẾ WEB – PHẦN 1 – WEB TĨNH - SANGIT
Trang 12 Web: Sangit.sharepoint.com Email:
2.18. <EM>:
- Văn bản ñược nhấn mạnh (giống tag <I>)
- Cú pháp: <EM>Văn bản ñược nhấn mạnh</EM>
2.19. <STRONG>:
- ðịnh dạng chữ ñậm (giống <B>)
- Cú pháp: <STRONG>Văn bản ñược nhấn mạnh</STRONG>
2.20. <BLOCKQUOTE>:
- Dùng phân cách một khối văn bản ñể nhấn mạnh, ñoạn văn bản này ñược tách
thành một Paragraph riêng, thêm khoảng trắng trên và dưới ñoạn ñồng thời thụt vào so với lề trái
(tương ñương chức năng của phím Tab)
- Cú pháp: <BLOCKQUOTE> Nội dung khối văn bản nhấn mạnh
</BLOCKQUOTE>
2.21. <PRE>:
- Giữ nguyên các ñịnh dạng: ngắt dòng, khoảng cách, thích hợp với việc tạo bảng
- Cú pháp: <PRE> Nội dung văn bản cần ñịnh dạng trước với tất cả ñịnh dạng
khoảng cách, xuống dòng và ngắt hàng </PRE>
<HTML>
<HEAD>
<TITLE> Learning HTML </TITLE>
<HEAD>
<BODY>
<PRE>
TRƯỜNG ðẠI HỌC SÀI GÒN
Khoa Công Nghệ Thông Tin
</PRE>
</BODY>
</HTML>
THIẾT KẾ WEB – PHẦN 1 – WEB TĨNH - SANGIT
Trang 13 Web: Sangit.sharepoint.com Email:
2.22. <DIV> <SPAN>:
- Chia văn bản thành các khối, có chung một ñịnh dạng
+ <DIV> : Chia văn bản thành một khối bắt ñầu từ một dòng mới.
+ <SPAN> : Tách khối nhưng không bắt ñầu từ một dòng mới
- Cú pháp: <DIV> Nội dung của khối bắt ñầu từ một dòng mới </DIV>
<SPAN> Nội dung của khối trong 1 dòng </SPAN>
<HTML>
<HEAD><TITLE> Learning HTML</TITLE></HEAD>
<BODY>
<DIV align = center>
<FONT size = 4 color = hotpink face = Arial>
TRƯỜNG ðẠI HỌC SÀI GÒN TP.HCM<br>
</FONT>
Khoa Công Nghệ Thông Tin
</DIV>
</BODY>
</HTML>
<HTML>
<HEAD><TITLE> Learning HTML</TITLE></HEAD>
<BODY>
<SPAN STYLE = “FONT-SIZE:25; Color:BLUE”> Creating Web Pages
</SPAN><Font size=6 Color=red > With HTML</font>
</BODY>
</HTML>
THIẾT KẾ WEB – PHẦN 1 – WEB TĨNH - SANGIT
Trang 14 Web: Sangit.sharepoint.com Email:
2.23. Các ký tự ñặc biệt:
2.23.1. Lớn hơn (>): >
<CODE> If A > B Then <BR> A = A + 1 </CODE>
2.23.2. Nhỏ hơn (<): <
<CODE> If A < B Then <BR> A = A + 1 </CODE>
2.23.3. Cặp nháy “ ”: "
<BODY> " To be or not to be? " That is the question
</BODY>
2.23.4. Ký tự và &: &
<P> William & Graham went to the fair
2.23.5. Ký tự khoảng trắng:
THIẾT KẾ WEB – PHẦN 1 – WEB TĨNH - SANGIT
Trang 15 Web: Sangit.sharepoint.com Email:
3. Siêu liên kết – Hình ảnh:
3.1. SIÊU LIÊN KẾT
Siêu liên kết cho phép người truy cập có thể duyệt từ trang web này ñến trang web khác. Một liên
kết gồm 3 phần:
- Nguồn : chứa nội dung hiển thị khi người dùng truy cập ñến, có thể là một
trang web khác, một ñoạn Film, một hình ảnh hoặc một hộp thoại ñể
gửi Mail…
- Nhãn : có thể là dòng văn bản hoặc hình ảnh ñể người dùng click vào khi
muốn truy cập ñến liên kết, nếu nhãn là văn bản thì thường ñược
gạch dưới.
- ðích ñến (Target): xác ñịnh vị trí ñể nguồn hiển thị.
3.2. CÁC LOẠI LIÊN KẾT
- Internal Hyperlink (Liên kết trong) : là các liên kết với các phần trong cùng
một tài liệu hoặc liên kết các trang trong cùng một web site.
- External Hyperlink (Liên kết ngoài) : là các liên kết với các trang trên web site
khác.
3.3. TẠO SIÊU LIÊN KẾT
- Cú pháp: <A HREF=”URL”> Nhãn </A>
URL : ðịa chỉ của trang liên kết
Nhãn : Có thể là dòng text hoặc hình ảnh hoặc một button
- Dùng URL tương ñối ñể liên kết ñến các trang trong cùng một website
<HTML>
<HEAD> <TITLE> Using links</TITLE></HEAD>
<BODY>
<A HREF = “B1.htm”> Open Page1 </A>
</BODY>
</HTML>
THIẾT KẾ WEB – PHẦN 1 – WEB TĨNH - SANGIT
Trang 16 Web: Sangit.sharepoint.com Email:
- Dùng URL tuyệt ñối ñể liên kết ñến các trang trong website khác
<HTML>
<HEAD>
<TITLE> LINK </TITLE>
</HEAD>
<BODY>
<A Href="">Trang Google</A><BR>
<A Href="">Trang Yahoo</A>
</BODY>
</HTML>
3.4. LIÊN KẾT ðẾN CÁC PHẦN TRONG CÙNG 1 TRANG
- Nếu nội dung của trang quá dài thì nên tạo các Bookmark ñể khi xem, người dùng
click vào Bookmark ñể nhảy ñến một phần cụ thể nào ñó trên chính trang ñó: gồm 2 bước
- Tạo BookMark:
<A Name= “Tên Bookmark”> Tiêu ñề </A> Nội dung phần văn bản
- Tạo liên kết ñến Bookmark:
<A Href = “#Tên Bookmark”>Nhãn của liên kết</A>
<HTML>
<HEAD>
<TITLE> Using htm links</TITLE>
</HEAD>
<BODY>
<Font size=6>
<A HREF = “#Internet”>Internet</A><BR>
<A HREF = “#HTML”>Introduction to HTML</A><BR>
<A name = “Internet”><b>Internet</b></A><br>
Internet là một mạng của các mạng. Nghĩa là, các mạng máy tính ñược<BR/>
liên kết với các mạng khác, nối các nước và ngày nay là toàn cầu.<BR/>
Giao thức truyền thông là TCP/IP cung cấp liên kết với tất cả các máy<BR/>
tính trên thế giới<br>
<A name = “HTML”><b>Introduction to HTML</b></A><BR>
Ngôn ngữ ñánh dấu siêu văn bản là ngôn ngữ chuẩn mà web sử dụng<BR/>
ñể tạo và nhận ra tài liệu.<BR/>
Mặc dù không phải là một tập con của ngôn ngữ nâng cấp tiêu chuẩn<BR/>
tổng quát(SGML), ngôn ngữ ñánh dấu siêu văn bản cũng có liên quan<BR/>
với SGML.<BR/>
SGML là một phương pháp trình bày các ngôn ngữ ñịnh dạng tài liệu.<BR/>
HTML là ngôn ngữ ñánh dấu ñược sử dụng ñể tạo tài liệu HTML.<BR/>
THIẾT KẾ WEB – PHẦN 1 – WEB TĨNH - SANGIT
Trang 17 Web: Sangit.sharepoint.com Email:
Các hướng dẫn chỉ rõ một trang web nên ñược hiển thị như thế nào<BR/>
trong trình duyệt
</Font>
</BODY>
</HTML>
3.5. LIÊN KẾT VỚI BOOKMARK CỦA TRANG KHÁC
- Cú pháp:
<A Href= “ Bookmark”>
Trang main.htm
<HTML>
<HEAD><TITLE> Main document</TITLE></HEAD>
<BODY>
<A HREF = “C:\B1.htm#Internet”>Internet</A><br>
<A HREF = “C:\B1.htm#HTML”>Introduction to HTML</A><br>
</BODY>
</HTML>
THIẾT KẾ WEB – PHẦN 1 – WEB TĨNH - SANGIT
Trang 18 Web: Sangit.sharepoint.com Email:
3.6. LIÊN KẾT ðẾN HỘP THƯ
- Cú pháp: <A href=”MailTo:ñịa chỉ Email”>Nhãn</A>
<HTML>
<BODY>
<A href=“MailTo:>E-mail: </A>
</BODY>
</HTML>
• Nên tạo chú thích cho liên kết giúp người ñọc biết ñược trang cần tới.
• Nên dùng một màu thống nhất cho tất cả các liên kết.
• Khi Link không chỉ tới trang HTML mà tới một tài liệu như Word, Excel, PDF thì
bạn nên tạo biểu tượng của nó bên cạnh Link.
• ðừng tạo Link tới trang ñang xây dựng.
3.7. HÌNH ẢNH TRÊN TRANG WEB
3.7.1. Các loại ảnh :
* Ảnh Gif (Graphics Interchange Format) ñược sử dụng phổ biến nhất trong các
tài liệu HTML, dễ chuyển tải, ngay cả các kết nối sử dụng MODEM tốc ñộ chậm, hỗ trợ 256 màu
GIF. Các file GIF ñược ñịnh dạng không phụ thuộc phần nền.
* Ảnh JPEG (Joint PhotoGraphic Expert Group) có phần mở rộng .JPG, là loại
ảnh nén mất thông tin, nghĩa là ảnh sau khi bị nén không giống như ảnh gốc. Tuy nhiên, trong
quá trình phát lại thì ảnh cũng rõ gần như ảnh gốc. JPEG hỗ trợ hơn 16 triệu màu và thường ñược
sử dụng cho các ảnh có màu thực.
* Ảnh PNG (Portable Network Graphics) nén không mất dữ liệu
3.7.2. Chèn hình ảnh
- Cú pháp: <IMG Src=URL >
URL: thường sử dụng ñịa chỉ tương ñối
– Nếu hình chứa trong thư mục image và tập tin .htm chứa trong thư mục HTML thì
ñịa chỉ của hình chèn có dạng Src=“ /image/hinh1.gif”
– Nếu hình và tập tin .html chứa trong cùng một thư mục thì ñịa chỉ hình chèn có
dạng: Src=“hinh1.gif”
THIẾT KẾ WEB – PHẦN 1 – WEB TĨNH - SANGIT
Trang 19 Web: Sangit.sharepoint.com Email:
Ví dụ
<HTML>
<HEAD>
<TITLE> .: Sangit.com – Trang Chủ :. </TITLE></HEAD>
<BODY>
<IMG SRC="FireFox2.jpg" Width="150" Height="150” Border=1>
</BODY>
</HTML>
3.7.3. Các thuộc tính của ảnh:
a) Dàn văn bản quanh hình ảnh:
- Hình nằm bên trái văn bản : <IMG SRC=URL Align=Left> Nội dung văn bản
- Hình nằm bên phải văn bản : <IMG SRC=URL Align= Right> Nội dung văn bản
b) Chặn văn bản bao quanh hình:
- Canh lề khi dàn văn bản xung quanh một ảnh sẽ tác ñộng ñến tất cả các văn bản sau
ñó nếu không chèn vào một dòng kẽ ñặc biệt. Thuộc tính CLEAR trong tag BR làm cho văn bản
không bắt ñầu nếu lề cụ thể không bị xóa ñi (nghĩa là tại cạnh dưới của ảnh)
- Cú pháp:
* <BR CLEAR=Right> : Ngăn chặn văn bản dàn bên lề phải của ảnh
* <BR CLEAR=Left> : Ngăn chặn văn bản dàn bên lề trái của ảnh
* <BR CLEAR=All> : Ngăn chặn văn bản dàn hai bên lề của ảnh
c) Thêm khoảng trống xung quanh ảnh
- Nếu không muốn văn bản dàn xung quanh lề trái của ảnh thì ta có thể thêm khoảng
trắng xung quanh ảnh.
- Cú pháp: <IMG SRC=URL HSPACE=n VSPACE=m>
* HSPACE=n : Khoảng trắng, tính bằng pixel sẽ thêm vào cả bên phải và bên trái của ảnh
* VSPACE=m : Khoảng trắng, tính bằng pixel sẽ thêm vào cả bên trên và bên dưới của ảnh
THIẾT KẾ WEB – PHẦN 1 – WEB TĨNH - SANGIT
Trang 20 Web: Sangit.sharepoint.com Email:
d) Canh lề cho ảnh:
* Có thể canh lề cho ảnh so với một dòng văn bản trong một ñoạn.
- Cú pháp:
<IMG SRC=URL ALIGN= “Direction”>Văn bản muốn canh lề so với ảnh
- Direction: gồm các giá trị: Top, Bottom, Middle, TextTop
* Dùng ảnh làm liên kết: Có thể dùng hình ảnh ñể tạo một liên kết ñến một trang khác, hoặc
nếu có một ảnh lớn, bạn có thể tạo ảnh nhỏ hơn hoặc một biểu tượng cho nó ñể nó có thể hiển thị
nhanh chóng trên trang web, sau ñó tạo liên kết ñể ñưa người truy cập ñến ảnh có kích thước thật.
- Cú pháp:
<A HREF=“ðịa chỉ trang liên kết”> <IMG SRC=URL Alt=“Nội dung thay thế”>Nhãn </A>
e) Bản ñồ ảnh:
- Bản ñồ ảnh là một ảnh trong trang web ñược chia ra làm nhiều vùng, mỗi vùng khi
Click vào sẽ liên kết ñến một ñịa chỉ URL
- Cách tạo: Trước hết phải chèn vào trang một ảnh và ñặt nhãn cho ảnh
- Cú pháp: <IMG UseMap= “Label”> <Map Name= “Label”> <Area Shape= “Type”
Coords=“X1,Y1,X2,Y2, …” Href=”URL”> </Map>
Trong ñó:
Label : Tên của bản ñồ ảnh
Type : Hình dạng của các vùng trên ảnh, gồm các loại:
Rect : Vùng hình chữ nhật. (X1, Y1, X2, Y2) là tọa ñộ 2 ñỉnh chéo của hình CN
Circle : Vùng hình tròn. (X, Y, R) lần lượt là toạ ñộ tâm và bán kính của hình tròn
Poly : Vùng hình ña giác. (X1, Y1, X2, Y2, X3, Y3, …) là các ñỉnh của hình ña giác
Coords: Toạ ñộ các ñỉnh của hình
<HTML>
<HEAD>
<TITLE>IMAGE</TITLE>
</HEAD>
<BODY>
<Img Src="FireFox2.jpg" Width="150" Height="150" Border="0"
Usemap="#Map1"><Map NAme="Map1">
<Area Shape="Rect" Coords="73,3,149,66" Href="B1.htm">
<Area Shape="Poly" Coords="152,81,71,75,62,109,97,123" Href="B3.htm">
<Area Shape="Circle" Coords="37,32,27" Href="B2.htm">
</Map>
</BODY>
</HTML>
THIẾT KẾ WEB – PHẦN 1 – WEB TĨNH - SANGIT
Trang 21 Web: Sangit.sharepoint.com Email:
3.7.4. Hình nền:
- Trong hầu hết các trang web thường sử dụng nền màu, với mục ñích là làm nổi bật
nội dung trang ñó. Tuy nhiên cũng có thể sử dụng hình ảnh ñể làm nền bằng thuộc tính
BACKGROUND của thẻ BODY.
- Cú pháp: <BODY BACKGROUND= “BgImage.Gif”>
THIẾT KẾ WEB – PHẦN 1 – WEB TĨNH - SANGIT
Trang 22 Web: Sangit.sharepoint.com Email:
4. Danh Sách:
4.1. DANH SÁCH KHÔNG CÓ THỨ TỰ (Unorder List – UL)
- Cú pháp:
<UL Type= Shape1>
<LI Type= Shape 2> Nội dung 1
<LI Type= Shape 2> Nội dung 2
…
</UL>
* Shape 1, Shape 2 : là loại Bullet tự ñộng ñặt ở ñầu dòng trong danh sách
* Shape 1 : ảnh hưởng ñến toàn danh sách
* Shape 2 : ảnh hưởng ñến một mục trong danh sách
* Các loại shape:
- Circle : Bullet tròn, rỗng
- Square : Bullet vuông
- Disc : Bullet tròn không rỗng
<HTML>
<HEAD>
<TITLE> Learning HTML </TITLE>
<BODY>
<UL Type=”Square”>
<LI>Monday
<UL>
<LI> Introduction to HTML
<LI> Creating Lists
</UL>
<LI> Tuesday
<UL>
<LI> Creating Tables
<LI> Inserting Images
</UL>
<LI> Wednesday
<LI> Thursday
<LI> Friday
</UL>
</BODY>
</HTML>
THIẾT KẾ WEB – PHẦN 1 – WEB TĨNH - SANGIT
Trang 23 Web: Sangit.sharepoint.com Email:
4.2. DANH SÁCH CÓ THỨ TỰ (OrderList – OL)
- Cú pháp:
<OL Type=X Start =N >
<LI Type =X1 Value=M> Nội dung 1
<LI Type =X1 Value=M> Nội dung 2
…
</OL>
X: loại ký tự muốn sử dụng trong danh sách gồm :
* A : Chữ hoa
* a : Chữ thường
* I : Số la mã hoa
* I : Số la mã thường
* 1 : Cho số mặc ñịnh
N : giá trị ñầu tiên của danh sách
* X1 : là ký tự sử dụng cho dòng này và dòng tiếp theo, làm mất ảnh hưởng X
M : giá trị ñầu tiên của dòng này, làm thay ñổi giá trị của N
<HTML>
<HEAD>
<TITLE>Learning HTML</TITLE>
<BODY>
<OL>
<LI> Monday
<OL>
<LI TYPE = i> Introduction to HTML
<LI TYPE = i> Creating Lists
</OL>
<LI> Tuesday
<OL TYPE = A>
<LI> Creating Tables
<LI> Inserting Images
THIẾT KẾ WEB – PHẦN 1 – WEB TĨNH - SANGIT
Trang 24 Web: Sangit.sharepoint.com Email:
</OL>
<LI> Wednesday
<OL START = 5>
<LI> Creating Forms
<LI> Working with Frames
</OL>
<LI> Thursday
<LI> Friday
</OL>
</BODY>
<HTML>
Có thể lồng 2 loại danh sách có thứ tự và không có thứ tự vào nhau
<HTML>
<HEAD>
<TITLE>Learning HTML</TITLE></HEAD>
<BODY>
<OL>
<LI>Monday
<UL>
<LI >Introduction to HTML
<LI >Creating Lists
</UL>
<LI>Tuesday
<UL type=’Disc’>
<LI >Creating Tables
<LI >Inserting Images
</UL>
<LI>Wednesday
<UL type=’cycle’>
<LI >Creating Forms
<LI >Working with Frames
</UL>
</OL>
</BODY>
<HTML>
THIẾT KẾ WEB – PHẦN 1 – WEB TĨNH - SANGIT
Trang 25 Web: Sangit.sharepoint.com Email:
4.3. DANH SÁCH ðỊNH NGHĨA:
- Trong HTML có một tag ñặc biệt dùng ñể tạo danh sách ñịnh nghĩa dành riêng cho
việc tra cứu, nhưng cũng thích hợp cho loại danh sách ñể nối một từ với một diễn giải dài.
- Cú pháp:
<DL> <DT>Nhập từ muốn ñịnh nghĩa <DD>Nhâp nội dung ñịnh nghĩa … </DL>
<HTML>
<HEAD>
<TITLE>Learning HTML</TITLE></HEAD>
<BODY>
<DL>
<DT>Pixel
<DD> Short for picture element. A pixel refers to the small dots
that make up an image on the screen.<BR/>
Pixel depth refers to the number of colours which may be displayed.
<DT>Resolution
<DD>The quality of the display on a monitor. The higher the
resolution, the sharper the image.<BR/>
The number of pixels that can be displayed on a screen defines
resolution
<DT>Scanner
<DD> A hardware device that allows the user to make electronic
copies of graphics or text.
</DL>
</BODY>
</HTML>
