Thực đơn
trang chủTừ

Tạo một trang html đơn giản trong notepad. Cách tạo trang HTML: hướng dẫn từng bước, công nghệ và đề xuất

2016-11-06


Tạo một trang web và lưu trữ nó trên một máy chủ web cục bộ

Xin chào quý khách thân mến!

Bài viết này nói về cách tạo một trang web và lưu trữ nó trên máy chủ ảo của máy chủ web cục bộ.

Và, để làm được điều này, chúng ta cần, như trong hình: một máy chủ web cục bộ, một trình soạn thảo văn bản, một ngôn ngữ mô tả cấu trúc của các trang web, HTML và một ngôn ngữ kiểu CSS.

  • Tạo máy chủ ảo trên máy chủ web cục bộ
  • Tạo một tệp trang web và kiểm tra máy chủ web cục bộ
  • Khung xương một trang HTML
  • Tệp nguồn trang web

Tạo máy chủ ảo trên máy chủ web cục bộ

Một trang web thông thường là một tệp văn bản ở định dạng HTML, vì vậy trang như vậy cũng thường được gọi là trang HTML. Và trước khi bắt đầu, trước tiên chúng tôi sẽ tạo một máy chủ ảo trên máy chủ web cục bộ đã cài đặt trước đó, nơi trong tương lai chúng tôi sẽ thử nghiệm trang web tương lai của mình.

Ở đây, chúng ta sẽ xem xét việc làm việc với một máy chủ web cục bộ bằng ví dụ về việc lắp ráp các chương trình Denwer (Denver). Nhưng điều này không quan trọng vì tất cả những điều này có thể được thực hiện trên các sản phẩm phần mềm tương tự khác.

Sau khi cài đặt Denver, thư mục “WebServers/home/” đã chứa các máy chủ ảo được định cấu hình, chẳng hạn như “localhost”, “test1.ru”, “custom”. Hãy tạo một máy chủ mới cho trang web của chúng ta và gọi nó, ví dụ: “newsite.local”, nghĩa là với tên này, đây là một trang web mới và nó được lưu trữ trên một máy chủ cục bộ (do có thể xảy ra nhầm lẫn trong tương lai, bạn nên không chỉ định vùng miền tên máy chủ thực, chẳng hạn như "ru", "com", v.v.


Trong thư mục “newsite.local” này, chúng tôi sẽ tạo một thư mục mới “www”, trong đó chúng tôi sẽ đặt các tệp trang web, đồng thời sao chép các thư mục phụ trợ “tên miền phụ” và “cgi” tại đây từ các máy chủ hiện có.


Sau khi hoàn thành các thao tác, bạn cần khởi động lại máy chủ để nó thực hiện những thay đổi phù hợp đối với hoạt động của nó. Điều này có thể được thực hiện thông qua phím tắt "Khởi động lại Denwer", phím tắt này có thể được tạo khi cài đặt Denver hoặc (nếu không có) thông qua một tệp đặc biệt Khởi động lại.exe trong thư mục "denwer".

Tạo một tệp trang web và kiểm tra máy chủ web cục bộ

Chà, bây giờ chúng ta hãy chuyển sang tạo một trang web. Để thực hiện việc này, trước hết, bằng cách sử dụng trình soạn thảo văn bản Notepad ++, chúng ta sẽ tạo một tệp “index.html”, tệp này sẽ chứa mã của trang chính của chúng tôi. Cách cài đặt trình soạn thảo văn bản được hiển thị trong bài viết Cài đặt trình soạn thảo văn bản nodepad++.

Cần lưu ý rằng khi mở một trang web có địa chỉ chứa tên miền, không có bất kỳ thư mục nào khác, các trình duyệt luôn mở tệp nằm trong thư mục gốc dưới tên "index". Do đó, chúng tôi sẽ bắt đầu tạo các trang trên trang web của mình từ tệp này. Trong trường hợp này, nó sẽ có phần mở rộng là "html", vì mã của nó sẽ dựa trên HTML.

Tuy nhiên, trước đó, để tránh những hiểu lầm không đáng có thêm khi hiển thị các trang HTML, bạn nên kiểm tra mã hóa được đặt trong trình soạn thảo Notepad++ ngay từ đầu khi mở tài liệu mới.

Điều này có thể được thực hiện như sau: thông qua menu "Tùy chọn", mở cửa sổ "Cài đặt" và trong tùy chọn "Tài liệu mới", kiểm tra xem mã hóa phổ quát có được đặt thành "UTF-8 không có thẻ BOM" hay không, như hiển thị bên dưới .


Bây giờ, hãy tạo một tệp mới thông qua menu "Tệp" bằng cách nhấp vào nút "Mới". Trong tab mới mở ra, để kiểm tra hoạt động của máy chủ web và tính chính xác của cài đặt mã hóa, hãy viết một số cụm từ, ví dụ: “Kiểm tra” (việc kiểm tra như vậy là không cần thiết khi tạo trang HTML và chỉ được cung cấp ở đây để hiểu rõ hơn về các hành động đang được thực hiện).

Bây giờ hãy lưu tệp này vào thư mục "www" của máy chủ mới tạo "newsite.local". Để thực hiện việc này, hãy chọn “Save As” từ menu “File”, nhập tên tệp “index.html”, chỉ định thư mục mong muốn và nhấp vào “Save”.


Tiếp theo, hãy kiểm tra xem trang của chúng tôi được hiển thị như thế nào. Để thực hiện việc này, hãy cập nhật trình duyệt bằng cách nhập tên máy chủ lưu trữ của chúng tôi “newsite.local” vào trường địa chỉ của nó. Nếu mọi thứ được thực hiện chính xác, một dòng chữ có một số chữ tượng hình sẽ xuất hiện trên màn hình, như trong ảnh chụp màn hình (Tôi xin lưu ý một lần nữa rằng những chi tiết như vậy chỉ được thảo luận ở đây dành cho những người thực hiện việc này lần đầu tiên, để thể hiện rõ ràng những gì thường xảy ra khi thực hiện không chính xác). Nói chung, bạn có thể bỏ qua việc kiểm tra này và chuyển thẳng sang bước tiếp theo).


Những dấu hiệu lạ như vậy xuất hiện do sự không khớp giữa mã hóa của trình duyệt và trang được hiển thị. Để ngăn điều này xảy ra trong tương lai, bạn cần chỉ định mã hóa được yêu cầu trong tệp cấu hình bổ sung ".htaccess" của máy chủ web.

Trong trường hợp này, các trình duyệt sẽ luôn sử dụng mã hóa chính xác khi mở các trang trên trang web của chúng tôi và theo đó, hiển thị chúng một cách chính xác.

Để thực hiện việc này, bạn cần tạo một tệp mới trong trình soạn thảo Notepad++ theo cách tương tự như với “index.html” và lưu nó vào cùng thư mục với tên “.htaccess”. Trong trường hợp này, trong chính tệp đó, bạn cần viết dòng sau “AddDefaultCharset UTF-8”, như trong ảnh chụp màn hình.


Chà, bây giờ, nếu bạn cập nhật lại trình duyệt với địa chỉ máy chủ lưu trữ “newsite.local” của chúng tôi, bạn có thể đảm bảo rằng văn bản mà chúng tôi đã viết ban đầu trong tệp “index.html” xuất hiện trên trang.

Điều này có nghĩa là trang của chúng tôi được lưu trữ trên máy chủ lưu trữ máy chủ web đã tạo sẽ được hiển thị chính xác khi được mở bằng trình duyệt, điều này xác nhận hoạt động chính xác của máy chủ web và cài đặt mã hóa chính xác.

Nếu cách này không hiệu quả thì trước khi chuyển sang các bước tiếp theo, bạn cần quay lại và khắc phục sự cố.


Khung xương một trang HTML

Sau khi chúng tôi xác minh rằng máy chủ web cục bộ đang hoạt động và trang web của chúng tôi được hiển thị chính xác, chúng tôi sẽ chuyển sang điền mã HTML vào đó.

Tuy nhiên, để viết các trang HTML, trước tiên bạn phải làm quen với những kiến ​​thức cơ bản về ngôn ngữ mô tả cấu trúc của các trang web HTML.

Có một số lượng lớn các sách tham khảo, các khóa học video và các tài liệu giáo dục khác giúp bạn thành thạo ngôn ngữ HTML. Trên trang web cũng có một số khóa học video dành cho chủ đề này, cả ở phiên bản trả phí và miễn phí. Ví dụ: bạn có thể sử dụng khóa học video miễn phí Khóa học cơ bản về HTML, bao gồm tất cả các thuộc tính và thẻ HTML cơ bản một cách chi tiết.

Không còn nghi ngờ gì nữa, các khóa học video trình bày và giải thích rõ ràng tài liệu đào tạo sẽ rất hữu ích cho việc làm quen và hiểu biết chung về chủ đề nghiên cứu. Tuy nhiên, chúng không phải lúc nào cũng thuận tiện để sử dụng làm nguồn thông tin tham khảo khi bạn định kỳ cần làm rõ điều gì đó khi làm việc.

Điều này hoàn toàn áp dụng cho việc viết các trang HTML, vì bạn sẽ không phải cuộn qua video để tìm mọi vấn đề, và đặc biệt là không quan trọng, để tìm kiếm thông tin cần thiết.

Vì vậy, khi tạo trang web sẽ rất thuận tiện khi sử dụng sách tham khảo. Những sách tham khảo nào là tốt nhất để sử dụng? Rất khó để trả lời câu hỏi này một cách rõ ràng, có lẽ mọi người đều có sở thích riêng của mình, đặc biệt là vì có một số lượng lớn trên Internet.

Thay mặt tôi, tôi có thể giới thiệu một nguồn thông tin như một thư mục trực tuyến "http://www.puzzleweb.ru/html/all_tags.php". Điểm đặc biệt của nó là nó không chỉ cung cấp thông tin cơ bản khá chi tiết về các ngôn ngữ chính được sử dụng trong xây dựng trang web như HTML, CSS, JavaScript, PHP mà còn có các phần tự hướng dẫn rất ngắn gọn nhưng đồng thời time Những điều cơ bản của các ngôn ngữ này được giải thích khá đầy đủ thông tin, kèm theo các ví dụ minh họa.

Bạn cũng có thể lưu ý tài nguyên tham khảo trực tuyến "https://webref.ru/", chứa thông tin khá đầy đủ về các phiên bản hiện đại của HTML5 và CSS3, cũng bao gồm các khóa đào tạo về công nghệ web. Để làm điều này, bạn có thể thêm sách tham khảo "http://htmlbook.ru/html/", từ đó bạn cũng có thể thu thập được nhiều thông tin hữu ích và cũng có thể hữu ích khi viết trang web.

Nhìn chung, chắc chắn mỗi người sẽ lựa chọn cho mình, từ nguồn tài liệu tham khảo đa dạng, những cuốn sách tham khảo tiện lợi và phù hợp nhất về những vấn đề này.

Bây giờ, hãy chuyển sang tạo khung của trang HTML, tức là. đến sự hình thành các khối chính của nó. Dưới đây là hình ảnh khung của chúng tôi sẽ trông như thế nào, được xây dựng trên cơ sở bố cục thiết kế trang web được tạo trước đó trong bài viết Tạo bố cục thiết kế trang web.

  2. "utf-8" />

    <span><b>Tiêu đề trang</b> </span>

    "Sự miêu tả" nội dung = "Mô tả ngắn gọn về nội dung trang" >

  4. "vỏ bánh" >

    một chiếc mũ lưỡi trai

    Công cụ quay vòng

    Nội dung chính

    Thanh bên

    tầng hầm

Để viết mã HTML của khung vào tệp "index.html", bạn cần mở mã đó trong trình soạn thảo văn bản Notepad++ và nhập mã theo ví dụ đã cho hoặc sao chép mã đó vào đó.

Ngoài ra, ở cuối mỗi bài viết, bắt đầu từ bài viết này, một kho lưu trữ các tệp nguồn của thư mục “www” của trang web đang được tạo cho trạng thái hiện tại sẽ được đính kèm. Do đó, bạn chỉ cần sử dụng các tài liệu bổ sung này và tải xuống tệp "index.html" từ liên kết được cung cấp ở cuối bài viết này.

Đây là mã HTML của tệp "index.html" trông như thế nào trong trình soạn thảo văn bản Notepad++, được biên dịch theo ví dụ đã cho.


Chúng ta hãy xem xét kỹ hơn những gì được thể hiện trong hình.

Dòng đầu tiên rất quan trọng vì nó cho trình duyệt biết loại tài liệu để trình duyệt có thể hiểu chính xác. Sự cần thiết của mục này là do HTML tồn tại trong một số phiên bản, khác nhau không chỉ ở sự hiện diện hay vắng mặt của bất kỳ thành phần nào mà còn ở cú pháp của ngôn ngữ.

Do đó, nếu không có dấu hiệu như vậy, trình duyệt sẽ chỉ “bị nhầm lẫn” khi xử lý trang. Đặc biệt, dòng này cho biết rằng tài liệu đã được tạo ở phiên bản HTML 5.

Thông tin chi tiết hơn về phần tửcó thể tìm thấy trong sách tham khảo htmlbook.ru tại liên kết "http://htmlbook.ru/html/!doctype".

Tiếp theo, có các phần tử được gọi là “thẻ” - các ký hiệu được đặt trong dấu ngoặc nhọn. Theo một cách nào đó, các phần tử này là các cấu trúc ngôn ngữ cho trình duyệt biết phải làm gì và về cơ bản là nền tảng của ngôn ngữ HTML.

Thẻ có thể được định dạng hoặc đặc biệt. Thẻ định dạng có trách nhiệm tạo ra các phần tử hiển thị của trang, chẳng hạn như đoạn văn, tiêu đề, liên kết, hình ảnh, v.v..

Cần có các thẻ đặc biệt để cho trình duyệt và công cụ tìm kiếm biết thông tin về tài liệu, cái gọi là siêu dữ liệu, ví dụ: trang được mã hóa bằng gì, tiêu đề nên có, bảng định kiểu nào nên được đưa vào, v.v.

Ngoài ra, thẻ được chia thành thẻ đơn và thẻ đôi. Các thẻ được ghép nối luôn bao gồm hai phần, phần đầu tiên chúng mở, phần thứ hai được biểu thị bằng ký hiệu dấu gạch chéo “/”, chúng đóng (thẻ mở và đóng). Những gì ở giữa chúng sẽ được xử lý theo các quy tắc sử dụng phần tử này.

Vì vậy, dòng thứ 2 và thứ 17 chứa thẻ "html", về cơ bản thẻ này đại diện cho một vùng chứa tất cả nội dung của trang. Thẻ này luôn được chỉ định theo thứ tự sao cho bất kỳ mã HTML nào cũng phải nằm trong vùng chứa này.

Phần tiếp theo của khung là khu vực "đầu", nơi đặt tất cả các thẻ đặc biệt. Khu vực này bao gồm các dòng từ 3 đến 7. Thông tin trong khu vực này là phụ trợ và không được trình duyệt hiển thị, ngoại trừ tiêu đề "tiêu đề", được hiển thị trong tab trình duyệt.

Là các thẻ đặc biệt như vậy, dòng 4 chứa thẻ meta có thuộc tính "bộ ký tự", biểu thị mã hóa "utf-8", dòng 5 chứa thẻ "tiêu đề", xác định tiêu đề của tài liệu và dòng 6 chứa meta thẻ có thuộc tính "tên" " và "nội dung", nhằm mô tả ngắn gọn nội dung của trang.

Trong tương lai, khi quá trình bố trí tiến triển, khu vực “đầu” sẽ được bổ sung thêm các yếu tố đặc biệt khác.

Vùng tiếp theo, "nội dung", kéo dài từ dòng 8 đến 16, nhằm chứa các phần tử định dạng chịu trách nhiệm tạo phần hiển thị của trang web.

Theo bố cục thiết kế, trong trường hợp của chúng tôi, khu vực “nội dung” bao gồm năm khối chính: “Header”, “Rotator”, “Main Content”, “Sidebar” và “Footer”, trong đó:

  • dòng thứ 10 chứa khối “Header” (phần tử “header”);
  • ở dòng thứ 11 - khối "Rotator" (el "phần");
  • ở dòng thứ 12 - khối "Nội dung chính" (el-t "chính");
  • ở dòng thứ 13 - khối "Thanh bên" (el "sang một bên");
  • ở dòng thứ 14 - khối "Tầng hầm" (el "chân trang");

Đồng thời, các khối được đặt ở đây được hiển thị ở dạng rất phóng to. Ví dụ: "header" và "footer" cũng sẽ bao gồm (theo bố cục thiết kế) một menu điều hướng, và "main" lần lượt sẽ được chia thành các khối chứa các bài viết và bình luận. Và việc phân chia thành các khối nhỏ hơn này sẽ tiếp tục cho đến khi hoàn thành toàn bộ việc đánh dấu trang HTML.

Về thẻ ghép nối

, nằm ở dòng 9 và 15, thì ở đây nó thực hiện chức năng của một khối “trình bao bọc” để đặt chiều rộng trang tối thiểu và tối đa trong giới hạn đã chỉ định của bố cục cao su. Thẻ này đã được gán thuộc tính lớp "trình bao bọc" để có thể gán thêm các kiểu CSS phù hợp.

Xin lưu ý rằng trước đây, trước HTML 5, các phần tử "div" cấp khối thường được sử dụng để tạo wireframe. Bạn vẫn có thể sử dụng chúng cho những mục đích này, với hình thức này các trang web vẫn có thể hoạt động bình thường.

Vì vậy, giờ đây HTML5 đã thực sự chiếm vị trí chính trong việc phát triển trang web, chúng tôi sẽ cố gắng bắt kịp thời đại ngay từ đầu và nếu có thể, hãy sử dụng các yếu tố mới của ngôn ngữ này.

Nếu bây giờ bạn mở trang đã tạo trong trình duyệt, bạn chỉ có thể thấy các từ có trong các thẻ nằm trong vùng chứa “nội dung”. Văn bản nằm trong vùng “head”, như đã lưu ý ở trên, sẽ không được hiển thị. Ngoại lệ là tiêu đề "tiêu đề" (trong trường hợp của chúng tôi là "Tiêu đề trang"), tiêu đề này sẽ hiển thị trong tab trình duyệt.


Với điều này, chúng tôi sẽ hoàn thành giai đoạn tạo trang web này và trong bài viết tiếp theo, chúng tôi sẽ đánh dấu trang web theo bố cục thiết kế đã tạo trước đó.

Tệp nguồn trang web

Có thể tải xuống các tệp nguồn của trang web với các bản cập nhật được thực hiện trong bài viết này từ tệp đính kèm tài liệu bổ sung.

Bài học “Cách tạo một trang HTML” được dành cho bố cục của trang web đơn giản nhất. Bạn sẽ tìm hiểu cách lưu tệp HTML một cách chính xác, đặt mã hóa cần thiết để hiển thị chính xác trang HTML trong trình duyệt và đặt văn bản, danh sách và hình ảnh trên trang web.

Sau khi học bài này, bạn sẽ học cách tạo trang web đầu tiên của mình, như trong Hình 1.

Bức tranh 1

1. Cấu trúc tài liệu HTML

Các tệp HTML có phần mở rộng .htm hoặc .html.

Các thẻ thường được ghép nối: thẻ bắt đầu và thẻ kết thúc. Ban đầu -<>, cuối cùng, Ví dụ

Và

Thẻ ghép đôi còn được gọi là thùng đựng hàng .

Một số thẻ không có cặp thẻ bắt buộc, thẻ này được gọi là đơn . Ví dụ, một thẻ như vậy được đóng bằng cách viết dấu gạch chéo phải trước dấu ngoặc nhọn

Cấu trúc của tài liệu html trông như thế này (Hình 2).

Hình 2

Giải thích cho việc liệt kê trong Hình 2

Ở dòng đầu tiên, cấu trúc DOCTYPE có nghĩa là một trong những tiêu chuẩn bố cục trang web.

Giữa các thẻ Và chứa phần tiêu đề. Nó bao gồm một thiết kế </b> Và <b>. Tên này xuất hiện trên thanh tiêu đề của trình duyệt khi tải tài liệu (Hình 3).

Hình 3

Ghi có nghĩa là mã hóa Cyrillic để các chữ cái được hiển thị chính xác trong trình duyệt. Nếu mã hóa không được chỉ định, phông chữ đôi khi có thể được hiển thị như sau (Hình 4)

hinh 4

Trang tương tự sau khi chèn mã hóa (Hình 5)

Hình 5

Lưu ý: thay vì mã hóa bộ ký tự="windows-1251" bạn có thể sử dụng mã hóa bộ ký tự=" utf -8" , cho phép bạn tạo các trang web đa ngôn ngữ, vì tất cả các nhân vật hiện có trên thế giới đều có mặt trong đó. Trong trường hợp này, ở Sổ tay++ là cần thiết trước khi bố trí và lưuhtml-chọn tập tin từ menu trên cùng Mã hóa - Mã hóa thành UTF -8 không có BOM (UTF-8 không có BOM)

Thông tin này là đủ để tạo tài liệu đầu tiên.

Thực hành 1

1. Tạo thư mục, đặt tên Của tôicăn nhà. Tên của tất cả các thư mục và tập tin phải được tạo bằng chữ cái Latinh viết thường, Tên tiếng Nga không thể được sử dụng. Giữ tên ngắn gọn và có ý nghĩa.

Chúng tôi sẽ viết mã trang web trong Notepad. Tốt hơn hết là bạn không nên sử dụng Notepad đi kèm với Windows mà nên sử dụng một phiên bản “nâng cao” hơn, chẳng hạn như Notepad++. Phân bổ Sổ tay++ nằm trong thư mục CD/phân phối.

2. Mở Notepad++. Đảm bảo rằng mã hóa ANSI được đặt để thực hiện việc này trong menu trong mục Mã hóa, đặt vị trí Mã hóa sang ANSI.

3. Nhập mã từ danh sách trong Hình 2 vào Notepad++.

Mã trong danh sách trong Hình 2 sẽ đóng vai trò là mẫu cho chúng ta trong tương lai để chúng ta không phải gõ lại cấu trúc của tài liệu HTML mỗi lần. Sao chép cấu trúc DOCTYPE từ đây (không cần ghi nhớ hay ghi nhớ).

4. Lưu tệp dưới dạng mẫu.html trong thư mục Ngôi nhà của tôi, khi ở hiện trường Loại tệp cài đặt Các loại(Hình 6), nếu không trang web của bạn sẽ không mở được trong trình duyệt.

Hình 6

5. Sau khi lưu xong, hãy chạy bản mẫu. html nhấn đúp chuột. Kết quả là file của bạn sẽ trông như thế này (Hình 7).

Hình 7

Nếu bạn không nhận được kết quả như hình trên, điều đó có nghĩa là rất có thể đã xảy ra lỗi trong mã. Một ký tự sai là đủ và trang web sẽ không được hiển thị chính xác. Kiểm tra lại mã với danh sách trong Hình 2.

6. Bên trong thư mục Ngôi nhà của tôi tạo một thư mục công cộng_ html. Tên này thường là thư mục chứa trang web khi được lưu trữ trên máy chủ thực (thư mục này cũng có thể được gọi là www).

7. Lưu tệp bản mẫu. html trong thư mục công cộng_ html dưới một cái tên mới chủ yếu. html.

8. Từ một thư mục đĩa CD/ html_css_1 Mở tập tin text_main.txt trong Notepad++, đồng thời mở tệp được lưu dưới tên chủ yếu. html

9. Sao chép toàn bộ văn bản từ file text_main.txt và dán nó vào tập tin chủ yếu. html thay vì cụm từ “Nội dung trang web”. Trong thẻ viết chữ “Nhà”. Như thế này <b><title>trang chủ.

10. Lưu thay đổi và xem trước tệp chủ yếu. html trong trình duyệt. Bạn sẽ thấy văn bản chưa được định dạng. Trình duyệt thậm chí không thực hiện ngắt dòng trong văn bản nguồn (Hình 8).

Hình 8

2. Định dạngmạng lưới-các trang được gắn thẻHTML

Hướng dẫn Cách tạo trang HTML này bao gồm các thẻ cơ bản được sử dụng để đánh dấu một trang web.

Thẻ được thiết kế để định dạng văn bản của một trang web. Danh sách các thẻ có thể được xem chi tiết hơn trong thư mục đĩa CD/Danh mụcHTML trong thư mục html401_en.chm(trong mục menu trên cùng yếu tố).

Chúng ta hãy nhìn vào một số thẻ.

Yếu tố h 1, h 2, h 3, h 4, h 5, h 6

Cấu trúc phần thân của tài liệu được thực hiện bên trong phần tử < thân hình> sử dụng các tiêu đề được xác định bởi các phần tử h1, h2, h3, h4, h5, h6.

Các phần tử tiêu đề được ghép nối với nhau nên phải có phần mở đầu < h1> và đóng cửa h1> thẻ.

HTML có sáu cấp độ tiêu đề: h1 (trên cùng), h2, h3, h4, h5 và h6 (dưới cùng). Chức năng của các thành phần tiêu đề tương tự như kiểu tiêu đề thông thường trong trình soạn thảo văn bản.

Tác dụng của sáu thẻ này được thể hiện trong hình bên dưới. Một hình ảnh hiển thị mã nguồn (Hình 9), hình ảnh còn lại hiển thị giao diện trong trình duyệt (Hình 10).

Hình 9

Hình 10

Chia văn bản thành các đoạn văn

Nhãn < P> đặt phần đầu của đoạn văn và chèn một khoảng trắng ở đầu đoạn văn - thụt lề để tách đoạn này khỏi đoạn trước.

Buộc ngắt dòng

Nhãn
cho phép bạn ngắt dòng văn bản còn lại của đoạn văn sang dòng tiếp theo. Đây là thẻ không ghép nối và không giống như thẻ đoạn văn, không làm tăng khoảng cách giữa các dòng.

Thực hành 2

1. Định dạng tiêu đề “Danh mục công trình kiến ​​trúc” bằng thẻ

Và

.

2. Định dạng tiêu đề “Dự án cho ngôi nhà tương lai của bạn” bằng thẻ

Và

.

3. Định dạng các tiêu đề “Dự án nhà” và “Khu vực nhà” bằng cách sử dụng thẻ

Và

.

4. Chia văn bản chính thành các đoạn văn bằng thẻ

Trong hai đoạn đầu tiên, hãy sử dụng thẻ
để ngắt một dòng. Kết quả là mã của bạn sẽ trông như thế này (Hình 11).

5. Xem kết quả trong trình duyệt.

Hình 11

Danh sách có dấu đầu dòng và đánh số

Bằng cách sử dụng HTML, bạn có thể tạo bất kỳ danh sách nào: được đánh số (số và chữ cái) và đánh dấu đầu dòng bằng các loại điểm đánh dấu khác nhau.

Nhãn < ul>…ul> tạo ra một danh sách có dấu đầu dòng.

Nhãn < ôi>…ôi> tạo ra một danh sách được đánh số.

Mục danh sách duy nhất như trong

    , và trong
      được hình thành bằng cách sử dụng thẻ < lý> .

      Thực hành 3

      1. Tạo một danh sách được đánh số dưới tiêu đề “Dự án Nhà ở”.

      2. Tạo một danh sách có dấu đầu dòng dưới tiêu đề “Khu vực nhà”. Mã của bạn sẽ trông như thế này (Hình 12).

      Hình 12

      3. Xem trang trong trình duyệt.

      Các danh sách có thể được lồng vào nhau bằng cách sử dụng các điểm đánh dấu khác nhau.

      Một ví dụ về danh sách lồng nhau được hiển thị trong Hình. 13

      Thực hành 4

      1. Triển khai mã hiển thị trong Hình 13 trong một tệp mới.
      2. Lưu tập tin vào một thư mục Ngôi nhà của tôi dưới cái tên quay lén_ vlozh. html. Kết quả trong hình. 13

      Hình 13. Ví dụ về danh sách lồng nhau

      Kiểu phông chữ

      Nhãn … - cho phép bạn hiển thị văn bản ở phông chữ đậm.

      Nhãn … - cho phép bạn hiển thị văn bản in nghiêng.

      Nhãn … - hiển thị văn bản được gạch chân.

      Ví dụ:

      Trong trường hợp này văn bản sẽ được hiển thị in nghiêng đậm , nhưng không được gạch chân.

      Và trong trường hợp này văn bản sẽ được viết in nghiêng gạch chân đậm .

      Chỉ số dưới và chỉ số trên

      Nhãn < phụ> Và phụ> cho phép bạn hạ văn bản xuống nửa dòng bên dưới văn bản bình thường.

      Nhãn < hỗ trợ> Và hỗ trợ> cho phép bạn nâng văn bản lên nửa dòng so với văn bản bình thường. Văn bản nằm giữa các thẻ này sẽ xuất hiện với phông chữ nhỏ hơn văn bản thông thường.

      Thực hành 5

      1. Định dạng tên myhouse.ru in đậm ở đoạn đầu tiên (Hình 14).

      Hình 14

      2. Định dạng cụm từ “Hơn 95% dự án” được gạch chân in nghiêng ở đoạn thứ hai (Hình 15).

      Hình 15

      3. Định dạng chỉ số trên khi sử dụng mét vuông (Hình 16).

      Hình 16

      4. Lưu tệp. Xem qua trình duyệt. Trang web sẽ trông như thế này (Hình 17).

      Hình 17

      3. Chèn hình ảnh

      Trong bài viết Cách tạo một trang HTML, chúng ta sẽ xem xét cách đặt hình ảnh trên một trang web.

      Thẻ được sử dụng để chèn hình ảnh . Thuộc tính bắt buộc cho thẻ này là src(từ tiếng Anh SouRCe - nguồn). Nó xác định đường dẫn đến tệp đồ họa, hình ảnh của tệp này sẽ được hiển thị trên trang web.

      Để chèn hình ảnh, sử dụng lệnh

      Ví dụ: " hình ảnh1.jpg" alt="Hình ảnh" /> !}

      Thuộc tính alt là cần thiết để khi xem một trang web ở chế độ hình ảnh bị tắt, thay vì hình ảnh bị thiếu sẽ có một dòng chữ được viết bằng thuộc tính alt. Bạn cũng nên luôn sử dụng văn bản thay thế vì công cụ tìm kiếm phân tích chúng dưới dạng từ khóa khi tìm kiếm hình ảnh.

      Các tập tin đồ họa có thể ở định dạng jpg, gif, png và luôn ở dạng màuRGB.

      Thực hành 6

      1. Sau danh sách diện tích nhà, chèn hình ảnh dự án biệt thự vào trang web dự án_1.jpg Và dự án_2.jpg từ thư mục CD/html_css_1 . Để thực hiện việc này, trước tiên hãy sao chép hai hình ảnh này vào thư mục chứa tệp main.html. Mã chèn ảnh sẽ như thế này (Hình 18).

      Hình 18

      2. Xem kết quả trên trình duyệt (Hình 19).

      Hình 19

      Về cơ bản nguyên tắc sử dụng thẻHTMLnên rõ ràng. Chúng được sử dụng theo cùng một nguyên tắc: nếu thẻ là vùng chứa thì có thẻ mở và thẻ đóng. Nếu thẻ là đơn thì không có thẻ đóng; trong trường hợp này, dấu gạch chéo bên phải được viết trước dấu ngoặc nhọn chẳng hạn.< anh/>. Cho dù thẻ là vùng chứa hay thẻ đơn, bạn luôn có thể xem thông số kỹ thuậthtml401_ru.chm trong phần “yếu tố”.

      4. Địa chỉ trong trang web

      Trong bài học đầu tiên của chúng ta, Cách tạo một trang HTML, chúng ta sẽ khám phá các khái niệm về địa chỉ trong HTML.

      Hãy xem xét các tùy chọn địa chỉ khi bạn cần đặt hình ảnh vào một tệp html có thể nằm trong các thư mục khác nhau của trang web.

      Có hai loại địa chỉ:

      • tuyệt đối;
      • liên quan đến.

      Địa chỉ tuyệt đối (sử dụng tên ổ đĩa máy tính) không được sử dụng(Hình 20)

      Hình 20

      Đã sử dụng địa chỉ tương đối - đánh địa chỉ trong một tài liệu hoặc một bộ tài liệu trên một máy chủ. Để tham chiếu đến một tệp trong một trang web, bạn cần cho trình duyệt biết đường dẫn nào cần đi để đến tệp mong muốn.

      ví dụ 1

      Hình ảnh nằm trong cùng thư mục với tài liệu HTML (Hình 21). Nghĩa là, hình ảnh và tệp HTML ở cùng cấp độ trong hệ thống tệp và tài liệu HTML có thể đính kèm hình ảnh ngay lập tức. Trong trường hợp này, việc chèn hình ảnh vào trang web sẽ như thế này.

      / >

      Hình 21

      Nhiệm vụ thực tế7

      Thực hiện ví dụ 1 (tạo thư mục, file doc.html, chụp ảnh bất kỳ). Hình ảnh

      Ví dụ 2

      Hình ảnh bức ảnh. jpg nằm trong thư mục thư mục_1 . Tài liệu HTML nằm bên ngoài thư mục_1. Những thứ kia. Trong hệ thống tệp của trang web, tài liệu HTML được đặt ở vị trí cao hơn hình ảnh một cấp (Hình 22). Bạn cần nhập thư mục folder_1, sau đó đính kèm hình ảnh

      Hình 22

      Nhiệm vụ thực tế8

      Thực hiện ví dụ 2 (tạo thư mục, file doc.html, chụp ảnh bất kỳ). Hình ảnh phải được chèn vào trang web doc.html.

      Ví dụ 3

      Hình ảnh bức ảnh. jpg nằm trong thư mục thư mục_1 , lần lượt nằm trong thư mục thư mục_2 . Tài liệu HTML nằm bên ngoài các thư mục này (Hình 23). Do đó, tài liệu HTML cao hơn hai cấp độ so với hình ảnh. Cần thiết:

      • nhập thư mục thư mục_2,
      • sau đó nhập thư mục folder_1,
      • sau đó đính kèm hình ảnh.

      Hình 23

      Nhiệm vụ thực tế9

      Thực hiện ví dụ 3 (tạo thư mục, file doc.html, chụp ảnh bất kỳ). Hình ảnh phải được chèn vào trang web doc.html.

      Ví dụ 4

      thư mục_1 . Hình ảnh nằm bên ngoài thư mục_1. Những thứ kia. Tài liệu HTML nằm phía dưới hình ảnh một cấp (Hình 24). Bạn cần thoát khỏi thư mục_1, sau đó đính kèm hình ảnh. Để lại một thư mục được chỉ định bởi việc xây dựng ../ (hai dấu chấm và một dấu gạch chéo ở bên phải).

      / >

      Hình 24

      Nhiệm vụ thực tế10

      Thực hiện ví dụ 4 (tạo thư mục, file doc.html, chụp ảnh bất kỳ). Hình ảnh phải được chèn vào trang web doc.html.

      Ví dụ 5

      Tài liệu HTML nằm trong thư mục thư mục_1 , lần lượt nằm trong thư mục thư mục_2 . Hình ảnh nằm ngoài các thư mục này. Do đó, tài liệu HTML nằm ở vị trí thấp hơn hình ảnh hai cấp (Hình 25). Cần thiết:

      • thoát thư mục thư mục_1,
      • thoát thư mục thư mục_2,
      • đính kèm một hình ảnh.

      Vì bạn cần thoát hai lần nên thiết kế ../ lặp lại hai lần.

      / >

      Hình 25

      Thực hành 11

      Thực hiện ví dụ 5 (tạo thư mục, file doc.html, chụp ảnh bất kỳ). Hình ảnh phải được chèn vào trang web doc.html.

      Ví dụ 6 (Hình 26)

      Cần thiết:

      • thoát thư mục thư mục_1,
      • thoát thư mục thư mục_2,
      • đi đến thư mục thư mục_3,
      • đi tới thư mục thư mục_4,
      • đính kèm hình ảnh pic.jpg

      Hình 26

      Thực hành 12

      Thực hiện ví dụ 6 (tạo thư mục, file doc.html, chụp ảnh bất kỳ). Hình ảnh

      phải được chèn vào trang web doc.html.

      Ví dụ 7 (Hình 27)

      Cần thiết:

      • thoát thư mục thư mục_1,
      • thoát thư mục thư mục_2,
      • thoát thư mục thư mục_3,
      • nhập thư mục thư mục_4,
      • đính kèm hình ảnh pic.jpg.

      Vì bạn cần thoát ba lần nên thiết kế ../ lặp lại ba lần.

      Hình 27

      Thực hành 13

      Thực hiện ví dụ 7 (tạo thư mục, file doc.html, chụp ảnh bất kỳ). Hình ảnh

      phải được chèn vào trang web doc.html.

      Vì vậy, dù bạn cần thoát bao nhiêu lần thì chúng tôi cũng đặt cấu trúc ../ rất nhiều lần và nếu vào thì chúng tôi sẽ liệt kê tên các thư mục gặp phải trên đường đi.

      Thực hành 14

      1. Tạo một tài liệu html và chèn một hình ảnh vào đó sao cho đường dẫn đến hình ảnh như sau.

      " ../../../../../folder_1/folder_2/folder_3/image.jpg" / >

      2. Phát triển ví dụ của riêng bạn về việc chèn hình ảnh vào tài liệu html để nó chứa và lối ra từ các thư mục và cổng vào vào các thư mục. Ví dụ này phải khác với tất cả các ví dụ trên.

      Sau khi hoàn thành chủ đề này, bạn sẽ có các tệp sau được tạo:

      • mẫu.html
      • chính.html
      • spisok_vlozh.html
      • bên trong thư mụcNgôi nhà của tôinên có một thư mụccông cộng_ htmlvới các tập tin của trang web trong tương lai
      • bảy ví dụ về địa chỉ tương đối và hai ví dụ kiểm soát từ bài tập thực hành 14

      Hoặc, hoặc tốt hơn nữa là cả bốn, vì nhiều thành phần HTML hiển thị khác nhau trong các trình duyệt khác nhau và tốt nhất là bạn nên kiểm soát sự khác biệt đó.

      Ngoài trình duyệt, chúng ta sẽ cần ít nhất một số loại trình soạn thảo văn bản, chẳng hạn như Notepad từ Windows hoặc Notepad, nhưng lý tưởng nhất là Dreamweaver. Cần có chương trình để chuẩn bị các tệp HTML và cần có trình duyệt để xem và kiểm soát những gì đã được tạo ra. Bằng cách sử dụng những công cụ này, chúng tôi sẽ tạo một trang WEB trên máy tính cục bộ của riêng mình, sau đó chúng tôi sẽ đặt nó trên một trong các máy chủ WWW trên Internet, do đó làm cho các trang WEB của bạn có thể truy cập được trên toàn thế giới.

      Chuẩn bị tạo một trang WEB

      Ví dụ: hãy chuẩn bị các trang WEB cho một công ty. Hãy gọi nó là "Công ty SD", giả sử nó hoạt động trong lĩnh vực hệ thống điều khiển tự động. Mục đích của trang WEB là giới thiệu với thế giới về công ty, phạm vi hoạt động của công ty và tìm kiếm đối tác, khách hàng.

      Các tập tin trang WEB của chúng tôi yêu cầu một thư mục riêng.

      Tạo một thư mục có tên WEB trên bất kỳ ổ cứng nào của máy tính của bạn. Bây giờ hãy khởi chạy chương trình Notepad và bắt đầu làm việc.

      Mở một chương trình, ví dụ như Notepad, bằng cách nhấp vào nút Bắt đầu trên Thanh tác vụ và chọn Chương trình - Phụ kiện - Notepad từ menu xuất hiện.

      Bạn có thể sử dụng bất kỳ trình soạn thảo văn bản nào khác. Nhưng trong trường hợp này, bạn nên lưu tệp dưới dạng văn bản thuần túy để tránh đưa các dấu định dạng của bên thứ ba vào tài liệu WEB.

      Đầu tiên, hãy giới thiệu các thẻ chính xác định cấu trúc của bất kỳ tài liệu HTML nào. Hãy để chúng tôi nhắc bạn rằng trong mã HTML, bạn có thể sử dụng bất kỳ kiểu ký tự nào - hoa hoặc thường.

      Thẻ đầu tiên

      Nhập các thẻ chính tiếp theo bằng bàn phím, đặt bất kỳ thẻ nào trong số chúng, không tính thẻ đóng, trong dòng mới nhất.

      Để nhập các thẻ được ghép nối, bạn sẽ có thể sử dụng các thao tác sao chép và dán thông qua bảng tạm của Windows với việc thêm dấu gạch chéo / sau đây.

      Chúng ta hãy nhớ rằng ngày 1 Và cuối cùng thẻ có nghĩa là phần đầu và phần cuối của tài liệu, phần tử … xác định tiêu đề, thành phần trang WEB …- phần thân của tài liệu và trong phần tử Bây giờ chúng tôi sẽ chỉ ra tiêu đề của trang WEB.

      Giữa cái mở và đóng cửa sử dụng thẻ để chèn tiêu đề tài liệu - Công ty SD. Phần tử này sẽ trông như thế này:

      Công ty SD

      Hãy để chúng tôi nhắc bạn rằng tiêu đề của trang WEB phải nhỏ và hiển thị nội dung của nó ở mức độ lớn nhất.

      Nhiệm vụ tiếp theo của chúng ta là chèn vào nội dung tài liệu giữa các thẻ … một lời chào văn bản nhỏ tới khách của trang WEB.

      Chèn một dòng trống giữa các thẻ Và và nhập văn bản sau vào đó:

      Chào mừng đến với trang của công ty SD! Tại đây bạn sẽ tìm hiểu về các hoạt động của chúng tôi, về các sản phẩm phần mềm của công ty chúng tôi và về thiết bị mà chúng tôi sản xuất.

      Đối với mỗi trang WEB, bạn có thể tìm thấy màu nền và màu văn bản. Điều này được thực hiện bằng cách sử dụng thuộc tính bgcolor và text của thẻ mở. . Có hai tùy chọn để xác định màu làm giá trị thuộc tính:

      • chỉ dẫn bằng lời về tên của màu, ví dụ: màu trắng (màu trắng như tuyết). HTML cung cấp 16 tên như vậy;
      • ký hiệu số theo ký hiệu thập lục phân, ví dụ: "#ffffff" - màu trắng như tuyết, cho biết cách hình thành màu từ các màu chính - đỏ, xanh lục và xanh lam.

      Tô màu trang WEB đầu tiên

      Đương nhiên, việc chỉ dẫn màu sắc bằng lời nói sẽ thoải mái và dễ hiểu hơn. Mặt khác, ký hiệu bằng số mang lại nhiều khả năng hơn vì chúng cho phép bạn thực sự chỉ ra bất kỳ màu nào trong số 16.777.215 màu, trong khi ký hiệu bằng lời nói chỉ giới hạn ở mười sáu màu.

      Hãy liệt kê một số tên màu: đen (tối), xám (xám), đỏ (đỏ), xanh lá cây (xanh lục), thủy (xanh lam).

      Ví dụ: chúng tôi sử dụng màu xanh lam cho nền của trang WEB và màu hơi vàng cho văn bản.

      Chèn nó vào thẻ mở thuộc tính bgcolor="blue" và text="gold". Thẻ này sẽ trông giống như:

      Ngoài việc chỉ định màu sắc, bạn cũng có thể sử dụng bản phác thảo được chuẩn bị trước cho nền của trang WEB. Nhưng chúng ta sẽ nói về điều này trong tương lai.

      Trong cửa sổ chương trình Notepad, chọn menu lệnh File - Save. Hộp thoại Lưu dưới dạng xuất hiện trên màn hình.

      Mở thư mục WEB bạn đã tạo trước đó, trong đó tất cả các tệp trang WEB phải được lưu.

      Trong trường nhập Tên tệp, nhập other.html - đó là tên chúng tôi sẽ gọi tệp này.

      Xin lưu ý: bạn phải chỉ định phần mở rộng của tên tệp HTML để trình duyệt có thể mở được. Bạn cũng có thể viết htm, nhưng đây là định dạng lỗi thời và việc sử dụng nó hoàn toàn không được khuyến khích.

      Hãy xem kết quả của công việc

      Bây giờ bạn có thể xem kết quả công việc của chúng tôi.

      Không đóng nó, thu nhỏ cửa sổ Notepad.

      Sử dụng Explorer (Windows Explorer), mở thư mục WEB mà bạn đã lưu tệp other.html và nhấp đúp vào biểu tượng của nó. Trình duyệt mặc định sẽ được khởi chạy và tài liệu other.html sẽ mở trong cửa sổ của nó.

      Bạn thấy đấy, tiêu đề của cửa sổ trình duyệt cho biết tiêu đề của tài liệu mà chúng ta đã nhập vào phần tử , màu nền và văn bản của trang giống như được chỉ định trong thẻ . Văn bản xuất hiện trong một đoạn văn và được căn chỉnh sang trái.

      Kích thước phông chữ văn bản trong trình duyệt của bạn có thể lớn hơn hoặc nhỏ hơn trong ảnh. Trong trường hợp này, chọn lệnh menu Xem - Cỡ chữ - Trung bình (Xem - Cỡ văn bản - Trung bình) trong trình duyệt Internet Explorer để đặt cỡ chữ ở mức trung bình.

      Cần hiểu rằng các trình duyệt khác nhau có thể hiển thị nội dung của cùng một tệp HTML một cách khác nhau. Vì vậy, khi phát triển các trang WEB, tốt hơn hết bạn nên luôn xem kết quả trên tất cả các trình duyệt phổ biến hơn - Internet Explorer, Opera, Mozilla. Trong trường hợp này, bạn sẽ tin chắc rằng khách truy cập trang WEB của bạn sẽ thấy chính xác những gì bạn muốn cho họ xem.

      Xem tệp đã tạo trong trình duyệt khác. Ở giai đoạn làm việc này, sự khác biệt sẽ không được chú ý.

      Không đóng, thu nhỏ cửa sổ trình duyệt.

      Bởi vì trong phần tử Chúng tôi đã nhập văn bản mà không chia nó thành các đoạn văn, sau đó trong trình duyệt, nó được hiển thị dưới dạng đoạn đầu tiên và được căn chỉnh về bên trái. Bây giờ chúng ta cần làm cho văn bản trông đẹp hơn.

      Xin chào các độc giả blog thân mến. Với bài viết này, chúng ta sẽ bắt đầu tìm hiểu những điều cơ bản về ngôn ngữ HTML.

      Có thể bạn đã biết rằng ngôn ngữ chính của Internet là ngôn ngữ đánh dấu siêu văn bản HTML (Ngôn ngữ đánh dấu siêu văn bản). Trong bài viết này, chúng ta sẽ tìm hiểu các khái niệm cơ bản về HTML và tìm hiểu cách tạo các trang WEB đơn giản.

      Hãy bắt đầu với điều quan trọng nhất, hãy xem nó hoạt động như thế nào Mạng toàn cầu - Internet. Để tạo các trang web, bạn tạo các tệp được viết bằng HTML và đặt chúng trên máy chủ web. Sau này, bất kỳ trình duyệt nào được cài đặt trên thiết bị có quyền truy cập Internet, có thể là máy tính, điện thoại hoặc máy tính bảng, đều có thể tìm thấy các trang web của bạn.

      máy chủ web- Đây là một máy tính thông thường có phần mềm đặc biệt có thể truy cập Internet. Nó liên tục lắng nghe các yêu cầu từ trình duyệt về các trang web, hình ảnh, tệp âm thanh và video. Sau khi nhận được yêu cầu về một trong những tài nguyên này, máy chủ sẽ tìm kiếm nó và gửi nó đến trình duyệt.

      Trình duyệt là một chương trình đặc biệt được thiết kế để xem các trang web, chẳng hạn như Internet Explorer. Sử dụng trình duyệt, bạn duyệt các trang web bằng cách nhấp vào liên kết. Bất kỳ nhấp chuột nào như vậy sẽ khiến trình duyệt đưa ra yêu cầu về trang HTML tới máy chủ web, nhận phản hồi và hiển thị trang trong cửa sổ của nó. Khi trang được hiển thị, ngôn ngữ HTML bắt đầu hoạt động; nó cho trình duyệt biết mọi thứ về cấu trúc và nội dung của trang web. Sử dụng lệnh - thẻ, HTML cho trình duyệt biết đoạn văn bản bắt đầu từ đâu, phần nào của văn bản là tiêu đề và vị trí chèn bảng và thậm chí cả ảnh. Và thẻ là những từ trong dấu ngoặc nhọn, ví dụ

      ,

      , .

      Bạn rất cần một cửa hàng trực tuyến nhưng không có thời gian để học HTML, CSS, PHP và các công nghệ khác. Sau đó, bạn có thể chỉ cần thuê một cửa hàng trực tuyến có đầy đủ chức năng và tối ưu hóa cho các công cụ tìm kiếm.

      Ngôn ngữ HTML và các thẻ của nó

      Phiên bản đầu tiên của ngôn ngữ HTML xuất hiện vào năm 1992. Vào thời điểm năm 2013, đặc tả của phiên bản HTML mới, số 5, đang được phát triển. Việc phát triển đặc tả này được thực hiện bởi World Wide Web Consortium, hay gọi tắt là W3C. Tổ chức W3C phát triển các tiêu chuẩn Web khác. Bạn có thể tự làm quen với các tiêu chuẩn này trên trang web của họ www.w3.org. Nhân tiện, nhiều trình duyệt Web đã hỗ trợ một số tính năng HTML 5.

      Tôi khuyên bạn nên bắt đầu học HTML ngay bằng một ví dụ. Vì vậy, hãy tạo trang Web đầu tiên của chúng ta. Bất kỳ trình soạn thảo văn bản nào cũng phù hợp để tạo các trang WEB. Tôi đề nghị trước tiên hãy sử dụng Windows tích hợp Sổ tay(nói chung sau này mình khuyên bạn nên sử dụng để chỉnh sửa code html). Bạn có thể tìm thấy nó: “Bắt đầu->Tất cả chương trình->Phụ kiện->Notepad”. Hãy tạo một trang về ô tô. Vì vậy, hãy mở Notepad và gõ văn bản sau vào đó:





      Trang web mẫu


      Trang web về ô tô.


      Chào mừng bạn đến với trang web ô tô của chúng tôi. Ở đây bạn sẽ tìm thấy nhiều bài viết thú vị và hữu ích về xe ô tô. Trang web chứa các mô tả về nhiều loại xe nhập khẩu và trong nước.



      Tiếp theo, lưu trang web đã tạo vào file có tên index.html. Trong trường hợp này, trong hộp thoại lưu tệp, bạn phải đặt mã hóa thành UTF-8 và đặt tên tệp trong dấu ngoặc kép, nếu không Notepad sẽ thêm phần mở rộng txt vào đó và tệp của chúng ta sẽ có tên là index.htm.txt:

      Bây giờ tất cả những gì còn lại là mở tệp đã tạo trong trình duyệt và xem kết quả. Để thực hiện việc này, bạn có thể sử dụng trình duyệt Microsoft Internet Explorer đi kèm với Windows hoặc bất kỳ trình duyệt nào khác được cài đặt trên máy tính của bạn bằng cách nhấp đúp vào tệp index.html hoặc kéo tệp vào biểu tượng trình duyệt. Mở nó và thấy một cái gì đó như thế này:

      Vì vậy, chúng tôi đã tạo một trang Web trong Notepad, mặc dù hơi khó mô tả nhưng đã chứa một tiêu đề lớn và một đoạn văn bản được tự động ngắt thành dòng và chứa một đoạn in đậm.

      Thẻ là gì?

      Bây giờ hãy nói nhiều hơn về cấu trúc trang. Chúng ta hãy nhìn vào đoạn:

      Website về ô tô

      . Ở đây chúng ta thấy văn bản xuất hiện trên trang dưới dạng tiêu đề, được đính kèm trong các thẻ

      Và

      . Thẻ trong HTML là gì?

      Thẻ HTML là những từ và ký hiệu thông thường được đặt trong dấu ngoặc nhọn, ví dụ

      ,

      , . Vì vậy hãy gắn thẻ

      là thẻ mở đầu, thẻ

      thẻ đóng và văn bản giữa chúng được gọi là nội dung của thẻ. Đồng thời gắn thẻ

      và gắn thẻ

      được gọi là thẻ ghép nối. Cùng với nhau, thẻ mở cùng với nội dung và thẻ đóng tạo thành một thành phần tài liệu HTML. Ngoài ra còn có các phần tử bao gồm một thẻ mở:

      Vì vậy, thẻ được ghép nối

      xác định phần tử tiêu đề cấp đầu tiên. Tổng cộng có sáu cấp độ tiêu đề, đây là những yếu tố

      —

      .

      Các phần tử có thể là khối hoặc nội tuyến (văn bản). Khối phần tử thực hiện định dạng cấu trúc của trang. Các phần tử khối luôn được hiển thị trên một dòng mới trên trang và được thụt vào từ các phần tử liền kề. Phần tử nội tuyến thực hiện định dạng văn bản trực tiếp hoặc định dạng logic. Yếu tố

      là phần tử khối

      Đó là tất cả đối với tôi!!! Hẹn gặp lại các bạn ở những bài viết tiếp theo!