Hướng dẫn add html - thêm html

SharePoint trong Microsoft 365Office dành cho doanh nghiệpOffice 365 Business Essentials Xem thêm...Ít hơn Office dành cho doanh nghiệp Office 365 Business Essentials Xem thêm...Ít hơn

Quan trọng: Vào 31/03/2018, tính năng trang web công khai của SharePoint Online bị ngừng hoạt động. Liên kết trỏ tới các chủ đề bị ngừng đã bị xóa.Vào 31/03/2018, tính năng trang web công khai của SharePoint Online bị ngừng hoạt động. Liên kết trỏ tới các chủ đề bị ngừng đã bị xóa.

Nếu bạn đã và đang sử dụng trình soạn thảo trang web để thay đổi bố trí chung và hình thức của trang web nhưng vẫn chưa có được giao diện và cảm nhận mong muốn, có thể việc cần làm là thêm mã HTML của riêng bạn. Việc thêm hoặc chỉnh sửa mã HTML ngầm của trang web sẽ giúp bạn tùy chỉnh hơn nữa các trang công cộng của bạn theo sở thích và yêu cầu của bạn để bạn có thể có được trang hấp dẫn hơn theo ý muốn của bạn. Ví dụ, bạn có thể:

  • Thay đổi thiết kế của trang, bằng cách thêm khung xung quanh khối văn bản.

  • Thực hiện chân trang trên từng trang sao cho phù hợp với bạn, bằng cách thêm kiểu phông chữ hoặc kích cỡ đặc biệt.

  1. Kiểm tra mã của bạn để đảm bảo mã này hợp lệ và hoàn tất trước khi thêm vào nguồn.

  2. Đăng nhập vào website công cộng của bạn và đi đến trang bạn muốn chỉnh sửa.

  3. Bấm vào Trang > Chỉnh sửa rồi từ tab Định dạng Văn bản, bấm vào Chỉnh sửa Nguồn. Trang > Chỉnh sửa rồi từ tab Định dạng Văn bản, bấm vào Chỉnh sửa Nguồn.

  4. Xác định vị trí bạn muốn chèn khối mã. Bạn có thể sẽ phải xóa đoạn mã mà bạn muốn thay thế hoặc loại bỏ. Trang mà bạn nhìn thấy sẽ có diện mạo như sau, với con trỏ đánh dấu điểm chèn mã mới:

    Hướng dẫn add html - thêm html

  5. Nhập mã HTML.

    Quan trọng:  Mã HTML không được xác thực khi bạn thêm đoạn mã này vào trang web của bạn. Lỗi trong mã HTML có thể khiến trang web hiển thị không chính xác. Mã HTML không được xác thực khi bạn thêm đoạn mã này vào trang web của bạn. Lỗi trong mã HTML có thể khiến trang web hiển thị không chính xác.

  6. Bấm OK.OK.

  7. Sau khi chèn mã HTML, hãy xác nhận rằng mọi thứ đều xuất hiện đúng như bạn mong muốn.

    • Nếu diện mạo của trang trông chính xác, hãy bấm vào Trang > Lưu > Lưu rồi mở trang trong cửa sổ trình duyệt mới để xác nhận.Trang > Lưu > Lưu rồi mở trang trong cửa sổ trình duyệt mới để xác nhận.

    • Nếu bạn gặp phải sự cố mà bạn không thể xử lý thì đừng lưu trang. Thay vào đó, hãy bấm vào Trang > Lưu > Dừng Chỉnh sửa > Hủy bỏ.Trang > Lưu > Dừng Chỉnh sửa > Hủy bỏ.

Bạn cần thêm trợ giúp?

Thiết kế giao diện web bằng HTML

Thiết kế giao diện web bằng HTML là một trong những chủ đề có tính chuyên môn. Nó đòi hỏi người học phải có kiến thức cơ bản về lập trình. Tuy nhiên, không phải ai cũng có cơ hội được học và có sự am hiểu về công nghệ. là một trong những chủ đề có tính chuyên môn. Nó đòi hỏi người học phải có kiến thức cơ bản về lập trình. Tuy nhiên, không phải ai cũng có cơ hội được học và có sự am hiểu về công nghệ.

Vậy nên, bài viết này sẽ khái quát cho bạn đọc, nhất là những người ngoài ngành hiểu hơn về HTML. Và làm thế nào để thiết kế giao diện web bằng HTML một cách đơn giản và dễ dàng nhất.

Hướng dẫn add html - thêm html

HTML là gì?

HTML là thuật ngữ chuyên ngành, được viết tắt từ chữ “Hypertext Markup Language”. HTML không được xem như là ngôn ngữ lập trình. Bởi nó không tạo ra những chức năng có tính thao tác. Nó chỉ hỗ trợ người dùng phân bổ bố cục, định dạng cấu trúc trang web theo từng phần.

Có thể hiểu một cách đơn giản, HTML có công dụng như một Microsoft Word. Giúp định dạng, phân chia văn bản, các khối, các phần.

Làm thế nào để tạo 1 file HTML?

Ngày nay, có rất nhiều chương trình hỗ trợ tạo file HTML. Thậm chí, người am hiểu lập trình có thể tự tạo file HTML bằng notepad++. Tuy nhiên, đối với những người không am hiểu, thì đây là việc không hề dễ dàng.

1. Một số phần mềm hỗ trợ tạo file HTML miễn phí

Sau đây, là một số phần mềm có hỗ trợ tạo file HTML miễn phí. Người dùng có thể dễ dàng tìm thấy link để tải các phần mềm này từ Google.

Hướng dẫn add html - thêm html

✧ Phần mềm NotePad ++

✧ Phần mềm Visual Studio Code

✧ Phần mềm Sublime Text

✧ Phần mềm Komodo Edit

✧ Phần mềm Eclipse

✧ Phần mềm NetBeans

✧ Phần mềm BlueGriffon

✧ Phần mềm Bluefish

✧ Phần mềm Emacs Profile

✧ Phần mềm Aptana Studio

✧ Phần mềm CoffeeCup Free HTML Editor

✧ Phần mềm Microsoft Visual Studio Community

Trong những phần mềm kể trên, chúng tôi khuyến khích người dùng, sử dụng Visual Studio Code. Bởi đây là chương trình của Microsoft. Quá trình cài đặt đơn giản, nhanh chóng. Giao diện dễ nhìn, dễ thao tác. Và là công cụ được các lập trình viên dùng nhiều nhất trên TG hiện nay.

2. Cài đặt Visual Studio Code

Truy cập vào trang cung cấp phần mềm gốc: https://code.visualstudio.com/ https://code.visualstudio.com/ 

Hướng dẫn add html - thêm html

Chọn nút Download → lúc này sẽ có các phiên bản cho người dùng lựa chọn. Tùy theo cấu hình máy, mà chọn file tương thích.Download → lúc này sẽ có các phiên bản cho người dùng lựa chọn. Tùy theo cấu hình máy, mà chọn file tương thích.

Hướng dẫn add html - thêm html

Sau khi download xong, hãy chạy tệp cài đặt. Cụ thể như sau:

➢ Nhấp đúp vào tệp để bắt đầu cài đặt Visual Studio Code.

➢ Xác nhận các điều khoản của thỏa thuận.

➢ Nhấp vào nút “Next”.Next”.

➢ Sử dụng vị trí cài đặt mặc định, sau đó nhấp vào nút “Next“.Next“.

➢ Sử dụng cài đặtmặc định của menu Start, sau đó nhấp vào nút “Next“. mặc định của menu Start, sau đó nhấp vào nút “Next“.

➢ Tại mục “Other”, tích chọn mục:Other”, tích chọn mục:

✧ Add “Open with code” action to Windows Explorer file context menu.

✧ Add “Open with code” action to Windows Explorer directory context menu.

✧ Register Code as an editor for supported file types.

✧ Add to PATH.

➢ Nhấp vào nút “Install”.Install”.

➢ Nhấp vào nút “Finish”.Finish”.

Như vậy, bạn đã cài đặt xong bản Visual Studio Code rồi đó. Sau này, nếu bạn cần thêm các tiện ích hỗ trợ cho việc lập trình hoặc thiết kế giao diện web bằng HTML và CSS của mình thì bạn có thể mở phần mềm lên, tìm đến mục Extension để cài đặt.

Vì đây không phải là nội dung chính của bài viết, nên mình sẽ không làm hướng dẫn chi tiết, tránh lang mang, mất thời gian.

3. Tạo file HTML đầu tiên

Để cho đơn giản, bạn tạo sẵn một thư mục có tên là “HTML” ở trên ổ đĩa, tại vị trí mà bạn muốn lưu trữ dữ liệu.HTML” ở trên ổ đĩa, tại vị trí mà bạn muốn lưu trữ dữ liệu.

Hướng dẫn add html - thêm html

Sau đó, mở chương trình Visual Studio Code lên.

Chọn File → chọn Open Folder… → Tìm đến thư mục “HTML” vừa tạo → Click chuột trái lên thư mục “HTML” để xác định file vừa chọn → Nhấn nút Select Folder.File → chọn Open Folder… → Tìm đến thư mục “HTML” vừa tạo → Click chuột trái lên thư mục “HTML” để xác định file vừa chọn → Nhấn nút Select Folder.

Hướng dẫn add html - thêm html

Sau khi mở file thành công, bạn sẽ có giao diện như hình.

Click vào biểu tượng (New file) → tạo 1 file có tên là “index.html”.index.html”.

Hướng dẫn add html - thêm html

Lưu ý: tất cả những file thiết kế giao diện web bằng HTML đều phải có đuôi chấm html (.html).tất cả những file thiết kế giao diện web bằng HTML đều phải có đuôi chấm html (.html).

Sau bước này, bạn sẽ có giao diện như các hình ở mục bên dưới.

Khởi tạo một trang web bằng HTML

1. Tạo cấu trúc HTML cơ bản

Gõ dấu “!” trên file index.html (hình), rồi nhấn Enter. Ta được một cấu trúc tổng quát cho một trang HTML (xem hình).

Hướng dẫn add html - thêm html

Trong đó, bạn đặt tên trang web của mình tại Tên _trang_web

Bố cục, chia phần và định dạng trang web tại Nội_Dung

2. Tạo nội dung cơ bản cho file HTML

Trước khi bài viết hướng dẫn bạn cách thiết kế giao diện bằng HTML. Thì bạn cần hiểu rõ phương thức hoạt động của chúng. Mặt khác, cần phải nắm được các thẻ cơ bản trong HTML.

: Đây là thẻ tiêu đều lớn trong một trang web. Một trang web chuẩn SEO, chỉ nên có một thẻ H1.

: Đây là thẻ tiêu đề lớn thứ 2, có kích thước chữ nhỏ hơn so với H1. Được sử dụng làm tiêu đề theo từng mục của một bài viết.

: Đây là thẻ chứa các đoạn văn bản trong từng mục của thẻ H2.

Cụ thể:

Bạn hãy gõ nội dung như hình.

Hướng dẫn add html - thêm html

Sau khi, viết nội dung xong. Bạn nhấn ctrl + S để hệ thống lưu file vừa viết.ctrl + S để hệ thống lưu file vừa viết.

Sau đó, click chuột phải → chọn Open in default browser (mở trình duyệt mặc định).Open in default browser (mở trình duyệt mặc định).

Lưu ý: nếu máy bạn có trình duyệt mặc định là Chrome thì chọn như trên. Nếu không phải thì chọn Open in other browsers (mở trình duyệt khác) → tìm đến chrome để chạy chương trình. nếu máy bạn có trình duyệt mặc định là Chrome thì chọn như trên. Nếu không phải thì chọn Open in other browsers (mở trình duyệt khác) → tìm đến chrome để chạy chương trình.

Hướng dẫn add html - thêm html

Vì sao chọn chrome mà không phải là một trình duyệt khác? Đơn giản, vì chrome phổ biến, hỗ trợ thiết kế giao diện web bằng HTML tốt, ít khi xảy ra lỗi.

Khi chương trình được khởi chạy, sẽ tự động mở thành tab như hình:

Hướng dẫn add html - thêm html

Như vậy, bạn đã hiểu được cơ bản cách khởi tạo một trang web bằng HTML.

Cách phân chia bố cục một trang web

Để thiết kế giao diện web bằng HTML trông như một website, người dùng cần có sự am hiểu về thiết kế giao diện web bằng CSS. CSS hỗ trợ người dùng định dạng màu sắc, cỡ chữ, … , giúp cho giao diện trở nên sinh động và đẹp đẽ hơn.

Tuy nhiên, đó chưa phải là vấn đề bạn cần quan tâm lúc này. Chỉ khi nào bạn nắm được cách bố cục một trang web, chia layout cho chúng thì mới bắt đầu tìm hiểu về CSS cũng chưa muộn.

Bố cục cơ bản của một trang web thông thường

Một website cơ bản, đơn giản nhất mà bạn có thể dễ dàng hình dung lúc này, sẽ gồm các phần sau:

Header: Header là phần đầu tiên của trang web và chứa logo của trang web, banner chính nằm ngang, menu phụ (ví dụ: thông tin liên hệ), khung tìm kiếm, … Header là phần đầu tiên của trang web và chứa logo của trang web, banner chính nằm ngang, menu phụ (ví dụ: thông tin liên hệ), khung tìm kiếm, …

Navigation: Thanh điều hướng (hoặc menu chính) là một thanh ngang chứa các danh mục chính của trang web. Phần menu này rất quan trọng giúp người dùng và công cụ tìm kiếm định hình hiểu biết về cấu trúc trang web. Thanh điều hướng (hoặc menu chính) là một thanh ngang chứa các danh mục chính của trang web. Phần menu này rất quan trọng giúp người dùng và công cụ tìm kiếm định hình hiểu biết về cấu trúc trang web.

Content: Nơi chứa các phần nội dung chính của trang web. Nơi chứa các phần nội dung chính của trang web.

Sidebar: Thanh bên – nơi chứa các phần liên quan đến nội dung chính (như menu phụ, các bài viết liên quan, quảng cáo, …). Tùy thuộc vào bố cục, một số trang web có 1 thanh bên, 2 thanh bên hoặc nhiều hơn. Thanh bên – nơi chứa các phần liên quan đến nội dung chính (như menu phụ, các bài viết liên quan, quảng cáo, …). Tùy thuộc vào bố cục, một số trang web có 1 thanh bên, 2 thanh bên hoặc nhiều hơn.

Footer: Chân trang (dưới cùng) của trang chứa thông tin về trang web. Thông thường là: Thông tin liên hệ của công ty, doanh nghiệp, cá nhân, .. và tình trạng bản quyền. Chân trang (dưới cùng) của trang chứa thông tin về trang web. Thông thường là: Thông tin liên hệ của công ty, doanh nghiệp, cá nhân, .. và tình trạng bản quyền.

Hướng dẫn add html - thêm html

Ngoài ra, một trang web còn có thể được chia thành rất nhiều phần khác nhau. Và bạn sẽ phải dành rất nhiều thời gian để học và nghiên cứu chuyên sâu hơn.

Thiết kế giao diện web bằng HTML

Ngày nay, mọi người có xu hướng thiết kế giao diện web bằng HTML5. Vì HTML5 có hỗ trợ các thẻ ngữ nghĩa. Giúp các công cụ tìm kiếm hiểu được cấu trúc của trang web chặt chẽ hơn.

Vì vậy, bài viết sẽ giới thiệu đến bạn đọc cách thiết kế giao diện web bằng các thẻ HTML5 thay vì sử dụng HTML4.

1. Các thẻ phổ biến trong HTML5

Các thẻ HTML mới được sử dụng để xây dựng bố cục bao gồm:

Thẻ : Xác định phần đầu của trang web.

Thẻ : Thanh điều hướng (menu).

Thẻ : xác định các phần của trang web.

Thẻ : định nghĩa độc lập về nội dung bài viết.

Thẻ : xác định phần bên cạnh nội dung (sidebar).

Thẻ : xác định cuối trang (chân trang).

Có một sự khác biệt khi phân bổ cấu trúc giữa HTML4 và HTML5 (xem hình). Bạn đọc cần lưu ý, để có thể hiểu rõ hơn về cách trình bày nội dung trang web.

Hướng dẫn add html - thêm html

2. Dựng layout cho trang web bằng HTML5

Để có thể thiết kế một trang web hoàn thiện, thì chỉ với HTML là không đủ. Bạn đọc cần biết thêm cả CSS. CSS giúp tinh chỉnh về màu sắc, kích thước, vị trí, … và rất nhiều vấn đề phức tạp khác. 

Vậy nên, nếu thiết kế giao diện web bằng HTML, thì chỉ có thể dựng layout (bộ khung sườn) cho trang web. Đây cũng là nền tảng cơ bản, trước khi bạn học và biết về CSS.thiết kế giao diện web bằng HTML, thì chỉ có thể dựng layout (bộ khung sườn) cho trang web. Đây cũng là nền tảng cơ bản, trước khi bạn học và biết về CSS.

Ứng dụng thẻ header để tạo phần đầu cho trang web

Header là phần mở đầu của một trang web. Nơi đây thường đặt logo (hình ảnh) hoặc tên của website (chữ). Để cho đơn giản, ở đây ta chọn chữ làm tiêu đề cho phần mở đầu.

Hướng dẫn add html - thêm html

Ứng dụng thẻ nav để tạo menu cho trang web

Tiếp theo là tạo thanh menu điều hướng để người dùng dễ dàng thao tác hơn. Ở đây, bài viết sẽ sử dụng thẻ nav là thẻ HTML5 tiêu chuẩn để tạo menu điều hướng.

Đồng thời, chúng ta sử dụng tổ hợp thẻ ul và li để tạo các mục trên thanh menu. Nếu bạn muốn thêm các mục thì chỉ cần thêm dòng li là được.

Hướng dẫn add html - thêm html

Ứng dụng thẻ section và article để dựng nội dung cho trang web

Khi đã có phần header và thanh menu, chúng ta sẽ tiếp tục tạo nội dung của trang web. Ở đây, bài viết sử dụng thẻ để tạo phần nội dung chính cho trang web.

Lưu ý: một website có rất nhiều phần khác nhau, người ta phân biệt nội dung cho chúng bằng . một website có rất nhiều phần khác nhau, người ta phân biệt nội dung cho chúng bằng

.

Và bài viết này sử dụng thẻ   để bao gồm một số nội dung nhỏ. Đó có thể là nội dung bài viết, quảng cáo, … . Mặt khác, bộ thẻ ol và li được dùng để liệt kê các phần tử có đánh số thứ tự. Thẻ được sử dụng để chèn link với thuộc tính là “href”.Mặt khác, bộ thẻ ol và li được dùng để liệt kê các phần tử có đánh số thứ tự. Thẻ được sử dụng để chèn link với thuộc tính là “href”.

Hướng dẫn add html - thêm html

Hướng dẫn add html - thêm html

Ứng dụng thẻ footer để tạo chân trang website

Cuối cùng, phần cuối của trang web cơ bản thường là nơi ghi tên của cá nhân hoặc tổ chức sở hữu trang web, và cũng là nơi chứa thông tin bản quyền.

Hướng dẫn add html - thêm html

Kết luận

Như vậy, bạn đã học được cách thiết kế giao diện web bằng HTML thông qua cách dựng layout cho trang web. Để định hình một trang web với bố cục rõ ràng, màu sắc sinh động, kích thước tùy chỉnh,  … bạn đọc cần tìm hiểu thêm về CSS. Từ đó, mới có thể hoàn thiện một giao diện website như mong muốn.thiết kế giao diện web bằng HTML thông qua cách dựng layout cho trang web. Để định hình một trang web với bố cục rõ ràng, màu sắc sinh động, kích thước tùy chỉnh,  … bạn đọc cần tìm hiểu thêm về CSS. Từ đó, mới có thể hoàn thiện một giao diện website như mong muốn.

——————————————————————–

CÔNG TY THIẾT KẾ WEBSITE WORDPRESS – MYPAGE

Địa chỉ: 27 Hoàng Hoa Thám, Phường 6, Q. Bình Thạnh Tp HCM 27 Hoàng Hoa Thám, Phường 6, Q. Bình Thạnh Tp HCM

SĐT: 028 66 828 883 – 0938 771 797 028 66 828 883 – 0938 771 797

Email: