Xây dựng giao diện người dùng cho trang web sử dụng html ,css và javascript

2.1.2 Khái niệm phần tử và thuộc tính trong HTML - Phần tử là gì: ● Trong trang web, thông thường thì bất kỳ một nội dung gì cũng có thể được xem là phần tử.. ● Để tạo một cái liên kết

TRƯỜNG ĐẠI HỌC KINH TẾ

KHOA THỐNG KÊ – TIN HỌC

BÁO CÁO THỰC TẬP NGHỀ NGHIỆP

NGÀNH HỆ THỐNG THÔNG TIN QUẢN LÝ

CHUYÊN NGÀNH QUẢN TRỊ HỆ THỐNG THÔNG TIN / TIN HỌC

và cho em những lời tư vấn, nhận xét đúng đắn đề em có đủ hành trang kiến thức để

có thể tìm một vị trí thực tập tốt nhất và hoàn thành báo cáo

Để hoàn thành kì thực tập và bài báo cáo này em cũng xin gửi lời cảm ơn sâusắc tới công ty 3T Design đã nhận em vào thực tập cùng các anh chị tận tình giúp đỡ,

hỗ trợ nhiệt tình, củng cố kiến thức, tạo điều kiện thuận lợi trong quá trình thực tập

LỜI CAM ĐOAN

“Em xin cam đoan đề tài: “Xây Dựng giao diện người dùng cho một trang web sử dụng HTML và CSS và Javascript.” là một công trình nghiên cứu độc lập của em

dưới sự hướng dẫn của các anh chị Mentors của công ty Ngoài ra không có bất cứ sự sao chép của người khác Đề tài, nội dung báo cáo thực tập là sản phẩm mà em đã nỗ lực nghiên cứu trong quá trình học tập tại trường cũng như tham gia thực tập tại công ty.”

2.1.3 Cách sử dụng các thẻ <div>, <span> trong HTML 6

2.1.5 Thẻ tiêu đề (heading) và đoạn văn bản (paragraph) trong HTML 7

2.2.5 Cách thiết lập vùng đệm (padding) trong CSS 10

2.3.3 Hạn chế của javascript 14

2.3.4 Hoạt động của ngôn ngữ javascript trên một website 15

5.1 Kết quả đạt được trong kỳ thực tập 24

5.2 Kết luận và hướng phát triển về giải pháp 24

DANH MỤC CÁC TỪ VIẾT TẮT

STT Kí hiệu chữ viết

tắt

Chữ viết đầy đủ

LỜI MỞ ĐẦU

1 Mục tiêu nghiên cứu của đề tài

● Tiết kiệm thời gian: Template mẫu giúp tiết kiệm thời gian cho người dùngbằng cách cung cấp một cấu trúc sẵn để thực hiện một công việc nào đó.Thay vì phải tạo từ đầu một tài liệu mới,

● Đảm bảo tính nhất quán: Template mẫu giúp đảm bảo tính nhất quán trongcách viết và định dạng tài liệu

● Tăng tính thẩm mỹ: Template mẫu cũng có thể giúp tăng tính thẩm mỹ củatài liệu Những template mẫu được thiết kế đẹp mắt và chuyên nghiệp có thểgiúp tài liệu trông chuyên nghiệp hơn, tạo ấn tượng tốt với độc giả

● Thuận tiện cho việc quản lý: Khi sử dụng template mẫu, người dùng có thểquản lý tài liệu của mình một cách dễ dàng hơn Thay vì phải lưu trữ nhiềutài liệu khác nhau, người dùng có thể sử dụng các template mẫu để tạo ra cácphiên bản tài liệu khác nhau, tất cả được lưu trữ trong cùng một mục lụchoặc thư mục

2 Nhiệm vụ của đề tài

Nhiệm vụ của đề tài front end là tạo ra một trang web có giao diện đẹp mắt, dễ sửdụng và thân thiện với người dùng Front end developer sẽ sử dụng các ngôn ngữ HTML,CSS và JavaScript để tạo ra các trang web với đầy đủ chức năng và đáp ứng các yêu cầucủa người dùng

3 Phương pháp nghiên cứu

- Nghiên cứu các kiến thức sẵn có trên internet

- Hướng dẫn bởi mentor

- Xây dựng các demo để hiểu rõ hơn những gì đã học

4 Đối tượng và phạm vi của đề tài

Đối tượng nghiên cứu: Trong đề tài này, đối tượng nghiên cứu là các mẫu

thiết kế website Các mẫu này có thể được sử dụng để xây dựng những trangweb chuyên nghiệp và hiệu quả, đáp ứng nhu cầu của người dùng trong nhiềulĩnh vực khác nhau

Phạm vi nghiên cứu

● Các ngôn ngữ HTML, CSS và JavaScript

● Các công cụ thiết kế web như Adobe Photoshop, Illustrator, Sketch, Figma

● Các kỹ thuật phát triển web như responsive design, SEO, UX design

5 Kết cấu của đề tài

Chương 1: Tổng Quan

Chương 2: Cơ sở lý thuyết

Chương 3:Triển khai dự án

Chương 4: Phát Triển Giao diện

Chương 5: Kết luận và hướng phát triển

1.2 Tổng quan về lập trình Front End

Phần front-end của một trang web là phần tương tác với người dùng Tất cả mọi thứbạn nhìn thấy khi điều hướng trên Internet, từ các font chữ, màu sắc cho tới các menu

xổ xuống và các thanh trượt, là một sự kết hợp của HTML, CSS, và JavaScript đượcđiều khiển bởi trình duyệt máy tính của bạn

-Cài đặt công cụ : https://code.visualstudio.com/

Hình 2 Visual Studio Code

Chương 2 CƠ SỞ LÝ THUYẾT

2.1 Ngôn ngữ HTML

2.1.1 Giới thiệu về HTML

1.

Hình 3 Ngôn ngữ HTML

- HTML là chữ viết tắt của Hypertext Markup Language Nó giúp người dùng tạo và

cấu trúc các thành phần trong trang web hoặc ứng dụng, phân chia các đoạn văn, heading,links, blockquotes

- HTML không phải là ngôn ngữ lập trình, đồng nghĩa với việc nó không thể tạo ra cácchức năng “động” được Nó chỉ giống như Microsoft Word, dùng để bố cục và định dạngtrang web

2.1.2 Khái niệm phần tử và thuộc tính trong HTML

- Phần tử là gì:

● Trong trang web, thông thường thì bất kỳ một nội dung gì cũng có thể được xem là phần tử Ví dụ như trong trang web nằm bên dưới: đoạn văn bản là một phần tử, trình phát audio là một phần tử, tấm hình là một phần tử

● Một phần tử HTML thường được xác định dựa trên ba thành phần:

● Thẻ mở

● Nội dung nằm bên trong cặp thẻ (hay còn được gọi là nội dung của phầntử).

● Thẻ đóng

- Thuộc tính là gì:

● Trong ngôn ngữ HTML, thuộc tính có thể tạm hiểu là một loại thông tin nào đó liên quan đến phần tử

● Mỗi thuộc tính sẽ được đại diện bởi một từ khóa bằng tiếng anh, ví dụ:

● Thuộc tính width dùng để nói đến chiều rộng của phần tử

● Thuộc tính height dùng để nói đến chiều cao của phần tử

● Thuộc tính target dùng để nói đến nơi mà tài liệu sẽ được mở khi người dùng nhấp vào liên kết

2.1.3 Cách sử dụng các thẻ <div>, <span> trong HTML

- Chức năng là cách sử dụng phần tử <div>

● Phần tử <div> là một phần tử khối, mặc định thì phần tử khối này không

có bất kỳ một định dạng gì, cho nên nó thường được dùng để làm thùng chứa cho các phần tử khác

- Chức năng và cách sử dụng phần tử <span>

● Phần tử <span> là một phần tử nội tuyến, mặc định thì phần tử nội tuyếnnày không có bất kỳ một định dạng gì, cho nên nó thường được dùng để làm thùng chứa cho những phần tử nội tuyến khác (chủ yếu là văn bản)

- Chèn liên kết

● Trong trang web, liên kết là những nội dung (thường được đại diện bởi văn bản hoặc hình ảnh) mà khi chúng ta nhấp vào nó thì chúng ta sẽ được chuyển đến một tài liệu khác

● Để tạo một cái liên kết thì chúng ta dùng cú pháp như sau:

<a href="URL">nội dung đại diện cho cái liên kết</a>

2.1.5 Thẻ tiêu đề (heading) và đoạn văn bản (paragraph) trong HTML

- Thẻ tiêu đề (Heading)

● Thông thường, khi chúng ta xem một bài viết trên các trang tin tức thì chúng ta sẽ thấy bên trong bài viết có những dòng chữ được dùng để đại diện cho các nội dung chính, những dòng chữ đó được gọi là tiêu đề (đề mục) của bài viết

● Thẻ tiêu đề được chia ra làm sáu loại chính: <h1>, <h2>, <h3>, <h4>,

<h5>, <h6>

- Tạo một đoạn văn bản trong HTML

● Trong HTML, văn bản thường được thể hiện dưới dạng từng đoạn Mỗi đoạn văn bản sẽ có một khoảng cách lề phía trên & lề phía dưới (mặc định là 16 pixel) để tách biệt đoạn văn bản với các nội dung nằm ở phía trên và phía dưới nó

● Để tạo một văn bản trong HTML thì dùng thẻ <p></p>

2.1.6 Thuộc tính ID và Class trong HTML

Trong ngôn ngữ HTML, thuộc tính id và thuộc tính class được sử dụng

để đặt tên (phân loại) các phần tử, mục đích là để tiện cho việc quản lý, định dạng các phần tử sau này

- Thuộc tính ID

● Thuộc tính id dùng để đặt tên cho phần tử, tên này phải là duy nhất, không có trường hợp tên id của các phần tử bị trùng nhau

● Để khai báo id cho một phần tử thì chúng ta đặt thuộc tính id vào bên trong thẻ mở của phần tử đó với cú pháp id="tên id" Sau khi đã khai báo, nếu muốn định dạng cho phần tử thì chúng ta chỉ cần gọi thẳng tên

id của nó với cú pháp #tên id

- Thuộc tính Class

● Thuộc tính class cũng gần giống với thuộc tính id, đó chính là dùng để đặt tên cho phần tử Tuy nhiên, việc đặt tên class khác với tên id ở chỗ làvới cùng một tên class thì chúng ta có thể dùng để đặt cho nhiều phần tửkhác nhau

● Để khai báo class cho một phần tử thì chúng ta đặt thuộc tính class vào bên trong thẻ mở của phần tử với cú pháp class="tên class" Sau khi đã khai báo class, nếu muốn định dạng cho phần tử thì chúng ta chỉ cần gọi thẳng tên class của nó với cú pháp tên class

2.1.7 Thuộc tính Style trong HTML

- Chức năng của thuộc tính style là dùng để thiết lập việc định dạng cho mộtphần tử HTML

- Để sử dụng thuộc tính style thì chúng ta đặt nó vào bên trong thẻ mở của phần

tử mà mình muốn định dạng với cú pháp như sau:

● Luôn luôn được bắt đầu trên một hàng mới

● Chiều rộng của phần tử sẽ chiếm toàn bộ chiều rộng phần nội dung của phần tử cha của nó

- Phần tử nội tuyến là gì

Phần tử nội tuyến là loại phần tử mà khi hiển thị lên màn hình thì nó sẽ

có các đặc điểm như sau:

● Phần tử hiển thị tiếp nối trên hàng hiện tại (nếu anh của nó không phải là một phần tử khối)

● Chiều rộng của phần tử phụ thuộc vào kích cỡ của nội dung nằm ở bên trong nó

2.2 Ngôn ngữ CSS

2.2.1 Giới thiệu về CSS

Hình 4 Ngôn ngữ CSS

CSS là chữ viết tắt của cụm từ Cascading Style Sheets, nó được sử dụng

để "định dạng" cho các phần tử trên trang web, hay nói cách khác là nó quyết định việc các phần tử HTML khi hiển thị lên trang web sẽ trông như thế nào.Với việc áp dụng CSS trong thiết kế giao diện website, chúng ta có thể định dạng cho các phần tử trên trang web hiển thị giống với ý muốn của mình, từ

đó tạo ra được những trang web có nội dung đặc sắc, sinh động, phong phú,

color:green;

text-decoration:underline;

position:relative }

2.2.3 Cấu trúc phần tử trong CSS

Thông thường thì "cấu trúc" của một phần tử HTML sẽ có bốn thành phần chính:

- CONTENT : Nội dung của phần tử

- BORDER : Đường viền bao xung quanh nội dung của phần tử

- PADDING : Khoảng cách (vùng đệm) nằm giữa đường viền của phần tử đếnnội dung của phần tử

- MARGIN : Khoảng cách (lề) nằm giữa đường viền của phần tử đến một phần

tử khác

- ngoài ra còn có position chỉ vị trí của phần tử so với phần tử cha hoặc không

- và còn có box-sizing để tránh padding và margin có lỗi vs nhau khi lập trình

2.2.4 Cách tạo đường viền (border) cho phần tử

Để thiết lập kiểu đường viền cho một phần tử thì chúng ta cần phải thiết lập thuộc tính border-style cho phần tử đó với cú pháp như sau:

border-style: value border-radius : có thể theo nhìu đơn vị khác nhau như px hoặc rem

2.2.5 Cách thiết lập vùng đệm (padding) trong CSS

Vùng đệm (padding) là khoảng cách nằm giữa đường viền của phần tử & nội dung của phần tử Để thiết lập vùng đệm cho một phần tử HTML thì chúng ta cần phải

thiết lập thuộc tính padding cho phần tử đó với cú pháp như sau:

padding: value;

pading: top left bottom right

2.2.6 Khoảng cách lề (margin) trong CSS

Lề (margin) là khoảng cách nằm giữa đường viền của phần tử đến một phần tửkhác.Đểthiết lập khoảng cách lề cho một phần tử thì chúng ta cần phải thiết lập

thuộc tính margin cho phần tử đó với cú pháp như sau:

● margin-top

● margin-right

● margin-bottom

● margin-left

2.2.7 Thiết lập màu sắc trong CSS

Trong CSS, màu sắc có thể được xác định dựa theo một trong sáu loại giá trị:

100% là đầy đủ màu sắc, không có sắc thái của màu xám.

50% là 50% màu xám, nhưng bạn vẫn có thể nhìn thấy màu sắc.

0% là màu xám hoàn toàn; bạn không còn có thể nhìn thấy màu sắc.

-2.2.8 Kích thước phần tử (width/height)

- Chiều rộng phần tử

● Khi nói về "chiều rộng" của phần tử thì nó sẽ được tính dựa trên tổng: độ dày đường viền bên trái + độ dày đường viền bên phải + vùng đệm bên trái + vùng đệm bên phải + chiều rộng phần nội dung

● Để thiết lập chiều rộng cho phần nội dung (content) của phần tử thì chúng ta sửdụng thuộc tính width

● Để thiết lập chiều cao cho phần nội dung (content) của phần tử thì chúng ta sử dụng thuộc tính height

height: value;

height có thể nhìu đơn vị như % hoặc vh để tiện lợi hơn khi reponsive web

2.2.9 Thiết kế web hiển thị responsive

Responsive là một tính từ để chỉ một website có thể hiển thị tương thích trênmọi kích thước hiển thị của trình duyệt Ví dụ thông thường nếu giao diện website đặt một chiều rộng cố định là 800px thì chắc chắn nếu xem ở trình duyệtđiện thoại với chiều ngang chỉ từ 320px – 420px sẽ không hiển thị hết được

2.3 Javascript

Hình 3-JavascriptJavascript là một ngôn ngữ lập trình kịch bản dựa vào đối tượng phát triển cósẵn hoặc tự định nghĩa Javascript được sử dụng rộng rãi trong các ứng dụng Website.Javascript được hỗ trợ hầu như trên tất cả các trình duyệt như Firefox, Chrome, trênmáy tính lẫn điện thoại

Nhiệm vụ của Javascript là xử lý những đối tượng HTML trên trình duyệt Với cáchành động như thêm / xóa / sửa các thuộc tính CSS và các thẻ HTML một cách dễdàng Hay nói cách khác, Javascript là một ngôn ngữ lập trình trên trình duyệt ở phíaclient Tuy nhiên, hiện nay với sự xuất hiện của NodeJS đã giúp cho Javascript có thểlàm việc ở backend

2.3.1 Tổng quan về javascript

Javascript chính là một ngôn ngữ lập trình với khả năng đem tới sự sinhđộng khi thiết kế website Đây là dạng ngôn ngữ theo kịch bản, dựa trên chínhđối trượng phát triển có sẵn, hoặc là tự định nghĩa ra Chính vì tính tiện lợi,hiệu quả ứng dụng cao mà ngôn ngữ lập trình này được tin dùng ngày càngnhiều, ứng dụng rộng rãi trong các website hiệu quả

Việc sử dụng ngôn ngữ JS có thể ứng dụng cho mọi trình duyệt khácnhau, hiện được sử dụng phổ biến như Chrome, hay Firefox,… Hơn nữa, đâycòn là ngôn ngữ lập trình hoạt động hiệu quả, được hỗ trợ đầy đủ trên các trìnhduyệt của thiết bị di động Bởi thế mà việc sử dụng đa dạng, có thể đáp ứng tốtcho nhiều nhu cầu, những đòi hỏi khác nhau của người dùng.

Nhìn chung, ngôn ngữ lập trình Javascript khi sử dụng được đánh giá dễhọc, được phát triển bởi Netscape và sử dụng trong hơn 92% các website ngàynay Việc sử dụng JS có thể gắn trong một element trong website, hoặc có thểtrong một sự kiện của trang web tiện lợi và hiệu quả Chính việc có thể hoạtđộng nhanh, nhẹ và mượt mà,… nên ngôn ngữ lập trình này càng được tintưởng và ứng dụng nhiều hơn cho nhu cầu của người dùng Chúng ta có thểthêm trực tiếp JS trực tiếp với HTML, cũng có thể lưu lại trên một files hoàntoàn riêng biệt và sử dụng khi cần thiết

2.3.2 Những ưu điểm javascript mang lại

Ít tương tác với máy chủ – Bạn có thể xác thực đầu vào của người dùngtrước khi gửi trang đến máy chủ Điều này giúp tiết kiệm lưu lượng máy chủ,

có nghĩa là tải ít hơn trên máy chủ của bạn

Phản hồi ngay lập tức cho khách truy cập – Họ không phải đợi tải lạitrang để xem họ có quên nhập nội dung nào không

Tăng tính tương tác – Bạn có thể tạo các giao diện phản ứng khi ngườidùng di chuột qua chúng hoặc kích hoạt chúng thông qua bàn phím

Giao diện phong phú hơn – Bạn có thể sử dụng JavaScript để bao gồmcác mục như các thành phần kéo và thả để trượt Giao diện phong phú chokhách truy cập trang web của bạn

2.3.3 Hạn chế của javascript

Là ngôn ngữ lập trình dễ bị khai thác: Việc dễ dàng bị khai thác, vớinhiều đối tượng người dùng khác nhau vô tình khiến việc bảo mật cho ngôn ngữ

lập trình này không được đánh giá cao Bởi thế, quá trình sử dụng luôn tồn tạinhững nguy cơ nhất định cần chúng ta tìm hiểu và chủ động chú ý cẩn trọng.Một hạn chế của ngôn ngữ JS chính là việc chúng ta có thể sử dụng để thực thi

mã độc trên máy tính của người dùng Tình trạng này vô tình gây ra những thiệthại, những ảnh hưởng không hề nhỏ tới công việc mà chúng ta đang thực hiện.Trong một số trường hợp, trong một vài trình duyệt cụ thể việc sử dụng ngônngữ lập trình Javascript không thể thực hiện được Nó gây ra ảnh hưởng tớiviệc ứng dụng, đáp ứng cho nhu cầu của từng người

Sử dụng ngôn ngữ lập trình này có một hạn chế khác khi có JS code snippetskhá lớn

Khi có khả năng triển khai khác nhau tùy từng thiết bị, nó vừa là ưu điểm songcũng tồn tại những hạn chế nhất định Chính điều này khiến nguy cơ khôngđồng nhất có thể xảy ra, gây ảnh hưởng tới quá trình thực hiện mục tiêu cuốicùng

2.3.4 Hoạt động của ngôn ngữ javascript trên một website

Sử dụng ngôn ngữ Javascript hiện nay trở nên phổ biến, thông dụng đốivới nhiều người dùng Đối với ngôn ngữ lập trình này chúng được tiến hànhnhúng trực tiếp vào trang web, hoặc được tiến hành tham chiếu thông qua mộtfile.js riêng biệt Đây là ngôn ngữ phía client, điều này tức là script được tảiđầy đủ về máy của khách hàng khi truy cập Đồng thời, nó được xử lý ngay tại

đó, thay vì bên server là thực hiện xử lý ngay trên server trước khi đưa kết quảtới khách hàng truy cập

Việc sử dụng ngôn ngữ Javascript hỗ trợ đầy đủ việc khách hàng muốntắt hay mở trên các trình duyệt web được ứng dụng cơ bản hiện nay Nhờ vậy,việc có thể xác định được website hoạt động như thế nào, tình hình thực tế rasao khi không có ngôn ngữ Javascript đang hoạt động

2.3.5 So sánh javascript với các ngôn ngữ khác

Ngôn ngữ Javascript: Với ngôn ngữ lập trình này đảm bảo giúp tănghiệu quả tương tác trên website ở mức tốt nhất Với Script này khi hoạt động