Hướng dẫn này nói về cách Mở, Tạo và Lưu tệp HTML bằng Trình soạn thảo Văn bản Notepad. Nhưng nếu bạn muốn tạo toàn bộ trang web HTML bằng Notepad. Sau đó, bạn cần biết về Thẻ HTML, Đoạn văn, Tiêu đề, Hình ảnh, Div, CSS và các Thành phần HTML bất lực khác để làm điều đó

Làm cách nào để lưu tệp văn bản dưới dạng html?

Nếu bạn muốn Lưu tệp Văn bản dưới dạng HTML thì bạn cần Đổi tên tệp và thay đổi Phần mở rộng tệp từ (. txt) thành (. html). Hoặc mở tệp Văn bản đó trong Trình soạn thảo văn bản Notepad và Chọn tệp từ thanh Điều hướng trên cùng. Một menu Tệp sẽ xuất hiện trên Màn hình, chọn Lưu dưới dạng Tùy chọn từ đó và Lưu tệp của bạn với. Tiện ích mở rộng html

Đã đến lúc bắt tay vào viết tệp HTML đầu tiên của bạn. Hãy bắt đầu bằng cách mở một chương trình soạn thảo văn bản. Nếu bạn đang sử dụng PC Microsoft Windows, hãy mở chương trình có tên Notepad (tìm trong Menu Bắt đầu của bạn hoặc chỉ cần giữ phím Windows trên bàn phím và nhấn R, sau đó nhập “notepad” vào dấu nhắc lệnh chạy và nhấn enter). Nếu bạn đang sử dụng máy tính Macintosh, hãy khởi chạy ứng dụng có tên “TextEdit” (có thể tìm thấy ứng dụng này trong thư mục Ứng dụng của bạn)

Là một lập trình viên, công việc của chúng tôi là biến khung vẽ tài liệu trống này thành một kiệt tác HTML. Hãy bắt đầu bằng cách nhập mã sau vào tài liệu văn bản trống của chúng tôi (hoặc sử dụng chức năng sao chép và dán trên máy tính của bạn và nhấc mã trực tiếp từ bên dưới)

Mã này cho trình duyệt web biết chúng tôi đang sử dụng ngôn ngữ máy tính nào (HTML). Bạn sẽ bắt đầu mọi trang web bạn từng tạo bằng mã này

Viết HTML giống như làm bánh sandwich

Bây giờ chúng tôi đã sẵn sàng để bắt đầu cấu trúc thực tế của trang của chúng tôi. Bắt đầu bằng cách thêm mã sau vào tài liệu của bạn, ngay bên dưới đoạn mã cuối cùng của chúng tôi

The start-tag tells the web browser that we want to begin our document; similarly the end-tag tells the browser we want to end our document. If our page is a sandwich, the start and end tags are the slabs of bread.

Before we can add any exciting content to our page, there is one more element we must add. Insert the following code directly beneath the start tag:

The element signifies the portion of our document that will house our actual content (paragraphs, images, etc…). You may be thinking “But I thought that’s what the tags did?” In fact, the element houses everything, both our actual content (which goes inside the element) and more complex elements that we will learn about in future lessons. For now, just know that the element goes inside the element.

Đây là những gì tài liệu của bạn sẽ trông giống như cho đến nay

Cuối cùng, Phần thú vị

Bây giờ, hãy thêm chút nội dung đầu tiên vào trang của chúng tôi. Làm thế nào về một tiêu đề lớn đậm?

This is a big bold heading

Mã này đặt ra một câu hỏi hay cho người mới bắt đầu viết mã. “Làm sao tôi biết được yếu tố nào sẽ được sử dụng?

We decided to use the

element to describe our heading because this is the most important (and only) heading on our page. In future lessons we will create pages with multiple headings and utilize

,

, and tags to create a hierarchy of importance for our content.Búp bê xếp chồng của Nga

At this point, it is helpful to think of HTML as a set of Russian stacking dolls. Smaller elements fit inside larger elements, which fit inside even larger elements, etc… Our header rests inside our element, which rests inside our element. To fully illustrate this point, let’s add a bulleted list to our page. Add the following code directly beneath your end tag:

    
Milk
    
Bread
    
Eggs

The

element is code for “Unordered List” and the
• element is code for “list item.” Just like your grocery list on a scrap of paper, a list is made up of multiple list items. This is reflected in our code; our many list items are nested inside our single unordered list.

  Lưu tài liệu của bạn

  Bây giờ là thời điểm tốt để lưu tài liệu của chúng ta và sau đó xem nó trông như thế nào trong trình duyệt web của chúng ta. Từ bên trong chương trình soạn thảo văn bản của bạn, bấm Tệp, rồi bấm Lưu. Để chúng ta có cùng quan điểm, hãy đồng ý đặt tên tệp là “test. html”. Điều rất quan trọng là tệp của chúng tôi kết thúc bằng “. phần mở rộng html”. Điều này cho máy tính của chúng tôi biết loại tệp tài liệu của chúng tôi (tất nhiên là một trang web. ).

  
  Nếu bạn đang sử dụng PC Windows, hãy nhớ nhấp vào hộp thả xuống bên dưới mục nhập tên tệp, có nhãn “Lưu dưới dạng. ” và chọn tùy chọn “Tất cả các tệp”. Điều này sẽ đảm bảo tài liệu của bạn được lưu ở định dạng chính xác. Tiếp tục và lưu tài liệu của bạn.

  Xem tệp của bạn trong trình duyệt web

  Bây giờ hãy điều hướng đến bất cứ nơi nào bạn chọn để lưu tệp của mình (Tôi khuyên bạn nên tạo một thư mục mới trên màn hình để lưu trữ tất cả các tệp học tập của mình) và nhấp đúp vào “kiểm tra. html. ” Thao tác này sẽ mở trang của chúng tôi trong trình duyệt web và bạn sẽ được chào đón bằng một tiêu đề trông khá đơn giản có nội dung “Đây là một tiêu đề lớn, in đậm”, theo sau là danh sách các mặt hàng tạp hóa được đánh dấu đầu dòng

  

  Đặt tiêu đề cho trang của bạn

  Bạn có thể nhận thấy rằng trang của chúng tôi không có tiêu đề (thường được hiển thị trên thanh tiêu đề của trình duyệt web của chúng tôi). Tiêu đề trang web là một điều tuyệt đối cần thiết, vì chúng đóng vai trò rất lớn trong việc các công cụ tìm kiếm có thể tìm thấy các trang của bạn. Bây giờ bạn đã quen thuộc hơn một chút với cú pháp của HTML, hãy tiếp tục và đặt tiêu đề cho trang của chúng ta

  The

  Từ trong chương trình soạn thảo văn bản của bạn, hãy lưu tài liệu của bạn, sau đó chuyển sang cửa sổ trình duyệt web của bạn và làm mới trang (nhấn Control + R làm mới trên PC Windows và Cmd + R làm mới trên máy tính Macintosh). Lưu ý rằng trang của chúng tôi hiện có tiêu đề trong thanh tiêu đề của trình duyệt web

  Chỉ Một Bước Cuối Cùng

  Before we finish this lesson, let us add a bit more code that will help all web browsers better understand our code. Insert the following line of code directly below the start tag:

  Điều này đánh dấu lần đầu tiên bạn nhìn thấy dấu bằng hoặc dấu ngoặc kép bên trong phần tử HTML. Bạn sẽ tìm hiểu về cú pháp mới này trong bài học tiếp theo (Các thuộc tính và giá trị HTML) nhưng bây giờ bạn chỉ cần hài lòng với việc sao chép và dán mã này và biết rằng nó làm cho trang của bạn hoàn chỉnh. Bạn vừa viết một trang web hợp lệ 100% từ đầu. Bằng tay. Đó là nhiều hơn một số nhà phát triển web chuyên nghiệp có thể nói

  Hãy nhớ rằng, không ai từng hứa rằng trang web đầu tiên của bạn sẽ đẹp. Điều quan trọng là bây giờ bạn đã biết cách viết mã HTML của riêng mình và tạo các trang web cơ bản. Bạn có thể nghĩ “Có, nhưng tôi không biết tất cả các mã phần tử. Nếu không có ai đó cho tôi biết nên sử dụng yếu tố nào để mô tả một phần nội dung, tôi sẽ bị lạc. “Hãy để tôi nói với bạn vài lời an ủi. bạn đã biết nhiều hơn bạn nhận ra. Tôi ước tính rằng 95% trang web sử dụng cùng một tập hợp các phần tử HTML cơ bản mà người mới bắt đầu có thể thành thạo một cách nhanh chóng và dễ dàng. Hãy làm theo các bài học còn lại của tôi và bạn sẽ hoàn toàn thành thạo viết HTML ngay lập tức

  Để bạn tham khảo, đây là toàn bộ mã chúng tôi vừa tổng hợp lại

  ________số 8

  Nếu bạn thích xem các bài học video thay vì đọc các bài học viết, hãy xem khóa học video 8 giờ của tôi và tìm hiểu HTML, CSS và thiết kế đáp ứng cấp độ chuyên nghiệp

  Cái gì được sử dụng để tạo và lưu tài liệu HTML?

  Trình soạn thảo văn bản được cung cấp cùng với hệ điều hành của bạn, chẳng hạn như Notepad (Windows) hoặc TextEdit (Macintosh) , sẽ thực hiện những việc này . Các trình soạn thảo văn bản khác cũng được miễn là bạn có thể lưu các tệp văn bản thuần bằng. phần mở rộng html. Nếu bạn có một công cụ soạn thảo web WYSIWYG chẳng hạn như Dreamweaver, hãy đặt nó sang một bên ngay bây giờ.

  Tạo tài liệu HTML là gì?

  HTML là viết tắt của Hyper Text Markup Language. Đây là ngôn ngữ được sử dụng rộng rãi nhất để viết trang web. Tài liệu HTML xác định cấu trúc của trang web . Tài liệu HTML bắt đầu bằng