Thiet Ke Web

  • December 2019
  • PDF
Download

This document was uploaded by user and they confirmed that they have the permission to share it. If you are author or own the copyright of this book, please report to us by using this DMCA report form. Report DMCA

Overview

Download & View Thiet Ke Web as PDF for free.

More details

  • Words: 25,163
  • Pages: 239
TRƯỜNG ĐẠI HỌC ĐÀ LẠT KHOA CÔNG NGHỆ THÔNG TIN

KS. Thái Duy Quý

Giáo trình tóm tắt

THIẾT KẾ WEB (Lưu hành nội bộ) Tài liệu dành cho học viên lớp Thiết kế Web ngắn hạn

Đà Lạt, ngày 10/11/2008

Thiết kế web

Thái Duy Quý

Mục lục: ......................................................................................................................................6 Phần 1: Giới thiệu tổng quan. ............................................................................................7 1 Bài mở đầu: Giới thiệu tổng quan về hệ thống web......................................................8 1.1. Nội dung: .............................................................................................................8 1.2. Một số khái niệm: ................................................................................................8 1.3. Phân loại website: ..............................................................................................11 1.4. Một số bước chính trong phát triển website: .....................................................12 1.5. Một số vấn đề cần chú ý: ...................................................................................12 1.6. Công bố website trên Internet: ...........................................................................13 6.a. Các điều kiện cần thiết: ..................................................................................13 6.b. Xây dựng website: .........................................................................................14 2 Lab1: Cách tạo Domain Free......................................................................................17 Phần 2: HTML...................................................................................................................25 1 Bài 1: Giới thiệu các thẻ HTML cơ bản......................................................................26 1.1. Giới thiệu: ..........................................................................................................26 1.2. Thẻ(tags): ...........................................................................................................26 1.3. Cấu trúc một trang web: .....................................................................................27 3.a. Soạn thảo trang web đầu tiên: ........................................................................27 3.b. Thẻ định dạng ký tự: ......................................................................................29 3.c. Tiêu đề, đoạn văn, ngắt dòng: ........................................................................29 3.d. Danh sách: ......................................................................................................29 3.e. Chèn ảnh: ........................................................................................................30 2 Lab1: Dùng các thẻ HTML thiết kế trang web Excite.htm........................................31 2.1. Yêu cầu: .............................................................................................................31 2.2. Hướng dẫn giải: ..................................................................................................31 2.3. Kết quả hiển thị: .................................................................................................33 3 Bài 2: Các thẻ HTML(tiếp)........................................................................................35 3.1. Siêu liên kết (Hyperlink): ...................................................................................35 3.2. Bảng biểu: ..........................................................................................................36 4 Lab1: Dùng các thẻ HTML thiết kế trang web Free.com..........................................38 4.1. Yêu cầu: .............................................................................................................38 4.2. Hướng dẫn giải: ..................................................................................................38 5 Lab2: Dùng các thẻ HTML thiết kế trang web Scaal.com.........................................44 5.1. Yêu cầu: .............................................................................................................44 5.2. Hướng dẫn giải: ..................................................................................................45 6 Bài 3: Các thẻ HTML Form........................................................................................54 6.1. Các đối tượng nhập dữ liệu: ...............................................................................54 6.2. Form: ..................................................................................................................54 6.3. Hộp nhập văn bản 1 dòng (Oneline Textbox): ...................................................55 6.4. Checkbox: ..........................................................................................................55 6.5. Option Button (Radio Button): ..........................................................................56 6.6. Nút lệnh (Button): ..............................................................................................56 6.7. Combo Box (Drop-down menu): .......................................................................56

Tài liệu dành cho Lớp ngắn hạn Thiết kế web

Trang 2

Thiết kế web

Thái Duy Quý

6.8. Listbox: ..............................................................................................................57 6.9. Hộp nhập văn bản nhiều dòng (TextArea): ........................................................57 7 Lab1: Dùng các thẻ Form thiết kế trang web về phiếu đăng ký................................59 7.1. Yêu cầu: .............................................................................................................59 7.2. Hướng dẫn giải: ..................................................................................................60 8 Bài 4: Luyện tập: Thiết kế trang web sp.co................................................................64 1.a. Yêu cầu: ..........................................................................................................65 1.b. Hướng dẫn giải: ..............................................................................................66 Phần 3: Macromedia Dreamweaver...................................................................................73 1 Cách tạo ra một project cho website. .........................................................................73 2 Bài 1: Giới thiệu về Macromedia Dreamweaver 8.0..................................................74 2.1. Giới thiệu: ..........................................................................................................74 1.a. Giao diện: Start Page: .....................................................................................74 1.b. Cửa sổ tài liệu: ...............................................................................................75 2.2. Tổ chức trang web: .............................................................................................77 2.3. Các công cụ chính: .............................................................................................80 2.4. Luyện tập: ..........................................................................................................83 3 Lab1: Thiết kế trang web: Beauty.com ......................................................................85 3.1. Yêu cầu: .............................................................................................................85 3.2. Hướng dẫn giải: ..................................................................................................85 3.3. Kết quả: ..............................................................................................................88 4 Bài 2: Một số tính năng trong Macromedia Dreamweaver 8.0...................................89 4.1. Background: .......................................................................................................89 4.2. Background-color: .............................................................................................89 4.3. Background – Image: .........................................................................................89 4.4. Lớp – Layer: .......................................................................................................90 4.5. Các thao tác trên Layer: .....................................................................................91 5 Lab1: Thiết kế trang web: Temp.com ........................................................................98 5.1. Yêu cầu: .............................................................................................................98 5.2. Hướng dẫn giải: ..................................................................................................99 6 Bài 3: Luyện tập: Thiết kế trang web HomeBank.com.............................................105 6.1. Yêu cầu: ...........................................................................................................105 6.2. Hướng dẫn giải: ................................................................................................105 Phần 4: Cơ bản về Photoshop..........................................................................................110 1 Bài 1: Giới thiệu chung về Photoshop. ....................................................................111 1.1. Giới thiệu: .........................................................................................................111 1.2. Giao diện: .........................................................................................................111 1.3. Mở một file hình: .............................................................................................111 2 Bài 2: Công cụ Slide from guide trong Photoshop. .................................................113 2.1. Cách thực hiện: ................................................................................................113 3 Lab1: Tạo website HTML Lenam Wedding..............................................................119 3.1. Yêu cầu: ............................................................................................................119 3.2. Hướng dẫn giải: ................................................................................................119 4 Lab2: Tạo website HTML LG..................................................................................123 4.1. Yêu cầu: ...........................................................................................................123 4.2. Hướng dẫn giải: ................................................................................................123

Tài liệu dành cho Lớp ngắn hạn Thiết kế web

Trang 3

Thiết kế web

Thái Duy Quý

Phần 5: CSS trong Macomedia Dreamweaver 8.0...........................................................127 1 Bài 1: Định dạng website bằng CSS. ......................................................................128 1.1. CSS ..................................................................................................................128 1.2. Cách chèn CSS: ................................................................................................128 1.3. Khai báo và sử dụng style: ...............................................................................129 1.4. Các trường hợp sử dụng CSS:...........................................................................131 1.5. Phương pháp thực hiện CSS trong Macromedia Dreamweaver: .....................135 2 Lab1: Thiết kế trang web: Online Comunication....................................................137 2.1. Yêu cầu: ...........................................................................................................137 2.2. Thiết lập website cho bài tập.............................................................................139 2.3. Thiết lập thuộc tính trang, Chọn thẻ Title/Encoding trong chức năng Page Properties:................................................................................................................140 3 Lab2: Thiết kế trang web: ASEAN...........................................................................143 3.1. Yêu cầu: ...........................................................................................................143 3.2. Hướng dẫn giải:.................................................................................................144 4 Lab3: Thiết kế trang web: Beauty.............................................................................148 4.1. Yêu cầu: ...........................................................................................................148 4.2. Hướng dẫn giải: ................................................................................................148 Phần 6: Các tính năng nâng cao Macomedia Dreamweaver 8.0......................................153 5 Bài 1: Đối tượng Form, Movie.................................................................................154 5.1. Đối tượng Form: ..............................................................................................154 5.2. Cách sử dụng: ...................................................................................................154 2.a. Thẻ Form: .....................................................................................................155 2.b. Thẻ Text Field: .............................................................................................155 2.c. Thẻ Hidden Field: .........................................................................................156 2.d. Thẻ Textarea : ...............................................................................................156 2.e. Thẻ CheckBox: .............................................................................................157 2.f. Thẻ Radio Button: .........................................................................................157 2.g. Thẻ Radio Group...........................................................................................158 2.h. Thẻ List Item.................................................................................................158 2.i. Thẻ Button.....................................................................................................158 5.3. Đối tượng Media: ............................................................................................161 5.4. Cách thực hiện: ................................................................................................161 5.5. Chèn đối tượng Movie: ....................................................................................162 5.6. Chèn Movie chạy nhạc nền cho trang web:......................................................163 5.7. Chèn đối tượng Flash: ......................................................................................163 6 Lab1: Thiết kế trang Đăng ký...................................................................................167 6.1. Yêu cầu: ...........................................................................................................167 6.2. Hướng dẫn giải: ................................................................................................168 7 Lab2: Thiết kế trang Feedback .................................................................................172 7.1. Yêu cầu: ...........................................................................................................172 7.2. Hướng dẫn giải: ................................................................................................173 8 Bài 2: Thiết kế web với Frameset và các tính năng DHTML...................................177 8.1. Thiết kế web với Frameset: ..............................................................................177 1.a. Giới thiệu: ....................................................................................................177 1.b. Định dạng cho Frame....................................................................................179

Tài liệu dành cho Lớp ngắn hạn Thiết kế web

Trang 4

Thiết kế web

Thái Duy Quý

8.2. Thiết kế Frameset bằng Macromedia Dreamweaver. .......................................180 8.3. Các tính năng DHTML trong thiết kế web. .....................................................182 9 Lab1: Thiết kế trang Trang dân gian Việt Nam.........................................................186 9.1. Yêu cầu: ...........................................................................................................186 9.2. Hướng dẫn giải: ................................................................................................186 10 Lab2: Tự tạo trang web bằng mẫu có sẵn. .............................................................192 10.1. Yêu cầu: .........................................................................................................192 10.2. Cách thực hiện: ..............................................................................................192 Phần 7: Cơ bản về ngôn ngữ Javascript...........................................................................194 1 Bài 1: Giới thiệu và áp dụng Javascipt......................................................................195 1.1. Giới thiệu: ........................................................................................................195 1.2. Nhúng JavaScript vào trong tập tin HTML: ....................................................195 1.3. Sử dụng tập tin JavaScript bên ngoài: ..............................................................195 1.4. Làm việc với các dialog boxes..........................................................................196 1.5. Tạo biến trong JavaScript:................................................................................196 1.6. Toán tử trong Javascript:...................................................................................197 1.7. Cấu trúc điều khiển trong Javascript.................................................................197 1.8. Sử dụng đối tượng Document: .........................................................................198 1.9. Sử dụng đối tượng window...............................................................................199 1.10. Làm việc với status bar: .................................................................................199 1.11. Mở và đóng các cửa sổ: ..................................................................................200 1.12. Sử dụng đối tượng string: ..............................................................................201 2 Lab1: Làm quen với ngôn ngữ Javascript.................................................................202 3 .................................................................................................................................215 4 Lab2: Một số mã lệnh cơ bản....................................................................................216 5 Lab3: Một số mã lệnh nâng cao. ..............................................................................224 5.1. Lab4: Tham khảo các trang web về Javascript. ...............................................234 Phần 8: Phụ lục................................................................................................................235 1 Phụ lục các lớp CSS(lab 1 – bài 1 – phần 5): ...........................................................237 2 Phụ lục các lớp CSS(lab 1 – bài 1 – phần 6): ...........................................................238 3 Phụ lục các lớp CSS(lab 2 – bài 1 – phần 6): ...........................................................239

Tài liệu dành cho Lớp ngắn hạn Thiết kế web

Trang 5

Thiết kế web

Thái Duy Quý

Lời nói đầu Ngày nay, khi mà hệ thống web đang đạt tới giai đoạn phát triển mạnh mẽ và nhu cầu rất lớn từ người dùng thì việc biết và xây dựng được một website là một nhu cầu tất yếu không chỉ dành cho người học Công nghệ thông tin mà là cho bất kỳ một ai ham thích khám phá công nghệ. Chính vì những yếu tố đó mà khoa Công nghệ thông tin được sự đồng ý của trường đã mở khóa học ngắn hạn có tên là Thiết kế web. Khóa học này cung cấp cho học viên các khái niệm ban đầu về hệ thống website, và theo đó sẽ từng bước xây dựng một trang web cá nhân đơn giản theo sáng tạo của mỗi người. Khóa học cũng tạo điều kiện cho sinh viên nắm bắt được các công cụ và các phần cần thiết để có thể tiếp tục học các phần web nâng cao hơn. Tác giả xin chân thành cảm ơn các thầy cô giáo trong khoa Công nghệ thông tin, các bạn sinh viên và học viên đã góp ý và chỉnh sửa cho giáo trình này. Trong quá trình soạn thảo chắc chắn còn nhiều thiếu sót, rất mong được sự góp ý của quý độc giả. Mọi chi tiết góp ý xin gửi về địa chỉ: Thái Duy Quý, khoa Công nghệ thông tin, đại học Đà Lạt. Hoặc email: [email protected]

Tài liệu dành cho Lớp ngắn hạn Thiết kế web

Trang 6

Thiết kế web

Thái Duy Quý

Phần 1: Giới thiệu tổng quan. Lớp Thiết kế web là một lớp ngắn hạn được tổ chức tại khoa CNTT dành cho các học viên trong và ngoài khoa Công nghệ thông tin nhằm giúp cho học viên biết và thiết kế được trang web đơn giản trên Html, CSS, Javascript. Nội dung học: 08 bài chia thành các phần: – Các khái niệm liên quan đến website – Làm quen và thiết kế với các thẻ HTML –

Thiết kế web trên phần mềm Macromedia Dreamwever 8.0

– Tìm hiểu CSS – Tìm hiểu Javascript. Tương ứng với mỗi bài lý thuyết sẽ có bài lab tương ứng đi kèm, thực hiện ngay tại lớp. Và sẽ có các bài kiểm tra tương ứng giữa các nội dung.

Tài liệu dành cho Lớp ngắn hạn Thiết kế web

Trang 7

Thiết kế web

1

Thái Duy Quý

Bài mở đầu: Giới thiệu tổng quan về hệ thống web.

1.1.

Nội dung:  Một số khái niệm  Phân loại trang web  Một số bước chính trong phát triển website  Công bố website trên internet  Tạo Domain Free trên Internet

1.2.

Một số khái niệm: Mạng máy tính(Computer Network): là hệ thống các máy tính được kết

nối với nhau nhằm mục đích trao đổi dữ liệu thông qua mạng. Có nhiều loại mạng như: LAN, MAN, WAN, Internet, ... Giao thức(Protocol): là tập hợp các quy tắc được thống nhất giữa các máy tính trong mạng nhằm thực hiện trao đổi dữ liệu được chính xác. Ví dụ: TCP/IP, HTTP, FTP,… Địa chỉ IP: Để xác định một máy tính trong mạng ta dựa trên giao thức TCP/IP. Hai máy tính trong mạng có 2 địa chỉ IP khác nhau. Các địa chỉ IP có dạng x.y.z.t (0 ≤ x, y, z, t ≤ 255). Ví dụ: 203.162.18.59: địa chỉ máy chủ web của ĐHSP Hà Nội. Đặc biệt: địa chỉ: 127.0.0.1 (địa chỉ loopback) là địa chỉ của chính máy tính đang sử dụng dùng để thử mạng. Tên miền(Domain Name): Tên miền là tên được gắn với 1 địa chỉ IP do máy chủ DNS ánh xạ, thường ở dạng văn bản nên thân thiện với con người và dễ dàng sử dụng.

Tài liệu dành cho Lớp ngắn hạn Thiết kế web

Trang 8

Thiết kế web

Thái Duy Quý

Tên miền được chia thành nhiều cấp, phân biệt bởi dấu chấm (.). Đánh số cấp lần lượt từ phải sang trái bắt đầu từ 1. Cấp lớn hơn là con của cấp nhỏ hơn. Ví dụ: itt.dlu.edu.vn gắn với 203.162.18.59 trong đó: –

vn: Nước Việt Nam (Cấp 1)

–

edu: Tổ chức giáo dục (Cấp 2)

–

dlu: Tên cơ quan (Cấp 3)

–

it: đơn vị nhỏ trong cơ quan (Cấp 4)

Đặc biệt: Tên localhost được gắn với 127.0.0.1 Máy chủ-máy phục vụ(Server): Là máy tính chuyên cung cấp tài nguyên, dịch vụ cho máy tính khác và thường được cài các phần mềm chuyên dụng để có khả năng cung cấp các dịch vụ cho các máy con hoạt động. Một máy chủ có thể dùng cho một hay nhiều mục đích. Tên máy chủ thường gắn với mục đích sử dụng. Ví dụ: – File server: máy chủ chuyên dùng cho việc lưu trữ và tải file. – Application server: Máy chủ chạy các chương trình ứng dụng –

Mail server: Máy chủ chuyên dùng cho lưu trữ thư điện tử.

–

Web server: Máy chủ dùng cho hệ thống web.

Trên thực tế thì các máy chủ thường có cấu hình cao, khả năng hoạt động ổn định, bên cạnh đó máy chủ còn phải có hệ thống phục hồi(backup) để đề phòng các trường hợp gặp sự cố(Dead). Tài liệu dành cho Lớp ngắn hạn Thiết kế web

Trang 9

Thiết kế web

Thái Duy Quý

Máy khách(Client): Là máy khai thác dịch vụ của máy chủ và phải kết nối với máy chủ. Với mỗi dịch vụ, thường có các phần mềm chuyên biệt để khai thác. Một máy tính có thể vừa là khách(client) vừa là chủ(server) nghĩa là máy tính đó có thể khai thác dịch vụ của chính nó. Cổng dịch vụ(Service Port) : Là một số từ 0 đến 65535 nhằm xác định dịch vụ của máy chủ. Lưu ý là 2 dịch vụ khác nhau thì sẽ chiếm các cổng khác nhau. Mỗi dịch vụ thường chiếm các cổng xác định. Ví dụ: Dịch vụ Web có cổng 80, dịch vụ truyền tải file FTP sử dụng cổng 21, ... Chuỗi định vị tài nguyên (địa chỉ): URL (Uniform Resource Locator): Tài nguyên là các file trên mạng. Một URL dùng để xác định vị trí và cách khai thác file đó. Cấu trúc: giao_thức://địa_chỉ_máy:cổng/đường_dẫn/tên_file Ví dụ: http://www.dlu.edu.vn:8080/html/test.htm Trong một số trường hợp mặc định, nhiều thành phần có thể bỏ qua: –

Giao thức, cổng: Được trình duyệt đặt mặc định.

– Tên file: được máy chủ đặt mặc định Trang web(Web page): Là một trang chứa nội dung, có thể được viết bằng nhiều ngôn ngữ khác nhau nhưng kết quả trả về client là HTML, máy khách muốn đọc dữ liệu thì phải dùng tới các trình duyệt(Browser). Web site: Là tập hợp các trang web có nội dung thống nhất phục vụ cho một mục đích nào đó. Vì dụ: vnexpress.net là web site tin tức nhanh của Việt Nam. World Wide Web (WWW): Là tập hợp các web site trên mạng internet. Web server: Là một máy tính hoặc phần mềm phục vụ web. Hiện nay có một số phần mềm web server chuyên dụng như: – Apache: mã nguồn mở – Internet Information Services (IIS): Sản phẩm của Microsoft

Tài liệu dành cho Lớp ngắn hạn Thiết kế web

Trang 10

Thiết kế web

Thái Duy Quý

Web Browser: Là phần mềm chạy trên máy client để khai thác dịch vụ web. Một số Web browser thông dụng: – Nescape – Mozilla Firefox – Google Chrome.

1.3.

–

Internet Explorer (IE): tích hợp sẵn trong windows.

–

......

Phân loại website:

Dựa vào công nghệ phát triển, có thể phân web thành 2 loại: –

Web tĩnh: Là web được thiết kế không tương tác với người dùng, chỉ nhằm mục đích giới thiệu. Các đặc điểm chính của web tĩnh: •

Dễ phát triển.

•

Sử dụng chủ yếu là HTML.

•

Người làm web tĩnh thường dùng các công cụ trực quan để tạo ra trang web như MS Pront Page MS Word, Macromedia Dreamweaver, NotePad, ....

Tài liệu dành cho Lớp ngắn hạn Thiết kế web

Trang 11

Thiết kế web –

Thái Duy Quý

Web động: Là web tương tác được với người dùng thông qua hệ quản trị Cơ sở dữ liệu. Các đặc điểm chính của web động: •

Khó phát triển hơn.

•

Tương tác mạnh

•

Sử dụng nhiều ngôn ngữ khác nhau như ASP, ASP.NET, PHP, JSP, .....

•

Thường phải viết nhiều mã lệnh và phải lập trình bằng một ngôn ngữ nào đó.

1.4.

Một số bước chính trong phát triển website:

Tương tự với phân tích và thiết kế hệ thống. –

Đặc tả: Mô tả giao diện, các chức năng cần thiết.

–

Phân tích: Phân tích xem làm từng chức năng sẽ phải cần có công tụ gì, làm như thế nào.

–

Thiết kế: Dùng các công cụ để thiết kế website.

–

Lập trình: Dùng ngôn ngữ lập trình kết hợp với thiết kế để tạo ra sản phẩm.

–

Kiểm thử: Quá trình này kiểm tra lại toàn bộ hệ thống trước khi đưa ra chạy thực tế.

1.5.

Một số vấn đề cần chú ý:

 Đặc tả, trả lời các câu hỏi:

– Web để làm gì? – Ai dùng? –

Trình độ người dùng?

– Nội dung, hình ảnh?  Phân tích, trả lời các câu hỏi:

– Mối liên quan giữa các nội dung? – Thứ tự các nội dung?  Thiết kế, trả lời các câu hỏi:

– Sơ đồ cấu trúc website Tài liệu dành cho Lớp ngắn hạn Thiết kế web

Trang 12

Thiết kế web

Thái Duy Quý

– Giao diện – Tĩnh hay động – CSDL – Nội dung từng trang – Liên kết giữa các trang  Xây dựng, trả lời các câu hỏi:

– Cấu trúc thư mục – Các modul dùng chung …  Kiểm thử, trả lời các câu hỏi:

– Kiểm tra trên nhiều trình duyệt – Kiểm tra trên nhiều loại mạng – Kiểm tra tốc độ – Kiểm tra các liên kết – Thử các lỗi bảo mật – …

1.6. 6.a.

Công bố website trên Internet: Các điều kiện cần thiết:

 Xây dựng website: thao tác này phải thực hiện hoành thành thông qua các

quá trình trên và phải có quyền sử dụng hợp pháp đối với websitr đó.  Tìm Domain: –

Sử dụng tên miền con miễn phí: thông qua mạng có thể tìm các tên miền miễn phí như: domaindlx. Webng, ....

–

Đăng ký tên miền riêng với các nhà cung cấp tên miền ở trong và ngoài nước như: Mắt Bảo, VDC, .....

 Hosting –

Sử dụng miễn phí của các nhà cung cấp, thường thì bị hạn chế dung lượng.

Tài liệu dành cho Lớp ngắn hạn Thiết kế web

Trang 13

Thiết kế web

Thái Duy Quý

–

Thuê không gian riêng: Hiện nay có rất nhiều nhà cung cấp cho phép thuê hosting để lưu trữ và người dùng sẽ trả tiền hàng tháng hoặc hàng năm thông qua tài khoản.

–

Tự host website của mình: Nếu hệ thống bảo mật tốt, người dùng có thể tự xây dựng host cho mình.

 Duy trì và phát triển và quảng bá website: Trang web đẩy lên mạng muốn

thu hút người xem thì phải bảo trì, phát triển bằng cách cập nhật các nội dung mới, ngoài ra còn phải có phương pháp quảng bá trên các công cụ tìm kiếm. 6.b.

Xây dựng website:

 Thông tin “tĩnh” hay “động” –

Web tĩnh: Xây dựng đơn giản, bắt mắt và lôi cuốn người xem.

–

Web động: Xây dựng hiệu quả, chất lượng và nhiều tính năng.

–

Portal: Tương tác tốt với người dùng, người dùng sẽ có nhiều quyền lợi khi tham gia.

 Giá thành:

– Web tĩnh: Tính theo các kiểu trang

–

•

Trang đơn giản: 70 – 150.000đ/trang

•

Trang hiệu ứng hình ảnh tốt: 150 – 350.000đ/trang

Web động: Tính theo các mục, các khối chức năng, tùy vào mỗi công ty mà có các gói riêng. •

Thiết kế CSDL

•

Các chức năng phía user: đưa tin, phân loại, tìm kiếm…

•

Các chức năng phía Admin: Đăng nhập, xem/thêm/sửa/xóa tin bài, báo cáo, thống kê…

Tóm lại: Từ 5 triệu trở lên. (Thông dụng: 10-30 triệu) Phân tích: Cần phải phân tích được là có nên đăng ký tên miền, thiết kế và duy trì website hay không? Và nếu có thì đăng ký tên miền với tên thế nào, thể loại gì, theo hệ thống của Việt Nam hay theo các hệ thống tên miền bên ngoài. Tài liệu dành cho Lớp ngắn hạn Thiết kế web

Trang 14

Thiết kế web

Thái Duy Quý

Có đủ thẩm quyền và chất lượng để tự xây dựng Host cho website của mình không? Và để phục vụ website, có các phương án như thế nào dành cho: Nhân sự, kinh phí, cơ chế tổ chức, hoạt động, quy trình làm việc, .... Đăng ký tên miền: Trước hết là phải xác định tên của hệ thống website bao gồm: Tên tiếng Việt, tên giao dịch tiếng Anh và tên viết tắt. Sau đó xác định nơi đăng ký tên miền và hosting. Ngày nay với sự phát triển của khoa học kĩ thuật thì thủ tục đăng ký đơn giản, nhanh chóng có kinh phí rẻ. Theo thống kê trung bình Việt Nam từ 450.000 đến 480.000 đ/năm, nước ngoài từ 8 đến 12USD/năm. Hosting: Xác định môi trường vận hành của website là máy chủ Windows(thường hỗ trợ ASP, PHP…, SQL Server, MySQL…, giá thành thường cao) hay máy chủ Linux( thường hỗ trợ PHP, JSP…, MySQL…, giá thành rẻ hơn như độ bảo mật yếu hơn). Ngoài ra còn phải xác định dung lượng thực tế của website, khả năng sẽ mở rộng, xác định băng thông, các dịch vụ đảm bảo an toàn, an ninh, backup dữ liệu… Phát triển website: Sử dụng các chiến lược marketing như thư điện tử(email), đầu tư quảng cáo 1 đợt trên các phương tiện truyền thông (Báo, đài, Tivi…), liên kết với các site cùng loại, giới thiệu lẫn nhau, .... Quảng bá website: Để quảng bá tốt website, có thể theo các phương pháp sau:  Đăng ký Website vào các máy tìm kiếm trong nước và thế giới (search

engine): •

Vietnam Searchengine: Panvietnam, vinaseek…

•

Global Searchengine: google, altavista, hotboot…

 Nâng cao vị trí của Website trong hệ thống xếp hạng Website thế giới. •

Google rank (the important of website: 1-10)

•

Alexa rank: Traffic ranking of website.

 Nâng tầm phát triển Website:

– Tự động hoá dần các chức năng của Website.

Tài liệu dành cho Lớp ngắn hạn Thiết kế web

Trang 15

Thiết kế web

Thái Duy Quý

– Biến Website thành một môi trường kinh doanh thực sự hiệu quả 24/24 trên Internet.

Tài liệu dành cho Lớp ngắn hạn Thiết kế web

Trang 16

Thiết kế web

2

Thái Duy Quý

Lab1: Cách tạo Domain Free.

Domain Free là các domain miễn phí, cho phép người dùng tạo ra các website, lưu trữ và duy trì website. Hiện nay có rất nhiều trang web cho phép người dùng lưu trữ website: 1. Trang web: www.jimdo.com: Tạo nhanh một trang web cá nhân miễn phí

đơn giản và không có quảng cáo:

2. Trang web: www.domaindlx.com:

3. Trang web www.webng.com:

Tài liệu dành cho Lớp ngắn hạn Thiết kế web

Trang 17

Thiết kế web

Thái Duy Quý

4. Trang web: www.unonic.com: cho phép thay đổi tên miền thành đơn giản

hơn. Ví dụ: www.duyquy.domaindlx.com thành www.duyquy.net.tf.

Thường thì cách đẩy 1 website lên mạng là giống nhau, sau đây giới thiệu phương pháp đẩy lên mạng thông qua trang webng:

Tài liệu dành cho Lớp ngắn hạn Thiết kế web

Trang 18

Thiết kế web

Thái Duy Quý

Trên thanh địa chỉ, gõ: www.webng.com, xuất hiện giao diện đăng ký:

Click here

Thiết lập thông tin cá nhân: Tên đầy đủ Địa chỉ Email Tên thành viên Mật khẩu Nhập lại mật khẩu Nhập mã: 4 7 3 7 5 Click chọn

Click here

Ví dụ:

Tài liệu dành cho Lớp ngắn hạn Thiết kế web

Trang 19

Thiết kế web

Thái Duy Quý

Tạo thành công:

Tài liệu dành cho Lớp ngắn hạn Thiết kế web

Trang 20

Thiết kế web

Thái Duy Quý

Kiểm tra email:

Kích hoạt tài khoản:

Tài liệu dành cho Lớp ngắn hạn Thiết kế web

Trang 21

Thiết kế web

Thái Duy Quý

Kích hoạt tài khoản

Đăng nhập để tải web lên:

Trang chủ khi đăng nhập:

Tài liệu dành cho Lớp ngắn hạn Thiết kế web

Trang 22

Thiết kế web

Thái Duy Quý

Click here

Quản lý files:

Tạo file

Tạo thư mục Upload file

Danh sách File và Thư mục

Duyệt một trang web:

Tài liệu dành cho Lớp ngắn hạn Thiết kế web

Trang 23

Thiết kế web

Tài liệu dành cho Lớp ngắn hạn Thiết kế web

Thái Duy Quý

Trang 24

Thiết kế web

Thái Duy Quý

Phần 2: HTML Phần này sẽ cung cấp cho học viên các khái niệm và phương pháp làm việc với các thẻ HTML. Nội dung:  Giới thiệu về HTML  Các thẻ HTML cơ bản  Cách làm việc với các thẻ.  Một số bài lab liên quan.

Tài liệu dành cho Lớp ngắn hạn Thiết kế web

Trang 25

Thiết kế web

1

Thái Duy Quý

Bài 1: Giới thiệu các thẻ HTML cơ bản

1.1.

Giới thiệu: HTML(HyperText Markup Language) là ngôn ngữ đánh dấu siêu văn bản

dùng cho việc viết các trang web. HTML do Tim Berner Lee phát minh và được W3C (World Wide Web Consortium) đưa thành chuẩn năm 1994. HTML sử dụng các thẻ (tags) để định dạng dữ liệu, 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 chỉ dẫn đến kết quả hiển thị không đúng với dự định. Đây gọi là ngôn ngữ thông dịch, khác với ngôn ngữ biên dịch như nhiều ngôn ngữ khác.

1.2.

Thẻ(tags):

HTML có rất nhiều thẻ, mỗi thẻ có 1 tên và mang ý nghĩa khác nhau. Có 2 loại thẻ: thẻ đóng và thẻ mở. Cách viết thẻ: –

Thẻ mở: . Ví dụ: ,

, …

–

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



Chú ý là luôn có thẻ mở nhưng có thể không có thẻ đóng tương ứng. Ví dụ: không có thẻ đóng. Thuộc tính (property) của thẻ: Một thẻ có thể có các thuộc tính nhằm bổ sung tính năng và 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ú ý: là 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; Sự hỗ trợ các thẻ, thuộc tính ở mỗi trình duyệt là khác nhau. Chỉ giống nhau ở các thẻ, thuộc tính cơ bản; Thẻ đóng của thẻ có thuộc tính vẫn viết bình thường (). Trang web đầu tiên: Trang HTML có phần mở rộng (đuôi) là .HTM hoặc .HTML. 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. Ví dụ: MS Word, Notepad, EditPlus, Turbo Pascal,…Bên cạnh đó cũng có nhiều

Tài liệu dành cho Lớp ngắn hạn Thiết kế web

Trang 26

Thiết kế web

Thái Duy Quý

trình soạn thảo HTML cho phép NSD soạn thảo trực quan, kết quả sinh ra HTML tương ứng như: Microsoft FrontPage, Macromedia Dreamweaver, ....

1.3.

Cấu trúc một trang web:

Thẻ: là thẻ mở đầu cho các trang web, yêu cầu phải có. Thẻ: : chứa các giá trị tiêu đề hoặc định dạng chính. Thẻ: : chứa nội dung website. 3.a.

Soạn thảo trang web đầu tiên:

Mở trình soạn thảo văn bản thuần (VD Notepad) gõ vào nội dung như dưới đây, sau đó lưu lại với tên “Index.htm” và chọn Encoding là UTF-8: <TITLE>Chao hoi Chao mung ban den voi HTML

Thử nghiệm: Mở trình duyệt web (IE): –

Vào File/Open, chọn file index.htm vừa lưu

Tài liệu dành cho Lớp ngắn hạn Thiết kế web

Trang 27

Thiết kế web –

Thái Duy Quý

Nhấn OK → Có kết quả như hình dưới đây:

Thay đổi nội dung: –

Quay lại Notepad, sửa lại nội dung trang web rồi nhấn Ctrl+S để lưu lại

–

Chuyển sang IE, nhấn nút Refresh (F5) để thấy kết quả mới

Ghi chú: Các thẻ được nêu tiếp theo mặc định đặt ở trong phần … . Soạn thảo văn bản: Văn bản được soạn thảo như bình thường trong các file HTML. Một số lưu ý: – Mọi khoảng trống, dấu xuống dòng trong HTML được thể hiện trên trang web là 1 khoảng trống duy nhất – Để gõ một 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 hơn 1 ký tự trống):  

•

Dấu nhỏ hơn (<) và lớn hơn (>): <

•

Dấu ngoặc kép (“): "

•

Ký hiệu : ©

•

…

Tài liệu dành cho Lớp ngắn hạn Thiết kế web

>

Trang 28

Thiết kế web –

Thái Duy Quý

Ghi chú trong HTML:

Các thẻ cơ bản trong HTML: 3.b.

Thẻ định dạng ký tự:

 Đậm, nghiêng, gạch chân: …, …, …  Chỉ số trên:<sup>…  Chỉ số dưới: <sub>…  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,…) hoặc viết dạng #RRGGBB, RR, GG, BB ở dạng hexa. Ví dụ: #FFFFFF: Trắng, #FF0000: đỏ,…

3.c.

Tiêu đề, đoạn văn, ngắt dòng:

 Tiêu đề: với kích thước nhỏ dần –

…

– … –
…
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ự

 Xuống dòng:


3.d.

Danh sách: Thẻ danh sách(list) dùng để liệt kê các phần tử. Có 2 loại: Danh sách có thứ

tự 1,2,3,… (Ordered List) và không có thứ tự (Unordered List). Một danh sách phải gồm có nhiều phần tử. Cách tạo danh sách: Tài liệu dành cho Lớp ngắn hạn Thiết kế web

Trang 29

Thiết kế web

Thái Duy Quý

–

Có thứ tự:
    Các phần tử


–

Không có thứ tự:
    Các phần tử


–

Tạo 1 phần tử trong danh sách:
  • Tiêu đề phần tử


    • Chú ý: Một phần tử có thể là 1 danh sách con. 3.e.

    Chèn ảnh:

    Dùng thẻ , đây là một thẻ không có thẻ đóng. Có các thuộc tính: •

    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.

    •

    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

    •

    width=“rộng”, height=“cao”: độ rộng và độ cao của ảnh: – 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 tượng chứa ảnh.

    •

    border=“n”: n là số: kích thước đường viền ảnh. =0: ảnh không có đường viền.

    •

    align=“hiệu chỉnh ảnh”: left, right, middle, top, texttop,…

    Tài liệu dành cho Lớp ngắn hạn Thiết kế web

    Trang 30

    Thiết kế web

    2 2.1.

    Thái Duy Quý

    Lab1: Dùng các thẻ HTML thiết kế trang web Excite.htm. Yêu cầu:

    Học viên sử dụng các tag HTML được học (body, img, table, font,…), các hình ảnh trong thư mục Images và nội dung được cung cấp sẵn trong tập tin noidung.txt để xây dựng trang Excite.htm theo mẫu index.jpg.

    2.2.

    Hướng dẫn giải:

    Dùng Notepad hay các chương trình nhập liệu tạo một tập tin văn bản, Lưu với phần mở rộng HTM hoặc HTML, Encoding: chọn UTF-8:

    Tài liệu dành cho Lớp ngắn hạn Thiết kế web

    Trang 31

    Thiết kế web

    Thái Duy Quý

    Dùng các cặp thẻ: , , và <body> để tạo cấu trúc trang Web: <html> <head> <title>Excite Dùng thuộc tính background để định hình nền trang, dùng các cặp thẻ:

    ,
    để định dạng đoạn, Dùng thẻ để chèn hình ảnh:

    Tài liệu dành cho Lớp ngắn hạn Thiết kế web

    Trang 32

    Thiết kế web

    Thái Duy Quý





    2.3.

    Kết quả hiển thị:

    Dùng các cặp thẻ: , , , và các thuộc tính FACE, COLOR, SIZE để định dạng văn bản.

    Tương tự, dùng các cặp thẻ: , , , , và các thuộc tính FACE, COLOR, SIZE để định dạng văn bản và Hoàn chỉnh trang web:

    Tài liệu dành cho Lớp ngắn hạn Thiết kế web

    Trang 33

    Thiết kế web

    Tài liệu dành cho Lớp ngắn hạn Thiết kế web

    Thái Duy Quý

    Trang 34

    Thiết kế web

    Thái Duy Quý

    3

    Bài 2: Các thẻ HTML(tiếp)

    3.1.

    Siêu liên kết (Hyperlink):

    Là khả năng cho phép tạo liên kết giữa 1 đối tượng với một phần nội dung. Khi click chuột vào đối tượng thì phần nội dung sẽ được hiện ra. Đối tượng sử dụng để kích chuột vào là: Đối tượng liên kết. Đối tượng đó có thể là: văn bản, hình ảnh, một phần của ảnh, ... Cấu trúc của thẻ: Đối tượng liên kết – Thuộc tính: •

    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 biệt:

    –

    –

    _self: cửa sổ hiện tại

    –

    _blank: cửa sổ mới

    Chú ý là nếu muốn liên kết với địa chỉ e-mail thì đặt đường dẫn là: href=“mailto:địa_chỉ_e-mail”; Thực hiện lệnh JavaScript khi kích chuột vào thì đặt href=“javascript:lệnh”. Địa chỉ nội dung sẽ được hiện ra được gọi là Đích liên kết.

    Ví dụ:  Trang chuTrang googlemail  … Màu của liên kết: Màu của liên kết được thiết lập nhằm thể hiện các trạng thái của liên kết:

    Tài liệu dành cho Lớp ngắn hạn Thiết kế web

    Trang 35

    Thiết kế web

    Thái Duy Quý



    Tài liệu dành cho Lớp ngắn hạn Thiết kế web

    Trang 39

    Thiết kế web

    Thái Duy Quý

    Bước 3: Tạo bảng biểu theo bố cục:

    Tài liệu dành cho Lớp ngắn hạn Thiết kế web

    Trang 40

    Thiết kế web

    Thái Duy Quý

    Bước 4: Dùng thẻ và các cặp thẻ: , , , và các thuộc tính FACE, COLOR, SIZE để định dạng văn bản

    Tài liệu dành cho Lớp ngắn hạn Thiết kế web

    Trang 41

    Thiết kế web

    Thái Duy Quý

    Bước 5: Dùng thẻ để chèn hình ảnh vào các ô, Chèn và định dạng văn bản

    Bước 6: Dùng thẻ để chèn hình ảnh vào các ô, chèn và định dạng văn bản

    Tài liệu dành cho Lớp ngắn hạn Thiết kế web

    Trang 42

    Thiết kế web

    Thái Duy Quý

    Bước 7: Chèn và định dạng văn bản, Hoàn chỉnh trang web:

    Tài liệu dành cho Lớp ngắn hạn Thiết kế web

    Trang 43

    Thiết kế web

    5

    Thái Duy Quý

    Lab2: Dùng các thẻ HTML thiết kế trang web Scaal.com.

    5.1.

    Yêu cầu:

    Học viên sử dụng các tag HTML được học (body, img, table, font, a, …), các hình ảnh trong thư mục Images và nội dung được cung cấp sẵn trong tập tin noidung.doc để xây dựng trang index.htm ( theo mẫu index.jpg) và trang story.htm (theo mẫu story.jpg). •

    Trang index.htm được thiết kế với yêu cầu sau: – Tạo liên kết trên nút [Our Story] đến trang story.htm. – Nút [product] và [this week] có liên kết rỗng.

    •

    Trang story.htm được thiết kế với yêu cầu sau: –

    Khi click vào banner sẽ liên kết đến index.htm

    –

    Trong phần nội dung, khi click vào chữ SCAAL đầu tiên sẽ liên kết tới phần “What makes SCAAL the best coffee?” của trang.

    –

    Khi click vào biểu tượng >>top sẽ liên kết về đầu trang

    –

    Khi click vào iMedia.com sẽ mở trang web www.imedia.com

    Tài liệu dành cho Lớp ngắn hạn Thiết kế web

    Trang 44

    Thiết kế web

    Thái Duy Quý

    Khi click vào [email protected] sẽ gởi thư theo địa chỉ đó.

    5.2.

    Hướng dẫn giải:

    Trang Index.htm:

    Tài liệu dành cho Lớp ngắn hạn Thiết kế web

    Trang 45

    Thiết kế web

    Thái Duy Quý

    Bước 1: Dùng Notepad tạo một tập tin văn bản, Lưu với phần mở rộng HTM hoặc HTML, Encoding: chọn UTF-8.

    Tài liệu dành cho Lớp ngắn hạn Thiết kế web

    Trang 46

    Thiết kế web

    Thái Duy Quý

    Bước 2: Dùng các cặp thẻ: , , và <body> để tạo cấu trúc trang Web, dùng các cặp thẻ DIV, IMG để chèn hình ảnh: <html> <head> <title>SCAAL



    Tài liệu dành cho Lớp ngắn hạn Thiết kế web

    Trang 47

    Thiết kế web

    Thái Duy Quý

    Bước 3: Tạo bảng biểu theo bố cục:

    Code:

    Tài liệu dành cho Lớp ngắn hạn Thiết kế web

    Trang 48

    Thiết kế web

    Thái Duy Quý

    Bước 4: Thiết kế giao diện trang: – Dùng thẻ để chèn hình ảnh – Dùng thẻ , và các thuộc tính FACE, COLOR, SIZE để định dạng văn bản Dùng thẻ và các thuộc tính để tạo liên kết:

    Bước 5:

    Tài liệu dành cho Lớp ngắn hạn Thiết kế web

    Trang 49

    Thiết kế web

    Thái Duy Quý

    Dùng thẻ để chèn hình ảnh vào các ô, Tạo liên kết tới trang STORY.HTML. Hoàn chỉnh giao diện.

    Trang Story.htm:

    Bước 1: Lưu lại tập tin STORY.HTML từ tập tin INDEX.HTML, Encoding: chọn UTF-8.

    Tài liệu dành cho Lớp ngắn hạn Thiết kế web

    Trang 50

    Thiết kế web

    Thái Duy Quý

    Bước 2: Tạo bảng biểu theo bố cục:

    Tài liệu dành cho Lớp ngắn hạn Thiết kế web

    Trang 51

    Thiết kế web

    Thái Duy Quý

    Bước 3: Chèn và định dạng văn bản, Tạo liên kết điểm dừng, hoàn chỉnh trang web.

    Tài liệu dành cho Lớp ngắn hạn Thiết kế web

    Trang 52

    Thiết kế web

    Tài liệu dành cho Lớp ngắn hạn Thiết kế web

    Thái Duy Quý

    Trang 53

    Thiết kế web

    6

    Thái Duy Quý

    Bài 3: Các thẻ HTML Form

    Các đối tượng HTML Form cho phép thiết kế các chức năng tương tác với người dùng.

    6.1.

    Các đối tượng nhập dữ liệu:

    Các đối tượng này cho phép người sử dụng nhập dữ liệu trên trang web. Dữ liệu này có thể được gửi về server để xử lý.Người sử dụng nhập dữ liệu thông qua các điều khiển (controls). Có nhiều loại control: 1. Form 2. Oneline Textbox 3. Checkbox

    4. Radio Button 5. Button 6. Combo box (drop-down menu) 7. Listbox 8. Hộp nhập văn bản nhiều dòng (TextArea).

    ..... Tất cả các điều khiển đều có tên được quy định qua thuộc tính name. Tuy nhiên có một số điều khiển thì name không quan trọng (các điều khiển mà sau này không cần lấy dữ liệu). Các điều khiển từ số 2 đến số 5 được định nghĩa nhờ thẻ và thuộc tính type sẽ xác định là điều khiển nào sẽ được tạo ra. Sau đây là các thuộc tính liên quan đến từng đối tượng:

    6.2.

    Form:

    Là đối tượng bên ngoài, sử dụng để chứa mọi đối tượng khác. Đối tượng form không nhìn thấy khi trang web được hiển thị, nó quy định một số thuộc tính quan trọng như method, action cho việc tải và nhận các giá trị được tải đến hoặc đẩy đi. Cấu trúc thẻ tạo form:

    …


    Các thuộc tính cơ bản: –

    name=“tên_form”: Là dịnh danh cho form, không quan trọng lắm

    Tài liệu dành cho Lớp ngắn hạn Thiết kế web

    Trang 54

    Thiết kế web –

    Thái Duy Quý

    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

    –

    6.3.

    method=“phương thức gửi dữ liệu”. Chỉ có 2 giá trị: •

    GET: (mặc định): nhận dữ liệu.

    •

    POST: đẩy dữ liệu đi.

    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 khẩu. Cấu trúc thẻ: Thuộc tính:

    6.4.

    –

    name=“tên_đt”: quan trọng

    –

    type=“text”:Ô nhập văn bản thường

    –

    type=“password”: ô nhập mật khẩu.

    –

    value=“giá trị mặc định”

    Checkbox:

    Cho phép chọn nhiều lựa chọn trong một nhóm lựa chọn được đưa ra bằng cách đánh dấu (“tích”). Cấu trúc thẻ: : mỗi ô nhập cần 1 thẻ Thuộc tính: –

    name=“tên_đt”: quan trọng

    –

    type=“checkbox”

    –

    value=“giá trị”: đây là giá trị chương trình sẽ nhận được nếu NSD chọn ô này.

    –

    checked: nếu có thì nút này mặc định được chọn.

    Tài liệu dành cho Lớp ngắn hạn Thiết kế web

    Trang 55

    Thiết kế web

    6.5.

    Thái Duy Quý

    Option Button (Radio Button):

    Cho phép chọn một lựa chọn trong một nhóm lựa chọn được đưa ra. Trên 1 form có thể có nhiều nhóm lựa chọn kiểu này. Cấu trúc thẻ: : Mỗi ô cần 1 thẻ 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.

    –

    type=“radio”

    –

    value=“giá trị”: đây là giá trị chương trình sẽ nhận được nếu NSD chọn ô này.

    –

    6.6.

    checked: nếu có thì nút này mặc định được chọn

    Nút lệnh (Button):

    Sử dụng để NSD ra lệnh thực hiện công việc. Trên hệ thống web có 3 loại nút: –

    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

    –

    normal: người lập trình tự xử lý

    Cấu trúc thẻ: Thuộc tính:

    6.7.

    –

    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”

    Combo Box (Drop-down menu):

    Bao gồm một danh sách có nhiều phần tử. Tại một thời điểm chỉ có 1 phần tử được chọn. Người sử

    Tài liệu dành cho Lớp ngắn hạn Thiết kế web

    Trang 56

    Thiết kế web

    Thái Duy Quý

    dụng 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. Cấu trúc thẻ tạo hộp danh sách: <select>Danh sách phần tử Thuộc tính: –

    name=“tên_ĐT”: quan trọng

    Cấu trúc thẻ tạo 1 phần tử trong danh sách: Thuộc tính: –

    value=“giá trị”: giá trị chương trình nhận được nếu phần tử được chọn.

    –

    6.8.

    selected: nếu có thì phần tử này mặc định được chọn.

    Listbox:

    Tương tự như Combo box, tuy nhiên có thể nhìn thấy nhiều phần tử cùng lúc, có thể lựa chọn nhiều phần tử Cấu trúc thẻ: <select>… Thuộc tính: tương tự của combo tuy nhiên có 2 thuộc tính khác: –

    size=“số dòng”

    –

    multiple: cho phép lựa chọn nhiều phần tử cùng lúc.

    Thẻ tương tự của combo box.

    6.9.

    Hộp nhập văn bản nhiều dòng (TextArea):

    Cho phép nhập văn bản dài trên nhiều dòng. Cấu trúc thẻ: Thuộc tính: –

    name=“tên_ĐT”: quan trọng

    –

    rows=“số dòng”, tính theo số dòng văn bản.

    –

    cols=“số cột”, tính theo số ký tự chuẩn trên dòng.

    Tài liệu dành cho Lớp ngắn hạn Thiết kế web

    Trang 57

    Thiết kế web

    Tài liệu dành cho Lớp ngắn hạn Thiết kế web

    Thái Duy Quý

    Trang 58

    Thiết kế web

    7

    Thái Duy Quý

    Lab1: Dùng các thẻ Form thiết kế trang web về phiếu đăng ký

    7.1.

    Yêu cầu:

    Học viên sử dụng các tag HTML được học (body, img, table, font, a, form, input,…), các hình ảnh trong thư mục Images để xây dựng trang phieudangky.htm theo mẫu phieudangky.jpg với các yêu cầu sau: – Thông tin trong hộp chọn Lĩnh vực gồm các mục: Công nghệ Web, Lập trình viên, Đồ họa. – Bố cục hình ảnh, nội dung theo mẫu. –

    Khi click vào nút [Gởi thông tin] sẽ gởi yêu cầu theo địa chỉ: [email protected] .

    –

    Khi click vào nút [Nhập lại] sẽ xóa nội dung trong các ô nhập liệu.

    Tài liệu dành cho Lớp ngắn hạn Thiết kế web

    Trang 59

    Thiết kế web

    7.2.

    Thái Duy Quý

    Hướng dẫn giải:

    Bước 1: Dùng Notepad tạo một tập tin văn bản, Lưu với phần mở rộng HTM hoặc HTML, Encoding: chọn UTF-8.

    Tài liệu dành cho Lớp ngắn hạn Thiết kế web

    Trang 60

    Thiết kế web

    Thái Duy Quý

    Bước 2: Dùng các cặp thẻ: , , và <body> để tạo cấu trúc trang Web, Dùng các cặp thẻ DIV, IMG để chèn hình ảnh: <html> <head> <title>PHIẾU ĐĂNG KÝ Bước 3: Cấu trúc trang phiếu đăng ký:

    Tài liệu dành cho Lớp ngắn hạn Thiết kế web

    Trang 61

    Thiết kế web

    Thái Duy Quý

    Bước 4: Dùng thẻ để chèn hình ảnh, Dùng thuộc tính BACKGROUND tạo nền cho ô.

    Bước 5: Hoàn thiện phầ nội dung: – Dùng thẻ
    – Dùng thẻ ,