Учебник по HTML Hello World

HTML-учебник Hello World

В этом уроке вы узнаете, как создать простую привет-мировую страницу с HTML. Во-первых, давайте объясним некоторые основы HTML.

HTML означаетHyperTextMarkupLanguage
HTML - это текстовый файл, который состоит из набора тегов разметки, например ( ).
Почти все теги разметки имеют начальный тег и закрывающий тег . Закрывающий тег начинается с «/».
Теги разметки подобны команде, которая сообщает веб-браузеру (Firefox или Internet Explorer), что следует делать.
Файл HTML должен иметь расширение htm или html.
HTML-файл не чувствителен к регистру. , или являются одним и тем же тегом.
HTML-файл можно редактировать с помощью любого текстового редактора, такого как блокнот или WordPad в Windows, VI или Emacs в Unix или Linux.

Шаги по созданию HTML-страницы

Давайте начнем создавать классический HTML-файл «Hello world».

1. Текстовый редактор

Откройте ваш любимый текстовый редактор, например Блокнот. Создайте пустой текстовый файл.

2. HTMP код

Скопируйте и вставьте следующий HTML-код в ваш новый открытый текстовый файл.


This is title

Hello world

html-tutorial-hello-world-notepad

3. Сохрани это

Нажмите Файл, сохраните его с расширением файла HTML, например, «anynameyoulike.ru».

html-tutorial-hello-world-save-as

4. Demo

Дважды щелкните, чтобы просмотреть его. (Или откройте недавно сохраненный HTML-файл в своем браузере).

html-tutorial-hello-world-view-it

Объяснение кода

tag is tell internet browser this file is a start and end of the HTML file document.
Текст между тегом
предназначен для информации заголовка HTML, которая не отображается в интернет-браузере.
Текст между </ title> будет отображаться в левом верхнем углу интернет-браузера, это заголовок веб-страницы. </p> </li> <li> <p>Текст между <body> </ body> будет отображаться как контент в интернет-браузере. </p> </li> </ol> </div> </div> </div> </div></body></html></div> <div class="row pl-3 mb-3">  <div class="a2a_kit a2a_kit_size_32 a2a_default_style"> <a class="a2a_button_facebook"></a> <a class="a2a_button_tumblr"></a> <a class="a2a_button_pinterest"></a> <a class="a2a_button_pocket"></a> <a class="a2a_button_evernote"></a> <a class="a2a_button_twitter"></a> <a class="a2a_button_line"></a> <a class="a2a_button_email"></a> <a class="a2a_button_reddit"></a> <a class="a2a_button_digg"></a> <a class="a2a_button_vk"></a> <a class="a2a_dd" href="https://www.addtoany.com/share"></a> </div> <script> var a2a_config = a2a_config || {}; a2a_config.onclick = 1; </script> <script async src="https://static.addtoany.com/menu/page.js"></script>  </div> </article> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-7450216517803275" data-ad-slot="2842159643"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="col-12 col-lg-3"> <div class="card my-4 ad-sidebar"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-7450216517803275" data-ad-slot="8195814284" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="card my-4 ad-sidebar"> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-7450216517803275" data-ad-slot="8195814284" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="card my-4 sticky-top"> <h5 class="card-header">Related</h5> <div class="card-body p-2"> <ul class="list-group list-group-flush"> <li class="list-group-item p-2"> <a href=/ru/article/spring-boot__spring-boot-hello-world-example-mustache> Пример Spring Boot Hello World - усы </a> </li> <li class="list-group-item p-2"> <a href=/ru/article/webservices__jax-ws__jax-ws-hello-world-example-document-style> Пример JAX-WS Hello World - Стиль документа </a> </li> <li class="list-group-item p-2"> <a href=/ru/article/servlet__a-simple-servlet-example-write-deploy-run> Простой пример сервлета - (написать, развернуть, запустить) </a> </li> <li class="list-group-item p-2"> <a href=/ru/article/webservices__jax-rs__jersey-hello-world-example> Пример Привет мир Джерси </a> </li> <li class="list-group-item p-2"> <a href=/ru/article/jsf2__primefaces__primefaces-hello-world-example> Пример PrimeFaces Привет, мир </a> </li> <li class="list-group-item p-2"> <a href=/ru/article/elasticsearch__elasticsearch-hello-world-example> Пример ElasticSearch Hello World </a> </li> <li class="list-group-item p-2"> <a href=/ru/article/jquery__jquery-hello-world> jQuery Hello World </a> </li> <li class="list-group-item p-2"> <a href=/ru/article/spring-mvc__spring-mvc-hello-world-annotation-example> Пример аннотации Spring MVC hello world </a> </li> <li class="list-group-item p-2"> <a href=/ru/article/spring-mvc__gradle-spring-4-mvc-hello-world-example-annotation> Gradle - Spring 4 MVC Пример Hello World - Аннотация </a> </li> <li class="list-group-item p-2"> <a href=/ru/article/spring-mvc__spring-mvc-hello-world-example> Весенний MVC привет, пример мира </a> </li> <li class="list-group-item p-2"> <a href=/ru/article/java__how-to-convert-java-source-code-to-html-page> Как конвертировать исходный код Java в HTML-страницу </a> </li> <li class="list-group-item p-2"> <a href=/ru/article/java__how-to-convert-html-to-javascript-js-in-java> Как конвертировать HTML в Javascript (.js) в Java </a> </li> <li class="list-group-item p-2"> <a href=/ru/article/regular-expressions__how-to-validate-html-tag-with-regular-expression> Как проверить HTML-тег с помощью регулярного выражения </a> </li> <li class="list-group-item p-2"> <a href=/ru/article/javascript__how-to-get-element-by-name-in-html-getelementsbyname> Как получить элемент по имени в HTML - getElementsByName </a> </li> <li class="list-group-item p-2"> <a href=/ru/article/web-development__remember-declared-the-doctype-in-your-web-page> Помните, объявил DOCTYPE на вашей веб-странице </a> </li> <li class="list-group-item p-2"> <a href=/ru/article/html__html-color-tutorial> HTML Color Tutorial </a> </li> <li class="list-group-item p-2"> <a href=/ru/article/html__html-font-tutorial> Учебник по шрифту HTML </a> </li> <li class="list-group-item p-2"> <a href=/ru/article/regular-expressions__how-to-extract-html-links-with-regular-expression> Как извлечь HTML-ссылки с регулярным выражением </a> </li> <li class="list-group-item p-2"> <a href=/ru/article/html__html-elements> Элементы HTML </a> </li> </ul> </div> </div> </div> </div> </div> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.9/styles/androidstudio.min.css"> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.9/highlight.min.js"> </script> <script>hljs.initHighlightingOnLoad();</script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.4.2/tocbot.min.js"></script> <link rel="stylesheet" type="text/css" href="/static/toc.css"> <script> tocbot.init({ // Where to render the table of contents. tocSelector: '.content-toc', // Where to grab the headings to build the table of contents. contentSelector: '.content', // Which headings to grab inside of the contentSelector element. // For headings inside relative or absolute positioned containers within content. hasInnerContainers: true, }); </script> <footer class="py-5 bg-dark"> <div class="container text-white"> <p > DMCA: dmca#codeflow.stie </p> Copyright ©<span> 2024</span> </div> </footer> </body> </html>

TOC