HTML - Kiến thức cơ bản
Mục lục
Phần I. Kỹ năng cơ bản 4
1.1 HTML là gì? 4
1.2 Cấu trúc của một file HTML 4
1.2.1. Thẻ (tag) HTML là gì. 4
1.2.2. Cấu trúc của một file HTML. 4
2. Tạo file HTML đầu tiên. 5
3. Hiển thị văn bản ở dạng đậm, nghiêng, gạch chân. 7
4. Sáu mức tiêu đề 8
Tiêu đề cỡ 1 <!-- H1 cỡ 36 --> 8
Tiêu đề cỡ 2 8
Tiêu đề cỡ 3 8
5. Preformatled text 12
6. Thêm một kiểu trình bày cho trang Web của bạn 13
7. Sử dụng các ký tự đặc biệt 14
8.1.Bài học 16
8.2.Thực hành 18
8.3.Thêm một số thuộc tính của tag <img.> 18
9.1.Bài học 19
9.1.b.Sắp xếp tương đối giữa văn bản và hình ảnh 20
9.1.c. Chỉnh lề và sắp xếp văn bản 22
9.2. Thực hành 23
10.1. Liên kết tới một file cục bộ. 24
10.2. Liên kết đến các trang Web khác trên Internet 26
10.4. Tạo các siêu liên kết bằng hình ảnh 27
11.1. Bài học 28
11.2.Thực hành 29
12. Tạo các danh sách 30
12.1. Bài học 30
ace Script. 17.1. Bài học. Text Blocks : Text... Trong đó cols là chiều rộng của vùng văn bản tính theo ký tự. rows : chiều cao vùng văn bản tính theo hàng. Name là thuộc tính để nhận dạng, sử dụng trong Script. Các bạn lưu ý là Text Blocks không bắt đầu bằng tag INPUT. Top of Form Bottom of Form Text Boxes : Trong đó size chỉ chiều dài của Text Boxes. Maxlength, minlength chỉ số ký tự tối đa hay tối thiểu có thể nhập vào. value là giá trị kiểu xâu được hiển thị. Xin hãy cho biết tên của bạn : Top of Form Bottom of Form Password Boxes : Các thuộc tính đều giống với Text Boxes. Chỉ khác là khi bạn nhập dữ liệu thì các ký tự không được hiển thị. Xin hãy cho biết mật mã : Top of Form Bottom of Form Radio Buttons : Lựa chọn value chứa dữ liệu sẽ gửi đến Server khi Radio Button checked. Top of Form lựa chọn 1 lựa chọn 2 Bottom of Form Check Boxes : Lựa chọn Hộp Check Boxes có các thuộc tính thành phần giống như Radio Button. thuộc tính lựa chọn là phần văn bản ghi phía sau nút check box. Top of Form lựa chọn 1 Bottom of Form Top of Form lựa chọn 2 Bottom of Form Menus : Text... Cũng giống như Text Blocks, Menu không bắt đầu từ INPUT mà là SELECT. Thuộc tính multiple cho phép bạn chọn nhiều mục, nếu không có thuộc tính này thì nó sẽ là một menu đẩy xuống. Mỗi lựa chọn của bạn được mô tả bằng các tag OPTION, và bạn có thể ngầm định là nó được chọn bằng thuộc tính selected. Top of Form có multiple không có multiple Bottom of Form Submit and Reset Buttons : Nút Submit là nút để server có thể lấy thông tin từ người sử dụng. Sau khi nhập liệu song, người dùng ấn vào Submit thì mọi thông tin sẽ gửi đến server. Nếu có thông tin sai quy định thì lập tức server sẽ gửi trả lại kèm với thông tin báo lỗi.Còn nút Reset sẽ khởi tạo lại toàn bộ các giá trị của form bằng các giá trị mặc định. Thuộc tính value chứa phần text hiển thị trên nút bấm. Bạn cầm lưu ý nút Reset chỉ khởi động lại các giá trị trong cùng một form mà thôi. Top of Form Bottom of Form Hidden Elements : Hidden Elements được bạn sử dụng để lưu trữ thông tin đã thu được từ form trước đó, do đó nó có thể kết hợp với dữ liệu của form hiện tại.Ví dụ : nếu ở form trước ban đề nghị cho biết tên, bạn có thể lưu lại bởi một biến và thêm nó vào một form mới như là một hidden element, sau đó name sẽ được liên kết thông tin mới thu được mà không cần người dùng nhập lại tên nhiều lần. Các Hidden Elements không bao giờ hiện trên mọi browser đúng với cái tên của nó.Tag này có hai thuộc tính, thuộc tính name là tên của thông tin được lưu trữ, còn value thông tin mà bản thân nó được lưu lại. Active Images : Thuộc tính chứa trong src chỉ ra đường dẫn tới file ảnh trên server.Thuộc tính name cho một tên. Khi người dùng click vào ảnh thì tạo độ x và y của chuột hiện hành sẽ được bổ sung vào trường name này và gửi đến server.Ví Dụ : Giả sử máy chủ muốn biết bạn từ nơi nào đến, nó cho bạn một bản đồ thế giới. Bạn chỉ viếc click lên bản đồ, giả sử bạn sinh ra ở Việt nam thì chỉ việc tìm đúng nước Việt nam và click lên đó. CGI Script : (A Common Gateway Interface Script) Là một chương trình được kích hoạt bởi người sủ dụng bằng cách click lên URL. Nó có thể được viết bằng ngôn ngữ máy tính như C hay Pascal, hoặc được viết bằng Perl hay một chương trình giao tiếp giữa người và máy, và có khả năng thực hiện độc lập. CGI Script được dùng để kích hoạt môt chương trình trên server, lấy thông tin và sau đó thông báo lại cho người sủ dụng. Ví dụ bạn có thể dùng CGI Script để gọi chương trình ngày trên server và thông báo kết quả trên trang web.Ðể tạo một liên kết đến CGI Script bạn hãy dùng tag văn bản liên kết. Trong đó là tên của server chứa CGI Script. CGI-BIN là vị trí của CGI Script trên UNIX server. /path chỉ ra đường dẫn tới cgi-script nếu không tìm thấy trong thư mục cgi-bin chính. đoạn mã này là script tạo ra một trang HTML, nó lấy ngày trên server và chèn vào trang HTML bạn hãy copy toàn bộ đoạn mã trong text block này vào trang web là có thể lấy ngày giờ. 17.2. Thực hành. Sau khi học lý thuyết song, bạn hãy thực tập để nhớ lại các kiến thức đã học. Bạn hãy tạo một form nhập họ tên, nơi ở, mật khẩu và một số thông tin khác như bảng dưới đây. Trong đó form Họ tên, nơi ở dùng text box, form mật khẩu dùng password. giới tính sẽ dùng hai radio button Nam và Nữ, bạn nhớ là chỉ được phép chọn một trong hai mà thôi. Form thành phố sẽ dùng pop-up menu, có các thành phố Hà Nội, Hải Phòng,... cũng chỉ được chọn một nơi ở duy nhất. Cuối cùng là text block Thông tin thêm để người dùng ghi chú thêm nếu cần. Sau khi nhập song, click vào Submit để gửi thông tin đến Server. Chúc bạn thành công. Copyright @ by Value Adder Service Center (VASC). All Rights Reserved.E-mail: i-today@vasc.vnn.vn 18. Multimedia - Nếu bạn có loa, hãy vặn to lên... Các bạn thân mến, một trong những yếu tố không thể thiếu để làm trang web của bạn sinh động hơn và hoàn hảo hơn đó là âm thanh và hình ảnh động. Hiện nay các trình duyệt web có thể nhận dạng được rất nhiều loại âm thanh và hình ảnh khác nhau. Nhưng có một vấn đề là như bạn đã biết, kích thước của các file media rất lớn. một file âm thanh chất lượng tốt có thời gian 10 giây thì kích thước của nó cỡ 200K và để tải xuống phải mất ít nhất là một phút. Phải ngồi chờ đến một phút trên máy chỉ để cố gắng được nghe nhạc thì quả là không thể chấp nhận được, hơn nữa sau khi tải xuống bài hát không hay thì lại càng bực mình hơn. Vì lý do như vậy chúng tôi khuyên các bạn nên lựa chọn các kiểu file thích hợp, có kích thước càng nhỏ càng tốt. Ví dụ như các file âm thanh midi (*.mid) hay file ra (*.ra) mà hiện nay được sử dụng chủ yếu trên mạng, và các file video avi (*.avi)... Trong bài học này các bạn sẽ học cách gọi một file âm thanh và một hoạt cảnh video vào trang web của các bạn. Ðưa âm thanh vào trang web của bạn Xem Video trên trang web Bài học. Sound. Ðể sử dụng một file nhạc làm âm thanh nền ta dùng tag . Tag này không có tag kết thúc. Thuộc tính src chỉ ra đường dẫn đến file âm thanh sound.ext trên server ; Còn thuộc tính Loop cho phép lặp lại nhiều lần nếu muốn, giá trị của nó là một số nguyên, và nếu bằng -1 thì sẽ lặp vô hạn. Tag này được đặt giữa hai tag và Ngay sau khi được truy cập, trang web của bạn sẽ ngay lập tức "chơi" file sound.ext. Bây giờ ta sẽ tạo một liên kết để có thể chơi nhạc. Giả sử khi ta click lên một hình ảnh hay một dòng chữ nào đó thì quá trình chơi nhạc mới bắt đầu. Ta sẽ sử dụng tag sau : text để liên kết . Ví dụ bạn hãy Click vào đây để bắt đầu nghe nhạc. Bạn cũng có thể thay phần text liên kết bằng một file ảnh nào đó nhờ chèn tag vào giữa hai tag và . Khi click vào ảnh thì sẽ bắt đầu chơi nhạc. Video. Tương tự, ta cũng dùng tag liên kết . Với video.ext là tên file hình ảnh trên server, ví dụ "" chẳng hạn. Với cách sử dụng tag trên, bạn phải nghe nhạc bằng trình nghe nhạc của hệ điều hành. Ðể có thể tích hợp và điều khiển quá trình nghe và xem bạn hãy sử dụng tag : . Với tag này, bạn có thể nghe nhạc bất cứ lúc nào, muốn lặp lại hoặc điều khiển đến đoạn nhạc nào tuỳ bạn. Thật là tiện phải không bạn. Ðến đây bạn có thể làm cho trang web của bạn sinh động hơn rồi đấy. Chúc bạn thành công . Copyright @ by Value Adder Service Center (VASC). All Rights Reserved.E-mail: i-today@vasc.vnn.vn 20.1.Bài học Trước khi vào bài học, bạn hãy để ý kỹ một chút trang này, khi bạn scroll để đọc văn bản thì phần đặt hình ảnh và tên bài học vẫn đứng im, không bị di chuyển. Trang Web được trình bày theo kiểu chia thành các phần độc lập với nhau gọi là frame. Bạn có thể chia trang Web thành nhiều phần tuỳ thích, ví dụ : Khi bạn chia trang Web của mình ra bao nhiêu frame thì bạn phải tạo ra bấy nhiêu file HTML để mỗi frame hiển thị một file HTML. Thông thường đoạn mã của một file HTML được chia thành các frame như sau : Tiêu đề trang Web của bạn........Sorry ! Trình duyệt của bạn không hỗ trợ frame Trong đó tag có tác dụng để chỉ ra cách chia frame theo chiều ngang hay chiều dọc. Nếu bạn định phân chia theo chiều dọc thì dùng tag như sau : Với X,Y,..,Z là độ rộng của các frame, bạn có thể cho giá trị là điểm, phần trăm...,ví dụ trong ví dụ cuối cùng bạn thấy có dấu *. Dấu * cho biết trước hết chia cho một frame độ rộng là 170, phần còn lại dành hết cho frame còn lại. Cách làm tương tự đối với trang chia theo chiều ngang. Tag có tác dụng định nghĩa một frame. Frame này sẽ có tên là giá trị của thuộc tính name = "" và hiển thị file HTML có tên là giá trị của thuộc tính src ="" Tag ... dùng để hiển thị thông báo khi trình duyệt của người đọc Web không hỗ trợ frame, ví dụ Sorry ! Trình duyệt của bạn không hỗ trợ frame Ví dụ khi muốn chia một trang Web như sau : bạn phải làm như sau : A More Complex Framed Page This is what someone would see who does not have a webbrowser that can display frames Thông thường, một trang Web được trình bày như sau : trong đó giả sử frame làm menu có tên là menu và frame hiển thị thông tin có tên là display. Khi click lên các siêu liên kết ở frame menu thì nội dung của các trang tương ứng hiện lên frame display, để làm được điều đó, trong file HTML của frame menu bạn đưa thêm tag vào ngay sau tag ... ... Khi bạn không muốn hiển thị border của frame, bạn thêm thuộc tính border = "0" và frameborder = "0" vào tag Trong trình duyệt bạn không muốn thay đổi kích thước của frame, bạn thêm thuộc tính NoResize vào trong tag 20.2.Thực hành Bạn đã học xong cách chia trang Web thành các frame, bây giờ bạn hãy tự mình chia các trang web thành các frame như trong các hình 1,2,3,4,5,6,8. Các bạn thân mến, qua các bài học, các bạn đã nắm được khá vững những khiến thức cơ bản nhất về HTML. Giờ đây bạn có thể xây dựng cho riêng mình một trang web đẹp mắt chẳng kém gì các trang mà bạn thấy trên mạng, ví dụ như xây dựng trang web về gia đình bạn hay một nhóm bạn bè thân thiết của bạn chẳng hạn. Chúc bạn thành công
File đính kèm:
- HTML - Kiến thức cơ bản.doc