Thiết kế và lập trình trang web đầu tiên của bạn trong 9 bước

Học cách bắt đầu lập trình một trang web có thể là một nhiệm vụ khó khăn. Nếu bạn không quen thuộc với các ngôn ngữ lập trình, điều đó thậm chí còn khó hơn. Nhưng học cách viết mã một trang web thật dễ dàng với hướng dẫn phù hợp.

Trong hướng dẫn này, chúng ta sẽ xem xét thiết kế trang web đơn giản cho người mới bắt đầu với mẫu trang web HTML. Chúng là cách dễ nhất để viết mã cho một trang web. Đó là một quá trình sẽ giúp bạn tiết kiệm thời gian về lâu dài, đồng thời cho phép bạn tạo một trang web được thiết kế chuyên nghiệp cho khách truy cập của mình!

Chúng ta sẽ sử dụng một mẫu từ Envato Elements trong hướng dẫn mã thiết kế web HTML này. Nếu bạn muốn duyệt các tùy chọn mẫu thiết kế web khác, hãy xem qua bộ sưu tập các mẫu mã thiết kế trang web HTML của Envato Elements. Bạn sẽ tìm thấy các tùy chọn đáp ứng, chuyên nghiệp sẵn sàng tùy chỉnh cho dự án tiếp theo của mình.

Hai khóa học viết mã và thiết kế web miễn phí cho người mới bắt đầu

Theo dõi Việt SEO thông qua hai khóa học miễn phí hoành tráng dành cho người mới bắt đầu này, khi anh ấy giải thích các nguyên tắc cơ bản của thiết kế web và HTML & CSS. Với những hướng dẫn này, bạn có thể đi từ chỗ không biết gì đến việc có thể thiết kế và viết mã cho trang web của riêng mình. Đăng ký kênh Youtube của Vietseo để biết thêm thông tin!

Trước khi chúng tôi bắt đầu lập trình thiết kế web của mình

Bạn có thể rất hào hứng khi học cách bắt đầu lập trình một trang web. Nhưng nhìn vào mã thiết kế trang web HTML có thể đáng sợ nếu bạn là người mới bắt đầu. Vì vậy, trước khi đi sâu vào, chúng ta hãy xem một số thuật ngữ hữu ích cần biết để bạn có thể hiểu những thay đổi mà bạn đang thực hiện trong các bước dưới đây để viết mã trang web.

• HTML: Ngôn ngữ đánh dấu siêu văn bản là ngôn ngữ tổ chức các trang web. Những thứ như văn bản và liên kết được thêm vào đây. Trong hướng dẫn mã thiết kế web này, chúng ta sẽ làm việc với HTML.
• Thẻ: Thẻ là cách mã hoạt động trong HTML. Chúng được viết giữa các dấu ngoặc nhọn. Một thẻ sẽ mở (tức là <title>) và một thẻ khác sẽ đóng (tức là </title>). Nội dung văn bản nằm giữa thẻ mở và thẻ đóng.
• PHP: Ngôn ngữ kịch bản phía máy chủ chủ yếu được sử dụng để xây dựng các ứng dụng dựa trên web. Bạn sẽ thấy nó được sử dụng để thu thập dữ liệu. Hầu như tất cả các biểu mẫu liên hệ đều hoạt động với tệp PHP.
• Nhận xét: Nhận xét là ghi chú do người viết mã để lại. Những điều này không thay đổi bất cứ điều gì về trang, nhưng chúng cho bạn thấy mã phải làm gì.

Những gì chúng ta cần làm khi thiết kế và lập trình website

Nếu bạn muốn làm theo hướng dẫn mã thiết kế web đơn giản này, bạn sẽ cần một vài thứ:

• Okno—Mẫu HTML5 đa năng cuối cùng. Chúng tôi sẽ chỉnh sửa trang đích cá nhân từ mẫu trang web HTML này.
• Trình chỉnh sửa văn bản tuyệt vời. Văn bản tuyệt vời là những gì chúng tôi sẽ sử dụng để chỉnh sửa đánh dấu.
• Chrome, Safari, Firefox hoặc một trình duyệt web khác. Bạn sẽ cần trình duyệt của mình để đảm bảo các thay đổi của bạn hoạt động bình thường.

Tìm hiểu thêm Dịch vụ phát triển web toàn diện

1. Chỉnh sửa Tiêu đề và thẻ h

Okno cung cấp rất nhiều mã thiết kế HTML, nhưng chúng tôi đang làm việc trên tệp index-onepage-personal.html trong hướng dẫn này. Đó là một mẫu mã thiết kế trang web đơn giản dành cho người mới bắt đầu làm việc.

Mở nó trong Sublime Text và trình duyệt của bạn sau khi giải nén thư mục Okno ZIP. Sublime Text sẽ cho phép bạn chỉnh sửa mã HTML mẫu cho thiết kế trang web và trình duyệt của bạn sẽ cho phép bạn xem các thay đổi trong thời gian thực.

Trong Sublime Text, tìm thẻ tiêu đề dưới bình luận tiêu đề. Thao tác này sẽ thay đổi tên xuất hiện trên tab hoặc cửa sổ của trang. Nó sẽ giống như thế này trong mã HTML trang web đơn giản:

<!-- Title -->

<title>Công ty Việt SEO chuyên SEO từ khóa website lên Top Google</title>

Thay thế văn bản bằng tên trang web của bạn. Vì đây là mẫu trang web một trang cá nhân nên rất có thể đây sẽ là tên riêng của bạn. Lưu tệp trong Sublime Text và làm mới trang trong trình duyệt của bạn. Bạn sẽ thấy các thay đổi đối với mã thiết kế web trong tab ở đầu cửa sổ:

Hãy chuyển sang thanh điều hướng của thiết kế trang web đơn giản dành cho người mới bắt đầu này. Thanh này hiển thị khi khách truy cập cuộn và thanh này cũng bao gồm một vị trí dành cho logo ở bên trái. Để thay đổi logo, hãy tìm nhận xét Logo và chỉnh sửa các dòng mã thiết kế HTML sau:

<!-- Logo -->

<a class="logo-wrapper" href="index.html">

<img class="logo logo-light" src="assets/img/logo-light.png" alt="Viet SEO">

<img class="logo logo-dark" src="assets/img/logo-dark.png" alt="Việt SEO">

</a>

Cả hai dòng đều dành cho logo của bạn, nhưng dành cho các phần khác nhau của trang mã thiết kế web của bạn. Dòng trên cùng dành cho biểu trưng sáng trên nền tối. Điểm mấu chốt là dành cho logo tối trên nền sáng. Điều này là để đảm bảo thương hiệu của bạn hiển thị trên trang.

Đặt các bản sao logo của bạn vào thư mục img nằm trong thư mục nội dung. Thay đổi tên tệp trong mã thiết kế trang web (logo-light.png và logo-dark.png) để khớp với tên tệp logo của bạn.

Biểu trưng của bạn phải ở định dạng tệp PNG với nền trong suốt

Lưu ý rằng thuộc tính alt rất quan trọng đối với trang web của bạn trong trường hợp ảnh không tải hoặc khách truy cập đang sử dụng phần mềm đọc màn hình. Đưa ra một mô tả thay thế cho tất cả các hình ảnh của bạn trong khi làm việc trên hướng dẫn mã HTML trang web đơn giản này.

Trong mẫu mã thiết kế trang web này, thanh điều hướng đại diện cho các phần khác nhau của một máy nhắn tin. Nếu bạn không muốn đổi tên các phần này, vui lòng bỏ qua.

Bên dưới nhận xét của menu chính, bạn sẽ thấy tên của từng phần. Chỉnh sửa văn bản giữa các thẻ a bên dưới nhận xét của Menu chính, đổi tên các liên kết trong thanh điều hướng của bạn.

2. Cập nhật thông tin cá nhân của bạn

Bây giờ là lúc bắt đầu chỉnh sửa thông tin của bạn trong mã thiết kế web.

Hãy xem phần bắt đầu với phần nhận xét Phần / Trang chủ. Những gì có thể được thay đổi ở đây? Chúng ta có thể thay ảnh nền và ảnh đại diện. Bạn cũng có thể thêm tên, chức danh công việc, lĩnh vực chuyên môn và các thông tin khác.

Hãy bắt đầu bằng cách thay đổi hình ảnh. Bạn có thể chỉnh sửa ảnh nền từ div bg-image và hình đại diện từ thẻ img trong div v-center của vùng chứa. Không giống như thay đổi văn bản, bạn sẽ cần thực hiện các thay đổi đối với chính thẻ img thông qua thuộc tính nguồn. Thuộc tính src cho trang web biết nơi có thể tìm thấy ảnh.

Nếu chúng ta nhìn vào thuộc tính src cho ảnh nền, chúng ta có thể thấy nơi tìm thấy hình ảnh. Trong Finder hoặc File Explorer, hãy đi tới nội dung > img > ảnh để tự tìm tệp hình ảnh.

Để thay đổi hình nền trong mã HTML trang web đơn giản của bạn, hãy chuẩn bị sẵn một tệp JPG thay thế với kích thước chính xác của tệp gốc. Đặt tên đơn giản cho ảnh của bạn và đặt nó vào thư mục ảnh. Bây giờ hãy thay đổi tên trong thuộc tính src và lưu lại.

Nếu bạn chưa có sẵn ảnh thay thế nhưng muốn thay đổi nền, hãy truy cập Envato Elements. Bạn có thể tìm thấy một bức ảnh có sẵn hoặc đồ họa thú vị để sử dụng. Đối với hướng dẫn thiết kế trang web đơn giản dành cho người mới bắt đầu này, tôi sẽ sử dụng một trong những ảnh nền có sẵn này.

Thay đổi hình đại diện là quá trình tương tự. Thả ảnh chân dung của bạn vào thư mục ảnh đại diện trong thư mục img. Thay avatar01 bằng tên ảnh của bạn. Lưu mã HTML trang web đơn giản cho dự án thiết kế web này trong Sublime Text và làm mới trình duyệt của bạn để xem giao diện của nó bây giờ.

Thay đổi tên và tiểu sử

Việc chỉnh sửa tên và tiểu sử của bạn chỉ mất vài bước đơn giản. Tìm thẻ H1 trong div col-md-9 và thêm tên của bạn. Ở dòng bên dưới, hãy nhập chức danh công việc của bạn.

<h1 class="mt-20 mb-0 text-lg">Mike Lee</h1>

<h3 class="lead text-muted mb-40">Nhà phát triển giao diện người dùng chuyên nghiệp</h3>

Có ba Danh sách Mô tả dưới Phần / Nhận xét Trang chủ. Chúng được xác định bởi thẻ dl. Chúng là nơi bạn có thể thêm ngắn gọn thông tin chuyên nghiệp hơn. Như bạn có thể thấy trong trình duyệt của mình, các trường mặc định là Chuyên môn, Ngày sinh, Công ty trước đây, Số năm kinh nghiệm và Công ty hiện tại. Nếu bạn muốn chia sẻ thông tin này, hãy chỉnh sửa các thẻ dd trong mỗi dl. Nếu muốn thay đổi toàn bộ phần này, bạn cần thay đổi các thẻ dt trong mỗi thẻ dl.

<div class="col-sm-4">

<dl class="description-2">

<dt>Chuyên ngành</dt>

<dd>Phát triển giao diện người dùng</dd>

<dt>Số năm kinh nghiệm</dt>

<dd>6+</dd>

</dl>

</div>


Thực hiện các thay đổi của bạn? Lưu tệp mã HTML thiết kế trang web đơn giản, làm mới trang và xem các thay đổi của bạn.

Lưu ý rằng bạn có thể yêu cầu khách truy cập tải xuống CV hoặc sơ yếu lý lịch của mình bằng cách nhấp vào nút. Để thiết lập điều này, trước tiên chúng ta sẽ tạo một thư mục có tiêu đề cv trong thư mục nội dung. Sau đó, chúng tôi sẽ đặt CV của mình vào thư mục mới này.

Bây giờ, hãy xem HTML và tìm hiểu cách làm cho nó hoạt động. Tìm đến dòng Tải xuống CV trong mã HTML mẫu để thiết kế trang web:

<div class="col-sm-4"><a href="#" class="btn btn-primary btn-fill btn-block">Tải xuống CV</a></div>

Chúng tôi sẽ thay thế # trong thuộc tính href bằng tài sản/cv/tên-của-cv-file.extension. Để làm cho CV có thể tải xuống được, hãy thêm thuộc tính tải xuống sau thuộc tính href. Dòng trong mã HTML mẫu của bạn để thiết kế trang web bây giờ sẽ trông như thế này:

<div class="col-sm-4"><a href="assets/cv/my-resume.docx" download class="btn btn-primary btn-filled btn-block">Download CV</a></div>

Lưu mã HTML cho dự án thiết kế web này và kiểm tra nó trong trình duyệt của bạn. Lưu ý rằng hiện tại bạn chỉ có thể mở tệp từ nút. Nhưng khi trang web của bạn hoạt động, khách truy cập sẽ có thể tải xuống sơ yếu lý lịch của bạn.

3. Phần dịch vụ

Hãy thêm các dịch vụ mà chúng tôi cung cấp vào mã HTML mẫu để thiết kế trang web. Nếu bạn đã thay đổi tên của phần này hoặc bất kỳ phần nào khác trong Bước 1, bạn vẫn có thể làm theo phần còn lại của hướng dẫn. Chỉ cần đảm bảo thay đổi thẻ h6 trong mỗi bước.

Thay đổi tên của dịch vụ đầu tiên bằng thẻ h5 Ứng dụng dành cho thiết bị di động. Đây có thể là bất kỳ dịch vụ nào bạn cung cấp. Ở dòng tiếp theo, hãy mô tả ngắn gọn về dịch vụ của bạn trong thẻ p. Lưu tệp mã thiết kế trang web và xem các thay đổi trong trình duyệt của bạn.

Có vẻ như chúng ta có thể gặp sự cố. Nếu bạn đã thay đổi tên của dịch vụ, biểu tượng ứng dụng dành cho thiết bị di động sẽ không còn khớp nữa. Đó không phải là một vấn đề. Okno sử dụng Biểu tượng Themify. Đây là những biểu tượng web miễn phí cho mục đích sử dụng cá nhân và thương mại.

Cái đó tốt hơn. Lặp lại quy trình này cho các dịch vụ còn lại của bạn để chỉnh sửa các dòng Ứng dụng trên máy tính để bàn, Thiết kế đồ họa, Phát triển HTML/CSS và AngularJS của mã HTML mẫu dành cho thiết kế trang web.

4. Thêm kỹ năng của bạn

Đây là một phần được thiết kế tốt trong thiết kế trang web đơn giản cho người mới bắt đầu này. Như bạn có thể thấy trong trình duyệt của mình, phần kỹ năng có một thước đo để thể hiện trình độ của bạn. Điều này có thể được chỉnh sửa trong mã thiết kế web dưới phần bình luận Kỹ năng.

Bạn có thể thay đổi các kỹ năng mà bạn muốn khách truy cập thấy. Tên của các kỹ năng này được tìm thấy trong thẻ mạnh dưới phần bình luận Phần / Kỹ năng.

Làm thế nào tốt là bạn thực hiện kỹ năng này? Để hiển thị điều này trên trang web của bạn, chúng tôi cần quay lại div thanh tiến trình. Trong thẻ div, chúng ta sẽ chỉnh sửa thuộc tính aria-valuenow, cũng như thuộc tính style. Các giá trị này sẽ sử dụng cùng một số để biểu thị cấp độ kỹ năng của bạn trên 100. Nếu bạn muốn đặt 97 trên 100, hãy thực hiện thay đổi đó trong cả hai thuộc tính. Các thay đổi của bạn phải khớp với mã bên dưới.

<div class="mb-40">

<div class="progress progress-2">

<div class="progress-bar" role="progressbar" aria-valuenow="97" aria-valuemin="0" aria-valuemax="100" style="width: 97%;">97%</div>

</div>

<strong>Adobe Photoshop</strong>

</div>

Lưu và làm mới cửa sổ trình duyệt của bạn để xem các kỹ năng mới của bạn! Bạn có thể lặp lại bước này để hoàn thành phần còn lại của phần kỹ năng trong mã thiết kế web của mình.

5. Học vấn và kinh nghiệm làm việc

Đây là phần trong mã thiết kế web của chúng tôi cho phép chúng tôi thêm kinh nghiệm học tập và công việc.

Chúng tôi sẽ chỉnh sửa ba thẻ trong div lớp sự kiện. Dòng đầu tiên cho phép chúng tôi chỉnh sửa ngày tháng, dòng tiếp theo dành cho tiêu đề học vấn hoặc kinh nghiệm làm việc của bạn và dòng cuối cùng dành cho vị trí. Vì vậy, nếu tôi muốn chia sẻ khóa học ba tháng về khoa học tên lửa của mình tại NASA, tôi sẽ chỉnh sửa mã để trông như thế này:

<div class="sự kiện">

<div class="date">15.02.2004 - 15.05.2004</div>

<h5 class="mb-0">Khóa học khoa học tên lửa</h5>

<span class="text-muted">NASA</span>

</div>

6. Lời chứng thực

Nếu bạn đang làm theo các bước này để viết mã trang web với tư cách là một người làm việc tự do, thì bạn sẽ biết phần này quan trọng như thế nào. Lời chứng thực từ khách hàng, khách hàng và ông chủ trong quá khứ sẽ giúp bạn thuyết phục ai đó tin tưởng giao cho bạn dự án tiếp theo của họ.

Phần này bắt đầu dưới phần bình luận / Testimonials. Những trích dẫn này có định dạng đặc biệt mà chúng tôi sẽ để nguyên như vậy. Tất cả những gì chúng ta sẽ làm là chỉnh sửa văn bản được tìm thấy trong thẻ div. Nếu bạn có một trích dẫn chính xác mà bạn muốn sử dụng, hãy thêm nó vào đây. Sử dụng thẻ mạnh để làm nổi bật các phần của lời chứng thực bằng văn bản in đậm.



Nếu bạn có ảnh chân dung của người đưa ra lời chứng thực, hãy thêm nó vào thẻ img trong phần Lời chứng thực này. Nếu không, vui lòng xóa dòng mã đó. Hai dòng mã sau đây cho phép bạn hoàn thành lời chứng thực với tên và chức danh của người đó.

<div class="col-sm-6">

<div class="testimonial testimonial-1">

<div class="quote">

These tutorials are <strong>excellent</strong>. I’ve learned so much. I can’t wait to try more!

</div>

<div class="author with-image">

<img src="assets/img/avatars/avatar01.jpg" alt="testimonial author avatar">

<span class="name text-uppercase">Mark Johnson</span>

<span class="caption text-muted">Envato Vietseo user</span>

</div>

</div>

</div>

Lặp lại các bước này trong mã HTML mẫu dành cho thiết kế trang web của bạn để hoàn thành phần này.

7. Truyền thông

Bạn có ảnh về công việc của mình muốn chia sẻ không? Bạn có thể chuẩn bị sẵn chúng cho mã HTML trang web đơn giản của mình trong bước này.

Trước khi chúng tôi bắt đầu, điều quan trọng cần lưu ý là việc lấy kích thước chính xác cho ảnh của bạn là rất quan trọng đối với phần này. Mỗi ảnh phải có kích thước chính xác là 640x563. Sử dụng Adobe Photoshop để thay đổi kích thước hình ảnh của bạn. Nếu không có chương trình, bạn có thể sử dụng trang web miễn phí như Pixlr hoặc Photopea.

Khi bạn đã sẵn sàng ảnh của mình, hãy xem cách chúng tôi có thể thêm chúng vào trang web của mình. Tìm phần bình luận / Tác phẩm, sau đó tìm các thẻ img bên dưới phần bình luận Mục phương tiện. Chúng ta có thể thay đổi ảnh của mình bằng một dòng mã quen thuộc.

Nếu đọc dòng này, chúng ta có thể thấy rằng chúng ta cần có ảnh của mình trong thư mục tác phẩm, thư mục này được tìm thấy trong thư mục img. Chúng tôi cũng cần thay đổi tên tệp để trang web của chúng tôi biết nên sử dụng ảnh nào.

<img src="assets/img/works/gr-winter.jpg" alt="grand rapids in winter">

Hãy thực hiện những thay đổi này và lưu lại. Làm mới trình duyệt của bạn để xem ảnh của bạn.

Bạn có thể nhận thấy rằng việc di chuột qua ảnh của bạn sẽ hiển thị hiệu ứng đặc biệt. Có vẻ như chúng ta có thể để lại một mô tả ngắn gọn về dự án được hiển thị trong hình. Hãy tận dụng tối đa mẫu trang web HTML này và thêm một mô tả ngắn gọn.

Quay lại các thẻ h5 dưới các nhận xét Mục phương tiện của mã HTML mẫu cho thiết kế trang web. Ở dòng đầu tiên, hãy để tên của dự án này. Trong dòng thứ hai, hãy thêm một dịch vụ liên quan cần thiết để hoàn thành dự án.

<div class="image-box image-hover bg-black text-center">

<div class="image">

<div class="hover dark">

<a href="#">

<h5 class="mb-0">Cityscapes</h5>

<span class="text-muted">Photography</span>

</a>

</div>

<img src="assets/img/works/gr-winter.jpg" alt="grand rapids in winter">

</div>

</div>

Nếu tác phẩm này có sẵn để xem trực tuyến, chúng tôi có thể liên kết với nó. Trong thẻ bên dưới nhận xét Mục phương tiện, hãy thay thế dấu # trong thuộc tính href bằng liên kết đến trang web giới thiệu dự án của bạn. Hãy thử liên kết với Google để xem nó hoạt động như thế nào.

Phần này cho phép bạn chia sẻ tối đa sáu dự án. Thực hiện theo các bước trên cho từng tác phẩm bạn muốn chia sẻ.

8. Phần liên hệ

Bây giờ là lúc thiết lập thông tin liên hệ trong mã HTML cho dự án thiết kế web này. Đây là một bước dễ dàng để hoàn thành mã thiết kế web của bạn.

Chúng tôi bắt đầu bằng cách thêm ảnh chân dung của bạn vào thẻ img dưới phần bình luận Phần / Nội dung. Điều này tuân theo quy trình tương tự mà chúng ta đã đề cập trong bước thứ hai của hướng dẫn viết mã thiết kế web này.

Trong thẻ địa chỉ bên dưới Phần / Nội dung nhận xét, chúng tôi sẽ thêm địa chỉ, số điện thoại và địa chỉ email của chúng tôi. Vui lòng thay đổi loại thông tin liên hệ mà bạn chia sẻ bằng cách chỉnh sửa nội dung bên trong thẻ mạnh.

<div class="col-sm-4">

<img class="img-circle mb-25" width="72" src="assets/img/avatars/envato-avatar.jpg" alt="envato avatar">

<address>

<strong>Address:</strong><br>

60 Nguyễn Văn Thủ<br>

Quận 1, TPHCM<br><br>

<strong>Phone:</strong><br>

+84 917 212 969<br><br>

<strong>E-mail:</strong><br>

<a href="#">your.name@example.com</a><br>

</address>

</div>

Biểu mẫu liên hệ không cần nhiều thay đổi. Nếu bạn muốn thêm một vòng quay vui nhộn vào văn bản mặc định, chỉ cần thay đổi các thuộc tính giữ chỗ được tìm thấy trong thẻ biểu mẫu. Bạn có thể thay đổi văn bản của nút bằng thẻ nút.

<div class="col-sm-8">

<form class="contact-form validate-form" id="contact-form">

<div class="row">

<div class="form-group col-sm-6">

<input name="name" id="name" type="text" class="form-control bordered" placeholder="Name">

</div>

<div class="form-group col-sm-6">

<input name="email" id="email" type="text" class="form-control bordered" placeholder="E-mail address">

</div>

</div>

<div class="form-group">

<textarea name="message" id="message" cols="30" rows="7" class="form-control bordered" placeholder="Message"></textarea>

</div>

<div class="row">

<div class="col-md-4 col-sm-6">

<button class="btn btn-filled btn-primary btn-block">Send it <i class="i-after ti-arrow-right"></i></button>

</div>

Nhưng liệu biểu mẫu liên hệ của chúng tôi có hoạt động không? Chưa! Chúng tôi cần thực hiện chỉnh sửa rất nhanh đối với tệp PHP của mình. Trong Finder hoặc File Explorer của bạn, hãy chuyển đến nội dung > php trong thư mục Okno. Sau đó mở file contact-form.php trong Sublime Text.

Trong tệp này, bạn sẽ thấy dòng mã sau:

$emailTo = ’example@mail.com’;

Thay thế email ví dụ bằng địa chỉ email của riêng bạn và lưu tệp mã thiết kế web. Giờ đây, khi khách truy cập hoàn thành biểu mẫu liên hệ, bạn sẽ nhận được email cho bạn biết họ đã nói gì.

9. Chỉnh sửa Footer

Đây là bước cuối cùng của chúng tôi để mã một trang web. Phần chân trang của trang web một trang này có ghi nhận bản quyền cho những người tạo mẫu web Okno và ba liên kết. Bạn có thể xóa hoàn toàn chân trang, xóa một số thành phần hoặc chỉnh sửa liên kết. Nếu bạn muốn chỉnh sửa các liên kết, tôi sẽ hướng dẫn bạn cách thực hiện.

Trong phần nhận xét Chân trang của mã HTML mẫu cho thiết kế trang web, bạn sẽ tìm thấy mục danh sách sau:

<li><a href="#">Đăng ký</a></li>

Trong thuộc tính href, hãy thay thế biểu tượng # bằng liên kết đến trang web bạn muốn chia sẻ. Thay đổi này sẽ cho phép khách truy cập vào trang web đó bằng cách nhấp vào Đăng ký. Bạn có thể thay đổi văn bản này thành bất cứ thứ gì bạn muốn. Lặp lại quy trình này cho hai mục danh sách tiếp theo.

Đã được thực hiện!

Xin chúc mừng, bạn đã thực hiện thành công các bước để viết mã trang web bằng mẫu web! Quá trình này giúp bạn tiết kiệm rất nhiều thời gian nếu bạn đang tạo trang web cho chính mình hoặc khách hàng. Và như bạn có thể thấy, đó là một trong những cách dễ nhất để xây dựng một trang web.