Bằng cách thay đổi thông số của bgcolor, bạn sẽ tạo được màu nền khác tuỳ theo sở thích của mình. Như bạn chắc cũng đã thấy trong các website đã đến thăm, một trang web còn có thể có n[r]
(1)o0o CODE HTML o0o[Toàn Tập]-[FontPage + DW ]
Vì thấy tình trạng vào box thấy hỏi " làm web nào, làm hộ web với " tui chiu ko được, mong bác đọc tìm hiểu với, forum thơng dụng invisionfree vbb hướng dẫn, thấy thíu hướng dẫn web thui Mong người đọc tìm hiểu Có thắc mắc thiết lập HTML post vào ln, tơi người MOD có khả giúp đỡ (Được dán lên :k67 ) ( sẵn tiện thấy hay nhấn thanks lun nhá )
Mở đầu - HTML gì, :k70 cấu tạo trang web dạng HTML, màu chữ, màu
Ðể viết HTML cho trang Web, bạn start chương trình NotePad Microsoft có kèm theo với Windows Ðó ASCII Editor (Tuy nhiên mà làm notepad ko biết mói xong , tui khuyên bạn nên xài Microsoft frontpage 2003 >> Rất tiện lợi cho việc thiết kế web ) Viết xong, bạn save vào folder dễ nhớ Tên file bắt buộc phải có tận htm html Ví dụ: start.htm Ðể thưởng thức thành mình, bạn open file Browser
Cấu trúc
Một document HTML bắt đầu <html> kết thúc </html> (trong bạn viết nhỏ viết hoa <html> </html>) Nhờ có cặp TAG mà Browser biắt HTML - document để trình duyệt Những chữ để dành riêng cho Browser, người đọc nhận viết cặp TAG <body> </body>
Như trang web viết html có cấu trúc sau: Trích:
<html> <body>
<! Phần bạn cần trình bày Ví dụ ảnh hay lời văn > </body>
</html>
Một trang trống, khơng có nội dung với màu da cam viết sau:
Trích: <html>
<body bgcolor="orange">
(2)Tất nhiên, Homepage cịn có nội dung (lời viết hình ảnh): Trích:
<html>
<body bgcolor="beige">
<font face="Arial" size="2" color="black">
Chào bạn, dòng chữ viết font Arial, màu đen, cỡ </font><br><br>
<font face="Verdana" size="3" color="navy">
Còn dòng chữ viết font Verdana, màu xanh nước biển, cỡ </font><br><br>
<font face="Bodoni" size="4" color="red">
Dòng lại font Bodoni, màu đỏ, cỡ </font><br> </body>
</html>
face thể cho mẫu chữ, size thể cho cỡ chữ (số lớn chữ to) color thể cho màu sắc chữ, #000000 màu đen, #FF0000 màu đỏ, #FFFF00 màu vàng
TAG <br> cho phép bạn chuyển sang dịng Bạn dùng nhiều <br> bạn muốn Cứ lần có <br> lần xuống dịng Bạn có thạ dùng mouse phải gõ vào trang web chọn source code để tham khảo xem viết Ðấy cách tốt để khám phá điều "bí mật" website đẹp :k71
Như bạn viết trang web đơn giản Một trang web có hai phần tiêu đề phần thân Tiêu đề viết to Bạn dùng size lớn dùng TAG định sẵn cho tiêu đề
Trích: <html>
<body bgcolor="#000080"> <center>
<font face="Verdana, Tahoma, Arial" color="#ffffff"> <h1>Tiêu đề trang web</h1><br>
<h2>Welcome to my Homepage!</h2><br> <h3>Tiêu đề trang web</h3><br> <h4>Tiêu đề trang web</h4><br> <h5>Tiêu đề trang web</h5><br> <h6>Tiêu đề trang web</h6><br> </font>
</center> </body> </html>
(3)<center></center> Tất nằm cặp TAG định hướng vào phía trang
Trong ví dụ này, trang xanh nước biển (#000080) chữ màu trắng
Bổ sung:
Trong HTML Document, phần body cịn có phần head, viết 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 cặp tag nữa, <title></title> Giữa <title> </title> tên trang web browser trình bày phía menubar Như trang web với "đầu" có cấu trúc sau: Trích:
<html> <head>
<title>Trang web dau tien cua toi</title> </head>
<body>
Phần bạn cần trình bày Ví dụ ảnh hay lời văn </body>
</html>
Cách đưa tranh ảnh vào trang web
Ðể làm cho trang web sinh động hơn, hấp dẫn hơn, bạn đưa thêm tranh ảnh vào Có trang web liên quan đến số liệu, đồ thị đồ thị dạng ảnh (images) Sau cách đưa ảnh vào trang web
* Ảnh cho vào trang web nên save dạng GIF JPG
* Khơng nên to q, khơng nói đến kích thước (cm) mà nói đến kính cỡ file (số KB)
* Khi scan, bạn chọn 72 dpi (dots per inch) đa phần hình máy tính làm việc với độ phân giải
* Khi upload trang web, nhớ upload ảnh
* Tên file nên sử dụng chữ thường, không nên sử dụng chữ hoa Ví dụ: myphoto.jpg khơng Myphoto.jpg
Sau HTML Code để đưa hình ảnh vào trang web: Trích:
<html>
<body bgcolor="#ffffff"> <center>
(4)</center> </body> </html>
điều đơn giản Chỉ riêng <img src="myphoto.jpg"> đủ để đưa ảnh vào trang web img image src source Tất đằng sau để trình bày ảnh đẹp width chiều rộng ảnh mà bạn muốn, khơng phụ thuộc vào kích thước gốc ảnh height chiều cao Tất đo pixel border="0" báo cho Browser biết ảnh trình bày khơng có khung alt có ích ảnh chưa không nạp (nhiều người surf khơng ảnh để đỡ tốn thời gian) Khi người xem biết xem
Dùng tranh ảnh làm cho trang web
Bằng cách thay đổi thông số bgcolor, bạn tạo màu khác tuỳ theo sở thích Như bạn thấy website đến thăm, trang web cịn có đẹp, tạo từ tranh nhỏ Cái đơn giản HTML Code sau:
Trích: <html>
<body bgcolor="#màu mà bạn thích" background="back.jpg"> </body>
</html>
Bạn thấy đó, có khác biệt nhỏ: ta thêm background vào nhận back.jpg Tuỳ theo kích cỡ back.jpg mà trông khác back.jpg ghép vào với cỡ nhỏ window Browser
bgcolor có mà khơng có được, có tác dụng back.jpg lý khơng nạp
Cách trang trí chữ, bố cục trang web
Trong trang trước, đề cập đến cách định hướng object document cặp TAG: <center></center> Những nằm cặp TAG Browser đưa vào window Nếu bạn không định hướng browser tự động theo thứ tự từ trái sang phải Nhưng đừng vội thử với <left></left> hay <right></right> hai cặp TAG khơng tồn ;-)
(5)điều đó, khơng phải dùng đến TAG thơi Bạn áp dụng TAG cho object khác picture, video Trích:
<p align="left"> Tồn khổ chữ hướng phía trái </p>
<p align="center"> Toàn khổ chữ hướng vào trung tâm </p> <p align="right"> Toàn khổ chữ hướng bên phải </p> <p align="right"><img src="h.clinton.gif" border="0"></p>
Cũng viết sau (khơng có </p>): Trích:
<p align="left"> Tồn khổ chữ hướng phía trái
<p align="center"> Tồn khổ chữ hướng vào trung tâm <p align="right"> Toàn khổ chữ hướng bên phải <p align="right"><img src="h.clinton.gif" border="0">
Và sau khả trang trí chữ, cịn nhiều thủ thuật khác cho trang bình thường gọi tạm đủ:
Trích:
# <b>Dịng chữ đậm </b>
# <strong> Dòng đậm</strong> # <i>Dòng chữ nghiêng</i>
# <big>Dòng chữ to hơn</big>
# <b><i><u><big> Dòng vừa to, vừa nghiêng, vừa đậm, vừa gạch chân </big></u></i></b>
# <small>Dòng chữ bé hơn</small> # <u>Dòng lại gạch chân</u>
# Nếu cửa hàng bạn giảm giá từ
<strike> € 20000 </strike> xuống € 15000
# Tổng bình phương hai cạnh góc vng bình phương cạnh huyền: a
<sup>2</sup>+b<sup>2</sup>=c<sup>2</sup> (a2+b2=c2) # Cơng thức hóa học nước là: H
<sub>2</sub>O (H2O)
# <em> Nếu bạn muốn nhấn mạnh điều </em> # Machine code:
(6)<kbd>Enter; Del; Contrl </kbd> # Ðưa ví dụ vào bài:
<samp>Sample</samp>
# Tên Variables lĩnh vực Programming: <var>window.open("mywindow.html");</var> # Các trích dẫn từ câu nói đó: <cite>Học, học học - Lê nin</cite>
# Chỉ dành cho Netscape Browser: Chữ nhấp nháy <blink>Look at me now, i am blinking</blink> # Chỉ dành cho Internet explorer: Chữ chạy
* <marquee border="0" behavior="slide" width="239" height="17" align="middle" scrolldelay="600" scrollamount="50">
Look at me now, i am scrolling </marquee>
* <marquee border="0" behavior="alternate" width="239" height="17" align="middle" bgcolor="#ffff00">
Look at me now, i am scrolling </marquee>
* <marquee border="0" width="239" height="17" align="middle"> Look at me now, i am scrolling
</marquee
Khi cần dòng kẻ ngang qua trang web , bạn dùng tag <hr> để "kẻ":
<hr> mang giá trị sau: "noshade" (khơng có bóng), width="x" (trong width chiều rộng x % ví dụ
width="80%" pixel ví dụ width="600"), color="blue" (màu dịng kẻ), size="1" (độ đậm dòng kẻ) Dòng viết sau: <hr noshade color="#0000FF" width="80%" size="1">
Thôi vậy, có lẽ đủ rồi, nhiều q lại lỗng Cần hỏi :k4 THêm nhạc cho trang web
thêm lệnh sau vào thẻ <body>
<bgsound src="Đường dẫn đến hát"> </body>
Thêm Video vào trang web <body>
(7)HƯỚNG DẪN NHẬP MƠN HTML
Bài trình bày bí ẩn ngơn ngữ đánh dấu siêu văn (HTML), thực chất chẳng có bí ẩn Nếu biết cách dùng trình xử lý văn bản, bạn tạo trang Web vài phút
Nhờ xây dựng văn đồ hoạ, World Wide Web (WWW) đưa Internet nhập vào dòng chảy sống Nhưng tính hấp dẫn WWW vượt xa nhiều so với giao diện đồ hoạ, lôi nhiều người dùng PC không rành kỹ thuật Nhờ HTML tương đối đơn giản nên nhiều người bình thường tạo Web site đầy ấn tượng Nếu bạn khao khát muốn đưa lên Web, tất điều mà bạn cần có tài khoản đăng ký với hãng cung cấp Web, bí HTML, chút óc sáng tạo
Bài báo đưa bạn chuyến du lịch trang Web điển hình, để bạn thấy thực Đặc biệt, bạn giới thiệu phần tử cấu tạo nên HTML (Hypertext Markup Language -Ngôn ngữ đánh dấu siêu văn bản) - linh hồn trang Web Và trường hợp khơng có dự định tạo Web site riêng cho mình, bạn có thêm hiểu biết xảy bạn nối vào Web xem trang ưa thích
HTML: Ngơn ngữ đánh dấu:
Sau lóng ngóng với vài trang Web du lịch Internet, bạn nghĩ phải có gói phần mềm tinh vi để thu tất hiệu ứng trang trí đầy quyến rũ Mặc dù có số cơng cụ dành cho người say mê HTML thực sự, bạn dùng trình soạn thảo văn Notepad Windows để tạo trang Web hấp dẫn
Sự thật hầu hết trang khơng có khác ngồi văn gia cố thêm phần tử HTML xếp đặt quy cách Để hiểu cách hoạt động chúng, bạn phải xem xét từ cụm từ Ngôn ngữ đánh dấu siêu văn xem chúng có ý nghĩa gì:
Siêu văn (HyperText) Như bạn biết, liên kết siêu văn từ hay câu trang Web dùng để đến trang Web khác Khi nhấn chuột lên liên kết này, trình duyệt bạn (như
Netscape Navigator Internet Explorer) đưa bạn tức khắc đến trang Web mà khơng cần hỏi han Vì liên kết siêu văn thật tính đặc trưng World Wide Web, trang Web thường biết tài liệu siêu văn Cho nên HTML có từ siêu văn tên nó, bạn dùng để tạo nên tài liệu siêu văn
(8)đậm nghiêng bảng liệt kê dấu chấm đầu dịng, hình đồ hoạ chèn thêm vào, với xác định mối liên kết siêu văn Bạn đánh mã vào chỗ thích hợp tài liệu văn gốc, trình duyệt Web thực việc dịch chúng
Ngơn ngữ (Language) Đây từ dễ nhầm lẫn cụm từ Nhiều người diễn giải HTML ngơn ngữ lập trình HTML khơng có liên quan đến việc lập trình máy tính HTML gọi ngơn ngữ gồm tập hợp nhỏ nhóm hai đến ba chữ từ mà bạn dùng để quy định kiểu dáng nét đậm nghiêng
Các thẻ HTML:
Bây sâu vào khái niệm đằng sau HTML, xem xét số ví dụ mẫu Để bắt đầu, tất cơng việc phải làm khởi động trình soạn thảo văn u thích bạn bảo đảm có tài liệu rỗng hiển thị
Trình xử lý văn bạn phải có khả lưu tập tin dạng văn Notepad làm việc cách tự động; cịn trình xử lý văn khác, Word WordPerfect, có tuỳ chọn văn hộp thoại Save As Hãy tham khảo tài liệu thuyết minh trình xử lý văn Đồng thời bạn phải lưu trang với đuôi mở rộng HTM HTML,
Homepage.htm chẳng hạn
Tạo lập trang Web vấn đề đơn giản, cần đánh văn bạn vào chèn thêm ký hiệu đánh dấu, gọi thẻ có dạng sau: <TAG>văn chịu tác động</TAG>
Phần thẻ mã (thường có hai chữ) xác định hiệu ứng mà bạn yêu cầu Ví dụ, cho thẻ nét đậm <B> Cho nên bạn muốn câu ACME Coyote Suppplies xuất theo kiểu chữ đậm (bold), bạn phải đưa dòng sau vào tài liệu mình:
<B>ACME Coyote Supplies</B>
Thẻ báo cho trình duyệt (browser) hiển thị tất phần văn phông chữ đậm, liên tục thẻ <B> Dấu gạch chéo (/) xác định thẻ kết thúc, báo cho trình duyệt ngưng hiệu ứng HTML có nhiều thẻ dùng cho nhiều hiệu ứng khác, bao gồm chữ nghiêng (italic), dấu đoạn văn (paragraph), tiêu đề, tên trang, liệt kê, liên kết, nhiều thứ
Cấu trúc sở:
Các trang Web khác nhau, tẻ nhạt hay sinh động, vô nghĩa cần thiết, tất có cấu trúc sở, nên đa số trình duyệt chạy hầu hết kiểu máy tính hiển thị thành công hầu hết trang Web
(9)tài liệu có chứa mã HTML Tương tự, dịng cuối tài liệu bạn ln ln thẻ </HTML>, tương đương Hết
Chi tiết catalog thẻ HTML dùng để chia tài liệu thành hai phần: đầu thân
Phần đầu giống lời giới thiệu cho trang Các trình duyệt Web dùng phần đầu để thu nhặt loại thông tin khác trang Để xác định phần đầu, bạn đưa thêm thẻ <HEAD> thẻ </HEAD> vào sau thẻ <HTML> Mặc dù bạn đặt số chi tiết bên phạm vi phần đầu này, phổ biến tên trang Nếu có xem trang browser, tên trang xuất dải tên cửa sổ browser Để xác định tên trang, bạn đặt đoạn văn tên thẻ <TITLE> </TITLE> Ví dụ bạn muốn tên trang My Home Sweet Home Page, bạn đưa vào sau:
<TITLE>My Home Sweet Home Page</TITLE>
Phần thân nơi bạn nhập vào văn xuất trang Web lẫn thẻ khác quy định dáng vẻ trang Để xác định phần thân, bạn đặt thẻ <BODY> </BODY> sau phần đầu (dưới </HEAD>)
Các thẻ sau xác định cấu trúc trang Web: <HTML>
<HEAD>
<TITLE> tên trang <TITLE> Các thẻ tiêu đề khác
</HEAD> <BODY>
Văn thẻ trang Web </BODY>
</HTML>
Văn đoạn:
Như trình bày trên, bạn bổ sung văn trang Web cách đánh vào thẻ <BODY> </BODY> Tuy nhiên, cần nhớ bắt đầu đoạn văn (chương, mục) mà ấn phím Enter Bạn phải dùng thẻ để báo cho browser biết bạn muốn chuyển vào đoạn văn mới:
<HTML> <HEAD>
<TITLE>My Home Sweet Home Page </HEAD>
<BODY>
Văn xuất phần thân trang Web <P>
Văn xuất đoạn văn </BODY>
(10)Bổ sung định dạng tiêu đề:
HTML bao gồm nhiều thẻ làm đẹp cho văn trang Bạn thấy trên, từ câu thành dạng chữ đậm đặt vào thẻ <B> </B> Bạn biểu văn theo kiểu chữ nghiêng cách bao chúng lại thẻ <I> </I>, làm cho từ xuất dạng cách đơn với thẻ <TT> </TT>
Giống chương sách, nội dung nhiều trang Web chia thành đoạn Để giúp phân cách đoạn làm cho dễ đọc hơn, bạn sử dụng tiêu đề Lý tưởng nhất, tiêu đề phải có tác dụng đề mục nhỏ, thể ý tưởng tóm tắt đoạn văn Để làm cho đề mục bật, HTML có loại thẻ tiêu đề để hiển thị văn theo phông chữ đậm với nhiều cỡ chữ khác nhau, từ ứng với phông lớn đến ứng với phông nhỏ
Làm việc với liên kết siêu văn
Thẻ HTML dùng để thiết lập liên kết siêu văn <A> </A> Thẻ <A> khác so với thẻ khác mà bạn gặp bạn khơng thể dùng mà phải kèm thêm địa tài liệu bạn muốn liên kết Sau cách hoạt động nó:
<AHREF=Address>
HREF viết tắt hypertext reference (tham chiếu siêu văn bản) Chỉ cần thay từ địa địa thực trang Web mà bạn muốn dùng để liên kết Dưới ví dụ:
<AHREF=http://www/dosword.com/dosworld/index.html>
Như cịn chưa kết thúc Tiếp theo, bạn phải cung cấp số văn diễn giải liên kết để nhấn chuột vào Cơng việc cịn lại chèn văn vào thẻ <A> </A> sau:
<AHREF=address> Văn liên kết </A> Sau ví dụ :
Why not head to the
<AHREF=http://www.dosworld.com/dosworld/index.html>DOSWorld home page</A>?
Chèn hình:
Nếu bạn muốn Web site trội hơn, bạn phải theo xu hướng đồ hoạ với hình ảnh chọn kỹ lưỡng Làm để chèn hình vào tập tin HTML có văn bản? Nhờ bổ sung thẻ <IMG> vào tài liệu, lệnh Chèn hình vào Thẻ xác định tên tậ tin đồ hoạ để trình duyệt mở tập tin hiển thị hình:
<IMG SRC=filename>
(11)Giả sử bạn có hình tên logo.gif nằm thư mục Graphics Để đưa vào trang Web, bạn dùng dịng sau
<IMG SRC=Graphics/logo.gif>
Các bảng tham khảo HTML Web:
Một vài thẻ bạn thấy vụn vặt bề mặt HTML Có hàng tá thẻ bổ sung khác cho phép bạn thành lập danh sách liệt kê dấu đầu dòng, bảng, biểu tương tác
Để tìm hiểu chúng, bạn thử dùng bảng tham khảo HTML Web Yahoo! cung cấp danh sách tham khảo địa http://www.yahoo.com/Computers_and_Internet/
Information_and_Documentation/Data_Formats/HTML/Reference/
Đồng thời, Microsoft có bảng tham khảo HTML xuất sắc (dĩ nhiên cài vào Internet Explorer riêng họ) địa chỉ:
http://www.microsoft.com/workshop/au l/default.html
Cuối bạn trở thành chuyên gia viết mã HTML, phương pháp tốt để biết nhiều HTML xem mã mà
những người khác dùng để xây dựng trang họ Ngay có trang cụ thể browser mình, bạn lưu chúng lại (dùng
File/Save As Netscape Navigator File/Save As File Internet Explorer), mở tập tin lưu xem trình xử lý văn bạn
Ngồi ra, Netscape Navigator Internet Explorer cho phép xem trang mở browser; chọn View/Document Source Netscape Navigator View/Source Internet Explorer
Các soạn thảo HTML
Không thiết phải tìm hiểu thẻ HTML để tạo dựng trang Web Có nhiều chương trình Windows thực cơng việc chèn thêm thẻ thích hợp cách tự động Sau ví dụ số trình soạn thảo có sẵn:
Word 97 Phiên Microsoft Word có sẵn khả HTML, bao gồm ví dụ mẫu lệnh Save to HTML để chuyển đổi tài liệu World hữu thành HTML
Netscape Composer Một phần Netscape Communicator, có kỹ thuật tạo trang WYSIWYG (thấy nấy) tích hợp chặt chẽ với Netscape Navigator Hãy tìm địa http://home.netscape.com/để có nhiều thơng tin
WebEdit Chương trình WebEdit xuất sắc Kenn Nesbitt có giao diện trực giác hỗ trợ hầu hết thẻ HTML có hành tinh này, đồng thời tốc độ nhanh
HomeSite Đây trình biên tập HTML tương đối Một điều ngạc nhiên biên soạn người vẽ tranh biếm hoạ - tác giả phim hoạt hình Dexter Nó soạn thảo đầy đủ tính năng, bao gồm trình kiểm tra tả cài sẵn, browser, frame wizard, thẻ HTML mã hố màu, nhiều khác Tìm theo địa
(12)DOS World 6/97
Soạn thảo văn HTML
Cấu trúc trang văn HTML Diễn giải
Chương trình bao gồm phần:
<HTML>, </HTML>: mở đầu kết thúc chương trình
<HEAD>, </HEAD>: mở đầu kết thúc phần đầu chương trình <BODY>, </BODY>: mở đầu kết thúc thân chương trình Mã nguồn:
<HTML>
<HEAD><TITLE>Tựa đề thí dụ</TITLE></HEAD> <BODY>
Xin chào bạn </BODY>
</HTML> Kết quả:
Xin chào bạn Chú ý:
Xâu ký tự nằm <TITLE> </TITLE> không hiển thị trang Web mà hiển thị phía Browser
Xâu ký tự nằm <TITLE> </TITLE> đặt phần header trang Web in
Xâu ký tự nằm <TITLE> </TITLE> ghi lại bạn cập nhật trang Web vào mục trang Web yêu thích (Fovorites)
Đầu đề trang văn HTML Mã nguồn:
<HTML> <HEAD>
<TITLE>Tựa đề thí dụ</TITLE> <HEAD>
<BODY>
(13)<H3>Đây đầu đề 3</H3> <H4>Đây đầu đề 4</H4> <H5>Đây đầu đề 5</H5> <H6>Đây đầu đề 6</H6> Kết
Đây đầu đề Đây đầu đề Đây đầu đề Đây đầu đề Đây đầu đề Đây đầu đề
Xuống dòng chia đoạn trang HTML Diễn giải
Khi bạn đánh máy văn chương trình soạn thảo văn đó, bạn cần bấm phím Return để kết thúc dòng hay đoạn văn, bạn cần phải làm nhiều thao tác bạn muốn phân định riêng đoạn văn khác trang Web Browser tự động bỏ qua mã xuống dịng bình thường Vì bạn phải viết thêm thẻ <P> để phân đoạn hay viết thẻ <BR> vị trí cụ thể mà bạn muốn xuống dịng
Mã nguồn (với đoạn văn sử dụng mã xuống dịng bình thường) Cộng hồ xã hội chủ nghĩa Việt nam
Độc lập - Tự - Hạnh phúc Đơn xin việc
Kết
Cộng hoà xã hội chủ nghĩa Việt namĐộc lập - Tự - Hạnh phúcĐơn xin việc
Mã nguồn (có sử dụng thẻ <BR> <P>) Cộng hoà xã hội chủ nghĩa Việt nam<BR> Độc lập - Tự - Hạnh phúc<P>
Đơn xin việc Kết
Cộng hoà xã hội chủ nghĩa Việt nam Độc lập - Tự - Hạnh phúc
(14)Đường kẻ ngang Diễn giải
Đường kẻ ngang chủ yếu dùng để phân định trang Web thành phần có tính logic dễ nhìn Có khơng nhiều khả đồ hoạ ngôn ngữ HTML, đường kẻ ngang cơng cụ có ích Mã nguồn
Kết <HR>
-<HR SIZE=10>
-<HR NOSHADE>
-<HR WIDTH=40>
-<HR COLOR="FF0000">
-Chú ý: Có thể tổ hợp tùy chọn với Danh sách phân loại
(15)Đây danh sách lý cho thấy danh sách lại có ích Bởi vì: Nó có tính hấp dẫn trực quan Nó sử dụng để nhóm yếu tố ý kiến tương tự Chúng ta dễ dàng đọc lượt qua danh sách ghi nhớ yếu tố tương ứng
HTML cung cấp nhóm đa dạng kiểu danh sách khác Mỗi loại danh sách có cấu trúc định dạng riêng Chúng bao gồm: Danh sách có trật tự
Danh sách có trật tự tự động đánh số thành tố danh sách Mã nguồn
Kết <OL>
<LI>Yếu tố <LI>Yếu tố <LI>Yếu tố </OL>
1 Yếu tố Yếu tố Yếu tố
Danh sách khơng có trật tự
Danh sách khơng có trật tự đánh dấu (chẳng hạn núm tròn) cho yếu tố danh sách
Mã nguồn Kết <UL>
<LI>Yếu tố <LI>Yếu tố <LI>Yếu tố </UL>
o Yếu tố o Yếu tố o Yếu tố
(16)Mỗi yếu tố danh sách bao gồm hai thành phần: Tiêu đề lề phía trái (chỉ thẻ <DT>)
Phần giải nghĩa lề thụt sang phía phải (chỉ thẻ <DD>) Mã nguồn
Kết <DL>
<DT>Yếu tố
<DD>Chú giải cho yếu tố <DT>Yếu tố
<DD>Chú giải cho yếu tố </DL>
Yếu tố
Chú giải cho yếu tố Yếu tố
Chú giải cho yếu tố Danh sách kiểu thực đơn
Mỗi yếu tố danh sách cấp số chẳng hạn dấu trịn Trơng giống danh sách khơng có trật tự
Mã nguồn Kết <MENU> <LI>Yếu tố <LI>Yếu tố <LI>Yếu tố </MENU> · Yếu tố · Yếu tố · Yếu tố
(17)Trơng giống danh sách khơng có trật tự Tổ hợp kiểu danh sách
Ta tổ hợp kiểu danh sách với Ký tự định dạng trước
Diễn giải
Kiểu ký tự định dạng trước cho phép bạn bảo tồn dấu cách dấu xuống dịng trang văn HTML y bạn gõ vào q trình soạn thảo Điều có nghĩa bạn không nên sử dụng thẻ <BR> <P> đoạn ký tự định dạng trước
Browser sử dụng phông chữ bề rộng cố định (fixed-width font) để hiển thị nội dung phần ký tự định dạng trước Thơng thường, phơng hệ thống sử dụng máy tính bạn
Kiểu ký tự định dạng trước có ích trường hợp dấu cách thiếu được, chẳng hạn thể đoạn mã chương trình Kiểu ký tự định dạng trước bắt đầu thẻ <PRE> kết thúc thẻ </PRE>
Khối trích dẫn Diễn giải
Khối trích dẫn thường dùng trường hợp sử dụng trích dẫn mở rộng Tồn khối trích dẫn lề thụt vào hai phía tạo thành khối riêng so với đoạn khác trang văn HTML Khối trích dẫn mở đầu thẻ <BLOCKQUOTE> kết thúc thẻ </BLOCKQUOTE>
Kiểu chữ Diễn giải
Các thẻ kiểu chữ ngôn ngữ HTML cho phép bạn điều khiển vẻ bề thân ký tự - chẳng hạn định dạng từ đậm nghiêng Các định dạng áp dụng từ phạm vi đoạn hay toàn văn ký tự đơn lẻ
Các thẻ kiểu chữ nói chung chia thành hai nhóm: có tính vật lý có tính logic
(18)Kiểu có tính chất vật lý Mã nguồn
Kết
<b>đậm</b> đậm
<u>gạch dưới</u> gạch
<i>nghiêng</i> nghiêng
<tt>teletype</tt> teletype
Kiểu có tính logic Mã nguồn
Kết
<em>nhấn mạnh </em> nhấn mạnh
<strong>nhấn mạnh hơn</strong> nhấn mạnh
<cite>trích dẫn</cite> trích dẫn
<code>code</code> code
<samp>sample</samp> sample
<kbd>keyboard</kbd> keyboard
<var>varible</var> variable
(19)Ký tự đặc biệt Diễn giải
Có nhiều ký tự mà HTML dùng vào mục đích đặc biệt, tất nhiên bao gồm ký hiệu < (nhỏ hơn) > (lớn hơn) Bởi ký hiệu dùng để thẻ mà bạn dùng chúng HTML Bạn dùng dấu phối hợp để thể ký tự đặc biệt
Ký tự
Dấu phối hợp <
&<; > &>; & & "
" Thẻ dẫn Diễn giải
Giống tất ngôn ngữ khác, HTML cho phép đặt dẫn Chú dẫn quan trọng soạn thảo Trình duyệt xét (browser) bỏ qua phần văn nằm thẻ dẫn nên người sử dụng khơng thể nhìn thấy chúng trang Web Dĩ nhiên thấy chúng xem mã nguồn
Chú dẫn giới hạn tiền tố <! hậu tố > Mã nguồn:
<TITLE>Chú Dẫn</TITLE>
<P><H2>Cách sử dụng thẻ dẫn<H2>
<P><! Những dòng không hiển thị xem văn html Browser. >
<P><H4>Các dòng thị máy.</H4> <UL>
<LI>BATIN xin chào bạn
(20)Kết quả:
Cách sử dụng thẻ dẫn Các dòng thị máy BATIN xin chào bạn
Chúc bạn ngày làm việc vui vẻ Bảng trang HTML
Diễn giải
Bảng tạo cho bạn cảm giác thoải mái tìm kiếm Ngồi ra, dùng bảng trình bày tiện lợi Bạn đưa văn bản, hình ảnh, danh sách chí bạn chèn thêm vào bảng Bảng HTML có chức trình bày, định dạng, đường biên bảng MS-Word, MS-Excel
Định dạng bảng Thẻ
ý nghĩa <TR> Tạo dòng <TD> Tạo cột <TH>
Tạo dòng tiêu đề (Chữ in đậm, canh giữa) Các tham số thẻ
Tham số ý nghĩa BORDER=n
Định dạng đường viền với đường viền n WIDTH=n%
Định dạng chiều rộng bảng n% CELLPADDING=n
Khoảng cách văn ô CELLSPACING=n
(21)Chia cột thành n cột ROWSPAN=n
Chia dòng thành n dòng ALIGN=(left, right, center)
Định dạng lề theo chiều ngang văn VALIGN=(top, bottom, midle)
Định dạng lề theo chiều dọc văn CLEAR=(left, right, all)
Chia dòng thành n dòng Mã nguồn
<HTML>
<HEAD><TITLE>Tạo bảng HTML</TITLE> </HEAD>
<BODY>
<OL><LI><B>Bảngg 1</LI></B> <CENTER> <TABLE BORDER=9 WIDTH=70%>
<TR>
<TH>Thực đơn <TH>Giá
<TR> <TD>Cà phê sữa<TD>5.000đ <TR><TD>Cà phê đen<TD>4.000đ </TABLE>
</CENTER> <P>
<LI><B>Bảng 2</LI></B> </OL>
<TABLE BORDER> <TR>
<TH COLOR=#FFFFDD">Thực đơn <TH COLOR=#FFFFDD">Giá
<TR><TD>Cà phê sữa<TD>5.000đ <TR><TD>Cà phê đen<TD>4.000đ </TABLE>
</CENTER> </BODY> </HTML>
Kết Bảng Thực đơn
(22)Cà phê sữa 5.000đ Cà phê đen 4.000đ Bảng Thực đơn Giá
Cà phê sữa 5.000đ Cà phê đen 4.000đ Font chữ Diễn giải
HTML cho phép bạn thay đổi font chữ thẻ <FONT> Cùng với tham số SIZE định kích thước chữ, tham số FACE thay đổi kiểu chữ tham số COLOR để định mà chữ Ngồi HTML cịn sử dụng số thẻ khác
Các thẻ dùng định dạng font chữ Thẻ
ý nghĩa <S> </S>
Chữ có gạch ngang (A) <SUB> </SUB>
Chữ thấp (A2) <SUP> </SUP> Chữ lũy thừa (A2) <BIG> </BIG> Phóng lớn chữ
(23)- New Post Merged on 13/2/2009 at 06:27:57 -Hover - kỹ thuật thiết kế trang Web
Xây dựng trang Web cần kiến thức tổng hợp sáng tạo, công nghệ, khéo léo Nhưng tất người mạnh mặt, vấn đề đặt nên áp dụng cho hợp lý Có số xu hướng thể trang Web thiên đồ họa, có xu hướng lại thiên kĩ thuật.Trong viết xem xét đến kĩ thuật phổ biến mà web site hay sử dụng Với kĩ thuật bạn áp dụng cách linh hoạt vào tình cụ thể, yêu cầu thiết kế Chúng ta bàn luận kĩ thuật Hover
Kĩ thuật Hover mà nói áp dụng mảng Hover Button, Hover Text Để có nhìn rõ ràng , phân tích web site Việt Nam web site nước xem kĩ thuật áp dụng đâu Những web site mà đến thăm : http://www.netnam.vn (website NetNam) http://www.microsoft.com/ms.htm (website Microsoft)
1 - Đối với Hover Button vào Netnam nghiên cứu Bạn nhận thấy trước chuột trỏ vào Services (hình a) nút mầu trắng, cịn sau trỏ vào mầu da cam (hình b), biểu Hover Button Hiệu kĩ thuật đem lại sống động cảm giác nút
Nguyên tắc để làm Hover Button đơn giản, gần giống với cách làm phim hoạt hình Ta thực theo bước sau:
[+] Thứ với trường hợp nút Services bạn cần phải tạo hai file ảnh : ServicesOn.gif ServicesOff.gif ServiceOn.gif ảnh mầu trắng hình a, cịn ServicesOff.gif ảnh với mầu da cam hình b, lưu ý ảnh phải có kích cỡ với
[+] Sau bạn tạo trang Html với đoạn javascript để test sau:
<html> <head>
<title>Test Hover Button</title> <script>
(24)if (window.focus) { self.focus();
}
if (document.images) { image1on = new Image();
image1on.src = "servicesOn.gif"; image1off = new Image();
image1off.src = " servicesOff.gif "; }
function turnOn(imageName) { if (document.images) {
document[imageName].src= eval(imageName + "on.src"); }
}
function turnOff(imageName) { if (document.images) {
document[imageName].src = eval(imageName + "off.src"); }
} // > </script> </head>
(25)</html>
Nếu bạn muốn thêm nút Hover thứ cần làm lại bước sau chèn thêm dịng image2on = new Image(); image2off = new Image();
và nhớ có chèn thêm lời gọi Hover:
<a href="ten file lien ket" onMouseOver="turnOn('image2')"
onMouseOut="turnOff('image2')"><img name="image2" src="ten file anh Off " border=0></a>
2 - Hover Text , vào thăm www.microsoft.com Ngược lại với Hover Button, chuyên sử dụng đồ hoạ để thực hiện, Hover Text lại sử dụng text để thể kĩ thuật Phải nói web site Microsoft tận dụng triệt để Hover Text, tất trang site bạn tới thăm thấy xuất Hover Text
Cũng tương tự Hover Button, Hover Text hiệu ứng bạn di chuột vào liên kết liên kết đổi mầu, liên kết phóng to ra, hiệu ứng tuỳ thuộc vào bạn Bạn đặt câu hỏi có Hover Button đặt Hover Text làm cho phiền phức Thật Hover Button hạn chế, site bạn có số liên kết dùng Hover Button để tạo hiệu ứng, gặp trường hợp trang bạn có độ hai chục liên kết khác cài đặt Hover Button làm cho trang web bạn thêm rắc rối đặc biệt thời gian lâu để tải ảnh Một số website tinh tế thường Hover Button liên kết chính, mang tính bao trùm, cịn liên kết tham chiếu tới trang khác cài đặt Hover Text
ở ta thử cài đặt Hover Text, mà ta di chuột vào liên kết đổi sang mầu đỏ Bạn hay thử chạy xem trang html : <Html>
<Head>
<Title>Test Hover Text</Title> <style type="text/css">
<!
(26)A:hover {color: red; font:Bold} A.bb:hover {color: #CC0000;} A {text-decoration:underline} >
</style> </Head> <a href="-
Http://www.microsoft.com">
Http://www.microsoft.com - Tới thăm Microsoft </a> <br>
<a href="Http://www.netnam.vn"> Http://www.netnam.vn - Tới thăm Netnam </a>
</Html>
Như bạn thấy điểm mấu chốt Hover Text sử dụng CSS (Cascading Style Sheet) Trong đoạn style ta định nghĩa mầu liên kết xanh navy, font kiểu normal Khi chuột trỏ vào liên kết liên kết có mầu đỏ font kiểu chữ đậm
Chúng ta thay đổi giá trị mầu sắc tuỳ theo hoàn cảnh cụ thể
3 - Một bàn luận khác với Hover
Trên bàn tới cách làm Hover Button Hover Text với java script, cách dễ hiểu rõ ràng Ngồi bạn dùng frontpage để tạo Hover Với frontpage bạn dễ dàng tạo Hover có giao diện dễ hiểu Nhưng hạn chế lại nặng nề cách tạo frontpage dùng applet dùng script, nên lên tải lên mạng người dùng sử dụng thấy cảm giác trang web tương đối chậm chạp điều kiện tốc độ Internet Việt Nam khơng mang tính kinh tế Các web site Việt Nam hầu hết có sử dụng kĩ thuật Hover, bạn vào thăm www.vnn.vn www.fpt.vn để nghiên cứu kĩ
(27)Định nghĩa: Ngôn ngữ Đánh dấu Siêu Văn Động (Dynamic Hypertext Markup Language) phiên mở rộng HTML JavaScript, ngôn ngữ dùng để tạo trang thông tin World Wide Web Dynamic HTML có vị trí văn đồ hoạ xác cho phép nội dung trang Web thay đổi người dùng nhấn, kéo hay trỏ vào nút, hình ảnh hay thành phần khác trang
Công nghệ đặc biệt cần nhiều nỗ lực
Ngôn ngữ đánh dấu siêu văn động mang lại cho nhà phát triển khả tạo trang Web có hình thức tính ứng dụng thực Nói nghe dễ dàng bạn đừng "tưởng bở"
Hầu hết trình duyệt World Wide Web chưa có khả dùng tính HTML động, ngoại trừ Navigator 4.0 Netscape Internet
Explorer 4.0 Microsoft Tuy nhiên, hai phiên lại khơng tương thích với ố hầu hết tính HTML động Navigator khơng hỗ trợ Internet Explorer ngược lại Kết nhà phát triển Web phải chọn lựa hai để viết trình ứng dụng hay phải chấp nhận "chắp vá" để mã HTML động chạy hai môi trường Với phiên nào, nội dung trang Web thay đổi mà tải xuống
HTML động cho phép người dùng định vị xác văn hình ảnh trang Web Cả hai trình duyệt Netscape Microsoft hỗ trợ hệ CSS để kiểm sốt vẻ ngồi trang Web Ví dụ, nhà phát triển thay đổi kiểu chữ kích cỡ dịng tiêu đề Web site cách đơn giản cách thay đổi đặc tả trang đơn xác định hình thức tương ứng
HTML động Microsoft phức tạp Netscape có khả liên kết sở liệu với trang Web để sửa đổi nội dung thực thi Trước có HTML động, điều địi hỏi phải bổ sung mã chương trình chạy ngồi trình duyệt Java hay thành phần ActiveX Mặc dù cơng cụ làm lu mờ khác biệt hai phiên nhà phát triển Web phải cân nhắc định việc có cần bỏ cơng sức lập trình với HTML động hay khơng mà số người dùng hưởng tính cịn hạn chế Chỉ riêng lý số "thần dân" ỏi đủ làm cho HTML động tùy chọn số người dùng nay; 65% trình duyệt phổ biến không hỗ trợ HTML động
(28) hỉ http://www.yahoo.com/Computers_and_Internet/ http://www.microsoft.com/workshop/au l/default.html. hỉ http://home.netscape.com/để http://www.dexnet.com/homesite.html. http://www.netnam.vn http://www.microsoft.com/ms.htm www.microsoft.com Http://www.microsoft.com Http://www.netnam.vn www.vnn.vn www.fpt.vn