Hướng dẫn index html template - chỉ mục mẫu html

Vietnamese [Tiếng Việt] translation by Na Dang [you can also view the original English article] Na Dang [you can also view the original English article]

Có nhiều cách để xây dựng website resume cá nhân.

Bạn có thể sử dụng một hoặc nhiều trỉnh xây dựng website hoặc bạn có thể lựa chọn một CMS như WordPress, Drupal, hoặc tương tự. Bạn cũng có thể thuê một nhà phát triển chuyên nghiệp để xây dựng nó cho bạn.

Với rất nhiều sự lựa chọn, có thể khó biết được bắt đầu ở đâu. Để làm cho mọi thứ trở nên phức tạp hơn, mỗi một tùy chọn này đều có một ưu điểm và khuyết điểm khác nhau, không kể đến mức độ khó khăn hoặc có ảnh hưởng đến giá cả.

Tuy nhiên, có một cách tuyệt vời để tạo website cá nhân của bạn trong một khoảng thời gian hợp lý. Và đó là bằng cách sử dụng template HTML cho resume. Chúng dễ sử dụng và upload máy chủ lưu trữ của bạn

Dưới đây là một vài trong số những mẫu tốt nhất [để lướt qua nhanh trước khi đọc tiếp]:

Trên hết, code đằng sau template trang resume chuyên nghiệp ít phức tạp hơn đối với người mới bắt đầu hơn so với các ngôn ngữ lập trình phức tạp hơn được sử dụng trong các hệ thống quản lý nội dung.

Trong phần này của loạt bài xây dựng một website resume tuyệt vời, chúng tôi sẽ hướng dẫn bạn qua quá trình đơn giản về cách sửa đổi và upload template HTML resume.

Thực hiện theo quy trình làm việc này để tạo trang resume và tùy chỉnh nó cho thương hiệu cá nhân của bạn-vì vậy bạn có thể khởi chạy trang web của bạn ngay lập tức.

Bạn sẽ cần phải làm gì để đưa website resume của bạn lên trực tuyến?

Trước khi bắt đầu bổ sung template của trang, hãy xem các công cụ bạn sẽ cần để đưa trang resume của bạn khởi chạy.

1. Công ty về Hosting đúng đắn

Mua tên miền cho trang của bạn là một bước đầu tiên trong hành trình của bạn. Bạn cũng sẽ cần một máy chủ lưu trữ, là nơi bạn sẽ upload files cho website của bạn. Tìm đúng công ty hosting không dễ dàng, đặc biệt khi có rất nhiều công ty như vậy. Đa số các nhà cung cấp hosting đề xuất gói hosting cơ bản từ $5-$10 mỗi tháng. Vài công ty đề xuất băng thông không giới hạn và không gian lưu trữ trong khi những cái khác thường có những plan hạn chế hơn.

Điều quan trọng nhất là ghi nhớ rằng đa số các nhà cung cấp hosting hỗ trợ template HTML. Khi mua hàng quanh một công ty hosting, đọc kỹ những câu FQA và chắc rằng có dịch vụ hỗ trợ jkhách hàng, bạn nên cần bất cứ sự giúp đỡ với website của bạn. Bạn cũng nên làm một ít nghiên cứu và đọc qua các bài đánh giá của một máy chủ đặc biệt trên các trang web độc lập để xem khách hàng của họ hài lòng như thế nào.

2. FTP Client

Một khi bạn tìm thấy một công ty lưu trữ, bạn sẽ cần phải tải về một FTP Client. Một FTP Client sẽ cho phép bạn upload template của bạn lên các máy chủ lưu trữ. Sự lựa chọn của chương trình FTP sẽ phụ thuộc vào hệ điều hành mà máy tính của bạn sử dụng.

Một trong những chương trình phổ biến nhất là FileZilla. Đây là một chương trình FTP miễn phí rất dễ sử dụng và nó có sẵn trên Windows, Mac và Linux.

3. Trình biên tập code

Bạn cũng cần một trình soạn thảo văn bản để thay đổi các file trong template của bạn. Trong khi bạn có thể sử dụng Notepad hoặc TextEdit để thực hiện thay đổi, sử dụng trình biên tập code sẽ giúp bạn dễ dàng hơn nhiều. Không giống như trình biên tập văn bản thông thường, trình biên tập code gồm những công cụ giúp đỡ quá trình chỉnh sửa, như sử dụng những màu khác nhau cho những phần khác nhau của code có thể làm nó dễ dàng xem

Với mục đích của bài hướng dẫn này, tôi sẽ sử dụng Text Sublime, có thể được sử dụng trên Mac, Windows và Linux và phiên bản thử nghiệm có thể được tải về miễn phí. Tìm hiểu thêm về cách làm việc với trình biên tập code phổ biến này:

4. HTML Template và Hình ảnh cho website của resume

Hai điều sau cùng mà bạn cần là template HTML cho resume và hình ảnh bạn dự định dung trên trang của bạn.

Với tiêu chí của bài hướng dẫn này, tôi sẽ dùng Flatrica HTML resume website template, được trình bày ở đây:

Template Flatrica HTML cho wesite của resume

Bạn có thể tìm thấy template cho website của mình trong khu vực Downloads của tài khoản Envato sau khi mua hàng. Khi bạn đã download template trang HTML, hãy giải nén thư mục và lưu nó vào máy tính của bạn để truy cập dễ dàng.

Khi nói đến hình ảnh, bạn sẽ cần tấm ảnh headshot [chụp phần mặt bạn] và bất kỳ ảnh cá nhân nào khác mà bạn dự định sử dụng. Bạn cũng có thể sử dụng hình nền hoặc hình mẫu, vì thế đảm bảo bạn có tất cả các hình ảnh được lưu trữ trên máy tính của bạn, để bạn có thể thêm chúng vào template của bạn.

Cách chỉnh sửa nội dung cho template của website resume

Giờ bạn đã có trong tay mọi thứ, đây là lúc cá nhân hoá template với các thông tin của bạn. Hãy đi từng bước làm sao để chỉnh sửa Flatrica HTML template.

1: Cấu trúc của template HTML resume này

Trước khi chúng tôi bắt đầu sửa đổi các file, hãy nhìn vào cấu trúc của mẫu HTML này. Khi bạn giải nén thư mục, bạn sẽ nhận thấy rằng nó chứa hai thư mục: một với tài liệu và một với các file template thực tế.

Xem các file có trong mẫu trang template HTML resume của website này.

Thư mục với các file template trang web thực, có một số thư mục con bên trong:

  • Colors, có tất cả mã màu và biến được sử dụng trong template của trang. có tất cả mã màu và biến được sử dụng trong template của trang.
  • Fonts, chứa tất cả các phông chữ dạng icon., chứa tất cả các phông chữ dạng icon.
  • Images với tất cả các khung hình ảnh. với tất cả các khung hình ảnh.
  • Một thư mục có tất cả code JavaScript cần thiết cho mẫu để hoạt động bình thường. Trong hầu hết các trường hợp, bạn sẽ không bao giờ phải chỉnh sửa thư mục này hoặc các file trong đó khi JavaScript cung cấp thêm chức năng như bật / tắt trình đơn để mở, kiểm soát các hình động động và kiểm tra các forms. JavaScript cần thiết cho mẫu để hoạt động bình thường. Trong hầu hết các trường hợp, bạn sẽ không bao giờ phải chỉnh sửa thư mục này hoặc các file trong đó khi JavaScript cung cấp thêm chức năng như bật / tắt trình đơn để mở, kiểm soát các hình động động và kiểm tra các forms.
  • Một thư mục PHP có chứa mã PHP cần thiết cho biểu mẫu liên hệ để hoạt động. Bạn sẽ chỉ cần chỉnh sửa một dòng code ở đây để thêm địa chỉ email của bạn. PHP có chứa mã PHP cần thiết cho biểu mẫu liên hệ để hoạt động. Bạn sẽ chỉ cần chỉnh sửa một dòng code ở đây để thêm địa chỉ email của bạn.
  • Thư mục Sass chứa tất cả các biến cho stylesheets.Sass chứa tất cả các biến cho stylesheets.
  • Stylesheets chứa các tệp CSS, bạn sẽ cần phải chỉnh sửa để thêm style của bạn vào template và để nó phù hợp với thương hiệu của bạn.chứa các tệp CSS, bạn sẽ cần phải chỉnh sửa để thêm style của bạn vào template và để nó phù hợp với thương hiệu của bạn.

Bên cạnh các thư mục này, còn có một số file HTML: index-normal.html, index-video.html, single-blog.html và single-portfolio.html.index-normal.html, index-video.html, single-blog.html và single-portfolio.html.

Lưu ý rằng template của bạn có thể không có tất cả các file và thư mục, tuy nhiên, trong hầu hết các trường hợp, bạn sẽ gặp các bảng định dạng, hình ảnh, JavaScript và PHP. Mẫu của bạn cũng có thể có nhiều hoặc ít file HTML.

2. Thay thế thông tin mặc định của template HTML

Nhấp đúp chuột vào index-normal.html [hoặc index.html trong trượng hợp bạn sử dụng một template khác]. Nó sẽ mở file trên trình duyệt của bạn, sẽ dễ hiểu hơn cho phần code nào bạn sẽ cần chỉnh sửa và cách tìm chúng trong file template HTML. index-normal.html [hoặc index.html trong trượng hợp bạn sử dụng một template khác]. Nó sẽ mở file trên trình duyệt của bạn, sẽ dễ hiểu hơn cho phần code nào bạn sẽ cần chỉnh sửa và cách tìm chúng trong file template HTML.

Khung nhìn code inspector của trình duyệt của mã lệnh cho template HTML.

Nếu bạn nhìn vào template trên trình duyệt, bạn sẽ thấy rằng bạn cần phải điều chỉnh:

  • Tên và thông tin liên lạc của bạn.
  • Thông tin nội dung phía trên các nút để tải CV của bạn.
  • Những phần khác nhau có thông tin về học vấn, kỹ năng, kinh nghiệm, portfolio, những khách hàng cũ, và nhiều nữa.

Một khi bạn biết điều gì phải thay đổi, bạn có thể bắt đầu tìm kiếm các code tương ứng.

Click chuột phải vào tên gọi John Doe và chọn Inspect. Bạn sẽ chú ý một bảng xổ ra ở phía cuối cùng hiển thị code HTML hình thành nên template của bạn.John Doe và chọn Inspect. Bạn sẽ chú ý một bảng xổ ra ở phía cuối cùng hiển thị code HTML hình thành nên template của bạn.

Dòng code chứa tên đã chọn nằm bên trái của bảng inspector với style tương ứng phía bên phải.

Khi bạn có thể thấy từ hình chụp phía trên, tên gọi giữa thẻ

được sử dụng để hiển thị những tiêu đề.

Trong hầu hết trường hợp, các cặp thẻ như thế này có một thẻ mở và thẻ đóng và nội dung được đặt giữa hai thẻ này để hiển thị được trên một trang web, giống như vậy:

John Doe

Để chỉnh sửa template, tất cả điều bạn cần là thẻ nào chứa một của trang bạn muốn chỉnh sửa, tìm chúng trong code và thay thế chúng với thông tin của bạn.

Mở file HTML trong trình biên tập của bạn

Bây giờ, trở lại folder template, click chuột phải vào index-normal.html và chọn Open with Sublime Text. Bạn sẽ thấy code HTML tạo template của bạn.index-normal.html và chọn Open with Sublime Text. Bạn sẽ thấy code HTML tạo template của bạn.

Để bắt đầu chỉnh sửa template, bạn muốn tìm code tương tự bạn thấy trong bảng inspector của trình duyệt.

Cuộn xuống đến khi bạn tìm thấy chúng ở dòng 150-151. Sau đó, nhấp vào giữa các thẻ

và thay thế chúng bằng tên của chính bạn.150-151. Sau đó, nhấp vào giữa các thẻ

và thay thế chúng bằng tên của chính bạn.

Thay thế tên mặc đinh và thông tin liên hệ.

Sau đó, nhấp vào giữa các thẻ , xoá các text và nhập vào nghề nghiệp của bạn.

Thực hiện lại những bước trên và bạn sẽ thay thế tất cả những thông tin giả bằng chính thông tin của bạn.

Nếu có một phần nào trong template bạn không cần, đơn giản hãy xoá nó đi. Trong phần ảnh chụp bên dưới, tôi đã chọn mọi thứ trong phần bảng giá và xoá tất cả code trong đó.

Bạn có thể xoá những phần code mà bạn không cần.

Cách thay thể các ảnh của chính bạn

Để thay đổi hình ảnh của bạn, chỉ cần chọn tất cả ảnh trong thư mục tương ứng, xoá chúng đi, và đăt các hình ảnh của bạn vào cùng thư mục. Nếu bạn tuân theo lời khuyên trước đó, đặt tên hình ảnh của bạn giống với tên của các khuôn hình mẫu, thì phần chỉnh sửa trở nên nhanh hơn.

Nếu bạn muốn bổ sung thông tin, chọn code hiện tại trong phần mong muốn, copy chúng với CTRL/CMD + C và sau đó paste chúng vào bên dưới với CTRL/CMD + V. Trong phần ảnh chụp bên dưới, tôi đã muốn bổ sung một thanh kỹ năng ví thế tôi chọn phần code cho thanh kỹ năng thứ 4 và copy nó ngay tức thì: CTRL/CMD + C và sau đó paste chúng vào bên dưới với CTRL/CMD + V. Trong phần ảnh chụp bên dưới, tôi đã muốn bổ sung một thanh kỹ năng ví thế tôi chọn phần code cho thanh kỹ năng thứ 4 và copy nó ngay tức thì:

Bạn có thể nhân đôi các phần HTML nếu bạn muốn

Và kết quả trông giống như vậy:

Sản phẩm sau cùng của việc bổ sung một thanh kỹ năng mới.

Cách thay đổi diện mạo của trang HTML Resume của bạn

Một khi bạn đã thay thế tất cả thông tin, đây là lúc để thay đổi template theo ý thích của bạn. Mặc định Flatrica HTML template có một vài stylesheet khác biệt. Nếu bạn nhìn vào thư mục stylesheet, bạn sẽ chú ý rằng chúng được đặt tên sau màu sắc được sử dụng:

Flatrica có nhiều chọn lựa cho stylesheet.

Bạn có thể nhanh chóng thay đổi màu sắc bằng cách thay đổi stylesheet trong phần đầu của tài liệu với tên của stylesheet mà bạn ưa thích. Hãy tìm kiếm dòng code như sau:

Thay đổi tên thành style_blue.css sẽ mang đến cho template một diện mạo và màu sắc mới: style_blue.css sẽ mang đến cho template một diện mạo và màu sắc mới:

Kết quả của ứng dụng blue stylesheet.

Nếu bạn cảm thấy phiêu lưu, bạn có thể điều chỉnh stylesheet chính tên gọi style.css với các font và màu sắc do chính bạn chọn. Ví dụ, bạn có thể chỉnh sửa màu nền trong style.css bằng cách nhập mã HEX của màu sắc mong muốn như sau:style.css với các font và màu sắc do chính bạn chọn. Ví dụ, bạn có thể chỉnh sửa màu nền trong style.css bằng cách nhập mã HEX của màu sắc mong muốn như sau:

background-color: #65b5c1;

Điều chỉnh CSS có thể thực hiện cùng một cách khi chúng ta điều chỉnh HTML. Chuột phải vào thành phần bạn muốn thay đổi và nhấn Inspect. Lần này bạn sẽ muốn tìm kiếm code ở bên phải của tab inspector và sau đó kiếm code tương tự trong trình biên tập code.Inspect. Lần này bạn sẽ muốn tìm kiếm code ở bên phải của tab inspector và sau đó kiếm code tương tự trong trình biên tập code.

Xem qua file CSS của template.

Cách upload file của website của bạn lên máy chủ

Sau khi bạn đã bổ sung chỉnh sửa các file của template theo ý thích, bạn sẽ cần upload chúng lên máy chủ lưu trữ. Bạn nên nhận được một email từ máy chủ chứa những thông tin cần thiết cho việc chuyển đổi file qua FTP.

Để bắt đầu quá trình upload, chạy chương trình FTP. Trong trường hợp này, tôi dùng FileZilla. Nhập thông tin được cấp từ host của bạn vào trên thanh trên cùng và nhấn QuickConnect.QuickConnect.

Thêm thông tin vào trong FileZilla

Xác định vị trí thư mục với template của bạn trên máy tính, ở phía bên trái của màn hình, và nhấp vào nó để mở rộng nó. Ở phía dưới bên trái, chọn tất cả các file và thư mục và kéo chúng sang phía bên phải màn hình.

Hãy chắc rằng đã upload chúng vào thư mục gốc của máy chủ lưu trữ trong thư mục public_html.public_html.

Upload các file lên máy chủ qua FTP.

Khi tất cả các file đã được uploadw, hãy mở trình duyệt của bạn và nhập tên miền của bạn. Xin chúc mừng, website mới của bạn hiện đang hoạt động!

Bốn thủ thuật nhanh để dựng trang resume tuyệt vời của bạn

Bây giờ bạn đã biết cách sử dụng một template HTML cho resume, đây là bốn thủ thuật nhanh giúp bạn làm cho trang cá nhân của mình trở nên tuyệt vời hơn:

  1. Nén ảnh của bạn lại - Trước khi upload file lên máy chủ lưu trữ của bạn, chắc chắn rằng giảm kích thước file của ảnh của bạn bằng cách tối ưu chúng. Điều này sẽ giúp bạn tăng tốc website của bạn. Bạn có dùng một công cụ như TinyJPG để nén hình ảnh mà không ảnh hưởng đến chất lượng.- Trước khi upload file lên máy chủ lưu trữ của bạn, chắc chắn rằng giảm kích thước file của ảnh của bạn bằng cách tối ưu chúng. Điều này sẽ giúp bạn tăng tốc website của bạn. Bạn có dùng một công cụ như TinyJPG để nén hình ảnh mà không ảnh hưởng đến chất lượng.
  2. Cân nhắc việc thu gọn các file Stylesheet và JavaScript của bạn - Với các hình ảnh, việc giảm kích thước file sẽ giúp bạn tải nhanh hơn. Những công cụ CSS Minifier và JSCompress sẽ thực hiện công việc cho bạn. - Với các hình ảnh, việc giảm kích thước file sẽ giúp bạn tải nhanh hơn. Những công cụ CSS Minifier và JSCompress sẽ thực hiện công việc cho bạn.
  3. Bổ sung trang của bạn vào những hồ sơ trên phương tiện xã hội của bạn - Bạn làm việc chăm chỉ để tạo trang của bạn, giờ là thời gian để thế giới biết về nó. Tăng tính nhận diện của bạn bằng cách bổ sung cho trang của bạn đến các tài khoản phương tiện xã hội.- Bạn làm việc chăm chỉ để tạo trang của bạn, giờ là thời gian để thế giới biết về nó. Tăng tính nhận diện của bạn bằng cách bổ sung cho trang của bạn đến các tài khoản phương tiện xã hội.
  4. Sử dụng nó là một phần của chữ ký Email của bạn - Một trong số cách tốt nhất để quảng bá cho trang của bạn là bổ sung thêm chữ ký email. Đơn giản, miễn phí, và chỉ mất vài giây để thiết lập, và những lợi ích là rất nhiều. - Một trong số cách tốt nhất để quảng bá cho trang của bạn là bổ sung thêm chữ ký email. Đơn giản, miễn phí, và chỉ mất vài giây để thiết lập, và những lợi ích là rất nhiều.

Thiết lập template HTML cho resume của bạn

Chỉnh sửa một template HTML có lẽ nghe đáng ngại buổi ban đầu, nhưng không quá khó khi bạn hiểu được cấu trúc của template và những gì cần được chỉnh sửa. Nếu bạn cũng dành thời gian để đọc một vài hướng dẫn, bạn sẽ thuần thục HTML và CSS trong thời gian ngắn. Sử dụng hướng dẫn của chúng tôi phía trên để sửa đổi template cho trang resume của bạn và tăng cơ hội được tuyển dụng của bạn.

Bài Viết Liên Quan

Chủ Đề