Bài giảng thiết kế web chương 2 trường đh thủ dầu một

TRƯỜNG ĐẠI HỌC THỦ DẦU MỘT NỘI DUNG KHOA KỸ THUẬT - CƠNG NGHỆ Khái niệm Cơng dụng HTML THIẾT KẾ WEB Tập tin định dạng HTML Căn thẻ Chương NGÔN NGỮ HTML (HyperText Markup Language) Phone: 0274 3834930 Cấu trúc trang Web Các thẻ định dạng khối Website: http://et.tdmu.edu.vn 18/01/2019 HTML gì? 2 Công dụng HTML  HTML ngôn ngữ để xuất siêu văn World Wide Web  HTML ngôn ngữ xác định cấu trúc thông tin  Nó sử dụng loạt thẻ thuộc tính, dùng để hiển thị văn thông tin khác cung cấp siêu liên kết tới tài liệu web khác 18/01/2019 Bài giảng Thiết kế Web Bài giảng Thiết kế Web  Thiết kế nội dung hình thức trang Web  Xuất tài liệu trực tuyến hay truy xuất thông tin trực tuyến cách dùng liên kết chèn vào trang Web  Tạo biểu mẫu trực tuyến nhằm thu thập thông tin người dùng, quản lí giao dịch…  Thêm vào trang Web đối tượng âm thanh, hình ảnh, video… 18/01/2019 Bài giảng Thiết kế Web Tập tin định dạng HTML Căn thẻ (Tag)  Là tập tin có phần mở rộng htm hay html  Các lệnh HTML gọi thẻ Các thẻ  Là tập tin văn túy, có chứa mã đặc biệt gọi Tag (thẻ), thường đặt xung quanh khối văn  Có thể viết trình soạn: Microsoft Frontpage, Adobe Dreamweaver, Notepad,… 18/01/2019 Bài giảng Thiết kế Web giúp định dạng, điều khiển nội dung hình thức trình bày trang Web  Cú pháp tổng quát thẻ: Chuỗi văn bản • đơn giản là: Chuỗi văn bản Vd: Trang Web dau tien cua toi  Tên thẻ không phân biệt chữ hoa/thường 18/01/2019 Bài giảng Thiết kế Web Cấu trúc trang Web Cấu trúc … 5.1 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ẻ  Cú pháp: Toàn nội tài liệu đặt  Trình duyệt xem tài liệu không sử dụng thẻ tệp tin văn bình thường Tiêu đề tài liệu nội dung tài liệu 18/01/2019 Bài giảng Thiết kế Web 18/01/2019 Cấu trúc … Bài giảng Thiết kế Web Cấu trúc … 5.2 HEAD  Thẻ HEAD dùng để xác định phần mở đầu cho tài liệu  Cú pháp: Phần mở đầu (HEADER) tài liệu đặt 5.3 TITLE  Cặp thẻ sử dụng phần mở đầu tài liệu, tức phải nằm thẻ phạm vi giới hạn cặp thẻ  Cú pháp: Tiêu đề tài liệu  Cặp thẻ: định nghĩa thể tiêu đề trình duyệt 18/01/2019 Bài giảng Thiết kế Web 18/01/2019 Cấu trúc … Bài giảng Thiết kế Web 10 Cấu trúc … 5.4 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ú pháp: phần nội dung tài liệu đặt 18/01/2019 Bài giảng Thiết kế Web 11  Một số thuộc tính chính:  background= : Đặt ảnh làm ảnh (background) cho văn Giá trị tham số (phần sau dấu bằng) URL file ảnh  bgcolor= : Đặt mầu cho trang hiển thị Nếu hai tham số background bgcolor có giá trị trình duyệt hiển thị mầu trước, sau tải ảnh lên phía  text= : Xác định màu chữ văn bản, kể đề mục  alink=,vlink=,link=: Xác định màu sắc cho siêu liên kết văn Tương ứng, alink liên kết kích hoạt - tức kích chuột lên; vlink liên kết kích hoạt; 18/01/2019 Bài giảng Thiết kế Web 12 Cấu trúc … Cấu trúc …  Một số thuộc tính (tt):  Ví dụ 1: Mở Notepad gõ vào nội dung sau:  Leftmargin=“n”  Topmargin=“n”  Rightmargin=“n”  Bottommargin=“n” Thiết lập lề cho trang, với giá trị n có đơn vị tính pixel  Chú ý:  Chọn Font chữ kiểu gõ Unicode để hiển thị tiếng việt 18/01/2019 Bài giảng Thiết kế Web 13 Cấu trúc … 14  Ví dụ 1: Chạy file Vd1.html với trình duyệt IE ta kết  Khi lưu phải chọn mục Unicode phần Encoding Bài giảng Thiết kế Web sau: 15 Cấu trúc … 18/01/2019 Bài giảng Thiết kế Web 16 Bài giảng Thiết kế Web 18 Cấu trúc …  Ví dụ 3:  Ví dụ 2: 18/01/2019 Bài giảng Thiết kế Web Cấu trúc …  Lưu tập tin lại với tên Vd1.html 18/01/2019 18/01/2019 Bài giảng Thiết kế Web 17 18/01/2019 Các thẻ định dạng khối 6.1 Các thẻ định dạng văn 6.1 Các thẻ định dạng văn Thẻ  Để ngắt dòng tạo đoạn mới, tạo dòng trống: Ý nghĩa In chữ đậm In chữ nghiêng Đặt văn cặp thẻ

 Để ngắt dịng khơng tạo đoạn mới: In chữ gạch chân Định dạng số (SuperScript) Định dạng số (SubScript)

Một đoạn văn Xuống dịng (khơng có ) … Chỉ định font, size, màu văn size=n: n từ đến (8,10,14,16,24,36), mặc định color=color: màu văn face=name: tên font canh … 18/01/2019 Bài giảng Thiết kế Web Chèn thẻ vị trí muốn ngắt dịng  Đặt câu ghi vào cặp thẻ 19 Nội dung câu thích khơng hiển thị trình duyệt 18/01/2019 Bài giảng Thiết kế Web 6.1 Các thẻ định dạng văn 6.1 Các thẻ định dạng văn Ví dụ: Thu dinh dang van ban

ĐOẠN NÀY CĨ CÁC DỊNG: Dịng đậm Dịng nghiêng Dòng gạch dưới Dòng vừa đậm vừa nghiêng

Giải biện luận PT: aX2+bX+c=0 Cơng thức hố học: H2SO4

Đoạn chữ lớn quá

Ví dụ: 18/01/2019 Bài giảng Thiết kế Web 21 18/01/2019 6.2 Các thẻ định dạng danh sách Bài giảng Thiết kế Web 20 22 6.2 Các thẻ định dạng danh sách  Danh sách khơng đánh số thứ tự  Danh sách có đánh số thứ tự

• Mục danh sách
• Mục danh sách
• Mục n danh sách
• Mục danh sách
• Mục danh sách
• Mục n danh sách

 Thay đổi kiểu dáng cho mục 

Kiểu STT cho toàn văn danh sách 
1. Kiểu STT cho mục  Trị: 1,a,A,i,I tương ứng 1,2,3 ; a,b,c ; A,B,C ; i,ii,iii ;  Thay đổi kiểu dáng cho mục 
   : Áp dụng cho tất mục 
   • : Áp dụng cho mục định  Các trị thuộc tính: Disc: Dấu trịn đen (Mặc định), square: I,II,III Hình vng đen đặc, Circle: Hình trịn rỗng 18/01/2019 Bài giảng Thiết kế Web 23 18/01/2019 Bài giảng Thiết kế Web 24 6.2 Các thẻ định dạng danh sách 6.2 Các thẻ định dạng danh sách  Danh sách có đánh số thứ tự (tt)  Danh sách có đánh số thứ tự (tt) CHƯƠNG TRÌNH ĐÀO TẠO NGÀNH WEBSITE  Chỉ định giá trị khởi đầu
     
     : Tác động tất mục danh sách trừ mục dánh sách định khác 
     1. : Tác động mục định mục sau mục không định khác
     2. THIẾT KẾ WEBSITE Text Minh họa 18/01/2019 Bài giảng Thiết kế Web 49 18/01/2019 Bài giảng Thiết kế Web 50 6.10 Thẻ tạo liên kết 6.11 Các thẻ FORM  Ví dụ:  Các HTML Form có hộp văn bản, hộp danh sách lựa chọn, nút bấm, nút chọn a Tạo Form action method name target 18/01/2019 Bài giảng Thiết kế Web 51 6.11 Các thẻ FORM 18/01/2019 Bài giảng Thiết kế Web 52 6.11 Các thẻ FORM  Dạng 1: Chỉ trình bày khơng gửi liệu Các đối tượng Form  Dạng 2: Thông tin từ Form chuyển cho địa Mail Các đối tượng Form  Dạng 3: Thông tin từ Form chuyển lên Webserver Các đối tượng Form 18/01/2019 Địa gửi liệu tới form submit (có thể địa tới chương trình CGI, trang ASP ) Phương thức gửi liệu Tên form Chỉ định cửa sổ hiển thị kết sau gửi liệu từ form đến server Bài giảng Thiết kế Web fieldset Thông tin cá nhân First name: trang web (như hộp văn bản, ô kiểm tra, nút bấm ) Last name: 18/01/2019 Bài giảng Thiết kế Web 63 Thêm kiểu mới: 18/01/2019 Bài giảng Thiết kế Web 64 Thêm kiểu mới: 18/01/2019 Bài giảng Thiết kế Web 65 18/01/2019 Bài giảng Thiết kế Web 66 11 Thêm kiểu mới: Thêm kiểu mới: 18/01/2019 Bài giảng Thiết kế Web 67 Thêm kiểu mới: 18/01/2019 Bài giảng Thiết kế Web 68 6.11 Các thẻ FORM Combo Box (Drop-down menu) 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 Ghi chú: Để thực liên kết người dùng chọn giá trị từ ComboBox Thêm thuộc tính sau vào thẻ onchange="window.open(this.options[this.selectedIndex].value,'_blank')" 18/01/2019 Bài giảng Thiết kế Web 69 6.11 Các thẻ FORM 18/01/2019 Bài giảng Thiết kế Web 70 6.11 Các thẻ FORM Combo Box (Drop-down menu) Ví dụ: Listbox  Tương tự Combo box, nhiên nhìn thấy nhiều phần liên kết website 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: Tin tuc - Tin Việt Nam  size=“số dòng” Báo lao động  multiple: cho phép lựa chọn nhiều phần tử lúc Báo Tuổi Trẻ  Thẻ … tương tự combo box 18/01/2019 Bài giảng Thiết kế Web 71 18/01/2019 Bài giảng Thiết kế Web 72 12 6.11 Các thẻ FORM 6.12 Các thẻ cấu trúc trang Hộp nhập văn nhiều dòng (TextArea)  Thẻ: Nội dung mặc định  Thuộc tính:  name=“tên_ĐT”: quan trọ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 18/01/2019  rows=“số dòng” Bài giảng Thiết kế Web 73 6.12 Các thẻ cấu trúc trang 18/01/2019 74 Bài giảng Thiết kế Web 6.12 Các thẻ cấu trúc trang Untitled Document 18/01/2019 Bài giảng Thiết kế Web 75 18/01/2019 Minh họa Bài giảng Thiết kế Web 76 6.12 Các thẻ cấu trúc trang  Thẻ div: Nội dung thẻ div  Tạo khối  Thẻ span: Nội dung thẻ span  Không tạo khối,  Dùng để chèn số định dạng css vào dòng 18/01/2019 Bài giảng Thiết kế Web 77 Phone: 0274 3834930 Website: http://et.tdmu.edu.vn 13 ... ta kết  Khi lưu phải chọn mục Unicode phần Encoding Bài giảng Thiết kế Web sau: 15 Cấu trúc … 18/01 /20 19 Bài giảng Thiết kế Web 16 Bài giảng Thiết kế Web 18 Cấu trúc …  Ví dụ 3:  Ví dụ 2: ... quanh nội dung ô Pixel 18/01 /20 19 43 Bài giảng Thiết kế Web 6.8 Thẻ định dạng bảng 45 Bài giảng Thiết kế Web 18/01 /20 19 Bài giảng Thiết kế Web 46 6.10 Thẻ tạo liên kết  Khái quát