Bài giảng Thiết kế web: Chương 2 - Trường ĐH Thủ Dầu Một

Chia sẻ: _ _ | Ngày: | Loại File: PDF | Số trang:13

Thêm vào BST

Báo xấu

24
lượt xem 6
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

Bài giảng Thiết kế web: Chương 2 cung cấp cho người học những kiến thức như: Công dụng của HTML; Tập tin định dạng HTML; Căn bản về thẻ; Cấu trúc cơ bản của trang Web; Các thẻ định dạng khối. Mời các bạn cùng tham khảo!

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: 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Ệ 1. Khái niệm 2. Công dụng của HTML THIẾT KẾ WEB 3. Tập tin định dạng HTML 4. Căn bản về thẻ Chương 2 5. Cấu trúc cơ bản của trang Web NGÔN NGỮ HTML (HyperText Markup Language) 6. Các thẻ định dạng khối Phone: 0274. 3834930 Website: http://et.tdmu.edu.vn 18/01/2019 Bài giảng Thiết kế Web 2 1. HTML là gì? 2. Công dụng của HTML  Thiết kế được nội dung và hình thức của trang Web.  HTML là ngôn ngữ để xuất bản siêu văn bản trên  Xuất bản các tài liệu trực tuyến hay truy xuất các World Wide Web. thông tin trực tuyến bằng cách dùng các liên kết được  HTML là ngôn ngữ xác định cấu trúc của thông tin. chèn vào trang Web.  Nó sử dụng một loạt các thẻ và thuộc tính, được dùng  Tạo ra các biểu mẫu trực tuyến nhằm thu thập các để hiển thị văn bản và các thông tin khác và cung cấp thông tin về người dùng, quản lí các giao dịch… siêu liên kết tới các tài liệu web khác  Thêm vào trang Web các đối tượng âm thanh, hình ảnh, video… 18/01/2019 Bài giảng Thiết kế Web 3 18/01/2019 Bài giảng Thiết kế Web 4 3. Tập tin định dạng HTML 4. Căn bản về thẻ (Tag)  Là tập tin có phần mở rộng là .htm hay .html.  Các lệnh trong HTML được gọi là các thẻ. Các thẻ  Là tập tin văn bản thuần túy, có chứa các mã đặc biệt này giúp định dạng, điều khiển nội dung và hình thức trình bày của một trang Web. gọi là Tag (thẻ), thường được đặt xung quanh một khối văn bản nào đó.  Cú pháp tổng quát của 1 thẻ: Chuỗi văn bản Frontpage, Adobe Dreamweaver, Notepad,… • hoặc đơn giản nhất 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 5 18/01/2019 Bài giảng Thiết kế Web 6 1
5. Cấu trúc cơ bản của trang Web 5. Cấu trúc cơ bản … 5.1 HTML  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, tức là nó có sử dụng các thẻ HTML để trình bày. Tiêu đề của tài liệu Toàn bộ nội dung của tài liệu được đặt giữa cặp thẻ này.  Cú pháp: ... nội dung của tài liệu ... Toàn bộ nội của tài liệu được đặt ở đây  Trình duyệt sẽ xem các tài liệu không sử dụng thẻ như những tệp tin văn bản bình thường. 18/01/2019 Bài giảng Thiết kế Web 7 18/01/2019 Bài giảng Thiết kế Web 8 5. Cấu trúc cơ bản … 5. Cấu trúc cơ bản … 5.2 HEAD 5.3 TITLE  Thẻ HEAD được dùng để xác định phần mở đầu cho tài liệu.  Cặp thẻ này chỉ có thể sử dụng trong phần mở đầu của tài  Cú pháp: liệu, tức là nó phải nằm trong thẻ phạm vi giới hạn bởi cặp thẻ .  Cú pháp: ... Phần mở đầu (HEADER) của tài liệu được đặt ở đây Tiêu đề của tài liệu  Cặp thẻ: định nghĩa những gì sẽ được thể hiện trên thanh tiêu đề của trình duyệt. 18/01/2019 Bài giảng Thiết kế Web 9 18/01/2019 Bài giảng Thiết kế Web 10 5. Cấu trúc cơ bản … 5. Cấu trúc cơ bản … 5.4 BODY  Một số thuộc tính chính:  Thẻ này được sử dụng để xác định phần nội dung chính của  background= : Đặt một ảnh nào đó làm ảnh nền (background) tài liệu - phần thân (body) của tài liệu. Trong phần thân có cho văn bản. Giá trị của tham số này (phần sau dấu bằng) là thể chứa các thông tin định dạng nhất định để đặt ảnh nền URL của file ảnh. cho tài liệu, màu nền, màu văn bản siêu liên kết, đặt lề cho  bgcolor= : Đặt mầu nền cho trang khi hiển thị. Nếu cả hai trang tài liệu... Những thông tin này được đặt ở phần tham số tham số background và bgcolor cùng có giá trị thì trình duyệt của thẻ. sẽ hiển thị mầu nền trước, sau đó mới tải ảnh lên phía trên.  Cú pháp:  text= : Xác định màu chữ của văn bản, kể cả các đề mục.  alink=,vlink=,link=: Xác định màu sắc cho các siêu liên kết .... phần nội dung của tài liệu được đặt ở đây trong văn bản. Tương ứng, alink là liên kết đang được kích hoạt - tức là khi đã được kích chuột lên; vlink chỉ liên kết đã từng được kích hoạt; 18/01/2019 Bài giảng Thiết kế Web 11 18/01/2019 Bài giảng Thiết kế Web 12 2
5. Cấu trúc cơ bản … 5. Cấu trúc cơ bản …  Một số thuộc tính chính (tt):  Ví dụ 1: Mở Notepad và gõ vào nội dung như 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 là pixel  Chú ý:  Chọn Font chữ và kiểu gõ Unicode để hiển thị được tiếng việt 18/01/2019 Bài giảng Thiết kế Web 13 18/01/2019 Bài giảng Thiết kế Web 14 5. Cấu trúc cơ bản … 5. Cấu trúc cơ bản …  Lưu tập tin này lại với tên Vd1.html  Ví dụ 1: Chạy file Vd1.html với trình duyệt IE ta được kết  Khi lưu phải chọn mục Unicode ở phần Encoding. quả như sau: 18/01/2019 Bài giảng Thiết kế Web 15 18/01/2019 Bài giảng Thiết kế Web 16 5. Cấu trúc cơ bản … 5. Cấu trúc cơ bản …  Ví dụ 2:  Ví dụ 3: 18/01/2019 Bài giảng Thiết kế Web 17 18/01/2019 Bài giảng Thiết kế Web 18 3
6. Các thẻ định dạng khối 6.1. Các thẻ định dạng văn bản 6.1. Các thẻ định dạng văn bản Thẻ Ý nghĩa  Để ngắt dòng tạo đoạn mới, tạo dòng trống: ... In chữ đậm Đặt văn bản trong cặp thẻ ... ... In chữ nghiêng ... In chữ gạch chân  Để ngắt dòng không tạo đoạn mới: ... Định dạng chỉ số trên (SuperScript) Chèn thẻ tại vị trí muốn ngắt dòng. ... Định dạng chỉ số dưới (SubScript)  Đặt câu ghi chú vào cặp thẻ ... Một đoạn văn Xuống dòng (không có ) Nội dung câu chú thích không hiển thị trên trình duyệt … size=n: n từ 1 đến 7 (8,10,14,16,24,36), mặc định là 3 color=color: màu văn bản face=name: tên font … canh giữa 18/01/2019 Bài giảng Thiết kế Web 19 18/01/2019 Bài giảng Thiết kế Web 20 6.1. Các thẻ định dạng văn bản 6.1. Các thẻ định dạng văn bản Ví dụ: Ví dụ: Thu dinh dang van ban ĐOẠN NÀY CÓ CÁC DÒNG: Dòng này đậm Dòng này nghiêng Dòng này gạch dưới Dòng này vừa đậm vừa nghiêng Giải và biện luận PT: aX2+bX+c=0 Công thức hoá học: H2SO4 Đoạn này chữ lớn quá 18/01/2019 Bài giảng Thiết kế Web 21 18/01/2019 Bài giảng Thiết kế Web 22 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 không đánh số thứ tự  Danh sách có đánh số thứ tự Mục 1 của danh sách Mục 1 của danh sách Mục 2 của danh sách Mục 2 của danh sách ....... ....... Mục n của danh sách Mục n của danh sách  Thay đổi kiểu dáng cho chỉ mục  Kiểu STT cho toàn văn bản danh sách  Thay đổi kiểu dáng cho chỉ mục  Kiểu STT cho 1 mục  : Áp dụng cho tất cả các mục  Trị: 1,a,A,i,I tương ứng 1,2,3...; a,b,c...; A,B,C...; i,ii,iii...; hoặc  : Áp dụng cho 1 mục chỉ định I,II,III...  Các trị thuộc tính: Disc: Dấu tròn đen (Mặc định), square: Hình vuông đ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 4
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 cả các mục THIẾT KẾ WEBSITE
6.4. Thẻ canh lề văn bản 6.4. Thẻ canh lề văn bản  Thuộc tính canh lề align được sử dụng để canh lề cho các phần tử HTML trong trang Web như văn bản, hình ảnh…Thuộc tính này được đặt trong các thẻ như , , , ,,…  Các giá trị cho tham số align=left (Canh lề trái), center (Canh giữa), right (Canh lề phải) 18/01/2019 Bài giảng Thiết kế Web 31 18/01/2019 Bài giảng Thiết kế Web 32 6.5. Vẽ một đường thẳng nằm ngang 6.6. Sử dụng màu và ký tự đặc biệt  Màu:  Cú pháp:  Để xác lập màu có thể dùng Tên màu hay Trị thập lục phân tương  Không có thẻ  Vẽ đường thẳng với lề, màu, có bóng hay không, độ dày (size) và chiều dài (width). 18/01/2019 Bài giảng Thiết kế Web 33 18/01/2019 Bài giảng Thiết kế Web 34 6.6. Sử dụng màu và ký tự đặc biệt 6.7. Thẻ chèn âm thanh, hình ảnh  Ký tự đặc biệt: a. Chèn hình ảnh:  Nhập Mã tên hay Mã số của ký tự tương ứng  Cú pháp:
6.7. Thẻ chèn âm thanh, hình ảnh 6.7. Thẻ chèn âm thanh, hình ảnh b. Chèn video: c. Nhúng video vào trang Web:  Cú pháp:  Cú pháp:  Autoplay: thuộc tính quy định với trình duyệt đoạn video sẽ được chơi ngay khi trang được load  Control: Hiển thị trình điều khiển video trên trình duyệt  width, height: thuộc tính chỉ định kích thước của video  Poster: thuộc tính chỉ định cho trình duyệt load hình ảnh ban đầu  src: Đường link của video. của video  frameborder: đường viền quanh video  Width, height: thuộc tính chỉ định kích thước của video  allowfullscreen: cho phép xem video ở chế độ đầy màn hình.  Muted: thuộc tính này cho phép tắt tiếng của video.  Loop: thuộc tính này sẽ kích hoạt đoạn video phát lại  Preload: cho phép tải đoạn video ngay khi tải trang web, giảm thời gian tải video Minh họa Minh họa 18/01/2019 Bài giảng Thiết kế Web 37 18/01/2019 Bài giảng Thiết kế Web 38 6.7. Thẻ chèn âm thanh, hình ảnh 6.8. Thẻ định dạng bảng e. Chèn âm thanh:  Bảng là một cấu trúc gồm nhiều hàng giao với nhiều cột là kỹ thuật  Cú pháp: trình bày các thành phần trên trang web (Thiết kế bố cục trang web).  Cú pháp: nội dung tiêu đề cột 1 nội dung tiêu đề cột 2 .... nội dung ô 1 dòng 1 nội dung ô 2 dòng 1 .... ....... Minh họa 18/01/2019 Bài giảng Thiết kế Web 39 18/01/2019 Bài giảng Thiết kế Web 40 6.8. Thẻ định dạng bảng 6.8. Thẻ định dạng bảng Định dạng Table Định dạng Table  Tạo đường viền.  Xác lập màu, ảnh nền cho bảng, hàng, ô ....... Thuộc tính Ý nghĩa Màu nền cho toàn bảng  Thiết lập độ rộng, chiều cao và canh lề bảng Ảnh nền cho toàn bảng ....... Màu nền cho toàn hàng Ảnh nền cho toàn hàng  n: Độ rộng, chiều cao cố định tính bằng pixel Hoặc % kích Màu nền cho ô thước cửa sổ .  “Center” / ”Left”/ ”Right”: Canh giữa, Canh trái, Canh phải Ảnh nền cho ô cửa sổ trình duyệt, văn bản sẽ cuộn quanh bảng. Màu nền cho ô tiêu đề Ảnh nền cho ô tiêu đề 18/01/2019 Bài giảng Thiết kế Web 41 18/01/2019 Bài giảng Thiết kế Web 42 7
6.8. Thẻ định dạng bảng 6.8. Thẻ định dạng bảng Định dạng Table Định dạng Table  Định dạng ô  Trộn ô: Dùng thuộc tính RowSpan và ColSpan cho thẻ TD, TH Thuộc tính Ý nghĩa Canh theo chiều ngang: Left, Right, Center Thuộc tính Ý nghĩa Canh theo chiều dọc: Top, Bottom, Middle Tạo ô có độ cao n hàng Canh hàng tiêu đề theo chiều ngang Tạo ô có độ rộng n cột Canh hàng tiêu đề theo chiều dọc Tạo ô tiêu đề có độ cao n hàng Canh theo chiều ngang các ô trong hàng Tạo ô tiêu đề có độ rộng n cột Canh theo chiều dọc các ô trong hàng  CellSpacing=“n” Khoảng cách giữa các ô.  CellPadding=“n” Khoảng cách quanh nội dung ô Pixel. 18/01/2019 Bài giảng Thiết kế Web 43 18/01/2019 Bài giảng Thiết kế Web 44 6.8. Thẻ định dạng bảng 6.8. Thẻ định dạng bảng  Ví dụ:  Ví dụ: 18/01/2019 Bài giảng Thiết kế Web 45 18/01/2019 Bài giảng Thiết kế Web 46 6.9. Thẻ di chuyển văn bản 6.10. Thẻ tạo liên kết cho phép truy cập đến các trang khác trên cùng máy tính Chuỗi văn bản chạy hay ở máy tính khác.  Tài liệu liên kết có thể là các tập tin: Hình ảnh, âm thanh,  Hiệu ứng: Multimedia, HTML . . . Khi Click vào liên kết sự truy cập  Scroll:Bắt đầu từ 1 cạnh biến mất ở cạnh kia tại địa chỉ truy cập sẽ thực hiện tự động  Slide:Bắt đầu từ 1 cạnh dừng lại ở cạnh kia  Alternate:Bắt đầu từ 1 cạnh chuyển ngược lại ở cạnh kia  Cú pháp:  Hướng: Left, Right, Up, Down Hướng bắt đầu  n1: Số lần lặp ... siêu văn bản  n2: Khoảng cách(Pixel) giữa mỗi lần lặp  n3: Thời gian chờ giữa mỗi lần lặp. href Địa chỉ của trang web được liên kết, hay tên một bookmark nào đó. name Đặt tên cho bookmark. title Văn bản hiển thị khi di chuột trên siêu liên kết. 18/01/2019 Bài giảng Thiết kế Web 47 18/01/2019 Bài giảng Thiết kế Web 48 8
6.10. Thẻ tạo liên kết 6.10. Thẻ tạo liên kết Liên kết cục bộ (Local Link) Liên kết từ xa (Remote Link)  Là liên kết đến tài liệu lưu trữ trên máy khác. Liên kết đến 1 địa chỉ  Là liên kết đến các tài liệu Trên cùng máy . URL  Nhãn liên kết Nhãn liên kết  VD: Giới thiệu VD: Website tin tức VN  Liên kết đến 1 địa chỉ Email  Đến 1 vị trí trên cùng trang Web Nhãn liên kết  Nhãn liên kết VD:Gởi Mail Sẽ mở chương trình mail mặc định để soạn và gửi thư.  Khai báo đích đến: . . .  Dùng hình ảnh làm nhãn liên kết.  Ghi chú: Tên đích ở bất cứ vị trí nào trên cùng tập tin.  Đến 1 vị trí trên trang web khác:  Mở liên kết trong 1 cửa sổ riêng.
6.11. Các thẻ FORM 6.11. Các thẻ FORM Label: First name:  Cú pháp thẻ INPUT:  Là thành phần không bắt buộc 18/01/2019 Bài giảng Thiết kế Web 55 18/01/2019 Bài giảng Thiết kế Web 56 6.11. Các thẻ FORM 6.11. Các thẻ FORM Hộp nhập văn bản 1 dòng (Oneline Textbox) Hộp nhập văn bản 1 dòng (Oneline Textbox)  Sử dụng để nhập các văn bản ngắn (trên 1 dòng) hoặc mật  Ví dụ: khẩu  Thẻ: ĐĂNG NHẬP DIỄN ĐÀN  Thuộc tính: Tên đăng nhập:  name=“tên_đt”: quan trọng Mật khẩu:  type=“text”:Ô nhập văn bản thường  type=“password”: ô nhập mật khẩu  value=“giá trị mặc định”  maxlength=”m”: Số ký tự tối đa có thể nhập  size=“n”: Chiều dài tính bằng số ký tự  required: Bắt buộc phải nhập thông tin vào.  placeholder=“text”: Văn bản hiển thị khi chưa nhập thông tin 18/01/2019 Bài giảng Thiết kế Web 57 18/01/2019 Bài giảng Thiết kế Web 58 6.11. Các thẻ FORM 6.11. Các thẻ FORM Checkbox Option Button (Radio Button)  Cho phép chọn nhiều lựa chọn trong một nhóm lựa chọn được  Cho phép chọn một lựa chọn trong một nhóm lựa chọn được đưa ra. đưa ra bằng cách đánh dấu (“tích”).  Trên 1 form có thể có nhiều nhóm lựa chọn kiểu này.  Thẻ : Mỗi ô cần 1 thẻ  Thẻ : mỗi ô nhập cần 1 thẻ  Thuộc tính:  Thuộc tính:  name=“tên_đt”: quan trọng. Các đối tượng cùng tên thì thuộc cùng nhóm.  name=“tên_đt”: quan trọng  type=“radio”  type=“checkbox”  value=“giá trị”: đây là giá trị chương 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ẽ nhận được nếu NSD chọn  checked: nếu có thì nút này mặc định được chọn ô này.  checked: nếu có thì nút này mặc định được chọn 18/01/2019 Bài giảng Thiết kế Web 59 18/01/2019 Bài giảng Thiết kế Web 60 10
6.11. Các thẻ FORM 6.11. Các thẻ FORM Nút lệnh (Button) Thêm các kiểu mới:  Sử dụng để NSD ra lệnh thực hiện công việc.  search  Trên web có 3 loại nút:  range  submit: Tự động ra lệnh gửi dữ liệu  reset: đưa mọi dữ liệu về trạng thái mặc định  datetime  normal: người lập trình tự xử lý  email  Thẻ:  date  Thuộc tính:  color  name=“tên_ĐT”: thường không quan trọng  type=“submit”: nút submit  url  type=“reset”: nút reset  month  type=“button”: nút thông thường (normal), ít sử dụng.  tel  value=“tiêu đề nút”  week  Có thể dùng:   number  Để tạo nút lệnh.  time 18/01/2019 Bài giảng Thiết kế Web 61 18/01/2019 Bài giảng Thiết kế Web 62 Thêm các kiểu mới: Thêm các kiểu mới:
Thêm các kiểu mới: Thêm các kiểu mới: 18/01/2019 Bài giảng Thiết kế Web 67 18/01/2019 Bài giảng Thiết kế Web 68 Thêm các kiểu mới: 6.11. Các thẻ FORM chọn  NSD có thể chọn 1 phần tử trong danh sách xổ xuống bằ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 1 phần tử trong danh sách:  Tiêu đề phần tử  Thuộc tính:  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 Ghi chú: Để thực hiện liên kết khi người dùng chọn 1 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 18/01/2019 Bài giảng Thiết kế Web 70 6.11. Các thẻ FORM 6.11. Các thẻ FORM Combo Box (Drop-down menu) Ví dụ: Listbox  Tương tự như Combo box, tuy nhiên có thể nhìn thấy nhiều phần liên kết website tử cùng lúc, có thể lựa chọn nhiều phần tử  Thẻ: … -------- Tin tuc ---------  Thuộc tính: tương tự của combo tuy nhiên có 2 thuộc tính khác: 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ử cùng lúc Báo Tuổi Trẻ  Thẻ … tương tự của 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 bản nhiều dòng (TextArea)  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 trên dòng. 18/01/2019 Bài giảng Thiết kế Web 73 18/01/2019 Bài giảng Thiết kế Web 74 6.12. Các thẻ cấu trúc trang 6.12. Các thẻ cấu trúc trang Untitled Document Minh họa 18/01/2019 Bài giảng Thiết kế Web 75 18/01/2019 Bài giảng Thiết kế Web 76 6.12. Các thẻ cấu trúc trang  Thẻ div: Nội dung trong thẻ div  Tạo ra một khối  Thẻ span: Nội dung trong thẻ span  Không tạo khối,  Dùng để chèn một số định dạng css vào trong cùng một dòng. 18/01/2019 Bài giảng Thiết kế Web 77 Phone: 0274. 3834930 Website: http://et.tdmu.edu.vn 13