Báo cáo thực tập tốt nghiệp chuyên Đề thực tập thiết kế trang web blog cá nhân bằng html cơ sở thực tập trường cao Đẳng công nghệ kinh tế thuỷ lợi miền trung

Bằng việc áp dụng kiến thức về HTML và CSS, JavaScript, tôi hy vọng tạo ra một trang web đẹp mắt, dễ đọc và thân thiện với người dùng... Báo cáo phần 1 Phần 1: Lý thuyết cơ bản 1.1 Tìm h

TRƯỜNG CAO ĐẲNG CÔNG NGHỆ, KINH TẾ

VÀ THUỶ LỢI MIỀN TRUNG KHOA: KHOA HỌC CƠ BẢN

-🙞🙞🙞🙞🙞 -BÁO CÁO THỰC TẬP TỐT NGHIỆP

Chuyên đề thực tập: THIẾT KẾ TRANG WEB BLOG CÁ NHÂN BẰNG HTML Chuyên ngành: TIN HỌC ỨNG DỤNG

Trình độ: Trung Cấp

Cơ sở thực tập: TRƯỜNG CAO ĐẲNG CÔNG NGHỆ KINH TẾ THUỶ LỢI MIỀN TRUNG

Họ và Tên: Vương Nhất Duy, Lê Ngọc Nam

Nhà giáo hướng dẫn: Nguyễn Thị Kiều Trang

Quảng nam, tháng 9 năm 2024

LỜI MỞ ĐẦU

Trong thời đại hiện đại, website đã trở thành một phần không thể thiếu trong cuộc sống hàng ngày của chúng ta Với sự phát triển nhanh chóng, ngành lập trình web không chỉ đóng vai trò quan trọng trong nền kinh tế mà còn ảnh hưởng đến sự phát triển toàn diện của con người

Việt Nam, theo với xu hướng toàn cầu, cũng đang chứng kiến sự bùng

nổ của ngành công nghiệp web Dù mới nổi lên trong vài năm gần đây, ngành này ngày càng lan rộng trong cuộc sống hàng ngày của mỗi người dân Các trang web cá nhân không chỉ đơn thuần là nơi chia sẻ suy nghĩ cá nhân, mà còn

là không gian quý báu để lưu giữ kỷ niệm, học hỏi và phát triển bản thân

Trang web Blog cá nhân của tôi sẽ tập trung vào chia sẻ về cuộc sống thường ngày, sở thích, cũng như đánh giá về công nghệ và những câu chuyện

về du lịch Tôi mong rằng trang web này sẽ trở thành điểm kết nối và chia sẻ giữa tôi và cộng đồng mạng Bằng việc áp dụng kiến thức về HTML và CSS, JavaScript, tôi hy vọng tạo ra một trang web đẹp mắt, dễ đọc và thân thiện với người dùng

Mục lục

Phần 1: Lý thuyết cơ bản

1.1 Tìm hiểu về HTML và cú pháp cơ bản

1.2 Tạo và định dạng nội dung trang web bằng HTML

1.3 Áp dụng CSS để thiết kế giao diện trang web

1.4 Thực hiện các tác vụ cơ bản sử dụng JavaScript

Phần 2: Phân tích và thiết kế trang web

2.1 Xác định yêu cầu và mục tiêu thiết kế trang web blog cá nhân 2.2 Thiết kế cấu trúc trang web sử dụng HTML

2.3 Thiết kế giao diện và trang trí bằng CSS

2.4 Tạo các chức năng tương tác bằng JavaScript

Phần 3: Thực hiện thiết kế website

3.1 Xây dựng giao diện chính của trang web

3.2 Tạo các trang con và thành phần giao diện

3.3 Tối ưu hóa hiệu suất và đảm bảo độ tương thích

Phần 4: Đánh giá và kết luận

4.1 Đánh giá tổng quan về quá trình thực tập và kết quả đạt được 4.2 Những kinh nghiệm và bài học rút ra từ quá trình thực tập 4.3 Đề xuất những cải tiến và phát triển trong tương lai

Báo cáo phần 1

Phần 1: Lý thuyết cơ bản

1.1 Tìm hiểu về HTML và cú pháp cơ bản

1.1.1 Tải và cài đặt Visual Studio Code

Giới thiệu: Để bắt đầu khám phá về HTML và các cú pháp cơ bản của nó, một "Trình soạn thảo văn bản" là cần thiết để sử dụng và viết mã ngôn ngữ HTML.Trong trường hợp này, em sử dụng trình soạn thảo văn bản là Visual Studio Code

Visual Studio Code là một trình biên tập mã nguồn mở và miễn phí được phát triển bởi Microsoft Được thiết kế để hoạt động trên nhiều hệ điều hành như Windows, macOS và Linux, Visual Studio Code là một công cụ hiệu quả cho việc phát triển ứng dụng web, bao gồm việc code HTML, CSS, và JavaScript

Bước 1: Tải Visual Studio Code

Truy cập trang web chính thức của Visual Studio Code tại:

https://code.visualstudio.com/

Tại trang chủ, bạn sẽ thấy nút "Download for Windows", "Download for Mac", "Download for Linux" tùy theo hệ điều hành bạn đang sử dụng Nhấn vào nút tương ứng để tải xuống bản cài đặt

Bước 2: Cài đặt Visual Studio Code

Ở bước này, em sử dụng hệ điều thành Windows nên hướng dẫn ở nền tảng Windows

1.Sau khi tải xuống, mở file cài đặt Visual Studio Code (có thể là file có đuôi

".exe")

2.Chọn ngôn ngữ và đường dẫn cài đặt sau đó nhấn "Next"

3.Chọn các tùy chọn cài đặt mong muốn và nhấn "Next"

4.Chọn "Create a desktop icon" nếu bạn muốn tạo biểu tượng trên màn hình

Desktop, sau đó nhấn "Next"

5.Nhấn "Install" để bắt đầu quá trình cài đặt

6.Khi cài đặt hoàn tất, nhấn "Finish" để đóng cửa sổ cài đặt

Sau khi cài đặt hoàn tất, bạn có thể mở Visual Studio Code và bắt đầu viết mã ngôn ngữ HTML cùng với các ngôn ngữ lập trình khác một cách dễ dàng

1.1.2 Giới thiệu về HTML

HTML (Hypertext Markup Language) là ngôn ngữ đánh dấu tiêu chuẩn được sử dụng để tạo và cấu trúc các trang web Dưới đây là một số điểm quan trọng về HTML:

Ngôn ngữ Đánh Dấu: HTML không phải là ngôn ngữ lập trình mà là ngôn ngữ đánh dấu để xác định cấu trúc của trang web thông qua các thẻ và các phần tử

Cấu Trúc Thẻ: Mỗi phần tử trên trang web được xác định bằng các cặp thẻ HTML, bắt đầu bằng thẻ mở và kết thúc bằng thẻ đóng Ví dụ: <p> là thẻ mở cho đoạn văn bản và </p> là thẻ đóng

Phân Cấp: HTML dựa trên cấu trúc phân cấp, nghĩa là các phần tử có thể chứa các phần tử khác, tạo thành cây phân cấp của các phần tử trên trang web

Định dạng Văn Bản: HTML không chỉ giúp xác định cấu trúc của trang web

mà còn hỗ trợ định dạng văn bản như định dạng tiêu đề, đoạn văn, danh sách, liên kết, hình ảnh, và nhiều phần tử khác

Tương Tác với CSS và JavaScript: HTML thường được kết hợp với CSS (Cascading Style Sheets) để thiết kế và trang trí trang web, cũng như với

JavaScript để tạo ra các phản ứng tương tác trên trang

Phiên Bản và Tiêu Chuẩn: HTML đã trải qua nhiều phiên bản với các cải tiến liên tục; phiên bản mới nhất là HTML5, cung cấp các tính năng mạnh mẽ hơn

và tương tác hơn

HTML là ngôn ngữ cơ bản và quan trọng nhất trong việc phát triển web Nó cung cấp cấu trúc cơ bản cho mọi trang web và là nền tảng cho việc tích hợp các công nghệ khác để tạo ra trải nghiệm web đa dạng và phong phú

<p>Đây là đoạn văn bản</p>

Tạo Đường Link (Liên Kết):

<a href="https://www.example.com">Đây là liên kết</a>

Đây chỉ là một số cú pháp cơ bản của HTML HTML còn rất nhiều thẻ và thuộc tính khác để tạo ra các trang web phức tạp và đa dạng

1.2.1 : Tạo và định dạng nội dung trang web bằng HTML

Các bước cơ bản

1.Khai Báo HTML Document:

- Một trang web HTML bắt đầu với khai báo doctype và cấu trúc cơ bản HTML

2.Thêm Nội Dung:

- Sử dụng các thẻ HTML như <h1>, <p>, <img>, <a> để thêm tiêu đề, đoạn văn bản, hình ảnh, và liên kết vào trang web

- Sử dụng thẻ <ul>, <ol>, <li> để tạo danh sách, và thẻ <table>, <tr>, <td>

để tạo bảng

6.Tạo Biểu Mẫu:

- Sử dụng thẻ <form>, <input>, <button> để tạo các biểu mẫu nhập liệu

1.3.: Áp dụng CSS để thiết kế giao diện trang web

Tiếp theo, em bắt đầu học về CSS để thiết kế giao diện trang web một cách chuyênnghiệp hơn

Để mà có thể áp dụng CSS vào HTML thì chúng ta cần phải liên kết nó với file index.html Ta sử dụng thẻ <link> trong phần <head> của tệp HTML:

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Trang Web Blog Cá Nhân</title>

<link rel="stylesheet" href="style.css">

</head>

Áp dụng CSS để tạo các hiệu ứng như hover, transition, animation để làm cho trang web trở nên sinh động và hấp dẫn hơn

Thực hành viết CSS để tạo các layout linh hoạt, responsive và thân thiện với ngườidùng trên các thiết bị khác nhau.

1.4: Thực hiện các tác vụ cơ bản sử dụng JavaScript:

Cuối cùng, em đã thực hiện các tác vụ cơ bản sử dụng JavaScript như xử lý sự kiện, thay đổi nội dung động và tương tác người dùng để tạo trải nghiệm tốt hơn trên trang web

Phần 2: Phân tích và thiết kế trang web

2.1: Xác định yêu cầu và mục tiêu thiết kế trang web blog cá nhân

Khi thiết kế một trang web blog cá nhân, bước đầu tiên là xác định rõ yêu cầu và mục tiêu của trang Điều này giúp tạo ra một trải nghiệm trực tuyến phù hợp với

cá tính của người viết và hấp dẫn đối với độc giả

2.1.1: Yêu cầu thiết kế trang web blog cá nhân

Yêu cầu thiết kế trang web:

Để thiết kế một trang Blog mục đích là hướng tới toàn bộ độc giả từ sử dụng điện thoại cho đến máy tính chúng ta phải yêu cầu rằng trang web phải được thiết kế có

tính responsive, tức là tự động thích ứng với mọi kích thước màn hình từ nhỏ đến

lớn Điều này giúp đảm bảo trải nghiệm người dùng tốt nhất không phân biệt thiết

bị mà họ đang sử dụng Tối Ưu Tốc Độ Tải Trang đảm bảo thời gian tải trang

nhanh để cung cấp trải nghiệm tốt cho người dùng trên cả điện thoại di động và máy tính

Về giao diện, chúng ta cần phải xác định rằng một số yếu tố quan trọng như layout,màu sắc, font chữ, v.v Mang đến trải nghiệm UI/UX tốt độc giả ở mọi thiết bị Một trang web cơ bản, Layout chúng ta cần phải có 4 phần gồm:

 Header: Chứa logo, tiêu đề trang web và menu điều hướng.

 Content Area: Hiển thị bài viết và hình ảnh.

 Sidebar: Chứa các widget

 Footer: Liên hệ, thông tin bản quyền, liên kết mạng xã hội.

Nhưng vì em muốn hướng đến sự tối giản nên em đã lược bỏ phần footer và liên kết mạng xã hội được tích hợp vào trong header, bỏ đi phần sidebar

mục tiêu thiết kế trang web blog cá nhân:

 Tạo Ấn Tượng Ban Đầu: Thiết kế giao diện thật sự đẹp mắt và chuyên

nghiệp để thu hút người đọc ngay từ lần đầu tiên họ truy cập trang web

 Tạo Sự Tương Tác: Đảm bảo người đọc có thể tương tác với nội dung,

bình luận và chia sẻ bài viết một cách dễ dàng và thuận tiện

 Tạo Thương Hiệu Cá Nhân: Trang web phải phản ánh phong cách và cá

nhân của chủ blog để tạo ra một ấn tượng sâu sắc với độc giả

 Tăng Tương Tác: Tạo điều kiện cho người đọc để bình luận, chia sẻ ý kiến

và tương tác với chủ blog, tạo cơ hội giao lưu và kết nối

 Tạo Nội Dung Chất lượng: Hỗ trợ việc viết bài chất lượng và hấp dẫn để

thu hút độc giả và duy trì một cộng đồng độc giả trung thành

Mục Tiêu Của một trang Blog:

Một blog cá nhân thường có nhiều mục đích khác nhau Nó có thể là nơi để chia sẻ kiến thức chuyên môn, ghi lại hành trình cá nhân, hoặc đơn giản là một không gian

để giãi bày suy nghĩ Mục đích của blog sẽ ảnh hưởng trực tiếp đến cách bạn tạo nội dung và thiết kế giao diện

Ví dụ, nếu mục tiêu là chia sẻ kiến thức trong một lĩnh vực cụ thể, nội dung cần được tổ chức và trình bày rõ ràng để dễ dàng tiếp cận Ngược lại, nếu blog mang tính chất cá nhân, giao diện có thể tự do và sáng tạo hơn để phản ánh cá tính riêng

2.2 Thiết kế cấu trúc trang web sử dụng HTML:

bố cục của trang web của em:

Về layout website thì trang web của em muốn hướng tới sự tối giản nên em đã lược

bỏ chỉ còn 3 phần chính là Header, Main Content và Footer:

Header thì sẽ có logo trang blog, menu điều hướng và các liên kết dẫn đến trang mạng xã hội của chủ blog

Main Content được chia ra thành 2 phần

Main Content #1: sẽ có tên chủ blog, năm bắt đầu, background image, và có nút scroll down để kéo trang web xuống phần tiếp theo

Ở main Content #2 hiển thị các bài viết blog có tiêu đề, ngày đăng, tên tác giả, ảnh minh hoạ

Trang web có chia bài viết thành các trang, hiển thị "Page 1 of 2" để người dùng cóthể chuyển qua các trang khác.

Phần Footer hiển thị thông tin về người làm trang web, có nút scroll up để quay lại đầu trang

Đây là web em sau khi đã thêm các tiêu đề, văn bản bằng HTML vào

2.3 Thiết kế giao diện và trang trí bằng CSS:

n Header và Content Main #1 sau khi đã CSS cho trang web

Phần Content Main #2 hiển thị các bài viết, để sắp xếp lại các bài viết Em cần phảidùng tới JavaScript để thêm các thư viện vào

Footer của web, có nút scroll up để trở về đầu trang

2.4 Tạo các chức năng tương tác bằng JavaScript:

Em đã thêm các tích năng cho trang Blog em như :

SmoothScroll, một thư viện giúp cải thiện trải nghiệm cuộn trang trên các trang web Nó cung cấp hiệu ứng cuộn mượt mà thay vì cuộn ngay lập tức, giúp nội dung chuyển động trên màn hình dễ chịu và thân thiện hơn cho trang Blog của em

Để người dùng có thể sử dụng trên nhiều thiết bị kích thước màn hình khác nhau,

em đã sử dụng SlickNav Responsive Mobile Menu, là một thư viện được sử dụng

để tạo menu dạng di động linh hoạt Nó biến đổi menu điều hướng của trang web thành một menu trượt hoặc thả xuống khi trên các thiết bị di động, đảm bảo sự thânthiện với người dùng trên nhiều kích thước màn hình khác nhau

Và cuối cùng là imagesLoaded PACKAGED, thư viện này giúp kiểm tra xem tất

cả các hình ảnh trong một trang web đã tải xong hay chưa, và nhờ nó mà các bài post của em đã được sắp xếp lại

Phần 3: Thực hiện thiết kế website:

3.1 Xây dựng giao diện chính của trang web

Tổng quan về giao diện chính của trang web:

Header sẽ có Logo, và có hai mục là Home (Trang chủ của web) và About

Me( mục này nói về thông tin của chủ blog) và có các liên kết mạng xã hội của chủblog hiển thị dưới dạng biểu tượng

Tiếp đến là hiển thị tên của chủ Blog, năm bắt đầu, và dưới cùng sẽ có nút scroll down khi nhấn vào thì sẽ kéo xuống phần tiếp theo

Có các bài viết

Phần footer tên thành viên của nhóm và có nút scroll up khi nhấn vào thì sẽ trở về đầu trang

3.2 Tạo các trang con và thành phần giao diện:

tổng quan về các trang con:

Trang của bài viết: có tiêu đề, ảnh và dòng thời gian

Trang của mục About me:

3.3 Tối ưu hóa hiệu suất và đảm bảo độ tương thích

Tối ưu hoá:

 Tối ưu hóa hình ảnh và tải trước hình ảnh: Sử dụng thư viện

imagesLoaded để kiểm tra xem hình ảnh đã tải xong chưa Điều này giúp tránh việc hiển thị giao diện trang web mà hình ảnh chưa hoàn toàn tải xong

 Tối ưu hóa cuộn trang: Sử dụng SmoothScroll để tối ưu cuộn trang mượt

mà hơn, đồng thời hỗ trợ các phím tắt phổ biến, cuộn bằng chuột hoặc touchpad Điều này giúp cải thiện trải nghiệm người dùng khi duyệt trang

Đảm Bảo Độ Tương Thích:

 Responsive Design đã áp dụng thiết kế đáp ứng để trang web hiển thị tốt trêncác thiết bị di động và máy tính bảng.

 Kiểm tra và sửa lỗi kỹ lưỡng trang web trên các trình duyệt phổ biến và sửa lỗi để đảm bảo độ tương thích

Phần 4: Thực hiện thiết kế website:

4.1 Đánh Giá Tổng Quan về Quá Trình Thực Tập:

Trong quá trình thực tập, em đã tập trung vào việc thiết kế trang blog cá nhân của mình Đây là một cơ hội quý giá để áp dụng kiến thức học được từ trường vào thực

tế Qua quá trình này, em đã học được cách tổ chức nội dung, cải thiện khả năng thiết kế và tối ưu hóa trải nghiệm người dùng trên trang web

Kết quả cuối cùng là một trang blog cá nhân có giao diện sáng tạo, dễ đọc và thân thiện với người dùng Ngoài ra, em đã tích lũy được kinh nghiệm quý báu trong việc quản lý thời gian, làm việc độc lập và tương tác với công nghệ web hiện đại

4.2 Những Kinh Nghiệm và Bài Học Rút Ra từ Quá Trình Thực Tập:

Trong suốt quá trình này, em đã thu nhặt được một số kiến thức và kinh nghiệm quý báu như Kỹ năng thiết kế web, em đã không ngừng nâng cao khả năng sáng tạo và kỹ năng thiết kế giao diện web Việc này đã giúp tôi hiểu rõ hơn về cách tạo

ra những trang web hấp dẫn và dễ sử dụng cho người dùng Quan trọng không kém, về tương tác với người dùng em đã nắm vững cách người dùng tương tác với trang web và cách cải thiện trải nghiệm của họ Điều này giúp tôi thiết kế các trang

web không chỉ đẹp mắt mà còn tối ưu hóa trải nghiệm người dùng Và em còn học cách tổ chức công việc, ưu tiên nhiệm vụ và theo dõi tiến độ

Những kỹ năng và kiến thức mà tôi đã tích lũy trong quá trình này sẽ là nền tảng vững chắc cho sự phát triển và thành công trong lĩnh vực thiết kế web và quản lý

dự án trong tương lai

4.3 Đề Xuất Những Cải Tiến và Phát Triển trong Tương Lai:

Dựa trên trải nghiệm của em, em sẽ cải tiến và phát triển:

 Tối ưu hóa trang web: Cải thiện tốc độ tải trang và tối ưu hóa trang để phản ánh tốt hơn trên các thiết bị di động

 Nâng cao nội dung: Tăng cường viết nội dung chất lượng và đa dạng để thu hút độc giả

 Kế hoạch marketing: Xây dựng chiến lược quảng cáo và tiếp thị để tăng cường sự nhận biết và tương tác với độc giả

Các kỹ thuật và công cụ sử dụng trong dự án

Trong dự án này, các kỹ thuật và công cụ sử dụng bao gồm:

- Visual Studio code