1. Trang Chủ
  2. Quản trị Web
  3. 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

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

Bài giảng Học phần Thiết kế lập trình web: Chương 2 trình bày các nội dung: Giới thiệu về HTML, Thẻ (tag) HTML, bảng biểu, form, khung, đa phương tiện, một số thẻ meta thông dụng. Mời bạn đọc tham khảo. 5/10/2013 Trường Cao đẳng Phát thanh – Truyền hình II NỘI DUNG CHƯƠNG II  Giới thiệu HTML  Thẻ (tag) HTML NGÔN NGỮ HTML  Bảng biểu  Form  Khung (Frame)  Đa phương tiện  Một số thẻ meta thông dụng NỘI DUNG Giới thiệu HTML  Giới thiệu HTML  HTML là gì?  Thẻ (tag) HTML  Đặc điểm  Bảng bi

Thể loại Tài liệu miễn phí Quản trị Web

Số trang 14

Ngày tạo 8/30/2018 4:36:01 AM +00:00

Loại tệp PDF

Kích thước 0.34 M

Tên tệp

Tải Bài giảng Học phần Thiết kế lập trình web: Chương ... (.pdf)

Xem mẫu

  1. 5/10/2013 Trường Cao đẳng Phát thanh – Truyền hình II NỘI DUNG CHƯƠNG II  Giới thiệu HTML  Thẻ (tag) HTML NGÔN NGỮ HTML  Bảng biểu  Form  Khung (Frame)  Đa phương tiện  Một số thẻ meta thông dụng NỘI DUNG Giới thiệu HTML  Giới thiệu HTML  HTML là gì?  Thẻ (tag) HTML  Đặc điểm  Bảng biểu  Form  Khung (Frame)  Đa phương tiện  Một số thẻ meta thông dụng 1
  2. 5/10/2013 Giới thiệu Đặc điểm  HTML = HyperText Markup Language – Ngôn  HTML sử dụng các thẻ (tags) để định dạng ngữ đánh dấu siêu văn bản – Ngôn ngữ để viết dữ liệu các trang web.  HTML không phân biệt chữ hoa, chữ thường  Do Tim Berner Lee phát minh và được W3C  Các trình duyệt thường không báo lỗi cú pháp (World Wide Web Consortium) đưa thành HTML. Nếu viết sai cú pháp chỉ dẫn đến kết quả chuẩn năm 1994. hiển thị không đúng với dự định. NỘI DUNG Thẻ (tag)  Giới thiệu  Thẻ (tag)  Thẻ (tag)  Thuộc tính (property) của thẻ  Bảng biểu  Trang web đầu tiên  Form  Thẻ định dạng ký tự  Khung (Frame)  Tiêu đề, đoạn văn, ngắt dòng  Đa phương tiện  Danh sách  Một số thẻ meta thông dụng  Chèn ảnh  Siêu liên kết (Hyperlink) 2
  3. 5/10/2013 Thẻ (tag) Thuộc tính (property) của thẻ  Có nhiều thẻ, mỗi thẻ có 1 tên và mang ý nghĩa  Một thẻ có thể có các thuộc tính nhằm bổ sung tác dụng cho khác nhau. thẻ  Có 2 loại thẻ: thẻ đóng và thẻ mở  Mỗi thuộc tính có tên thuộc tính (tên_TT)  Viết thẻ có thuộc tính:  Cách viết thẻ:  Thẻ mở:  Chú ý: Ví dụ: , , …  Có thể thay đổi thứ tự, số lượng các thuộc tính mà không gây ra lỗi cú pháp  Thẻ đóng tương ứng:  Sự hỗ trợ các thẻ, thuộc tính ở mỗi trình duyệt là khác nhau. Chỉ Ví dụ: , giống nhau ở các thẻ, thuộc tính cơ bản.  Chú ý: luôn có thẻ mở nhưng có thể không có thẻ  Thẻ đóng của thẻ có thuộc tính vẫn viết bình thường () đóng tương ứng. Ví dụ: không có thẻ đóng Trang web đầu tiên Trang web đầu tiên  Trang HTML có phần mở rộng (đuôi) là .HTM hoặc  Soạn thảo: .HTML  Mở trình soạn thảo văn bản thuần (VD Notepad) gõ ND dưới  Có thể tạo trang HTML bằng bất cứ trình soạn thảo “văn bản thuần” nào (Notepad, EditPlus, Notepad++,  Ghi lại với tên “CHAO.HTM” Turbo Pascal,…)  Có nhiều trình soạn thảo HTML cho phép NSD soạn Chao hoi thảo trực quan, kết quả sinh ra HTML tương ứng như:  Microsoft FrontPage  Macromedia Dreamweaver Chào mừng lớp 10CĐTH đến với HTML !  … 3
  4. 5/10/2013 Trang web đầu tiên Giải thích  Thử nghiệm:  HTML  Mở trình duyệt web (IE)  Cặp thẻ này được sử dụng để xác nhận một tài liệu là tài liệu HTML,  Vào File/Open, chọn file tức là nó có sử dụng các thẻ HTML để trình bày. Toàn bộ nội dung CHAO.HTM vừa ghi của tài liệu được đặt giữa cặp thẻ này.  Nhấn OK → Có kết quả như hình bên  Trình duyệt sẽ xem các tài liệu không sử dụng thẻ như  Thay đổi: những tập tin văn bản bình thường  Quay lại Notepad, sửa lại nội  HEAD dung trang web rồi ghi lại  Thẻ HEAD được dùng để xác định phần mở đầu cho tài liệu  Chuyển sang IE, nhấn nút  TITLE Refresh (F5) → thấy kết quả mới  Cặp thẻ này chỉ có thể sử dụng trong phần mở dầu của tài liệu, tức là  Ghi chú: Các thẻ được nêu tiếp nó phải nằm trong thẻ phạm vi giới hạn bởi cặp thẻ theo mặc định đặt ở trong phần … Giải thích Lưu ý về soạn thảo văn bản  BODY  Văn bản được soạn thảo như bình thường trong các file HTML Thẻ này được sử dụng để xác định phần nội dung chính của tài  Lưu ý: liệu – phần thân (body) của tài liệu. Trong phần thân có thể chứa  Mọi khoảng trống, dấu xuống dòng trong HTML được thể hiện trên các thông tin định dạng nhất định để đặt ảnh nền cho tài liệu, màu trang web là 1 khoảng trống duy nhất nền, màu văn bản siêu liên kết, đặt lề cho trang tài liệu... Những  Để gõ một số ký tự đặc biệt ta phải sử dụng mã: thông tin này được đặt ở phần tham số của thẻ • Khoảng trống (trong trường hợp muốn có nhiều hơn 1 ký tự  Các thuộc tính chính trống):    BACKGROUND: ảnh nền • Dấu nhỏ hơn (): < >  BGCOLOR: màu nền • Dấu ngoặc kép (“): "  TEXT: màu văn bản • Dấu (&): &  ALINK,VLINK, LINK: màu sắc liên kết • Ký hiệu ©: © • …  Ghi chú trong HTML: 4
  5. 5/10/2013 Bài tập 1 Thẻ định dạng ký tự Đậm, nghiêng, gạch chân: …, …,  Viết trang web hiển thị chính xác dòng sau lên  … màn hình:  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 bằng tên tiếng Anh (red, blue,…)  Viết dạng #RRGGBB, RR, GG, BB ở dạng hexa.  Ví dụ: #FFFFFF: Trắng, #FF0000: đỏ,… Tiêu đề, đoạn văn, ngắt dòng Bài tập 2 Tiêu đề: với kích thước nhỏ dần   Dùng HTML tạo trang web cho ra kết quả sau:  …  …  … Sau mỗi tiêu đề, văn bản tự động xuống dòng  Thuộc tính:  align=“cách căn chỉnh lề”: left, right, center, justify  Đoạn văn: …  Thuộc tính:  align tương tự  Ngắt dòng: 5
  6. 5/10/2013 Danh sách Chèn ảnh Thẻ , không có thẻ đóng  Dùng để liệt kê các phần tử   Các thuộc tính:  Có 2 loại: Danh sách có thứ tự 1,2,3,… (Ordered List)  src=“địa chỉ ảnh”: Nếu chèn ảnh trong cùng web site thì nên sử dụng đường dẫn tương đối. và không có thứ tự (Unordered List).  alt=“chú thích cho ảnh”: sẽ được hiển thị khi trình duyệt không hiện ảnh hoặc ảnh lỗi hoặc khi di chuyển chuột lên ảnh  Một danh sách gồm có nhiều phần tử  width=“rộng”, height=“cao”: độ rộng và độ cao của ảnh:  Tạo danh sách: • n: (n là số) Quy định độ rộng, cao là n pixels • n%: Quy định độ rộng, cao là n% độ rộng, cao của đối  Có thứ tự: Các phần tử tượng chứa ảnh.  border=“n”: n là số: kích thước đường viền ảnh. =0: ảnh không  Không có thứ tự: Các phần tử có đường viền  align=“căn chỉnh ảnh”: left, right, middle, top, texttop,…  Tạo 1 phần tử: Tiêu đề phần tử  Một phần tử có thể là 1 danh sách con. Siêu liên kết (Hyperlink) Siêu liên kết (Hyperlink) Thẻ tạo liên kết: Là khả năng cho phép tạo liên kết giữa 1 đối    Đối tượng liên kết Thuộc tính: tượng với một phần nội dung. Khi ta kích chuột vào   href=“đích liên kết”: Nếu trong cùng 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ó một số tên đặc đối tượng thì phần nội dung sẽ được hiện ra.  biệt: _self: cửa sổ hiện tại Ta gọi:    _blank: cửa sổ mới  – Đối tượng sử dụng để kích chuột vào là: Đối  Chú ý: Liên kết với địa chỉ e-mail thì đặt href=“mailto:địa_chỉ_e-mail” tượng liên kết. Đối tượng có thể là: văn bản,   Thực hiện lệnh JavaScript khi kích chuột vào thì đặt href=“javascript:lệnh” hình ảnh, một phần của ảnh.  – Địa chỉ nội dung sẽ được hiện ra là Đích liên kết 6
  7. 5/10/2013 NỘI DUNG Bảng biểu HTML coi một bảng gồm nhiều dòng, một dòng gồm nhiều ô, và  Giới thiệu  chỉ có ô mới chứa dữ liệu của bảng.  Thẻ (tag)  Các thẻ:  Tạo bảng: …: Mỗi bảng chỉ có 1 cặp thẻ  Bảng biểu này.  Tạo dòng: …: Bảng có bao nhiêu dòng thì có bấy  Form nhiêu cặp thẻ này  Tạo ô:  Khung (Frame)  Ô tiêu đề của bảng: … Ô dữ liệu: …  Đa phương tiện  Tổng số thẻ và bằng số ô của bảng. Dòng có bao  Một số thẻ meta thông dụng nhiêu ô thì có bấy nhiêu thẻ và/hoặc nằm trong cặp thẻ … tương ứng  Chú ý: Để có được một ô trống trong bảng (ô không có dữ liệu) thì cần đặt nội dung ô là:   Bảng biểu Bảng biểu -Thuộc tính của các thẻ -Thuộc tính của các thẻ   ,  border=“số”: kích thước đường viền. Đặt bằng 0 (mặc định): không có đường  bgcolor=“màu”: màu nền của ô viền.  width=“rộng”, height=“cao”: độ rộng và độ cao của bảng. Có thể đặt theo 2  background=“địa_chỉ_ảnh”: Địa chỉ của file ảnh làm nền cho ô. Nên cách: sử dụng đường dẫn tương đối nếu có thể.  n: (n là số) Quy định độ rộng, cao là n pixels  width=“rộng”, height=“cao”: độ rộng và độ cao của ô. Có thể đặt  n%: Quy định độ rộng, cao là n% độ rộng, cao của đối tượng chứa bảng. theo 2 cách:  cellspacing=“số”: Khoảng cách giữa 2 ô liên tiếp  n: (n là số) Quy định độ rộng, cao là n pixels  cellpadding=“số”: Khoảng cách từ góc ô đến nội dung ô  n%: Quy định độ rộng, cao là n% độ rộng, cao của bảng.  bgcolor=“màu”: màu nền của bảng  background=“địa_chỉ_ảnh”: Địa chỉ của file ảnh làm nền cho bảng. Nên sử dụng  align=“căn_lề”: cách căn chỉnh dữ liệu trong ô theo chiều ngang: đường dẫn tương đối nếu có thể. left, right, center, justify.  valign=“căn lề đứng”: cách căn chỉnh dữ liệu trong ô theo chiều đứng: top, middle, bottom.  colspan=“số”: số cột mà ô này chiếm (mặc định là 1)  rowspan=“số”: số dòng mà ô này chiếm (mặc định là 1)  nowrap: nếu có sẽ làm cho dữ liệu trong ô không tự xuống dòng 7
  8. 5/10/2013 NỘI DUNG Form trên trang web  Giới thiệu  Các đối tượng nhập dữ liệu  Form  Thẻ (tag)  Hộp nhập văn bản 1 dòng (Oneline Textbox)  Bảng biểu  Checkbox  Form  Option Button (Radio Button)  Khung (Frame)  Nút lệnh (Button)  Combo Box (Drop-down menu)  Đa phương tiện  Listbox  Một số thẻ meta thông dụng  Hộp nhập văn bản nhiều dòng (TextArea) Form Các đối tượng nhập dữ liệu  Sử dụng để chứa mọi đối tượng khác  Cho phép người sử dụng nhập dữ liệu trên trang web.  Không nhìn thấy khi trang web được hiển thị  Quy định một số thuộc tính quan trọng như method, action. Dữ liệu này có thể được gửi về server để xử lý.  Thẻ tạo form: …  Người sử dụng nhập dữ liệu thông qua các điều khiển  Các thuộc tính: (controls). Có nhiều loại control: – name=“tên_form”: Không quan trọng lắm 1. Form – action=“địa chỉ nhận dữ liệu”: Nên sử dụng đường dẫn tương đối nếu nằm trong cùng 1 web 2. Oneline Textbox – method=“phương thức gửi dữ liệu”. Chỉ có 2 giá trị: 3. Checkbox • GET (mặc định) 4. Radio Button • POST 5. Button 6. Combo box (drop-down menu) 7. Listbox 8. Hộp nhập văn bản nhiều dòng (TextArea) 9. … 8
  9. 5/10/2013 Hộp nhập văn bản 1 dòng Các đối tượng nhập dữ liệu (Oneline Textbox)  Sử dụng để nhập các văn bản ngắn  Tất cả các điều khiển đều có tên được quy định (trên 1 dòng) hoặc mật khẩu qua thuộc tính name. Tuy nhiên có một số điều  Thẻ:  Thuộc tính: khiển thì name không quan trọng (các điều khiển – name=“tên_đt”: quan trọng mà sau này không cần lấy dữ liệu) – type=“text”:Ô nhập văn bản  Các điều khiển từ số 2. đến số 5 được định nghĩa thường nhờ thẻ và thuộc tính type sẽ xác định – type=“password”: ô nhập mật khẩu là điều khiển nào sẽ được tạo ra. – value=“giá trị mặc định” Checkbox Option Button (Radio Button)  Cho phép chọn nhiều lựa chọn trong  Cho phép chọn một lựa chọn trong một nhóm một nhóm lựa chọn được đưa ra bằng lựa chọn được đưa ra. cách đánh dấu (“tích”).  Trên 1 form có thể có nhiều nhóm lựa chọn kiểu  Thẻ: : mỗi ô nhập cần 1 thẻ này.  Thẻ: : Mỗi ô cần 1 thẻ  Thuộc tính:  Thuộc tính: – name=“tên_đt”: quan trọng – name=“tên_đt”: quan trọng. Các đối tượng cùng – type=“checkbox” tên thì thuộc cùng nhóm. – value=“giá trị”: đây là giá trị chương – type=“radio” trình sẽ nhận được nếu NSD chọn ô này. – value=“giá trị”: đây là giá trị chương trình sẽ – checked: nếu có thì nút này mặc định nhận được nếu NSD chọn ô này. được chọn – checked: nếu có thì nút này mặc địnhđược chọn 9
  10. 5/10/2013 Nút lệnh (Button) Combo Box (Drop-down menu)  Sử dụng để NSD ra lệnh thực hiện công việc.  Bao gồm một danh sách có nhiều phần tử. Tại một  Trên web có 3 loại nút: thời điểm chỉ có 1 phần tử được chọn – submit: Tự động ra lệnh gửi dữ liệu  NSD có thể chọn 1 phần tử trong danh sách xổ xuống – reset: đưa mọi dữ liệu về trạng thái mặc định bằng cách kích vào mũi tên bên phải hộp danh sách. – normal: người lập trình tự xử lý  Thẻ tạo hộp danh sách: Danh sách phần tử  Thẻ:  Thuộc tính:  Thuộc tính: – name=“tên_ĐT”: thường không quan trọng – name=“tên_ĐT”: quan trọng – type=“submit”: nút submit – type=“reset”: nút reset  Thẻ tạo 1 phần tử trong danh sách: Tiêu – type=“button”: nút thông thường (normal), it sử đề phần tử dụng.  Thuộc tính: – value=“tiêu đề nút” – value=“giá trị”: giá trị chương trình nhận được nếu phần tử được chọn – selected: nếu có thì phần tử này mặc định được chọn Hộp nhập văn bản nhiều dòng Listbox (TextArea)  Tương tự như Combo box, tuy nhiên có  Cho phép nhập văn bản dài trên nhiều dòng. thể nhìn thấy nhiều phần tử cùng lúc, có  Thẻ: thể lựa chọn nhiều phần tử  Thẻ: … Nội dung mặc định  Thuộc tính: tương tự của combo tuy nhiên có 2 thuộc tính khác:  Thuộc tính:  – name=“tên_ĐT”: quan trọng – size=“số dòng”  – rows=“số dòng” – multiple: cho phép lựa chọn nhiều phần  – cols=“số cột” tử cùng lúc  rows tính theo số dòng văn bản, cols tính theo số  Thẻ … tương tự của ký tự chuẩn trên dòng. combo box 10
  11. 5/10/2013 NỘI DUNG Khung (Frame)  Giới thiệu  Cho phép chia một trang web làm nhiều phần,  Thẻ (tag) mỗi phần chứa nội dung của 1 trang web khác  Bảng biểu  Trình duyệt có thể không hỗ trợ khung  Form  Khung (Frame)  Đa phương tiện  Một số thẻ meta thông dụng Khung (Frame) Khung (Frame)  Tạo trang web chứa các khung:  Một số thuộc tính của  Thay thẻ … bằng:  rows = “n1, n2, … nk” hoặc cols = “n1, n2, … nk”: Quy định có k dòng (hoặc cột), độ rộng các khung dòng (cột) thứ i là ni. ni là số, có thể thay bằng *: phần còn lại  – frameborder = yes hoặc no nội dung trong trường hợp trình duyệt không  – framespacing = “n”: Khoảng cách giữa 2 hỗ trợ khung khung 11
  12. 5/10/2013 Khung (Frame) NỘI DUNG  Tạo 1 khung có nội dung là 1 trang web nào đó:  Giới thiệu – Thuộc tính:  Thẻ (tag) • src=“Địa chỉ chứa nội dung”  Bảng biểu • name=“tên khung” • noresize: Không được thay đổi kích thước  Form  Thẻ mặc định  Khung (Frame) – Thuộc tính • target=“Cửa sổ mặc định”  Đa phương tiện • href=“Địa chỉ gốc mặc định”  Một số thẻ meta thông dụng Đa phương tiện Đa phương tiện  Âm thanh nền:  Video trên IE sử dụng Windows Media – Thuộc tính: Player • src=“địa chỉ file âm thanh”
  13. 5/10/2013 Flash Applet NỘI DUNG Một số thẻ meta thông dụng  Giới thiệu  Thẻ :  Thẻ (tag) – Đặt ở giữa …  Bảng biểu – Thường dùng quy định thuộc tính cho trang web  Form – Có tác dụng lớn với Search Engine  Khung (Frame) – 2 cách viết thẻ :  Đa phương tiện  Một số thẻ meta thông dụng 13
  14. 5/10/2013 Một số thẻ meta thông dụng Bài tập về nhà   Mỗi SV viết một website bằng HTML theo yêu cầu sau: 1) Trang chủ chứa thông tin giới thiệu về bản thân, (có ảnh)  2) Trang 2 chứa thông tin về nghề nghiệp và dự định về  4) Trang 4 chứa thông tin về những người thân như: gia  5) Trang 5, giới thiệu về ngôi trường bạn đang học hay đã học trước đây.  
nguon tai.lieu . vn
Tin học văn phòng Đồ họa - Thiết kế - Flash Quản trị Web Cơ sở dữ liệu Quản trị mạng Kỹ thuật lập trình Hệ điều hành Phần cứng An ninh - Bảo mật Chứng chỉ quốc tế Thủ thuật máy tính Điện - Điện tử Kinh tế học Hoá học Xã hội học Môi trường