Cách tạo một trang bằng html. Ví dụ tạo trang html bằng notepad

VIỆN GIÁO DỤC MỞ MOSCOW
BỘ VẬT LIỆU VÀ CÔNG NGHỆ THÔNG TIN

Tài liệu khóa học từ xa
"Công nghệ thông tin và giáo dục"

Polilova Tatyana Alekseevna
[email được bảo vệ]

Cách tạo một trang web

Cách dễ nhất để tạo một trang web là sử dụng các công cụ Microsoft Office. Các phiên bản mới nhất của gói này cung cấp khả năng chuyển đổi tài liệu thông thường sang định dạng HTML với chất lượng mã tốt.

Tính năng từ

Một tài liệu được chuẩn bị trong trình soạn thảo văn bản Word có thể dễ dàng chuyển đổi thành trang web. Tuy nhiên, nó sẽ không hấp dẫn như bạn mong muốn nếu không thực hiện thêm các bước. Hãy xem xét một vài ví dụ.

Hãy lấy một số văn bản.

Chúng tôi chuyển đổi tài liệu thành một trang web bằng thao tác Lưu dưới dạng trang web... (được gọi từ menu chính - Mục tệp). Sau đó, phần trình bày html của tài liệu sẽ trông như sau:

Điều đầu tiên đập vào mắt bạn là văn bản chiếm toàn bộ không gian màn hình. Độ dài chuỗi quá dài. Để đọc thoải mái trên màn hình, số lượng ký tự trên mỗi dòng phải nằm trong khoảng 50-65.

Sử dụng một bảng

Trong trường hợp này, bạn có thể thực hiện khá đơn giản: tạo một bảng trong tài liệu nguồn và đặt văn bản mong muốn vào đó. Bạn có thể đặt khung trong bảng. Khi đó giao diện của trang web sẽ được cải thiện hơn rất nhiều và trang sẽ trông hấp dẫn hơn trong trình duyệt.

Bối cảnh và phong cách

Nên chọn nền không quá sáng để có thể đọc rõ chữ trên đó. Nền tảng như vậy trong danh sách được đề xuất là, ví dụ, Bánh tráng. Chế độ xem trang đã thay đổi đáng chú ý:

Chèn một hình ảnh

Bạn có thể thêm ảnh vào tài liệu, chẳng hạn như lấy ảnh đó từ bộ sưu tập clip.

Bạn cần nhấp chuột phải vào ảnh, thực hiện thao tác sao chép, sau đó trong tài liệu chỉ định vị trí cho ảnh và thực hiện thao tác dán đối tượng đã sao chép.

Nếu bạn chèn một hình ảnh vào trong một đoạn văn thì tốt hơn là thay đổi các thuộc tính của hình ảnh bằng cách đặt văn bản bao quanh hình ảnh (bạn cần chọn mục menu chính Định dạng rồi chọn Hình ảnh):

Điều này sẽ không tạo thêm bất kỳ khoảng trống nào trong tài liệu.

Cuối cùng, bạn có thể thêm khung và bóng vào ảnh bằng cách sử dụng các nút trên bảng Vẽ - Loại đường và Kiểu bóng. Những sắc thái như vậy làm tăng đáng kể tính biểu cảm cho trang.

Nếu bảng Vẽ không có trên trang, bạn cần cài đặt nó bằng cách chọn mục menu chính Xem rồi chọn Thanh công cụ và Bản vẽ.

Mã chứng khoán

Word cho phép bạn thêm các thành phần thiết kế khác vào một trang web, chẳng hạn như “đường leo”. Để sử dụng tính năng này, bạn cần mở bảng thành phần web trên màn hình (từ menu chính - View, sau đó là Toolbars and Web Components). Nhấp vào nút thao tác Ticking Line sẽ mở ra một cửa sổ bổ sung để chỉ định văn bản của các tham số đường leo.

Như thường lệ, bạn có thể thay đổi phông chữ và thuộc tính của một dòng: cỡ chữ và màu ký tự. Trang web sẽ trông như thế này trên màn hình của bạn:

Chúng tôi chỉ đưa ra một ví dụ về một tập hợp kỹ thuật thiết kế rất khiêm tốn mà bạn có thể thiết kế một trang web dựa trên tài liệu hiện có ở định dạng Word.

Sử dụng mẫu thiết kế

Nếu bạn đang bắt đầu tạo một trang từ đầu, bạn có thể sử dụng Trình hướng dẫn Trang Web để giúp bạn tạo tài liệu trong một cuộc hội thoại. Hoặc bạn có thể sử dụng mẫu thiết kế trang làm sẵn, chọn mẫu đó từ một bộ khá tiêu biểu. Để thực hiện việc này, trong thao tác Tạo, hãy chọn chế độ Tạo bằng mẫu rồi chọn Mẫu chung. Một biểu mẫu sẽ xuất hiện trên màn hình trong đó bạn cần chọn tab Trang web:

Người dùng có thể chọn màu sắc và kiểu dáng một cách độc lập, chẳng hạn như sử dụng cài đặt Định dạng - Chủ đề.

Tạo siêu liên kết và dấu trang

Vấn đề cuối cùng mà chúng tôi dự định xem xét trong phần này là việc tạo siêu liên kết trong tài liệu.

Nếu chúng ta muốn tham chiếu một tài liệu đến một tài liệu khác hoặc một trang web khác trên Internet, thì siêu liên kết đó có thể được thực hiện như sau: chọn một đoạn văn bản (một từ) trong tài liệu và thực hiện thao tác Chèn - Siêu liên kết... Một biểu mẫu sẽ xuất hiện trên màn hình trong đó bạn chỉ định địa chỉ siêu liên kết. Địa chỉ có thể được nhập rõ ràng hoặc tệp có thể được chọn trong cửa sổ.

Ở đây bạn nên nhớ rằng địa chỉ của tệp đã chọn trên máy tính của bạn có thể thay đổi khi bạn tạo trang web của mình. Do đó, phương pháp ngầm chỉ định địa chỉ chỉ phù hợp nếu cấu trúc thư mục trên máy tính và trên trang Internet của bạn giống nhau.

Nếu một siêu liên kết đề cập đến một phần khác của cùng một tài liệu thì trước tiên bạn phải chèn dấu trang vào đầu đoạn mong muốn. Bạn cần thực hiện thao tác Insert – Bookmark và nhập tên bookmark vào mẫu xuất hiện trên màn hình.

Trình bày web trong PowerPoint

PowerPoint là một chương trình được thiết kế để tạo bài thuyết trình trên máy tính. Tuy nhiên, nó có chức năng chuyển đổi bản trình bày đã chuẩn bị sẵn thành định dạng web.

Bạn có thể mở bản trình bày đã chuẩn bị sẵn và thực hiện các thao tác (từ menu chính) Tệp - Lưu dưới dạng trang web. Như thường lệ, bạn cần chỉ định tên của bản trình bày web trong cửa sổ mở ra. Kết quả của việc chuyển đổi bản trình bày, một tệp có tên và phần mở rộng được chỉ định là .htm và một thư mục cùng tên với các tài liệu bổ sung sẽ được tạo.

Nếu bây giờ bạn gọi bản trình bày web từ trình duyệt, bạn có thể xem kết quả chuyển đổi trên màn hình.

Một dòng đặc biệt được tạo ở cuối màn hình, nơi đặt các nút để di chuyển đến các trang trình bày và các nút để thiết lập các thông số khác nhau để xem bản trình bày.

Bài thuyết trình có thể được xem với cấu trúc slide được hiển thị. Nhưng nếu thông tin này không được quan tâm thì trường trên màn hình dành riêng để hiển thị cấu trúc có thể bị xóa (thao tác mở rộng/thu gọn cấu trúc ở dòng dưới cùng).

Sử dụng nút Hiển thị Cửa hàng, bạn có thể xem các trang trình bày ở chế độ toàn màn hình.

Tạo siêu liên kết

Trong bài thuyết trình, bạn có thể tạo siêu kết nối liên kết các đối tượng trên một trang chiếu, chẳng hạn như với các trang chiếu khác. Bằng cách này, có thể tạo ra một cấu trúc siêu phương tiện tương ứng một cách tự nhiên với hệ tư tưởng của Internet. Hãy để chúng tôi giải thích kỹ thuật này bằng một ví dụ.

Chúng ta hãy chuẩn bị sẵn một số slide về chủ đề hệ thực vật của hồ Baikal, được tổng hợp từ bộ sưu tập ảnh. Hãy tạo một slide mới - mục lục cho bộ sưu tập.

Nếu trang chiếu mới không phải là trang đầu tiên trong chuỗi thì bạn cần chuyển sang chế độ sắp xếp trang chiếu (từ menu chính sử dụng thao tác Xem - Sắp xếp trang chiếu) và kéo trang chiếu mới vào đầu bộ sưu tập.

Đặt các bản sao nhỏ của tất cả các bức ảnh vào một slide mới. Cách dễ nhất để thực hiện điều này là theo cách đơn giản nhất: sao chép tuần tự tất cả các bức ảnh trong bộ sưu tập vào một trang chiếu trống, giảm kích thước của chúng và đặt chúng, chẳng hạn như thành hai dòng. Các bức tranh sau này có thể được trang trí bằng các khung có bóng. Bạn có thể thêm tiêu đề bài thuyết trình của mình vào slide mục lục. Chế độ xem bản trình bày ở chế độ Slide Sorter được hiển thị bên dưới:

Chúng ta chuyển sang chế độ xem slide bình thường (lệnh View rồi Normal). Trên slide mục lục chọn ảnh và thực hiện lệnh Insert – Hyperlink. Trong cửa sổ mở ra, hãy đặt quá trình chuyển đổi thông qua siêu liên kết - số trang chiếu có ảnh lớn mà từ đó mẫu nhỏ hơn cho mục lục đã được sao chép.

Tương tự như vậy chúng ta sẽ liên kết các hình ảnh khác trên slide mục lục với các slide tương ứng với ảnh gốc.

Nếu bây giờ chúng ta chạy bản trình bày của mình, nó sẽ hoạt động giống như một cấu trúc siêu phương tiện: khi bạn nhấp vào một bức ảnh nhỏ, nó sẽ chuyển đến một trang chiếu có ảnh lớn hơn.

Nó vẫn còn để cải thiện cấu trúc của chúng tôi khá nhiều. Hãy thêm một mũi tên vào mỗi trang chiếu có ảnh ở phần trên bên trái của nó (Hình tự động trên thanh công cụ Vẽ) và tạo siêu liên kết từ mũi tên này sẽ đi đến trang chiếu mục lục. Giờ đây, chuyển động thông qua cấu trúc hypermedia mà chúng tôi đã tạo sẽ trở thành “hai chiều”: từ mục lục, bạn có thể chuyển đến các trang chiếu có ảnh và từ bất kỳ trang chiếu nào, bạn có thể quay lại mục lục.

Sau khi chuyển đổi bản trình bày sang định dạng web, trang đầu tiên của chúng ta sẽ trông như thế này:

Nhấp vào ảnh từ menu sẽ đưa bạn đến một slide có ảnh lớn và nhấp vào mũi tên (ở trên cùng bên trái của slide) sẽ đưa bạn đến trang mục lục của bộ sưu tập.

Như bạn đã biết, mọi thứ tuyệt vời luôn bắt đầu từ việc nhỏ. Nếu bạn quan tâm đến câu trả lời cho câu hỏi làm thế nào để tạo một trang web bằng notepad, thì có lẽ bạn đã nghe nói về khả năng này ở đâu đó. Điều này thực sự có thể. Nhưng điều đáng nói ngay là rất có thể hiện tại sẽ không có ai tạo một trang web tương tác động hiện đại bằng notepad, vì có những chương trình đặc biệt dành cho việc này giúp tăng tốc và đơn giản hóa đáng kể quá trình phát triển. Nhưng việc tạo một trang web chính thức là hoàn toàn có thể.

Cách tạo một trang web bằng notepad
Để bắt đầu, bạn cần làm quen một chút với lý thuyết và các thuật ngữ chung. Phần lớn các trang web là các tài liệu văn bản thông thường được thiết kế theo cách đặc biệt - ngôn ngữ đánh dấu siêu văn bản, viết tắt là HTML. Một số người phân loại đánh dấu HTML là ngôn ngữ lập trình, nhưng điều này không đúng.

HTML chỉ đơn giản là một cách tiêu chuẩn hóa đánh dấu tài liệu được trình duyệt diễn giải duy nhất để hiển thị trên màn hình máy tính ở dạng thân thiện với người dùng. Công cụ chính của ngôn ngữ HTML là các thành phần cấu trúc đặc biệt mà tài liệu được soạn thảo. Chúng được gọi là mô tả hoặc thẻ.

Nói chung, một thẻ là một cấu trúc có dạng

Vì vậy, thẻ bắt đầu bằng< после которого следует название тега table и вся конструкция завершается знаком >. Thẻ đi theo cặp, như văn bản in đậm và không ghép nối dưới dạng nguồn cấp dữ liệu
. Trường hợp sử dụng thẻ ghép thì bắt buộc phải dùng làm thẻ mở đầu , và đóng cửa. Thẻ đóng là thẻ có dấu gạch chéo /.

Hãy xem xét các loại thẻ chính và mục đích của chúng.

Tổng cộng có khoảng một trăm thẻ, nhưng mười thẻ được xem xét đã đủ để thiết kế trang web đơn giản nhất trong một sổ ghi chú. Thẻ tài liệu cơ bản , , , <body>được phân phối theo một trật tự nghiêm ngặt. Bên trong một thẻ <body>các bộ mô tả còn lại có thể theo các thứ tự khác nhau trong tiêu chuẩn ngôn ngữ HTML. Cách dễ nhất để hiểu điều này là tạo một trang web đơn giản. <ol><li><span>Khởi chạy Notepad và ngay dòng đầu tiên, đặt phần tử<!DOCTYPE html>, thông báo cho trình duyệt cách diễn giải tài liệu của bạn. <p> <!DOCTYPE html></p></span></li><li><span>Ngắt dòng và thêm thẻ ghép nối <html>. Dịch thẻ đóng</html> xuống hai dòng. <p> <!DOCTYPE html><br><html></p></span></li><li><span>Thêm thẻ cặp <head>ở dòng giữa các thẻ <html>và dịch thẻ đóng</head> xuống hai dòng. <p> <!DOCTYPE html><br><html><br><head></p><p></head><br></html></p></span></li><li><span>Xếp hàng giữa các thẻ <head>Và</head> viết thẻ cặp <title> trong một dòng.






  • Nhập tiêu đề trang web của bạn giữa các thẻ . Ví dụ như cái này.




    Trang đầu tiên của tôi trên trang web

  • Đặt con trỏ ở dòng sau thẻ đóng và thực hiện nạp dòng. Nhập tag ghép vào dòng trống hiện ra .




    Trang đầu tiên của tôi trên trang web


  • Thực hiện một bản dịch kép giữa các thẻ bên trong Và. Tại dòng hiện ra nhập thẻ tiêu đề ghép đôi

    . Nhập vào bên trong thẻ

    phụ đề trang.




    Trang đầu tiên của tôi trên trang web


    Về tôi



  • Sau thẻ tiêu đề đóngngắt dòng và đặt các thẻ đoạn được ghép nối trong dòng mới. Viết văn bản giữa chúng. Ví dụ như thế này.




    Trang đầu tiên của tôi trên trang web


    Về tôi


    Tên tôi là Ivanov Ivan. Tôi đang tạo trang web của riêng mình.



  • Đính kèm họ và tên trong thẻ ghép nối để làm nổi bật chúng bằng chữ in đậm.




    Trang đầu tiên của tôi trên trang web


    Về tôi


    Tên tôi là Ivanov Ivan. Tôi đang tạo trang web của riêng mình.



  • Sau thẻ đoạn kết

    thực hiện nguồn cấp dữ liệu và nhập thẻ được ghép nối vào dòng mới

    . Nhập một số văn bản giữa các thẻ.




    Trang đầu tiên của tôi trên trang web


    Về tôi


    Tên tôi là Ivanov Ivan. Tôi đang tạo trang web của riêng mình.


    Những thành công của tôi



  • Sau thẻ phụ đề đóngngắt dòng một lần nữa, nhập các thẻ đoạn văn được ghép nối và viết văn bản tùy ý giữa các thẻ này.




    Trang đầu tiên của tôi trên trang web


    Về tôi


    Tên tôi là Ivanov Ivan. Tôi đang tạo trang web của riêng mình.


    Những thành công của tôi




  • Trong số các thẻ được liệt kê trong bài viết, có hai thẻ vẫn chưa được khám phá - nguồn cấp dữ liệu dòng
    và thẻ quan trọng nhất để tạo liên kết
    . Hãy áp dụng chúng. Trước thẻ đóng cuối cùng, hãy nhập phần mô tả
    , và giữa

    kiểu thiết kế. Bạn sẽ nhận được những điều sau đây.




    Trang đầu tiên của tôi trên trang web


    Về tôi


    Tên tôi là Ivanov Ivan. Tôi đang tạo trang web của riêng mình.


    Những thành công của tôi


    Cú pháp HTML cơ bản đã được nắm vững và trang đầu tiên của trang web trong tương lai đã được tạo.
    Trong quá trình học tập, tài liệu từ website được sử dụng



  • Giữa các dấu ngoặc kép trong một thẻ nhập địa chỉ của trang mà bạn sẽ liên kết. Trước thẻ bạn có thể nhập từ Link và giữa các thẻ nhập văn bản sẽ được hiển thị trên trang.




    Trang đầu tiên của tôi trên trang web


    Về tôi


    Tên tôi là Ivanov Ivan. Tôi đang tạo trang web của riêng mình.


    Những thành công của tôi


    Cú pháp HTML cơ bản đã được nắm vững và trang đầu tiên của trang web trong tương lai đã được tạo.
    Trong quá trình học tập, tài liệu từ website được sử dụng

    Liên kết: trang mạng



  • Tại thời điểm này, việc tạo một trang đơn giản cho trang web có thể được hoàn thành. Về nguyên tắc, nó cũng có thể được hoàn thành ở bước 9, nhưng nếu bạn nghiêm túc trong việc học ngôn ngữ HTML thì việc thực hành bổ sung sẽ không thừa. Lưu trang có phần mở rộng *.html và bạn có thể mở nó trong bất kỳ trình duyệt nào để xem kết quả công việc của mình. Nếu mọi thứ được thực hiện chính xác, bạn sẽ thấy một cái gì đó như sau.
  • Nếu sau khi đọc bài viết mà bạn vẫn quyết tâm tạo một trang web thì hãy nhớ làm quen với cú pháp đầy đủ của ngôn ngữ HTML, đồng thời học cách sử dụng các kiểu CSS xếp tầng để thiết kế trang.

    Mọi quản trị viên web mới làm quen nên biết cách tạo trang html, và việc này được thực hiện rất dễ dàng và đơn giản. Tôi có thể tự tin nói với bạn rằng sau khi đọc bài viết này, bạn sẽ tạo trang html mà không gặp bất kỳ khó khăn nào.

    Bạn có thể viết mã html bằng bất kỳ trình soạn thảo văn bản nào (kể cả notepad), nhưng tôi khuyên bạn trước tiên nên sử dụng một trình soạn thảo tuyệt vời như sổ ghi chú++. Nó rất thuận tiện và dễ sử dụng. Bạn có thể tải xuống từ trang web chính thức https://notepad-plus-plus.org.

    Ưu điểm chính của trình soạn thảo này là nó có tính năng tô sáng mã. Tin tôi đi, điều này rất tiện lợi, bởi vì... Bạn có thể thấy ngay vị trí thẻ mở và vị trí đóng.

    Mở chương trình và làm thế nào bạn nhận thấy một tệp mới có tên mới 1, được tạo tự động.


    Các giai đoạn tạo một trang html

    Bây giờ từ tệp mới chúng tôi tạo tài liệu html theo cách sau:
    1. Vào menu file và chọn mục lưu thành… hoặc nhấn phím nóng ( Ctrl+Alt+S)

    2. Trong cửa sổ xuất hiện, chọn vị trí chúng tôi muốn lưu tệp.

    3. Trên cánh đồng tên tập tin chúng tôi viết mục lục và lựa chọn loại tệp Tệp ngôn ngữ đánh dấu siêu văn bản (*html; *htm; *shtml; *shtm; *xhtml;*hta).


    Sau khi được chọn loại tệp,được tự động chèn vào cuối tên tệp


    Đóng Notepad++ và đi tới thư mục đã chỉ định nơi bạn đã lưu tệp. Một tập tin đã được tạo ở đó mục lục với phần mở rộng html và với biểu tượng trình duyệt được cài đặt theo mặc định. Khi bạn nhấp đúp chuột, tệp sẽ mở trong trình duyệt của bạn. Trình duyệt mặc định của tôi là Opera nên tệp đã lưu trông như thế này:

    Sau khi mở file trên trình duyệt, chúng ta không thấy gì vì file của chúng ta trống rỗng, không có một dòng mã html nào trong đó. Hãy khắc phục tình trạng này bằng cách viết một vài dòng mã vào tệp. Để thực hiện việc này, hãy chuyển đến thư mục chứa tệp của chúng tôi, nhấp chuột phải vào tệp đó và chọn mục trong menu xuất hiện .

    Tệp sẽ mở trong trình soạn thảo Notepad++. Bây giờ hãy viết đoạn mã sau vào tệp:

    tập tin html   

    Chào thế giới

    Ngoài ra còn có một cách khác để lưu file, bạn cần nhấn vào biểu tượng đĩa mềm nằm trên thanh công cụ.

    Bài 2.

    Hãy tạo trang html đầu tiên.

    Trong bài học này, bạn sẽ làm theo hướng dẫn của tôi để tạo trang web đầu tiên của mình. Hiện tại, bạn không cần phải tìm hiểu kỹ về loại biểu tượng khó hiểu mà bạn sẽ phải sử dụng. Trong bài học này chúng ta tạo một trang và trong hai bài học tiếp theo chúng ta sẽ hiểu đầy đủ từng ký tự được viết.

    Điều đầu tiên chúng ta làm là tạo một thư mục trên màn hình nền và đặt tên là “Trang web”. Tất cả những sáng tạo tiếp theo của chúng tôi sẽ diễn ra trong thư mục này.

    Bây giờ chúng tôi khởi chạy notepad Notepad ++ mà chúng tôi đã cài đặt. (Nếu bạn chưa thực hiện việc này, đây là hướng dẫn cài đặt). Theo mặc định, chương trình phải nằm trong thư mục /Program Files/Notepad++/ hoặc bạn có thể khởi chạy nó thông qua Start. Mở chương trình và dán đoạn văn bản sau vào đó:

    <html>
    <head>
    <title>Trang web đầu tiên của tôi </title>
    </đầu>
    <body>
    Xin chào! Đây là trang web đầu tiên của tôi!
    </nội dung>
    </html>

    Hầu hết các trang RuNet đều bao gồm các trang html được viết bằng mã hóa UTF-8. Để các trang của chúng tôi được hiển thị chính xác trong trình duyệt, chúng tôi cũng sẽ sử dụng mã hóa này.

    Bây giờ chúng ta cần lưu tệp của mình ở định dạng html.

    Đừng quên rằng Notepad++ là một trình soạn thảo văn bản, có nghĩa là hiện tại chúng ta có một tệp văn bản thông thường với một bộ ký tự. Để trình duyệt của chúng tôi hiển thị trang văn bản mà chúng tôi đã tạo dưới dạng trang web, chúng tôi cần biến nó thành một tệp có phần mở rộng html.

    Để thực hiện việc này, hãy nhấp vào nút “Tệp” ở menu trên cùng, sau đó “Lưu dưới dạng”, chọn thư mục (đường dẫn) nơi tệp sẽ được lưu, lưu nó vào thư mục chúng tôi đã tạo: Desktop/Site/, sau đó quan trọng nhất , hãy chọn loại tệp mong muốn, trong trường hợp của chúng tôi là Ngôn ngữ đánh dấu siêu văn bản (html).


    Chúc mừng! Bạn vừa tạo trang web đầu tiên của mình! Bây giờ bạn có thể vào thư mục "Trang web" và chạy tệp đã tạo. Trang sẽ mở bằng trình duyệt và bạn sẽ thấy rằng thay vì các ký hiệu khó hiểu mà chúng tôi đã chèn, trình duyệt hiển thị thông tin hoàn toàn dễ hiểu trên màn hình.

    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 đượ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 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.

    1. "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" >

    2. "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 có thể 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.