Блог \ Учебник HTML 5. Статья "Создание первой страницы"

22.02.2025

Учебник HTML 5. Статья "Создание первой страницы"

На чтение

3 мин

Дата обновления

10.03.2025

Формат:Самостоятельно с наставником

FullStack-разработчик: тариф PRO

Курс FullStack-разработчик: тариф PRO поможет вам освоить все аспекты разработки веб-приложений, от создания серверной части до работы с интерфейсом. Вы получите практические навыки в популярнейших технологиях, таких как JavaScript, React и Node.js, а также научитесь решать реальные задачи, создавая проекты для своего портфолио. Присоединяйтесь к нам и получите поддержку экспертов, а в конце курса — сертификат, подтверждающий ваши достижения!

143800 ₽359500 ₽

11983 ₽/мес рассрочка

Подробнее

#COURSE##INNER#

Приветствую! Пришло время создать вашу первую страницу с HTML5. Начните с открытия текстового редактора и сохранения нового файла с расширением .html. В этот файл мы будем вводить код HTML.

Первым элементом на странице должен быть , который указывает браузеру, какую версию HTML использовать. Для HTML5 это будет следующее:

Структура HTML-документа

В основе любой HTML-страницы лежит следующая структура:

1. : объявление типа документа (тип HTML, используемый на странице).

2. : открывающий тег для документа HTML, заключающий в себе всю структуру страницы.

3. : необязательный раздел, содержащий метаданные о странице, такие как ее заголовок и описание.

4. :</b> заголовок страницы, отображаемый в браузерной вкладке.</p> <p>5. <b><body>:</b> основной раздел страницы, содержащий видимое пользователю содержимое (текст, изображения, формы и т. д.).</p> <p>6. <b></body>:</b> закрывающий тег раздела <body>.</p> <p>7. <b></html>:</b> закрывающий тег всего документа HTML.</p> <h2>Создание тега</h2> <p>Чтобы создать тег в HTML5, используйте следующую структуру:</p> <p><имя_тега>содержимое</имя_тега></p> <p>Например, чтобы создать тег заголовка h2 с текстом "Моя первая страница", используйте следующий код:</p> <p><h2>Моя первая страница</h2></p> <h2>Создание тега и</h2> <p>Используйте тег <code><i></code>, чтобы выделить текст курсивом.</p> <p>Например:</p> <code><p>Этот текст выделен <em>курсивом</em>.</p></code> <h2>Создание элемента заголовка</h2> Используйте тег <h1> для главного заголовка страницы. Для заголовков меньшего размера используйте теги <h2>, <h3>, <h4>, <h5> и <h6> в порядке убывания. <p>Внутри элемента заголовка можно использовать теги <strong> для выделения ключевых слов или <em> для выделения важной информации.</p> <h2>Добавление абзаца</h2> <p>Для добавления абзаца используйте тег <code><p></code>.</p> <p>Пример:</p> <code><p>Это абзац текста.</p></code> <h2>Сохранение и открытие HTML-страницы</h2> <p><strong>Сохранение:</strong></p> <p>Нажмите "Файл" > "Сохранить как".</p> <p>Выберите место для сохранения и введите имя файла с расширением ".html".</p> <p>Нажмите "Сохранить".</p> <p><strong>Открытие:</strong></p> <p>Откройте проводник файлов или браузер.</p> <p>Перейдите к сохраненному файлу ".html".</p> <p>Дважды щелкните файл в браузере или щелкните правой кнопкой мыши в проводнике и выберите "Открыть с помощью" > "Браузер".</p> <h2>Вопрос-ответ:</h2> <h4>Что такое HTML 5?</h4> <p>HTML 5 (HyperText Markup Language) - это пятая и последняя основная версия языка разметки, используемого для создания веб-страниц. Он предоставляет новые функции и возможности, улучшающие структуру, семантику и внешний вид веб-страниц.</p> <h4></h4> <p></p> <h4></h4> <p></p> <h4>В чем основное отличие HTML 5 от других языков разметки?</h4> <p>Основное отличие HTML 5 от других языков разметки заключается в том, что он не является языком программирования. Вместо этого это язык разметки, который описывает структуру и содержимое веб-страниц. Он не содержит логики или функциональности, а вместо этого фокусируется на представлении информации в организованном и удобочитаемом формате.</p><div class="article-footer"><div class="tags"><a href="/blog/veb-razrabotka/">Веб-разработка</a></div><div class="blog-share"><span>Поделиться:</span><a href="https://vk.com/share.php?url=https%3A%2F%2Fgrseo.ru%2Fblog%2Fveb-razrabotka%2Fuchebnik-html-5-statya-sozdanie-pervoj-stranitsi%2F&title=%D0%A3%D1%87%D0%B5%D0%B1%D0%BD%D0%B8%D0%BA%20HTML%205.%20%D0%A1%D1%82%D0%B0%D1%82%D1%8C%D1%8F%20%22%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5%20%D0%BF%D0%B5%D1%80%D0%B2%D0%BE%D0%B9%20%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D1%8B%22&utm_source=share2" rel="nofollow noopener" target="_blank"><i class="fab fa-vk"></i></a><a href="https://t.me/share/url?url=https%3A%2F%2Fgrseo.ru%2Fblog%2Fveb-razrabotka%2Fuchebnik-html-5-statya-sozdanie-pervoj-stranitsi%2F&text=%D0%A3%D1%87%D0%B5%D0%B1%D0%BD%D0%B8%D0%BA%20HTML%205.%20%D0%A1%D1%82%D0%B0%D1%82%D1%8C%D1%8F%20%22%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5%20%D0%BF%D0%B5%D1%80%D0%B2%D0%BE%D0%B9%20%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D1%8B%22&utm_source=share2" rel="nofollow noopener" target="_blank"><i class="fab fa-telegram"></i></a><a href="viber://forward?text=%D0%A3%D1%87%D0%B5%D0%B1%D0%BD%D0%B8%D0%BA%20HTML%205.%20%D0%A1%D1%82%D0%B0%D1%82%D1%8C%D1%8F%20%22%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5%20%D0%BF%D0%B5%D1%80%D0%B2%D0%BE%D0%B9%20%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D1%8B%22%20https%3A%2F%2Fgrseo.ru%2Fblog%2Fveb-razrabotka%2Fuchebnik-html-5-statya-sozdanie-pervoj-stranitsi%2F&utm_source=share2" rel="nofollow" target="_blank"><i class="fab fa-viber"></i></a><a href="https://api.whatsapp.com/send?text=%D0%A3%D1%87%D0%B5%D0%B1%D0%BD%D0%B8%D0%BA%20HTML%205.%20%D0%A1%D1%82%D0%B0%D1%82%D1%8C%D1%8F%20%22%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5%20%D0%BF%D0%B5%D1%80%D0%B2%D0%BE%D0%B9%20%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D1%8B%22%20https%3A%2F%2Fgrseo.ru%2Fblog%2Fveb-razrabotka%2Fuchebnik-html-5-statya-sozdanie-pervoj-stranitsi%2F&utm_source=share2" rel="nofollow noopener" target="_blank"><i class="fab fa-whatsapp"></i></a></div></div></div></div><div class="pane related-posts"><h4 class="decored-title">Похожие статьи</h4><div class="row"><div class="col-lg-4 mb-4 mb-lg-0"><div class="post-preview"><div class="post-preview-cover"><a href="/blog/veb-razrabotka/12-sovetov-dlya-samostoyatelnogo-sozdaniya-sajtov/"><img src="/upload/iblock/f4b/x3wfk6e0zpp89d0b3whehaw41tegzkc1/kak_organizovat_veb_studiyu_i_postroit_uspeshnyy_biznes_mify_i_oshibki.png"></a></div><div class="post-preview-title"><a href="/blog/veb-razrabotka/12-sovetov-dlya-samostoyatelnogo-sozdaniya-sajtov/">Учебник HTML 5. Статья "Создание первой страницы"</a></div><span>22.02.2025</span></div></div><div class="col-lg-4 mb-4 mb-lg-0"><div class="post-preview"><div class="post-preview-cover"><a href="/blog/veb-razrabotka/bazovaya-struktura-html-dokumenta-startovij-kod/"><img src="/upload/iblock/911/73vsvj1k1zqpncy6ekcn9z7rk9w8zc5p/bazovaya_struktura_html_dokumenta_startovyy_kod.png"></a></div><div class="post-preview-title"><a href="/blog/veb-razrabotka/bazovaya-struktura-html-dokumenta-startovij-kod/">Учебник HTML 5. Статья "Создание первой страницы"</a></div><span>22.02.2025</span></div></div><div class="col-lg-4 mb-4 mb-lg-0"><div class="post-preview"><div class="post-preview-cover"><a href="/blog/veb-razrabotka/kakie-predmeti-nuzhno-sdavat-na-web-dizajnera/"><img src="/upload/iblock/b80/4oq44bsx72f9su0hxajz46y2ethhsaev/veb_dizayn_dlya_nachinayushchih_vse_chto_vam_nuzhno_znat.png"></a></div><div class="post-preview-title"><a href="/blog/veb-razrabotka/kakie-predmeti-nuzhno-sdavat-na-web-dizajnera/">Учебник HTML 5. Статья "Создание первой страницы"</a></div><span>22.02.2025</span></div></div></div></div></div><div class="sidebar"><div class="widget"><h3>Популярные статьи</h3><div class="wiget-grp"><div class="post-tmb"><div class="post-tmb-img"><img src="/upload/iblock/bbe/cuvykju8yzw1phquswsuizvhr93y6t34/kak_ubrat_razmytie_na_foto_8_prostyh_sposobov.png"/></div><div class="post-tmb-cnt"><div class="post-tmb-title"><a href="/blog/fotografiya-i-redaktirovanie-foto/kak-ubrat-razmitie-na-foto-8-prostix-sposobov/">Как убрать размытие на фото | 8 простых способов</a></div><div class="post-tmb-title">22 февраля 2025 г.</div></div></div><div class="post-tmb"><div class="post-tmb-img"><img src="/upload/iblock/bac/otn8c6cyj4ejlfxerseamtx7mmqhi0yt/prodvizhenie_kanala_na_youtube_sekrety_rosta_podpischikov_i_prosmotrov.png"/></div><div class="post-tmb-cnt"><div class="post-tmb-title"><a href="/blog/digital-prodvizhenie/yotube-kanal-kak-sozdat-i-pravilno-prodvinut/">Yotube канал - как создать и правильно продвинуть?</a></div><div class="post-tmb-title">22 февраля 2025 г.</div></div></div></div></div><div class="widget"><h3>Категории</h3><ul class="cat-nav"><li><a href="/blog/avtomatizatsiya-protsessov/">Автоматизация процессов</a></li><li><a href="/blog/akademicheskaya-deyatelnost/">Академическая деятельность</a></li><li><a href="/blog/akademicheskie-issledovaniya/">Академические исследования</a></li><li><a href="/blog/analitika/">Аналитика</a></li><li><a href="/blog/biznes/">Бизнес</a></li><li><a href="/blog/biznes-analitika/">Бизнес-аналитика</a></li><li><a href="/blog/biznes-strategii/">Бизнес-стратегии</a></li><li><a href="/blog/bukhgalterskiy-uchet/">Бухгалтерский учет</a></li><li><a href="/blog/veb-razrabotka/">Веб-разработка</a></li><li><a href="/blog/vostrebovannye-professii/">Востребованные профессии</a></li><li><a href="/blog/vstupitelnye-ekzameny/">Вступительные экзамены</a></li><li><a href="/blog/vysshee-obrazovanie/">Высшее образование</a></li><li><a href="/blog/gibridnoe-obuchenie/">Гибридное обучение</a></li><li><a href="/blog/grafika-i-3d-modelirovanie/">Графика и 3D-моделирование</a></li><li><a href="/blog/dizayn-i-tvorchestvo/">Дизайн и творчество</a></li><li><a href="/blog/dizayn-prezentatsiy/">Дизайн презентаций</a></li><li><a href="/blog/eda-i-kulinariya/">Еда и кулинария</a></li><li><a href="/blog/zdorove-i-meditsina/">Здоровье и медицина</a></li><li><a href="/blog/igrovaya-industriya-i-biznes/">Игровая индустрия и бизнес</a></li><li><a href="/blog/iskusstvennyy-intellekt/">Искусственный интеллект</a></li><li><a href="/blog/iskusstvo-i-kultura/">Искусство и культура</a></li><li><a href="/blog/karernoe-razvitie/">Карьерное развитие</a></li><li><a href="/blog/kognitivnye-nauki/">Когнитивные науки</a></li><li><a href="/blog/korporativnoe-obuchenie/">Корпоративное обучение</a></li><li><a href="/blog/krasota-i-ukhod/">Красота и уход</a></li><li><a href="/blog/kriticheskoe-myshlenie/">Критическое мышление</a></li><li><a href="/blog/kulturnye-issledovaniya/">Культурные исследования</a></li><li><a href="/blog/lichnoe-razvitie-i-psikhologiya/">Личное развитие и психология</a></li><li><a href="/blog/logistika-i-upravlenie/">Логистика и управление</a></li><li><a href="/blog/marketing/">Маркетинг</a></li><li><a href="/blog/massazh-i-kosmetologiya/">Массаж и косметология</a></li><li><a href="/blog/meditsina-i-zdorove/">Медицина и здоровье</a></li><li><a href="/blog/metody-obucheniya/">Методы обучения</a></li><li><a href="/blog/motivatsiya-studentov/">Мотивация студентов</a></li><li><a href="/blog/nalogi/">Налоги</a></li><li><a href="/blog/ne-opredeleno/">Не определено</a></li><li><a href="/blog/obrazovanie/">Образование</a></li><li><a href="/blog/obrazovanie-i-kursy/">Образование и курсы</a></li><li><a href="/blog/obrazovanie-i-obuchenie/">Образование и обучение</a></li><li><a href="/blog/obuchenie-sotrudnikov/">Обучение сотрудников</a></li><li><a href="/blog/onlayn-kursy/">Онлайн-курсы</a></li><li><a href="/blog/onlayn-platformy/">Онлайн-платформы</a></li><li><a href="/blog/oformlenie-nauchnykh-rabot/">Оформление научных работ</a></li><li><a href="/blog/oshibka-nekorrektnyy-otvet-ot-ii/">ОШИБКА Некорректный ответ от ИИ</a></li><li><a href="/blog/postuplenie-v-vuzy/">Поступление в вузы</a></li><li><a href="/blog/prikladnye-distsipliny/">Прикладные дисциплины</a></li><li><a href="/blog/programmirovanie/">Программирование</a></li><li><a href="/blog/prodazhi/">Продажи</a></li><li><a href="/blog/produktovyy-menedzhment/">Продуктовый менеджмент</a></li><li><a href="/blog/professii-i-karera/">Профессии и карьера</a></li><li><a href="/blog/professionalnye-navyki-i-kvalifikatsii/">Профессиональные навыки и квалификации</a></li><li><a href="/blog/psikhologiya/">Психология</a></li><li><a href="/blog/publichnye-vystupleniya/">Публичные выступления</a></li><li><a href="/blog/rukovodstva-i-gaydy/">Руководства и гайды</a></li><li><a href="/blog/saund-dizayn-i-muzyka-v-igrakh/">Саунд-дизайн и музыка в играх</a></li><li><a href="/blog/sistemy-upravleniya/">Системы управления</a></li><li><a href="/blog/spetsialnosti/">Специальности</a></li><li><a href="/blog/testirovanie-i-optimizatsiya-igr/">Тестирование и оптимизация игр</a></li><li><a href="/blog/tekhnicheskie-distsipliny/">Технические дисциплины</a></li><li><a href="/blog/tekhnologii-i-instrumenty/">Технологии и инструменты</a></li><li><a href="/blog/trudovoe-zakonodatelstvo-i-pravo/">Трудовое законодательство и право</a></li><li><a href="/blog/universitetskie-programmy/">Университетские программы</a></li><li><a href="/blog/upravlenie-personalom/">Управление персоналом</a></li><li><a href="/blog/upravlenie-proektami/">Управление проектами</a></li><li><a href="/blog/finansovye-aspekty-igrovoy-industrii/">Финансовые аспекты игровой индустрии</a></li><li><a href="/blog/finansovye-instrumenty/">Финансовые инструменты</a></li><li><a href="/blog/finansovye-strategii/">Финансовые стратегии</a></li><li><a href="/blog/finansy/">Финансы</a></li><li><a href="/blog/fotografiya-i-redaktirovanie-foto/">Фотография и редактирование фото</a></li><li><a href="/blog/tsifrovye-navyki/">Цифровые навыки</a></li><li><a href="/blog/tsifrovye-tekhnologii/">Цифровые технологии</a></li><li><a href="/blog/shakhmaty-i-nastolnye-igry/">Шахматы и настольные игры</a></li><li><a href="/blog/blender-i-3d-grafika/">Blender и 3D-графика</a></li><li><a href="/blog/crm-sistemy/">CRM-системы</a></li><li><a href="/blog/digital-marketing/">Digital-маркетинг</a></li><li><a href="/blog/digital-prodvizhenie/">Digital-продвижение</a></li><li><a href="/blog/django-i-veb-razrabotka/">Django и веб-разработка</a></li><li><a href="/blog/erp/">ERP</a></li><li><a href="/blog/google-sheets/">Google Sheets</a></li><li><a href="/blog/it/">IT</a></li><li><a href="/blog/microsoft-excel/">Microsoft Excel</a></li><li><a href="/blog/nft-i-blokcheyn-v-igrakh/">NFT и блокчейн в играх</a></li><li><a href="/blog/python-i-programmirovanie/">Python и программирование</a></li><li><a href="/blog/unity-i-igrovye-dvizhki/">Unity и игровые движки</a></li></ul></div><div class="side-teaser"><div class="teaser-tags"></div><div class="side-teaser-name">Ландшафтный дизайнер. Расширенный курс</div><div class="side-teaser-cnt">Курс «Ландшафтный дизайнер. Расширенный курс» поможет вам освоить искусство создания уникальных и функциональных ландшафтных пространств, сочетая теорию с практическими заданиями. На протяжении обучения вы получите нужные навыки проектирования и планировки, работы с растительным материалом и создания эко-дизайна. Участвуя в реальных кейсах и работая над проектами для своего портфолио, вы получите поддержку экспертов и сертификат, который подтвердит вашу квалификацию в востребованной профессии!</div><div class="teaser-price"><div class="teaser-price-in">117700 ₽<span>206473 ₽</span></div></div><a class="btn btn-full" href="https://go.avck.ws/d6eae8fba9bdce60?dl=https%3A%2F%2Fnetology.ru%2Fprograms%2Flandshaftnyj-dizajner-ultimate&m=5&erid=LdtCKCxkP" target="_blank">Посмотреть программу</a></div></div></div></div></main><footer class="footer"><div class="footer-top"><div class="container"><div class="row"><div class="col-12 col-sm-4 col-md-4 col-xl-4"><a class="logo-brand" href="/"><span></span>GR SEO</a></div><div class="col-6 col-sm-4 col-md-4 col-xl-4"><div class="foot-item"><div class="foot-title">Контакты</div><p>E-mail: <span></span></p></div></div><div class="col-6 col-sm-4 col-md-4 col-xl-4"><div class="foot-item"><div class="foot-title">Общее</div><p></p></div></div></div></div></div><div class="footer-btm"><div class="container"><span>© 2025</span><script type="text/javascript">(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date(); for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }} k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(100018998, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true });</script><noscript> <div><img src="https://mc.yandex.ru/watch/100018998" style="position:absolute; left:-9999px;" alt="alt"/></div></noscript></div></div></footer><div class="modal modal-wide fade" id="modal-1" tabindex="-1" aria-labelledby="modal-1Label" aria-hidden="true"><div class="modal-dialog modal-dialog-centered"><div class="modal-content"><div class="modal-help"><button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button><div class="modal-help-lft"><span>Поможем подобрать курс</span>чтобы вы получили повышение<br>или новую профессию.</div><div class="modal-help-rht"><div class="modal-form-title">Оставьте заявку, и мы перезвоним</div><form action><div class="form-group"><input class="form-control" type="text" placeholder="Имя"></div><div class="form-group"><input class="form-control" type="tel" placeholder="Телефон"></div><div class="form-group"><input class="form-control" type="email" placeholder="Email"></div><div class="form-check mb-4"><input class="form-check-input" id="agree" type="checkbox"><label class="form-check-label" for="agree">Я соглашаюсь на <a href="#">обработку персональных данных</a></label></div><button class="btn btn-primary btn-full" type="button">Оставить заявку</button></form></div></div></div></div></div><div class="modal modal-simple fade" id="modal-2" tabindex="-1" aria-labelledby="modal-2Label" aria-hidden="true"><div class="modal-dialog modal-dialog-centered"><div class="modal-content"><button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button><div class="modal-title">Узнайте какая профессия вам подходит</div><p class="text-center">Пройдите тест - это займет не больше 10 минут</p><form action><div class="form-group"><input class="form-control" type="text" placeholder="Имя"></div><div class="form-group"><input class="form-control" type="email" placeholder="Email"></div><div class="form-check mb-4"><input class="form-check-input" id="agree1" type="checkbox"><label class="form-check-label" for="agree1">Я соглашаюсь на <a href="#">обработку персональных данных</a></label></div><button class="btn btn-primary btn-full" type="button">Пройти тест</button></form></div></div></div><svg width="0" height="0" style="display: none;"><symbol id="prev" viewBox="0 0 24 24" fill="none"><path d="M15 6L9 12L15 18" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></symbol><symbol id="next" viewBox="0 0 24 24" fill="none"><path d="M9 6L15 12L9 18" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></symbol></svg><script src="/js/jquery.min.js"></script><script src="/js/bootstrap.bundle.min.js"></script><script src="/js/slick.min.js"></script><script src="/js/init.js"></script></body></html>