bài giảng học phần thiết kế lập trình web chương 2 - gv. trần minh hùng

5/10/2013 Trường Cao đẳng Phát – Truyền hình II NỘI DUNG CHƯƠNG II NGÔN NGỮ HTML        NỘI DUNG        Giới thiệu HTML Thẻ (tag) HTML Bảng biểu Form Khung (Frame) Đa phương tiện Một số thẻ meta thông dụng Giới thiệu HTML Thẻ (tag) HTML Bảng biểu Form Khung (Frame) Đa phương tiện Một số thẻ meta thông dụng Giới thiệu HTML   HTML gì? Đặc điểm 5/10/2013 Giới thiệu   HTML = HyperText Markup Language – Ngôn ngữ đánh dấu siêu văn – Ngôn ngữ để viết trang web Do Tim Berner Lee phát minh W3C (World Wide Web Consortium) đưa thành chuẩn năm 1994 NỘI DUNG        Giới thiệu Thẻ (tag) Bảng biểu Form Khung (Frame) Đa phương tiện Một số thẻ meta thông dụng Đặc điểm    HTML sử dụng thẻ (tags) để định dạng liệu HTML không phân biệt chữ hoa, chữ thường Các trình duyệt thường khơng báo lỗi cú pháp HTML Nếu viết sai cú pháp dẫn đến kết hiển thị không với dự định Thẻ (tag)         Thẻ (tag) Thuộc tính (property) thẻ Trang web Thẻ định dạng ký tự Tiêu đề, đoạn văn, ngắt dòng Danh sách Chèn ảnh Siêu liên kết (Hyperlink) 5/10/2013 Thẻ (tag)    Có nhiều thẻ, thẻ có tên mang ý nghĩa khác Có loại thẻ: thẻ đóng thẻ mở  Cách viết thẻ:  Thẻ mở: Ví dụ: ,

, …  Thẻ đóng tương ứng: Ví dụ: ,

Chú ý: ln có thẻ mở khơng có thẻ đóng tương ứng Ví dụ: khơng có thẻ đóng Trang web    Trang HTML có phần mở rộng (đi) HTM HTML Có thể tạo trang HTML trình soạn thảo “văn thuần” (Notepad, EditPlus, Notepad++, Turbo Pascal,…) Có nhiều trình soạn thảo HTML cho phép NSD soạn thảo trực quan, kết sinh HTML tương ứng như:  Microsoft FrontPage  Macromedia Dreamweaver  … Thuộc tính (property) thẻ     Một thẻ có thuộc tính nhằm bổ sung tác dụng cho thẻ Mỗi thuộc tính có tên thuộc tính (tên_TT) Viết thẻ có thuộc tính: Chú ý:    Có thể thay đổi thứ tự, số lượng thuộc tính mà khơng gây lỗi cú pháp Sự hỗ trợ thẻ, thuộc tính trình duyệt khác Chỉ giống thẻ, thuộc tính Thẻ đóng thẻ có thuộc tính viết bình thường () Trang web  Soạn thảo:   Mở trình soạn thảo văn (VD Notepad) gõ ND Ghi lại với tên “CHAO.HTM” Chao hoi Chào mừng lớp 10CĐTH đến với HTML ! 5/10/2013 Trang web    Thử nghiệm:  Mở trình duyệt web (IE)  Vào File/Open, chọn file CHAO.HTM vừa ghi  Nhấn OK → Có kết hình bên Thay đổi:  Quay lại Notepad, sửa lại nội dung trang web ghi lại  Chuyển sang IE, nhấn nút Refresh (F5) → thấy kết Ghi chú: Các thẻ nêu mặc định đặt phần … Giải thích   BODY Thẻ sử dụng để xác định phần nội dung tài liệu – phần thân (body) tài liệu Trong phần thân chứa thông tin định dạng định để đặt ảnh cho tài liệu, màu nền, màu văn siêu liên kết, đặt lề cho trang tài liệu Những thông tin đặt phần tham số thẻ Các thuộc tính  BACKGROUND: ảnh  BGCOLOR: màu  TEXT: màu văn  ALINK,VLINK, LINK: màu sắc liên kết Giải thích  HTML  Cặp thẻ sử dụng để xác nhận tài liệu tài liệu HTML, tức có sử dụng thẻ HTML để trình bày Tồn nội dung tài liệu đặt cặp thẻ Trình duyệt xem tài liệu khơng sử dụng thẻ tập tin văn bình thường HEAD  Thẻ HEAD dùng để xác định phần mở đầu cho tài liệu TITLE     Cặp thẻ sử dụng phần mở dầu tài liệu, tức phải nằm thẻ phạm vi giới hạn cặp thẻ Lưu ý soạn thảo văn   Văn soạn thảo bình thường file HTML Lưu ý:  Mọi khoảng trống, dấu xuống dòng HTML thể trang web khoảng trống Để gõ số ký tự đặc biệt ta phải sử dụng mã:  • • • • • Khoảng trống (trong trường hợp muốn có nhiều ký tự trống):   Dấu nhỏ (): < > Dấu ngoặc kép (“): " Dấu (&): & Ký hiệu ©: © … Ghi HTML: •  5/10/2013 Bài tập  Viết trang web hiển thị xác dịng sau lên hình: Thẻ định dạng ký tự     Tiêu đề, đoạn văn, ngắt dòng  Tiêu đề: với kích thước nhỏ dần …  …  … Sau tiêu đề, văn tự động xuống dòng  Thuộc tính:  align=“cách chỉnh lề”: left, right, center, justify Đoạn văn:

…

 Thuộc tính:  align tương tự Ngắt dòng:    Đậm, nghiêng, gạch chân: …, …, … Chỉ số trên:… Chỉ số dưới: … Font chữ: …  Thuộc tính:  face=“tên font chữ”  size=“kích thước”  color=“màu”  Viết tên tiếng Anh (red, blue,…)  Viết dạng #RRGGBB, RR, GG, BB dạng hexa  Ví dụ: #FFFFFF: Trắng, #FF0000: đỏ,… Bài tập  Dùng HTML tạo trang web cho kết sau: 5/10/2013 Danh sách     Dùng để liệt kê phần tử Chèn ảnh  Có loại: Danh sách có thứ tự 1,2,3,… (Ordered List) khơng có thứ tự (Unordered List) Một danh sách gồm có nhiều phần tử Tạo danh sách:  Có thứ tự:

Các phần tử

 Khơng có thứ tự:

Các phần tử

 Tạo phần tử:

Tiêu đề phần tử

 Thẻ , khơng có thẻ đóng Các thuộc tính:  src=“địa ảnh”: Nếu chèn ảnh web site nên sử dụng đường dẫn tương đối  alt=“chú thích cho ảnh”: hiển thị trình duyệt khơng ảnh ảnh lỗi di chuyển chuột lên ảnh  width=“rộng”, height=“cao”: độ rộng độ cao ảnh: • n: (n số) Quy định độ rộng, cao n pixels • n%: Quy định độ rộng, cao n% độ rộng, cao đối tượng chứa ảnh  border=“n”: n số: kích thước đường viền ảnh =0: ảnh khơng có đường viền  align=“căn chỉnh ảnh”: left, right, middle, top, texttop,…  Một phần tử danh sách Siêu liên kết (Hyperlink)  Là khả cho phép tạo liên kết đối tượng với phần nội dung Khi ta kích chuột vào Siêu liên kết (Hyperlink)  Thẻ tạo liên kết:   Ta gọi:  – Đối tượng sử dụng để kích chuột vào là: Đối tượng liên kết Đối tượng là: văn bản, hình ảnh, phần ảnh  – Địa nội dung Đích liên Thuộc tính:  đối tượng phần nội dung  Đối tượng liên kết  href=“đích liên kết”: Nếu web nên sử dụng đường dẫn tương đối target=“tên cửa sổ đích” Tên CS phân biệt chữ hoa/thường Có số tên đặc biệt:   _self: cửa sổ  _blank: cửa sổ Chú ý:  Liên kết với địa e-mail đặt href=“mailto:địa_chỉ_e-mail”  Thực lệnh JavaScript kích chuột vào đặt href=“javascript:lệnh” kết 5/10/2013 NỘI DUNG        Giới thiệu Thẻ (tag) Bảng biểu Form Khung (Frame) Đa phương tiện Một số thẻ meta thơng dụng Bảng biểu -Thuộc tính thẻ  border=“số”: kích thước đường viền Đặt (mặc định): khơng có đường viền  width=“rộng”, height=“cao”: độ rộng độ cao bảng Có thể đặt theo cách:  n: (n số) Quy định độ rộng, cao n pixels  n%: Quy định độ rộng, cao n% độ rộng, cao đối tượng chứa bảng  cellspacing=“số”: Khoảng cách ô liên tiếp  cellpadding=“số”: Khoảng cách từ góc đến nội dung ô  bgcolor=“màu”: màu bảng  background=“địa_chỉ_ảnh”: Địa file ảnh làm cho bảng Nên sử dụng đường dẫn tương đối  Bảng biểu   HTML coi bảng gồm nhiều dịng, dịng gồm nhiều ơ, có chứa liệu bảng Các thẻ: Tạo bảng: …: Mỗi bảng có cặp thẻ  Tạo dịng: …: Bảng có dịng có nhiêu cặp thẻ  Tạo ơ:  Ơ tiêu đề bảng: …  Ô liệu: … Tổng số thẻ số ô bảng Dịng có có nhiêu thẻ và/hoặc nằm cặp thẻ … tương ứng  Chú ý: Để có trống bảng (ơ khơng có liệu) cần đặt nội dung là:    Bảng biểu -Thuộc tính thẻ  , bgcolor=“màu”: màu ô  background=“địa_chỉ_ảnh”: Địa file ảnh làm cho ô Nên sử dụng đường dẫn tương đối  width=“rộng”, height=“cao”: độ rộng độ cao ô Có thể đặt theo cách:  n: (n số) Quy định độ rộng, cao n pixels  n%: Quy định độ rộng, cao n% độ rộng, cao bảng  align=“căn_lề”: cách chỉnh liệu ô theo chiều ngang: left, right, center, justify  valign=“căn lề đứng”: cách chỉnh liệu ô theo chiều đứng: top, middle, bottom  colspan=“số”: số cột mà ô chiếm (mặc định 1)  rowspan=“số”: số dịng mà chiếm (mặc định 1)  nowrap: có làm cho liệu khơng tự xuống dịng  5/10/2013 NỘI DUNG        Giới thiệu Thẻ (tag) Bảng biểu Form Khung (Frame) Đa phương tiện Một số thẻ meta thông dụng Form      Sử dụng để chứa đối tượng khác Khơng nhìn thấy trang web hiển thị Quy định số thuộc tính quan trọng method, action Thẻ tạo form: … Các thuộc tính: – name=“tên_form”: Khơng quan trọng – action=“địa nhận liệu”: Nên sử dụng đường dẫn tương đối nằm web – method=“phương thức gửi liệu” Chỉ có giá trị: • GET (mặc định) • POST Form trang web          Các đối tượng nhập liệu Form Hộp nhập văn dòng (Oneline Textbox) Checkbox Option Button (Radio Button) Nút lệnh (Button) Combo Box (Drop-down menu) Listbox Hộp nhập văn nhiều dòng (TextArea) Các đối tượng nhập liệu   Cho phép người sử dụng nhập liệu trang web Dữ liệu gửi server để xử lý Người sử dụng nhập liệu thông qua điều khiển (controls) Có nhiều loại control: Form Oneline Textbox Checkbox Radio Button Button Combo box (drop-down menu) Listbox Hộp nhập văn nhiều dòng (TextArea) … 5/10/2013 Các đối tượng nhập liệu  Tất điều khiển có tên quy định Hộp nhập văn dòng (Oneline Textbox)  qua thuộc tính name Tuy nhiên có số điều  khiển name khơng quan trọng (các điều khiển  – name=“tên_đt”: quan trọng – type=“text”:Ô nhập văn thường – type=“password”: ô nhập mật – value=“giá trị mặc định” mà sau không cần lấy liệu)  Các điều khiển từ số đến số định nghĩa nhờ thẻ thuộc tính type xác định điều khiển tạo Checkbox    Cho phép chọn nhiều lựa chọn nhóm lựa chọn đưa cách đánh dấu (“tích”) Thẻ: : nhập cần thẻ Thuộc tính: – name=“tên_đt”: quan trọng – type=“checkbox” – value=“giá trị”: giá trị chương trình nhận NSD chọn – checked: có nút mặc định chọn Sử dụng để nhập văn ngắn (trên dịng) mật Thẻ: Thuộc tính: Option Button (Radio Button)     Cho phép chọn lựa chọn nhóm lựa chọn đưa Trên form có nhiều nhóm lựa chọn kiểu Thẻ: : Mỗi ô cần thẻ Thuộc tính: – name=“tên_đt”: quan trọng Các đối tượng tên thuộc nhóm – type=“radio” – value=“giá trị”: giá trị chương trình nhận NSD chọn – checked: có nút mặc địnhđược chọn 5/10/2013 Nút lệnh (Button)     Sử dụng để NSD lệnh thực cơng việc Trên web có loại nút: – submit: Tự động lệnh gửi liệu – reset: đưa liệu trạng thái mặc định – normal: người lập trình tự xử lý Thẻ: Thuộc tính: – name=“tên_ĐT”: thường không quan trọng – type=“submit”: nút submit – type=“reset”: nút reset – type=“button”: nút thông thường (normal), it sử dụng – value=“tiêu đề nút” Listbox     Tương tự Combo box, nhiên nhìn thấy nhiều phần tử lúc, lựa chọn nhiều phần tử Thẻ: … Thuộc tính: tương tự combo nhiên có thuộc tính khác: – size=“số dòng” – multiple: cho phép lựa chọn nhiều phần tử lúc Thẻ … tương tự combo box Combo Box (Drop-down menu)       Bao gồm danh sách có nhiều phần tử Tại thời điểm có phần tử chọn NSD chọn phần tử danh sách xổ xuống cách kích vào mũi tên bên phải hộp danh sách Thẻ tạo hộp danh sách: Danh sách phần tử Thuộc tính: – name=“tên_ĐT”: quan trọng Thẻ tạo phần tử danh sách: Tiêu đề phần tử Thuộc tính: – value=“giá trị”: giá trị chương trình nhận phần tử chọn – selected: có phần tử mặc định chọn Hộp nhập văn nhiều dòng (TextArea)        Cho phép nhập văn dài nhiều dòng Thẻ: Nội dung mặc định Thuộc tính: – name=“tên_ĐT”: quan trọng – rows=“số dịng” – cols=“số cột” rows tính theo số dịng văn bản, cols tính theo số ký tự chuẩn dịng 10 5/10/2013 NỘI DUNG        Giới thiệu Thẻ (tag) Bảng biểu Form Khung (Frame) Đa phương tiện Một số thẻ meta thông dụng Khung (Frame)  Tạo trang web chứa khung: Thay thẻ … bằng: khung nội dung trường hợp trình duyệt khơng hỗ trợ khung  Khung (Frame)   Cho phép chia trang web làm nhiều phần, phần chứa nội dung trang web khác Trình duyệt khơng hỗ trợ khung Khung (Frame)  Một số thuộc tính rows = “n1, n2, … nk” cols = “n1, n2, … nk”: Quy định có k dịng (hoặc cột), độ rộng dòng (cột) thứ i ni ni số, thay *: phần cịn lại  – frameborder = yes no  – framespacing = “n”: Khoảng cách khung  11 5/10/2013 Khung (Frame)   Tạo khung có nội dung trang web đó: – Thuộc tính: • src=“Địa chứa nội dung” • name=“tên khung” • noresize: Khơng thay đổi kích thước Thẻ mặc định – Thuộc tính • target=“Cửa sổ mặc định” • href=“Địa gốc mặc định” Đa phương tiện  Âm nền: – Thuộc tính: • src=“địa file âm thanh” • loop=“n”: số lần lặp -1: mặc định: mãi NỘI DUNG        Giới thiệu Thẻ (tag) Bảng biểu Form Khung (Frame) Đa phương tiện Một số thẻ meta thông dụng Đa phương tiện  Video IE sử dụng Windows Media Player