Здравствуйте, уважаемые читатели блога. С этой статьи мы начнем изучать основы языка HTML.
.
Срочно нужен интернет-магазин, а времени на изучение HTML, CSS, PHP и других технологий нет. Тогда просто можете арендовать интернет магазин с полностью реализованным функционалом и оптимизацией под поисковые системы.
Язык HTML и его теги
Первая версия языка HTML появилась еще в 1992 году. На момент 2013 года разрабатывается спецификация новой версии HTML под номером 5. Разработкой данной спецификации занимается организация World Wide Web Consortium, или сокращенно W3C. Организация W3C занимается разработкой и других Web-стандартов. Ознакомится с этими стандартами вы можете на их сайте www.w3.org
. Кстати, Многие Web-браузеры уже поддерживают некоторые возможности HTML 5.
Предлагаю начать изучение языка HTML сразу с примера. Поэтому давайте создадим нашу первую Web-страничку. Для создания WEB-страниц подойдет любой текстовый редактор. Я предлагаю для начала воспользоваться встроенным в Windows Блокнотом (Notepad)
(вообще в дальнейшем для редактирования html-кода я советую использовать ). Найти его можно: «Пуск->Все программы->Стандартные->Блокнот». Давайте создадим страничку об автомобилях. Итак, откроем Блокнот и наберем в нем текст:
Пример Web-страницы
Сайт об автомобилях.
Добро пожаловать на наш автомобильный сайт. Здесь Вы найдете много интересных и полезных статей об автомобилях. На сайте есть описания многих импортных и отечественных автомобилей.
Далее сохраним созданную web-страницу в файл с именем index.html. При этом в диалоговом окне сохранения файла необходимо задать кодировку UTF-8 и заключить имя файла в кавычки, иначе Блокнот добавит к нему расширение txt, и наш файл получит имя index.htm.txt:
Теперь осталось открыть созданный файл в браузере и посмотреть на результат. Для этого можно воспользоваться поставляемым в составе Windows браузером Microsoft Internet Explorer, либо любым другим установленным на вашем компьютере браузером, щелкнув два раза мышкой по файлу index.html или перетаскиванием файла на значок браузера. Открываем и видим примерно такой результат:
Таким образом, мы создали Web-страницу в Блокноте, хоть и немного невзрачную, но уже содержащую большой заголовок и абзац текста, который автоматически разбивается на строки и содержит фрагмент, выделенный полужирным шрифтом.
Что такое тег?
Теперь поговорим подробнее о структуре страницы. Рассмотрим фрагмент: Сайт об автомобилях
.
Здесь мы видим текст, который отображается на странице как заголовок, заключенный в теги
и
. Что же такое тег в html языке?
Тег HTML
- это обычные слова и символы, заключенные в угловые скобки, например
,
,
. Так тег является открывающим тегом, тег
закрывающим тегом, а текст между ними называется содержимым тега. Также тег и тег
называются парными тегами. Вместе открывающий тег плюс содержимое плюс закрывающий тег образуют элемент html-документа. Бывают еще элементы состоящие из одного открывающего тега:
Так парный тег
определяет элемент заголовка первого уровня. Всего существует шесть уровней заголовков, это элементы — .
Элементы бывают блочные и строчные (текстовые). Блочные элементы
осуществляют структурное форматирование страницы. Блочные элементы всегда отображаются на странице с новой строки и имеют отступ от соседних элементов. Строчные элементы
осуществляют непосредственное форматирование текста или логическое форматирование. Элемент
является блочным элементом.
На этом у меня все!!! До встречи в следующих постах!
Веб-сайт, часто называют сокращённо сайт - это не что иное, как совокупность логически связанных между собой веб-страниц, или просто одна страница. Страницы сайта доступны в Интернете средствами протоколов 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.
Все то, что мы видим на экране браузера, «путешествуя» по Интернету, называется WEB страницей. На WEB странице может размещаться самое разнообразное содержание (или же контент): текст, картинки, видеофильмы, звучащая музыка или интересная онлайн игра.
У любой WEB страницы есть адрес. По этому адресу страницу можно отыскать в Интернете. Адрес страницы отображается в адресной строке браузера. Например, у WEB страницы, которую Вы сейчас читаете, адрес такой:
http://www..html
Проверьте, она должна высвечиваться в адресной странице Вашего браузера.
Сейчас многие вводят в адресную строку ключевое слово или целую фразу. Раньше программа-браузер в этом случае генерировала ошибку. Нет такого адреса, страница не найдена! Сейчас браузер обрабатывает эту ошибку следующим образом: обращается к поисковой системе (Google, Yandex или другой) с запросом, состоящим из введенного в адресную строку слова или фразы. Таким образом, поисковая система пытается подтолкнуть пользователя к правильному ответу на его вопрос и отыскать в Сети необходимую WEB страницу, где введенные пользователем слова встречаются чаще всего. Попробуйте написать в поисковой строке вопрос, поставленный в заглавие этой статьи, и Вы получите целый список ссылок, где содержатся ответы на этот вопрос. Вполне возможно, что в этом списке Вы отыщете и данную статью.
Но вернемся к адресу WEB страницы. Этот адрес читается слева направо и состоит из нескольких частей. Первая часть адреса для WEB страниц всегда будет http:// или https://. Эти буквы – обозначение протокола, с помощью которого WEB страницы передаются по Сети. Протокол этот называется протоколом передачи гипертекста (HyperText Transfer Protocol - HTTP). WEB страницы – это типичный гипертекст, то есть текст со ссылками на другие текстовые и мультимедийные материалы. Следовательно для передачи WEB страниц всегда используют протокол HTTP.
Если WEB страница – это как бы страница книги, размещенная в Интернете, то самой книгой можно считать Интернет-сайт, который объединяет несколько WEB страниц, связанных между собой Интернет-ссылками. Так же, как и WEB страница, Интернет-сайт тоже имеет адрес. Адрес интернет-сайта является частью адреса WEB страницы и находится между символами // и первым символом /.
Адрес сайта имеет две формы: цифровую – для компьютера и символьную – для того, чтобы этот адрес воспринимали люди. Одну форму представления несложно перевести в другую. Это делает специальная система доменных имен (Domain Name System – DNS), обслуживающая Интернет.
У адреса сайта, записанного в символьной форме, есть несколько составляющих, разделенных точками, среди них – название сайта (topauthor) и название национального домена, к которому принадлежит сайт (ru, что означает Россия). За символом / следует имя WEB страницы, которое по существу является адресом страницы на сайте.
Система адресации не заканчивается на уровне страницы. Все составляющие контента (файлы изображений, музыки и видеоролики) также имеют адреса. Такие адреса иначе называются единообразными локаторами ресурса (Uniform Resource Locator - URL).Так, например, адрес логотипа «Топавтора» такой:
О том, что эта составляющая контента – картинка, говорят три буквы, png, следующие за точкой в конце адреса. Название картинки располагается между символом / и точкой. Данная картинка называется logo и размещена на сайте www.. Если ввести вышеуказанный адрес URL в адресную строку браузера, то на экране появится изображение логотипа сайта «Топавтор».
Что при этом произошло? Программа-браузер по адресу отыскала на сайте www.сайт место хранения картинки, скопировала этот файл на локальный компьютер пользователя (иногда говорят «скачала») и продемонстрировала на экране браузера соответствующую картинку, которая теперь хранится не где-то в Интернетовском поднебесье, а под рукой, на локальном компьютере.
На самом деле, составляющие контента, размещенные на WEB странице, не должны обязательно храниться на том же сайте. Например, для размещения на WEB странице картины «Опять двойка» можно дать ссылку на файл, находящийся на другом сайте, например, на сайте Википедии в статье «Опять двойка» или же на сайте Третьяковской галереи, где эта картина выставлена. Результат будет одинаковый. В обоих случаях картинка появится на WEB странице.
Сама WEB страница представляет собой текст, написанный на специальном языке гипертекстовой разметки (HyperText Markup Language - HTML). Этот текст можно увидеть, если дать браузеру команду продемонстрировать источник WEB страницы (View page source). Язык HTML позволяет однозначно описать размещение на WEB странице всех составляющих контента. Например, типы и размеры шрифтов, которые используются при печати текстов, размеры картинок и их положение относительно текста.
Любой Интернет-сайт размещается на сервере. Сервер – это компьютер, управляемый специальной программой. Сервер обслуживает все запросы, направляемые к сайту. Благодаря работе сервера происходит обмен информацией между сайтом и браузером. Браузер размещен и работает на компьютере пользователя, подсоединенном к Интернету. Компьютер пользователя называют еще локальным компьютером. Процесс обмена информацией между сервером и локальным компьютером начинается в ответ на запрос браузера с локального компьютера. Этот процесс во многом напоминает радиопередачу, где радиопередатчиком является сервер, а радиоприемником – браузер.
На локальный компьютер передается текст, написанный на языке HTML. Можно считать, что на локальный компьютер передан фотоальбом с пустыми местами, оставленными для картинок, музыки, видеоклипов и программ. В этих местах пока находятся только URL адреса всех мультимедийных составляющих контента. Браузер «проходит» по всем этим адресам и копирует с них на локальный компьютер файлы изображений, музыки или видеоролики. Затем все эти файлы размещаются на экране, как это было намечено программистом, разрабатывавшим WEB страницу. Браузер справляется с этим за несколько секунд, а дальше – дело пользователя: читай, слушай музыку, просматривай видеоролики. Интернет к твоим услугам!
Web-страница - это специально отформатированный документ, который может включать текст, графику, гиперсвязи, аудиоряд, анимацию, видеоряд.
Несколько веб-страниц, объединенных общей темой и дизайном, а также связанных между собой ссылками, и обычно находящихся на одном веб-сервере, образуют веб-сайт.
Веб-с айт (от англ. website
: web
- «паутина, сеть» и site
- «место», буквально «место, сегмент, часть в сети») - совокупность электронных документов (файлов) частного лица или организации в компьютерной сети, объединённая под одним адресом (доменным именем или IP-адресом).
Все сайты в совокупности составляют
Всемирную паутину, где коммуникация (паутина) объединяет сегменты информации мирового сообщества в единое целое - базу данных и коммуникации планетарного масштаба. Для прямого доступа клиентов к сайтам на серверах был специально разработан протокол
HTTP.
Web-сайт по своей структуре напоминает журнал, который содержит информацию, посвященную какой-либо теме или проблеме. Как журнал состоит из печатных страниц, так и Web-сайт состоит из компьютерных Web-страниц.
Программа, демонстрирующая веб-страницу, называется веб-браузер.
Создание Web-сайтов реализуется с использованием языка разметки гипертекстовых документов HTML. Технология HTML состоит в том, что в обычный текстовый документ вставляются управляющие символы (тэги) и в результате мы получаем Web-страницу. Браузер при загрузке Web-страницы представляет ее на экране в том виде, который задается тэгами.
HTML позволяет:
· форматировать текст;
· включать в документ изображения, мультимедиа;
· с помощью этого языка создаются гипертекстовые ссылки на другие Web-страницы.
HTML используется для создания информационного содержимого файла и для определения структуры и формата Web-страниц. Так как HTML-файлы являются обычными текстовыми файлами, такой файл может быть практически отправлен на любой компьютер.
Для создания Web-страниц используются простейшие текстовые редакторы, которые не включают в создаваемый документ управляющие символы форматирования текста. В качестве такого редактора в Windows можно использовать стандартное приложение «Блокнот».
Обычно файл Веб-страницы имеет расширение.html или.htm.
Кроме того, существует много технологий, в которых основные действия по созданию сайтов уже автоматизированы, остается лишь внести изменения в соответствии со своей тематикой.
Для того, чтобы просмотреть HTML-страницу, достаточно просто ввести ее URL-адрес в строке адреса Web-браузера, а затем следовать по гиперссылкам. Но именно в этом и заключается основная проблема - как узнать адрес страницы? Чаще всего бывает так, что известно то, что необходимо найти, но неизвестно где именно искать. Для решения этой проблемы существуют специальные поисковые системы. С точки зрения пользователя, поисковая система - это обычный сайт на главной странице которого находятся разбитые по рубрикам («Спорт», «Бизнес», «Компьютеры» и т.п.) ссылки на другие сайты. Кроме того, поисковая система позволяет пользователю ввести несколько ключевых слов и возвращает ссылки на страницы, содержащие эти ключевые слова.
Веб - сайт
Веб-сайт (англ. Website, от web - паутина и site - "место") - в компьютерной сети объединённая под одним адресом совокупность документов частного лица или организации. По умолчанию подразумевается что сайт располагается в сети Интернет. Все веб-сайты Интернета в совокупности составляют Всемирную паутину. Для прямого доступа клиентов к веб-сайтам на серверах был специально разработан протокол HTTP. Веб-сайты иначе называют Интернет-представительством человека или организации. Когда говорят "своя страничка в Интернет", то подразумевается целый веб-сайт или личная страница в составе чужого сайта. Кроме веб-сайтов в сети Интернет так же доступны WAP-сайты для мобильных телефонов.
Изначально веб-сайты представляли из себя совокупности статических документов. В настоящее время большинству из них свойственна динамичность и интерактивность. Для таких случаев специалисты используют термин веб-приложение - готовый программный комплекс для решения задач веб-сайта. Веб-приложение входит в состав веб-сайта, но веб-приложение без данных сайтом является только технически.
В большинстве случаев в Интернете одному веб-сайту соответствует одно доменное имя. Именно по доменным именам сайты идентифицируются в глобальной сети. Возможны иные варианты: один сайт на нескольких доменах или несколько сайтов под одним доменом. Обычно несколько доменов используют крупные сайты (веб-порталы) чтобы логически отделить разные виды предоставляемых услуг (mail.yandex.ru, news.yandex.ru, auto.yandex.ru). Нередки и случаи выделения отдельных доменов для разных стран или языков. Например, google.ru и google.fr логически являются сайтом Гугла на разных языках, но технически это разные сайты. Объединение нескольких сайтов под одним доменом характерно для бесплатных хостингов. Для идентификации сайтов в адресе после указания хоста стоит тильда и имя сайта: example.com/~my-site-name/.
Введение в HTML
В этой главе:
Каждый раз, открывая браузер, вы попадаете на веб-сайт, который может состоять из одной или множества веб-страниц с различной информацией. Основной технологией создания таких веб-страниц является язык HTML
.
Как браузер получает веб-страницы?
Для общего понимания давайте рассмотрим небольшую теорию о том, как браузер получает веб-страницы и что такое веб-сервер. Чтобы получить веб-страницу, нужно создать файл, написанный на языке HTML, и поместить его на веб-сервер. После того как вы поместили созданный файл на веб-сервер, любой браузер сможет через интернет отыскать вашу веб-страницу. Веб-сервер - это обычный компьютер с доступом в интернет, который непрерывно работает и ожидает запросов от браузеров. Любой сервер хранит веб-страницы, картинки, аудиофайлы и файлы других типов. Когда сервер получает запрос от браузера на какой-нибудь ресурс (изображения, веб-страницы и др.), он находит этот ресурс (если может определить местоположение ресурса) и отправляет его браузеру.
Вы уже знаете, как работает браузер: вы бродите по различным сайтам в интернете, кликая по ссылкам для перехода на различные страницы. Такой клик служит поводом для того, чтобы ваш браузер сделал запрос на HTML-страницу веб-серверу, получил ответ на свой запрос и отобразил эту страницу в своем окне.
Но каким образом браузер узнает о том, как именно отображать страницу? Вот здесь начинает работать язык HTML. Он говорит браузеру все о содержании и структуре страницы. Если вы выполните свою работу хорошо (код будет написан корректно и без ошибок), то ваши страницы будут одинаково отображаться во всех браузерах.
Примечание:
Браузер (от англ. Web browser
- Веб-обозреватель) - программное обеспечение, используемое для просмотра веб-сайтов, то есть для запроса веб-страниц (преимущественно из Сети - интернета), их обработки, вывода в окне браузера и перехода от одной страницы к другой. К наиболее популярным браузерам относятся: Internet Explorer
, Mozilla Firefox
, Google Chrome
, Safari
, Opera
.
Обратите внимание:
во время обучения вам не придется выкладывать никакие страницы на веб-сервер, все прекрасно будет работать и на вашем локальном компьютере.
Перед тем как продолжить, давайте рассмотрим, для чего нужен HTML-редактор, что из себя представляет HTML-документ и как его создавать.
Зачем нужен HTML-редактор?
Редактировать HTML-документы можно и в обычном текстовом документе, но удобнее это делать, конечно же, в специальных HTML-редакторах. HTML-редактор
- это один из основных инструментов для создания и редактирования веб-страниц и сайта в целом. Основное преимущество редакторов перед обычным блокнотом состоит в том, что они осуществляют подсветку кода, что в свою очередь позволяет проще и быстрее редактировать необходимый код.
Существует множество платных и бесплатных HTML-редакторов, к наиболее часто используемым платным относятся Dreamweaver
, Visual Studio
и PHPStorm
. В качестве бесплатных редакторов можно использовать notepad++
и geany
.
Что из себя представляет HTML-документ?
HTML-документ
- это обычный текстовой файл c расширением .html
, который содержит HTML-код. Далее будет описана информация для тех, кто не знает, как сохранять файлы с нужным расширением.
Windows:
Для того, чтобы сделать из текстового файла HTML-документ, вам надо всего-навсего сохранить файл под другим расширением, сделать это можно двумя способами:
- В открытом редакторе (или в обычном текстовом документе) нажимаем файл
→ выбираем сохранить как
→ внизу в текстовом поле имя файла:
напишем к примеру так: mypage.html → жмем сохранить
. Всё, HTML-документ создан.
- Кликаем правой кнопкой мыши (ПКМ
) на текстовом файле → выбираем переименовать
и меняем расширение с .txt
на .html
. Чтобы воспользоваться данным способом, нам надо сделать так, чтобы по умолчанию у всех файлов были доступны их расширения, делается это следующим образом: нажимаем Пуск
→ открываем Панель управления
→ выбираем Параметры папок
→ вкладка Вид
→ прокручиваем в самый низ и убираем галочку на Скрывать расширения для зарегистрированных типов файлов
.
Открыть файл, сохраненный с расширением.html, для просмотра в браузере можно двумя способами:
- Кликнуть по нему два раза левой кнопкой мыши, в этом случае веб-страница откроется в том браузере, который выбран по умолчанию.
- Кликнуть по нему ПКМ → наводим курсор на открыть с помощью...
→ выбираем нужный вам браузер.
При получении HTML-документа браузер будет отображать его в виде веб-страницы (веб-страницей
является то, что отображается в окне браузера), при этом вы не увидите в окне своего браузера отображения написанных вами тегов, потому что они будут интерпретированы для отображения содержимого страницы в нужном вам виде.
Заголовок
Мой первый заголовок
Мой первый абзац
Результат данного кода в окне браузера:
Чтобы отредактировать код HTML-документа, нажмите на него ПКМ → наводим курсор на открыть с помощью...
→ выбираем нужный вам редактор, если в списке нет нужного редактора, жмем Выбрать программу...
и выбираем нужный редактор. Некоторые редакторы (для примера возьмем notepad++
) можно выбрать прямо в контекстном меню, нажав по документу ПКМ и выбрав сверху Edit with Notepad++
(редактировать с помощью notepad++).
Что такое HTML?
HTML
- это язык для описания структуры веб-страниц. Cтраницы, созданные с его помощью, могут быть просмотрены только при помощи специальных программ (браузеров), установленных на компьютерах пользователей.
- Аббревиатура HTML расшифровывается как H
yper T
ext M
arkup L
anguage (язык разметки гипертекста).
- Запомните, он не является языком программирования, это язык разметки.
- HTML использует теги
разметки, чтобы описать структуру веб-страницы.
Что такое теги?
HTML теги
- это ключевые слова или символы, заключенные в угловые скобки, например
, ,
и т.д. Теги бывают двух видов: парные
и одиночные
(их также называют пустыми). Парные теги состоят из открывающего и закрывающего тега, например: . Символ "/" после угловой скобки указывает на то, что тег закрывающий. Одиночные теги состоят только из открывающего тега, например:
. Теги не чувствительны к регистру, поэтому могут быть написаны как прописными, так и строчными буквами:
Означает то же самое, что и
По стандарту HTML5
теги могут быть написаны в любом регистре.
С помощью тегов браузер распознает структуру
и значение
вашего текста, например, они сообщают браузеру, какая часть текста является заголовком, где начинается новый абзац, что нужно подчеркнуть и где расположить изображение (картинку). Получив эту информацию, браузер использует встроенные в него по умолчанию правила о том, как отображать каждый из этих элементов. Без использования тегов браузер выведет просто сплошной поток текста, без отступов, заголовков, абзацев и т.д. Чтобы стало понятнее, рассмотрим это подробнее на примерах ниже.
Так выглядит страница, в которой используются теги для разметки:
Летнее меню
Напитки в нашем кафе
Мультифрукт - 100р.
Фруктовый напиток, содержащий апельсиновый и ананасовый соки.
Молочный коктель - 150р.
Сливочное мороженое, перемешанное с мякотью фруктов.
То же самое, но без использования тегов:
Напитки в нашем кафе
Мультифрукт - 100р.
Фруктовый напиток, содержащий апельсиновый и ананасовый соки.
Молочный коктель - 150р.
Сливочное мороженое, перемешанное с мякотью фруктов.
2016-05-11
blackhack.ru ОК. Настройки, новости, игры.
