TỔNG QUAN VỀ HTML, CSS & JAVASCRIPT
HTML ( Hyper Text Markup Language) ngôn ngữ đánh dấu siêu văn bản
HTML không phải ngôn ngữ lập trình.
HTML là một ngôn ngữ đánh dấu.
Ngôn ngữ đánh dấu chứa một hợp các thẻ được gọi là thẻ đánh dấu.
Để định dạng các web người ta dùng các thẻ đánh dấu.
Các thành phần HTML là khối cơ bản để xây dựng các trang web.
Để thiết kế các trang web HTML không khó, bạn chỉ cần các trình soạn thảo:
Tại sao web thì rất hữu ích trên internet? Điều này có thể giải thích:
Cách đơn giản nhất để truyền thông tin trên Internet
Một hình thức để quảng bá doanh nghiệp của bạn
Bạn có thể nói với thế giới rằng bạn có điều gì đó để nói trên một trang cá nhân.
Một số khái niệm cần nhớ trong lúc học HTML
Tag (thẻ) - được sử dụng để xác định vùng của tài liệu HTML, trình duyệt sẽ đọc sau Cú pháp: Nội dung
Element (thành phần) - là một thẻ hoàn chỉnh, có thẻ mở và thẻ đóng .
Attribute (thuộc tính) - được sử dụng để thay đổi giá trị của một phần tử trong HTML Thường thì một phần tử có một số thuộc tính.
CSS là gì – Tổng quan về CSS
Cascading Style Sheets (CSS) là ngôn ngữ định kiểu dùng để định dạng tài liệu HTML hoặc XML, bao gồm các ngôn ngữ XML như SVG và XHTML CSS quy định cách thức hiển thị các phần tử trên màn hình, giấy, trong âm thanh hoặc các phương tiện khác.
CSS là một ngôn ngữ cốt lõi của web mở, được tiêu chuẩn hóa bởi W3C Hiện tại, CSS1 đã lỗi thời, trong khi CSS2.1 vẫn là một đề xuất CSS3 đang được phát triển thành các mô-đun nhỏ hơn và tiến triển theo bản theo dõi chuẩn Bản thảo đầu tiên của các mô-đun CSS4 cũng đang được viết.
Các tính năng mặc định của trang web
Các trang web được Đại Phố thiết kế luôn mặc định các tính năng sau:
Mã nguồn được tối ưu với các công cụ tìm kiếm.
Trang web được tối ưu hóa cho thiết bị di động, tương thích với tất cả các loại thiết bị như điện thoại, máy tính bảng, máy tính và laptop Nó sử dụng công nghệ HTML5 và CSS3 Mobile để mang lại trải nghiệm người dùng mượt mà và hiệu quả.
Dễ dàng thay đổi theo phong cách riêng của bạn.
Dễ dàng thêm bớt số lượng các trang, và chỉnh sửa nội hiển thị trên website tùy ý
Phần quản trị rõ ràng, trực quan, dễ sử dụng với cả những người không chuyên về IT.
Quản lí nội dung: có thể dễ dàng thêm, xóa, sửa các thông tin trên website
Thông tin sản phẩm và dịch vụ của công ty
Thông tin dự án, đối tác Giới thiệu – Liên hệ
Thông tin giới thiệu, thông tin liên hệ
Hình ảnh trên website, sửa các tag alt, descriotion, caption
Hình ảnh và caption trên Slideshow
Khi đặt chung trong trang tài liệu HTML
Nó phải được đặt bên trong cặp thẻ
Khi viết riêng biệt với tài liệu HTML
Để sử dụng file CSS "tên style.css" nằm trong cùng thư mục với file HTML, bạn cần đảm bảo file này được lưu với phần mở rộng css và khai báo trong phần header của tài liệu HTML bằng cú pháp thích hợp.
JavaScript là ngôn ngữ lập trình quan trọng giúp tạo sự sinh động cho website Khác với HTML, vốn tập trung vào nội dung, và CSS, chuyên về phong cách, JavaScript hoạt động trực tiếp trên trình duyệt của người dùng, khác biệt với PHP, ngôn ngữ chạy trên máy chủ.
JavaScript là ngôn ngữ dễ học;
Nó được phát triển bởi Netscape, và đang được dùng trên 92% webstie;
JS có thể được gắn vào một element của trang web hoặc sự kiện của trang web như cú click chuột;
Hoạt động trên đa trình duyệt và đa thiết bị;
Nhanh và nhẹ hơn các ngôn ngữ lập trình khác;
Có thể ít an toàn hơn vì độ phổ biến của nó;
Bạn có thể thêm JavaScript trực tiếp vào HTML hoặc bạn có thể lưu nó trên files riêng biệt và gọi lên khi cần.
Làm thế nào để thêm JavaScript trên website của bạn? Để thêm chuỗi code JavaScript code vào trang web, bạn sẽ cần gắn tag Ví dụ như sau:
PHÂN TÍCH ĐỀ TÀI WEBSITE BẤT ĐỘNG SẢN (BABYLON RESIDENCE WEBSITE)
MỤC ĐÍCH
Trang web này được thiết kế để giới thiệu và giao dịch căn hộ trực tuyến, phục vụ nhu cầu của những người bận rộn Người dùng có thể dễ dàng truy cập thông tin về giá đất và các căn hộ đang rao bán, đồng thời liên hệ nhanh chóng với chủ đầu tư dự án để thuận tiện hơn trong việc tìm kiếm và giao dịch bất động sản.
SƠ ĐỒ PHÂN CẤP WEBSITE
THÀNH PHẦN
Gồm 3 phần chính: Tiêu đề (Header), Nội dung (Content), Chân trang (Footer)
Trang web có những thành phần cụ thể như sau:
Thư viện ảnh (phòng khách, phòng bếp, phòng ngủ, phòng tắm, phòng đọc sách, garage)
Như hình minh hoạ dưới :
THANH MENU – BAR DROPDOWN & SLIDESHOW DOTS SHOW TEXT a GIAO DIỆN : b XỬ LÝ SỰ KIỆN (MENU & SLIDESHOW TEXT) :
Ban đầu, “MENU – BAR DROPDOWN” hiển thị với chữ màu trắng và không có nền Khi cuộn trang xuống, nền sẽ chuyển sang màu đen và chữ đổi thành màu vàng Khi di chuột vào từng thẻ, nền sẽ xuất hiện màu cam.
Khi nhấn nút tiến (Next) hoặc các dấu chấm (DOTS) dưới slide, hình ảnh và văn bản sẽ tự động thay đổi theo.
CHỨC NĂNG VÀ NHIỆM VỤ CỦA ĐỀ TÀI
[TAG] - TRANG CHỦ: a.GIAO DIỆN :
- Gồm 5 phần: Hiệu ứng chuyển trang, thông tin chi tiết, cơ sở hạ tầng, thư viện ảnh và liên hệ.
- Khi vào trang web bạn sẽ nhìn thấy TRANG CHỦ như hình dưới: b.
XỬ LÝ SỰ KIỆN (TRANG CHỦ):
- Khi đưa chuột (hover) vào TRANG CHỦ sẽ hiện thị font chữ sẽ đổi thành màu vàng và có đường gạch chân ở dưới (underline-form-center).
- Khi đưa chuột (hover) vào phần “THÔNG TIN CHI TIẾT” và “CƠ SỞ HẠ TẦNG” sẽ làm nổi bật chữ vàng trên nền đen.
Khi di chuột vào các biểu tượng trong phần "THÔNG TIN CHI TIẾT", chữ vàng sẽ nổi bật trên nền đen, đồng thời hiển thị nội dung trước đó đã bị ẩn ở phía dưới.
Khi kéo xuống phần “THƯ VIỆN ẢNH”, bạn sẽ thấy 9 hình ảnh Khi di chuột vào từng hình, một cửa sổ sẽ xuất hiện từ trên xuống, hiển thị tên nội dung của hình ảnh cùng với nút bấm để chuyển trang Chi tiết hơn sẽ được trình bày ở [TAG] “THƯ VIỆN ẢNH”.
Phần "LIÊN HỆ" có nền cam và chữ trắng khi chưa hover, trong khi ở góc trái có 5 thanh công cụ giúp người dùng dễ dàng liên hệ hơn.
Khi di chuột vào nút "LIÊN HỆ", nền nút sẽ chuyển từ màu cam sang màu đen và chữ sẽ đổi thành màu vàng Nếu nhấn vào nút "LIÊN HỆ", người dùng sẽ được chuyển đến phần TAG (LIÊN HỆ).
Khi bạn di chuột vào từng đối tượng ở góc bên phải, hình ảnh sẽ hiển thị như dưới đây, và bạn có thể nhấn vào đó để truy cập vào trang tương ứng.
Như hình minh hoạ dưới :
- Và những đối tượng khác trên thanh công cụ cũng vậy.
[TAG] - THƯ VIỆN ẢNH: a.GIAO DIỆN:
- Gồm 3 phần: Hiệu ứng chuyển trang (Javascript), thư viện ảnh và liên hệ.
- Khi vào “THƯ VIỆN ẢNH” sẽ gồm 3 phần như sau: b XỬ LÝ SỰ KIỆN (THƯ VIỆN ẢNH):
- Khi đưa chuột (hover) vào từng ảnh của THƯ VIỆN ẢNH sẽ sổ xuống 6 thanh menu con như hình dưới đây:
- Sự kiện nhấp chuột (click) vào 1 menu con bất kỳ sẽ được liên kết qua thông tin chi tiết được mô tả trong thư viện ảnh
Ví dụ : Ta click chuột vào “PHÒNG KHÁCH” thì điều gì sẽ xảy ra.
KẾT QUẢ là mở ra 1 giao diện riêng mang tên “PHÒNG KHÁCH”, Như hình minh hoạ dưới đây :
- Hoặc đưa chuột (hover) vào trực tiếp hình ảnh sẽ thấy sổ xuống dòng chữ liên kết qua trang.
- Tương tự, các hình ảnh cũng vậy.
[TAG] - MẶT BẰNG CĂN HỘ: a.GIAO DIỆN :
- Gồm 3 phần: Hiệu ứng chuyển trang (Javascript), hồ sơ mặt bằng và liên hệ.
- Khi vào MẶT BẰNG CĂN HỘ sẽ hiển thị như sau: b.XỬ LÝ SỰ KIỆN (MẶT BẰNG CĂN HỘ)
- Khi ta hover vào hình ảnh bất kỳ trên màn hình thì nó sẽ thu nhỏ vô bên trong như hình dưới,[thuộc tính transform: scale]
Khi nhấp vào hình ảnh, một cửa sổ sẽ xuất hiện, hiển thị hình ảnh cùng với văn bản bên dưới Để thực hiện tính năng này, bạn có thể sử dụng JavaScript để tạo Modal Image.
[TAG] - TIN TỨC: a GIAO DIỆN :
- Gồm 4 phần: Hiệu ứng chuyển trang (Javascript), nội dung bài viết, tìm kiếm và liên hệ
- Khi nhấn vào phần TIN TỨC sẽ hiển thị ra như sau: b XỬ LÝ SỰ KIỆN (TIN TỨC) :
Trong bài viết này, mình sẽ không sử dụng slide show dots với hai nút Button (Next, Prev), mà thay vào đó, mình sẽ áp dụng JavaScript để tự động thay đổi hình ảnh theo thời gian đã được thiết lập.
Mục “TÌM KIẾM” có nút “Search” hiển thị như hình “TRƯỚC KHI NHẤN VÀO” Khi người dùng nhấp chuột vào ô tìm kiếm “SAU KHI NHẤN VÀO”, nút này sẽ mở rộng theo chiều rộng với thuộc tính [Sử dụng : focus() width :100%].
Nút "GO – TO – TOP" giúp người dùng trở về đầu trang nhanh chóng Ban đầu, nút này sẽ bị ẩn khi ở đầu trang, nhưng sẽ xuất hiện khi người dùng cuộn trang xuống Để thực hiện chức năng này, cần sử dụng JavaScript với phương thức [scrollTop].
Phần nội dung bên tay trái sử dụng Slideshow Dot cho từng bài viết nhằm mục đích làm gọn trang Khi nhấn vào mỗi [DOTS], một bài viết sẽ được hiển thị, giúp người dùng dễ dàng truy cập thông tin một cách trực quan và thuận tiện.
- Khi chúng ta nhấn vào button “ĐỌC THÊM” thì nội dung còn thiếu của bài viết đó sẽ hiện ra đầy đủ.
Khi nội dung được hiển thị đầy đủ chi tiết, sẽ xuất hiện nút “THU GỌN” Nhấn vào nút này lần nữa để đưa nội dung trở về trạng thái mặc định.
JavaScript cho nó [READMORE & READLESS].
[TAG] - GIỚI THIỆU: a GIAO DIỆN :
- Gồm 3 phần: Hiệu ứng chuyển trang (Javascript), thông tin giới thiệu về trang web bất động sản và liên hệ.
- Vào trang GIỚI THIỆU như hình dưới đây:
[TAG] - LIÊN HỆ: a GIAO DIỆN :
- Gồm 3 phần: Hiệu ứng chuyển trang (Javascript), thông tin liên lạc của chủ đầu tư, giao diện liên hệ.
- Trang LIÊN HỆ như hình dưới: b.XỬ LÝ SỰ KIỆN (LIÊN HỆ):
Để đăng nhập thông tin cá nhân, hãy nhấp chuột vào liên kết "LIÊN HỆ TẠI ĐÂY" như hình dưới Khi di chuột qua dòng chữ "LIÊN HỆ TẠI ĐÂY", một hiệu ứng hoạt hình sẽ xuất hiện.
- Khi nó chạy xong 1 vòng thì sẽ hiện màu nền và mà chữ như ở hình dưới :
Khi bạn nhấp vào nút “LIÊN HỆ TẠI ĐÂY”, một cửa sổ [FORM] sẽ xuất hiện để bạn điền thông tin cần thiết Nếu bạn chưa điền đầy đủ thông tin và bấm “GỬI NGAY”, hệ thống sẽ hiển thị một thông báo tooltip yêu cầu bạn cung cấp thông tin đầy đủ.
TẦM NHÌN PHÁT TRIỂN
Hoàn thiện và sửa lỗi trang web đang gặp phải.
Thêm nhiều tính năng hữu ích trong tương lai gần để mọi người dễ dàng tương tác hơn…(tổng đài hỗ trợ trực tuyến 24/7)
Đa dạng hóa sản phẩm hướng đến mọi đối tượng (cụ thể là đối tượng có thu nhập thấp & trung bình) để họ có thêm sự lựa chọn, …
