Jump to content

Welcome to [ iT ] Forums
Register now to gain access to all of our features. Once registered and logged in, you will be able to create topics, post replies to existing threads, give reputation to your fellow members, get your own private messenger, post status updates, manage your profile and so much more. If you already have an account, login here - otherwise create an account for free today!
Hình ảnh

Thiết kế WEB HTML Đơn Giản

- - - - -

  • Chủ Đề Đã Khóa Chủ đề này đã được khóa
35 replies to this topic

#1
utbinh

utbinh

    Trung cấp CSTH

  • Advance Member
  • PipPipPip
  • 500 Bài Viết:
NGÀY 12.8.2006 :
1và2: HTML1 Đơn Giản
Posted Image
http://utbinh.com/bai1128/HTML1.jpg
http://utbinh.com/bai1128/HTML1.doc
DOC 1657 KB – JPG 1540 KB



3.HTML2 Đơn Giản :
Posted Image
http://utbinh.com/bai3128/HTML2.jpg
http://utbinh.com/bai3128/HTML2.doc
DOC 485 KB – JPG 527 KB
Kết Quả Thực Tập :
http://utbinh.com/BAI2.html

Do các bài trước mất hết utbinh upload lại cho các bạn xem bằng HOST mới

#2
utbinh

utbinh

    Trung cấp CSTH

  • Advance Member
  • PipPipPip
  • 500 Bài Viết:
NGÀY 12.8.2006:
4.HTML Nhập Ký Hiệu vào TEXT
Posted Image
http://utbinh.com/bai4128/HTML3.jpg
http://utbinh.com/bai4128/HTML.doc
DOC 468 KB – 496 KB
Kết Quả thực Tập :
http://utbinh.com//HTML3.html

#3
utbinh

utbinh

    Trung cấp CSTH

  • Advance Member
  • PipPipPip
  • 500 Bài Viết:
NGÀY 13.8.2006 :
5.HTML4 Ôn lại 3 bài Trước
Posted Image
http://utbinh.com/AU.../bai5/HTML4.jpg
http://utbinh.com/AU.../bai5/HTML4.doc
DOC 444 KB – JPG 662 KB
Kết quả thực tập :
http://utbinh.com/AUGUST/HTML4.html

#4
™—†—†—™

™—†—†—™

    Thành viên mới

  • Newbies
  • 6 Bài Viết:
chao pro
cam on anh da post bai nay
em lam duoc cai link này ròi nè
http://www.freewebto.../TRANGWEB2.html
Nhung em ko the bien thành mot duong link khac duoc
vi du nhu cua anh ro rang link cung co chũ freewebtown kia
sao lai thành link nhu the này duoc :
http://utbinh.com/BAI2.html
vay anh co the giup em bien duong link cua em là
http://www.freewebto.../TRANGWEB2.html
thanh mot duong link khac khong
và có thể mac dinh no duoi dang mot dùong link ảo khac duoc ko ??
giup em voi nhe
nick chat cua em là [email protected]
Neu anh giup em nhièu thì gui mail cho em
khong thi tra loi tren dien dan này cung duoc em se vao xem
cam on anh truoc nhe

#5
utbinh

utbinh

    Trung cấp CSTH

  • Advance Member
  • PipPipPip
  • 500 Bài Viết:
NGÀY 23.8.2006:
7.Trang Web HTML có Font Tiếng VIỆT
Posted Image
http://utbinh.com/AU...i7/fontviet.jpg
http://utbinh.com/AU...i7/fontviet.doc
DOC 516 KB – JPG 576 KB
Kết QuẢ Thực Tập :
Mời xem Trang Web HTML có Font Tiếng VIỆT :
http://utbinh.com/AUGUST/nguyensa.html

#6
utbinh

utbinh

    Trung cấp CSTH

  • Advance Member
  • PipPipPip
  • 500 Bài Viết:
NGÀY 24.8.2006 :
7.Trang WEB HTML Đơn Giản
Posted Image
http://utbinh.com/AU...i7B/dongian.jpg
http://utbinh.com/AU...i7B/dongian.doc
DOC 450 KB – JPG 794 KB.
Kết Quả Thực Tập :
http://utbinh.com/AUGUST/test.html

#7
utbinh

utbinh

    Trung cấp CSTH

  • Advance Member
  • PipPipPip
  • 500 Bài Viết:
NGÀY 25.8.2006 :
9.Thiết Kế Trang Web HTML Đơn Giản 2
Posted Image
http://utbinh.com/AU...9B/dongian2.jpg
http://utbinh.com/AU...9B/dongian2.doc
DOC 694 KB – JPG 1050 KB
Kết quả Thực Tập :
http://utbinh.com/AUGUST/test1.html

#8
utbinh

utbinh

    Trung cấp CSTH

  • Advance Member
  • PipPipPip
  • 500 Bài Viết:
NGÀY 26.8.2006:
10.ĐƠN GIẢN 3
Posted Image
http://utbinh.com/AU...0B/dongian3.jpg
http://utbinh.com/AU...0B/dongian3.doc
DOC 876 KB – JPG 1946 KB.
Kết Quả Thực Tập :
http://utbinh.com/AUGUST/bommuc.html
http://utbinh.com/AU.../mautieude.html

NGÀY 25.8.2006 :
8.Màu NỀN – Màu Chữ - Font Chữ - Size Chữ.
Posted Image
http://utbinh.com/AU...B/maunenchu.jpg
http://utbinh.com/AU...B/maunenchu.doc
DOC 219 KB – JPG 880 KB
NGÀY 25.8.2006 :
9.Thiết Kế Trang Web HTML Đơn Giản 2
Posted Image
http://utbinh.com/AU...9B/dongian2.jpg
http://utbinh.com/AU...9B/dongian2.doc
DOC 694 KB – JPG 1050 KB
Kết quả Thực Tập :
http://utbinh.com/AUGUST/test1.html

#9
utbinh

utbinh

    Trung cấp CSTH

  • Advance Member
  • PipPipPip
  • 500 Bài Viết:
Ngày 26.8.2006:
11.Ảnh Trong Trang Web HTML
Posted Image
http://utbinh.com/AU...i11B/anhweb.jpg
http://utbinh.com/AU...i11B/anhweb.doc
Doc 271 KB – JPG 327 KB
Kết Quả Thực Tập :
http://utbinh.com/AUGUST/bai11B/1.html

#10
utbinh

utbinh

    Trung cấp CSTH

  • Advance Member
  • PipPipPip
  • 500 Bài Viết:
NGÀY 27.8.2006 :
12.ẢNH 2 trong Trang Web HTML
Posted Image
http://utbinh.com/AU...bai12B/anh2.jpg
http://utbinh.com/AU...bai12B/anh2.doc
DOC 245 KB – JPG 431 KB.
Kết quả thực tập :
http://utbinh.com/AUGUST/1.HTML
NGÀY 27.8.2006 :
13.Hyperlink Liên Kết
Posted Image
http://utbinh.com/AU...13B/lienket.jpg
http://utbinh.com/AU...13B/lienket.doc
DOC 161 KB – JPG 331 KB
Kết Quả Thực Tập :
http://utbinh.com/AUGUST/bai13B/2.html

#11
utbinh

utbinh

    Trung cấp CSTH

  • Advance Member
  • PipPipPip
  • 500 Bài Viết:
13 bài `THIẾT KẾ WEB HTML

BÀI 14 ngày 27.8.2006
Theo KS ĐẬU QUANG TUẤN – DỈA SSDG – KS NGUYỄN NAM THUẬN
13 Bài Thiết Kế Web HTML utbinh biên soạn từ 29.7.2006 đến 27.8.2006, đang tiếp tục soạn :

Giữ CTRL + Nhấp lên các Text dưới đây sẽ link đến trang Web chứa Text nầy :

1.Thiet ke WEB HTML.doc
2.Tho hanmactu.doc
3.HTML2 don gian.doc
4.HTML3 Nhap ky hieu vao TEXT.doc
5.HTML4 Tong hop 3 bai.doc
6.Trang Web html Font Tieng VIET.doc
7.Trang HTML đơn giản.doc
8.Nen,Chu,Font,Size.doc
9.Don Gian 2.doc
10.Don Gian 3.doc
11.Anh Web HTML.doc
12.Anh 2.doc
13.Hyperlink Lien Ket.doc

Giữ CTRL + Nhấp lên LINK sau đây :

http://utbinh.com/AUGUST/HTML1/1.doc
http://utbinh.com/AUGUST/HTML1/2.doc
http://utbinh.com/AUGUST/HTML1/3.doc
http://utbinh.com/AUGUST/HTML1/4.doc
http://utbinh.com/AUGUST/HTML1/5.doc
http://utbinh.com/AUGUST/HTML1/6.doc
http://utbinh.com/AUGUST/HTML1/7.doc
http://utbinh.com/AUGUST/HTML1/8.doc
http://utbinh.com/AUGUST/HTML1/9.doc
http://utbinh.com/AUGUST/HTML1/10.doc
http://utbinh.com/AUGUST/HTML1/11.doc
http://utbinh.com/AUGUST/HTML1/12.doc
http://utbinh.com/AUGUST/HTML1/13.doc


I. Bàn về HTML:

1) Hypertext Markup Language ( HTML ) là ngôn ngữ cơ bản của Web. Bạn nhập vào trang web một số Mã (Code). Trình duyệt trình bày cho bạn 1 trang Web dựa vào những gì mà Mã code yêu cầu nó hiển thị và cách họat động.
2) Có một chuẩn chính thức cho HTML. Đó là 1 tập hợp qui tắc xác định chính xác các ngôn ngữ được sử dụng và họat động. Chuẩn này được thiết lập bởi 1 số tổ chức phi lợi nhuận được gọi là Word Wide Web Consortium, gọi tắt là W3C. Bạn xem nó trong http://www.w3.org/TR/html401/ (H1)
Site này chứa tòan bộ thông số kĩ thuật HTML chính thức miễn phí trên Web. Thông số kĩ thuật này trình bày chi tiết cách họat động của mọi thẻ và tính năng HTML
3) MicroSoft Front Page tạo nhiều thẻ vốn chỉ có thể được xem thích hợp trong Internet Explorer. Có khi Internet Explorer và Netscape Navigator cùng 1 trang Web nhưng hiển thị khác nhau mặc dù 2 trình duyệt này đều sử dụng thẻ HTML theo chuẩn W3C
4) Vậy bất cứ khi nào có thể, hãy sử dụng chuẩn HTML khi tạo web. Bạn nên xem trang web của bạn trên cùng 2 trình duyệt trên để biết khách của bạn xem trang web của bạn hiển thị ra sao. Bạn có thể kiểm tra trang web của bạn trong trình duyệt Opera và FireFox.

II. Sử dụng các thẻ HTML:

Bạn muốn trình duyệ hiểu được trang web mà bạn đang tạo bạn phải tuân theo những qui tắc.
1) Thẻ TAG:
Trung tâm của những qui tắc và cốt lõi của HTML là các thẻ TAG. Bản thân các thẻ không hiển thị. Notepad là 1 công cụ tốt để học HTML cơ bản.
2) Lưu File :
Khi đặt tên cho 1 File phần mở rộng ( dạng, đuôi của nó ) là htm hoặc html.
Khi có đuôi dạng này, một trình duyệt web như Internet Explorer chẳng hạn, nhận biết rằng đó là trang Web. Nếu không cho phần mở rộng htm hay html, bạn không thể xem được File này trong 1 trình duyệt khi nó nằm trong dĩa cứng. Trong Notepad mặc định là txt> chọn All Files > chọn htm hoặc html.
3) Bắt đầu thẻ: <B> gọi là thẻ mở </B> thẻ kết thúc
• < : dấu ngoặc trái
• Tag Thẻ: đặt giữa
• > : dấu ngoặc phải
• Không có khỏang trống trong 2 dấu ngoặc.
• Các thẻ đứng trước Text mà chúng ảnh hưởng đến
• Có thể gõ chữ hoa hay chữ thường. Nên sử dụng chữ thường vì khi bạn tạo web nâng cao XHTML bạn phải sử dụng các chữ thường.
• Thẻ mở: vốn cho 1 trình duyệt biết cách hiển thị Text hoặc 1 phần tử trên 1 trang web
• <B> Nhập nội dung Text mà bạn muốn đậm </B>
• </B> Để yêu cầu trình duyệt ngưng hiển thị </B>. Thẻ này gọi là thẻ kết thúc
4) Xem trang: Nhấp lên File html mà bạn đã lưu để xem kết quả.

#12
utbinh

utbinh

    Trung cấp CSTH

  • Advance Member
  • PipPipPip
  • 500 Bài Viết:
NGÀY 28.8.2006 :
15.Liên Kết Yahoo , Email , Hình.
Posted Image
http://utbinh.com/AU...15B/linket2.jpg
http://utbinh.com/AU...5B/lienket2.doc
DOC 200 KB – JPG 488 KB.
Kết Quả Thực Tập :
http://utbinh.com/AUGUST/lienket.html

#13
utbinh

utbinh

    Trung cấp CSTH

  • Advance Member
  • PipPipPip
  • 500 Bài Viết:
Ngày 28.8.2006 :
16.Lắp Ghép Các Trang Web HTML
Posted Image
http://utbinh.com/SE...i16/lapghep.jpg
http://utbinh.com/SE...i16/lapghep.doc
DOC 191 KB – JPG 316 KB
Kết Quả Thực Tập :
http://utbinh.com/SE...16/lapghep.html

#14
utbinh

utbinh

    Trung cấp CSTH

  • Advance Member
  • PipPipPip
  • 500 Bài Viết:
NGÀY 28.8.2006 :
17.FRAMESET Trong HTML
Posted Image
http://utbinh.com/SE...17/frameset.jpg
http://utbinh.com/SE...17/frameset.doc
DOC 395 KB – JPG 695 KB
Kết QuẢ Thực Tập :
http://utbinh.com/SE...7/FRAMESET.html
http://utbinh.com/SE.../KHUNGTRAI.html
NGÀY 29.8.2006 :
18.Nhạc nền Trong HTML
Posted Image
http://utbinh.com/SE...i18/nhacnen.jpg
http://utbinh.com/SE...i18/nhacnen.doc
DOC 1046 KB – JPG 1136 KB
Kết Quả Thực Tập :
Tên Tác Giả bên Trái
http://utbinh.com/SE...i18/GHINHO.html
Tên tác Giả bên Phải :
http://utbinh.com/SE...18/GHINHO2.html
Xuống hàng từng Dong chữ :
http://utbinh.com/SE...18/GHINHO3.html
Kẻ một đường ngang :
http://utbinh.com/SE...18/GHINHO4.html
Nhấp Lên nghe Đàm Vĩnh Hưng hát nhạc MP3 :
http://utbinh.com/SE...18/GHINHO5.html
Nhấp lên nghe Nhạc MIDI : 10 Năm Tình Cũ :
http://utbinh.com/SE...18/GHINHO6.html
Trang Web có Nhạc nền :
http://utbinh.com/SE...18/GHINHO7.html

#15
utbinh

utbinh

    Trung cấp CSTH

  • Advance Member
  • PipPipPip
  • 500 Bài Viết:
NGÀY 29.8.2006 :
19.Tạo File Ghost trong HTML
Posted Image
http://utbinh.com/SE...bai19/ghost.jpg
http://utbinh.com/SE...bai19/ghost.doc
DOC 775 KB – JPG 1033 KB
Kết Quả Thực Tập :\
http://utbinh.com/SE...ai19/ghost.html
Ngày 20.8.2006 :
20. Cú Pháp Trong HTML
Posted Image
http://utbinh.com/SE...ai20/cuphap.jpg
http://utbinh.com/SE...ai20/cuphap.doc
DOC 923 KB – JPG 1136 KB
Kết Quả Thực Tập :
http://utbinh.com/SE...i20/cuphap.html

#16
utbinh

utbinh

    Trung cấp CSTH

  • Advance Member
  • PipPipPip
  • 500 Bài Viết:
NGÀY 4.9.2006 :
21.Tạo Table 1 trong Thiết Kế Web HTML
Posted Image
http://utbinh.com/SE...ai21/table1.jpg
http://utbinh.com/SE...ai21/table1.doc
DOC 1517 KB – JPG 3431 KB
Kết Quả Thực Tập :
http://utbinh.com/SE...i21/table1.html
NGÀY 5.9.2006 :
22.TẠO TABLE 2
Posted Image
http://utbinh.com/SE...bai22/text2.jpg
http://utbinh.com/SE...bai22/text2.doc
DOC 235 KB – JPG 1749 KB
Kết Quả Thực Tập ::
http://utbinh.com/SE...ai22/text2.html
NGÀY 5.9.2006 :
23.TABLE 3
Posted Image
http://utbinh.com/SE...ai23/table3.jpg
http://utbinh.com/SE...ai23/table3.doc
DOC 700 KB – JPG 2191 KB
Kết Quả Thực Tập :
http://utbinh.com/SE...i23/table3.html





NGÀY 5.9.2006 :
23.TABLE 3
Posted Image
http://utbinh.com/SE...ai23/table3.jpg
http://utbinh.com/SE...ai23/table3.doc
DOC 700 KB – JPG 2191 KB
Kết Quả Thực Tập :
http://utbinh.com/SE...i23/table3.html

#17
utbinh

utbinh

    Trung cấp CSTH

  • Advance Member
  • PipPipPip
  • 500 Bài Viết:
NGÀY 5.9.2006 :
24.Kích Thước Table
Posted Image
http://utbinh.com/SE...ai24/table4.jpg
http://utbinh.com/SE...ai24/table4.doc
DOC 305 KB – JPG 1368 KB .
Kết Quả Thực Tập :
http://utbinh.com/SE...i24/table4.html

#18
utbinh

utbinh

    Trung cấp CSTH

  • Advance Member
  • PipPipPip
  • 500 Bài Viết:
Ngày 6.9.2006:
25.Table 5 Nền và Khoảng Cách
Posted Image
http://utbinh.com/SE...ai25/table5.jpg
http://utbinh.com/SE...ai25/table5.doc
DOC 585 KB – JPG 1256 KB
Kết Quả Thực Tập :
http://utbinh.com/SE...i25/table5.html

#19
utbinh

utbinh

    Trung cấp CSTH

  • Advance Member
  • PipPipPip
  • 500 Bài Viết:
NGÀY 8.9.2006 :
26.Video trong HTML
Posted Image
http://utbinh.com/SE...bai26/video.jpg
http://utbinh.com/SE...bai26/video.doc
DOC 542 KB – JPG 2609 KB
Tài Liệu : CÁCH SỬ DỤNG CÁC TAG :
http://utbinh.com/SE...sudungtable.doc
Kết Quả Thực Tập :
http://utbinh.com/SE...ai26/video.html
http://utbinh.com/SE...i26/video1.html
http://utbinh.com/SE...i26/video2.html


CÁCH SỬ DỤNG CÁC TABLE TRONG HTML
Chuẩn HTML :
http://www.w3.org/TR/html401/
Học HTML : http://www.w3.org/MarkUp/
http://24hourhtmlcaf...tags.htm#hour15
HyperText Markup Language (HTML) Tag Reference
HTML tags are the standard codes used to indicate text formatting, links between documents, and placement of images or other media on Web pages. For example, placing the <H1> tag in front of some text, and the </H1> tag after the text makes it appear as a large heading on the page. Attributes are commands added to the tags to specify various options. For example, <H1 ALIGN="CENTER"> causes the heading to be centered on the page.
Hour 1: Understanding HTML and the Web
(No HTML tags covered in Hour 1.)
Hour 2: Create a Web Page Right Now
Tags View Hour 2 Examples

<HTML>...</HTML> Encloses the entire HTML document.
<HEAD>...</HEAD> Encloses the head of the HTML document.
<TITLE>...</TITLE> Indicates the title of the document. Used within <HEAD>.
<BODY>...</BODY> Encloses the body of the HTML document.
<P>...</P> A paragraph. The closing tag (</P>) is optional.
<BR> A line break.
<HR> A horizontal rule line.
<H1>...</H1> A first-level heading.
<H2>...</H2> A second-level heading.
<H3>...</H3> A third-level heading.
<H4>...</H4> A fourth-level heading (seldom used).
<H5>...</H5> A fifth-level heading (seldom used).
<H6>...</H6> A sixth-level heading (seldom used).
Hour 3: Linking to Other Web Pages
Tags and Attributes View Hour 3 Examples

<A>...</A> Wth the HREF attribute, creates a link to another document or anchor.
HREF="..." The address of the document and/or anchor point to link to.
Hour 4: Publishing Your HTML Pages
(No HTML Tags Covered in Hour 4.)
Hour 5: Text Alignment, Lists, and Special Characters
Tags and Attributes View Hour 5 Examples

<DIV>...</DIV> A region of text to be formatted.
ALIGN="..." Align text to CENTER, LEFT, or RIGHT. (May also be used with <P>, <H1>, <H2>, <H3>, etc.)
<OL>...</OL> An ordered (numbered) list.
TYPE="..." The type of numerals used to label the list. Possible values are A, a, I, i, 1.
START="..." The value with which to start this list.
<UL>...</UL> An unordered (bulleted) list.
TYPE="..." The bullet dingbat used to mark list items. Possible values are DISC, CIRCLE, and SQUARE.
<LI> A list item for use with <OL> or <UL>.
TYPE="..." The type of bullet or number used to label this item. Possible values are DISC, CIRCLE, SQUARE, A, a, I, i, 1.
VALUE="..." The numeric value this list item should have (affects this item and all below it in <OL> lists).
<DL>...</DL> A definition list. (May also be used for any kind of intendation.)
<DT> A definition term, as part of a definition list.
<DD> The corresponding definition to a definition term, as part of a definition list.
Hour 6: Advanced Text Formatting and Links
Tags and Attributes View Hour 6 Examples

<EM>...</EM> Emphasis (usually italic).
<STRONG>...</STRONG> Stronger emphasis (usually bold).
<B>...</B> Boldface text.
<I>...</I> Italic text.
<TT>...</TT> Typewriter (monospaced) font.
<PRE>...</PRE> Preformatted text (Exact line endings and spacing will be preserved. Usually rendered in a monospaced font).
<BIG>...</BIG> Text is slightly larger than normal.
<SMALL>...</SMALL> Text is slightly smaller than normal.
<SUB>...</SUB> Subscript.
<SUP>...</SUP> Superscript.
<STRIKE>...</STRIKE> Puts a strikethrough line in text.
<FONT>...</FONT> Controls the appearance of the enclosed text.
SIZE="..." The size of the font, from 1 to 7. Default is 3. Can also be specified as a value relative to the current size; for example, +2 or -1.
COLOR="..." Changes the color of the text.
FACE="..." Name of font to use if it can be found on the user's system. Multiple font names can be separated by commas, and the first font on the list that can be found will be used.
<BASEFONT> Sets the default size of the font for the current page.
SIZE="..." The default size of the font, from 1 to 7.
<A>...</A> With the HREF attribute, creates a link to another document or anchor; with the NAME attribute, creates an anchor that can be linked to.
HREF="..." The address of the document and/or anchor point to link to.
NAME="..." The name for this anchor point in the document.
Hour 7: Creating HTML Forms
Tags and Attributes View Hour 7 Examples

<FORM>...</FORM> Indicates an input form.
ACTION="..." The address of the script to process this form input.
METHOD="..." How the form input will be sent to the server. Normally set to POST, rather than GET.
<INPUT> An input element for a form.
TYPE="..." The type for this input widget. Possible values are CHECKBOX, HIDDEN, RADIO, RESET, SUBMIT, TEXT, or IMAGE.
NAME="..." The name of this item, as passed to the script.
VALUE="..." For a text or hidden item, the default value; for a checkbox or radio button, the value to be submitted with the form; for Reset or Submit buttons, the label for the button itself.
SRC="..." The source file for an image.
CHECKED For checkboxes and radio buttons, indicates that this item is checked.
SIZE="..." The width, in characters, of a text input region.
MAXLENGTH="..." The maximum number of characters that can be entered into a text region.
ALIGN="..." For images in forms, determines how the text and image will align (same as with the <IMG> tag; see Hour 9).

<TEXTAREA>...</TEXTAREA> Indicates a multiline text entry form element. Default text can be included.
NAME="..." The name to be passed to the script.
ROWS="..." The number of rows this text area displays.
COLS="..." The number of columns (characters) this text area displays.
<SELECT>...</SELECT> Creates a menu or scrolling list of possible items.
NAME="..." The name that is passed to the script.
SIZE="..." The number of elements to display. If SIZE is indicated, the selection becomes a scrolling list. If no SIZE is given, the selection is a pop-up menu.
MULTIPLE Allows multiple selections from the list.
<OPTION> Indicates a possible item within a <SELECT> element.
SELECTED With this attribute included, the <OPTION> will be selected by default in the list.
VALUE="..." The value to submit if this <OPTION> is selected when the form is submitted.
Hour 8: Creating Your Own Web Page Graphics
(No HTML tags covered in Hour 8.)
Hour 9: Putting Graphics on a Web Page
Tags and Attributes View Hour 9 Examples

<IMG> Displays a graphics image on the page.
SRC="..." The address or file name of the image.
ALT="..." A text message that may be displayed in place of the image.
ALIGN="..." Determines the alignment of the given image. If LEFT or RIGHT, the image is aligned to the left or right column, and all following text flows beside that image. All other values, such as TOP, MIDDLE, BOTTOM, ABSMIDDLE, or ABSBOTTOM, determine the vertical alignment of this image with other items in the same line.
Hour 10: Custom Backgrounds and Colors
Tags and Attributes View Hour 10 Examples

<BODY>...</BODY> Encloses the body (text and tags) of the HTML document.
BACKGROUND="..." The name or address of the image to tile on the page background.
BGCOLOR="..." The color of the page background.
TEXT="..." The color of the page's text.
LINK="..." The color of unfollowed links.
ALINK="..." The color of activated links.
VLINK="..." The color of followed links.
Hour 11: Creating Animated Graphics
(No HTML tags covered in Hour 11.)
Hour 12: Page Design and Layout
Tags and Attributes View Hour 12 Examples

<IMG> Inserts an inline image into the document.
SRC="..." The address of the image.
ALIGN="..." Determines the alignment of the given image (see also Hour 9).

VSPACE="..." The space between the image and the text above or below it.
HSPACE="..." The space between the image and the text to its left or right.
WIDTH="..." The width, in pixels, of the image. If WIDTH is not the actual width, the image is scaled to fit.
HEIGHT="..." The width, in pixels, of the image. If HEIGHT is not the actual height, the image is scaled to fit.
BORDER="..." Draws a border of the specified value in pixels to be drawn around the image. In case the images are also links, BORDER changes the size of the default link border.
<BR> A line break.
CLEAR="..." Causes the text to stop flowing around any images. Possible values are RIGHT, LEFT, ALL.
Hour 13: Graphical Links and Image Maps
Tags and Attributes View Hour 13 Examples

<IMG> Inserts an image into the document.
ISMAP This image is a clickable image map.
SRC="..." The URL of the image.
USEMAP="..." The name of an image map specification for client-side image mapping. Used with <MAP> and <AREA>.
<MAP>...</MAP> A client-side image map, referenced by <IMG USEMAP="...">. Includes one or more <AREA> tags.
<AREA> Defines a clickable link within a client-side image map.
SHAPE="..." The shape of the clickable area. Currently, RECT, POLY, and CIRCLE (or ROUND) are the valid options.
COORDS="..." The left, top, right, and bottom coordinates of the clickable region within an image.
HREF="..." The URL that should be loaded when the area is clicked.
Hour 14: Advanced Layout with Tables
Tags and Attributes View Hour 14 Examples

<TABLE>...</TABLE> Creates a table that can contain any number of rows (<TR> tags).
BORDER="..." Indicates the width in pixels of the table borders. (BORDER=0, or omitting the BORDER attribute, makes borders invisible.)
CELLSPACING="..." The amount of space between the cells in the table.
CELLPADDING="..." The amount of space between the edges of the cell and its contents.
WIDTH="..." The width of the table on the page, in either exact pixel values or as a percentage of page width.
BGCOLOR="..." Background color of all cells in the table that do not contain their own BACKGROUND or BGCOLOR attribute.
BACKGROUND="..." Background image to tile within all cells in the table that do not contain their own BACKGROUND or BGCOLOR attribute (Microsoft Internet Explorer only).
<TR>...</TR> Defines a table row, containing one or more cells (<TD> tags).
ALIGN="..." The horizontal alignment of the contents of the cells within this row. Possible values are LEFT, RIGHT, and CENTER.
VALIGN="..." The vertical alignment of the contents of the cells within this row. Possible values are TOP, MIDDLE, and BOTTOM.
BGCOLOR="..." Background color of all cells in the row that do not contain their own BACKGROUND or BGCOLOR attributes.
BACKGROUND="..." Background image to tile within all cells in the row that do not contain their own BACKGROUND or BGCOLOR attributes. (Microsoft Internet Explorer only)
<TD>...</TD> Defines a table data cell.
ALIGN="..." The horizontal alignment of the contents of the cell. Possible values are LEFT, RIGHT, and CENTER.
VALIGN="..." The vertical alignment of the contents of the cell. Possible values are TOP, MIDDLE, and BOTTOM.
ROWSPAN="..." The number of rows this cell will span.
COLSPAN="..." The number of columns this cell will span.
WIDTH="..." The width of this column of cells, in exact pixel values or as a percentage of the table width.
BGCOLOR="..." Background color of the cell.
BACKGROUND="..." Background image to tile within the cell. (Microsoft Internet Explorer only)
<TH>...</TH> Defines a table heading cell. (Takes all the same attributes as <TD>.)
Hour 15: Using Style Sheets
Tags and Attributes View Hour 15 Examples

<STYLE>...</STYLE> Allows an internal style sheet to be included within a document. Used between <HEAD> and </HEAD>.
<LINK> Links to an external style sheet (or other document type). Used in the <HEAD> section of the document.
HREF="..." The address of the style sheet.
TYPE="..." The Internet content type (always "text/css" for a style sheet).
REL="..." The link type (always "stylesheet" for style sheets).
<SPAN>...</SPAN> Does nothing at all, except provide a place to put STYLE or other attributes. (Similar to <DIV>...</DIV>, but does not cause a line break.)
STYLE="..." Includes inline style specifications. (Can be used in <SPAN>, <DIV>, <BODY> and most other HTML tags.)
Hour 16: Embedding Multimedia in Web Pages
Tags and Attributes View Hour 16 Examples

<EMBED> Embeds a file to be read or displayed by a Netscape plug-in or helper application. (This tag is supported by both Microsoft and Netscape browsers, but is not part of the official HTML standard.)
SRC="..." The URL of the file to embed.
WIDTH="..." The width of the embedded object in pixels.
HEIGHT="..." The height of the embedded object in pixels.
ALIGN="..." Determines the alignment of the media window. Values are the same as for the <IMG> tag.
VSPACE="..." The space between the media and the text above or below it.
HSPACE="..." The space between the media and the text to its left or right.
BORDER="..." Draws a border of the specified size in pixels around the media.
<NOEMBED>...</NOEMBED> Alternate text or images to be shown to users who do not have a plug-in installed or are using browsers that don't recognize the <EMBED> tag. (Not part of the official HTML standard.)
<OBJECT>...</OBJECT> Inserts images, videos, Java applets, ActiveX controls, or other objects into a document. (See Hour 17 for attributes.)

Hour 17: Interactive Pages with Applets and ActiveX
Tags and Attributes View Hour 17 Examples

<APPLET> Inserts a self-running Java applet. (In addition to the standard attributes below, you can specify applet-specific attributes to be interpreted by the Java applet itself.)
CLASS="..." The name of the applet.
SRC="..." The URL of the directory where the compiled applet can be found (should end in a slash / as in "http://mysite/myapplets/"). Do not include the actual applet name, which is specified with the CLASS attribute.
ALIGN="..." Indicates how the applet should be aligned with any text that follows it. Current values are TOP, MIDDLE, and BOTTOM.
WIDTH="..." The width of the applet output area in pixels.
HEIGHT="..." The height of the applet output area in pixels.
<PARAM> Program-specific parameters. (Always occurs within <APPLET> or <OBJECT> tags.)
NAME="..." The type of information being given to the applet or ActiveX control.
VALUE="..." The actual information to be given to the applet or ActiveX control.
<OBJECT>...</OBJECT> Inserts images, videos, Java applets, or ActiveX OLE controls into a document.
CLASSID="..." The address of a Java Applet or identification code for an ActiveX program.
ID="..." Gives an identifying name for a Microsoft ActiveX program (Microsoft only).
DATA="..." May be used in some situations to tell an applet or program where to find some data that it needs.
TYPE="..." May indicate the type of data referred to by a DATA attribute.
STANDBY="..." Lets you specify a text message to be displayed while an applet or program object is being loaded and initialized.
Hour 18: Web Page Scripting for Non-Programmers
Hour 19: Setting Pages in Motion with Dynamic HTML
Tags and Attributes View Hour 18 Examples
View Hour 19 Examples

<script>...</SCRIPT> Contains client-side scripts that are executed by the browser.
LANGUAGE="..." The scripting language (most commonly "JavaScript").
SRC="..." The address of an external script file, if the script is not included in the Web page itself.
<!-- ... --> Encloses comments which will not appear on the Web page when viewed with a browser, but can be read by anyone who examines the HTML source code. To include comments in a JavaScript script, put // at the beginning of each comment line. In style sheets, start comments with /* and end them with */. (Include one <!-- tag just after a <script> or <STYLE> tag, with a --> tag just before the matching </SCRIPT> or </STYLE>, to hide the script or style commands from older browsers.)
<BUTTON>...</BUTTON> Creates a programmable button within a <FORM>.The label for the button, which can include both text and images, goes between the <BUTTON> and </BUTTON> tags. (Microsoft Internet Explorer 4.0 only; for compatibility with Netscape Navigator 4.0, use the <INPUT> tag from Hour 7.)

TYPE="..." The type of button. The types RESET and SUBMIT work the same as with the <INPUT> tag. The type BUTTON is used for buttons that only carry out JavaScript commands.
Hour 20: Multi-page Layout with Frames
Tags and Attributes View Hour 20 Examples

<FRAMESET>...</FRAMESET> Divides the main window into a set of frames that can each display a separate document.
ROWS="..." Splits the window or frameset vertically into a number of rows specified by a number (such as 7), a percentage of the total window width (such as 25%), or as an asterisk (*) indicating that a frame should take up all the remaining space, or divide the space evenly between frames (if multiple * frames are specified).
COLS="..." Works similar to ROWS, except that the window or frameset is split horizontally into columns.
FRAMESPACING="..." Space between frames, in pixels (Microsoft Internet Explorer 3.0 only).
FRAMEBORDER="..." Specifies whether to display a border for the frames. Options are YES and NO. (Microsoft Internet Explorer 3.0 only.)
BORDER="..." Size of the frame borders in pixels (Netscape Navigator only.)
<FRAME> Defines a single frame within a <FRAMESET>.
SRC="..." The URL of the document to be displayed in this frame.
NAME="..." A name to be used for targeting this frame with the TARGET attribute in <A HREF> links.
MARGINWIDTH="..." The amount of space (in pixels) to leave to the left and right side of a document within a frame.
MARGINHEIGHT="..." The amount of space (in pixels) to leave above and below a document within a frame.
SCROLLING="..." Determines whether a frame has scrollbars. Possible values are YES, NO, and AUTO.
NORESIZE Prevents the user from resizing this frame (and possibly adjacent frames) with the mouse.
<NOFRAMES>...</NOFRAMES> Provides an alternative document body in <FRAMESET> documents for browsers that do not support frames (usually encloses <BODY>...</BODY>).
<IFRAME>...</IFRAME> Creates an inline frame. Currently only works in Microsoft Internet Explorer version 3.0 or higher. (<IFRAME> accepts all the same attributes as <FRAME>.)
Hour 21: Organizing and Managing a Web Site
(No HTML tags covered in Hour 21.)
Hour 22: Helping People Find Your Web Pages
Tags and Attributes View Hour 22 Examples

<META> Used in the document <HEAD> to indicate meta-information about this document (information about the document itself). Most commonly used to make a page automatically load another page, or reload itself. Also used to provide a description and keyword hints to search engines.
HTTP-EQUIV="..." Gives a command to the Web browser or server. For example, HTTP-EQUIV="Refresh" will cause a new page to load automatically.
NAME="..." Can be used to specify which type of information about the document is in the CONTENT attribute. For example, NAME="description" means a brief description of the page is in CONTENT, and NAME="keywords" means that a comma-separated list of keywords related to the page is in CONTENT.
CONTENT="..." The actual message or value for the information specified in HTTP-EQUIV or NAME. For example, if HTTP-EQUIV="Refresh" then CONTENT should be the number of seconds to wait, followed by a semi-colon and the address of the page to load.
<BASE> Indicates the full URL of the current document. This optional tag is used within <HEAD>.
HREF="..." The full URL of this document.
Hour 23: Using XML to Describe Data
(No HTML tags covered in Hour 23.)
Hour 24: Planning for the Future of HTML
(No HTML tags covered in Hour 24.)
Hour 23:
Using XML to Describe Data
This hour you will learn what a metalanguage is and the basic structure of an XML metalanguage file, including how to use XML to specify rules that data must follow. Finally, you'll see how to extract data from an XML file and display it in a Web page.
(No HTML tags covered in Hour 23.)
Example Pages Shown in the Book
A First XML File(Figures 23.1 - 23.3)
Like HTML, an XML file is constructed with tags. But in XML, the tags describe the structure of a language for communicating formatted information.

Reading XML Data(Figure 23.4)
This HTML contains JavaScript to read the data from the firstxml.xml file above. (Note that since the JavaScript does all the work, the actual body of the HTML document is empty.)

Key Quote from This Hour
"Unlike the predefined tag names in HTML, user-defined tag names in XML have no intrinsic meaning. XML is not used to describe how information is to be presented in a display. The XHTML rules mentioned throughout the first 22 hours also apply to XML files. While is certainly an indication of good sense to use XHTML, it is not necessary to use it to display an XML file."
Next Hour: Planning for the Future of HTML
Hour 24:
Planning for the Future of HTML
This hour provides a bird's-eye view of the future of HTML, and offers some advice for planning and constructing Web pages today that will continue to serve you well into the future.
(No HTML tags or example Web pages in Hour 24.)
What You Can Do Today
To Be Ready for Tomorrow
Here are some of the factors you should consider when planning and building your Web site today so that it will also serve you well tomorrow:
• Whenever you run into something that you'd like to do on a Web page, but can't with HTML as it stands today, include a comment in the page so you can add that feature when it becomes possible in the future.
• When you design your pages, don't assume that everyone who sees them will be using a computer. Televisions, video-telephones, game consoles, and many other devices might have access to them as well. Some of these devices have very low resolution screens (with as few as 320 by 200 pixels).
• As older Web browsers fall out of general use, you will be able to layer images and text on top of each other more reliably. Always keep copies of each individual image element that goes into a larger graphic, without any text. This will let you easily optimize the graphics later without recreating everything from scratch.
• Study basic typography now, if you aren't familiar with it. As style sheets gain wider use, understanding and working with things such as leading, kerning, em-spaces, and drop caps will soon be essential for producing truly professional-quality Web pages.
• The potential of JavaScript and other Web page scripting languages is currently hobbled by incompatible and buggy implementations. This is changing, however, and learning basic scripting now will put you one step ahead.
Key Quote from This Hour
"There are tens of millions of pages of information written in standard HTML, and even as that standard evolves, tomorrow's Web browsers and business software will retain the capability to view today's Web pages.Some of the most exciting applications of HTML, however, are still rapidly developing... Your best two sources for the latest HTML standards (and proposed future standards) are the World Wide Web Consortium site and the HTML Compendium. To see how the standards are actually implemented in the latest Web browsers, and to see what nonstandard HTML extensions might be available, visit the Microsoft and Netscape Web sites. You can also get copies of the latest Web browser updates from these two Web sites."
Additional Online Examples
Be sure to visit the list of Hot HTML Learning Resources Online, the Instant HTML Quick-Reference Pages, and our Reader Feedback area.

#20
utbinh

utbinh

    Trung cấp CSTH

  • Advance Member
  • PipPipPip
  • 500 Bài Viết:
URL 27 BÀI THIẾT KẾ WEB HTML của utbinh soạn từ 29.7.2006 đến 8.9.2006

http://utbinh.com/AUGUST/HTML1/1.doc
Kết quả thực tập thiết kế trang Web HTML :
http://www.freewebto.../TRANGWEB1.HTML
http://utbinh.com/AUGUST/HTML1/2.doc
Kết quả thực tập :
http://utbinh.com/thohanmactu.html
http://utbinh.com/AUGUST/HTML1/3.doc
Kết Quả Thực Tập :
http://utbinh.com/BAI2.html
http://utbinh.com/AUGUST/HTML1/4.doc
Kết Quả thực Tập :
http://utbinh.com//HTML3.html
http://utbinh.com/AUGUST/HTML1/5.doc
Kết quả thực tập :
http://utbinh.com/AUGUST/HTML4.html
http://utbinh.com/AUGUST/HTML1/6.doc
http://utbinh.com/AUGUST/HTML1/7.doc
Kết QuẢ Thực Tập :
Mời xem Trang Web HTML có Font Tiếng VIỆT :
http://utbinh.com/AUGUST/nguyensa.html
Kết Quả Thực Tập :
http://utbinh.com/AUGUST/test.html
http://utbinh.com/AUGUST/HTML1/8.doc
http://utbinh.com/AUGUST/HTML1/9.doc
Kết quả Thực Tập :
http://utbinh.com/AUGUST/test1.html
http://utbinh.com/AUGUST/HTML1/10.doc
Kết Quả Thực Tập :
http://utbinh.com/AUGUST/bommuc.html
http://utbinh.com/AU.../mautieude.html
http://utbinh.com/AUGUST/HTML1/11.doc
Kết Quả Thực Tập :
http://utbinh.com/AUGUST/bai11B/1.html
http://utbinh.com/AUGUST/HTML1/12.doc
Kết quả thực tập :
http://utbinh.com/AUGUST/1.HTML
http://utbinh.com/AUGUST/HTML1/13.doc
Kết Quả Thực Tập :
http://utbinh.com/AUGUST/bai13B/2.html
http://utbinh.com/AU...5B/lienket2.doc
Kết Quả Thực Tập :
http://utbinh.com/AUGUST/lienket.html
http://utbinh.com/SE...i16/lapghep.doc
Kết Quả Thực Tập :
http://utbinh.com/SE...16/lapghep.html
http://utbinh.com/SE...17/frameset.doc
Kết QuẢ Thực Tập :
http://utbinh.com/SE...7/FRAMESET.html
http://utbinh.com/SE.../KHUNGTRAI.html
http://utbinh.com/SE...i18/nhacnen.doc
Kết Quả Thực Tập :
Tên Tác Giả bên Trái
http://utbinh.com/SE...i18/GHINHO.html
Tên tác Giả bên Phải :
http://utbinh.com/SE...18/GHINHO2.html
Xuống hàng từng Dong chữ :
http://utbinh.com/SE...18/GHINHO3.html
Kẻ một đường ngang :
http://utbinh.com/SE...18/GHINHO4.html
Nhấp Lên nghe Đàm Vĩnh Hưng hát nhạc MP3 :
http://utbinh.com/SE...18/GHINHO5.html
Nhấp lên nghe Nhạc MIDI : 10 Năm Tình Cũ :
http://utbinh.com/SE...18/GHINHO6.html
Trang Web có Nhạc nền :
http://utbinh.com/SE...18/GHINHO7.html
http://utbinh.com/SE...bai19/ghost.doc
Kết Quả Thực Tập :\
http://utbinh.com/SE...ai19/ghost.html
http://utbinh.com/SE...ai20/cuphap.doc
Kết Quả Thực Tập :
http://utbinh.com/SE...i20/cuphap.html
http://utbinh.com/SE...ai21/table1.doc
Kết Quả Thực Tập :
http://utbinh.com/SE...i21/table1.html
http://utbinh.com/SE...bai22/text2.doc
Kết Quả Thực Tập ::
http://utbinh.com/SE...ai22/text2.html
http://utbinh.com/SE...ai23/table3.doc
Kết Quả Thực Tập :
http://utbinh.com/SE...i23/table3.html
http://utbinh.com/SE...ai24/table4.doc
Kết Quả Thực Tập :
http://utbinh.com/SE...i24/table4.html
http://utbinh.com/SE...ai25/table5.doc
Kết Quả Thực Tập :
http://utbinh.com/SE...i25/table5.html
http://utbinh.com/SE...bai26/video.doc
Tài Liệu : CÁCH SỬ DỤNG CÁC TAG :
http://utbinh.com/SE...sudungtable.doc
Kết Quả Thực Tập :
http://utbinh.com/SE...ai26/video.html
http://utbinh.com/SE...i26/video1.html
http://utbinh.com/SE...i26/video2.html




special thanks to our all time users for being with us

Calvin Music

Close [X]