Создание web сайта на языке html: Практическая работа по информатике «Создание Web-сайта на языке HTML» (11 класс)

Содержание

создание Web –сайта на языке HTML»

Я не знаю большей красоты, чем здоровье.
(Г. Гейне)

Практическая работа №5

Тема: «Интернет: создание Web –сайта на языке HTML»

Цель:

Образовательные

знакомство с элементами и структурой HTML документа;

освоение приемов создания Web-страницы на языке HTML;

научиться выполнять форматирование созданных Web-страниц;

закрепить технологические навыки работы с компьютером;

Развивающие

способствовать развитию познавательного интереса у учащихся;

способствовать развитию творческой активности учащихся;

развивать наглядно-образное мышление, память и умение сравнивать и анализировать;

Воспитательные

воспитывать новые методы деятельности в процессе обучения школьников, предполагающие использование здоровьесберегающих технологий на уроках;

способствовать культурному и интеллектуальному развитию учащихся;

воспитание информационной культуры учащихся, внимательности, аккуратности.

Оборудование: ПК, мультимедийных проектор, экран.

Программное обеспечение: операционная система Windows ХР, браузер Internet Explorer или Mozilla Firefox, стандартное приложение Блокнот, графические изображения.

Ход работы.

Организационный момент.

Приветствие. Здравствуйте ребята! Сегодня у нас не обычный урок. Сегодня мы с вами будем учиться создавать продукт, который является основным элементом, или можно сказать структурным «атомом» сети Интернет. А именно – Web-странички и сайты.

Актуализация знаний.

В наше время разработка сайта является одним из главных атрибутов многих предприятий, которые работают не только в Интернете. Практически все компании, которые занимаются продажами и рекламой товара стремятся к тому, чтобы присутствовать во всемирной паутине.

Грамотно разработанный сайт может стать хорошим методом распространения информации о предприятии.

Так вот знания и навыки по созданию и раскрутке сайтов в ближайшем будущем будут наиболее востребованы в мире. А Интернет дает возможность распространять свою деятельность на всю нашу планету. А это означает, что где бы вы не находились, вы можете быть полезны и зарабатывать. Для этого вам нужен более-менее современный компьютер и Интернет.

Содержательная часть.

Теоретическая часть.

Для проверки домашнего задания, я предлагаю вам пройти тест. Приложение 1

По окончанию тестирования, предлагаю вам подвести итог и снять усталость. Дети встают, листочки с тестовыми заданиями лежат на столе. Учитель называет правильную букву ответа. Тот, кто ответил правильно, поднимает обе руки вверх и тянется к потолку, тот кто ответил не правильно разводит руки в стороны и делает повороты туловища вправо-влево. Сосед по парте, на листике с тестовым заданием, ставит «+», если ответ правильный, и «–», если ответ не верный. Подсчитывает количество баллов. Теперь предлагаю вам сесть за компьютеры и приступить к выполнению практического задания

Практическая часть

Инструктаж по ТБ

Цель работы: освоение приемов создания Web-страниц и Web-сайтов на языке HTML: знакомство с элементами HTML и структурой HTML-документа; управление форматами текста и шрифтами; организация гиперсвязей между документами.

Инструктаж по ТБ

Создание WEB-страницы по предложенному материалу

В папке Женева находится текстовый файл «Женева», в котором дается небольшая информация об этом городе и файл картинки «Женева», с изображением самого города.

Создайте в Блокноте WEB-страницу, содержащую этот текст под названием ЖЕНЕВА

Вставить картинку города, расположив ее посередине перед текстом .

3. Выделите в тексте 3 абзаца:

1-ый абзац – цвет шрифта — красный, размер шрифта = 5

2-ой — цвет шрифта — синий, размер шрифта = 3

3-ий – цвет шрифта — зеленый, размер шрифта = 4

Предполагаемый результат.

Физкультминутка

Снятие зрительного напряжения.

Снятие физического и умственного напряжения. Приложение 2

б) Создание сайта

В папке ГОРОСКОП дан WEB-сайт «ГОРОСКОП» для трех знаков зодиака, состоящий из 4-х WEB-страниц.

Создать гиперссылки:

А) с первой страницы сайта на другие страницы сайта

Б) с каждой страницы сайта на главную.

Предполагаемый результат.

Заключительная часть.

Итак, наш урок-конкурс завершен. Подведем итоги. Вы хорошо подготовились к уроку, показали свои знания и умения. На самом деле вы все сегодня молодцы, потому что научились создавать простейшие Web-страницы и сайты. Знания и умения, которые вы получили на уроке, пригодятся вам в жизни, они являются востребованными в современном обществе.

И в заключении хотелось бы добавить: здоровье нельзя улучшить, его можно только сберечь! Берегите себя!

Оценить работу на уроке.

Домашнее задание. Прочитать §29. Ответить на вопросы письменно стр. 163 (5,6)

Создание Web-сайта. Технологии создания сайтов

Похожие презентации:

Проблема. Мне бы хотелось найти друзей

Cloud and Mobile technology

Анализ воздействия социальных сетей на формирование зависимого поведения у молодежи

Облачные технологии

Киберспорт

Основы web-технологий. Технологии создания web-сайтов

Веб-дизайн

Социальная сеть Facebook

Системы телекоммуникации

Новый Пульт ГрузовичкоФ

1. Создание Web-сайта Технологии создания сайтов

Выполнила: Хайруллина З.З.

2. Установите соответствие между определением и изображением внутреннего устройства компьютера

• Процессор- мозг системного блока, выполняет
логические операции. От его скорости, частоты во
многом зависит быстродействие компьютера и вся
его архитектура.
• Материнская плата- основная часть системного
блока, к которой подключены все устройства
системного блока.

Через материнскую плату
происходит общение устройств системного блока
между собой, обмен информацией, питание
электроэнергией.
• Оперативная память- память для временного
хранения данных в компьютере, используется
только тогда, когда компьютер работает.
• Сетевая карта- плата, устройство, устанавливается
в материнскую плату или встроено в нее. Сетевая
карта служит для соединения компьютера с другими
компьютерами по локальной сети или для
подключения сети Интернет.
• Видеокарта-плата внутри системного блока,
предназначенная для связи системного блока и
монитора, передает изображение на монитор и
берет часть вычислений по подготовке изображения
для монитора на себя. От видеокарты зависит
качество изображения.
• Жесткий диск- служит для длительного хранения
информации, на нем расположены программы,
необходимые для работы компьютера.
1.С помощью обычного текстового редактора,
например Блокнот. При этом web-страница
полностью создается вручную, путем вставки в
требуемый текст необходимых тегов – команд языка
разметки web-документов HTML.

Это самый
трудоемкий и отнимающий много времени способ. Но
благодаря этому способу вы сможете сделать любые
странички и воплотить все свои фантазии.
2.HTML- редакторы. Это уже специальная программа с помощью которых
создаются web-страницы. Обычно работа в них также производится с
текстом HTML- документа, но предусматривает ряд инструментов,
позволяющих автоматически вставлять в текст соответствующие теги.
Такая программа- хороший помощник, намного ускоряющий создание
страниц, но при работе с ней также необходимо знание основ языка HTML.
3.WYSIWYG – редакторы (например MicrosoftFrontPage) специальные
программы для создания web-страниц и сайтов. Позволяют создать webстраницы, даже не имея никого понятия о языке HTML. Однако если
случится какой- либо сбой, найти ошибку, не зная основ HTML, очень
сложно. Другим недостатком этих редакторов является громоздкость
созданных с их помощью HTML-документов. В результате объем
документа сильно увеличивается, следовательно, увеличивается время
загрузки страницы.

7. Советы начинающим

• Никогда не называйте файлы web-страниц русскими именами.
• Желательно в именах файлов всегда использовать строчные
буквы. Например, лучше назвать foto.jpg, а не FOTO.JPG или
Foto.jpg.
• Удобочитаемость текста зависит от: используемого шрифта,
длины строки, контрастности цветов теста и фона, соотношение
теста и пустого пространства на странице, а также от размера
шрифта. Избегайте использование курсива при небольшом
размере шрифта. Не пишите основной текст, а также заголовки
прописными буквами. Если в тексте предусмотрены гиперссылки,
старайтесь не использовать в тексте подчеркивание.
Приспосабливайте текст для беглого просмотра и поиска
информации: создавайте больше подзаголовков, формируйте
наиболее важные идеи в начале параграфа и используйте
маркированные списки.
Фрейм – это обособленная область webдокумента со своими полосами прокрутки. С
помощью фреймов web-страница разделяется
на несколько независимых областей.

English Русский Правила

Что HTML используется для создания?

Для чего используется HTML?

HTML, что означает Язык гипертекстовой разметки , используется для создания структурированных текстов и создания веб-страниц в Интернете.
Теги — это специальные коды в документах HTML, которые обозначаются угловыми скобками.
Каждый HTML-документ начинается с тега \ , а заканчивается тегом \
.
Указанная выше веб-страница была полностью создана с помощью HTML и CSS . Структура страницы обеспечивается HTML, а визуальное и звуковое оформление обеспечивается CSS для различных устройств. HTML и CSS являются строительными блоками для создания веб-страниц и веб-приложений.

Синтаксис HTML:

  

<голова>
    <мета-кодировка="UTF-8">
     Синтаксис HTML 

<тело>
  . ..

Что такое HTML?

HTML (язык гипертекстовой разметки) — это компьютерный язык, который используется для создания большинства веб-страниц и онлайн-приложений. Язык разметки — это набор символов, сообщающих веб-серверам о стиле и структуре документа, а гипертекст — это часть текста, которая ссылается на другие части текста.

Он позволяет веб-пользователям использовать компоненты, теги и атрибуты для создания и организации разделов, абзацев и ссылок. Однако HTML не считается языком программирования, поскольку он не может развивать динамические функции.

HTML имеет множество применений, в том числе:

Разработка веб-сайтов: HTML используется для создания веб-страниц, которые отображаются в Интернете. Код HTML используется разработчиками для определения того, как браузеры отображают элементы веб-страницы, такие как текст, гиперссылки и мультимедийные файлы.
Интернет-навигация: HTML широко используется для встраивания гиперссылок, чтобы пользователи могли просто перемещаться и вставлять ссылки между похожими страницами и веб-сайтами.
Веб-документация:
HTML похож на Microsoft Word, который позволяет упорядочивать и форматировать документы.

Анатомия элемента HTML

Основные компоненты нашего элемента следующие:

Компонент	Описание
Открывающий тег:	Он состоит из названия элемента, окруженного открывающими скобками (в данном случае p). Это указывает, где элемент начинается или начинает действовать.
Закрывающий тег:	Закрывающий тег похож на открывающий, за исключением того, что он содержит косую черту перед именем элемента. Указывает конец элемента. Одна из самых распространенных ошибок новичков — это отсутствие закрывающего тега, что может привести к странным результатам.
Содержимое:	Это содержимое элемента, в нашем случае это просто текст.
Элемент:	Состоит из открывающего тега, закрывающего тега и содержимого.

Элементы также могут иметь следующие атрибуты:

Атрибуты — это дополнительные сведения об элементе, которые не должны отображаться в содержимом. Здесь атрибут имя — это класс , а значение атрибута — имя-человека . Атрибут класса позволяет присвоить элементу неуникальный идентификатор, который затем можно использовать для нацеливания на него (и любые другие элементы с тем же значением класса) с информацией о стиле и другой информацией.

В атрибуте всегда должно присутствовать следующее:

Между ним и именем элемента (или предыдущим атрибутом, если у элемента уже есть один или несколько атрибутов) должен быть пробел.
За именем атрибута следует знак равенства.
Значение атрибута заключено в кавычки, как открытые, так и закрытые.

Примечание. Значения простых атрибутов, которые не содержат пробелов ASCII (или любых символов » ‘ ` = < >), можно не заключать в кавычки, хотя рекомендуется заключать все значения атрибутов в кавычки, чтобы сделать код более последовательным и ясно

Вложенные элементы

Вы также можете вкладывать элементы внутрь других элементов, что называется вложением. Если бы мы хотели сказать, что мое полное имя — Шах Хан, мы могли бы окружить слово Шах элементом , что означает, что фраза должна быть сильно подчеркнута:

   Мое полное имя  Шах  Хан.

Однако вы должны убедиться, что ваши элементы правильно вложены друг в друга. В предыдущем примере мы сначала открыли элемент

, а затем элемент ; поэтому мы должны сначала закрыть элемент , а затем элемент
. Следующее утверждение неверно:

Мое полное имя Шах Хан.

Пустые элементы
Некоторые элементы не содержат содержимого, известное как пустых элементов . Рассмотрим элемент :

Содержит два атрибута, но без закрывающего тега и без внутреннего содержимого. Это связано с тем, что элемент изображения не инкапсулирует содержимое, чтобы воздействовать на него. Его функция заключается в том, чтобы встроить изображение в HTML-страницу, где оно появляется.
Базовая веб-страница, написанная на HTML

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

<голова> <мета-кодировка="UTF-8"> Искусство и ремесла Дасмото <тело> <голова>
Искусство и ремесла Дасмото
<дел>
Кисти

Кисти для ножовки

Изготовленные из дуба высочайшего качества кисти для ножовки известны своим весом и способностью удерживать большое количество краски. Доступны разные размеры.
От 3 долл. США за кисть.

<дел>
Кадры

Арт-рамки (ассорти)

Рамки в ассортименте из разных материалов, включая МДФ, березу и ПДЭ. Некоторые рамы можно отшлифовать и покрасить в соответствии с вашими потребностями.
Начиная с 2 долл. США за кадр.

<дел>
Рисовать

Чистая финская краска

Краска импортная из Финляндии. В магазине доступно более 256 цветов в разном количестве (от 1 до 8 унций). Чистая финская краска прилипает к холсту, улучшая внешний вид и долговечность любого произведения искусства.
Начиная с 5 долл. США за тюбик.

Вывод приведенного выше кода:
Описание каждого тега
Тег Описание
Doctype — это декларация HTML-документа, записанная в браузере. В файле HTML это объявление появляется в первой строке.
… Этот элемент включает в себя весь материал на странице и иногда называется корневым элементом.
… Элемент вставляется между тегами и и является контейнером для метаданных (информации о данных). Метаданные — это информация о HTML-документе. Метаданные не отображаются. Метаданные часто определяют заголовок документа, набор символов, стили, скрипты и другую метаинформацию.
Элемент charset определяет кодировку символов документа HTML. Спецификация HTML5 поощряет веб-разработчиков использовать набор символов UTF-8, который содержит почти все знаки и символы мира!
… Тег указывает заголовок документа HTML. Он изменяет заголовок панели инструментов браузера.<img class="lazy lazy-hidden" loading='lazy' src="//schtirlitz.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/cf2.ppt-online.org/files2/slide/7/72YgUqHukbBxmW8NDVrCTF15Pj0Lw6Kf4oGyZn/slide-77.jpg' /><noscript><img loading='lazy' src='/800/600/http/cf2.ppt-online.org/files2/slide/7/72YgUqHukbBxmW8NDVrCTF15Pj0Lw6Kf4oGyZn/slide-77.jpg' /></noscript> Когда веб-страница добавляется в избранное, она предлагает заголовок. Отображает заголовок страницы в результатах поиска.</td><center><ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-1812626643144578" data-ad-slot="3076124593" data-ad-format="auto" data-full-width-responsive="true"></ins> <script>(adsbygoogle=window.adsbygoogle||[]).push({});</script></center></tr><tr><td> <strong><body>…<script defer src="https://schtirlitz.ru/wp-content/cache/autoptimize/js/autoptimize_65fc3aabbe3134b862f6f8c3f2077df8.js"></script></body> </strong></td><td> Тело документа определяется тегом<body>. Элемент<body> включает в себя все содержимое HTML-документа, включая заголовки, абзацы, графику, гиперссылки, таблицы, списки и т. д.</td></tr><tr><td> <strong><div>…</div> </strong></td><td> Это тег разделения, который используется в HTML для создания разделов контента на веб-странице, например (текст, изображения, верхний и нижний колонтитулы, панель навигации). , и т. д.). Тег div чаще всего используется в веб-разработке, поскольку он позволяет нам разделять данные на веб-страницах и создавать отдельные разделы для определенных данных или функций.</td></tr><tr><td> <strong> <a href="#">…</a> </strong></td><td> Тег <a> определяет гиперссылку, которая используется для соединения двух страниц. Атрибут href является наиболее важным атрибутом элемента <a>, который указывает место назначения ссылки.<img class="lazy lazy-hidden" loading='lazy' src="//schtirlitz.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/uxpapa.ru/wp-content/uploads/2019/03/sozdanie-saytov-samostoyatelno-5.jpg' /><noscript><img loading='lazy' src='/800/600/http/uxpapa.ru/wp-content/uploads/2019/03/sozdanie-saytov-samostoyatelno-5.jpg' /></noscript></td></tr><tr><td> <strong><p>…</p> </strong></td><td> Тег<p> определяет абзац. Все, что упоминается между<p> и</p>, считается абзацем. Большинство браузеров воспринимают строку как абзац, даже если мы не используем закрывающий тег, т. е.</p>, что может привести к неожиданным результатам. В результате использование закрывающего тега является одновременно хорошим соглашением и требованием.</td></tr><tr><td> <strong><h2><span class="ez-toc-section" id="i-11">…</span></h2>,<h3><span class="ez-toc-section" id="i-12">…</span></h3>,<h4><span class="ez-toc-section" id="i-13">…</span></h4> </strong></td><td> Элемент заголовка подразумевает все изменения шрифта, разрывы абзаца до и после заголовка, а также любые пробелы, необходимые для отображения заголовка. h2, h3, h4, h5, h5 и h6 — компоненты заголовка, где h2 — самый высокий (или самый важный) уровень, а h6 — самый низкий.</td></tr></tbody></table><h3 level="2"><span class="ez-toc-section" id="_HTML-5"> Приложения HTML </span></h3><ol><li><p> <strong> Разработка веб-страниц </strong> HTML используется для создания веб-страниц, которые отображаются в Интернете. Каждая страница имеет набор тегов HTML, включая гиперссылки, ведущие на другие страницы.<img class="lazy lazy-hidden" loading='lazy' src="//schtirlitz.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/images.myshared.ru/6/731501/slide_5.jpg' /><noscript><img loading='lazy' src='/800/600/http/images.myshared.ru/6/731501/slide_5.jpg' /></noscript> Каждая веб-страница, которую мы видим в Интернете, написана в той или иной форме HTML-кода.</p></li><li><p> <strong> Создание веб-документа </strong> HTML и его основные концепции с помощью тегов и DOM, то есть объектная модель документа, доминируют при создании документов в Интернете. Теги HTML добавляются до и после предложений, чтобы определить их формат и расположение на странице. Заголовок, заголовок и тело — это три раздела веб-документа. Название и любые другие значимые ключевые слова включаются в заголовок документа. Заголовок браузера можно просмотреть, а основной раздел веб-сайта является основной частью веб-сайта, доступной для зрителя. Все три сегмента разработаны и сгенерированы с использованием элементов HTML. Каждый раздел имеет свой собственный набор тегов, которые отображаются специально для поддержки концепций заголовка, заголовка и основной части в цикле.</p></li><li><p> <strong> Интернет-навигация </strong> Это одно из самых важных и революционных применений HTML.<img class="lazy lazy-hidden" loading='lazy' src="//schtirlitz.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/images.myshared.ru/4/87887/slide_54.jpg' /><noscript><img loading='lazy' src='/800/600/http/images.myshared.ru/4/87887/slide_54.jpg' /></noscript> Эта навигация стала возможной благодаря использованию идеи гипертекста. По сути, это текст, который ссылается на другие веб-сайты или текст, и когда пользователь нажимает на него, пользователь перенаправляется на указанный текст или веб-сайт. HTML широко используется для встраивания гиперссылок на онлайн-страницы. Пользователи могут просто перемещаться между веб-страницами и веб-сайтами, размещенными на разных серверах.</p></li><li><p> <strong> Режущая кромка </strong> HTML5 с его стандартами и API используется для внедрения некоторых из самых последних тенденций в индустрии создания веб-сайтов. Например, библиотеки Polyfill одинаково хорошо поддерживаются устаревшими браузерами. Modernizr — это пакет JavaScript, который может обнаруживать характеристики, позволяющие разработчику динамически загружать библиотеки полифиллов по мере необходимости.</p></li><li><p> <strong> Адаптивные изображения на веб-страницах </strong> HTML используется для создания веб-страниц с адаптивными изображениями, которые отображаются в Интернете.<img class="lazy lazy-hidden" loading='lazy' src="//schtirlitz.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/luxe-host.ru/wp-content/uploads/8/f/6/8f67f7c927954973721bbb739c5c226a.jpeg' /><noscript><img loading='lazy' src='/800/600/http/luxe-host.ru/wp-content/uploads/8/f/6/8f67f7c927954973721bbb739c5c226a.jpeg' /></noscript> Запросы в HTML-приложениях можно настроить на использование адаптивных изображений на самом базовом уровне. Разработчик может полностью контролировать то, как пользователь отображает изображение, комбинируя атрибут srcset элемента img в HTML с элементами изображения. Элемент img теперь может загружать несколько видов изображений разного размера. Элемент изображения упрощает определение правил; мы можем объявить элемент img с источником по умолчанию, а затем указать источник для каждого условия.</p></li><li><p> <strong> Хранилище на стороне клиента </strong> Раньше пользователь не мог сохранять данные браузера, которые сохранялись бы между сеансами. Для выполнения этого требования можно использовать либо серверную инфраструктуру, либо пользовательские файлы cookie. Хранилище на стороне клиента возможно с HTML5 благодаря localStorage и IndexDB. Каждая из этих двух стратегий имеет собственный набор стандартов и характеристик. localStorage предоставляет хранилище хеш-таблиц на основе строк.<img class="lazy lazy-hidden" loading='lazy' src="//schtirlitz.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/hosting27.ru/pics/osobennosti-razrabotki-veb-sayta.jpg' /><noscript><img loading='lazy' src='/800/600/http/hosting27.ru/pics/osobennosti-razrabotki-veb-sayta.jpg' /></noscript> Его API прост, разработчики имеют доступ к операциям setItem, getItem и removeItem. С другой стороны, IndexDB — это более обширное и превосходное хранилище данных на стороне клиента. База данных IndexDB может быть расширена с разрешения пользователя.</p></li><li><p> <strong> Использование автономных возможностей </strong> После того как данные сохранены в браузере, разработчик может придумать способ, чтобы программа продолжала работать, даже когда пользователь отключен. HTML5 имеет механизм кэширования приложений, который определяет, как браузер обрабатывает офлайн-ситуации. Кэш приложения, отвечающий за работу в автономном режиме, состоит из нескольких компонентов, таких как методы API для создания обновления, чтения файла манифеста и событий. Разработчик может использовать атрибут HTML5, чтобы определить, находится ли приложение в сети. В файле манифеста кэша приложения веб-сайта разработчик также может указать, какой браузер обрабатывает ресурсы для автономного использования.<img class="lazy lazy-hidden" loading='lazy' src="//schtirlitz.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/images.myshared.ru/17/1121371/slide_7.jpg' /><noscript><img loading='lazy' src='/800/600/http/images.myshared.ru/17/1121371/slide_7.jpg' /></noscript> На автономные ресурсы также можно ссылаться в файле манифеста.</p></li><li><p> <strong> Поддержка ввода данных с HTML </strong> Стандарт HTML5 и набор API могут помочь при вводе данных. Поскольку новые стандарты HTML5 внедряются в браузеры, разработчики могут просто добавлять теги к тегу, указывая обязательные поля, содержимое, формат данных и т. д. HTML5 принес несколько новых технологий, обеспечивающих работу экранной клавиатуры, проверки и других возможностей ввода данных. , что позволяет конечным пользователям более эффективно вводить данные.</p></li><li><p> <strong> Использование для разработки игр </strong> До появления HTML5 разработка игр ограничивалась Flash и Silverlight. Поскольку браузеры поддерживают новые спецификации HTML5, такие как CSS3 и сверхбыстрый движок JavaScript, обеспечивающие новый богатый опыт, HTML5 может сделать реальностью разработку игр, которая раньше была прерогативой Flash и Silverlight.</p></li><li><p> <strong> Использование собственных API для расширения веб-сайта </strong> HTML5 представляет ряд новых возможностей и инструментов, которые ранее были невообразимы.<img class="lazy lazy-hidden" loading='lazy' src="//schtirlitz.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/images.myshared.ru/17/1121371/slide_18.jpg' /><noscript><img loading='lazy' src='/800/600/http/images.myshared.ru/17/1121371/slide_18.jpg' /></noscript> Множество новых API-интерфейсов для файловых систем, геолокации, перетаскивания, обработки событий, клиентского хранилища и т. д. делают использование HTML5 проще, чем когда-либо прежде. Другие API, такие как полноэкранный режим, видимость и захват мультимедиа, можно использовать для улучшения работы приложения.</p></li></ol><h3 level="2"><span class="ez-toc-section" id="i-14"> Заключение </span></h3><ul><li> <strong> HTML (язык гипертекстовой разметки) </strong> используется для организации, структурирования и отображения контента на веб-странице.</li><li> HTML — это язык разметки. Языки разметки <strong> не совпадают с языками программирования </strong> . Языки программирования позволяют нам манипулировать данными, а языки разметки определяют, как элементы отображаются на веб-странице.</li><li> Каждая HTML-страница содержит набор HTML-элементов, включая теги и атрибуты. Компоненты HTML являются основой веб-страницы. Тег сообщает веб-браузеру, где начинается и заканчивается элемент, тогда как атрибут описывает свойства элемента.<img class="lazy lazy-hidden" loading='lazy' src="//schtirlitz.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/tmpromotop.ru/pics/389700.jpg' /><noscript><img loading='lazy' src='/800/600/http/tmpromotop.ru/pics/389700.jpg' /></noscript></li></ul><h2><span class="ez-toc-section" id="_HTML-6"> Основы создания ссылок HTML — инженерно-технические услуги </span></h2><p><h3><span class="ez-toc-section" id="i-15"> Обзор </span></h3></p><p> Ссылка на текст или изображение на веб-странице позволяет вашим зрителям переходить с одной страницы на другую.</p><p> Все ссылки на странице будут иметь отличительный внешний вид, если это не будет переопределено браузером или с помощью каскадных таблиц стилей (CSS). Под текстом ссылки будет подчеркивание, обычно оно синего цвета. Также можно поставить <code> <a> </code> тег вокруг тега изображения, чтобы сделать это изображение ссылкой.</p><p data-readability-styled="true"> <code> <strong> <a> </strong> </code></p><p> Ссылка (или гиперссылка, как ее еще называют) создается с помощью специального тега <code> <a> </code>, называемого «якорем». Он требует закрывающего тега и используется для выделения текста или содержимого HTML, которые должны быть связаны на странице. Тег <code> <a> </code> также можно использовать для обозначения раздела веб-страницы в качестве цели для перехода по другой ссылке.<img class="lazy lazy-hidden" loading='lazy' src="//schtirlitz.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/images.myshared.ru/17/1121371/slide_2.jpg' /><noscript><img loading='lazy' src='/800/600/http/images.myshared.ru/17/1121371/slide_2.jpg' /></noscript> Например, эта ссылка переместится в нижнюю часть этой страницы. Если используются атрибуты «имя» и «идентификатор», <code> <a> </code> тег является якорем, но если используется атрибут «href», то это ссылка. Оба атрибута можно использовать одновременно.</p><ul><li> <strong> Атрибуты для тега <code> <strong> <a> </strong> </code>: </strong><ul><li> <strong> href </strong> — это наиболее часто используемый атрибут тега <code> <a> </code>. Это то, что используется для создания гиперссылки. Значение, связанное с атрибутом href, должно быть либо полным, либо относительным адресом другой веб-страницы, почтовой ссылкой или именем привязки (с символом «#» в начале). См. ниже дополнительную информацию о том, как создать эти значения для ваших ссылок.</li><li> <strong> имя </strong> — этот атрибут создает якорь на вашей странице, на который может ссылаться другой тег <code> <a> </code>. По сути, использование атрибута name означает, что вы должны использовать два тега <code> <a> </code>; один как якорь с использованием атрибута name и один как ссылка на якорь с использованием атрибута href.<img class="lazy lazy-hidden" loading='lazy' src="//schtirlitz.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/fuzeservers.ru/wp-content/uploads/c/4/5/c45d3653e0461fabb83b3243f740183c.jpeg' /><noscript><img loading='lazy' src='/800/600/http/fuzeservers.ru/wp-content/uploads/c/4/5/c45d3653e0461fabb83b3243f740183c.jpeg' /></noscript> Чтобы создать ссылку на якорь таким образом, в атрибуте href должно быть указано имя якоря, перед которым стоит символ «#» или знак решетки. Например: <code> <a href="#bottom">Ссылка на нижнюю часть страницы</a> </code> Тег привязки может выглядеть так: <code> <a name="bottom">Это текст привязки</a> </code> Этот атрибут устарел в последней версии веб-стандартов в пользу атрибута «id».</li><li> <strong> id </strong> — создает уникальный идентификатор, отличающий тег <a> от любого другого элемента на веб-странице. Поскольку атрибут name постепенно упраздняется в последних версиях браузеров, лучше всего использовать атрибуты name и id вместе, когда вы создаете привязку на своей странице, чтобы вы были в безопасности как со старыми, так и с новыми браузерами. Убедитесь, что оба атрибута имеют одинаковое значение. Пример этого показан выше в информации об атрибуте «имя».</li><li> <strong> цель </strong> — этот атрибут определяет, куда будет загружаться новая веб-страница при нажатии на ссылку.<img class="lazy lazy-hidden" loading='lazy' src="//schtirlitz.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/navikur.ru/wp-content/uploads/3/b/3/3b3b3420ea9eb3ab81d91324255b8afa.jpeg' /><noscript><img loading='lazy' src='/800/600/http/navikur.ru/wp-content/uploads/3/b/3/3b3b3420ea9eb3ab81d91324255b8afa.jpeg' /></noscript> Возможные варианты: «_blank», «_parent», «_self», «_top» и имя фрейма. По умолчанию «_self». Если вы не используете фреймы (чего делать не следует), единственная причина использовать атрибут target — это параметр _blank.<ul><li> <strong> _blank </strong> — ссылка всегда будет открывать новое окно браузера. Это полезно, если вы полностью ссылаетесь на другой сайт, но все же хотите, чтобы ваш сайт был доступен на компьютере пользователя. Многих это раздражает, поэтому используйте его с осторожностью.</li><li> <strong> _parent </strong> — используется только с фреймами, в противном случае действует как «_self»</li> Код<li> — это нормальная функция ссылки. Новая страница загрузится в том же окне, что и исходная страница.</li><li> <strong> _top </strong> — Это гарантирует загрузку новой страницы в полноэкранном режиме окна. В основном используется для «вырыва» рамок. В противном случае он действует как «_self»</li>.<li> <strong> Имя фрейма </strong> — Если вы используете фреймы на своем сайте (их следует использовать редко, если вообще), то вы можете ввести имя фрейма, чтобы результирующая страница, на которую вы ссылаетесь, отображалась в соответствующем окне фрейма.<img class="lazy lazy-hidden" loading='lazy' src="//schtirlitz.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/tmpromotop.ru/pics/138187.jpg' /><noscript><img loading='lazy' src='/800/600/http/tmpromotop.ru/pics/138187.jpg' /></noscript></li></ul></li></ul></li><li> Пример: <code> <a href="somewhere.html" name="linktome" target="_blank" rel="noopener">Go Somewhere</a> </code> Этот тег создаст и ссылку, и привязку. Ссылка будет вести на страницу «somewhere.html», а якорь называется «linktome». Атрибут target заставляет ссылку открываться в новом окне браузера.</li></ul><p><h3><span class="ez-toc-section" id="i-16"> Отправить электронное письмо со ссылкой </span></h3></p><p> Помимо ссылки на другую веб-страницу или в другом месте на странице, вы также можете создать ссылку на адрес электронной почты. В зависимости от возможностей браузера, операционной системы и установленного программного обеспечения это приведет к автоматической загрузке программы электронной почты зрителя, и адрес электронной почты будет помещен в поле «Отправить» в новом окне электронной почты.</p><p> Для этого введите адрес электронной почты в качестве значения атрибута «href» и добавьте перед ним «mailto:». Например: <code> <strong> <a href="mailto:joesmith@somewhere.com">Электронная почта Джо</ a> </strong> </code> Однако при этом возникает неприятный побочный эффект.<img class="lazy lazy-hidden" loading='lazy' src="//schtirlitz.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/luxe-host.ru/wp-content/uploads/8/4/4/8441a8e9d834faead321cd0a4557d7c1.jpeg' /><noscript><img loading='lazy' src='/800/600/http/luxe-host.ru/wp-content/uploads/8/4/4/8441a8e9d834faead321cd0a4557d7c1.jpeg' /></noscript> Существуют программы, созданные «спамерами», которые сканируют веб-страницы в поисках адресов электронной почты на веб-странице. Если он найдет его, этот адрес электронной почты будет добавлен в базу данных спамера, и этот адрес начнет заполняться нежелательной почтой. К счастью, есть способы обойти это. Если вы заинтересованы, отправьте сообщение в ETS, чтобы узнать больше.</p><p><h3><span class="ez-toc-section" id="i-17"> Относительные и абсолютные ссылки </span></h3></p><p> Когда вы создаете ссылку, добавляя значение к атрибуту «href» тега <code> <a> </code>, вы должны быть осторожны, чтобы это значение не создавало «неработающую» ссылку или ссылка недействительна. Это очень легко сделать, особенно если вы полагаетесь на HTML-редактор, который сделает эти ссылки за вас. Очень часто HTML-редактор создает ссылку, указывающую на место на компьютере, с которым вы работаете, а не на правильное место на веб-сервере.</p><p> Существует два способа создания ссылки; относительное и абсолютное. Абсолютная ссылка полностью определяет местоположение страницы.<img class="lazy lazy-hidden" loading='lazy' src="//schtirlitz.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/luxe-host.ru/wp-content/uploads/0/4/f/04f13a8909e803a549f2a2d6144c66c3.jpeg' /><noscript><img loading='lazy' src='/800/600/http/luxe-host.ru/wp-content/uploads/0/4/f/04f13a8909e803a549f2a2d6144c66c3.jpeg' /></noscript> Например: <code> <strong> <a href="http://www.engr.colostate.edu/ETS/index.html"> </strong> </code> Это абсолютная ссылка, поскольку она включает все необходимое для поиска местоположения, включая протокол, сервер , каталог и имя файла. Абсолютные ссылки просты в использовании, и у вас редко возникают проблемы с ними. Этот метод необходимо использовать, если ваша ссылка указывает на место, которое находится за пределами веб-сервера, на котором находятся ваши страницы.</p><p> С другой стороны, относительные ссылки используют тот факт, что браузер уже знает, где находится текущий документ. Итак, все, что нужно, — это связь между текущим документом и расположением ссылки. Например: <code> <strong> <a href="page.html"> </strong> </code> является относительным, поскольку указывается только имя файла. Браузер знает расположение текущего документа и поэтому предполагает, что файл «page.html» находится в том же каталоге, что и текущий документ. Что делать, если файл, на который вы ссылаетесь, находится не в том же каталоге? Затем вам нужно будет указать либо путь к подкаталогу, включив имена каталогов, либо использовать «.<img class="lazy lazy-hidden" loading='lazy' src="//schtirlitz.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/analizsaita.com/wp-content/uploads/2021/02/017.jpg' /><noscript><img loading='lazy' src='/800/600/http/analizsaita.com/wp-content/uploads/2021/02/017.jpg' /></noscript> ./», чтобы перейти «вверх» каталога из того, в котором вы находитесь. Эта таблица может пролить некоторый свет на эту концепцию:</p><p> Эти методы можно использовать вместе, чтобы найти определенный файл в структуре вашего веб-каталога. Например: <code> <strong> <a href="../../prefs/location/index.html"> </strong> </code> переместится на два каталога вверх, а затем спустится на два каталога с именами «prefs» и «location», чтобы найти » index.html» веб-файл.</p><p><h3><span class="ez-toc-section" id="i-18"> Расположение веб-каталогов </span></h3></p><p> Распространенная проблема с созданием ссылки с помощью редактора HTML заключается в том, что ваши ссылки будут работать нормально, когда ваш веб-файл находится на вашем компьютере, но когда вы помещаете файлы на веб-сервер, ссылки все ломаются. Это связано с тем, что ваш редактор указывает ссылку на место на вашем компьютере, а не на правильное место, как это должно быть на сервере, как показано выше.</p><p> В инженерной сети есть несколько мест, выделенных для обслуживания веб-страниц через Интернет.<img class="lazy lazy-hidden" loading='lazy' src="//schtirlitz.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/luxe-host.ru/wp-content/uploads/6/a/3/6a370fb1861c6c3d1e0960ee80c613d5.jpeg' /><noscript><img loading='lazy' src='/800/600/http/luxe-host.ru/wp-content/uploads/6/a/3/6a370fb1861c6c3d1e0960ee80c613d5.jpeg' /></noscript> Эти места в основном представляют собой каталоги в сети, настроенные как места для «обслуживания» веб-страниц через Интернет. Главное, что нужно помнить в связи с этим, это то, что любой каталог или файл, который находится «вверху» от веб-каталога, невидим для Интернета. Или, другими словами, единственные файлы, видимые в Интернете, находятся в веб-каталоге, созданном для обслуживания веб-страниц, и любых его подкаталогах. И поэтому любая ссылка на место, которое не находится в этом каталоге, не будет работать. Браузер сообщит вам, что ссылка не найдена.</p><p> Например: все преподаватели, сотрудники и студенты инженерного колледжа имеют доступ к каталогу «public_html», который был выделен для обслуживания веб-страниц с вашего диска U:\. Таким образом, все файлы, размещенные в каталоге public_html, можно просматривать через Интернет. Но любой файл на вашем диске U:\ с номером <strong>, а не </strong> в вашем каталоге public_html нельзя увидеть или связать с ним через Интернет.</p><p> *Эта строка текста является якорем для ссылки в верхней части страницы.<img class="lazy lazy-hidden" loading='lazy' src="//schtirlitz.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/architecture-and-design.ru/wp-content/uploads/e/c/7/ec783dea2ae6a26e24749af05e299619.jpeg' /><noscript><img loading='lazy' src='/800/600/http/architecture-and-design.ru/wp-content/uploads/e/c/7/ec783dea2ae6a26e24749af05e299619.jpeg' /></noscript></div><footer class="entry-footer"> <span class="cat-links">Категории: <a href="https://schtirlitz.ru/category/raznoe-2" rel="category tag">Разное</a></span></footer></article><nav class="navigation post-navigation" aria-label="Записи"><h2 class="screen-reader-text">Навигация по записям</h2><div class="nav-links"><div class="nav-previous"><a href="https://schtirlitz.ru/raznoe-2/platnyj-kontent-chto-eto-za-chto-vam-gotovy-platit-podpischiki-marketing-na-vc-ru.html" rel="prev"><span class="be-post-nav-label btn btn-sm cont-btn no-underl"><small class="fas fa-chevron-left mr-2"></small>Назад</span></a></div><div class="nav-next"><a href="https://schtirlitz.ru/raznoe-2/ss-yutub-skachat-video-s-yutuba-ssyoutube-com.html" rel="next"><span class="be-post-nav-label btn btn-sm cont-btn no-underl">Вперед<small class="fas fa-chevron-right ml-2"></small></span></a></div></div></nav><div id="comments" class="comments-area"> <a href="#" class="btn btn-primary btn-sm be-open-comment-form">Оставить комментарий</a><div id="respond" class="comment-respond"><h3 id="reply-title" class="comment-reply-title">Добавить комментарий <small><a rel="nofollow" id="cancel-comment-reply-link" href="/raznoe-2/sozdanie-web-sajta-na-yazyke-html-prakticheskaya-rabota-po-informatike-sozdanie-web-sajta-na-yazyke-html-11-klass.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://schtirlitz.ru/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-notes"><span id="email-notes">Ваш адрес email не будет опубликован.</span> <span class="required-field-message">Обязательные поля помечены <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Комментарий <span class="required">*</span></label><textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required></textarea></p><p class="comment-form-author"><label for="author">Имя <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" autocomplete="name" required /></p><p class="comment-form-email"><label for="email">Email <span class="required">*</span></label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" autocomplete="email" required /></p><p class="comment-form-url"><label for="url">Сайт</label> <input id="url" name="url" type="url" value="" size="30" maxlength="200" autocomplete="url" /></p><p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Отправить комментарий" /> <input type='hidden' name='comment_post_ID' value='53392' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /></p></form></div></div></main></div></div></div><footer id="colophon" class="site-footer row"><div class="site-info col-md-8"><p>© 2019 Штирлиц Сеть печатных салонов в Перми</p><p>Цифровая печать, цветное и черно-белое копирование документов, сканирование документов, ризография в Перми.</p></div><div class="col-md-4"> <a href="/sitemap.xml">Карта сайта</a></div></footer></div></div> <noscript><style>.lazyload{display:none}</style></noscript><script data-noptimize="1">window.lazySizesConfig=window.lazySizesConfig||{};window.lazySizesConfig.loadMode=1;</script><script async data-noptimize="1" src='https://schtirlitz.ru/wp-content/plugins/autoptimize/classes/external/js/lazysizes.min.js'></script>  <style>iframe,object{width:100%;height:480px}img{max-width:100%}</style><script>new Image().src="//counter.yadro.ru/hit?r"+escape(document.referrer)+((typeof(screen)=="undefined")?"":";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+";"+Math.random();</script> </body></html>