Slide thiết kế web cơ bản nhất

1 Nội Dung Giới thiệu ngôn ngữ HTML Định dạng văn Danh sách Hình ảnh – Âm – Liên kết Bảng trình bày trang - Khung Biểu mẫu (Form) – Kết xuất GiỚI THIỆU NGÔN NGỮ HTML  HTML (Hyper Text Markup Language): Ngôn ngữ đánh dấu siêu văn  Là ngôn ngữ dùng để xây dựng trang Web  Chứa thành phần định dạng để báo cho trình duyệt Web biết cách để hiển thị trang Web  Một trang web thông thường gồm có thành phần chính:  Dữ liệu trang web (văn bản, âm thanh, hình ảnh )  Các thẻ (tag) HTML dùng để định dạng mô tả cách thức liệu hiển thị trình duyệt CÁC KHÁI NiỆM LIÊN QUAN TỚI THẺ Khái niệm thẻ Cú pháp tổng quát:  TagName: tên tag HTML đặt hai dấu ngoặc nhọn ( < > ) để báo cho trình duyệt biết cách thể văn  Property: thuộc tính thẻ, cung cấp tuỳ chọn cho thẻ Các thuộc tính cách khoảng trắng Thuộc tính thường có trị (value) xác định cách tác động thẻ Không phân biệt chữ hoa chữ thường  CÁC KHÁI NiỆM LIÊN QUAN TỚI THẺ Khái niệm thẻ CÁC KHÁI NiỆM LIÊN QUAN TỚI THẺ Thẻ chứa (Container tag)  Thẻ mở (Opening thẻ):  Thẻ đóng (Closing thẻ):  Các thành phần đặt thẻ mở thẻ đóng chịu tác động thẻ  Ví dụ: Xin chào bạn Nguyễn An CÁC KHÁI NiỆM LIÊN QUAN TỚI THẺ Thẻ rỗng (Empty tag)  Chỉ có thẻ mở thẻ đóng dùng để hiển thị yêu cầu lần  Ví dụ: xuống dòng , chèn đường kẻ ngang  Lưu ý: Khi soạn thảo nhấn phím Space (nhiều ký tự trắng), Enter (xuống dòng) … hiệu lực hiển thị trình duyệt mà phải dùng thẻ CÁC KHÁI NiỆM LIÊN QUAN TỚI THẺ Các thẻ lồng  Các thẻ lồng nhau, nội dung nằm nhiều thẻ chịu tác động thẻ  Lưu ý: mở trước đóng sau/mở sau đóng trước  Ví dụ: Chào bạn đến với WebSite trung tâm ABC CẤU TRÚC CƠ BẢN CỦA TRANG WEB Cấu trúc Title of Web page Nội dung thông tin trang web Nội dung hiển thị trình duyệt Soạn thảo Dùng Notepad, Wordpad, Word Hiển thị  Khởi động trình duyệt Internet Explorer  Chọn menu file,open, dùng browse tìm tập tin html tạo  Hoặc double click vào tên tập tin htm CẤU TRÚC CƠ BẢN CỦA TRANG WEB BiỂU MẪU - FORM e) Reset Button:Thiết lập giá trị ban đầu tất điều khiển form  Cú pháp:  Có thể tạo nút Reset Submit hình ảnh với cú pháp: Nhãn chữ lề trái Nhãn chữ lề phải BiỂU MẪU - FORM f) Button: Nút dùng để thực lệnh người sử dụng đưa  Cú pháp: Ví dụ: BiỂU MẪU - FORM g) Hidden: field mà người xem không nhìn thấy trình duyệt, phần tử form Hidden field dùng để lưu trữ thông tin form trước, thông tin cần kèm với liệu form hành mà không muốn người xem nhập lại  Cú pháp:  Name: tên mô tả ngắn gọn thông tin cần lưu trữ  Value: Thông tin cần lưu trữ BiỂU MẪU - FORM Các Selection List: a) Drop down menu:  Cú pháp: Option Option …  Nhãn:Giới thiệu Menu  Name: tên liệu đầu vào server  Size: chiều cao menu tính hàng chữ  Selected: đề mục chọn mặc định  Value: xác định liệu gởi cho server đề mục chọn  Nếu thêm thuộc tính Multiple ta dạng listbox BiỂU MẪU - FORM Các Selection List: a) Drop down menu:  Ví dụ: ScanMaster ScanMaster II LaserPrint 1000 LaserPrint 5000 Print/scan 150 Print/scan 250 BiỂU MẪU - FORM Các Selection List: a) Drop down menu:  Ví dụ: ScanMaster ScanMaster II LaserPrint 1000 LaserPrint 5000 Print/scan 150 Print/scan 250 BiỂU MẪU - FORM Các Selection List: a) Drop down menu: Phần tử OPTGROUP: sử dụng để nhóm chọn lựa thành nhóm riêng optgroup BiỂU MẪU - FORM Các Selection List: a) Drop down menu: Ví dụ Introduction to the Internet Introduction to HTML Introduction to the web page designing Visual Basic – An Introduction Visual Basic – Application Development BiỂU MẪU - FORM Các Selection List: b) TextArea: Hộp văn cho phép nhập nhiều dòng  Cú pháp: Default text  Rows: số dòng nhập vào TextArea (mặc định 4)  Cols: độ rộng textarea (tính số ký tự, mặc định 40)  Wrap: dòng chữ tự động dàn lề vùng text area, Value: virtual,physical BiỂU MẪU - FORM Các Selection List: b) TextArea: Hộp văn cho phép nhập nhiều dòng  Ví dụ: Comments ? BiỂU MẪU - FORM Các Selection List: c) Nhãn: Dùng để tạo nhãn liên kết với thành phần kèm Cú pháp: Nội dung label  Idname: giá trị thụôc tính ID thành phần Form tương ứng Label BiỂU MẪU - FORM d) FieldSet: Nhóm phần tử liên quan với Form  Cú pháp Chú thích Các phần tử nhóm  The tag : định nghĩa tiêu đề cho fieldset BiỂU MẪU - FORM Ví dụ: Position Application for the post of: Educational Qualifications Graduate Postgraduate BiỂU MẪU - FORM BiỂU MẪU - FORM Điều khiển phần tử form: a) Định thứ tự Tab:  Dùng phím tab để di chuyển đối tượng form, mặc định theo thứ tự mã HTML, muốn định lại thứ tự ta dùng thuộc tính TabIndex=n tag tạo thành phần form, n thứ tự tab, có giá trị từ đến 32767  Trong form ta thường định thứ tự tab cho thành phần : textbox, password, checkbox, radio button, textarea, menu button b) Tạo phím tắt:  Trong tag tạo phần tử form ta dùng thuộc tính Accesskey=”Phím tắt”  Sử dụng phím tắt: Nhấn tổ hợp phím Alt+Phím tắt [...]... CÁC TAG HTML CƠ BẢN Một số thao tác trong cửa sổ trình duyệt  Các tuỳ chọn khác cho trang Web: Tools  Internet option: Không Load hình xuống, định dạng liên kết,…  Chọn trang web mặc định khi mở trình duyệt CÁC TAG HTML CƠ BẢN Một số thao tác trong cửa sổ trình duyệt  Các tuỳ chọn khác cho trang Web: Tools  Internet option: Không Load hình xuống, định dạng liên kết,…  Chọn trang web mặc định... ListProperties> … xác định phần "thân" của trang web  Các thuộc tính của  BgColor: thiết lập màu nền của trang  Text: thiết lập màu chữ  Link: màu của siêu liên kết  Vlink: màu của siêu liên kết đã xem qua  Background: load một hình làm nền cho trang  LeftMargin: Canh lề trái  TopMargin: Canh lề trên của trang CÁC TAG HTML CƠ BẢN CÁC TAG HTML CƠ BẢN 7 HREF: khai báo URL gốc của tài... NamVietCompany., Ltd" > CÁC TAG HTML CƠ BẢN 9 (horizontal rule) thêm đường kẻ ngang Cú pháp: CÁC TAG HTML CƠ BẢN Một số giá trị màu cơ bản CÁC TAG HTML CƠ BẢN 9 (horizontal rule) thêm đường kẻ ngang Ví dụ: Welcome to HTML ... cửa sổ hiển thị trang web Tiêu đề được dùng khi bookmark trang Web này và làm chỉ mục khi tìm kiếm trang Web (search engines index) 5 trình duyệt web bỏ qua không đọc, không hiển thị trên trang Web Lưu ý: Không được có khoảng trắng giữa ... Nếu muốn xoá đối tượng này thì nhấn Clear history CÁC TAG HTML CƠ BẢN Một số thao tác trong cửa sổ trình duyệt • Ngăn chặn không cho tải hình xuống trang web • Màu liên kết, cách thể hiện liên kết trên trang • Copy hình ảnh từ trang Web: Click phải vào hình ảnh cần sao chép rồi chọn Save picture as, hoặc Save background as,… • Load về trang Web bao gồm các hiệu ứng, script, hình ảnh… chứa trên trang:...CÁC TAG HTML CƠ BẢN 1 là dòng đầu tiên của trang HTML, ghi thông tin về version HTML dùng trong trang HTML này Ví dụ: 2 … định nghĩa phạm vi của văn bản HTML 3 … định nghĩa các mô tả về trang HTML Các thông tin này sẽ không hiển thị trong nội dung trang web CÁC TAG HTML CƠ BẢN 4 Nội... DẠNG VĂN BẢN – Định dạng ký tự 5 Tag và :Đưa chữ lên cao hoặc xuống thấp so với văn bản bình thường Cú pháp: Nội dung chữ đưa lên cao Nội dung chữ đưa xuống thấp  Ví dụ H2O Ax2+Bx+C=0 ĐỊNH DẠNG VĂN BẢN – Định dạng ký tự 6 : Gạch ngang văn bản Cú pháp: Nội dung văn bản bị gạch ngang 7 : Văn bản được... được nhấn mạnh (giống tag ) Cú pháp: Văn bản được nhấn mạnh 8 : Định dạng chữ đậm (giống ) Cú pháp: Văn bản được nhấn mạnh ĐỊNH DẠNG VĂN BẢN – Định dạng ký tự Ví dụ ĐỊNH DẠNG VĂN BẢN – Định dạng ký tự 9 : Giữ nguyên các định dạng như: ngắt dòng, khoảng cách, thích hợp với việc tạo bảng Cú pháp: Nội dung văn bản cần định dạng trước với tất cả định dạng... fun CÁC TAG HTML CƠ BẢN 10 ngắt xuống dòng mới nhưng vẫn thuộc cùng đoạn Ví dụ: nguyen Chu thich cach 2 Chao ban den voi WebSite trung tam ABC Chao ban den voi WebSitetrung tam ABC Chao ban den voi WebSite trung tam ABC... Save • Hiệu chỉnh trang Web: View source->hiệu chỉnhchọn File  Save để lưu lại F5 để cập nhật lại nội dung vừa hiệu chỉnh ĐỊNH DẠNG VĂN BẢN – Định dạng ký tự Các thẻ thường dùng ĐỊNH DẠNG VĂN BẢN – Định dạng ký tự 1 Tag : định dạng chữ đậm Cú pháp: Nội dung chữ đậm 2 Tag : Định dạng chữ nghiêng Cú pháp: Nội dung chữ nghiêng 3 Tag : Gạch chân văn bản Cú pháp: Nội dung