Tài liệu thực hành phát triển ứng dụng web chuyên đề 1 được biên soạn với mong muốn giúp thầy cô và sinh viên Khoa Công nghệ thông tin Trường Đại học Sài Gòn có một tài liệu thống nhất phục vụ học tập và thực hành chủ đề phát triển. hiểu lý thuyết trong giờ học, có tài liệu tham khảo và thực hành tại nhà.
PHẦN LÝ THUYẾT
Để truy cập thông tin trên máy chủ web, máy khách web phải sử dụng chương trình để duyệt thông tin này được gọi là trình duyệt web. Trang web tĩnh: sử dụng ngôn ngữ HTML, dễ phát triển, thiếu khả năng tương tác với người dùng.
TỔNG QUAN HTML VÀ ĐỊNH DẠNG
TỔNG QUAN HTML
- Các khái niệm liên quan đến thẻ
- Cấu trúc trang HTML
- Các thẻ cơ bản
Phần
chứa thông tin về trang HTML, thông tin này không xuất hiện trong nội dung của trang web. Trang web có thể hiển thị tốt trên hầu hết các máy mà không cần chú ý đến các thẻ này.ĐỊNH DẠNG VĂN BẢN
- Định dạng ký tự
- Thay đổi font
- Định dạng đoạn văn bản
- Chuyển động
- Một số ký tự đặc biệt
Một số thẻ nội tuyến thường được sử dụng là , , , ,...và đặc biệt là
DANH SÁCH
- Danh sách không có thứ tự (UnOrdered List)
- Danh sách có thứ tự (Ordered List)
- Danh sách các định nghĩa (Definition List)
Các giá trị thuộc tính (ValueType) phải được viết bằng dấu ngoặc kép và chữ thường, nếu không trình duyệt có thể hiển thị chúng không chính xác. Đó là một danh sách được đánh dấu ở đầu đoạn văn bằng số hoặc chữ cái theo thứ tự.
HÌNH ẢNH – ÂM THANH – LIÊN KẾT
HÌNH ẢNH – ÂM THANH
- Chèn hình ảnh, video
- Nền trang Web
- Nền âm thanh
- Liên kết đến các trang Web khác trên Internet (liên kết ngoại ) (Remote Link)
- Liên kết trong cùng một WebPage (Local Link)
- Một số tùy chọn
- Image map
Không liên kết các tập tin hình ảnh với một URL đĩa cứng. Liên kết trên cùng một trang web (liên kết cục bộ) Tạo liên kết đến một phần cụ thể của cùng một trang web.
TÌM HIỂU PHẦN MỀM HỖ TRỢ THIẾT KẾ WEB
Giới thiệu về Dreamweaver (DREAMWEAVER CC)
Thao tác với trang
Màn hình Dreamwevear
BẢNG - KHUNG
BẢNG
- Thiết kế Bảng
- Định dạng Bảng (<table>)
Right: căn lề bên phải cửa sổ trình duyệt, văn bản nhập sau khi thiết lập bảng sẽ di chuyển về bên trái của bảng. Kích thước ô không được khuyến nghị, một số trình duyệt không hỗ trợ thuộc tính này.
KHUNG
- Các bước chia khung
- Trường hợp trình duyệt không hỗ trợ khung
- Chỉ định khung hiển thị cho liên kết
Chỉ định khung màn hình cho kết nối Đặt đích cho kết nối Đặt đích cho kết nối. Chỉ định khung mặc định hiển thị nội dung khi bạn nhấp vào liên kết, nằm trên trang html chứa liên kết.
BIỂU MẪU
Tạo Form
Bao gồm một bộ ít nhất hai nút, mỗi lần chỉ có thể chọn một nút. Hình ảnh được sử dụng có định dạng gif và jpg. lt;select name=”MenuName” size=”n” multiple>. kích thước chiều cao menu theo dòng, n không vượt quá số lượng mục menu, nếu không người dùng có thể gõ vào vùng trống. số tùy chọn được hiển thị cùng lúc).
Nâng cấp Form
Để bảo vệ nội dung thành phần được xác định trước và ngăn người dùng sửa đổi nội dung đó, hãy thêm thuộc tính chỉ đọc. Đây là trường hợp nội dung thành phần được xác định trước và không hiển thị.
CASCADING STYLE SHEET (CSS)
Thêm style trực tiếp (Inline Style)
Thêm style vào một trang web (Embedded Style)
Thêm style cho nhiều trang web (Linked Style) (External Style)
Đơn vị đo trong CSS
Khi sử dụng đơn vị tương đối, kích thước thực tế phụ thuộc vào phần tử khác, thường là thuộc tính phần tử cha trong HTML hoặc kích thước khung nhìn (kích thước cửa sổ hiện tại của trình duyệt). Ưu điểm của đơn vị này là kích thước (độ dài, phông chữ) được tự động chia tỷ lệ dựa trên phần tử gốc.
Danh sách các thuộc tính có trong CSS
GIỚI THIỆU JAVASCRIPT
- Tổng quan
- Ngôn ngữ JavaScript
- Các lệnh điều khiển
- Hàm
Nếu biểu thức điều kiện đúng thì trả về giá trị 1, nếu biểu thức điều kiện sai thì trả về giá trị 2. Javascript sẽ tính giá trị của biểu thức rồi so sánh giá trị đó với các giá trị trong từng câu lệnh, case, case. Để một hàm có giá trị trả về, chúng ta phải gán giá trị của hàm đó cho một biến.
CÁC ĐỐI TƯỢNG TRONG JAVASCRIPT
Giới thiệu
Nó dùng để truy cập thông tin trong cửa sổ, để điều khiển các sự kiện xảy ra trong cửa sổ. Nếu tài liệu có nhiều khung, trình duyệt sẽ tạo đối tượng cửa sổ cha và đối tượng cửa sổ con cho mỗi khung. Hàm trả về một giá trị id (duy nhất cho mỗi hàm setTimeout() thực thi một lệnh).
Các đối tượng Javascript
Chúng ta có thể truy cập các phần tử mảng theo tên mảng và chỉ mục. Ví dụ: document.form name[i].tên phần tử form[j].value đã kiểm tra Xác định xem phần tử thứ j có được chọn hay không. Ví dụ: document.formname.form elementname.disable=true isDisabled Kiểm tra xem phần tử có mờ hay không (true là mờ và ngược lại).
Xây dựng đối tượng mới
Sau khi đăng ký tên miền, bạn cần lựa chọn dịch vụ cho thuê website để có thể đưa website của mình lên Internet. Lưu trữ trang web (web hosting) là một khái niệm dùng để chỉ quá trình làm cho một trang web có thể truy cập được từ Internet. Hầu như không có dịch vụ lưu trữ chia sẻ nào có thể đảm bảo 100% thời gian hoạt động.
PHẦN THỰC HÀNH
HƯỚNG DẪN SỬ DỤNG CÔNG CỤ MACRO DREAMWEAVER THIẾT KẾ
Phần đầu tiên: tiêu đề, có thể chứa logo, slogan, liên kết, biểu ngữ liên kết, nút, đoạn flash hoặc các dạng ngắn như biểu mẫu tìm kiếm, v.v. Phần Liên kết Toàn cầu: Điều hướng toàn cầu chứa các liên kết đến các trang quan trọng trên trang web. Phần này có thể chứa các liên kết phụ bổ sung (điều hướng phụ). Nội dung phụ: Sidebar, phần này có thể chứa các liên kết phụ của từng trang (local Navigation) hoặc các banner chứa các liên kết liên quan hoặc có thể dùng để chứa các liên kết quảng cáo.
THỰC HÀNH VỚI CÁC THẺ HTML CƠ BẢN
Header, Global Navigation, Page Body, Content, Sidebar, Footer (cấu trúc trang web cơ bản) Một số khu vực và cấu trúc lớn có nhiều thẻ bên trong cũng nên được kết hợp với thẻ
. Không sử dụng trực tiếp thẻ cho các chi tiết nhỏ như: một đoạn văn bản, hình ảnh, liên kết, nút, v.v. Mặc dù trình duyệt sẽ hiển thị chính xác ý định của chúng ta nhưng mã như vậy sẽ không khớp với ý nghĩa của thẻ , khiến trình duyệt khó xác định đâu là nội dung lớn, đâu là nội dung nhỏ.THỰC HÀNH VỚI CÁC THẺ HTML CƠ BẢN
Tất cả các thành phần của bảng đều dùng font Times New Roman cỡ 12, - Text: WEB DESIGN môn chương trình size 16, chữ in hoa - Text: Tham khảo w3schools link tới trang w2school - Text: Website tìm kiếm link tới trang www.google.com.vn - SMS e -mail [email protected] link tới email. Tham khảo hoàn thiện bài thực hành này theo danh sách và link ở phần lý thuyết Bài 1 Phần C. Thành tích: Học viên có thể sử dụng các thẻ html cơ bản để thiết kế giao diện theo yêu cầu.
THỰC HÀNH CÁC THẺ HTML CƠ BẢN
Bạn có thể sử dụng thẻ ul và li để tạo các menu được sắp xếp thành một dòng. Ở phần sidebar, bạn cũng có thể sắp xếp menu điều hướng cho trang bằng ul, li (phần này chiếm 20% trong tổng số 100% của bảng), để có màu sắc phù hợp. Bài tập về nhà: Học sinh tự thiết kế bố cục website (khác với mô hình demo), có thể sử dụng bảng hoặc div.
THIẾT KẾ GIAO DIỆN VỚI CSS
Sử dụng thẻ ul và li để hiển thị ở định dạng menu ngang (dùng display để hiển thị định dạng nội tuyến). Sử dụng các thuộc tính Margin, Padding, Hover và Clear để thiết kế giao diện và căn chỉnh các thẻ vào đúng vị trí. Vì div là thẻ khối nên mặc định các thẻ được xếp chồng lên nhau, nếu muốn đặt các thẻ div theo giao diện thì bạn cần sử dụng thẻ float để đặt vị trí mong muốn (xem Bài 6, Phần V, phần Phân loại, thuộc tính float).
THỰC HÀNH VỚI CSS
Phần thực hành: hiểu cách định dạng bố cục giao diện và văn bản.
THỰC HÀNH VỚI CSS
Phần thực hành: Xây dựng trang web với menu đa cấp bằng thẻ ul li. Các mục menu con có thể bị chồng chéo bởi các mục khác trong bố cục. Khi bạn di chuột qua thành phần cha, thành phần con gần nhất sẽ được hiển thị.
THỰC HÀNH VỀ BỐ CỤC GIAO DIỆN CỦA WEBSITE SỬ DỤNG HTML,
THỰC HÀNH VỀ BỐ CỤC GIAO DIỆN CỦA WEBSITE SỬ DỤNG HTML,
Để thiết kế giao diện theo mẫu đăng ký học viên, bạn có thể sử dụng float hoặc dùng flexbox để bố trí trang. Thành tựu của phần thực hành: Học sinh nắm được cách tổ chức, thiết kế giao diện form đăng ký Áp dụng các thuộc tính của thẻ html và css.
TRÌNH BÀI MỘT SỐ GIAO DIỆN PHẦN NGƯỜI DÙNG (END USER) DỐI
Bài tập: Thiết kế bố cục cho trang index.php theo bố cục trang chủ. Thiết kế một div có trình bao bọc ID bao phủ mọi thứ (chiếm 50% ở giữa màn hình), vị trí:. Thiết kế div chứa dấu x để đóng biểu mẫu. sở hữu: lỗi thời) - Sử dụng thẻ img để hiển thị hình ảnh ở mức 60% (float:left).
TRÌNH BÀI MỘT SỐ GIAO DIỆN PHẦN QUẢN TRỊ (ADMIN)
Bài tập: Tạo bố cục giao diện trang index.html của phần quản trị. Thành tựu của phần thực hành: Học sinh hiểu được cách trình bày một số giao diện như trên. Áp dụng thuộc tính của thẻ html, css vào thiết kế giao diện theo yêu cầu.
THỰC HÀNH THIẾT KẾ BIỂU MẪU HTML VỚI JAVASCRIPT
Chọn một sở thích từ cửa sổ: Bơi lội, Võ thuật và chọn một sở thích. Khi bạn nhấp vào radio Chọn Câu hỏi, hộp kiểm câu hỏi sẽ được chọn để hiển thị danh sách các câu hỏi. Khi bạn nhấp vào nhập câu hỏi, hộp tổ hợp lựa chọn câu hỏi sẽ bị mờ (không thể chọn) và trọng tâm là nhập câu hỏi.
THỰC HÀNH SỬ DỤNG JAVASCRIPT KIỂM TRA FORM NHẬP LIỆU.156
Sử dụng thẻ marquee để chạy văn bản từ trái sang phải và ngược lại - Div left chứa phần tử bên trái. Khi click vào register thì dùng javascript để kiểm tra các thành phần trên form - Khi click vào và thay đổi giá trị là bạn thay đổi giá trị thuộc tính trong css. Kết quả đạt được: Học sinh có thể ứng dụng html, css và javascript vào thiết kế giao diện và hiển thị nội dung bằng javascript để xử lý.
THỰC HÀNH TỔNG HỢP
Khi nhấn nút điều khiển, nếu chưa nhập thông tin nào thì sẽ xuất hiện thông báo yêu cầu bạn nhập thông tin đó. Nếu năm sinh đã nhập không phải là số thì sẽ xuất hiện thông báo yêu cầu nhập lại. Viết hàm tạo số thực ngẫu nhiên trong khoảng từ 0 đến n, hàm tạo số nguyên ngẫu nhiên trong khoảng từ 0 đến n. Tổng hợp các kiến thức đã học, học sinh hoàn thành dự án theo yêu cầu giáo viên đưa ra trên trang bài.
