Заработок на разработке сайтов, фриланс, своя страничка в интернете, заработать в Интернете на написании сайтов, веб мастер, вебмастер, веб программист, вебпрограммист.
Заработок в Интернет. Удаленная работа на дому. Все о надомной работе.
Что такое html документ: Что такое HTML? — Знакомство с HTML — codebra
Что такое HTML – это язык разметки документов. Он применяется во всем мире. Браузер интерпретирует код HTML для отображения его на компьютере, планшете или телефоне. Язык HTML был разработан британцем Тимом Бернерсом-Ли, в ЦЕРНе. В первую очередь язык HTML предназначался для обмена научными документами. Верстка документов происходит при помощи специальных дескрипторов (но чаще всего их называют тегами, это слово, думаю, многим знакомо). Если ответить проще на вопрос: «Что такое HTML документ?» — это простой текст, содержащий много тегов, который образует веб-страницу.
Было множество версий HTML, но я не хочу в них вдаваться. На данный момент самая последняя версия – HTML5. Первая бета версия HTML5 появилась осенью 2007 года. Для упрощения и удобства было введено понятие «гипертекст». Гиперссылка (или просто ссылка), является частью гипертекста, и она ссылается на другой HTML документ.
HTML был построен так, что страницы отображались на всех устройствах одинаково. Позже добавили графическое оформление (CSS).
Структура HTML документа
Думаю, вы поняли, что такое язык HTML. Как говорилось выше – этот язык полностью состоит из дескрипторов (тегов). У любой веб страницы есть начало и конец, они обозначаются парным тегом <html></html>. Рассмотрим простой HTML документ:
<!DOCTYPE html> — каждая веб страница должна начинаться именно с него. Раньше было огромное количество вариантов тега DOCTYPE, но в соответствии с новой версией HTML, нужен только этот !DOCTYPE, который в примере. Что такое DOCTYPE? Это тег, который сообщает браузеру версию HTML. Этот тег должен быть написан на первой строчке HTML документа.
После идет парный тег <html></html>. Этот тег является контейнером веб страницы, то есть до него и после него ничего не должно быть.
В парном теге <head></head> пишется обязательный тег <title></title>. В теге тайтл пишется заголовок страницы, который отображается в выдаче поисковика и во вкладке браузера. В контейнере
<head></head> обычно находятся различные мета-теги и подключаются стили и скрипты, больше он не для чего не нужен.
Весь текст, графика и прочий код должен находиться внутри тегов <body></body>. В данном примере HTML документа создан заголовок первого уровня и абзац. Обратите внимание, что они находятся внутри тега <head>. В данном уроке не буду разбирать еще подробнее код, так как его предназначение ответить на вопрос: «Что такое HTML?».
Что такое HTML (и почему это важно)
HTML — основа всего, что происходит внутри вашего браузера. Если вы знаете HTML, то можете сами создавать сайты, красиво оформлять статьи и документы в интернете и даже устроиться на работу веб-разработчиком. Давайте копнём.
Как это работает
HTML — это язык гипертекстовой разметки документов (HyperText Markup Language). По-русски: это набор команд, которые говорят нашим браузерам, как рисовать сайты. Например:
language: HTML
<h2>Это заголовок</h2>
<p>Это абзац текста <a href="...">с гиперссылкой</a>.</p>
<ul>
<li>Это элемент ненумерованного списка</li>
<li>И ещё один</li>
</ul>
Скопировать код
Код скопирован
Слова внутри угловых скобок называются тегами: <h2>,<p> и т. д. Теги говорят браузеру, как именно нужно отобразить тот или иной текст, где разместить картинку или какую сделать кнопку.
Сохраним наш фрагмент как текстовый файл и откроем его в браузере. Браузер прочитает каждый тег и покажет нам страницу уже без них, но будет помнить, что они означают. Браузеры на компьютерах и смартфонах понимают эти команды примерно одинаково, поэтому в большинстве браузеров страница тоже будет смотреться одинаково. Например, написанный выше код будет выглядеть как-то так:
Это заголовок
Это абзац текста с гиперссылкой.
Это элемент ненумерованного списка
И ещё один
В мире есть много подобных языков: текстовые редакторы Microsoft Word и Apple Pages тоже используют собственные языки разметки, чтобы сохранить информацию об оформлении документа. Даже когда вы в них пишете простой текст, эти редакторы добавляют в документ невидимую информацию о внешнем виде текста.
Зачем нужен HTML
HTML — главный язык в интернете, на котором написано большинство документов. Каждый абзац текста в интернете, скорее всего, завёрнут в теги <p>…</p> и каждая ссылка, на которую вы нажимали, точно была завёрнута в теги <a>…</a>. Короче: это язык, на котором написан весь интернет.
Если бы не было HTML, нам бы пришлось придумать какой-то другой формат для обмена документами в Сети, поэтому в любом случае мы бы получили тот же HTML.
— Но я не обмениваюсь документами!
Тут есть терминологическая тонкость. Каждый раз, когда вы ходите по интернету через Chrome, может показаться, что вы переходите с одной страницы на другую. Но на самом деле вы их скачиваете. Вот как это работает:
Вы набираете yandex.ru в адресной строке браузера или печатаете прямо там свой поисковый запрос.
Какие-то серверы, принадлежащие Яндексу, создают для вас новый документ — главную страницу yandex.ru или страницу с результатами поиска. Этот документ отправляется на ваш компьютер.
Ваш браузер получает этот документ, он написан на языке HTML. Браузер читает все теги и инструкции и показывает результат на экране в виде пикселей. Вам может показаться, что это вы пришли в Яндекс, но на самом деле это Яндекс отправил вам документ с результатами поиска.
Вы нажимаете на ссылку в этом документе, и ваш браузер запрашивает новый документ с другого сервера. В ответ вам снова приходит HTML-документ.
Браузер открывает полученный документ в новой вкладке.
Кажется, что вы перешли на новый сайт, но на самом деле вы скачали с этого сайта документ, который выглядит как страница.
По-простому, в интернете вы никуда не «ходите». Скорее вы скачиваете документы, которые для вас формируют серверы разных компаний. Эти документы написаны на HTML.
Зачем знать HTML
Если вы знаете основные HTML-теги, то вы можете:
создавать свои и редактировать чужие страницы и целые сайты; настраивать готовые сайты и шаблоны;
контролировать внешний вид своих материалов при их публикации на разных сайтах;
стащить чей-то макет или фрагменты кода и использовать их в своих сайтах;
обходить некоторые пейволы и блокировки доступа к закрытому контенту.
Основные теги
Вот основные теги, которые используются в HTML:
<head>…</head> — служебная область на странице, которая не показывается в браузере, но влияет на страницу в целом. <title>…</title> — находится внутри <head>. Текст, который написан внутри этого тега, отображается в названии вкладки и в закладках браузера. <body>…</body> — видимая часть страницы. Всё, что вы видите, происходит внутри этих тегов.
<h2>…</h2>, <h3>…</h3> и так далее — заголовки разного уровня. <p>…</p> — абзац. <a href=»…»>…</a> — гиперссылка. Свойство «href» отвечает за адрес ссылки. <img src=»…»> — картинка. Свойство «src» отвечает за адрес, по которому лежит изображение, чтобы браузер мог запросить её оттуда, скачать и показать на экране. <ul><li>…</li></ul> — ненумерованный список с одним элементом внутри. Чтобы элементов было больше, добавьте <li>…</li> внутрь <ul>…</ul>. <ol><li>…</li></ol> — нумерованный список.
<div>…</div> — универсальный блок внутри страницы. Его можно настроить, чтобы содержимое выглядело и работало как угодно, от назойливой всплывашки до кнопки подтверждения. <span>…</span> — с помощью этого тега можно менять внешний вид выбранного текста. Например, выделить его жёлтым, как маркером на бумаге. <table><tbody><tr><td>…</td><td>…</td></tr></tbody></table> — минимальный набор тегов, чтобы сделать таблицу. TR отвечает за строки в таблице (table row), а TD — за ячейки в этой строке (table division). Мы вкладываем один тег в другой: ячейки живут внутри строк, строки — внутри <tbody>, и всё это живёт внутри тега <table>.
Ещё есть <TH>, который отвечает за первую строку таблицы (её называют головкой), но мы туда сейчас не полезем.
Нужно ли это учить?
В интернете полно информации про HTML, поэтому нет необходимости что-то заучивать специально. Но если вы будете регулярно что-то верстать в HTML, вы и сами всё выучите. Это как ходьба или езда на велосипеде.
Если подумать, то привычные веб-страницы в каком-то смысле умирают, и HTML медленно теряет свою актуальность. 20 лет назад веб-страницы были единственным способом разместить что-то в Сети, а для этого абсолютно точно нужно было знать HTML. Теперь у нас есть социальные сети и платформы для публикаций, которые не требуют знания HTML. А у тех платформ, которые требуют, есть WYSIWYG-редакторы — они сразу позволяют форматировать текст как в Microsoft Word. Поэтому в будущем может появиться поколение интернет-пользователей, которые ни разу в жизни не столкнутся с HTML-кодом в своих проектах.
С другой стороны, HTML очень легко выучить и начать использовать, а польза от него огромная и прямо сейчас. В будущем, может быть, исчезнут велосипеды, но кататься прямо сегодня никто не запрещает.
Скоро всё покажем!
Основы HTML
Содержание:
Основные понятия
История
Общая структура
Основные понятия
HTML(HyperText Markup Language) — язык разметки гипертекста — предназначен для создания Web-страниц. Под гипертекстом в этом случае понимается текст, связанный с другими текстами указателями-ссылками.
HTML представляет собой достаточно простой набор кодов, которые описывают структуру документа. HTML позволяет выделить в тексте отдельные логические части (заголовки, абзацы, списки и т.д.), поместить на Web-страницу подготовленную фотографию или картинку, организовать на странице ссылки для связи с другими документами.
HTML не задает конкретные и точные атрибуты форматирования документа. Конкретный вид документа окончательно определяет только программа-браузер на компьютере пользователя Интернета. HTML также не является языком программирования, но web-страницы могут включать в себя встроенные программы-скрипты на языкахJavascript и Visual Basic Script и программы-апплеты на языке Java.
Даже, если вы не собираетесь в дальнейшем редактировать «вручную» текст HTML (предполагая использовать графические редакторы), знание языка HTML даст вам возможность как лучше использовать эти средства, так и увеличит ваши шансы сделать HTML-документ более доступным и «читаемым» при просмотре браузерами разных фирм.
Основными компонентами HTML являются:
Тег (tag). Тег HTML это компонент, который командует Web- броузеру выполнить определенную задачу типа создания абзаца или вставки изображения.
Атрибут (или аргумент). Атрибут HTML изменяет тег. Например, можно выровнять абзац или изображение внутри тега.
Значение. Значения при
Структура HTML файла
Типичный HTML файл представляет собой текстовый файл с набором тегов. Теги — это особые команды, которые помогают браузеру отображать страницу. Благодаря тегам браузер понимает, в каком месте текст должен быть выделен жирным или курсивом, какой заголовок будет у страницы и как отображать таблицу. Их содержание не будет отображаться на странице браузера. Далее будут рассмотрены примеры содержания HTML файлов. Если вы не знаете, как создать HTML файл, то посмотрите статью «Как создать HTML файл». Существует большое количество тегов, часть из которых мы постараемся разобрать в курсе.
Рассмотрим пример упрощённого HTML файла, страницы сайта:
<!DOCTYPE html>
<html>
<head>
Свойства страницы, правила отображения, стили, скрипты, подключаемые файлы
</head>
<body>
Содержание страницы
</body>
</html>
Всё, что написано латиницей и заключено в скобки < > — это теги. Разберём пример по сторкам:
<!DOCTYPE html> — эта строчка говорит о том, что документ является html файлом. Следовательно, браузер сможет показать его как html страницу.
<html> … </html> — это парный тег (у него есть открывающая часть <html> и закрывающая </html>, которые различаются наличием слеша «/«). Внутри него заключено всё тело html документа.
<head> … </head> — всё, что находится внутри этого тега не выводится на экран. Но в нём содержится важная информация, которая поможет браузеру правильно показать страницу. К примеру, в этом теге могут находиться указание кодировки и языка страницы, правила отображения, стили и скрипты.
<body> … </body> — этот тег, внутри которого находится отображаемая область страницы.
Пример html страницы
Теперь разберём усложнённый пример html страницы, в котором будут добавлены несколько дополнительных тегов относительно предыдущего примера:
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Про мышей</title> </head> <body> Тише, мыши, кот на крыше,<br> а котята ещё выше.<br> Кот пошёл за молоком,<br> а котята кувырком.<br> Кот пришёл без молока,<br> а котята ха-ха-ха. </body> </html>
Относительно предыдущего примера в новом появилось несколько изменений: во второй строке стоит <html lang=»ru»>. У этого тега появился атрибут lang=»ru». Обратите внимание, что атрибут ставится внутри скобок тега < >. Как можно догадаться из названия, он указывает на то, что страница использует русский язык. Современные браузеры практически все могут безошибочно определить язык, поэтому в этом атрибуте нет особой необходимости, но привели его в качестве примера атрибута, которым может обладать тег.
Второе изменение касается содержания тега <head> … </head>. Здесь в первой строчке появилось указание на кодировку текста <meta charset="utf-8">. Тег «meta» называется метатегом.
Если сохранить html файл с одной кодировкой, а в «meta» написать другую, то все буквы в документе будут отображаться браузером как непонятные значки.
В блоке <head> … </head> также появилась строчка <title>Про мышей</title>. Этот тег указывает, какой заголовок будет у страницы браузера (у вкладки).
Внутри тега <body> … </body> появился текст стихотвориения. Каждая строчка этого стиха заканчивается на тег <br>, который говорит браузеру о том, что должна начаться новая строка. Если убрать все теги <br>, то браузер отобразит стихотворение как одну длинную строку без переносов. Обратите внимание, что тег <br> не имеет закрывающей пары по аналогии с <body> … </body> или <head> … </head>.
Ради практики создайте файл на своём компьютере с любым названием и расширением «.html». К примеру, «page.html». Затем откройте его любым текстовым редактором и вставьте в него код из примера выше. Сохраните файл. Кликните на файл два раза и он откроется в браузере. Теперь измените что-либо в файле, сохраните и перезагрузите страницу в браузере.
Комментарии в HTML коде
Существует способ оставлять комментарии в HTML коде. Они могут быть полезными для разработчика. К примеру, комментарии о том, что необходимо доделать на сайте. Эти комментарии не видны обычным пользователям на странице браузера, но видны в HTML коде. Задать комментарий можно через такую конструкцию: <!— текст_комментария —>. Пример комментариев:
<!DOCTYPE html> <html> <head> <!-- Комментарий в разделе head --> </head> <!-- Комментарий между блоками head и body--> <body> <!-- Комментарий в теле страницы --> </body> </html>
Комментарий может находиться в любой части сайта.
Комментировать можно всё, включая теги. Можно скрывать целые части страниц — ограничений нет.
Основы HTML — Изучение веб-разработки
HTML (Hypertext Markup Language) — это код, который используется для структурирования и отображения веб-страницы и её контента. Например, контент может быть структурирован внутри множества параграфов, маркированных списков или с использованием изображений и таблиц данных. Как видно из названия, эта статья даст вам базовое понимание HTML и его функций.
Что такое HTML на самом деле?
HTML не является языком программирования; это язык разметки, и используется, чтобы сообщать вашему браузеру, как отображать веб-страницы, которые вы посещаете. Он может быть сложным или простым, в зависимости от того, как хочет веб-дизайнер. HTML состоит из ряда элементов, которые вы используете, чтобы вкладывать или оборачивать различные части контента, чтобы заставить контент отображаться или действовать определенным образом. Ограждающие теги могут сделать слово или изображение ссылкой на что-то еще, могут сделать слова курсивом, сделать шрифт больше или меньше и так далее. Например, возьмем следующую строку контента:
Моя кошка очень раздражена
Если бы мы хотели, чтобы строка стояла сама по себе, мы могли бы указать, что это абзац, заключая его в теги абзаца:
<p>Моя кошка очень раздражена</p>
Анатомия HTML элемента
Давайте рассмотрим элемент абзаца более подробно.
Главными частями нашего элемента являются:
Открывающий тег (Opening tag): Состоит из имени элемента (в данном случае, «p»), заключенного в открывающие и закрывающие угловые скобки. Открывающий тег указывает, где элемент начинается или начинает действовать, в данном случае — где начинается абзац.
Закрывающий тег (Closing tag): Это то же самое, что и открывающий тег, за исключением того, что он включает в себя косую черту перед именем элемента. Закрывающий элемент указывает, где элемент заканчивается, в данном случае — где заканчивается абзац. Отсутствие закрывающего тега является одной из наиболее распространенных ошибок начинающих и может приводить к странным результатам.
Контент (Content): Это контент элемента, который в данном случае является просто текстом.
Элемент(Element): Открывающий тег, закрывающий тег и контент вместе составляют элемент.
Элементы также могут иметь атрибуты, которые выглядят так:
Атрибуты содержат дополнительную информацию об элементе, которую вы не хотите показывать в фактическом контенте. В данном случае, class это имяатрибута, а editor-note это значение атрибута. Класс позволяет дать элементу идентификационное имя, которое может позже использоваться, чтобы обращаться к элементу с информацией о стиле и прочих вещах.
Атрибут всегда должен иметь:
Пробел между ним и именем элемента (или предыдущим атрибутом, если элемент уже имеет один или несколько атрибутов).
Имя атрибута, за которым следует знак равенства.
Значение атрибута, заключенное с двух сторон в кавычки.
Вложенные элементы
Вы также можете располагать элементы внутри других элементов — это называется вложением. Если мы хотим заявить, что наша кошка очень раздражена, мы можем заключить слово «очень» в элемент <strong> , который указывает, что слово должно быть сильно акцентированно:
Вы, однако, должны убедиться, что ваши элементы правильно вложены: в примере выше мы открыли первым элемент <p>, затем элемент <strong>, потом мы должны закрыть сначала элемент <strong>, затем <p>. Приведенное ниже неверно:
Элементы должны открываться и закрываться правильно, поэтому они явно располагаются внутри или снаружи друг друга. Если они перекрываются, как в примере выше, ваш веб-браузер будет пытаться сделать наилучшее предположение на основе того, что вы пытались сказать, что может привести к неожиданным результатам. Так что не стоит этого делать!
Пустые элементы
Некоторые элементы не имеют контента, и называются пустыми элементами. Возьмем элемент <img>, который уже имеется в нашем HTML:
Он содержит два атрибута, но не имеет закрывающего тега </img>, и никакого внутреннего контента. Это потому, что элемент изображения не оборачивает контент для влияния на него. Его целью является вставка изображения в HTML страницу в нужном месте.
Анатомия HTML документа
Мы завершили изучение основ отдельных HTML элементов, но они не очень полезны сами по себе. Теперь мы посмотрим, как отдельные элементы объединяются в целую HTML страницу. Давайте вернемся к коду, который мы записывали в наш index.html (с которым мы впервые встретились в статье Работа с файлами):
<!DOCTYPE html> — доктайп. В прошлом, когда HTML был молод (около 1991/1992), доктайпы должны были выступать в качестве ссылки на набор правил, которым HTML страница должна была следовать, чтобы считаться хорошим HTML, что могло означать автоматическую проверку ошибок и другие полезные вещи. Однако в наши дни, никто не заботится об этом, и они на самом деле просто исторический артефакт, который должен быть включен для того, что бы все работало правильно. На данный момент это все, что вам нужно знать.
<html></html> — элемент <html>. Этот элемент оборачивает весь контент на всей странице, и иногда известен как корневой элемент.
<head></head> — элемент <head>. Этот элемент выступает в качестве контейнера для всего, что вы пожелаете включить на HTML страницу, но не являющегося контентом, который вы показываете пользователям вашей страницы. К ним относятся такие вещи, как ключевые слова и описание страницы, которые будут появляться в результатах поиска, CSS стили нашего контента, кодировка и многое другое.
<body></body> — элемент <body>. В нем содержится весь контент, который вы хотите показывать пользователям, когда они посещают вашу страницу, будь то текст, изображения, видео, игры, проигрываемые аудиодорожки или что-то еще.
<meta charset="utf-8"> — этот элемент устанавливает UTF-8 кодировку вашего документа, которая включает в себя большинство символов из всех известных человечеству языков. По сути, теперь документ может обрабатывать любой текстовый контент, который вы в него вложите. Нет причин не устанавливать её, так как это может помочь избежать некоторых проблем в дальнейшем.
<title></title> — элемент <title>. Этот элемент устанавливает заголовок для вашей страницы, который является названием, появляющимся на вкладке браузера загружаемой страницы, и используется для описания страницы, когда вы добавляете ее в закладки/избранное.
Изображения
Давайте снова обратим наше внимание на элемент изображения:
Как было сказано раньше, код встраивает изображение на нашу страницу в нужном месте. Это делается с помощью атрибута src (source, источник), который содержит путь к нашему файлу изображения.
Мы также включили атрибут alt (alternative, альтернатива). В этом атрибуте, вы указываете поясняющий текст для пользователей, которые не могут увидеть изображение, возможно, по следующим причинам:
У них присутствуют нарушения зрения. Пользователи со значительным нарушением зрения часто используют инструменты, называемые Screen Readers (экранные дикторы), которые читают для них альтернативный текст.
Что-то пошло не так, в результате чего изображение не отобразилось. Например, попробуйте намеренно изменить путь в вашем атрибуте src, сделав его неверным. Если вы сохраните и перезагрузите страницу, то вы должны увидеть что-то подобное вместо изображения:
Альтернативный текст — это «пояснительный текст». Он должен предоставить читателю достаточно информации, чтобы иметь представление о том, что передает изображение. В этом примере наш текст «My test image» («Моё тестовое изображение») не годится. Намного лучшей альтернативой для нашего логотипа Firefox будет «The Firefox logo: a flaming fox surrounding the Earth» («Логотип Firefox: огненный Лис вокруг Земли»).
Сейчас попробуйте придумать более подходящий альтернативный текст для вашего изображения.
Разметка текста
В этом разделе рассмотрим некоторые из основных HTML элементов, которые вы будете использовать для разметки текста.
Заголовки
Элементы заголовка позволяют вам указывать определенные части вашего контента в качестве заголовков или подзаголовков. Точно так же, как книга имеет название, названия глав и подзаголовков, HTML документ может содержать то же самое. HTML включает шесть уровней заголовков <h2>–<h6>, хотя обычно вы будете использовать не более 3-4 :
Теперь попробуйте добавить подходящее название для вашей HTML страницы, чуть выше элемента <img>.
Абзацы
Как было сказано раньше, элемент <p> предназначен для абзацев текста; вы будете использовать их регулярно при разметке текстового контента:
<p>Это одиночный абзац</p>
Добавьте свой образец текста (вы создавали его в статье Каким должен быть ваш веб-сайт?) в один или несколько абзацев, расположенных прямо под элементом <img>.
Списки
Большая часть веб-контента является списками и HTML имеет специальные элементы для них. Разметка списка всегда состоит по меньшей мере из двух элементов. Наиболее распространенными типами списков являются нумерованные и ненумерованные списки:
Ненумерованные списки — это списки, где порядок пунктов не имеет значения, как в списке покупок. Они оборачиваются в элемент <ul>.
Нумерованные списки — это списки, где порядок пунктов имеет значение, как в рецепте. Они оборачиваются в элемент <ol>.
Каждый пункт внутри списков располагается внутри элемента <li> (list item, элемент списка).
Например, если мы хотим включить часть следующего фрагмента абзаца в список:
<p>Mozilla, мы являемся мировым сообществом технологов, мыслителей и строителей, работающих вместе ... </p>
Мы могли бы изменить разметку на эту:
<p>Mozilla, мы являемся мировым сообществом</p>
<ul>
<li>технологов</li>
<li>мыслителей</li>
<li>строителей</li>
</ul>
<p>работающих вместе ... </p>
Попробуйте добавить упорядоченный или неупорядоченный список на свою страницу.
Ссылки
Ссылки очень важны — это то, что делает Интернет Интернетом. Чтобы добавить ссылку, нам нужно использовать простой элемент — <a> — a это сокращение от «anchor» («якорь»). Чтобы текст в вашем абзаце стал ссылкой, выполните следующие действия:
Выберите некоторый текст. Мы выбрали текст «Манифест Mozilla».
Оберните текст в элемент <a>, например так:
<a>Манифест Mozilla</a>
Задайте элементу <a> атрибутhref, например так:
<a href="">Манифест Mozilla</a>
Заполните значение этого атрибута веб-адресом, на который вы хотите указать ссылку:
Вы можете получить неожиданные результаты, если в самом начале веб-адреса вы опустите https:// или http:// часть, называемую протоколом. После создания ссылки, кликните по ней, чтобы убедиться, что она направляет вас туда, куда вы хотели.
href сначала может выглядеть довольно непонятым выбором для имени атрибута. Если у вас возникли проблемы с тем, чтобы запомнить его, можете запомнить, что атрибут href образуется как hypertext reference («гипертекстовая ссылка»).
Теперь добавьте ссылку на вашу страницу, если вы еще не сделали этого.
Заключение
Если вы следовали всем инструкциям в этой статье, то вы должны увидеть в конечном итоге страницу, аналогичную рисунке ниже (вы также можете посмотреть ее здесь):
Если вы застряли, вы всегда можете сравнить свою работу с нашим готовым примером кода на GitHub.
Здесь вы узнали только самую поверхность HTML. Чтобы узнать больше, перейдите на страницу Обучение HTML: руководства и уроки.
В этом модуле
Как создать HTML файл
По своему содержанию HTML файл является текстовым файлом. То есть его можно открыть и изменять в любом редакторе текста. К примеру, в «блокноте» на системе Windows. Поэтому создание HTML файла ни чем не отличается от создания простого текстового документа.
Рассмотрим пошаговую инструкцию создания, просмотра и редактирования HTML файла. Рассматривать задачу будем с позиции пользователя операционный системы Windows.
Создать HTML файл
Создайте на компьютере текстовый документ через простейший текстовый редактор. К примеру, через блокнот. Войдите в папку, где сохранён только что созданный текстовый документ, и переименуйте его, добавив в самый конец названия файла «.html«. При этом удалив старое расширение «.txt«.
Другими словами, если текстовый документ назывался «Новый текстовый документ.txt«, то переименуете его в «Новый текстовый документ.html«.
Обратите внимание на то, что по умолчанию в системе Windows скрыты расширения файлов. Поэтому вместо имени файла «Новый текстовый документ.txt» вы можете увидеть только «Новый текстовый документ». Чтобы включить отображение расширений файлов, нажмите на закладку «Вид» в проводнике файлов, а затем поставьте галочку на пункте «Расширения имён файлов»
Редактировать HTML файл
Кликните правой кнопкой мыши на html файл. Выберите пункт «Открыть с помощью». В этом пункте выберите блокнот или другой редактор простейших текстовых файлов. Если такого пункта нет, то нажмите «Выбрать другое приложение» и выберите блокнот в списке приложений.
Можно редактировать HTML файл и в других текстовых редакторах. К примеру, в MS Office Word. Но есть вероятность, что будут проблемы с сохранением файла: редактор самостоятельно будет вставлять ненужные теги при сохранении. Поэтому рекомендуем использовать простейшие программы для редактирования текстовых файлов. К примеру, «блокнот».
HTML файл является обычным текстовым файлом. Поэтому вы можете редактировать и сохранять его без использования специальных программ.
Посмотреть HTML файл в браузере
Чтобы посмотреть как выглядит сохранённый HTML файл в браузере, кликните на него два раза. Загрузится браузер и отобразит html файл. Если этого не произошло и файл открылся в текстовом редакторе, то кликните на файл правой кнопкой мыши. Затем выберите пункт «Открыть с помощью», в котором выберите свой браузер. Если в этом списке браузера нет, то нажмите «Выбрать другое приложение» и выберите свой браузер из всех установленных на компьютере приложений.
При сохранении HTML файла нет нужды закрывать его в браузере. Вы можете одновременно изменять содержимое файла через текстовый редактор и просматривать результаты в браузере. Только не забудьте обновить страницу в браузере после внесения изменений в файл (кнопка — «F5»).
О том что именно должен содержать стандартный HTML файл читайте в статье «Структура HTML файла».
Методичка по «Основы HTML»
не несут в себе исключительно функцию выравнивания элементов. Но поскольку в этой главе мы хотели освоить с вами только выравнивание, то к другим возможностям использования
и
мы вернемся гораздо позже, т.к. это уже более сложная тема для разговора.
ФИО
Привет!Добро пожаловать!
HTML — стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц создаются при помощи языка HTML (или XHTML). Язык HTML интерпретируется браузером и отображается в виде документа, в удобной для человека форме. p> body> html>
Контрольные вопросы.
1) Для чего служит тег <p>?
2) Для чего служит тег <div>?
3) Что такое параграф в документе?
4) Зачем нужно центрирование текста?
Практическое задание.
Создать файл “privet3.html”, в котором выполнить следующие задания:
1) В заголовке окна браузера должна быть записана ваша фамилия.
2) Страница должна содержать все основные теги, пройденные на 3) уроке.
4) Напечатать несколько строчек с различным размещением по странице.
6) Фон должен быть выполнен цветом, отличным от белого.
7) Цвет букв должен быть выполнен цветом, отличным от белого.
8) Страница должна содержать краткую информацию об авторе.
На этом занятии мы научимся выделять текст при помощи заголовков и узнаем еще одну функцию тэга .Начнем с заголовков.
Существуют шесть уровней заголовков:
текст
текст
текст
текст
текст
Итак, h2 – самый важный, H6 – наименее важный. Вводя заголовки в текст, вы позволяете вашему посетителю более легко ориентироваться на сайте. Заголовками вы определяете структуру внутри текста.
Давайте теперь введем заголовок в наш документ. Выделим слово «Привет!» в нашем документе:
Привет!<h4>
Заголовки предназначены для выделения небольшой части текста (строки, фразы). Но, если вы хотите выделить большой фрагмент текста, то заголовки для этого использовать нельзя. Для этого предназначен атрибут size тэга …, который устанавливает желаемый размер шрифта:
текст текст текст текст текст текст текст
После того, как мы узнали о том, как задавать размер шрифта, настало время поговорить о том, как определить стиль шрифта. Мы узнаем, как выделить текст курсивом, подчеркнуть, перечеркнуть, сделать полужирным, как задавать моноширинный текст, как делать верхний и нижний индексы – все эти тэги, как правило, рассматриваются вместе, и мы не будем отступать от традиций.
Сначала рассмотрим курсив и полужирный текст:
Полужирный текст Наклонный текст (курсив)
Как видите, все просто. Можете их сами «понатыкать» в тексте, где хочется, для пробы.
ФИО
Привет!Добро пожаловать!
<b>HTMLb> — стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц создаются при помощи языка HTML <i>(или XHTML)i>. Язык HTML интерпретируется браузером и отображается в виде документа, в удобной для человека форме. p> body> html>
Теперь пара строк о моширинном шрифте. Что это за шрифт? Это шрифт с символами одинаковой фиксированной ширины, как шрифт у пишущей машинки. А тэг для него следующий:
моноширинный шрифт
Также моноширинным шрифтом отображается текст, заключенный в тэг
…
.
текст (куча пробелов) текст
текст (куча пробелов) текст
текст (куча пробелов) текст
У тэга
есть одна замечательная особенность: текст, заключенный в него, выводится с точностью до пробела так, как вы его набили в блокноте. Этот тэг вам может быть полезен, допустим, для форматирования стихотворений.
К одному фрагменту текста может применяться сразу несколько тэгов.
текст
Итак, у нас еще осталось несколько тэгов, которые мы должны освоить на этой ступеньке, прежде чем двинуться дальше.
Подчеркнутый текст вводится при помощи тэга .
Подчеркнутый текст
Тэги и представляют текст перечеркнутым шрифтом. Можете использовать какой вам угодно из них, принципиальной разницы между ними нет.
Перечеркнутый
Перечеркнутый
Тэг представляется крупным шрифтом, а малым шрифтом относительно основного текста.
Малый
Нормальный текст
Большой
Тэги Sup и Sub — определяют верхний и нижний индексы. Sup — верхний, Sub — нижний. Где они могут пригодиться? Ну, например, при написании какой-нибудь формулы — H2O.
Верхний индекс sup
Нижний индекс sub
Контрольные вопросы.
1) Что такое заголовок документа? Каким тегом он описывается?
2) С помощью какого тега можно изменять размер текста?
3) Для чего служат теги <i> и <b>?
4) Для чего нужен тег <pre>?
Практическое задание.
Создать файл “privet4.html”, в котором выполнить следующие задания:
1) В заголовке окна браузера должна быть записана ваша фамилия.
2) Страница должна содержать все основные теги, пройденные на уроке.
3) Страница должна содержать краткую информацию об авторе.
4) Текст страницы можно взять любой.
Мы уже с вами ознакомились с атрибутами size и color для тэга . На этом занятии мы завершим наше знакомство с тэгом , изучив атрибут face. С помощью face мы можем задать тип шрифта.
Попробуйте ввести следующую конструкцию в наш документ для части текста, чтобы задать шрифт Arial.
текст (шрифт Arial)
Какие же типы шрифтов являются стандартными, и, по идее, должны находиться на компьютере каждого пользователя — это:
— Times;
— Times New Roman;
— Arial;
— Helvetica;
— Courier;
— Verdana;
— Tahoma;
— Cosmic Sans;
— Garamond
Вы можете безбоязненно использовать любой из них. В атрибуте face можно указать сразу несколько типов шрифтов:
текст (шрифт Arial)
В этом случае если у посетителя не окажется на компьютере шрифта Arial, то текст будет отображен шрифтом Verdana. Если и Verdana нет на компьютере вашего посетителя, то текст будет отображен шрифтом Courier. Т.е. в атрибуте face мы можем задать список разделенных запятыми названий шрифтов, которые броузер вашего посетителя должен попытаться найти у него на компьютере и отобразить в порядке приоритета.
Можно ли установить свой тип шрифта, допустим, какой-то экзотический? Можно, но ваш посетитель его не увидит, т.к. на его компьютере этого шрифта, возможно, нет. Конечно, можно предложить вашему посетителю загрузить этот чудесный экзотический шрифт, когда посетитель зайдет на вашу страницу. Но большинство ваших посетителей отклонит такое предложение, т.к. никому не захочется закачивать несколько лишних мегабайт на свой компьютер ради ваших капризов. И в итоге, ваш посетитель увидит вместо вашего экзотического шрифта другой шрифт, который может быть просто ужасным.
Вывод: пользуйтесь стандартным набором шрифтов, их более чем достаточно. Тем более что красота вашей страницы зависит не от типа шрифта, а от качества оформления (дизайна).
Однако если вам нужно ввести на страницу лишь несколько надписей, выполненных вашим экзотическим шрифтом, то сделайте их картинками (в графическом редакторе вы пишете нужным шрифтом нужную надпись и сохраняете ее как картинку).
Теперь поговорим о картинках. Вставить картинку в документ можно следующим образом:
Вместо my.jpg мы можем подставить имя любой картинки (me.gif, main.png). Самое главное понять, что все расположенное между кавычками — ссылка (путь к картинке). Наш пример говорит о том, что картинка лежит в том же каталоге (директории, папке), в которой лежит и наш документ. Если картинка лежит в поддиректории (в папке, которая лежит в вашей основной папке), то ссылка на неё будет выглядеть так:
Если картинка лежит на уровень выше, а документ находится в поддиректории, то ссылка на неё будет такой:
Если картинка лежит на другом сайте, то путь прописывается полностью:
Для вашего удобства кладите картинку в ту же папку, что и документ, тогда путаницы будет меньше. Также хочется обратить ваше внимание на то, что MY.jpg, my.JPG, my.jpg и MY.JPG – это разные имена файлов. Никогда не забывайте, что регистр нужно учитывать.
Вставим в наш пример любую картинку.
ФИО
Привет! Добро пожаловать!
«>HTML</b> — стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц создаются при помощи языка HTML <i>(или XHTML)i>. Язык HTML интерпретируется браузером и отображается в виде документа, в удобной для человека форме. p> body> html>
Картинки тоже можно выравнивать по странице с помощью атрибута align.
Это означает, что картинка будет прижата к левому краю экрана, а текст будет обтекать ее справа. Чтобы сделать наоборот (картинка справа, текст слева) надо прописать right.
Но это не все: текст может располагаться внизу картинки (это по умолчанию) — (1), посередине — (2), и вверху — (3):
(1) — (2) — (3) —
Кроме атрибута align для тэга <img> можно ввести еще несколько атрибутов.
(1) — атрибут vspace — задает расстояние между текстом и рисунком (по вертикали). Расстояние задается в пикселях. Pixel — минимальная единица изображения, точка. Например, разрешение экрана 800х600 — 800 на 600 точек. В нашем примере расстояние равно 10 пикселям.
(2) — атрибут hspace — тоже задает расстояние между текстом и рисунком, но по горизонтали. Расстояние задается в пикселях. В нашем примере оно равно 30 пикселям (точкам).
(3) — атрибут alt — краткое описание картинки. Если навести курсором мыши на рисунок, и так подержать его (курсор) несколько секунд, выскочит описание картинки. В нашем случае это будет фраза — «моя фотография». Если параметр alt не задавать, описания не будет. Но умные люди говорят, что описание картинкам задавать следует (особенно, если это кнопки), т.к. есть особенные люди, которые бродят по интернету с отключенной графикой. Без параметра alt им не будет видно на что нажимать (если картинка является ссылкой или кнопкой в меню), т.к. картинка не отображается, а при заданном alt, можно увидеть надпись, для чего картинка предназначена.
(4) — атрибут width — ширина самой картинки (в пикселях). Если ширину не задавать специально, то по умолчанию она будет равна реальной ширине картинки (а так вы можете ее сделать или уже, или шире).
(5) — атрибут height — высота самой картинки (тоже в пикселях). Так же как в случае с width высоту (height) картинки можно и не задавать. Правда, те же умные люди говорят, что размеры картинок следует задавать, для тех же особенных людей с отключенной графикой…
(6) — атрибут border — рамка вокруг самой картинки (в пикселях). Можно не задавать. Однако, по умолчанию, рамка вокруг картинки есть всегда. И если вы хотите убрать ее, то выставляйте атрибут border равным нулю.
Как мы помним, атрибуты для одного тэга могут употребляться одновременно друг с другом, чтобы избежать путаницы продемонстрирую наглядно на нашей страничке. Введем следующие атрибуты для нашей картинки.
Наша картинка будет прижата к левому краю экрана, текст будет обтекать ее справа, расстояние до текста по горизонтали — 30 пикселей, по вертикали — 5 пикселей (чтобы красиво все смотрелось), ну, и если вы наведете на картинку курсор, то выскочит надпись — «моя фотография».
Так же картинку можно сделать фоном документа. Это «безобразие» прописывается в открывающем тэге body:
background=»ваш_фон.jpg»>
Контрольные вопросы.
1) Что такое шрифты и для чего они нужны?
2) Как в документе можно поменять шрифт?
3) Как в документ вставить изображение?
4) Опишите основные атрибуты тега <img>.
Практическое задание.
Создать файл “privet5.html”, в котором выполнить следующие задания:
1) В заголовке окна браузера должна быть записана ваша фамилия.
2) Страница должна содержать все основные теги, пройденные на уроке.
3) В документе обязательно должно присутствовать изображение.
4) Тег <img> следует использовать с атрибутами.
5) Тест должен быть выполнен различными шрифтами.
6) Текст страницы можно взять любой.
Наша страничка может состоять из нескольких документов. Один из них главный (index.html) — он открывается первым и должен обязательно лежать на вашем сайте в интернете. Остальные документы вы можете называть как угодно (photos.html, about_me.html, my_pets.html, friends.html, gh516h657gd.html). Они все могут лежать в одной директории (папке), а могут в разных директориях.
При помощи ссылок мы связываем эти документы. Так с главной страницы по ссылкам мы можем перейти на страницу с фотографиями, с этой страницы мы можем перейти обратно на главную страницу, или, допустим, на страницу с нашими стихотворениями и т.д.
Ссылкой на эти другие документы (части нашей странички) может быть текст (фраза, слово), а может быть и картинка. На этой ступеньке мы рассмотрим только текстовую ссылку.
Для начала создадим новый документ (в нашем примере prf.html) в той же директории (папке), где находится наш главный документ index.html. Содержание документа выдумайте сами, у вас для этого уже достаточно знаний.
Пусть prf.html — документ с вашими фотографиями. Тогда мы можем без зазрения совести фразу «посмотреть мои фотографии» сделать ссылкой на prf.html:
посмотреть мои фотографии
Тэг … делает ссылкой заключенную в него картинку или фразу (текст). Принципы прописывания пути мы уже знаем:
(1) — мои фотографии (2) — мои фотографии (3) — ya.ru/prf.html»>мои фотографии
В случае (1) документ лежит в той же директории (папке), что и документ, в котором мы ссылаемся на prf.html, в случае (2) документ лежит в поддиректории /photos, в случае (3) мы ссылаемся на сайт http://www.ya.ru, где лежит нужный нам документ.
Первые два примера (1) и (2) – называют относительными путями. (3) – абсолютный, т.е. указанный полностью, включая имя сайта (в нашем случае — http://www.ya.ru/). Абсолютный путь мы используем, когда ссылаемся на чужие странички, относительный мы используем, когда ссылаемся на документы внутри нашего сайта.
Для всех ссылок в нашем документе мы можем прописать цвета: link — цвет просто ссылки, alink — цвет активной ссылки (нажатой), vlink — цвет уже посещенной ссылки.
Как и цвет для всего текста в документе, цвета ссылок мы прописываем в . В нашем примере цвета для просто ссылки, активной и посещенной — одинаковые, но они могут быть разными – это на ваше усмотрение.
Итак, пропишем цвета для ссылки и саму ссылку в нашем документе:
моя фотография»>HTML — стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц создаются при помощи языка HTML <i>(или XHTML)i>. Язык HTML интерпретируется браузером и отображается в виде документа, в удобной для человека форме. <br><br><br>
Здесь можно посмотреть фотографии. p> body> html>
Как вы помните, мы можем задать различные цвета для разных блоков текста в нашем документе (…). Для текстовых ссылок мы тоже можем задать разный цвет – это делается при помощи тэга и его атрибута color:
посмотреть мои фотографии
Обратите внимание, … — прописывается внутри тэга …, если вы пропишите иначе, то у вас не получится задать вашей ссылке цвет отличный от цвета других ссылок в документе.
Контрольные вопросы.
1) Что такое ссылки и для чего они нужны?
2) С помощью какого тега можно создать ссылку?
3) Как в документ вставить изображение?
4) Как можно изменить шрифт ссылки?
5) Как сделать картинку ссылкой?
Практическое задание.
Создать файл “privet6.html”, в котором выполнить следующие задания:
1) В заголовке окна браузера должна быть записана ваша фамилия.
2) Страница должна содержать все основные теги, пройденные на уроке.
3) Использовать как текстовые ссылки, так и графические.
4) Ссылки в документе должны быть выполнены разными шрифтами.
5) Тег <img> следует использовать с атрибутами.
6) Цвета ссылок задавать в теле документа.
7) Текст должен быть выполнен различными шрифтами.
8) Текст страницы можно взять любой.
Далее мы научимся прописывать ссылки на почтовый ящик (e-mail), а также узнаем, как сделать подсказку к текстовой ссылке, которая будет появляться при наведении на нее.
Ссылка на ваш почтовый ящик прописывается немного иначе, чем ссылка на другой документ (страницу, сайт):
Запомните это раз и навсегда и не пытайтесь ее прописать по-другому. Ссылка на документ, картинку или файл — одно дело, а ссылка на почтовый ящик – другое.
Теперь посмотрите в броузере, что у нас получилось. Картинка primtocodephoto.gif стала ссылкой. Если вы заметили (а если не заметили, то обратите внимание): вокруг картинки появилась рамочка. Эту рамочку можно оставить, если вам она нравится, а можно убрать, если вы зададите картинке атрибут border=»0″.
моя фотография» border=»0″>
Цвет рамки вокруг картинки задается атрибутом bordercolor, например:
Если вы уже достаточно попутешествовали по интернету, то вы должны были заметить, что ссылка может быть не только на документ с расширением *.html, но и на многие другие (*.doc, *.mp3, *.jpg, *.gif, *.txt, *.zip, *.exe и т.д.) Как это делается? Да все по тому же известному нам принципу:
скачать песню
Знаете, что будет при нажатии на такую ссылку? У пользователя появится окошко, предлагающее сохранить ему музыкальный файл на его компьютер. Т.е. если файл не является текстовым документом (*.doc, *.txt) или, например, *.html документом, то браузер вашего пользователя обязательно предложит ему скачать такой файл. Кстати, вы, возможно, удивитесь, но если адрес указан таким способом:
музыкальный сайт
То это означает, что в указанном каталоге есть файл вроде index.html, который загрузится по умолчанию, когда пользователь зайдет по указанному адресу.
Но поговорим особо о картинках, многие из вас, наверное, сталкивались с таким явлением: когда нажимаешь на маленькую картинку, то загружается большая картинка в том, же или в новом окне. Как это делается? Тут никаких хитростей: делаем ссылкой картинку (допустим small.jpg) и ссылаемся на другую картинку (допустим big.jpg):
В этом случае большая картинка откроется в том же окне. Но как же сделать так, чтобы картинка (или любой другой файл-документ) открылась в новом окне? Дело в том, что у тэга … есть атрибут target:
Итак, target=»_blank» — указывает на то, что документ (картинка в нашем случае), на который ведет ссылка, откроется в новом окне браузера. В наш большой пример мы это вводить не будем, т.к. считаем, что вы уже можете и должны самостоятельно подставлять в код изменения.
Контрольные вопросы.
1) Что такое ссылки, и для чего они нужны?
2) Как прописывается ссылка на почтовый ящик?
3) Как сделать картинку ссылкой?
Практическое задание.
Создать файл “privet7.html”, в котором выполнить следующие задания:
1) В заголовке окна браузера должна быть записана ваша фамилия.
2) Страница должна содержать все основные теги, пройденные на 3) уроке.
4) Использовать как текстовые ссылки, так и графические.
5) Ссылки в документе должны быть выполнены разными шрифтами.
6) Тег <img> следует использовать с атрибутами.
7) Цвета ссылок задавать в теле документа.
8) Сделать ссылку на графический файл.
9) Сделать ссылку на текстовый файл.
10) Сделать ссылку на музыкальный файл.
11) Текст должен быть выполнен различными шрифтами.
12) Текст страницы можно взять любой.
Мы уже говорили о картинках и том, как картинку сделать ссылкой. Теперь мы поговорим о картах. Вы, может быть, знаете, что можно сделать так, чтобы при нажатии на разные области (части) одной и той же картинки, вы попадали на разные страницы, это называется навигационная карта. Разговор о том, как создавать навигационные карты, растянется на несколько глав, но не пугайтесь, на самом деле это совсем не трудно.
Навигационные карты задаются тэгом . Тэг включает себя тэг(и) , которые определяют геометрические области внутри карты (в этой главе это будут прямоугольники) и ссылки, связанные с каждой областью (т.е. куда вы попадете при нажатии на какую-либо часть нашей карты).
…
Для начала нам нужна картинка. Возьмем такую:
Картинка простая — всего лишь голубой прямоугольник (240х140 пикселов). Представьте, что прямоугольники №1 и №2, нарисованные на нем, — это изображения каких-либо кнопок, а голубое — какой-то сложный фон. Чтобы не создавать сложную таблицу (о них, о таблицах, мы поговорим немного позднее), вы решили не резать картинку на много частей и не вычленять кнопки, вы решили поступить проще — создать навигационную карту, где области №1 и №2 (прямоугольники) будут ссылками.
Итак, мы уже знаем, что геометрические области и то, куда пользователь попадет при нажатии на них, определяет тэг , естественно, при помощи своих атрибутов. Это атрибуты shape и coords.
Атрибут shape определяет форму области: будет ли она прямоугольником (shape=»rect»), кругом (shape=»circle») или многоугольником (shape=»poly»). Сейчас мы будем работать с прямоугольной областью, поэтому:
<map
Что такое HTML
HTML обозначает H yper T ext M arkup L anguage
HTML — это стандартный язык разметки для веб-страниц
HTML элементы являются строительными блоками HTML-страниц
HTML-элементы представлены <> тегами
HTML-элементы
Элемент HTML представляет собой тег начала и тег конца с содержанием между:
Это заголовок
Стартовый тег
Содержание элемента
Конечная метка
Это заголовок
Это абзац.
HTML-атрибутов
HTML-элементы могут иметь атрибутов
Атрибуты
предоставляют дополнительную информацию об элементе
Атрибуты входят в пары имя / значение, например charset = «utf-8»
