: HTML - язык разметки гипертакста (или язык гипертекстовой разметки).
Так давайте познакомимся с ним поближе.
Для начала создайте у себя на компьютере файл с любым названием и расширением.html (название должно быть на английском языке - например index.html). Что бы создать такой файл - создайте обычный текстовый документ ("Пуск" - "Все программы" - "Стандартные" - "Блокнот") и сохраните ("Файл" - "Сохранить как") его в любом месте, введя название и расширение (бывает, что при введении расширения блокнот все равно сохраняет его как текстовый файл, а нам нужет web файл. Для этого перед сохранением выберите тип файла - "Все файлы(*.*)").
Это не обязательное условие (так как в настройках сервера можно поменять название первой страницы), а правило хорошего тона. Название первой страницы желательно именно index (index.html), так как сервер, при обращении к нему, выдает файл с таким именем - index.
При правильном сохранении, значок файла должен поменяться на значок браузера (по умолчанию Internet Explorer).
Теперь откройте этот файл через блокнот и скопируйте туда такой код.
Это первая web-страница!
Сохраните и откройте через браузер.
Поздравляю, вы только что создали свою первую web-страницу.
Текст "Это первая web-страница!" можете поменять на любой другой, например так - "Это моя первая web-страница!!!". сохраняем, обновляем браузер, любуемся результатом.
Но у нашей страницы нет загаловка.
Надо это исправить - немного подправим код, вернее добавим в него "Голову сайта", используя теги
и
Сохраняем, обновляем, любуемся. Теперь у нашей страницы есть загаловок.
Описание тегов.
Самый первый тег это (этот тег парный, т.е. закрывающий тег обязателен) - он используется как контейнер, внутри которого находится все содержимое страницы (текст, изображения и прочее). Хотя этот тег ( и ) необязателен, но его использование говорит о правиле хорошего тона. Поэтому и вам советую его использовать.
Следующий тег - . Это тоже парный тег (
и ). Этот тег не отображается на странице (кроме заголовка), но он необходим для указания дополнительный параметров страницы - описание страницы (используется поисковиками), ключевые слова (используется поисковиками), стили, скрипты, заголовок и прочее.Тег
И последний, в нашем коде, тег - . Тоже парный тег (
и ), внутри которого находится вся видимая часть сайта, т.е. тексты, картинки, ссылки, в общем информация которую вы хотите разместить на сайте.В следующем уроке мы поговорим о видах тегов и правило их написания.
Мы выпустили новую книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».
Страницы веб-сайтов - это документы или части веб-ресурсов, которые имеют уникальный адрес URL. Представляют собой , в котором имеются изображения, аудиофайлы, текст, видеоматериалы или анимация. Работа с и ее просмотр осуществляется с помощью браузеров.
Больше видео на нашем канале - изучайте интернет-маркетинг с SEMANTICA
Для чего нужна веб-страница
Главное предназначение - просмотр информации. На веб странице размещается текстовый, графический, аудио- и видеоконтент. Со страницы он считывается браузером и отображается для пользователей.
Также с помощью страниц человек может совершать определенные действия на сайте: открывать вкладки, меню, заполнять формы обратной связи, оформлять заказ в интернет-магазине.
Как сохранить веб страницу
- Нажимаем на меню и выбираем пункт «Сохранить как», затем откроется диалоговое окно с аналогичным названием.
- В появившемся окне нам необходимо выбрать тип файла, имя страницы и место сохранения. Сегодня есть 4 формата, их разберем ниже.
- Жмем «Сохранить», теперь в любой момент можно просмотреть копию страницы.
4 формата сохранения страниц:
- Полностью. В данном формате выбранный элемент сохраняется полностью, со всеми изображениями и стилистическими решениями, оформлением. Также браузер создает отдельную папку, куда помещаются все размещенные на ресурсе материалы: картинки, фото, виджеты и прочее.
- HTML. Здесь уже нет возможности сохранить изображения и стилистические решения, сохраняется оригинал с той же структурой и текстом. Таким способом экономится место в памяти.
- Текст. Сохранившийся текст можно просмотреть с помощью любого редактора, текст сохраняется полностью, а не фрагментально.
- Файлы. Сохраняются все размещенные на странице файлы. Если есть необходимость, можно поменять расширение того или иного файла.
Что значит сообщение «веб-страница устарела»
Это довольно распространенная ошибка. Она означает, что локальная копия страницы устарела, в то время как пользователя запрашивает ее загрузку. Для решения проблемы необходимо перезагрузить страницу.
Что значит сообщение «веб-страница замедляет браузер»
Часто при просмотре сайтов возникает отображается текст «Веб-страница замедляет ваш браузер». Как правило, замедление происходит из-за того, что браузер автоматически загружает много ненужных скриптов на данной странице. Чтобы решить проблему, необходимо поменять настройки веб-обозревателя с целью быстрой загрузки скриптов. Для этого заходим в меню браузера, ищем «Инструменты», затем жмем пункт «Добавить». Ищем специализированный плагин «Shockwave Flash» и устанавливаем его. Затем в настройках плагина выбираем пункт «Спрашивать перед активацией» и ставим рядом с ним галочку. Обратите внимание, что наименование пунктов может меняться в зависимости от используемого браузера, главное – уловить смысл.
После этого скрипты не будут загружаться автоматически, перед каждой загрузкой система будет спрашивать разрешение.
Веб страница не отвечает: что делать и как решить проблему
Здесь уже не все так просто, как вышеописанных случаях. Проблема может быть в чем угодно. Разберем, как решить данную проблему.
Сначала стоит обратить внимание на URL. Проверьте, чтобы в адресной строке был правильно указан адрес страницы. Далее проверьте, открывается ли ресурс на другом компьютере. Если на всех ПК страница не загружается, проверьте подключение к интернету. Если и тут все в порядке, возможно, проблема в сайте.
Второй способ - удалить файлы. Это специальные файлы, которые создаются для сохранения информации о созданном профиле. Иногда cookie файлы повреждаются. Это приводит к тому, что страницы не отображаются. Чтобы их удалить, открываем настройки браузера, выбираем пункт «Дополнительно» и затем «Личные данные». Открываем настройки контента и выбираем интересующие нас файлы. Удаляем «Все файлы cookie и данные сайтов».
Следующий способ - изменить прокси-сервер. Иногда подключение через прокси-сервер может приводить к медленной загрузке веб-страниц или ошибках в их отображении. Чтобы решить проблему, зайдите в настройки, затем откройте пункт «Сеть» и укажите наименование сети. Далее откройте настройки прокси сервера и введите необходимые параметры. Если вы не знаете эти параметры, обратите к администратору вашей сети. Дале интернет-соединение прервется. Переподключитесь к сети интернет и продолжите работу.
Веб страница перемещена: что делать
Часто можно столкнуться и с данным сообщением. Скорее всего рядом будет расположен новый адрес, и браузер предложит перейти по этой ссылке. Зайдите на новый вариант страницы и получите допуск к нужной информации.
Мы разобрали, что такое веб страница, как ею пользоваться для тех или иных целей. Как вы видите, периодически в работе веб-страниц могут возникать проблемы, однако все они решаемы.
Веб-сайт, часто называют сокращённо сайт - это не что иное, как совокупность логически связанных между собой веб-страниц, или просто одна страница. Страницы сайта доступны в Интернете средствами протоколов HTTP или HTTPS. Веб-сайт имеет своё место в интернете, определяемое персональным для каждого сайта адресом, который принято называть URL. Любой веб-сайт имеет своего владельца, владельцем может быть как физическое, так и юридическое лицо.
Веб-сайт состоит из страниц
Веб-сайт состоит из страниц, объединённых общим корневым URL и, как правило, общей логической структурой, темой, оформлением (дизайном) и техническим устройством. В свою очередь Всемирная паутина это не, что иное, как совокупность всех веб-сайтов. Веб-страницы представляют собой текстовые файлы, написанные на языке гипертекстовой разметки HTML или XHTML.
При просмотре веб-страницы, в специальной программе, которую называют браузером, HTML файлы загружаются на компьютер пользователя. После загрузки браузер выводит веб-страницы на экран пользователя. В качестве аппаратного средства для выхода в интернет с целью обзора содержимого веб-страниц могут использоваться различные устройства: персональный компьютер, КПК, некоторые модели игровых приставок и другие устройства, все эти устройства поддерживают стандарты языка HTML / XHTML и веб-страницы на них отображаются одинаково.
Язык HTML / XHTML даёт возможность форматировать страницы, помещать на них текст, гиперссылки, таблицы, картинки и другие объекты. Таблица стилей CSS, которую можно использовать в HTML документах даёт дополнительные возможности для создания внешнего вида веб-страниц.
JavaScript и некоторые другие скриптовые языки
На веб-страницах так же можно использовать JavaScript и некоторые другие скриптовые языки поддерживаемые браузером, да придание интерактивности веб-документу. Для связи между веб-страницами внутри сайта и связи между разными веб-сайтами Всемирной паутины используются гипертекстовые-ссылки или сокращённо гипер-ссылки. Если гипер-ссылка используется для связи страниц внутри сайта, её называют внутренней, а если она связывает разные сайты, её называют внешней.
Страницы сайта
Страницы на сайте могут быть статичными, то есть они хранятся на веб-сервере виде неизменяемых файлов, а могут быть динамическими, то есть генерироваться прямо на сервере специальной программой, которую ещё называют движок сайта. Движок сайта может предоставлять большой набор возможностей, для изменения содержимого веб-страниц, добавления новые веб-страниц и осуществления других действий по конфигурированию веб-сайта и редактированию информации на нём через веб-интерфейс администрирования, который называют системой управления сайтом или CMS.
Создание веб-сайта - это трудоёмкий процесс, объединяющий труд разных специалистов: веб-дизайнеров, программистов, HTML верстальщиков, оптимизаторов, менеджером, журналистов для наполнения сайта информацией и т.д. Время и стоимость создания сайта зависит от степени сложности проекта, его структуры и качества дизайна.
Немного из истории развития веб-сайтов
Первый в мире сайт был создан 6 августа 1991 г. Американцем Тимом Бернерс-Ли он разместил на сайте публикацию о технологии World Wide Web. Основой технологии World Wide Web является протокол передачи данных HTTP, язык гипертекстовой разметки HTML и система адресации URL. На сайте также были описаны и другие основные принципы работы сети Интернет, такие как работа серверов, веб-браузеров и т.д. Сайт, созданный Тимом Бернерс-Ли, так же стал первым мире Интернет каталогом, т.к. на нём позже были размещены ссылки и на другие ресурсы тогдашнего Интернета.
Необходимые инструменты для работы сайта были подготовлены ещё раньше, в конце 1990 появился первый браузер, который получил название WorldWideWeb, он дополнительно включал функцию гипертекстового редактора. Тим Бернерс-Ли также подготовил первый веб-сервер на базе NeXTcube.
Думаете, как создать HTML-страницу? Для этого нужно потратить несколько часов, и вы будете знать А создать свою первую страницу сможете за 5 минут.
HTML расшифровывается как HyperText Markup Language. В переводе это означает "язык гипертекстовой разметки". Важно понимать, что HTML - это не язык программирования, а именно разметки сайта.
Все современные браузеры умеют распознавать его. Затем они отображают информацию в удобном виде для пользователя, как заранее было задумано автором.
В этом языке используются специальные теги. Каждый тег выполняет свою функцию. Их очень много. В идеале нужно выучить все. Но для начинающего базовых знаний вполне достаточно.
Основы HTML
Перед тем как создать HTML-страницу, нужно знать, из чего она состоит. В этом языке есть два понятия: элемент и тег.
Для того чтобы указать, где этот элемент начинается и закрывается, используются открывающий и закрывающий тег. Выглядит это так.
<открывающий тег>содержимоезакрывающий тег>
Как видите, открывающий и закрывающий тег отличаются только "/".
Весь HTML-документ представляет собой набор этих элементов. Существуют определенные требования к структуре документа. Всё содержимое страницы должно находиться между двумя тегами и . Когда вы будете писать код, возьмите себе за привычку сразу проставлять открывающийся и закрывающийся тег.
Также запомните, что структура языка HTML имеет свою иерархию. Иначе она называется вложенность. является самым главным, поскольку все остальные находятся внутри его.
У HTML есть два дочерних элемента:
- ... ;
- .. .
В блоке HEAD указывается различная служебная информация. Эта информация в браузер не выводится. Например, указания для разработчиков, для любых программ, для роботов и многое другое.
Самое главное - здесь нет контента.
В разделе BODY указывается содержание документа, которое будет отображено пользователю.
Учитесь сразу делать открытые и закрытые теги, поскольку может быть и по 10 вложенных элементов. Кроме этого, для удобства рекомендуется вложенные теги делать с отступом. Например, вот так.
Так делают, чтобы равные по значимости теги были на одном уровне, а дочерние - "внутри". Так намного удобнее для восприятия и поиска нужного куска кода. Иначе можно запутаться. Но для экономия места именно и body можно делать без отступов. Так поступают, чтобы у всех остальных не было лишнего отступа. Всё остальное желательно отделять.
Как создать простую страницу на HTML
Для написания кода вам нужен какой-нибудь редактор. Их очень много. Популярными являются Notepad++ и Adobe Dreamweaver. Также можно использовать и блокнот.
Вот так выглядит редактор Notepad++.
Это очень удобный редактор и при этом бесплатный. Вышеуказанный Adobe Dreamweaver является платным. Отличие редакторов, предназначенных для написания от блокнота - в том, что специальные теги подсвечиваются. Если он не подсветился, значит, вы написали неправильно.
Для того чтобы подсветка соответствовала языку, ее нужно указать в настройках.
Давайте рассмотрим, как создать страницу HTML в блокноте. То есть закончим техническую часть и потом непосредственно перейдем к изучению тегов.
Как создать веб-страницу в блокноте HTML
Для начала откройте блокнот.
Затем наберите в нем то, что указано на следующем скриншоте.
Привыкайте писать руками, а не просто копировать. Когда вы пишите руками, вы лучше запоминаете всю базу тегов.
После этого файл можно открывать в браузере и любоваться результатом. Теперь вам должно быть понятно, как создать веб-страницу в блокноте HTML.
Всемирный консорциум W3C
Существует такая организация, как W3С, которая разрабатывает и внедряет все стандарты для интернета. Все браузеры подчиняются этим стандартам и обрабатывают разметки (коды) страниц согласно этим правилам.
На официальном сайте разработчиков языка HTML можно найти таблицу со всеми тегами и правилами их использования. В рамках данной статьи мы рассматриваем самые основные.
Вы можете подумать, какие могут быть правила? Все описанные теги имеют свою рекомендацию. Их несколько:
- Необязательный тег.
- Запретный.
- Пустой тег.
- Устаревший
- Утерянный.
Теги в HTML
Перед тем как создать HTML-страницу, нужно разобраться с тем, что должно быть в служебной части HEAD.
В области HEAD есть как обязательные, так и необязательные теги. К обязательному тегу относится заголовок. Он обозначается
Перейдем к разделу BODY. Существуют элементы, которые отображаются в браузере, а есть и неотображаемые. Например, комментарии не отображаются пользователю. Их можно использовать для заметок или же для подсказки другим сотрудникам, если вы работаете в команде.
Обозначается они как
Всё, что находится между , расценивается программой именно так. Обратите внимание, что нельзя вложить тег-комментарий в другой тег-комментарий. Поскольку как только вы откроете .
Пример такой вложенности:
продолжение первого комментария -->
Результатом в браузере будет следующее
продолжение первого комментария -->
А вот кусок не будет виден. Второй открывающийся тег