Bài giảng lập trình web chương 1 ths nguyễn minh vi

Hyper Text Markup Language ThS Nguyễn Minh Vi BM Tin học – ĐH An Giang Giới thiệu  HTML:  ngôn ngữ đánh dấu siêu văn  biểu diễn nội dung hình thức trang web tập thẻ  Soạn thảo tài liệu HTML:  Notepad, Notepad++, …  Frontpage, Dreamwaver, …  Hiển thị tài liệu HTML: trình duyệt (web browser)  Firefox, Chrome, IE, Netscape, Opera, … Tập tin HTML  Cấu trúc tập tin HTML Phần tiêu đề Phần nội dung Tập tin HTML – ví dụ Thẻ HTML  Thẻ HTML:  bao dấu  thường gồm cặp thẻ mở thẻ đóng, số thẻ có thẻ mở  Cấu trúc thẻ HTML Nội dung thẻ  Ví dụ: Xin chào! Thẻ HTML – phần tử  Mỗi phần tử HTML phần thẻ mở đến kết thúc thẻ đóng, vd: Xin chào!  Một số phần tử có thẻ mở, thẻ đóng, nội dung, vd:  Các phần tử đặt lồng vào nhau, vd: Xin chào! Thẻ HTML – thuộc tính  Mỗi phần tử HTML có nhiều thuộc tính, để mô tả thêm thông tin cho  thuộc tính đặt thẻ mở  có giá trị kèm (nên đặt cặp dấu “ ”) …  Các thuộc tính chung Thuộc tính Mô tả class Tên lớp phần tử id Định danh phần tử style Định kiểu inline style cho phần tử title Thông tin bổ sung cho phần tử (tool tip) Hyper Text Markup Language CÁC THẺ CƠ BẢN ThS Nguyễn Minh Vi BM Tin học – ĐH An Giang Các thẻ  Tiêu đề  Ví dụ: Tiêu Tiêu Tiêu Tiêu Tiêu Tiêu … đề đề đề đề đề đề <h1> <h2> <h3> <h4> <h5> <h6> Các thẻ Đoạn  Ngắt dòng   Ví dụ: Đây đoạn văn đặt thẻ <p> Đây đoạn văn có ngắt dòng thẻ <br/> Ví dụ form Form Thẻ chứa phần tử nhập liệu bên  Thuộc tính   id/name: tên form  action: nơi nhận liệu gởi (submit) từ form để xử lý  method: phương thức truyền liệu (POST GET) Form Phương thức truyền liệu  GET  đối số ghi kèm theo đường dẫn URL  khối lượng liệu truyền bị giới hạn  POST  đối số truyền ngầm  khối lượng liệu truyền không bị giới hạn Một số thành phần Form radio select (combobox /listbox) checkbox text Button (submit/reset /…) textarea Phần tử input Thẻ gồm nhiều loại phần tử nhập  Thuộc tính         name tên phần tử type kiểu phần tử value giá trị size kích thước phần tử maxlength độ dài tối đa (text) checked chọn (radio, checkbox) src nguồn ảnh (image) Phần tử input  Giá trị thuộc tính type:       text password hidden file checkbox radio     submit reset image button Phần tử textarea  Thẻ tạo ô nhập nhiều dòng  Thuộc tính     cols rows value readonly số cột số dòng giá trị đọc Phần tử select  Thẻ tạo danh sách lựa chọn dạng combobox listbox  size hiển thị thu gọn nhiều dòng  multiple cho phép chọn nhiều  Nhóm lựa chọn  label  nhãn nhóm Lựa chọn  value giá trị  selected chọn Phần tử button  Thẻ tạo dạng nút nhấn (tương tự loại nút nhấn tạo thẻ input)  Thuộc tính  value  type giá trị loại nút Nhãn  Thẻ gán nhãn cho phần tử  for  gán nhãn cho (tên) phần tử Thẻ tạo khung nhóm nhiều phần tử  nhãn khung Điều khiển phần tử form Các thuộc tính  tabindex  accesskey  disabled thứ tự tab phím tắt vô hiệu hóa Hyper Text Markup Language FRAME ThS Nguyễn Minh Vi BM Tin học – ĐH An Giang Frame Frame chia cửa sổ trình duyệt thành nhiều khung nhỏ  Mỗi khung hiển thị trang web riêng biệt  Một tập tin HTML có sử dụng khung thay cho phần  Frameset Thẻ chia cửa sổ trình duyệt theo chiều dọc ngang  Thuộc tính   rows: chia thành dòng  cols: chia thành cột  Độ cao (/ rộng) dòng (/ cột) tính pixel theo tỉ lệ  VD: cột đầu có độ rộng 200 pixel, cột thứ hai chiếm độ rộng lại Frame  Thẻ mô tả khung  Thuộc tính     name: tên khung src: tài liệu ban đầu chứa khung noresize: không cho thay đổi kích thước scrolling: qui định cuộn (auto/yes/no)  frameborder: viền khung (0/1) [...]... trúc website  Phân cấp  trang chủ liên kết với nhiều trang khác  là cách trình bày phổ biến nhất Cấu trúc website  Nối tiếp:  trình bày thông tin theo dạng tuần tự, liên tục  thích hợp khi trình bày các chương, các nội dung nối tiếp Cấu trúc website  Lưới, mạng  cấu trúc phức tạp  chỉ phù hợp cho đọc giả có kinh nghiệm, có sẵn kiến thức về hệ thống Hyper Text Markup Language HÌNH ẢNH ThS Nguyễn. .. b.htm web/ a.htm b.htm web/ b.htm Ví dụ  Đường dẫn tương đối b.htm web/ a.htm thumuc2/b.htm web/ thumuc2/b.htm Ví dụ  Đường dẫn tương đối b.htm web/ thumuc1/a.htm /b.htm web/ b.htm Liên kết  Liên kết đến... size: noshade: canh lề độ rộng (dài) độ dày không bóng Hyper Text Markup Language LIÊN KẾT ThS Nguyễn Minh Vi BM Tin học – ĐH An Giang Liên kết (Hyperlink)  Các loại liên kết  Liên kết trong: liên kết đến các phần trong cùng tài liệu hoặc trong cùng một website  Liên kết ngoài: liên kết đến các trang trên website khác  Liên kết email  Đường dẫn URL: protocol://site/path/filename#bookmark  tương... nguồn ảnh title: chú thích ảnh width, height: độ rộng, độ cao hiển thị border: đường vi n Hình ảnh Ảnh nền:  thuộc tính background background="url_ảnh"  thuộc tính bgproperties bgproperties=“fixed"  VD chèn ảnh nền cho trang Hyper Text Markup Language LAYOUT ThS Nguyễn Minh Vi BM Tin học – ĐH An Giang Ví dụ layout Bảng Các thẻ  Bảng  Dòng Ô  Tiêu đề... kinh nghiệm, có sẵn kiến thức về hệ thống Hyper Text Markup Language HÌNH ẢNH ThS Nguyễn Minh Vi BM Tin học – ĐH An Giang Hình ảnh  Các định dạng ảnh hiển thị được trên trình duyệt  GIF (Graphics Interchange Format)  JPG (Joint Photographic Exper Group)  PNG (Portable Network Graphics)  Khi sử dụng ảnh trên trang web cần cân nhắc giữa  chất lượng ảnh  dung lượng ảnh Hình ảnh Chèn ảnh:  thẻ ... Minh Vi BM Tin học – ĐH An Giang Ví dụ layout Bảng Các thẻ  Bảng  Dòng Ô  Tiêu đề Bảng Thuộc tính  cellspacing: khoảng cách giữa các ô  cellpadding: khoảng cách vi n và text độ dày đường vi n  border: độ rộng bảng / ô  width: ghép cột  colspan:  rowspan: ghép dòng ...Danh sách  Danh sách:  có thứ tự: • thuộc tính type: 1, A, a, I, i, … • thuộc tính start: số bắt đầu  không thứ tự: • thuộc tính type: disc, circle, square  định nghĩa: Danh sách  Ví dụ Danh sách có thứ tự HTML ... THẺ CƠ BẢN ThS Nguyễn Minh Vi BM Tin học – ĐH An Giang Các thẻ  Tiêu đề  Ví dụ: Tiêu Tiêu Tiêu Tiêu Tiêu Tiêu … đề đề đề đề đề đề <h1> <h2>... thiết lập kiểu định dạng cho phần tử  Chi tiết định dạng kiểu trình bày chương sau (CSS) Hyper Text Markup Language FORM ThS Nguyễn Minh Vi BM Tin học – ĐH An Giang Form   Form vùng trang Web. .. trúc website  Phân cấp  trang chủ liên kết với nhiều trang khác  cách trình bày phổ biến Cấu trúc website  Nối tiếp:  trình bày thông tin theo dạng tuần tự, liên tục  thích hợp trình bày chương,