tài liệu tổng hợp về thiết kế web

Bài 1 NGÔN NGỮ HTML 2 Bài 2 DANH SÁCH VÀ FORM 16 Bài 3 CASCADING STYLE SHEET (CSS) 24 Bài 4 GIỚI THIỆU JAVASCRIPT 28 Bài 5 CÁC ĐỐI TƯỢNG JAVASCRIPT 41 Bài 6 ĐỐI TƯỢNG SỰ KIỆN 53 Bài 7 LẬP TRÌNH PHP – LẬP TRÌNH PHÍA SERVER 64 Bài 8 THÊM NỘI DUNG ĐỘNG VÀO TRANG HTML 67 Bài 9 HÀM VÀ SỬ DỤNG LẠI MÃ 79 Bài 10 LÀM VIỆC VỚI KIỂU DỮ LIỆU MẢNG 83 Bài 11 LÀM VIỆC VỚI CHUỖI 91 Bài 12 SESSION – COOKIES 98 Bài 13 MySQL 110 Bài 14 TRUY CẬP CƠ SỞ DỮ LIỆU MYSQL TỪ PHP 124 Bài 15 HIỂN THỊ VÀ PHÂN TRANG 128 Bài 16 UPDATE DỮ LIỆU 136 Page 1. Bài 1 NGÔN NGỮ HTML 1.1 Giới Thiệu HTML (Hypertext Markup Language) là một sự định dạng dựa trên ngôn ngữ đánh dấu chuẩn (GML - General Markup Language). Ngôn ngữ GML được tạo ra từ năm 1969, từ ý tưởng đơn giản là tách biệt nội dung và hình dạng của tài liệu. Định dạng của HTML cho phép trình duyệt Web hiển thị các tài liệu, các tài liệu này bao gồm cả Media. Bản thân một tài liệu HTML chỉ là những tập tin văn bản đơn giản (ASCII) với những thẻ (tag) hoặc những dòng mã đặc biệt mà một trình duyệt web biết cách thông dịch và hiển thị trên màn hình. Phần lớn các chuẩn về trình duyệt và các công nghệ liên quan đến Web đều được phát triển bởi World Wide Web Consortium (W3C) - một tổ chức chuẩn độc lập được thành lập vào năm 1994. Ta có thể tìm kiếm các thông tin của W3C và công việc của tổ chức này tại Website: www.w3c.org. Một số nhà phát triển trình duyệt tạo ra một số thẻ khác cho trình duyệt của họ, các thẻ này đôi khi chưa được hỗ trợ bởi các trình duyệt khác, vì lý do này, một trang Web có thể hiển thị rất hiệu quả ở trình duyệt này, nhưng lại rất tồi ở một trình duyệt khác. Do vậy khi thiết kế các trang web, nên hình dung mọi nguờicó thể đang sử dụng một trình duyệt khác với trình duyệt ta đang sử dụng, cần kiểm tra kỹ trước khi đưa trang web lên mạng Internet Một số nhà phát triển trình duyệt tạo ra một số thẻ khác cho trình duyệt của họ, các thẻ này đôi khi chưa được hỗ trợ bởi các trình duyệt khác, vì lý do này, một trang Web có thể hiển thị rất hiệu quả ở trình duyệt này, nhưng lại rất tồi ở một trình duyệt khác. Do vậy khi thiết kế các trang web, nên hình dung mọi nguờicó thể đang sử dụng một trình duyệt khác với trình duyệt ta đang sử dụng, cần kiểm tra kỹ trước khi đưa trang web lên mạng Internet 1.2 Các Thành Phần Của Trang HTML 1.2.1 Thẻ HTML. Khi một trình duyệt web hiển thị một trang HTML, trình duyệt sẽ đọc file HTML này và tìm kiếm những đoạn mã đặc trưng trong file gọi là thẻ (tag). Các thẻ HTML được đánh dấu bởi ký hiệu "< "và ">". Dạng chung của một thẻ HTML là: <tag_name thuộc_tính1="giá trị 1" thuộc_tính2 = "giá trị 2" > Chuỗi văn bản, Media </tag_name> Ví dụ: HTML Thẻ này () báo cho trình duyệt hiển thị đoạn văn bản HTML là chữ in đậm. Các thẻ HTML báo cho trình duyệt biết khi nào thì cần in đậm, in nghiêng văn bản, làm văn bản trở thành HEADER, liên kết đến một trang khác, … - Trong thẻ HTML <tag_name> thì giữa "<" và tag_name phải được viết liền (giữa chúng không có khoảng trắng). - Thông thường một thẻ HTML đều có một thẻ đóng </tag_name>. Trong thẻ đóng có chứa ký tự "/", ký tự này báo cho trình duyệt biết hiệu lực của thẻ này kết thúc tại đây. Hầu hết các thẻ HTML đều có thẻ kết thúc. Page 2. - Mỗi thẻ HTML có thể có một, nhiều hoặc không có thuộc tính. Mỗi thuộc tính có thể có các giá trị hoặc không có các giá trị. Nếu có giá trị thì các giá trị này thường được đặt trong cặp dấu ngoặc kép. - Các thẻ HTML có thể được viết bằng chữ thường hay chữ hoa. Trình duyệt web không phân biệt định dạng này. - Không giống như lập trình trong các ngôn ngữ khác, với trang HTML, nếu có một lỗi, trang Web vẫn được hiển thị mặc dù có thể không đúng ý đồ của nhà thiết kế. - Trình duyệt web có các bộ từ vựng các tag mở, do vậy đôi khi một tag được nhận biết bởi trình duyệt này nhưng lại không được nhận ra bởi trình duyệt khác. Khi trình duyệt không hiểu một tag nào đó, nó sẽ tự động bỏ qua tag đó và chỉ thông dịch phần còn lại. 1.2.2 Cấu Trúc Của Một Trang Tài Liệu HTML Một tài liệu HTML tổng quát được trình bày như sau: <HTML> <HEAD> Nội dung header </HEAD> <BODY> nội dung BODY </BODY> </HTML> - Một tài liệu HTML gồm 2 phần riêng biệt. Phần đầu (HEAD) và phần thân (BODY). Phần đầu chứa những thông tin về tài liệu và không được hiển thị trên màn hình. Phần thân chứa tất cả các thành phần là những thứ được hiển thị như là một phần của trang web. - Toàn bộ công việc để tạo một trang HTML nằm trong cặp thẻ <HTML> và </HTML>. Bên trong cặp thẻ này là cặp thẻ <HEAD></HEAD> và <BODY></BODY>. Trang web của chúng ta có thể vẫn hiển thị tốt mà không cần các thẻ này, tuy nhiên bằng cách sử dụng chúng, trang web của ta sẽ đảm bảo hoàn toàn tương thích với chuẩn quốc tế của HTML và chắc chắn sẽ tương thích với các trình duyệt web khác ở hiện tại cũng như ở tương lai. Đây cũng là một thói quen tốt. - Các chú thích HTML được bao bởi <! và >. Dòng văn bản giữa cặp thẻ này không được hiển thị trong trang web. Khi dịch, trình duyệt sẽ bỏ qua các thành phần nằm trong cặp dấu chú thích <! và >. Việc đặt những chú thích là rất hữu ích đối với các trang web phức tạp. - Trình duyệt web bỏ qua các khoảng trắng đầu dòng, những dòng trống. Do vậy khi viết thẻ HTML, ta có thể canh chỉnh các thẻ, tạo các dòng trống ngăn cách các chú thích, … sao cho dễ quản lý mà không sợ ảnh hưởng đến nội dung, hình thức hiển thị của trang Web. Các chuẩn HTML qui định, mỗi ký tự xuống hàng sẽ được xem như một khoảng trắng. Một chuỗi các ký tự khoảng trắng được xem như một khoảng trắng. - Một trang HTML cơ bản được đặt tên với phần mở rộng là HTM hoặc HTML. Trình duyệt sẽ nhận biết các tài liệu HTML qua các phần mở rộng của file. Page 3. 1.3 Các Thẻ Cơ Bản. 1.3.1 Các Định Dạng Văn Bản. 1.3.1.1 Những Tiêu Đề Những tiêu đề được thực hiện trong HTML bằng cách đặt đoạn văn bản giữa những tsg tiêu đề (heading tag). Dạng các tag tiêu đề của HTML là: <Hx> Text Appear in Heading </Hx> x là một số có giá trị từ 1 đến 6 chỉ định kích cỡ của tiêu đề. Các tiêu đề được sắp xếp từ (quan trọng nhất) đến 6 (ít quan trọng nhất). Các dòng hiển thị các giá trị cho các heading từ 1 đến 6 như sau. a) Mã HTML cho hiển thị trên là: <html> <body> <h1> Heading Level 1</h1> <! Giá trị kích cỡ lớn nhất > <h2> Heading Level 2</h2> <h3> Heading Level 3</h3> <h4> Heading Level 4</h4> <h5> Heading Level 5</h5> <h6> Heading Level 6</h6><! Giá trị kích cỡ nhỏ nhất > </Body> </HTML> Thẻ này có một thuộc tính là align có các giá trị: Left, Right, Center dùng để cách chỉnh văn bản về bên trái, phải, giữa của trình duyệt. Ví dụ <H2 align="center"> Heading 2 - Center </H2> 1.3.1.2 Chia Đoạn Văn Bản Và Xuống Dòng Một trình duyệt web sẽ bỏ qua tất cả các ký tự xuống dòng (carriage returns) được đánh trong trình soạn thảo. Tuy nhiên khi trình duyệt gặp 2 thẻ và nó sẽ xuống dòng để bắt đầu một dòng mới. Sự khác biệt giữa 2 thẻ này là sẽ xuống dòng, sẽ chèn một dòng trống và xuống dòng, hơn nữa thẻ không có thẻ kết thúc trong khi có thể có và thẻ còn có thuộc tính giống như thẻ Heading là align để cho phép canh chỉnh văn bản trong đoạn. Nếu không có thẻ thì đoạn văn bản trong thẻ cũng bị chấm dứt khi gặp thẻ mới. Thẻ còn có một thuộc tính khác là align có các giá trị left (mặc định), center và right cho phép canh chỉnh văn bản trong đoạn trong cửa sổ trình duyệt. Tạo đường kẻ Thẻ <HR> sẽ tạo một đường kẻ ngang qua trang Web. Có hai thuộc tính thường dùng là size và width. Thuộc tính size sẽ xác định kích thước của đường thẳng (tính bằng pixel) với giá trị mặc định là 2 và width kiểm soát chiều rộng đường kẻ. Ta có thể thiết lập giá trị cho WIDTH theo pixel hay theo tỷ lệ % của cửa sổ trình duyệt. Thẻ này không có thẻ kết thúc. Làm việc với các kiểu mẫu (Style) HTML cung cấp một số thẻ cho việc định dạng văn bản như in đậm, nghiêng, … Có thể liệt kê một số thẻ cơ bản như sau: HTML tag Kết quả This is Bold… (vi) This is Bold… Page 4. This is Italic … (vii) This is Italic … <tt> This is Typewriter …</tt> This is Typewriter … This is Underline a. This is Underline Ta cũng có thể kết hợp các tag này để định dạng, miễn chúng được lồng vào nhau một cách chính xác. Ta cũng có thể áp dụng các kiểu mẫu vào trong các tiêu đề. 1.3.1.3 Một Số Thẻ Fortmatting Khác - <Blockquote>: Chèn một khối văn bản được trình bày thụt vào trong so với phần thân văn bản. Theo cách viết truyền thống, một đoạn trích dẫn của ba hay nhiều câu được làm nổi bật hơn so với đoạn văn bản chính bằng cách trình bày như một khối văn bản thụt vào trong (indented block of text). Với trang HTML, đưa văn bản vào cặp thẻ <Blockquote> … text … </Blockquote>để tạo chức năng này. - <Address>: Thông thường trong các trang Web, tại phần cuối (footer) thường có vùng cung cấp thông tin về tác giả và tài liệu. Đoạn văn bản này thường được đặt trong các dòng trong thẻ <address>, khi đó nó sẽ được hiển thị với kiểu chữ in nghiêng. Các thông tin hữu ích cần mô tả ngắn gọn trong footer thường là: Tiêu đề hay chủ đề trang hiện tại. Ngày tạo và ngày cập nhật. Chủ quyền. Tên email, tác giả trang web. Tên và liên kết tới văn bản nguồn gốc tổ chức. - Thẻ <BaseFont>: Ta sử dụng tag này để thiết lập font chữ mặc định cho toàn bộ trang web và không có thẻ kết thúc. Thẻ này có các thuộc tính là face="font chữ", size="kích thước" của chữ. Kích thước văn bản có giá trị từ 1 (nhỏ nhất) đến 7 (lớn nhất). Tất cả các đoạn văn bản không nằm trong thẻ font nào sẽ sử dụng font chữ của thẻ fontbase. Thẻ này cũng chỉ hết hiệu lực khi gặp thẻ fontbase khác.Thẻ này còn có tác dụng tốt trong thiết lập lại kích thước của font chữ theo tính tương đối của thẻ font. - Thẻ : dùng để thiết lập các thuộc tính về font chữ được hiển thị trên trang web. Các thuộc tính của thẻ này bao gồm: size: Kích cỡ của chữ. Giá trị thuộc tính này có giá trị từ 1 (nhỏ nhất) đến 7 (lớn nhất). Ví dụ: . Ngoài cách thiết lập giá trị dạng tuyệt đối cho font chữ như trên, ta còn có thể thiết lập giá trị tương đối bằng cách dựa vào giá trị kích cỡ đã có sẵn trước đó bằng cách thêm dấu "+" (tăng) hoặc "-" (giảm) vào trước giá trị của thuộc tính size. Ví dụ: sẽ tăng kích thước của font chữ lên 2 giá trị so với font chữ hiện tại. Thiết lập thuộc tính dạng tương đối này sẽ rất hữu ích khi ta thay đổi kích thước font chữ so với giá trị trong thẻ basefont. Ví dụ nếu ta muốn tăng kích cỡ font chữ của trang lên 1 đơn vị, ta chỉ cần thay đổi lại giá trị trong thẻ basefont (thường được sử dụng một lần trong một trang) mà không cần thay đổi lại trong tất cả các thẻ font của trang. Face: Tên của font chữ được xác định để hiển thị văn bản trên trình duyệt. Color: Màu sắc của font chữ. Ta sử dụng thuộc tính này khi cần thiết lập màu riêng biệt cho đoạn văn bản trong thẻ font. Thông thường màu văn bản được xác định trong thẻ <body> hoặc sử dụng màu mặc định của trình duyệt. Giá trị của thuộc tính này cũng giống như tất cả các thuộc tính xác định màu sắc khác của trang web, đó là ta có thể sử dụng các màu hằng hoặc các giá trị của hệ màu RGB theo dạng số hexa để thiết lập một màu sắc nhất định. Page 5. Các ví dụ về thẻ font. Ví dụ 1 <html> <body> Font size:4 - color:red - face:vni-times Font size:6 - color: ff0000 - face:arial Font size:2 - color:red - face:vni-times Font size:4 - color:red - face:vni-times </body> </html> Ví dụ 2 <html> <body> <basefont face="vni-times" size=6> Font size=1 Font size=2 Font size=3 Font size=4 Font size=5 Font size=6 Font size=7 chữ Ngoài thẻ font <hr width=50% align=left> <basefont size=4 face="vni-times"> Ngoài thẻ font size=6 ngoài thẻ font size=7 font size=2 </body> </html> - <Pre>: Hiển thị dạng chữ đánh máy và giữ nguyên các khoảng trắng và dấu xuống dòng. - : Văn bản trong thẻ này sẽ được viết dưới dạng Subscript. Đây là văn bản được in hơi thấp hơn dòng chữ thường. - : Văn bản trong thẻ này sẽ được viết dưới dạng Supperscript. Đây là văn bản được in hơi cao hơn dòng chữ thường. - <Big> và : Đoạn văn bản nằm trong thẻ sẽ có font-size dạng chữ lớn hoặc nhỏ tương ứng. - <Marquee>: Văn bản nằm giữa hai thẻ này sẽ chạy qua chạy lại tuỳ theo các giá trị thuộc tính được thiết lập. Một số thuộc tính của Marquee là: Direction: Có giá trị bằng Left hoặc Right là hướng chuyển động của văn bản. ScrollDelay: Giá trị nguyên dương này là số mili giây văn bản ngừng trước khi chuyển động tiếp. Giá trị càng nhỏ, chuyển động càng nhanh. Behavior: Loại chuyển động của text. Scroll, Slide, Alternate Page 6. Align With text: Đoạn văn bản được canh chỉnh trong vùng diện tích của marquee. Có 3 giá trị: Top, Middle, Bottom. Loop: Giá trị nguyên thiết lập số chu kỳ chuyển động của đoạn văn bản. Ví dụ <Marquee align="middle" direction="right" scrolldelay="60"> Chào mừng bạn đã đến website của chúng tôi </Marquee> 1.3.2 Chèn Hình Ảnh Vào Trang HTML Có nhiều hình ảnh được hỗ trợ trên Internet như: *.PICT, *.GIF, *.TIFF, *.BMP, *.JPG, *.JPEG… và các hình ảnh này độc lập với flatform. Tuy nhiên dạng chuẩn hiển thị trong một trang web là GIF (Graphics Interchange Format). GIF nén các thông tin của hình ảnh (làm giảm kích thước của tập tin) và chuyển nó thành mã nhị phân để chuyển qua mạng Internet. Kỹ thuật nén dạng GIF có hiệu quả cao nhất khi hình ảnh có những vùng liên tục cùng màu và việc nén càng lớn khi có sự lặp lại màu theo chiều đứng. Một dạng hình ảnh khác thường hay được sử dụng trong web là JPG hoặc JPEG (được đặt tên sau khi nhóm Joint Photographic Engineering Group thiết kế ra dạng này). Kỹ thuật nén JPEG rất có hiệu quả với các ảnh chụp có màu sắc thay đổi liên tục trong các phần rất nhỏ của ảnh. Tuỳ thuộc vào chất lượng ảnh, JPEG cung cấp các hệ số nén về kích thước rất ấn tượng. - Có nhiều chương trình đồ hoạ có sẵn chức năng lưu trữ tập tin theo dạng tuỳ chọn. Ta nên lưu theo hai loại và so sánh kích thước và chất lượng ảnh để quyết định sử dụng hình này loại nào. Một vài tiện ích cho đồ hoạ cho phép các chuyển đổi này như: GIFConverter, WinGif… - Khi thiết kế trang web có hình, nên lưu ý để trang thiết kế có dung lượng không lớn quá. Dung lượng của trang được tính gộp tất cả các hình chèn vào trang chứ không phải chỉ tính phần văn bản HTML. - Thường khi thiết kế web, ta tạo một thư mục riêng để lưu trữ các hình ảnh cho phép quản lý dễ dàng toàn bộ Web Site. - Để chèn một hình ảnh vào trang web, sử dụng thẻ <IMG >. Thẻ này không có thẻ kết thúc. Trong thẻ này có nhiều thuộc tính như sau: SRC: có giá trị là đường dẫn của file hình ảnh. Đường dẫn này thường được xác định là các đường dẫn tương đối hoặc đường dẫn đầy đủ từ một website khác. Với đường dẫn tương đối, để truy cập đến thư mục cấp cha ta sử dụng hai dấu chấm và dấu xổ :" /". Ví dụ: <IMG SRC="Images/h1.gif"> Chèn hình h1.gif trong thư mục con Images. <IMG SRC=" /Images/h1.gif"> Chèn h1.gif từ thư mục ngang hàng với thư mục hiện hành tên là Images. <IMG SRC="www.microsoft.com/images/h1.gif"> Chèn hình h1.gif trong thư mục images của website có domain là microsoft.com . Các thuộc tính khác: Align: có các giá trị top, middle, bottom (mặc định), left, center, right sẽ điều khiển vị trí của văn bản so với hình ảnh trong hàng. Page 7. Alt="text": là đoạn văn bản hiển thị tại vị trí hình trong các trường hợp: khi người sử dụng trình duyệt không hỗ trợ hình, tắt việc trình bày hình ảnh trong trình duyệt, khi hình chưa được tải xong, Khi đưa con trỏ vào vùng hình ảnh. Width, Height: Có giá trị là các số nguyên, là giá trị xác định chiều rộng và chiều cao của hình theo pixels. Ta có thể đưa các giá trị kích thước này khác với kích thước thật của hình ảnh, tuy nhiên có thể hình ảnh sẽ bị biến dạng hoặc xuất hiện những khối màu ngoài vùng kích thước thật. Thông thường, khi không xác định chiều rộng và chiều cao, trình duyệt sẽ hiển thị một hình ảnh đồ hoạ thay thế mặc định với một kích thước cố định cho đến khi nó tải xuống xong hình ảnh cần hiển thị. Sau đó hình ảnh sẽ được thay đổi đến kích thước của hình chính. Điều này sẽ làm cho nội dung trong cửa sổ được định vị lại. Khi xác định hai thuộc tính này thì trình duyệt dành một chỗ trên màn hình trước khi ảnh được tải xuống. Điều này có thể làm trang web được thể hiện một cách chính xác và nhanh chóng hơn. Hspace: Khoảng cách tính bằng pixel của văn bản xuất hiện xung quanh tới hai biên dọc của hình ảnh. Vspace: Giống như thuộc tính trên nhưng tính theo chiều đứng. Border: thiết lập đường biên cho ảnh tính theo pixel. Nếu không muốn thấy biên, ta cho giá trị bằng 0. 1.3.3 Màu Sắc Và Cấu Trúc Cho Nền - Trong một trình duyệt web, ta được sử dụng các màu của hệ thống để tạo màu cho văn bản và cho nền của trang web. Mỗi màu được xác định dựa trên các giá trị Red- Green-Blue (RGB) của nó. Ba số này có gía trị (viết theo hệ thập phân) từ 0 tới 255, mỗi số thể hiện cường độ của thành phần màu theo thứ tự Red-Green-Blue. Giá trị lớm nhất của cả 3 (255-255-255) sẽ cho ra màu trắng và giá trị nhỏ nhất (0-0-0) sẽ cho ra màu đen. Tất cả các màu được biểu diễn bởi bộ ba RGB khác nhau. - Các màu được thiết lập trong tài liệu HTML bằng các số hexa có dạng #xxyyzz. Trong đó x, y, z là các giá trị từ 0 đến F. xx là giá trị của màu red, yy là của màu Green và zz là màu Blue. - Ta cũng có thể sử dụng các màu hằng số cơ bản được định nghĩa sẵn mà trình duyệt có thể hiểu được như: Blue, Green, Yellow, … - Thẻ BODY cho phép ta thêm vào các thuộc tính về màu sắc của trang web. <Body bgcolor="#xxxxxx" text="#xxxxxx" Link="#xxxxxx" Vlink = "#xxxxxx"> Trong đó mỗi giá trị x có giá trị từ 0 đến F. Bgcolor = màu nền. Text: Màu của văn bản trong phần thân trang web. Link: Màu sắc của các liên kết siêu văn bản. Màu mặc định là Blue. Vlink (Visitted Link): Màu sắc của một mục siêu liên kết đã được xem. Màu mặc định là Purple (tím). Ví dụ: <html> <body bgcolor="Green" text="#FF0000" link="blue" vlink="F0F0F0" > Mau sau trong trang web <a href="#"> link 1 </A> <A href="#">link 2</a> </Body> </HTML> Page 8. Với thẻ BODY, ta còn có thể thay đổi nền trang web bằng một hình ảnh qua thuộc tính background. Ta cũng có thể chèn vào một ảnh nhỏ và trình duyệt sẽ "lợp" các bản sao liên tục các hình này vào trang web. <Body background="h1.gif">. Một số điều cần chú ý: Kích thước hình cần chèn: Nên sử dụng các hình có kích thước càng nhỏ càng tốt. Hãy lựa chọn hình và màu văn bản sao cho có độ tương phản cao. Nếu trong thẻ Body có cả 2 thuộc tính bgcolor và background, khi hình nền trang chưa load xong, trang sẽ có màu bgcolor và màu sẽ chuyển thành hình nền khi trang nạp xong hình. 1.3.4 Sử Dụng Hyperlink - Sức mạnh thật sự của Web là khả năng tạo ra những siêu liên kết (hyperlink) đến các thông tin liên quan. Những thông tin này có thể là những trang Web khác, những hình ảnh, âm thanh, đoạn phim, animation, các chương trình, nội dung của gopher server, một trình log-in vào máy tính ở xa (remote computer), một tập hợp các phần mềm, FTP site. - WWW sử dụng một cách đánh địa chỉ gọi là URL (Uniform Resorce Locator) để chỉ ra những vị trí của những mục như vậy. Những liên kết này thường được biểu diễn bởi những chữ màu xanh có gạch dưới và được gọi là anchor. - Thẻ <A> sẽ dùng để tạo các liên kết và có dạng như sau: <A href=URL target=name> Text link, media </A> Ta có thể xem a là anchor, href là hypertext Reference. - Thuộc tính target: Target có giá trị được thiết lập như trong bảng dưới. Giá trị Ý nghĩa Name Nạp trang Web vào trong cửa sổ hay frame có tên là name. _blank Nạp trang Web vào cửa sổ mới không có tên. _parent Nạp trang web vào cửa sổ cha của trang hiện hành. _self Giá trị mặc định. Nạp trang web vào cửa sổ hiện hành. _top Nạp trang web vào cửa sổ cao nhất. Nếu thiết lập một tên trong target mà chưa được mở (trình duyệt không biết), khi đó trình duyệt sẽ tạo một cửa sổ mới (giống như _blank) để nạp trang liên kết, cửa sổ này được đặt tên là giá trị name mới tạo. Giá trị của của sổ này có ích trong trường hợp sử dụng các mã kích bản như javascript. Các giá trị hằng trong cột giá trị bảng trên phải viết bằng chữ thường. - Thuộc tính href: Đường dẫn của đối tượng được liên kết tới. Các giá trị của URL trong thuộc tính href. Ta có thể phân chia ra làm 2 loại liên kết. Liên kết đến các file trong cùng một website và liên kết đến các file trong website khác. Liên kết trong cùng website: Mọi giá trị URL đều là đường dẫn tương đối (ralative link - đường dẫn tính từ thư mục hiện hành, thư mục chứa liên kết đang soạn thảo) hoặc đường dẫn tính từ Domain. Tuy nhiên thường ít khi sử dụng đường dẫn từ domain name do không thuận tiện vì khi thiết kế ta thường chưa biết được địa chỉ Website chính thức. Khi sử dụng đường dẫn tương đối, với các liên kết tới thư mục cấp cao hơn, ta sử dụng cặp giá trị " /". Page 9. Liên kết đến một file trong Website khác: Ta sử dụng đường dẫn URL tính từ domain name. Liên kết đến một bookmark trong cùng trang hay tơí một bookmark của trang khác: Bookmark là một vị trí được đánh dấu trong trang web. Từ một vị trí, ta có thể liên kết đến vị trí đã được đánh dấu này. Bình thường, khi liên kết tới trang, vị trí đầu tiên của trang sẽ được hiển thị ngay tại phần đầu cửa sổ trình duyệt mặc dù trang cần hiển thị dài hơn vùng cửa sổ. Tuy nhiên, khi ta liên kết đến bookmark, vị trí của bookmark sẽ được hiển thị trong vùng bắt đầu của cửa sổ mặc dù trang có nội dung hiển thị vượt quá vùng cửa sổ trình duyệt. Để liên kết đến bookmark, ta thêm dấu # và tên bookmark ngay sau giá trị của URL. Để tạo một bookmark, ta sử dụng thẻ <A> tại vị trí cần tạo theo qui tắc sau: <A name="tênbookmark">text</A>. Để dễ hình dung, giả sử ta có cây thư mục như hình sau. Cây thư mục này là một Web site có domain là: www.abc.com. Trang f12.htm có nội dung như sau: F12.htm <html> <body> something here. <a name="chapter1"></a> something <a name="chapter2" >chapter2</a> </body> </html> Bảng ví dụ sau sẽ sử dụng thẻ <A> để liên kết đến các thành phần khác. Code HTML Mã trong file Ý nghĩa <A href=”#chapter1”> Chöông 1</A> F12.htm - Liên kết nội đến vị trí có bookmark tên là chapter1 trong cùng trang. <A href=”f12.htm#chapter1”> <IMGsrc=” /images/h1.gif”></A> F11.htm - Liên kết là hình h1.gif đến trang f121.htm tại vị trí bookmark có tên chapter1 trong cùng thư mục. Page 10. [...]... liên kết ngoài có thể được liên kết với số lượng hồ sơ không giới hạn Ví dụ, tập tin có thể tạo bảng kiểu cho toàn bộ Website và liên kết từng trang với bảng kiểu đó Khả năng này rất hữu ích khi tập tin muốn duy trì cách thể hiện, cũng như cách cảm nhận nhất quán trên toàn bộ website Nó cũng rất tiện lợi khi muốn thay đổi cách thể hiện tổng thể của Website 3.6 Tính Thừa Hưởng Trong phần lớn các trang web, ... STYLE="font-size: 36pt">This is modified H2 text. 3.5 Bảng Kiểu Liên Kết Khả năng định dạng được đề cập trong những phần trước không chỉ dừng lại ở mức độ của một trang web đơn mà còn có thể kiểm soát kiểu trên nhiều trang web hay có thể trên toàn bộ website bằng cách sử dụng bảng kiểu liên kết Một bảng kiểu liên kết (hay bảng kiểu bên ngoài) chỉ đơn giản là một tập tin văn bản, bao gồm những... Việc thiết lập giá trị của COLSPAN là 2 làm cho ô trải rộng thêm hai cột; thiết lập giá trị 4 sẽ làm cho ô trải rộng trên 4 cột Trong ví dụ, việc thiết lập giá trị COLSPAN thành 2 làm cho ô tương ứng sẽ có chiều rộng bằng 2 ô trong các hàng kế cận Cũng cần chú ý rằng thuộc tính ALIGN đã được thiết lập để canh giữa nội dung của ô Thuộc tính có 3 giá trị:Left (mặc định), Center và Right Kỹ thuật thiết. .. thể chứa đựng một định dạng chi tiết về nội dung văn bản dưới dạng một trang Web tĩnh Nội dung trang này có thể bao gồm văn bản đã định dạng, ảnh, bảng biểu và các siêu liên kết để tạo ra một phương tiện trình bày thông tin một cách ấn tượng Tuy nhiên, ngoài sự tương tác mức độ thấp của các siêu liên kết bằng cách đưa người sử dụng đi từ trang Web này đến trang Web khác Nói chung HTML không cho phép... Nhân 2 số Chia 2 số, kết quả trả về một số thực Lấy phần dư của hai số Tăng một số lên 1 đơn vị Giảm một số xuống 1 đơn vị Ví dụ Kết quả A=x+y; B=y + z; A= x – y; A= x*y A=14 B = ”4ab” A=6 A = 40 A = x/y A = 2.5 A = x%y x++ x A = 2; (dư 2) x = 11 x= 9 Page 31 Logic ! < Kết hợp > = == != += -= *= /= %= Toán tử not, đảo ngược giá trị của biến logic Toán tử so sánh nhỏ hơn Trả về giá trị true nếu... Một thuộc tính khác là Start (mặc định là 1) được gán các giá trị nguyên sẽ xác định giá trị xuất phát của con số hay chữ cái Đoạn mã kế sau minh hoạ thuộc tính TYPE cũng như việc trộn lẫn các thẻ và Kết quả thể hiện của đoạn mã này trong hình Bằng cách kết hợp các danh sách có thứ tự và danh sách không có thứ tự và bằng cách sử dụng thuộc tính TYPE, ta có thể trình bày các thông tin phân... reset: Type = Reset Sử dụng xóa form về trạng thái ban đầu Các thuộc tính khác giống submit Nút button: Một nút hình dạng giống submit nhưng không có hành động nào khi click vào Nó thường được sử dụng trong kết hợp với javascript để bắt các sự kiện và thực thi một số hành động nào đó Các thuộc tính khác giống submit 2.2.2.3 Textarea Giống text box, dùng để nhập liệu nhưng nhập được trên nhiều hàng... Thẻ này có thẻ đóng và có cú pháp như sau: Thuộc tính: cols, rows: Kích thước textarea 2.2.2.4 Listbox Chọn dữ liệu từ danh sách đã có Thẻ: Kết hợp 2 thẻ và Mỗi thẻ option là một lựa chọn Thành phần dữ liệu trong thuộc tính value của thẻ option sẽ được gửi theo form, cón thành phần giữa hai thẻ mở và đóng của option là thành phần được thấy bởi người... Liên kết đến trang chủ của máy chủ Microsoft Trang web được nạp vào cửa sổ mới - Hiển thị cửa sổ tải tập tin theo giao thức fpt - Hiển thị trình soạn thảo thư để gửi tới địa chỉ xác định trong href 1.3.5 Frame Bằng cách dùng frame (khung), ta có thể ngắt trang web thành các vùng riêng biệt (cửa sổ) và thể hiện các tập tin HTML khác nhau trong mỗi vùng Với cách này, mỗi vùng có thể chuyển sang trang web. .. được sử dụng cẩn thận, khung có thể cải tiến đáng kể về khả năng di chuyển và phong cách website của ta 1.3.6 Tables Một trang web được tổ chức tốt sẽ dễ dàng thu hút người đọc và giúp họ dễ dàng tìm kiếm thông tin mà họ muốn Các bảng và khung là những công cụ có giá trị cho việc tổ chức thông tin Với bảng, ta có thể chia các phần khác nhau của trang web thành các vùng và đặt các thông tin khác nhau vào . biệt nội dung và hình dạng của tài liệu. Định dạng của HTML cho phép trình duyệt Web hiển thị các tài liệu, các tài liệu này bao gồm cả Media. Bản thân một tài liệu HTML chỉ là những tập tin. Trang Tài Liệu HTML Một tài liệu HTML tổng quát được trình bày như sau: <HTML> <HEAD> Nội dung header </HEAD> <BODY> nội dung BODY </BODY> </HTML> - Một tài liệu. Ta có thể phân chia ra làm 2 loại liên kết. Liên kết đến các file trong cùng một website và liên kết đến các file trong website khác. Liên kết trong cùng website: Mọi giá trị URL đều là đường

Định dạng
Số trang	143
Dung lượng	1,91 MB