Html коды для создания сайта: Как научиться читать код сайта и зачем это нужно, если вы не программист

Содержание

Как научиться читать код сайта и зачем это нужно, если вы не программист

Зачем понимать исходный код

Сначала поговорим о том, зачем вам нужно что-то знать о коде, если вы не программист. Да, здорово расширять свои границы. Но главное, что вы можете получить из этого знания — пользу для бизнеса. 

Зная, как устроен исходный код, вы сможете:

  • Больше понимать в SEO-продвижении.

Если просто смотреть на страницу сайта, вы не сможете проанализировать, правильно ли настроено SEO-продвижение, а инструменты для анализа не всегда могут быть под рукой. Только в коде проверяют, на месте ли метаданные и обязательные элементы — основная информация для успешного SEO. Поэтому заглядывать в исходный код становится обычной практикой маркетологов или владельцев бизнеса, которые сами занимаются продвижением.

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

  • Анализировать сайты конкурентов на более глубоком уровне.

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

  • Составлять грамотные ТЗ для разработчика самостоятельно.

Вам будет легче представить и объяснить разработчику, как вы видите свою задумку. А значит, на финальной стадии работ не окажется, что всё сделано не так, а деньги и время уже потрачены.

  • Лучше понимать программистов.

Когда программист будет объяснять вам, в каких правках нуждается сайт компании, вы всё поймёте и сможете на равных обсудить это с сотрудником. Вам будет проще нанимать человека на IT-должность и разбираться в сметах на обслуживание сайта.  

  • Экономить, самостоятельно внося изменения в сайт.

Экономнее изучить азы программирования и быстро устранять проблемы самостоятельно вместо того, чтобы нанимать программиста для выполнения небольших, но частых задач. Например, менять размеры баннеров или цвет текста на странице.

Что такое исходный код сайта

Национальная библиотека им. Н. Э. Баумана говорит, что исходный код — это текст компьютерной программы, который может прочитать человек, на языке программирования или языке разметки.

Именно код скрывается за внешней стороной любой интернет-страницы. Он выглядит как список пронумерованных строк с информацией о том или ином элементе страницы.

Как посмотреть код любого сайта

Расскажем, как посмотреть исходный код страницы в браузере Google Chrome. В остальных браузерах этот процесс примерно такой же.

Код вызывается одной из комбинаций:

  • комбинация клавиш Ctrl + U или правая кнопка мыши → «Просмотр кода страницы» — вызывает «полотно» кода в отдельном окне браузера. Вы сможете увидеть структуру всей страницы. Вот как это выглядит:

Создание сайта в блокноте | Простой пример создание сайта в блокноте | HTML-теги для создания веб-сайта через блокнот

Доброго времени суток. Как правило в современном мире сайты создаются либо на CMS либо в бесплатных или платных конструкторах. Но все же, в начале времен 1990-2000 годы сайты создавались преимущественно на HTML, без использования каких-либо обращений к базе данных. Различные программы, позволяющие редактировать HTML + CSS в реальном времени, например, Dreamweaver — появились только в самом конце 20-го века. Поэтому сайты создавались в блокноте и других подобных редакторов. Хоть сейчас и существует множество удобных способов сделать качественный ресурс, создание сайта при помощи блокнота позволяет выучить основы построения страницы и основы HTML в целом.

Итак, для того, чтобы создать сайт через блокнот вам нужно для начала создать HTML файл. Сделать это можно следующим образом:
Заходите в меню Пуск -> Все программы -> Стандартные -> Блокнот


И сразу же сохраним его в HTML формате:  В блокноте нажмите: Файл -> Сохранить как


И напишите название файла, к примеру, index. html

Теперь мы можем приступать непосредственно к созданию HTML верстки в блокноте. Для начала, напишем основную разметку HTML кода, вы можете ее сразу скопировать и вставить, чтобы не тратить время попусту.

<!DOCTYPE html PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Мой самый прекрасный сайт</title>
</head>
<body>
<h2>Мой первый сайт</h2>
<p>Еще совсем чуть-чуть, и я научусь делать самые лучшие сайты на свете.</p>
</body>
</html>

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

Давайте рассмотрим каждый из них, чтобы мы могли легко научиться создавать сайты в блокноте

HTML-теги для создания сайта через блокнот

  • DOCTYPE — позволяет браузеру определить, что за тип документа он открыл, поскольку у HTML-документа есть множество версий.
  • html — тег, которым открывается и закрывается вся веб-страница
  • head — хед (или голова) документа. Данный тег несет в себе информацию для браузера и не отображается на web-странице. В нем содержаться по большей части информация для браузера и поисковой системы, стили CSS, которые мы пропишем чуть позже и различные скрипты.
  • meta — указывает браузеру и поисковой системе определенную информацию. В данном случае тег мета указывает браузеру о необходимости использования кодировки UTF-8 (для того, чтобы правильно отображался русский язык). В других случаях этот тег может указывать какие-либо другие данные, например, автор статьи, описание страницы, ключевые слова.
  • body — боди (или тело) документа. В этом теге содержится все то, что мы в данный момент видим на странице, можно сказать, что он включает в себя скелет или каркас веб-страницы.
  • h2 — Главный заголовок на странице, который оказывает большое влияние, например на seo
  • p — параграф — текст, который мы видим на странице

Нажмем сохранить и теперь кликнем на получившийся файл. Откроется браузер и мы увидим наш сайт сделанный на блокноте

Получился у нас конечно, не самый лучший в мире веб-ресурс, но надо ведь с чего-то начинать?:)

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

Теперь давайте придадим ему «красивостей», напишем несколько стилей внутри тега <head>

body {
background: #F2F2F2;
max-width: 900px;
margin: 0 auto;
padding: 20px;
}

h2{
  color: #4C4C4C;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid #BEBEBE;
}
p{
font:italic;
}

В итоге наш пример сайта сделанного в блокноте в коде выглядит так

<!DOCTYPE html PUBLIC"-//W3C//DTD HTML 4.
01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Мой самый прекрасный сайт</title> <style> body { background: #F2F2F2; max-width: 900px; margin: 0 auto; padding: 20px; } h2{ color: #4C4C4C; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #BEBEBE; } p{ font:italic; } </style> </head> <body> <h2>Мой первый сайт</h2> <p>Еще совсем чуть-чуть, и я научусь делать самые лучшие сайты на свете.</p> </body> </html>

Теперь вы научились создавать простые сайты в блокноте. Попробуйте использовать другие стили и теги для того, чтобы понять как же устроены сайты.

UPD2. Добавил в код указание кодировки, для правильного отображения русского языка, а также информацию о меню для сайта.

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

 

Создание сайта на HTML

Здравствуйте, меня зовут Михаил Русаков!

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

Я склонен полагать, что у Вас имеется большое желание научиться создавать свои собственные сайты. Разумеется, крайне глупо пытаться познать эту науку с изучения какого-нибудь PHP. Гораздо разумнее начать с чего-нибудь попроще, а именно с HTML (HyperText Markup Language - язык гипертекстовой разметки) - базового языка, на котором и построен любой, даже самый сложный сайт. Без этого языка не было бы ни одного сайта, более того, HTML - простейший язык, который может освоить даже школьник (яркий пример - Ваш покорный слуга, начавший осваивать HTML ещё в школе, причём весьма успешно).

Ладно, хватит болтовни - пора приступать к созданию нашего с Вами первого сайта, и этот процесс будет называться: "Создание сайта на HTML".

Первое, что нужно решить: где создавать сайт? Разумеется, можно и в обычном блокноте. Но это несерьёзно (мы так в школе писали), поэтому давайте лучше будем использовать что-нибудь "потяжелее". Я остановил свой выбор на редакторе "Notepad++" - замечательная программа, которая позволяет писать код на огромном количестве языков, в том плане, что это будет весьма и весьма удобно. Не буду сильно её хвалить, потому что для написания кода для серьёзных языков (Java, C++ и т. д.) она не подходит - много лишних проблем возникнет. Но для таких языков, как HTML, CSS, JavaScript и даже PHP - очень хороший выбор.

Скачать Notepad++ можно, пройдя по этой ссылке: http://notepad-plus.sourceforge.net/ru/site.htm

Устанавливаем и запускаем редактор. Сразу сохраняем страницу под именем index. html. Теперь пишем (пожалуйста, напишите, а не скопируйте!

) в окне редактора:

<html>
<head>
</head>
<body>
</body>
</html>

Написали? Сохранили? Поздравляю Вас, Вы только что создали самую простую (но очень важную!!!) HTML-страницу!

Теперь можно нашу страницу открыть в браузере. Так и поступим.

Что-нибудь видите? Я уверен, что нет. И это неудивительно, ведь это самая элементарная страница. Вы можете посмотреть исходник страницы. Для этого в меню "Вид" выберите пункт меню "Просмотр HTML кода", "Исходный код страницы" или что-то в этом духе, в зависимости от Вашего браузера. Также можно просто нажать CTRL-U (в большинстве браузеров откроется исходный код страницы), и Вы увидите Ваш код.

А теперь давайте обсудим, что мы здесь написали.

<html>, <head>, <body> - это открывающие теги. Иногда их ещё называют дескрипторы, но я привык называть их тегами, поэтому далее так и буду писать.

</html>, </head>, </body> - это закрывающие теги.

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

Одиночные теги - это теги, которые не требуют наличие закрывающего тега.

Теперь что касается назначения данных тегов.

Тег <html> означает начало HTML-документа.

Тег <head> означает начало заголовка HTML-документа. Сюда могут входить, например, заголовок страницы, различные мета-теги. Обо всём об этом погорим чуть ниже.

Тег </head> означает конец заголовка HTML-документа.

Тег <body> означает начало самого документа. То есть всё (текст, картинки, ссылки и т. д.), что Вы видите на страницах в Интернете - всё расположено в теге <body>.

Тег </body> означает конец содержимого документа.

Тег </html> означает конец HTML-страницы.

Теперь давайте немного добавим в нашу страницу кода, уж, больно она примитивная у нас пока. Внутри тега <head> добавьте такой код:

<title>Наша страница</title>
<meta http-equiv="Content-type" content="text/html; charset=windows-1251">

Тег <title> определяет заголовок страницы, который будет отображён в заголовке окна браузера.

Тег </title> сообщает, что здесь заголовок заканчивается.

Что касается тега <meta>, то здесь сначала я должен сообщить об атрибутах тегов. У тегов могут быть различные атрибуты, определяющие, например, вид их содержимого. Атрибуты ставятся внутри открывающего тега и имеют следующий вид:

Название = "значение".

Тег <meta> у нас определяет тип содержимого документа. Атрибут http-equiv и его значение Content-type определяет, что сейчас будет описан тип документа. Атрибут content и его значение text/html; charset = windows-1251 сообщают браузеру, что данный документ является HTML-документом (text/html), и кодировка этого документа кириллица (windows-1251). Это был пример мета-тегов. Я думаю, что пока с ними хватит.

Теперь займёмся содержимым документа. Надеюсь, что Вы уже поняли, что раз содержимое страницы - значит, будем писать что-то внутри тега <body>. Давайте напишем следующий код внутри тега <body>:

<h2>Заголовок 1-го уровня</h2>
<h3>Заголовок 2-го уровня</h3>
<h4>Заголовок 3-го уровня</h4>
<h5>Заголовок 4-го уровня</h5>
<h5>Заголовок 5-го уровня</h5>
<h6>Заголовок 6-го уровня</h6>

Теги <h2>, <h3>, <h4>, <h5>, <h5>, <h6> - выводят текст в браузере. Причём этот текст является заголовком, более того, чем больше цифра (от 1-го до 6-ти), тем менее крупным шрифтом будет выведен соответствующий текст. Таким образом, код Вашей страницы имеет вид:

<html>
<head>
  <title>Наша страница</title>
  <meta http-equiv="Content-type" content="text/html; charset=windows-1251">
</head>
<body>
  <h2>Заголовок 1-го уровня</h2>
  <h3>Заголовок 2-го уровня</h3>
  <h4>Заголовок 3-го уровня</h4>
  <h5>Заголовок 4-го уровня</h5>
  <h5>Заголовок 5-го уровня</h5>
  <h6>Заголовок 6-го уровня</h6>
</body>
</html>

Сохраните страницу и посмотрите на неё в браузере.

Также можно добавить немного атрибутов и в тег <body>. Давайте добавим атрибут text со значением green (зелёный). И атрибут bgcolor со значением yellow (жёлтый).

Таким образом, тег <body> выглядит так:

<body text = "green" bgcolor = "yellow">
  <h2>Заголовок 1-го уровня</h2>
  <h3>Заголовок 2-го уровня</h3>
  <h4>Заголовок 3-го уровня</h4>
  <h5>Заголовок 4-го уровня</h5>
  <h5>Заголовок 5-го уровня</h5>
  <h6>Заголовок 6-го уровня</h6>
</body>
</html>

Сохраните страницу и посмотрите на неё в браузере. Как видите, фон страницы стал жёлтым, а текст стал зелёным.

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

Увидимся в следующей статье!

С уважением, Михаил Русаков.

P.S. Бесплатный курс по HTML: http://srs.myrusakov.ru/html

  • Создано 21.04.2010 19:53:46
  • Михаил Русаков

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

теги - полный список, таблица тегов по разделам

HTML-теги — основа языка HTML. Теги используются для разграничения начала и конца элементов в разметке.

Каждый HTML-документ состоит из дерева HTML-элементов и текста. Каждый HTML-элемент обозначается начальным (открывающим) и конечным (закрывающим) тегом. Открывающий и закрывающий теги содержат имя тега.

В таблице приведен полный список элементов, поддерживаемых HTML4 и HTML5. Экспериментальные и устаревшие теги исключены. Элементы, добавленные в спецификацию HTML5, выделены бирюзовым цветом.

Для удобства пользования я сгруппировала теги по тематическим разделам, добавив значения свойства display для каждого тега. Чтобы перейти к таблице, кликните по рисунку.

Таблица 1. HTML-элементы
Тег Описание
<!--...--> Используется для добавления комментариев.
<!DOCTYPE> Объявляет тип документа и предоставляет основную информацию для браузера — его язык и версия.
<a> Создаёт гипертекстовые ссылки.
<abbr> Определяет текст как аббревиатуру или акроним. Поясняющий текст задаётся с помощью атрибута title.
<address> Задает контактные данные автора/владельца документа или статьи. Отображается в браузере курсивом.
<area> Представляет собой гиперссылку с текстом, соответствующей определенной области на карте-изображении или активную область внутри карты-изображения. Всегда вложен внутрь тега <map>.
<article> Раздел контента, который образует независимую часть документа или сайта, например, статья в журнале, запись в блоге, комментарий.
<aside> Представляет контент страницы, который имеет косвенное отношение к основному контенту страницы/сайта.
<audio> Загружает звуковой контент на веб-страницу.
<b> Задает полужирное начертание отрывка текста, не придавая акцент или важность выделенному.
<base> Задает базовый адрес (URL), относительно которого вычисляются все относительные адреса. Это поможет избежать проблем при переносе страницы в другое место, так как все ссылки будут работать, как и прежде.
<bdi> Изолирует отрывок текста, написанный на языке, в котором чтение текста происходит справа налево, от остального текста.
<bdo> Отображает текст в направлении, указанном в атрибуте dir, переопределяя текущее направление написания текста.
<blockquote> Выделяет текст как цитату, применяется для описания больших цитат.
<body> Представляет тело документа (содержимое, не относящееся к метаданным документа).
<br> Перенос текста на новую строку.
<button> Создает интерактивную кнопку. Внутрь тега можно поместить содержимое — текст или изображение.
<canvas> Холст-контейнер для динамического отображения изображений, таких как простые изображения, диаграммы, графики и т.п. Для рисования используется скриптовый язык JavaScript.
<caption> Добавляет подпись к таблице. Вставляется сразу после тега <table>.
<cite> Используется для указания источника цитирования. Отображается курсивом.
<code> Представляет фрагмент программного кода, отображается шрифтом семейства monospace.
<col> Выбирает для форматирования один или несколько столбцов таблицы, не содержащих информацию одного типа.
<colgroup> Создает структурную группу столбцов, выделяющую множество логически однородных ячеек.
<data> Элемент используется для связывания значения атрибута value, которое представлено в машиночитаемом формате и может быть обработано компьютером, с содержимым тега.
<datalist> Элемент-контейнер для выпадающего списка элемента <input>. Варианты значений помещаются в элементы <option>.
<dd> Используется для описания термина из тега <dt>.
<del> Помечает текст как удаленный, перечёркивая его.
<details> Создаёт интерактивный виджет, который пользователь может открыть или закрыть. Представляет собой контейнер для контента, видимый заголовок виджета помещается в тег <summary>.
<dfn> Определяет слово как термин, выделяя его курсивом. Текст, идущий следом, должен содержать расшифровку этого термина.
<dialog> Интерактивный элемент, с которым взаимодействует пользователь для выполнения задачи, например, диалоговое окно, инспектор или окно. Без атрибута open не виден для пользователя.
<div> Тег-контейнер для разделов HTML-документа. Используется для группировки блочных элементов с целью форматирования стилями.
<dl> Тег-контейнер, внутри которого находятся термин и его описание.
<dt> Используется для задания термина.
<em> Выделяет важные фрагменты текста, отображая их курсивом.
<embed> Тег-контейнер для встраивания внешнего интерактивного контента или плагина.
<fieldset> Группирует связанные элементы в форме, рисуя рамку вокруг них.
<figcaption> Заголовок/подпись для элемента <figure>.
<figure> Самодостаточный тег-контейнер для такого контента как иллюстрации, диаграммы, фотографии, примеры кода, обычно с подписью.
<footer> Определяет завершающую область (нижний колонтитул) документа или раздела.
<form> Форма для сбора и отправки на сервер информации от пользователей. Не работает без атрибута action.
<h2-h6> Создают заголовки шести уровней для связанных с ними разделов.
<head> Элемент-контейнер для метаданных HTML-документа, таких как <title>, <meta>, <script>, <link>, <style>.
<header> Секция для вводной информации сайта или группы навигационных ссылок. Может содержать один или несколько заголовков, логотип, информацию об авторе.
<hr> Горизонтальная линия для тематического разделения параграфов.
<html> Корневой элемент HTML-документа. Сообщает браузеру, что это HTML-документ. Является контейнером для всех остальных html-элементов.
<i> Выделяет отрывок текста курсивом, не придавая ему дополнительный акцент.
<iframe> Создает встроенный фрейм, загружая в текущий HTML-документ другой документ.
<img> Встраивает изображения в HTML-документ с помощью атрибута src, значением которого является адрес встраиваемого изображения.
<input> Создает многофункциональные поля формы, в которые пользователь может вводить данные.
<ins> Выделяет текст подчеркиванием. Применяется для выделения изменений, вносимых в документ.
<kbd> Выделяет текст, который должен быть введён пользователем с клавиатуры, шрифтом семейства monospace.
<meta> Используется для хранения дополнительной информации о странице. Эту информацию используют браузеры для обработки страницы, а поисковые системы — для ее индексации. В блоке <head> может быть несколько тегов <meta>, так как в зависимости от используемых атрибутов они несут разную информацию.
<meter> Индикатор измерения в заданном диапазоне.
<nav> Раздел документа, содержащий навигационные ссылки по сайту.
<noscript> Определяет секцию, не поддерживающую сценарий (скрипт).
<object> Контейнер для встраивания мультимедиа (например, аудио, видео, Java-апплеты, ActiveX, PDF и Flash). Также можно вставить другую веб-страницу в текущий HTML-документ. Для передачи параметров встраиваемого плагина используется тег <param>.
<ol> Упорядоченный нумерованный список. Нумерация может быть числовая или алфавитная.
<optgroup> Контейнер с заголовком для группы элементов <option>.
<option> Определяет вариант/опцию для выбора в раскрывающемся списке <select>, <optgroup> или <datalist>.
<output> Поле для вывода результата вычисления, рассчитанного с помощью скрипта.
<p> Параграфы в тексте.
<param> Определяет параметры для плагинов, встраиваемых с помощью элемента <object>.
<picture> Элемент-контейнер, содержащий один элемент <img> и ноль или несколько элементов <source>. Сам по себе ничего не отображает. Дает возможность браузеру выбирать наиболее подходящее изображение.
<pre> Выводит текст без форматирования, с сохранением пробелов и переносов текста. Может быть использован для отображения компьютерного кода, сообщения электронной почты и т.д.
<progress> Индикатор выполнения задачи любого рода.
<q> Определяет краткую цитату.
<ruby> Контейнер для Восточно-Азиатских символов и их расшифровки.
<rb> Определяет вложенный в него текст как базовый компонент аннотации.
<rt> Добавляет краткую характеристику сверху или снизу от символов, заключенных в элементе <ruby>, выводится уменьшенным шрифтом.
<rtc> Отмечает вложенный в него текст как дополнительную аннотацию.
<rp> Выводит альтернативный текст в случае если браузер не поддерживает элемент <ruby>.
<s> Отображает текст, не являющийся актуальным, перечеркнутым.
<samp> Используется для вывода текста, представляющего результат выполнения программного кода или скрипта, а также системные сообщения. Отображается моноширинным шрифтом.
<script> Используется для определения сценария на стороне клиента (обычно JavaScript). Содержит либо текст скрипта, либо указывает на внешний файл сценария с помощью атрибута src.
<section> Определяет логическую область (раздел) страницы, обычно с заголовком.
<select> Элемент управления, позволяющий выбирать значения из предложенного множества. Варианты значений помещаются в <option>.
<small> Отображает текст шрифтом меньшего размера.
<source> Указывает местоположение и тип альтернативных медиаресурсов для элементов <picture>, <video>, <audio>.
<span> Контейнер для строчных элементов. Можно использовать для форматирования отрывков текста, например, выделения цветом отдельных слов.
<strong> Расставляет акценты в тексте, выделяя полужирным.
<style> Подключает встраиваемые таблицы стилей.
<sub> Задает подстрочное написание символов, например, индекса элемента в химических формулах.
<summary> Создаёт видимый заголовок для тега <details>. Отображается с закрашенным треугольником, кликнув по которому можно просмотреть подробности заголовка.
<sup> Задает надстрочное написание символов.
<table> Тег для создания таблицы.
<tbody> Определяет тело таблицы.
<td> Создает ячейку таблицы.
<template> Используется для объявления фрагментов HTML-кода, которые могут быть клонированы и вставлены в документ скриптом. Содержимое тега не является его дочерним элементом.
<textarea> Создает большие поля для ввода текста.
<tfoot> Определяет нижний колонтитул таблицы.
<th> Создает заголовок ячейки таблицы.
<thead> Определяет заголовок таблицы.
<time> Определяет дату/время.
<title> Заголовок HTML-документа, отображаемый в верхней части строки заголовка браузера. Также может отображаться в результатах поиска, поэтому это следует принимать во внимание предоставление названия.
<tr> Создает строку таблицы.
<track> Добавляет субтитры для элементов <audio> и <video>.
<u> Выделяет отрывок текста подчёркиванием, без дополнительного акцента.
<ul> Создает маркированный список.
<var> Выделяет переменные из программ, отображая их курсивом.
<video> Добавляет на страницу видео-файлы. Поддерживает 3 видео формата: MP4, WebM, Ogg.
<wbr> Указывает браузеру возможное место разрыва длинной строки.

Пример самостоятельного создания собственного сайта

До недавнего времени самый распространеный способ - это писать сайт самому без CMS и конструкторов. Здесь можно поставить плюс ,так как вы можете создать абсолютно любой дизайн,а не из тех что предлагают в CMS и конструкторах.Но если у вас много страниц,то вам придется потратить больше времени на изменение страниц. Здесь зачастую выручает то , если сайт написан с CSS.

Многие,что бы не заморачиваться созданием сайта и не терять много времени,обращаются к WEB дизайнерам. И это зачастую правильно,так как они не только создадут сайт но и разместят его в Интернете,продвинут в поисковых системах, будут обновлять и т.д.

На этом сайте вы поэтапно познакомитесь как самостоятельно создать собственный сайт , наполнить его контентом,разместить в интернете,повысить его рейтинг и продвинуть наверх по поисковому запросу , а также возможность заработать на нем.Здесь также вы найдете необходимые программы для создания сайта.

Давайте сразу перейдем к делу и создадим самый простой сайт без CMS ,чтобы понять с чего начинать.

    Скачайте текстовый редактор сохраняющий документ в формате HTML. В Интернете можно найти много бесплатных редакторов,к примеру Notepad ++
скачать

   Создайте папку на диске D, назовите ее htdocs.В эту папку вы должны помещать все документы связанные с созданием сайта.

   Разрабатывается сайт при помощи тегов(кодов) формата HTML.Вам необходимо их знать.Если вы еще не скачали текстовый редактор, то откройте у себя на компьютере стандартный Блокнот который входит в состав Windows.

   Напечатайте в текстовом редакторе или скопируйте и вставьте туда нижеследующие теги и сохраните файл в папку htdocs.

<html>
<head&gt
<title> </title>

</head>
<body>
</body>
</html>
Что бы сохранить файл (в Блокноте) - в строке "тип файла" выберите - Все файлы,а в строке "имя файла" - index и формат-html. Выглядит это примерно так - index.html. В большинстве текстовых редакторов сохранение в формате HTML предусмотрено.Страница с именем index всегда загружается первой,поэтому главную страницу сайта всегда так и называйте.

После того как вы сохранили файл в редакторе , в указанной вами папке появится значок браузера с именем index.html.Откройте этот файл и ... ВЫ НИЧЕГО НЕ УВИДИТЕ!!! Вместо сайта у вас будет чистый лист. А все потому что вы объявили только создание VEB страницы,но ничем её не заполнили , то есть у вас отсутствует контент. Разберем что означают эти теги.

<html> - Сообщает браузеру что этот документ написан на языке HTML.
<head&gt - Начало заголовка.(не виден на странице).
<title> - (Для поисковых систем) - Здесь пишется название сайта.
</title> - Здесь пишутся мета - теги.
</head> - Конец заголовка.
<body> - Начало тела документа(для содержимого страницы).
</body> - Конец тела документа.
</html> - Конец HTML.

Контент сайта пишется в теле документа между тегами <body> и </body>
Напишем любой текст к примеру "Создание собственного сайта" и вставим фото
<img src="com (8).gif" width=213 height=170 border=0> .
Вместо com (8).gif выберите фото на своем компьютере , поместите в ту же папку где находится сайт и замените имя файла com (8).gif на свое.
Расположим текст и фото по центру тегом <center></center> и добавим в тело цвет страницы bgcolor="#ceceff"

Код сайта Вид сайта в малом окне
<html>
<head&gt
<title>
Создание сайта </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head>
<body bgcolor="#ceceff" >
<center>Создание собственного сайта.</center><center><img src="com (8).gif" width=213 height=170 border=0></center> </body>
</html>
Создание собственного сайта.

Это был пример простейшего сайта с минимумом тегов которые необходимы для его создания. Вы узнаете намного больше если ознакомитесь с поэтапным созданием пятистраничного сайта.

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

Как сделать разбивку страницы на ячейки посмотрите здесь.
Внешний вид сайта во многом зависит от цветовой схемы
и от вида шрифта.
Что бы сделать хороший сайт вам обязательно надо знать стиль CSS.

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

Для этого вы должны выбрать Хостинг и Домен.
Далее разместите на сайте счетчик посещений и займитесь продвижением сайта по поисковым запросам.

Итак
переходим к сайту посложнее, с пятью страницами

Основы HTML для начинающих

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

Поделиться

Твитнуть

Поделиться

Класснуть

Запинить

Для изучения урока, скачайте архив с необходимыми файлами.

HTML - это язык разметки документов. Правильное произношение - Эйч Ти Эм Эль.

Вы, наверняка, работали когда-нибудь в редакторе документов Word или подобных офисных приложениях? Наверное вы знаете, что данный вид редакторов имеет богатые возможности для редактирования текста, расположения элементов, вставки картинок и т. д.

Зачем, спросите вы, писать в статье, посвященной HTML о текстовых процессорах? А вот зачем. Если разобраться, что такое офисный редактор? Это приложение для редактирования и отображения документов.

Ключевое слово здесь - документ. То есть, мы создаем, редактируем и просматриваем документ в какой-то программе, в данном случае - в офисном редакторе. Если открыть такой документ в простом текстовом редакторе, например, в Блокноте, то мы увидим множество странных символов и знаков. Эта каша из символов непонятна человечеству, но понятна компьютерам. Благодаря этому внутреннему языку, документ Word приобретает определенную структуру и вид в самом редакторе, а документ предстает перед нами во всей своей красе с отформатированным текстом и картинками на своем месте.

HTML - это язык разметки документов для браузера. Word'ом здесь выступает браузер, а документом - HTML страничка. Это самая основа технологии HTML, понимание которой необходимо для того, чтобы не путать язык разметки веб документов с языками программирования. Название говорит за себя - с помощью HTML мы размечаем, где на странице будет показан элемент, картинка или текст, и в каком порядке они будут следовать друг за другом.

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

На самом деле, существует масса редакторов, с помощью которых можно создавать и редактировать HTML странички по аналогии с Word. То есть исходный HTML код для нас скрыт и в него мы не лезем.

Этакий Word для HTML. Такие визуальные редакторы называются:

WYSIWYG редакторы - What You See Is What You Get. То есть, если перевести на русский: что видим, то и получаем.

Я их называю "вузивуги". Хоть это фонетически и не правильно, зато ярко свидетельствует о бессмысленности данного изобретения. Новички очень часто используют такие редакторы для создания своих первых сайтов. Конечно, это удобно - не нужно углубляться в изучение тегов, стилей оформления и прочих, на первый взгляд, неприятных и сложных вещей. Редактор сам автоматически преобразует наши действия в HTML код.

Но, как говорится, ни чего просто так не бывает. А если конкретнее - у такого подхода есть очень серьезные недостатки. Что же мешает всем подряд использовать визуальные редакторы для оформления HTML страничек? Дело в том, что сформированные таким образом страницы имеют, как правило, очень много лишнего кода, очень много ошибок с семантической точки зрения. Сейчас, конечно, нет проблем со скоростным интернет соединением и разница в размере странички в 400 кб и 100 кб не существенна для скорости, однако оптимизированный и правильно написанный HTML код избавляет от множества проблем и дает массу преимуществ, а именно:

  • Грамотный HTML код положительно влияет на поисковую оптимизацию, скорость сканирования поисковым роботом сайта. Сгенерированные вузивугой килобайты кода здесь не приемлемы и даже вредны;
  • HTML код, сгенерированный WYSIWYG редактором имеет множество семантических ошибок. То есть, теги, генерируемые таким редактором используются не по назначению, там где нужно использовать, например, списки <ul>, редактор сгенерирует нам другой, ненужный нам тег. Зависит, конечно, от редактора, но здесь имеются ввиду комплексные решения для создания сайтов, а не простого редактирования текста в текстовой области средствами WYSIWYG.
  • Генерируется много лишних тегов и структура документа получается раздутой. Допустим, вы передвигаете элемент в такой программе сначала вправо, потом влево, потом по центру - от каждого действия остается след в исходном HTML коде. Редактор - это программа и он не может знать, что именно вы хотите получить в результате, он формирует тонны кода с учетом всех возможных вариантов поведения документа в браузере.
  • Как правило, редакторы для визуального оформления HTML кода, быстро устаревают. А ввиду отсутствия интереса со стороны профессионалов - вообще лишаются поддержки и останавливаются в развитии. А HTML развивается. Все развивается, кроме вузивуги. Соответственно, они не могут генерировать правильный и современный код, в котором были бы задействованы новые фишки и решения.
  • Поддерживать такие проекты и развивать - кара небесная. Об использовании паттернов и повторном использовании кода речи вообще быть не может.

Так что, HTML будем писать только ручками. Адекватных инструментов для визуального редактирования HTML еще не придумали, да и врядли они появятся. Язык разметки HTML прост в освоении и понимании, а средств автоматизации написания HTML кода множество, но об этом в других уроках.

Повозившись немного с WYSIWYG редактором, юные HTML-гуру оставляют это бесперспективное занятие и двигаются дальше.

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

Рекомендую для занятий скачать и установить редактор Sublime Text. Крайне не рекомендую использовать для HTML верстки встроенный в Windows "Блокнот", если вы не хотите сломать себе психику на ранних порах изучения HTML.

Мы решили, что код HTML документа будем писать вручную, то есть верстать. HTML Верстка - процесс создания HTML документа. В простонародье и осведомленных кругах - просто верстка. Любой документ имеет структуру и определенные правила построения. Из каких же элементов состоит код, какая структура у HTML?

Давайте создадим на компьютере первоначальный шаблон - файл index.html, откроем с помощью редактора и вставим в него следующий код:

<!doctype html> 
<html> 
<head> 
	<title>Заголовок</title> 
	<meta charset="UTF-8"> 
	<link rel="icon" href="favicon.ico"> 
	<link rel="stylesheet" href="style.css"> 
	<script src="script.js" type="text/javascript"></script>
</head> 
<body> 
	Тело документа 
</body> 
</html>
Обратите внимание, документы HTML имеют расширение .html.

Итак, по порядку из примера.

<!doctype html> - тип документа (доктайп)
<!doctype html>

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

Ввиду того, что HTML постоянно развивается, он имеет несколько версий, как и любой программный продукт. Текущая версия HTML - пятая и приведенный в примере доктайп является актуальным.

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

<html> - начало документа
<html>

Первый тег, который мы встречаем после доктайпа, это <html>.

HTML тег - структурная единица разметки HTML документа. Код HTML складывается из кирпичиков, которые именуются тегами. Каждый тег имеет свою функцию, а изучение языка разметки HTML, в конечном счете, заключается именно в изучении тегов и их свойств в документе.

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

Итак, разметка документа начинается с тега <html> и заканчивается закрывающим тегом </html>. Каждый тег, который содержит в себе другие теги или элементы должен закрываться закрывающим тегом. Например, <html></html>, <p></p>, <div></div>, и т. д.

Тег <html> является обязательным, так как содержит всю структуру документа и является оболочкой для остальных элементов.

Тег <head>
<head>

Далее, мы видим тег <head>, который содержит другие, пока не понятные нам элементы. Содержит другие элементы - это значит, что элементы или теги находятся между открывающим и закрывающим тегом конструкции:

<тег> 
	содержание или другие теги
</тег>

Тег <head> предназначен для хранения метаинформации HTML документа, то есть информации, которая не отображается в самом документе, но является важной и во многом определяет, как документ будет выглядеть и как себя вести.
Данный тег обязателен в документе.

Тег <title> - заголовок документа
<title>Заголовок</title>

Заголовок <title> является обязательным тегом, содержащим текстовую метаинформацию, которая отображается в заголовке браузера или вкладки. Тег <title> должен находиться в теге <head>. Также, содержимое данного тега используется поисковыми системами для отображения документа в результатах выдачи.

Метатег <meta charset="UTF-8" >
<meta charset="UTF-8" >

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

Метатег - специализированный тег, предназначенный для предоставления структурированных данных о странице. Метатеги чаще всего используются в теге <head>. Метатеги не являются обязательными в структуре HTML документа.

Рекомендую во всех HTML документах изначально использовать кодировку UTF-8, как в примере выше.

Фавиконка (favicon)
<link rel="icon" href="favicon.ico" >

Подключает к документу файл с изображением фавиконки. Фавиконка (favicon) - миниатюрный значок, отображаемый рядом с названием документа во вкладке браузера. Фавиконка - это графический файл, размером 16 x 16 (или 32 x 32) пикселей, который может иметь различные форматы, такие, как png, jpg, ico, gif. Традиционно используется формат ico. Анимированные фавиконки - это gif файлы, содержащие анимацию. Наблюдать анимированный фавикон можно, например, ВКонтакте, когда приходит новое сообщение.

CSS стили документа
<link rel="stylesheet" href="style.css">

Подключает к документу CSS файл со стилями оформления HTML.

CSS - каскадные стили оформления HTML документа. У каждого тега, который находится в теге <body>, имеется набор свойств, такие как - цвет, ширина, высота, положение относительно других элементов. Все эти свойства и есть стили CSS, которые можно вынести во внешний файл. Конструкция <link> подключает внешние файлы к документу HTML, в том числе и стили CSS.

Примечание: свойство href конструкции <link > указывает расположение внешнего файла. В нашем примере, файл style.css и favicon.ico, находятся в той-же папке, что и файл index.html. <link> не имеет закрывающего тега.

Тег <script>
<script src="script.js" type="text/javascript"></script>

Тег <script> содержит код или ссылку на файл javaScript и чаще всего используется внутри тега <head>, хотя инструмент оптимизации скорости загрузки страниц от Google, рекомендует данный тег использовать в конце документа, перед закрывающим тегом </body>.

В нашем примере подключается внешний файл script.js, который находится в той-же папке, что и основной файл index.html.

Итак, друзья, мы рассмотрели основные элементы, которые используются в теге <head> чаще всего. Кроме этих элементов, для <head> есть ряд других, более специфичных и не обязательных.

</head>

Закрываем тег <head> и шагаем дальше.

Тело aka body
<body>

Вот здесь то и начинается все самое интересное и визуально осязаемое в HTML верстке документа.

Перейдем, непосредственно, к верстке видимой части страницы. Все, что мы пишем и верстаем внутри тега <body> будет отображено в браузере. Откроем наш файл index.html в браузере для того, чтобы наглядно видеть, что мы делаем в редакторе.

Тег <body> может содержать любые HTML теги, необходимые для оформления документа и обеспечения его функционала (формы). Приведу таблицу наиболее используемых тегов и вкратце опишу каждый. Вы можете сразу выполнять приведенные примеры в редакторе.

Тег
Описание
<a>
Тег для создания ссылок в документе.
Пример:
<a href="http://webdesign-master.ru">текст ссылки</a>
Атрибут href указывает документ, на который будет вести данная ссылка.
<em>,
<strong>
Делает текст курсивом или жирным (акцентируемым).
Пример:
<em>текст курсивом</em>
<strong>жирный (акцентируемый) текст</strong>
<h2>,
<h3>,
<h4>,
<h5>,
<h5>,
<h6>
Заголовки документа. Всего существует 6 уровней заголовков, но на практике используются только от h2 до h5. В документе должен быть только один заголовок, выделенный тегом h2, как главный заголовок документа.
Примеры:
<h2>Заголовок первого уровня</h2> 
<h3>Заголовок второго уровня</h3> 
<h4>Заголовок третьего уровня</h4> 
... и т. д.
<ol>,
<ul>
Списки документа. Представляют собой нумерованный или маркированный список. Элементом такого списка является тег <li>
Примеры:
<ul> 
	<li>Элемент маркированного списка 1</li>
	<li>Элемент маркированного списка 2</li>
</ul> 

<ol> 
	<li>Элемент нумерованного списка 1</li>
	<li>Элемент нумерованного списка 2</li>
</ol> 
<p>
Абзац. Данный тег определяет абзац текста, отбитый от остальных абзацев. Закрывать данный тег очень желательно.
Пример:
<p>Внешний вид HTML разметки во многом 
определяется CSS стилями.</p> 

<p>Тем не менее, некоторые веб-мастера 
предпочитают не использовать стили на первых 
этапах проекта.</p>
<img>
Картинка. С помощью данного тега в HTML разметку можно вставить картинку. Обязательно указывайте у всех изображений альтернативный текст - атрибут "alt". Данный тег "самозакрывающийся".
Пример:
<img src="путь_до_картинки.jpg" alt="Текст">
<form> 
+ <input> 
+ <textarea>
Формы и элементы ввода.
Формы предназначены для ввода информации в систему на сервере. Этакая обратная связь пользователя и сайта. Например, формы используются, когда нужно отправить какое-то сообщение на сервер. Кроме того, формы могут выполнять и другие функции, но основная задача - отправка данных на сервер.
Пример - простая форма отправки сообщения, в которой пользователь сайта указывает свое имя, E-mail и какой-то текст:

<form action="ссылка_на_скрипт_обработки_формы"> 
	<input type="text" name="name">
	<input type="text" name="email">
	<textarea name="text">
		Текст сообщения
	</textarea>
	<input type="submit" value="Написать">
</form>
<span>
Определяет подстроку в строке.
Применяется для определения стиля части строки посредством CSS. Один из самых часто используемых тегов. Без оформления, ни как не проявляет себя в браузере.
Пример:
Изучение HTML, в большинстве случаев, не вызывает
<span>ни каких сложностей</span> у новичков.
<video>,
<audio>
Теги предназначены для вставки видео и аудио в документ. Обязателен закрывающий тег.
Примеры:
<video src="rolik_chuma.mp4" controls></video> 
<audio src="muzichka.mp3" controls></audio>
Параметр controls говорит нам о том, что на странице должны отображаться элементы управления медиаконтентом, как в обычном аудио/видео плеере.
<div>
Во истину, королевский тег. Самый используемый и популярный тег в HTML разметке страницы. Это блочный элемент, предназначенн для управления блоками на сайте. Часто употребляется понятие "дивной" верстки - это значит, что все блоки на сайте сверстаны с использованием данных тегов. Может содержать другие теги <div>.
Пример:
<div> 
	<div> 
		Текст во вложенном блоке 
	</div> 
</div>
Все элементы <div>, в большинстве случаев, оформляются свойствами CSS стилей. Обязателен закрывающий тег </div>.
<iframe>
Данный тег загружает внешнюю страницу в документ.
Пример:
<iframe src="http://rtfm.org.ru"></iframe>

Мы рассмотрели далеко не все теги, да это и не нужно на данном этапе. Главное - понять основную идею HTML, научиться использовать представленные выше теги, а потом двигаться дальше.

Обратите внимание на то, что все названия в подключаемых файлах должны писаться латинскими символами, без пробелов.

Например, не:

<video src="ролик чума.mp4" controls></video>

а:

<video src="rolik_chuma.mp4" controls></video>

Это необходимо для большей совместимости содержимого страницы. К тому-же, стандарты написания HTML кода, диктуют.

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

Практическое задание по HTML верстке

Если вы еще не скачали архив с примерами, сделайте это. Для примера, можете подглядывать в файл example.html, который также находился в архиве.

  1. Распакуйте архив и в папке с распакованными файлами создайте файл index.html. Откройте созданный файл с помощью текстового редактора Sublime Text;
  2. Создайте первоначальную структуру документа с доктайпом, тегом <html>, содержащим <header> и <body> и перейдите к редактированию содержимого тега <body>;
  3. Откройте файл readme.txt и выполните соответствующие задания в созданном вами файле index.html. Для проверки результата, откройте index.html в вашем любимом браузере.

На этом урок по основам HTML окончен, в следующем уроке "Основы CSS" мы научимся управлять стилями элементов документа, познакомимся ближе с каскадными таблицами стилей, научимся использовать классы стилей и сделаем нашу верстку красивой и красочной.

Премиум уроки от WebDesign Master

Другие уроки по теме «HTML и CSS»

Создаем HTML страницу — Как создать сайт

Делаем свою первую HTML-страницу (веб-страницу)

Урок №2
Создание своей первой веб-страницы

Сайты в интернете, состоят из HTML-страниц, точно также как обычная книга состоит из бумажных страниц, только в отличии от страниц книги, HTML-страницы соединены между собой не переплётом, а ссылками. Давайте создадим свою первую HTML-страницу.

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

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

Открыть Блокнот в Windows можно следующим образом:

Пуск — Все программы

Стандартные — Блокнот

В Блокноте наберите следующий код:

<html>
 <head>
  <title>Название страницы</title>
 </head>
 <body>
  <h2>Заголовок статьи</h2>
  <p>
   Абзац статьи.</p>
 </body>
</html>

Или просто скопируйте его и вставьте в Блокнот:

Затем сохраните получившийся документ на Рабочий стол, в виде файла с названием index и расширением .html

Для этого нажмите на кнопки:
Файл — Сохранить как…

В появившемся окне выберите Рабочий стол, имя файла напишите index.html и нажмите кнопку:
Сохранить

Теперь файл index.html, который вы сохранили на Рабочий стол, можно открыть в браузере и посмотреть на получившуюся HTML-страницу. Для этого, нужно нажать правой кнопкой мыши по файлу index.html и выбрать из имеющихся у вас браузеров, я обычно использую браузер FireFox:
Открыть с помощью — FireFox

Если у вас на компьютере не установлен браузер FireFox, то можете открыть файл index.html любым другим браузером, например: Opera, Google Chrome, Internet Explorer или Safari.

Файл index.html, открытый в браузере FireFox:

На этом, первый урок учебника по HTML, окончен. В следующем уроке мы подробно разберём HTML-код и узнаем из каких частей он состоит.

Читать далее: Разбираем HTML-код


Дата публикации поста: 7 февраля 2016

Дата обновления поста: 6 февраля 2016


Навигация по записям

HTML-редакторов


Простой текстовый редактор - это все, что вам нужно для изучения HTML.


Изучение HTML с помощью Блокнота или TextEdit

Веб-страницы можно создавать и изменять с помощью профессиональных редакторов HTML.

Однако для изучения HTML мы рекомендуем простой текстовый редактор, например Блокнот (ПК) или TextEdit (Mac).

Мы верим в то, что использование простого текстового редактора - хороший способ изучить HTML.

Выполните следующие действия, чтобы создать свою первую веб-страницу с помощью Блокнота или TextEdit.


Шаг 1. Откройте Блокнот (ПК)

Windows 8 или новее:

Откройте начальный экран (символ окна в левом нижнем углу экрана). Тип Блокнот .

Windows 7 или более ранняя версия:

Открыть Старт > Программы> Аксессуары> Блокнот


Шаг 1. Откройте TextEdit (Mac)

Откройте Finder> Приложения> TextEdit

Также измените некоторые настройки, чтобы приложение правильно сохранять файлы.В настройках > Формат> выберите «Обычный текст»

Затем в разделе «Открыть и сохранить» установите флажок «Отображать файлы HTML как HTML-код вместо форматированного текста».

Затем откройте новый документ для размещения кода.


Шаг 2. Напишите немного HTML

Напишите или скопируйте следующий HTML-код в Блокнот:


Мой первый заголовок

Мой первый абзац.




Шаг 3. Сохраните HTML-страницу

Сохраните файл на своем компьютере.Выберите Файл> Сохранить как в меню Блокнота.

Назовите файл "index.htm" и установите кодировку UTF-8 (предпочтительная кодировка для файлов HTML).

Совет: В качестве расширения файла можно использовать .htm или .html. Нет никакой разницы, решать только вам.


Шаг 4. Просмотрите HTML-страницу в своем браузере

Откройте сохраненный HTML-файл в своем любимом браузере (дважды щелкните файл, или щелкните правой кнопкой мыши - и выберите «Открыть с помощью»).

Результат будет примерно таким:


Онлайн-редактор W3Schools - «Попробуйте сами»

С помощью нашего бесплатного онлайн-редактора вы можете редактировать HTML-код и просматривать результат в своем браузере.

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

Пример




Заголовок страницы

Это заголовок


Это абзац.


Попробуй сам "

Нажмите кнопку «Попробуйте сами», чтобы увидеть, как это работает.



99 лучших бесплатных HTML-шаблонов, чтобы сделать ваш сайт сияющим

Раскрытие информации: Ваша поддержка помогает поддерживать работу сайта! Мы зарабатываем реферальный сбор за некоторые услуги, которые мы рекомендуем на этой странице. Узнать больше

Перед тем, как запустить веб-сайт, вам нужно понять, как вы собираетесь его создавать.В этом списке 99 лучших бесплатных HTML-шаблонов веб-сайтов с открытым исходным кодом, которые могут помочь. Прежде чем мы перейдем к списку, позвольте нам вернуться в более простые времена. 1990-е гг. Энтузиасты старой школы HTML называют это «старыми добрыми временами». Единственный способ создать веб-сайт - это передать его самому с помощью потрясающих сайтов с открытым исходным кодом, таких как HTML-лакомства (которые, на удивление, все еще существуют).

Это было задолго до того, как бурный рост таких решений, как WordPress, Wix, Weebly и Joomla, позволил любому старому чудаку установить профессиональный веб-сайт в несколько кликов.

В настоящее время обычным явлением является использование CMS (системы управления контентом), такой как WordPress, или службы создания веб-сайтов, такой как Squarespace, не задумываясь. Это отличные решения для создания сайтов высокого качества, но не всегда лучший вариант. Для людей, которым нужен простой и легкий веб-сайт, CMS может оказаться излишним. Создание простого сайта с использованием шаблона HTML / CSS может сразу предложить несколько преимуществ.

  • Скорость - использование CMS может потребовать значительных ресурсов, что приведет к увеличению времени загрузки страницы.
  • Больше Control - вы можете получить сайт, который выглядит так же хорошо, как и сайт WordPress, и вам будет проще изменять вещи вплоть до пикселя, не преодолевая темные туннели сложной архитектуры CMS.
  • Безопасность - это факт, что хакеры и спамеры нацелены на популярные установки CMS, потому что это проще. Использование HTML-шаблона не означает, что вы в полной безопасности, но вы можете быть менее уязвимы для хакеров, нацеленных на хорошо известные дыры в безопасности.

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

Business

  1. Asperion HTML5 - чистый минималистичный шаблон, предназначенный для предприятий, занимающихся ИТ.
  2. Bio Farming - достойный шаблон, созданный для устойчивого ведения сельского хозяйства. Элементы и дизайн расположены так же, как стандартная целевая страница для дизайнерского агентства.
  3. Blue Skies - этот веб-сайт с фиксированной шириной подходит для ведения блога или бизнеса.
  4. Bootstrap Restaurant - все, что вам нужно для сайта ресторана, включая бронирование, карту, онлайн-заказы и слайдеры для демонстрации пунктов меню.
  5. Кафе - включает высококачественные изображения, интересную типографику и функции для мобильных устройств, такие как гамбургер-меню.
  6. Corporate Bizz - полный шаблон серьезного корпоративного сайта в темной цветовой гамме.
  7. Crossfit - крутая современная тема для любой ниши, связанной с фитнесом. Он отзывчивый и готов к просмотру на мобильных устройствах.
  8. Экологический бренд - минималистичный и отлично подходит для любой профессиональной организации.
  9. Home Property - это для профессионалов в сфере недвижимости. Он может быть для компании или служить справочником.
  10. HTML5 Streets - отличный вариант для простого бизнес-сайта. Строительство было бы хорошей нишей для этого.
  11. HTML5 Вода - фон и цветовая схема изображения напоминают морские пейзажи. Это было бы неплохо для дайвинга или всего, что связано с водными видами спорта.
  12. HTML 919 - классический 5-страничный полноразмерный веб-сайт с заголовком, телом, нижним колонтитулом, дополнительным заголовком и текстурированным фоном.
  13. Кожа и кофе - 5-страничный шаблон для кафе. Он использует фейдер изображений jQuery и может похвастаться богатой цветовой схемой.
  14. Медицина - Подходит для медицинских работников.
  15. Natural Paper Co - оттенки коричневого придают этому месту практичную атмосферу. Дизайн хорошо организован и эффективен.
  16. Nautica 05 Dark - его легко изменить и проверить.Включены четыре макета.
  17. Органическая ферма - есть клиент, которому нужен веб-сайт органической фермы? Вот идеальный шаблон для этого.
  18. Шаблон Parallax - созданный с использованием HTML / CSS / JS, этот шаблон полезен для малого бизнеса и стартапов.
  19. Six Dark - цветовая гамма вдохнула жизнь в этот простой, чистый шаблон.
  20. The Tree Hills - этот шаблон сайта, созданный для дизайнеров, имеет освежающую цветовую схему и профессиональный, но творческий подход.
  21. Интернет 2.0 - проверьте это, если вы ищете простой статический веб-сайт для бизнеса. Здесь нет ничего необычного или нового, но это надежный шаблон.
  22. Wind Power - еще один шаблон для устойчивого бизнеса от Studio7Designs. Ему более пяти лет, но он все еще отлично работает.

Художественный / Креативный

  1. Классный макет - это не весь веб-сайт, но вполне может быть. Этот шаблон имеет пятисекционный макет с чередующейся анимацией. Он отлично подходит для демонстрации изображений.
  2. Forty - действительно простая, но потрясающая тема материального дизайна для фотографов.
  3. Helios - еще одна халява от HTML5up.net, Helios отлично подходит для фотографов.
  4. Nautica - демонстрация создана для свадебного фотографа. Это просто, причудливо и стильно.
  5. The Piano - это шаблон на музыкальную тему, идеально подходящий для учителя фортепиано.
  6. Чистый CSS Parallax - этот шаблон подойдет, если у вас есть высококачественные изображения. У него четыре секции параллакса.
  7. Sigma - эта сетка изображений в стиле метро состоит из нескольких столбцов и адаптивного лайтбокса. Если у вас много изображений, вы можете эффективно использовать Sigma.

Одиночная страница

  1. BIWAS - это похоже на многие другие бизнес-сайты ИТ. На этой целевой странице есть разделы с параллаксом, многоуровневые таблицы цен, контактная форма и выдвижное меню.
  2. Coloi - если вам нужно создать сайт для веб-сервиса, компания Coloi идеально подойдет.
  3. Creative Winter - этот простой полноразмерный веб-сайт с параллаксом - хороший одностраничный сайт для креативщиков.
  4. Fancy Mobile Flat - плоский дизайн с яркими пастельными тонами и липким заголовком.
  5. Fractal - очень простой шаблон, который вы можете использовать как отправную точку для своих собственных идей.
  6. Оттенки серого - цветовая схема оттенков серого имеет очень драматический эффект. Это одно из моих любимых. Дизайн очень сложный и, естественно, фокусирует ваше внимание на содержании.
  7. Jasmin - очень минималистичный и чистый сайт. Это простой и понятный сайт, удобный для мобильных устройств с красивой CSS-анимацией.
  8. Landing Page - одна из самых чистых целевых страниц для фрилансеров и дизайнеров. Как и хороший дизайн, он простой, функциональный и приятный.
  9. Металлический слайдер - как следует из названия, вы получаете металлический слайдер. На этом пейджере есть интерактивные скользящие панели, на которых отображается ваш контент.
  10. Моделирование - это чистый и модный сайт.
  11. Персональный веб-сайт - если вы дизайнер / творческий человек, этот веб-сайт обязательно произведет впечатление. Он очень чистый и имеет впечатляющую анимацию.
  12. Rex - на этой целевой странице есть все необходимое, что вы можете настроить.
  13. rLAKPm - современный одностраничный сайт для стартапов и разработчиков. В нем используются анимированные эффекты и цветовые схемы, соответствующие материальному дизайну.
  14. Simple Life - чистый одностраничный шаблон, который дает вам все основы для ведения блога или бизнеса. Меню навигации перенесет вас в разные разделы страницы.
  15. Spa Gardenia - этот длинный одностраничный шаблон может работать для оздоровительных курортов, парикмахерских или любой другой целевой страницы.
  16. Стильное портфолио - хорошее начало портфолио, основанного на материальном дизайне.

Блог / Персональный сайт

  1. Агентство - хорошо для любого небольшого агентства или бизнеса. Этот хорошо продуманный полноразмерный сайт привлекает внимание к центру страницы.
  2. Art Portfolio - это может служить сильным портфолио для самых разных творческих профессионалов.
  3. Аудио - аудиофилам тоже нужны сайты. Это отлично подходит для любого аудиотехника, программиста, даже учителя музыки.
  4. Bokeh - эта гибкая тема использует много красного цвета и имеет встроенное раскрывающееся навигационное меню в верхней части страницы. Он ориентирован на дизайнеров.
  5. CLJxH - минимальный одностраничный шаблон с параллаксной прокруткой по одному фоновому изображению. Это хороший выбор для тех, кто хочет простого присутствия в Интернете.
  6. Творческое портфолио - нет ничего проще. Этот портфель избавляет от лишнего жира. Он дает посетителям информацию о том, кто, что и где, без каких-либо изысков.
  7. Gamer Template - это полноформатный сайт для игрового блога.Он простой, но выглядит современно.
  8. Я Тим - автор шаблона - веб-дизайнер. Этот шаблон является целевой страницей для его услуг. Его могут использовать все фрилансеры.
  9. Kaptain Kitty - здесь используются принципы материального дизайна для создания успокаивающего эффекта для посетителей. Он отлично подходит для личного блога или портфолио.
  10. Блог материального дизайна - в этом блоге используются передовые тенденции веб-дизайна для создания хорошего блога. Это очень крутой шаблон с макетами в виде карточек, которые вы можете увидеть в Twitter или Facebook.
  11. OnePager - как следует из названия, одностраничный шаблон, но предназначен для портфолио и бизнес-сайтов.
  12. Photo_Dark - этот темный шаблон создает настроение для демонстрации ярких фотографий.
  13. Веб-сайт с прокруткой - этот сайт с параллакс-прокруткой jQuery имеет красивые изображения и настроен как диорама. Он отлично подходит для мероприятия, рассказа или даже портфолио.
  14. Simple Style_7 - этот четкий шаблон станет хорошим портфолио для человека, который очень организован и точен.
  15. Тим Роберт-Фицджеральд - это чрезвычайно простое портфолио для всех. Он чистый, сфокусированный и требует совсем немного, чтобы сделать его своим.
  16. Видеоблог - это шаблон видеоблога, написанный в 2013 году. Цветовая гамма и графический дизайн приятны и естественны.
  17. Ваше портфолио дизайна - в этом шаблоне есть раздел портфолио и боковая панель, которые помогут вам продемонстрировать свою работу.

Электронная торговля

  1. Bazaar - этот плоский адаптивный веб-сайт впечатляет! Исходные файлы включают файлы Photoshop.
  2. Best Store - этот шаблон интернет-магазина предназначен для продажи высококачественных товаров. Это стильно, профессионально и красиво оформлено.
  3. The Big Store - бесплатный шаблон, который поможет вам создать продуктовый интернет-магазин. Управляйте пользователями, демонстрируйте продукты и принимайте платежи.
  4. Blue Clean - все в названии. Этот использует разные оттенки синего и очень чистый. Используйте его, чтобы открыть магазин по продаже технических товаров.
  5. Bootstrap Shop - это готовый интернет-магазин.Он современный, и в нем есть готовая тележка для покупок.
  6. Магазин штор - это макет с двумя колонками в темной цветовой гамме. Добавьте корзину, и у вас будет полноценный магазин.
  7. Digi Shop - Этот современный интернет-магазин идеально подходит для продажи широкого ассортимента товаров.
  8. FooseShoes - продавайте женские туфли или что-нибудь в этом роде.
  9. Свободный стиль - много пустого пространства и множество чистых сеток помогают демонстрировать изображения продуктов.
  10. Мебель - ползунки, пустое пространство и хорошо организованные сетки придают этому мебельному магазину ощущение домашнего уюта.
  11. Продуктовый магазин - продавайте все, что связано с едой в Интернете, с помощью этого драгоценного камня.
  12. Home Shoppe - красивый интернет-магазин по продаже всевозможных товаров.
  13. H Shape - этот красочный плоский дизайн включает в себя такие товары для фитнеса, как одежда, спортивная одежда и тренировочное снаряжение.
  14. IWear —Этот магазин очков выполнен в винтажном стиле.
  15. Leoshop - этот плоский шаблон электронной коммерции может помочь вам создать сайт высокого уровня, такой как Amazon или Snapdeal.
  16. Markito - магазин плоских футболок, который вы можете настроить и сделать своими руками.
  17. New Shop - еще один плоский адаптивный шаблон, построенный на бутстрапе. Этот шаблон актуален и готов к продаже.
  18. Перепродажа - перепродажа позволяет легко создать сайт, где люди могут покупать и продавать подержанные товары.
  19. Sell Anything - этот шаблон из 4 столбцов очень отзывчивый и довольно впечатляющий. Это хороший выбор для продажи одежды или чего-нибудь еще.
  20. ShopList - приятные функции включают уникальный слайдер, страницы товаров, превью изображений и корзину покупок.
  21. Smart Sale - этот сайт приятно просматривать и имеет несколько интересных элементов материального дизайна.Идеально подходит для любого типа магазина.
  22. Smart Store - этот шаблон имеет уникальную сетку по сравнению с большинством других в этом списке и действительно привлекательную цветовую схему.
  23. Surf Company - нужно создать сайт для серф-компании? Вы можете начать работу с этим шаблоном.
  24. Женская мода - здесь есть все необходимое для работы шикарного модного бутика в Интернете. Адаптируйте его к вашим потребностям, чтобы он соответствовал вашим целям.
  25. Youth Fashion - сайт корзины модных товаров.Запустите интернет-магазин, просто добавьте свой контент и настройте платежный шлюз.

Журнал / Новостной блог

  1. Colormag - простой и удобный для чтения шаблон журнала со свежей цветовой схемой.
  2. Cyber ​​Tech - всеобъемлющий веб-шаблон для журнала или блога о любых технологиях.
  3. Daily Newspaper - продемонстрируйте свой контент с помощью удобочитаемой типографики и чистого макета.
  4. Magazine - навигационное меню в виде вкладок, разделы во всю ширину и чистый графический дизайн делают Magazine достойным внимания.
  5. MagExpress - это потрясающий журнал, который хорошо подойдет для новостей или образа жизни.
  6. News Aggregate - извлекайте лучший контент с помощью этого агрегированного шаблона. Создайте сайт наподобие Alltop.com.
  7. Газета - интересная газетная тема, гибкая и простая в настройке.
  8. Organic Design - еще один сайт фиксированной ширины, созданный для экологически чистого бизнеса.
  9. Pixabella04 - у этого есть блог, несколько макетов, коробочный макет и боковые панели.
  10. Тема № 4 - простой макет фиксированной ширины с четким ощущением.Это хорошо для технического блога.
  11. Wine Social - отличный сайт для винодельни, пивоварни или любого другого предприятия по производству напитков.
  12. Желтый блог - этот блог профессионально оформлен и красив. Если вы ищете альтернативу WordPress, это разумный выбор.

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

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

Фрэнк Мораес (Frank Moraes) - редактор и писатель на HTML.com и других ботанических сайтах.

Как кодировать простую веб-страницу с использованием HTML

Видео демонстрация того, как кодировать простую веб-страницу с использованием HTML

Это руководство является частью первой из серии руководств по веб-дизайну, которые я сейчас собираю. Он разработан, чтобы обеспечить вводную основу для программирования в Интернете.Это руководство начинается с основ работы с HTML и охватывает следующие темы:

  1. Основная концепция HTML
  2. Роль HTML и CSS
  3. Структура HTML
  4. Инструменты кодирования
  5. Полезные ссылки
  6. Управление файлами
  7. Создание автономного веб-сайта
  8. Настройка каталога
  9. Именование файлов
  10. Индексный файл
  11. Структура и форматирование HTML
  12. Семантический HTML и стиль браузера по умолчанию

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

  • Основной заголовок (h2)
  • Абзац текста
  • Список

Вот ссылка на Часть 2, посвященную разработке базовая веб-страница, включая введение в CSS.

Базовая концепция HTML

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

Стоит отметить, что большинство веб-сайтов используют довольно много разных типов кода, которые объединяются в html. К ним относятся такие вещи, как CSS, Javascript и PHP и т. Д. У разных языков кодирования разные роли, и я расскажу о них более подробно в следующих руководствах.

А пока мы сосредоточимся на самых основах HTML.

Роль HTML и CSS

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

Допустим, CSS - это язык стиля. - Как представлен этот контент. Например, цвет, положение, размер и т. Д.

Я считаю полезным сначала сконцентрироваться на содержании и структуре, имея в виду, что именно так поисковые системы или «боты» читают и интерпретируют контент.Боты используют структуру контента, чтобы понять его, например, определено ли что-либо как заголовок или список элементов. Например, для поисковой оптимизации ботов не обязательно интересует визуальный стиль контента, например, фиолетовый он или зеленый и т. Д. Их больше интересует фактическая сущность контента, например, фактические слова в тексте, ссылки, изображения и т. д.

Структура HTML

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

Обычно, если вы создаете, скажем, текстовый документ с использованием чего-то вроде Word или Google Docs, ваш документ будет включать заголовок и основной заголовок, который описывает, что это за документ. Он также может включать подзаголовки и различные разделы документа, а также нижний колонтитул с такими вещами, как нумерация страниц. Ваш документ может также включать некоторую информацию, которая включена в документ, но не обязательно должна отображаться в "теле" основного документа. Например, это может быть информация об авторе, комментарии, сведения об авторских правах и т. Д.

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

Вот список некоторых доступных мне инструментов кодирования.

Есть также несколько интересных инструментов, которые можно использовать для написания кода прямо в облаке, например Codepen, однако я бы рекомендовал сначала начать с простого редактора кода.

Несколько замечаний по поводу инструментов… Там, где я учу, мы обычно используем Notepad ++, потому что моя обучающая среда основана на Windows, и эта программа работает очень хорошо, особенно с точки зрения запуска с базовым редактором, который не включает подсказки кода по умолчанию.

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

Насколько я знаю, Atom - хорошая бесплатная альтернатива Sublime Text, и мне она очень нравится. Однажды я попробовал Atom и почувствовал, что по сравнению с Sublime текст ощущается немного медленнее, в противном случае я пока склонен просто придерживаться Sublime.

Полезные ссылки

Я думаю, что лучше всего начать с W3Schools. На самом деле, я думаю, вы могли бы просто проработать все, что перечислено на этом сайте, начиная с HTML, затем CSS, а затем Javascript.

Я решил создать эту серию руководств, чтобы также объяснить некоторые концепции на очень простом языке, которые, как мне кажется, не обязательно объясняются так же хорошо, как в школе W3Schools.

После того, как вы приступили к работе с HTML, CSS и Javascript, я думаю, что в разделе «Как сделать» в W3Schools можно найти примеры некоторых основных компонентов, таких как слайдеры изображений и т. Д., Которые вы можете попробовать добавить на свои веб-страницы. в какой-то момент.

Управление файлами

Я бы сказал, что по крайней мере 80% всего, что связано с созданием веб-сайтов, связано с сильным контролем над управлением файлами. Если ваше управление файлами в настоящее время повсюду, сейчас самое время начать с некоторой базовой организации. Код веб-сайта может быть жестоким: если что-то написано неправильно, это не сработает.

Создание «автономного» веб-сайта

Мы собираемся начать с создания простого «автономного» веб-сайта. Это означает, что этот веб-сайт не будет доступен для широкой публики во всемирной паутине как таковой, но его все равно можно будет просматривать через браузер.- Я расскажу о подключении сайтов к сети в следующем учебном пособии.

Настройка каталога

  1. Создайте новую пустую папку на своем компьютере (или внешнем диске) в логическом месте и назовите ее «my-webpage-1».
  2. Затем в эту папку добавьте несколько пустых папок с именами «css», «images» и «js».

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

Пример настройки каталога

Именование файлов

С точки зрения создания документов веб-сайтов рекомендуется придерживаться следующего соглашения об именах:

  • Все буквы в нижнем регистре
  • Перенести отдельные слова
  • Не забудьте включить расширение формата документа
  • Напр. about-me.html или my-image.jpg, а НЕ Home Page.html или Green Frog.jpg (убедитесь, что вы видите разницу.

Индексный файл

Откройте нужную программу редактирования кода, создайте новый пустой документ и сохраните его в папке вашего веб-сайта как index.html ’.

Каждый раз, когда вы посещаете адрес каталога в своем браузере, например, что-то вроде my-computer / drive / my-webpage-1, файл index.html часто открывается браузером по умолчанию. Вспомните, как я ранее упоминал, что большая часть терминологии HTML-документов относится к стандартной структуре документа. Обычно индексный файл является домашней страницей вашего веб-сайта и во многих отношениях предназначен для «индексации» или выделения основного содержания и других страниц вашего веб-сайта и т. Д., Как и индекс книги.

Структура и форматирование HTML

Напишите следующий код:

  

  

Затем сохраните документ.

Этот код по существу определяет документ как HTML.

Теперь посмотрим на два «тега» - html и / html. Это открывающие закрывающие теги, и все между ними определяется как «принадлежащее» элементу html.

Поздравляем, вы создали свой первый документ HTML. Однако в нем пока ничего нет…

Теперь перейдите в W3Schools - HTML.Выберите и скопируйте пример кода HTML-документа и вставьте его поверх кода, который вы только что написали. Это действительно хорошая отправная точка для базового документа веб-страницы. Это должно выглядеть примерно так:

  


 Заголовок страницы 



Это заголовок

Это абзац.

Теперь сохраните документ, посетите его на своем компьютере и откройте его в браузере веб-сайта (например, Chrome, Firefox, Explorer и т. д.).Вы должны увидеть заголовок документа на вкладке браузера и другие элементы, видимые в «теле» веб-страницы.

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

  


    
        <название>
Заголовок страницы

    

    

        

Это заголовок

Это абзац.

Это относительно экстремально, большинство программистов сохранят такие теги, как title, h2 и p, в одной строке, но для абсолютного новичка я считаю полезным выработать привычку форматировать свой код таким образом. способ более легко идентифицировать открывающие и закрывающие теги и сразу увидеть структуру.

Все, что находится между тегами html, определяется как "принадлежит" определению HTML. Точно так же все между открывающим и закрывающим тегами h2 определяется как главный заголовок и так далее.

Как правило, большинство тегов имеют открывающий и закрывающий теги.

Здесь важно то, что существует «вложенная» структура. Тег h2 находится внутри тегов body, которые находятся внутри тегов html. Это означает, что тег h2, например, наследует свойства своих «родительских» тегов, и эта вложенная структура определяет структуру html.

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

  <дом>
    <стена>
        <дверь>
            <дверная ручка>
            
        
        <окно>
        
    
  

Тогда, если бы мне сказали разместить стену в определенном месте, дверь и окно были бы относительны или «принадлежали» стене и, следовательно, могли бы наследовать определенные свойства, назначенные стене. Открывающие и закрывающие теги определяют структуру.Речь идет о том, что к чему и как разные компоненты соотносятся друг с другом. HTML - это язык, который определяет структуру с помощью этой простой системы элементов внутри элементов.

Семантический HTML и стиль по умолчанию браузера

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

В Chrome вы можете щелкнуть правой кнопкой мыши, а затем «проверить», и это отобразит все стили, которые браузер применяет к элементу, включая стандартную «Таблицу стилей пользовательского агента».

Я подробнее расскажу о CSS в следующем уроке.

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

Мой подход состоит в том, чтобы, как правило, отказаться от стиля браузера по умолчанию и устранить несоответствия браузера, если они применяются только к элементам, которые я использую.Тем не менее, я думаю, что действительно важно соблюдать стиль браузера по умолчанию, потому что, особенно когда вы только начинаете, а также когда начинаете беспокоиться об оптимизации для поисковых систем, это может помочь вам визуально, в самой грубой форме, показать, какие у вас разные элементы. на самом деле есть.

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

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

Теперь посетите W3Schools - HTML - Lists, скопируйте и вставьте список в свой документ. Сохраните его, затем перейдите в свой браузер и обновите его. Ваш код должен выглядеть примерно так.

  


    
         Моя первая веб-страница 
    

    
        

Моя первая веб-страница

Привет, меня зовут Генри, и это мой первый сайт.Я заинтересован в:

  • Веб-дизайн
  • Кодирование
  • Цифровое искусство
Пример веб-страницы при просмотре через браузер. Обратите внимание на «локальный» путь к файлу в адресной строке, а также на стиль браузера по умолчанию, примененный к различным элементам HTML.

Я думаю, что это хорошее место для завершения части 1, однако по моему опыту большинство студентов хотят продолжить более «забавные» вещи, которые я рассмотрю в части 2, в том числе:

  • Добавление ссылок
  • Добавление изображений
  • Работа с содержимым заполнителя
  • Применение базового стиля CSS

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

Как создать код для вашего собственного веб-сайта

Мысль о создании веб-сайта с нуля может быть несколько пугающей для новичков. Но этого не должно быть. Фактически, кодирование базового веб-сайта может быть чрезвычайно простым, если вы знаете несколько тегов HTML.

Здесь я покажу вам, как создать код для вашего собственного веб-сайта, а затем опубликовать его в Интернете. Это тоже не займет много времени. Как вы скоро обнаружите, создать собственный веб-сайт намного проще, чем кажется!

Что такое веб-сайт?

Прежде чем мы создадим собственный веб-сайт, мы должны понять, что на самом деле представляет собой веб-сайт.

Веб-сайт - это просто набор веб-страниц. Веб-страницы обычно связаны между собой, но не всегда. Чтобы создать веб-сайт, вы просто создаете одну или несколько веб-страниц.

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

Что такое веб-страница?

Веб-страница - это текстовый файл, содержащий комбинацию текста и кода «разметки». Когда документ просматривается в веб-браузере, он отображается (или «обрабатывается»), как задумано. Когда он просматривается в текстовом редакторе (таком как Блокнот), он отображает текст и код разметки.

Следовательно, веб-страница состоит из 2 просмотров:

  • «Визуализированное» представление - это то, что вы видите, когда просматриваете веб-страницу в своем браузере.
  • Представление «Исходный код» - это «закулисный» код, определяющий содержимое и способ отображения страницы.

Вы можете просмотреть исходный код любой веб-страницы в Интернете. Исходный код обычно открывается в новой вкладке.

Для этого воспользуйтесь функцией браузера Просмотр исходного кода страницы . Например, если вы используете Google Chrome, выберите Просмотр> Разработчик> Просмотр исходного кода . Если вы используете Firefox, перейдите в Инструменты > Веб-разработчик> Источник страницы .В зависимости от вашего устройства и браузера вы также можете щелкнуть правой кнопкой мыши в любом месте страницы, чтобы вызвать опцию Просмотр исходного кода .

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

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

Взгляните на следующий код.

Пример кода 1:

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

Вы должны увидеть тег html вверху и внизу. Это связано с тем, что все остальные теги HTML должны находиться между тегами html, и . (Единственным исключением является тег , который указывает версию HTML / XHTML, которую использует документ. Мы не будем вдаваться в подробности этого тега, но если вам интересно, вот дополнительная информация ).

body теги содержат весь контент, который будет отображаться на странице. Например, если вы хотите отобразить слова «Добро пожаловать на мою веб-страницу», вам нужно будет поместить их между тегами body и / body .

Вот еще пример. На этот раз давайте добавим немного контента.

Пример кода 2:

Привет, мир!

Моя первая веб-страница

Добро пожаловать на мою первую веб-страницу!

Вот новый абзац...

Если бы вы открыли указанный выше HTML-файл в своем браузере, он должен был бы выглядеть примерно так:

Как видите, любой текст в окружении h2 и / h2 отображается как заголовок (точнее, заголовок уровня 1). Текст в тегах p отображается как обычный текст абзаца. Вы можете добавить на веб-страницу столько HTML-тегов, сколько захотите.

HTML-тегов намного больше (более 100). Некоторые теги используются для форматирования (например, h2 ), другие теги используются для отображения объектов (например, изображений, форм, таблиц и т. Д.).

Как использовать этот код?

Пока что я показал вам код, используемый для создания базовой веб-страницы. Я также показал вам, как эта веб-страница выглядит в браузере. Сейчас я покажу вам, как это сделать самому.

Чтобы создать веб-страницу, подобную приведенному выше примеру, выполните следующие действия:

  1. Откройте текстовый редактор (например, Блокнот или Simpletext) или редактор HTML
  2. Откройте новую (пустую) страницу (например, Файл> Создать... )
  3. Скопируйте код из Пример кода 2 и вставьте его в пустой текстовый файл (или введите его повторно, если хотите)
  4. Сохраните файл как index.html (обратите внимание, где вы его сохранили)

Поздравляем! Вы только что создали свою первую веб-страницу!

Теперь вы можете перейти к просмотру новой веб-страницы в браузере. Для этого можно дважды щелкнуть файл. Если это не сработает, попробуйте открыть новое окно браузера, а затем перетащите в него файл.В противном случае, в зависимости от вашего браузера, вы сможете выбрать Файл> Открыть ...

Добавление другой веб-страницы

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

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

Пример кода 3:

Привет, мир!

Моя вторая веб-страница

Добро пожаловать на мою вторую веб-страницу!

Вот моя первая веб-страница

Приведенная выше HTML-страница в браузере будет выглядеть так:

Итак, вперед - создайте вторую веб-страницу. На этот раз назовите его, скажем ... page_two.html .

Итак, если вы забыли, как это сделать, вот шаги для создания вашей второй веб-страницы:

  1. Откройте текстовый редактор (например, Блокнот или простой текст)
  2. Откройте новую (пустую) страницу (например, Файл> Создать... )
  3. Скопируйте код из Пример кода 3 и вставьте его в пустой текстовый файл (или введите его повторно, если хотите)
  4. Сохраните файл как page_two.html (сохраните его в том же каталоге, что и предыдущий файл)

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

Добавление дополнительного контента на вашу веб-страницу

Теперь, когда вы создали свой первый веб-сайт, вы можете добавить столько контента, сколько захотите.Например, вы можете добавить больше текста и отформатировать его, вы можете добавить элементы формы, изображения и многое другое.

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

Не стесняйтесь копировать / вставлять любой из этих HTML-кодов на свою собственную веб-страницу и изменять их по своему желанию. Не бойтесь экспериментировать.

Готовы опубликовать свой сайт?

Все, что вы сделали до сих пор, было на вашем локальном компьютере.Единственные люди, которые могут просматривать вашу веб-страницу, - это те, у кого есть доступ к вашему компьютеру.

Чтобы опубликовать свой веб-сайт для всеобщего обозрения, вам необходимо «загрузить» свой веб-сайт на сервер поставщика услуг хостинга веб-сайтов. Для этого вам необходимо открыть учетную запись у провайдера веб-хостинга. Как только вы это сделаете, вы сможете дать свой собственный адрес в зоне «.com» всем, кого вы хотите просмотреть на своем веб-сайте.

Обычно просто открыть учетную запись хостинга. Часто самое сложное - решить, какой план хостинга использовать.Если вы только начинаете, обычно достаточно базового плана хостинга.

Итак, чтобы опубликовать свой сайт, вам просто нужно:

  1. Открыть счет у хостинг-провайдера
  2. Загрузите свои веб-страницы (ваш веб-хостинг объяснит, как это сделать после регистрации)

Это так просто!

Наш партнерский сайт, ZappyHost, предлагает отличные планы хостинга как для новичков, так и для профессионалов. (Полное раскрытие информации: ZappyHost является партнерским сайтом, и я получаю комиссию от продажи любых продуктов).

На данный момент плана Linux Economy должно быть более чем достаточно. Это самый дешевый план, но вы получаете множество функций и достаточно места на диске. Если у вас много фотографий / изображений для вашего веб-сайта, вам может быть лучше выбрать план Deluxe или Premium, поскольку эти планы предоставляют гораздо больше места на диске.

Если вы предпочитаете сначала делать покупки, ознакомьтесь с моим Руководством по веб-хостингу. В этом руководстве более подробно объясняется, что такое веб-хостинг и как выбрать хостинг-провайдера.

Конструкторы веб-сайтов в Интернете

Я понимаю, что не все хотят тратить время на изучение HTML и т. Д., Чтобы создать свой собственный веб-сайт. Многим людям просто нужно как можно скорее запустить веб-сайт, не вдаваясь в технические подробности!

Если это похоже на вас, этот онлайн-конструктор сайтов от ZappyHost был создан специально для вас! Это инструмент, который позволяет создать веб-сайт за считанные минуты. Просто выберите шаблон, добавьте контент. Это так просто. Конечно, вы можете настроить свой шаблон, загрузив свои собственные изображения или выбрав из тысяч стоковых фотографий.

И получите это ... хостинг и доменное имя включены абсолютно БЕСПЛАТНО! Если вам нравится это звучание, проверьте это!

(Полное раскрытие информации: ZappyHost является партнерским сайтом, и я получаю комиссию от продажи любых продуктов).

Дополнительные ресурсы

Здесь, в Quackit, вы найдете тысячи страниц полезной информации о создании веб-сайтов. Ниже приведены некоторые из них, которые могут оказаться полезными для создания собственного веб-сайта:

  • Учебное пособие по созданию веб-сайта описывает два основных подхода к созданию веб-сайта (т.е. запрограммируйте сами или воспользуйтесь конструктором сайтов). В этой статье показано, как сэкономить деньги на учетной записи конструктора веб-сайтов, а также получить в процессе бесплатное доменное имя!
  • Учебное пособие по созданию веб-сайта - отличная страница для создания закладок. Это основная отправная точка для всех руководств по разработке веб-сайтов.
  • Как уже упоминалось, у нас есть коды HTML для копирования / вставки и примеры HTML, которые вы можете использовать для копирования и вставки на свои собственные веб-страницы.
  • И вы всегда можете заглянуть на домашнюю страницу Quackit, чтобы быстро взглянуть на то, что вы можете найти на Quackit

1.Создание вашей первой страницы

Глава 1. Создание вашей первой страницы

Каждый веб-сайт представляет собой набор веб-страниц, поэтому неудивительно, что ваше путешествие по созданию полноценного сайта начинается с здесь , с написания единую веб-страницу.

Технически веб-страница - это особый тип документа, написанный на компьютерном языке под названием HTML (это сокращение от HyperText Markup Language). Веб-страницы написаны для веб-браузеров - таких программ, как Internet Explorer, Google Chrome и Safari.У этих браузеров есть простая, но чрезвычайно важная задача: они читают HTML в документе веб-страницы и отображают идеально отформатированный результат, чтобы вы могли его прочитать.

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

HTML: язык Интернета

HTML - самый важный стандарт в веб-дизайне, и единственный, который абсолютно требует , если вы планируете создать веб-страницу.Каждая веб-страница написана в HTML. Неважно, содержит ли ваша страница серию записей в блоге, дюжину изображений вашего домашнего лемура или сильно отформатированный сценарий - скорее всего, если вы просматриваете его в браузере, это HTML-страница.

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

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

Примечание

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

Взлом Открытие файла HTML

Внутри HTML-страница на самом деле не более чем простой текстовый файл. Это означает, что исходный код каждой создаваемой веб-страницы будет полностью состоять из букв, цифр и нескольких специальных символов (например, пробелов, знаков препинания и всего остального, что вы можете заметить на клавиатуре).На рис. 1.1 представлен анализ обычного (и очень простого) HTML-документа.

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

Текстовый редактор позволяет вам создавать или редактировать HTML-файл (в окне, подобном тому, которое вы видите на Рисунке 1-1 внизу).Даже многие профессиональные веб-дизайнеры придерживаются простых инструментов для редактирования текста. Существует множество более изящных инструментов редактирования, разработанных специально для редактирования веб-сайтов, но на самом деле вам не понадобится ни одного из них. И если вы начнете использовать их слишком рано, вы, скорее всего, в конечном итоге утонете в море дополнительных изысков и функций, прежде чем действительно поймете, как работает HTML.

Рисунок 1-1. Каждый документ HTML на самом деле является обычным текстовым файлом. Вверху: веб-браузер отображает простой HTML-документ, демонстрируя все его великолепное форматирование.Внизу: но когда вы открываете тот же документ в текстовом редакторе, вы видите весь текст из исходного документа, а также несколько дополнительных фрагментов информации внутри угловых скобок <> . Эти HTML-теги передают информацию о структуре и форматировании документа.

Тип используемого вами текстового редактора зависит от операционной системы вашего компьютера:

  • Если у вас компьютер Windows, вы используете простой редактор Notepad. Переходим к следующему разделу.

  • Если у вас компьютер Mac, вы используете встроенный редактор TextEdit. Но сначала вам нужно внести коррективы, описанные ниже.

Поклонникам Mac необходимо настроить способ работы TextEdit, потому что программа имеет «представление HTML», которое скрывает теги в файле HTML и вместо этого показывает отформатированную страницу. Такое поведение нацелено на упрощение жизни новичков, но представляет серьезную опасность для всех, кто хочет написать настоящую веб-страницу. Чтобы избежать путаницы и убедиться, что вы пишете настоящий, необработанный HTML, вам необходимо отключить просмотр HTML.Вот как это сделать:

  1. Выберите TextEdit Настройки .

    Откроется окно с вкладками параметров TextEdit (рис. 1-2).

    Рисунок 1-2. В окне настроек TextEdit есть две вкладки с настройками: «Новый документ» (слева) и «Открыть и сохранить» (справа).

  2. Щелкните «Новый документ», а затем в разделе «Формат» выберите «Обычный текст».

    Это указывает TextEdit начать вас с обычного неформатированного текста и отказаться от панели инструментов форматирования и линейки, которые в противном случае появлялись бы на экране, которые не имеют отношения к созданию файлов HTML.

  3. Нажмите «Открыть и сохранить» и включите первую опцию «Отображать файлы HTML как HTML-код вместо форматированного текста».

    Это указывает TextEdit на то, чтобы вы могли видеть (и редактировать) реальную разметку HTML, теги и все остальное, а не отформатированную версию страницы, как в веб-браузере.

  4. Закройте окно настроек, а затем закройте TextEdit .

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

Как вы, несомненно, знаете, веб-браузер - это программа, которая позволяет вам переходить и отображать веб-страницы. Без браузеров Интернет все еще существовал бы, но вы не смогли бы его увидеть.

Работа браузера на удивление проста - на самом деле, основная часть его работы состоит из двух задач. Во-первых, он запрашивает веб-страницы, что происходит, когда вы вводите адрес веб-сайта (например, www.google.com) или щелкаете ссылку на веб-странице. Браузер отправляет этот запрос на удаленный компьютер, называемый веб-сервером .Сервер, как правило, намного мощнее домашнего компьютера, поскольку ему необходимо одновременно обрабатывать несколько запросов браузера. Сервер принимает во внимание эти запросы и отправляет обратно содержимое желаемых веб-страниц.

Когда браузер получает этот контент, он задействует свой второй навык, и отображает или рисует веб-страницу. Технически это означает, что браузер преобразует обычный текст, который он получает от сервера, в отображаемый документ на основе инструкций по форматированию, встроенных в страницу.Конечным результатом является страница с богатой графикой, с разными шрифтами, цветами и ссылками. Рисунок 1-3 иллюстрирует этот процесс.

Рисунок 1-3. Веб-браузер предназначен для очень хороших двух вещей: связываться с удаленными компьютерами, чтобы запросить веб-страницы, а затем отображать эти страницы на вашем компьютере.

Хотя вы обычно запрашиваете в браузере страницы из Интернета, вы также можете использовать его для просмотра веб-страниц, хранящихся на вашем компьютере, что особенно удобно, когда вы тренируете свои навыки работы с HTML.Фактически, ваш компьютер уже знает, что файлы, которые заканчиваются на .htm или .html , имеют содержимое веб-страницы. Поэтому, если вы дважды щелкните один из этих файлов, ваш компьютер автоматически запустит веб-браузер. (Вы можете получить тот же результат, перетащив файл веб-страницы в уже открытое окно браузера.)

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

В следующем списке описаны самые популярные браузеры на сегодняшний день:

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

    Загрузите Google Chrome на www.google.com/chrome.

  • Internet Explorer - самый долговечный браузер и официальный стандарт во многих корпоративных и правительственных средах. Это также браузер, который предустановлен в Windows, поэтому его используют люди, не являющиеся техническими специалистами, если они не хотят (или не знают, как) устанавливать что-то новое.Даже горячие веб-дизайнеры должны проверять, понимает ли Internet Explorer их страницы, потому что даже старые версии IE, такие как IE 8, остаются популярными.

    Чтобы загрузить самую последнюю версию Internet Explorer, посетите www.microsoft.com/ie.

    Рисунок 1-4. Статистика использования браузера, которая оценивает процент людей, использующих каждый основной браузер, варьируется в зависимости от того, какие сайты вы просматриваете и как вы подсчитываете посетителей, но на момент написания этой статьи это одна разумная оценка. (Текущую статистику использования браузера см. Http: // tinyurl.com / stats-browsers.)
  • Firefox начал свою жизнь как современный ответ на Internet Explorer. Он по-прежнему впереди всех со своими невероятно гибкими надстройками , крошечными программами, которые другие люди разрабатывают для улучшения Firefox с дополнительными функциями, такими как уведомление веб-почты и эскизы сайтов, которые отображаются на странице результатов поиска. Лучше всего то, что армия программистов-добровольцев постоянно обновляет Firefox.

    Попробуйте Firefox на www.mozilla.org / firefox.

  • Safari - это браузер, разработанный Apple, который поставляется с текущими версиями операционной системы Mac OS. В таких продуктах Apple, как iPhone, iPad и iPod Touch, также используется браузер Safari (хотя его мобильная версия работает несколько иначе). Прекрасные люди в Apple создали воплощение Safari для компьютеров с Windows, но с тех пор отказались от него, сделав Safari доступным только для Apple.

    Откройте Safari по адресу www.apple.com/safari.

  • Opera - это упрощенный и простой в установке браузер, который существует уже более десяти лет и служит противоядием от огромных размеров и бессмысленных излишеств Internet Explorer.В течение многих лет Opera сдерживала неприятная деталь: если вы хотели версию без рекламы, вам нужно было заплатить. Сегодня Opera бесплатна и не содержит рекламы, как и другие браузеры из этого списка. У него немного, но преданных последователей, но он занимает пятое место в рейтинге веб-браузеров.

    Посетите Opera на сайте www.opera.com.

Учебное пособие: создание файла HTML

Теперь, когда вы подготовили свою веб-кухню, вы готовы создать свою собственную веб-страницу. В этом руководстве вы создадите базовую страницу, показанную на рис. 1-1.

Подсказка

Как и все учебные пособия в этой книге, вы найдете решение для этого упражнения на сопутствующем сайте http://prosetech.com/web. Просто загляните в папку с названием Tutorial-1-1 (что означает «Глава 1, первое руководство», если вам интересно).

Готовы начать? Вот что нужно сделать:

  1. Запустите текстовый редактор .

    На компьютере с Windows это Блокнот. Чтобы открыть Блокнот, нажмите кнопку «Пуск», введите «блокнот» и щелкните появившийся значок Блокнота.

    На Mac это TextEdit. Чтобы запустить его, перейдите в папку «Приложения» и дважды щелкните TextEdit.

    Когда вы загружаете свой текстовый редактор, он запускает вас с новым пустым документом, а это именно то, что вам нужно.

  2. Начните писать свой HTML-код .

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

     

    United Popsicle Workers Union

    Мы боремся за ваши права.

    Технически в этом двухстрочном документе отсутствуют некоторые структурные детали, которые должны иметь уважающие себя веб-страницы. Однако любой браузер может прочитать этот фрагмент HTML и правильно интерпретировать то, что вы хотите: две строки форматированного текста, показанные на рис. 1-1 вверху.

  3. Когда вы закончите свою веб-страницу, выберите Файл Сохранить .

    При этом открывается окно «Сохранить» или «Сохранить как», в котором вы вводите сведения о своем новом файле (рис. 1-5).

    Рисунок 1-5. Независимо от того, используете ли вы Блокнот (показан здесь) или TextEdit, в сохранении файла нет ничего сложного. Просто не забудьте включить «.htm» или «.html» в конце имени файла, чтобы идентифицировать его как документ HTML.

  4. Выберите место для сохранения файла и дайте ему имя popsicles.htm .

    Если вы не знаете, где хранить файл, пока можете сохранить его прямо на рабочем столе.

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

    Примечание для параноиков: нет разницы между файлами .htm и .html. Оба они на 100% одинаковы - текстовые файлы, содержащие HTML-контент.

    Примечание

    С технической точки зрения вы можете использовать любое расширение файла, какое захотите.Однако использование .htm или .html избавляет от путаницы (вы сразу понимаете, что файл является веб-страницей) и помогает избежать распространенных проблем. Например, использование расширения файла .htm или .html гарантирует, что, когда вы дважды щелкните имя файла, ваш компьютер будет знать, что открыть его в веб-браузере, а не в какой-либо другой программе. Также важно использовать расширение .htm или .html, если вы планируете загружать файлы на веб-сервер; колючие серверы могут отказываться выдавать страницы с нестандартными расширениями файлов.

  5. При необходимости измените способ кодирования файла в текстовом редакторе на UTF-8 .

    Это стандарт TextEdit, поэтому пользователи Mac могут пропустить этот шаг. Но в Блокноте вам нужно выбрать UTF-8 в списке «Кодировка» в нижней части окна «Сохранить как».

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

  6. Нажмите «Сохранить», чтобы сделать его официальным .

    Если вы используете TextEdit, программа может спросить, действительно ли вы хотите использовать .htm или .html расширение вместо .txt , стандартный текстовый файл; нажмите "Использовать .htm". В Блокноте такой шаг не требуется. Однако на самом деле вы не увидите свои HTML-файлы в списке, если не выберете «Все файлы (*. *)» В поле «Сохранить как тип» (в котором изначально выбрано «Текстовые документы (* .txt)»).

  7. Чтобы просмотреть свою работу, откройте файл в браузере (рис. 1-6) .

    Если вы используете расширение .htm или .html, открыть страницу обычно так же просто, как дважды щелкнуть имя файла.Или вы можете перетащить файл веб-страницы в открытое окно браузера.

    Рисунок 1-6. Адресная строка браузера показывает, где на самом деле находится текущая веб-страница. Если вы видите в адресе «http: //», это значит, что он исходит от веб-сервера в Интернете (вверху). Если вы посмотрите на веб-страницу, которая находится на вашем собственном компьютере, вы увидите обычный адрес локального файла (посередине, показывающий расположение файла Windows в Internet Explorer), или вы увидите URL-адрес, который начинается с префикса «file: // / ”(Внизу, где показано расположение файла в Chrome).

  8. По окончании редактирования закройте текстовый редактор .

    В следующий раз, когда вы захотите изменить документ, просто запустите текстовый редактор, выберите «Файл» → «Открыть», а затем выберите нужный файл или перетащите его в уже открытое окно текстового редактора.

Подсказка

Вот уловка, которая поможет вам быстро открывать файлы HTML. Найдите свой файл, затем щелкните его правой кнопкой мыши (на Mac нажмите, удерживая клавишу Control), и выберите «Открыть с помощью». Откроется список программ, которые можно использовать для открытия файла.Щелкните Блокнот (или TextEdit) в списке, чтобы открыть новое окно текстового редактора и открыть HTML-файл одним махом.

Если вы оставите окно веб-браузера открытым во время редактирования HTML-файла в текстовом редакторе, браузер сохранит старую версию вашего файла. Чтобы увидеть последние изменения, снова сохраните текстовый файл (выберите «Файл» → «Сохранить»), а затем обновите страницу в браузере (обычно это так же просто, как щелкнуть страницу правой кнопкой мыши и выбрать «Обновить» или «Обновить»).

Просмотр HTML действующей веб-страницы

Большинство текстовых редакторов не позволяют открывать веб-страницы в Интернете.Однако веб-браузеры дают вам возможность заглянуть в необработанный HTML-код, который скрывается за любой веб-страницей.

Если вы используете Internet Explorer, Chrome, Firefox или любой другой браузер, кроме Safari, вы можете использовать ярлык. После того, как вы перейдете на веб-страницу, которую хотите изучить, щелкните правой кнопкой мыши в любом месте страницы и выберите «Просмотр исходного кода» или «Просмотр исходного кода страницы» (точная формулировка зависит от браузера). Появится новое окно, показывающее необработанный HTML-код, лежащий в основе страницы.

Если вы используете Safari на Mac, вам нужно перепрыгнуть через лишнюю петлю, чтобы увидеть HTML-код веб-страницы. Сначала включите меню «Разработка», выбрав Safari → «Настройки» → «Дополнительно», а затем установите флажок «Показать меню разработки в строке меню». Как только вы это сделаете, посетите страницу, которую хотите проанализировать, и выберите «Разработка» → «Показать исходный код страницы».

Совет

Firefox имеет удобную функцию, которая позволяет сосредоточиться только на части HTML на сложной веб-странице. Просто выделите интересующий вас текст на самой странице, щелкните его правой кнопкой мыши и выберите «Просмотреть источник выделения».

Большинство веб-страниц значительно сложнее, чем пример popsicles.htm , показанный на рис. 1-1, поэтому вам нужно пройти через гораздо больше HTML-тегов, когда вы смотрите на разметку веб-страницы. Вы также, вероятно, найдете густую чащу кода JavaScript, набитого в верхней части страницы, лишенного всех интервалов и почти невозможного для чтения. Но даже если разметка выглядит тарабарщиной, не паникуйте. К тому времени, когда вы дочитаете эту книгу, вы сможете просмотреть груду HTML-кода, чтобы найти интересующие вас фрагменты.Фактически, профессиональные веб-разработчики часто используют технику просмотра исходного кода, чтобы проверить работу своих конкурентов.

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

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

Тег можно узнать по угловым скобкам, двум специальным символам, которые выглядят следующим образом: <> . При создании тега вы вводите код HTML в скобках. Этот код предназначен только для обозревателя; веб-посетители никогда его не видят (если только они не используют команду «Просмотр исходного кода» для просмотра HTML-кода). По сути, код - это инструкция, которая передает браузеру информацию о том, как отформатировать следующий текст.

Например, один простой тег - это тег , что означает «полужирный» (по соглашению имена тегов обычно пишутся в нижнем регистре).Когда браузер встречает этот тег, он включает полужирное форматирование, которое влияет на весь текст, следующий за тегом. Вот пример:

 Этот текст не полужирный.  Этот текст выделен жирным шрифтом. 

Сам по себе тег недостаточно хорош; он известен как начальный тег , что означает, что он включает какой-то эффект (в данном случае жирный шрифт). Вы объединяете большинство начальных тегов с совпадающим конечным тегом , который отключает эффект от .

Конечный тег можно легко распознать. Они выглядят так же, как начальные теги, за исключением того, что начинаются с косой черты. Это означает, что они начинаются так вместо этого <. Таким образом, конечный тег для полужирного шрифта - . Вот пример:

 Это не жирный шрифт.  Обратите внимание!  Теперь мы вернулись к нормальной жизни. 

Какой браузер отображает как:

Это не жирный шрифт. Обратите внимание! Теперь мы вернулись к нормальной жизни.

Этот пример отражает еще один важный принцип браузеров: они всегда обрабатывают теги в том порядке, в котором вы помещаете их в свой HTML. Чтобы поместить жирный шрифт в нужное место, убедитесь, что вы правильно разместили теги и .

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

Примечание

Добавление тегов к обычному тексту известно как разметка документа, а сами теги известны как разметка HTML . Когда вы смотрите на необработанный HTML, вас может заинтересовать содержимое (текст, заключенный между тегами) или разметка (сами теги).

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

Вот основная идея: пара тегов создает контейнер (см. Рис. 1-7). Вы размещаете контент (например, текст) внутри этого контейнера. Например, когда вы используете теги и , вы создаете контейнер, который применяет полужирное форматирование к тексту внутри контейнера. При создании веб-страниц вы будете использовать разные контейнеры для обертывания разных фрагментов текста. Если вы думаете об элементах таким образом, вы никогда не забудете включить конечный тег.

Рисунок 1-7.Чтобы получить жирный текст, вам нужно начать с правильного контейнера. Это элемент .

Примечание

Когда кто-то обращается к элементу , он имеет в виду весь шебанг - начальный тег, конечный тег и содержимое между ними. Когда кто-то обращается к тегу , он обычно имеет в виду начальный тег, который запускает эффект.

Конечно, без исключения жизнь не была бы такой веселой (и компьютерные книги были бы не такими толстыми).Если сразу перейти к делу, на самом деле существует двух типов элементов:

  • Контейнерные элементы , безусловно, являются наиболее распространенным типом элементов. Они применяют форматирование к содержимому, помещенному между начальным и конечным тегами.

  • Автономные элементы не включают и не выключают форматирование. Вместо этого они вставляют на страницу что-то , например изображение. Одним из примеров является элемент , который вставляет разрыв строки на веб-страницу.Автономные элементы не входят в пары, как элементы-контейнеры, и вы можете услышать, что их называют пустыми элементами , потому что вы не можете поместить в них какой-либо текст.

В этой книге все автономные элементы включают символ косой черты перед закрывающим > , что-то вроде открывающего и закрывающего тегов в одном лице. Таким образом, вы увидите разрыв строки, записанный как
вместо
. Эта форма, называемая синтаксисом пустых элементов , удобна, поскольку она четко отличает элементы контейнера от автономных элементов.Так вы никогда не запутаетесь.

Примечание

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

На рис. 1-8 показаны два типа элементов в перспективе.

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

В предыдущем примере вы применили простой элемент , чтобы получить полужирное форматирование. Вы помещаете текст между тегами и . Однако текст - не единственное, что можно поместить между начальным и конечным тегами. Вы также можете вложить один элемент внутрь другого. Фактически, вложенных элементов - обычная практика при создании веб-страниц.Он позволяет применять к тексту более подробные инструкции по стилю, объединяя все элементы форматирования в одном наборе инструкций. Вы также можете вкладывать элементы для создания более сложных компонентов страницы, таких как маркированные списки (см. Структурирование текста).

Чтобы увидеть вложение в действии, вам понадобится другой элемент для работы. В этом примере рассмотрим, что произойдет, если вы хотите выделить жирным шрифтом, а курсивом. HTML не содержит ни одного элемента для этой цели, поэтому вам нужно объединить знакомый элемент (чтобы выделить текст полужирным шрифтом) с элементом (чтобы выделить его курсивом).Вот пример:

 Это word  выделено полужирным шрифтом и курсивом. 

Когда браузер просматривает этот фрагмент HTML, он создает текст, который выглядит следующим образом:

Это слово имеет полужирное и курсивное форматирование.

Между прочим, не имеет значения, поменяете ли вы порядок тегов и на обратный. Следующий HTML дает точно такой же результат.

 Это word  выделено курсивом и полужирным шрифтом.

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

 Это word  выделено курсивом и полужирным шрифтом. 

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

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

Note

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

Общие сведения о документах HTML

До сих пор вы рассматривали фрагменты HTML - части полного документа HTML. Это дало вам представление о том, как работает HTML, но вам нужно будет активизировать свою игру, прежде чем вы сможете покорить Интернет. В этом разделе вы узнаете о структуре, которая отличает фрагмент HTML от официального документа HTML.

Определение типа документа

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

Спустя годы правила HTML (и CSS, стандарта таблиц стилей, о котором вы узнаете в главе 3) были формализованы. Используя эти новые правила, каждый браузер может отображать одну и ту же страницу одинаково. Но это изменение вызвало серьезную головную боль для старых браузеров, таких как Internet Explorer, которые пережили темные века HTML.Он должен был каким-то образом поддерживать новые стандарты, сохраняя при этом возможность правильно отображать существующие веб-страницы, в том числе те, которые основывались на старых особенностях.

Интернет-сообщество остановилось на простом решении. При разработке новой современной веб-страницы вы указываете этот факт, добавляя код, называемый определением типа документа (DTD) или doctype , который идет в самом начале вашего HTML-документа (рис. 1-9).

Рисунок 1-9. Определение типа документа (DTD) - это первая часть информации в файле HTML.Он сообщает браузеру, какой стандарт разметки вы использовали для написания страницы.

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

Но когда браузер встречает HTML-документ, у которого нет документа, все ставки отключены. Internet Explorer, например, переключается в ужасный режим причуд , где пытается вести себя так же, как 10 лет назад, с причудами и всем остальным.Это гарантирует, что действительно старые веб-страницы сохранят вид, который они имели при первом создании, даже если они полагаются на старые ошибки браузера, которые уже давно исправлены. К сожалению, разные браузеры по-разному ведут себя при просмотре страницы без документа. Скорее всего, вы получите текст разного размера, несогласованные поля и границы, а также неправильно расположенное содержание. По этой причине веб-страницы без доктайпов - плохая новость, и вам следует избегать их создания.

В прошлом веб-дизайнеры использовали разные типы документов для обозначения разных версий разметки HTML (например, XHTML, HTML5 или действительно старый HTML 4.01). Но сегодня веб-разработчики почти всегда используют простой универсальный тип документа HTML5:

  

Несмотря на то, что этот тип документа был формализован как часть HTML5, каждый браузер поддерживает его - даже старые версии IE, о которых никогда не слышали. HTML5. Это потому, что универсальный тип документа ничего не говорит о том, какую версию HTML вы предпочитаете. Вместо этого он просто указывает, что язык - это HTML. Этот однострочный документ просто отражает истинную философию HTML - поддерживать старые и новые документы.

Для сравнения, вот более многословный doctype для XHTML 1.0, который вы все еще можете встретить на старых веб-страницах:

  

Даже опытным веб-разработчикам приходилось копировать тип документа XHTML 1.0 с существующей веб-страницы, чтобы избежать неправильного ввода.

В этой книге во всех примерах используется doctype HTML5 не только потому, что это текущий стандарт, но и потому, что он подготавливает ваши страницы к будущему.Но то, что вы используете этот тип документа, не означает, что вы можете использовать все функции HTML5. Фактически, вам следует пока избегать большинства из них, если вы не уверены, что они хорошо поддерживаются всеми браузерами, которые люди используют сегодня.

Примечание

В этой книге вы будете использовать только функции HTML5, которые работают во всех современных браузерах. Но если вам интересно узнать о более экспериментальных частях языка, которые все еще не очень хорошо поддерживаются браузерами, ознакомьтесь с HTML5: отсутствующее руководство (O’Reilly).

Теперь вы готовы заполнить остальную часть веб-страницы.

Чтобы создать настоящий HTML-документ, вы начинаете с трех элементов контейнера: , и . Эти три элемента работают вместе, чтобы описать базовую структуру вашей страницы:

Этот элемент охватывает все (кроме документа) на вашей веб-странице.

Этот элемент обозначает заголовок часть вашего документа, который включает некоторую информацию о вашей веб-странице.Первая деталь - это заголовок - откройте свою страницу в браузере, и этот заголовок появится как заголовок на вкладке. При желании раздел может также включать ссылки на таблицы стилей (о которых вы узнаете в главе 3) и файлы JavaScript (глава 14).

Этот элемент содержит основную часть вашей веб-страницы, включая фактическое содержимое, которое вы хотите показать миру.

Есть только один правильный способ использовать эти три элемента на странице.Вот их правильное расположение с типом документа HTML5 в начале страницы:

 


...


...

 

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

Когда у вас есть скелет HTML, вам нужно добавить в смесь еще два элемента контейнера.Для каждой веб-страницы требуется элемент </code>, который находится в разделе заголовка страницы, и вам необходимо создать контейнер для текста в разделе <code> <body> </code> страницы. Один универсальный текстовый контейнер - это элемент <code> <p> </code>, который представляет абзац. </p> <p> Вот элементы, которые вам нужно добавить: </p> <dl> <dt> <code> <title> </code> </dt> <dd> <p> Этот элемент устанавливает заголовок для вашей веб-страницы. В названии играет несколько ролей.Во-первых, веб-браузеры отображают его на вкладке браузера или в верхней части окна браузера. Во-вторых, когда посетитель добавляет вашу страницу в закладки, браузер использует название в качестве метки закладки. В-третьих, когда ваша страница появляется в веб-поиске, поисковая система обычно отображает этот заголовок в качестве первой строки результатов, за которым следует фрагмент контента со страницы. </p> </dd> <dt> <code> <p> </code> </dt> <dd> <p> Обозначает абзац. Веб-браузеры не делают отступы между абзацами, но они добавляют небольшой промежуток между последовательными абзацами, чтобы они оставались разделенными.</p> </dd> </dl> <p> Вот веб-страница с этими двумя новыми ингредиентами (выделены жирным шрифтом): </p> <pre> <! DOCTYPE html> <html> <head> <strong> <code> <title> Все, что я знаю о веб-дизайне

Если вы откроете этот документ в веб-браузере, вы обнаружите, что страница пуста, но отображается заголовок (как показано на рисунке 1-10).

Рисунок 1-10.Когда браузер отображает веб-страницу, он показывает заголовок страницы на вкладке браузера или в верхней части окна. Но учтите: название не всегда подходит.

В его нынешнем виде этот HTML-документ является хорошим шаблоном для будущих страниц. Базовая структура на месте; вам просто нужно изменить заголовок и добавить текст. Это задача, за которую вы возьмётесь дальше.

Учебное пособие: создание полного HTML-документа

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

Совет

Как и все учебные пособия в этой книге, вы можете найти решение для этого упражнения на сопутствующем сайте http://prosetech.com/web. Просто загляните в папку с именем Tutorial-1-2 (сокращение от «Chapter 1, second tutorial»). По мере того, как вы создаете эту страницу, добавляя список, изображение и заголовки, она проходит несколько итераций.Учебные файлы включают отдельный файл для каждого этапа улучшения.

Независимо от того, какую страницу вы хотите создать, вы всегда начинаете одинаково:

  1. Запустите текстовый редактор .

    Это Блокнот или TextEdit.

  2. Введите скелет HTML в новый файл .

    Это doctype, корневой элемент и два основных раздела каждой веб-страницы: и .Выглядит это так:

     
    
    
    
    
    
     

    Чтобы сэкономить время в будущем, сохраняйте эту страницу, а затем копируйте и вставляйте этот скелет HTML каждый раз при создании нового файла. Папка с учебником включает файл с именем skeleton.htm , который поможет вам в этом - он содержит doctype и три стандартных элемента HTML-страницы, но не содержит содержимого.

  3. Добавьте заголовок в раздел .

    Добавьте элемент </code> в новую строку между открывающим тегом <code> <head> </code> и закрывающим тегом <code> </head> </code>: </p> <pre> <strong> <code> <title> Hire Me!

  4. Добавьте свой контент в раздел .

    Например, предположим, вы хотите написать простую страницу резюме. Вот очень простой пример:

     
    
    
        Найми меня!   
    
    
       

    Меня зовут Ли Пак.Нанять меня в свою компанию, потому что моя работа быстро .

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

  5. Сохраните HTML-файл как резюме .htm и откройте его в веб-браузере .

    Если ваша страница отображается правильно (см. Рис. 1-11), вы можете быть уверены, что у вас хорошее начало.

Рисунок 1-11. Добро пожаловать в Интернет. На этой странице не так много полезных функций HTML (и Ли, вероятно, не получится нанять), но она представляет собой одну из самых простых HTML-страниц, которые вы можете создать.

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

Когда вы начнете создавать более подробные веб-страницы, вы быстро обнаружите, что создание страницы не так просто, как, скажем, создание страницы в Microsoft Word. Например, вы можете улучшить страницу резюме, создав список навыков. Вот разумная первая попытка:

 


 Наймите меня! 


Я Ли Пак.Наймите меня в свою компанию, потому что моя работа вне пределов шепот . Мои навыки включают: * Быстрый набор текста (почти 12 слов в минуту). * Невероятная заточка карандашей. * Изобретательское оправдание. * Ведение переговоров с мировыми офицерами.

Проблема возникает, когда вы открываете этот, казалось бы, невинный документ в своем веб-браузере (рис. 1-12).

Рисунок 1-12. HTML игнорирует разрывы строк и последовательные пробелы, поэтому то, что выглядит как аккуратно организованный текст в вашем HTML-файле, может превратиться в беспорядочный текст, когда вы отображаете его в браузере.

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

Допустим, вы настраиваете свою гипотетическую веб-страницу с идеальным интервалом, отступом и шириной линии для монитора вашего компьютера . Загвоздка в том, что эта страница может не так хорошо выглядеть на чужом мониторе. Например, часть текста может прокручиваться с правой стороны страницы, что затрудняет чтение. А разные мониторы - это только часть проблемы. Современные веб-страницы должны работать на различных типах устройств . Будущий босс Ли Пака может просмотреть резюме Ли на чем угодно, от новейшего широкоэкранного ноутбука до планшетного компьютера или смартфона.

Чтобы иметь дело с этим диапазоном опций отображения, HTML использует элементы для определения структуры вашего документа. Вместо того, чтобы сообщать браузеру: «Здесь вы переходите к следующей строке, а здесь вы добавляете четыре дополнительных пробела», HTML сообщает браузеру: «Вот два абзаца и маркированный список». Браузер должен отображать страницу, используя инструкции, которые вы включаете в свой HTML.

Чтобы исправить пример резюме, вам нужно использовать больше элементов абзаца и два новых элемента контейнера:

Указывает начало маркированного списка, называемого неупорядоченным списком на жаргоне HTML.Список - идеальный способ подробно описать навыки Ли.

  • Обозначает отдельный элемент маркированного списка. Ваш браузер делает отступ для каждого элемента списка, а для предложений, выходящих за пределы одной строки, правильно делает отступ для последующих строк, чтобы они совпадали с первой. Кроме того, перед каждым элементом ставится маркер (•). Вы можете использовать элемент списка только внутри такого элемента списка, как

      . Другими словами, каждый элемент списка (
    • ) должен находиться в элементе списка (
        ).

    Вот исправленная веб-страница (показанная на рис. 1-13), где структурные элементы выделены жирным шрифтом:

     
    
    
     Наймите меня! 
    
    
       

    Я Ли Пак. Наймите меня в свою компанию, потому что моя работа вне пределов шепот .

    Мои навыки включают:

    • Быстрый набор текста (почти 12 слов в минуту).
    • Невероятная заточка карандашей.
    • Придумывание оправданий изобретательности.
    • Ведение переговоров с мирными офицерами.

    Рисунок 1-13. При наличии правильных элементов (как показано в коде на этой странице) браузер понимает структуру вашего HTML-документа и знает, как его отображать.

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

  • ) имеют отступ. Это не влияет на браузер, но упрощает просмотр структуры HTML-документа и оценку того, как браузер будет отображать его.

    Рисунок 1-14 анализирует HTML-документ с использованием модели дерева . Древовидная модель - это удобный способ познакомиться с анатомией веб-страницы, поскольку она сразу показывает общую структуру страницы. Однако по мере того, как ваши веб-страницы становятся более сложными, они, вероятно, станут слишком сложными для использования древовидной модели.

    Рисунок 1-14. Вот еще один способ взглянуть на созданный вами HTML-код. Модель дерева показывает, как вы вкладываете элементы HTML. Следуя стрелкам, вы увидите, что элемент верхнего уровня содержит элементы и .Внутри элемента находится элемент </code>, а внутри элемента <code> <body> </code> находятся два абзаца и маркированный список с четырьмя элементами. Если вы посмотрите на модель дерева достаточно долго, вы поймете, почему HTML называет все эти элементы «элементами контейнера». </p> <p> Если вы мазохист, вам не нужно использовать пробелы. Предыдущий пример в точности эквивалентен следующему гораздо менее читаемому HTML-документу: </p> <pre> <! DOCTYPE html> <html> <head> <title> Hire Me!

    я Ли Парк.Наймите меня в свою компанию, потому что моя работа без шума .

    Мои навыки:

    • Быстрый набор текста (почти 12 слов в минуту).
    • Невероятная заточка карандашей.
    • Изобретательность поиск оправданий.
    • Ведение переговоров с мирными офицерами.

    Конечно, человеку почти невозможно написать такой HTML, не допустив ошибки.

    Где все картинки?

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

    Хотя это может показаться удивительным, вы не можете сохранить изображение в файле HTML. Есть множество веских причин, по которым вы все равно не захотите - ваши файлы веб-страниц станут действительно большими, будет сложно изменять ваши изображения или делать с ними что-то еще, и вам будет дьявольски весело редактировать свои страницы. в текстовом редакторе, потому что данные изображения могут создать беспорядок.Решение состоит в том, чтобы сохранить ваши изображения в виде отдельных файлов, а затем свяжет с ними ваш HTML-документ. Таким образом, ваш браузер вытягивает изображения и размещает их именно там, где вы хотите, на своей странице.

    Инструмент связывания, который вставляет изображения, - это элемент (сокращение от «изображение»). Он указывает на файл изображения, который браузер извлекает и вставляет на страницу. Вы можете поместить файл изображения в ту же папку, что и ваша веб-страница (что является самым простым вариантом), или вы можете разместить его на совершенно другом веб-сайте.

    Хотя в главе 4 вы узнаете все, что когда-либо хотели знать о веб-графике, сейчас стоит рассмотреть простой пример. Чтобы попробовать это, вам понадобится готовое для Интернета изображение. (Наиболее часто поддерживаемые типы файлов изображений - это JPEG, GIF и PNG.) Если у вас нет изображения под рукой, вы можете загрузить образец изображения leepark.jpg из папки Tutorial-1-2. Вот пример элемента , который использует файл leepark.jpg :

      Lee Park Portrait  

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

    Однако есть очевидная разница между элементом
    и элементом . Хотя является отдельным элементом, это не т самодостаточный.Чтобы элемент имел какое-либо значение, вам необходимо предоставить еще две части информации: имя файла изображения и некоторый альтернативный текст, который используется в тех случаях, когда браузер не может загрузить или отобразить изображение (см. Альтернативный текст ). Чтобы включить эту дополнительную информацию в элемент изображения, HTML использует атрибуты , дополнительные части информации, которые появляются на после имени элемента , но перед закрывающим символом>.

    Пример включает два атрибута, разделенных пробелом.Каждый атрибут состоит из двух частей: имени (которое сообщает браузеру, что делает атрибут) и значения (части информации, которую вы предоставляете). Имя первого атрибута - src , что является сокращением от слова «источник»; он сообщает браузеру, где взять желаемое изображение. В этом примере значение атрибута src равно leepark.jpg , что является именем файла с изображением Ли Пака.

    Имя второго атрибута - alt , что является сокращением от «альтернативного текста.Он сообщает браузеру, что вы хотите, чтобы он отображал текст, если он не может отображать изображение. Его значение - это текст, который вы хотите отобразить, в данном случае это «Lee Park Portrait».

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

     
    
    
     Наймите меня! 
    
    
    

    Я Ли Пак. Наймите меня в свою компанию, потому что моя работа вне пределов шепот . Lee Park Portrait

    Мои навыки включают:

    • Быстрый набор текста (почти 12 слов в минуту).
    • Невероятная заточка карандашей.
    • Изобретательное придумывание оправданий.
    • Ведение переговоров с мирными офицерами.

    На рис. 1-15 показано, где именно заканчивается изображение.

    Рисунок 1-15.Вот веб-страница, на которой встроено изображение благодаря связывающей способности элемента изображения. Чтобы отобразить этот документ, веб-браузер выполняет отдельный запрос на получение файла изображения. В результате ваш браузер может отображать текст веб-страницы перед загрузкой изображения, в зависимости от того, сколько времени занимает загрузка (обычно это доли секунды).

    Note

    В главе 4 вы узнаете о многих других приемах веб-графики, в том числе о том, как изменять их размер и обтекать их текстом.

    10 самых важных элементов (и еще несколько)

    Теперь вы достигли точки, когда вы можете создать базовый документ HTML, и у вас уже есть несколько элементов за плечами. Вы знаете основы - все, что вам осталось, - это расширить свои знания, научившись использовать больше элементов.

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

    Примечание

    Вы не можете определять свои собственные элементы и использовать их в документе HTML, потому что веб-браузеры не знают, как их интерпретировать.

    Некоторые элементы, такие как элемент

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

    Вы можете размещать блочные элементы непосредственно внутри раздела вашей веб-страницы или внутри другого блочного элемента. В Таблице 1-1 представлен краткий обзор некоторых из наиболее фундаментальных блочных элементов, некоторые из которых вы уже видели. Он также указывает, какие из них являются элементами контейнера, а какие - отдельными элементами. (Как вы узнали из статьи «Понимание элементов», для элементов-контейнеров требуются начальный и конечный теги, но для автономных элементов достаточно одного тега.) Вы более подробно изучите все эти элементы в главе 2.

    Таблица 1-1. Базовые блочные элементы.

    000

    ЭЛЕМЕНТ

    НАИМЕНОВАНИЕ

    ТИП ЭЛЕМЕНТА

    ОПИСАНИЕ

    2

    003000

    Контейнер

    Как, вероятно, вам сказал учитель английского в средней школе, абзац является основной единицей для организации текста.Когда вы используете более одного элемента абзаца в строке, браузер вставляет пробел между двумя абзацами - чуть больше, чем полная пустая строка.

    ,

    ,

    ,

    ,
    ,

    Заголовок

    Контейнер

    Элементы заголовка - это хороший способ структурировать вашу страницу и выделить заголовки.Они отображают текст большими жирными буквами. Чем меньше число, тем крупнее текст, поэтому

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


    Горизонтальная линия (или горизонтальная линия на языке HTML)

    Автономный

    Горизонтальная линия может помочь вам отделить один раздел вашей веб-страницы от другого .Линия автоматически соответствует ширине окна браузера. (Или, если вы поместите строку внутри другого элемента, например ячейки в таблице, она займет ширину своего контейнера.)

      ,

    Неупорядоченный список, элемент списка

    Контейнер

    Эти элементы позволяют создавать базовые маркированные списки. Браузер автоматически помещает отдельные элементы списка в отдельные строки и делает отступ для каждого из них.Для быстрого изменения темпа вы можете заменить

      на
        , чтобы получить автоматически пронумерованный список вместо маркированного списка (ol означает «упорядоченный список»).

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

    Таблица 1-2. Основные встроенные элементы.

    ЭЛЕМЕНТ

    НАИМЕНОВАНИЕ

    ТИП

    ОПИСАНИЕ

    78

    Полужирный и курсив

    Контейнер

    Эти два элемента применяют стиль символов - жирный или курсивный текст.(Технически означает «текст другим голосом», а означает «стилистически смещенный текст», и есть способы изменить применяемое форматирование, как вы увидите в главе 3. Но в реальном мире почти все веб-разработчики ожидают, что означает курсив, а означает жирный шрифт.)


    Разрыв строки

    Автономный

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

    Изображение

    Автономный

    Для отображения изображения внутри веб-страницы используйте этот элемент. Убедитесь, что вы указали атрибут src , чтобы указать имя файла изображения, которое вы хотите отобразить в браузере.

    Якорь

    Контейнер

    Элемент привязки является отправной точкой для создания гиперссылок, позволяющих посетителям веб-сайта переходить с одной страницы на другую.Вы узнаете об этом незаменимом элементе в главе 6.

    Чтобы образец резюме выглядел более респектабельно, вы можете использовать несколько ингредиентов из таблиц 1-1 и 1-2. На рис. 1-16 показана измененная версия веб-страницы, в которую добавлены некоторые новые элементы.

    Рисунок 1-16. Этот HTML-документ, содержащий больше заголовков, списков и горизонтальную линию, добавляет немного больше стиля резюме.

    Вот обновленный HTML с новыми заголовками и горизонтальной линией, выделенными жирным шрифтом:

     
    
    
       Наймите меня! 
    
    
      

    Наймите меня!

    Я Ли Пак.Наймите меня в свою компанию, потому что моя работа вне пределов шепот . Как доказательство моих потрясающих компьютерных навыков и монументальной работы этика, пожалуйста, оцените это электронное резюме.

    Незаменимые навыки

    Мои навыки включают:

    • Быстрый набор текста (почти 12 слов в минуту).
    • Невероятная заточка карандашей.
    • Изобретательное придумывание оправданий.
    • Ведение переговоров с мирными офицерами.

    А еще я знаю HTML!

    Предыдущий опыт работы

    У меня долгая и блестящая карьера в самых разных профессиях. Вот некоторые основные моменты:

    • 2008-2009 - работал машинисткой в ​​ Flying Fingers
    • 2010-2013 - Выполнение передовых веб-дизайнеров в Riverdale Ферма
    • 2014–2015 гг. - отмечен в главе 1 книги Создание веб-сайта: The Отсутствует руководство

    Не беспокойтесь, если в этом примере слишком много разметки, чтобы вы могли сразу ее усвоить.В следующей главе вы получите больше практики по превращению обычного текста в структурированный HTML.

    Проверка страниц на наличие ошибок

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

    На первый взгляд это кажется отличным дизайном - в конце концов, он сглаживает любые незначительные промахи, которые вы могли сделать.Но у терпимости к ошибкам есть и обратная сторона. В частности, такое поведение упрощает то, что серьезные ошибки остаются незамеченными на ваших веб-страницах. Что за серьезная ошибка? Проблема, которая безвредна, когда вы просматриваете страницу в своем любимом браузере, но выглядит неловко, когда кто-то просматривает страницу в другом браузере; ошибка, которая остается незамеченной до тех пор, пока вы не отредактируете код, что непреднамеренно обнаруживает проблему в следующий раз, когда ваш браузер отображает страницу; или ошибка, которая не влияет на отображение страницы, но не позволяет автоматическому инструменту (например, поисковой системе) прочитать страницу.

    К счастью, есть способ решить подобные проблемы. Вы можете использовать инструмент проверки , который читает вашу веб-страницу и проверяет ее разметку. Если вы используете профессиональный инструмент веб-дизайна, такой как Dreamweaver, вы можете использовать его встроенное средство проверки ошибок (подробности описаны в главе 5). Если вы создаете страницы вручную в текстовом редакторе, вы можете использовать бесплатный инструмент онлайн-проверки (см. Ниже).

    Вот некоторые потенциальные проблемы, которые может обнаружить валидатор:

    • Отсутствуют обязательные элементы (например, элемент ).</p> </li> <li> <p> Начальный тег контейнера без соответствующего конечного тега. </p> </li> <li> <p> Неправильно вложенные теги. </p> </li> <li> <p> Теги с отсутствующими атрибутами (например, элемент <code> <img> </code> без атрибута <code> src </code>). </p> </li> <li> <p> Элементы или контент в неправильном месте (например, текст, помещенный непосредственно в раздел <code> <head> </code>). </p> </li> </ul> <p> В Интернете можно найти множество инструментов для проверки.Следующие шаги показывают, как использовать популярный валидатор, предоставляемый организацией по стандартизации W3C (официальные владельцы языка HTML). Попробуйте это с помощью файла <em> resume.htm </em>, который вы создали во втором учебнике (Учебник: Создание полного HTML-документа). Или дайте валидатору повод для жалоб с помощью файла <em> popsicles.htm </em>, который вы создали в первом учебном пособии (Учебное пособие: Создание файла HTML). Поскольку это фрагмент HTML, а не полный документ HTML, валидатор быстро пожалуется на недостающие биты, такие как требуемые элементы <code> <html> </code>, <code> <head> </code> и <code> <body> </code>.</p> <p> После того, как вы решите, что вы хотите проверить, выполните следующие действия: </p> <ol type="1"> <li> <p> <strong> Убедитесь, что ваш документ имеет тип документа </strong> (Общие сведения о документах HTML). </p> <p> Тип документа сообщает валидатору, какие правила использовать при проверке вашего документа. В этой книге мы придерживаемся универсального документа HTML5 («Базовый скелет»). </p> </li> <li> <p> <strong> В веб-браузере перейдите по адресу </strong> http://validator.w3.org (рис. 1-17). </p> <p> Валидатор W3C предлагает три варианта выбора, представленных тремя вкладками: Проверить по URI (для страницы, которая уже находится в сети), Подтвердить по загрузке файла (для страницы, которая хранится на вашем компьютере) и Подтвердить с помощью прямого ввода (для разметки). вы вводите прямо в предоставленное поле).</p> Рисунок 1-17. На веб-сайте http://validator.w3.org есть три варианта проверки HTML. Вы можете ввести адрес страницы в Интернете, вы можете загрузить свой собственный файл (показанный здесь) или можете ввести разметку напрямую. </li> <li> <p> <strong> Щелкните нужную вкладку и введите содержимое HTML </strong>. </p> <p> <strong> Проверить по URI </strong> позволяет проверить существующую веб-страницу. Просто введите URL-адрес (это полный Интернет-адрес) страницы в поле Адрес (например, www.MySloppySite.com/FlawedPage.html). </p> <p> <strong> Подтвердить загрузкой файла </strong> позволяет загружать любой файл с вашего компьютера. Сначала нажмите кнопку «Обзор» (которая называется «Выбрать файл в Chrome»), чтобы увидеть стандартное диалоговое окно «Открыть». Перейдите к местоположению вашего HTML-файла, выберите его и нажмите «Открыть». Это самый простой способ убедиться, что вы все правильно поняли со страницей <em> resume.htm </em>, которую вы создали ранее. </p> <p> <strong> Проверка с помощью прямого ввода </strong> позволяет проверять любую разметку - вам просто нужно ввести ее в предоставленное большое поле.Самый простой способ использовать эту опцию - скопировать разметку из текстового редактора и вставить ее в поле. </p> <p> Прежде чем продолжить, вы можете щелкнуть Дополнительные параметры в любом из окон с вкладками, чтобы установить другие параметры, но вы, вероятно, этого не сделаете. Лучше всего позволить валидатору автоматически определять тип документа; Таким образом, валидатор будет использовать тип документа, указанный на вашей веб-странице. Точно так же оставьте для параметра «Кодировка символов» значение «обнаруживать автоматически», если вы не написали свою страницу не на английском языке, и у валидатора возникнут проблемы с определением правильного набора символов.</p> </li> <li> <p> <strong> Нажмите кнопку Проверить </strong>. </p> <p> После небольшой задержки валидатор сообщает, прошел ли ваш документ проверку валидации или, в случае неудачи, какие ошибки обнаружил валидатор (см. Рисунок 1-18). </p> <p> Валидатор также может предложить несколько безобидных предупреждений для совершенно допустимого HTML-документа, включая предупреждение о том, что кодировка символов была определена автоматически, и предупреждение о том, что служба проверки HTML5 считается экспериментальной, незаконченной функцией.</p> </li> </ol> <p> Рисунок 1-18. В этом файле валидатор обнаружил 10 ошибок, связанных с двумя ошибками. Во-первых, на странице отсутствует обязательный элемент <code> <title> </code>. Во-вторых, он закрывает элемент <code> <li> </code> перед закрытием элемента <code> <b> </code>, вложенного внутрь. (Чтобы решить эту проблему, вы замените <code> </li> </b> </code> на <code> </b> </li> </code>.) Между прочим, этот файл все еще достаточно близок, чтобы исправить его, чтобы браузеры могли отображать его правильно.</p> <h2><span class="ez-toc-section" id="_HTML-17"> Изучите HTML, сделав этот супер простой веб-сайт </span></h2><div class="advv"> <ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-1812626643144578" data-ad-slot="9935184599"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <p> Вы хотите знать, как создать веб-сайт, но не знаете, какой HTML-код использовать? Следуйте этому руководству, чтобы создать свой первый базовый веб-сайт на HTML с примерами исходного кода! </p> <p> Мы рассмотрим 3 вещи: </p> <ol> <li> что такое HTML </li> <li> базовый синтаксис HTML, </li> <li> и как сделать локальный сайт на своем компьютере. </li> </ol> <p> Замечу: этот пост предназначен для начинающих, которые никогда раньше не работали с HTML.</p> <p> Здесь не будет задействован какой-либо CSS или JavaScript, поэтому имейте в виду, что эта веб-страница, которую мы будем делать, не будет такой уж красивой. Он просто сфокусирован на демонстрации HTML и его основных функций. </p> <blockquote> <p> <strong> Пытаетесь изучить HTML и CSS? <br/> </strong> Я настоятельно рекомендую книгу Джона Дакетта «HTML и CSS», а также продолжение «JavaScript и jQuery» для начинающих. Книги красиво оформлены и легко для понимания объясняют основные темы. Посмотрите их на Amazon! </p> </blockquote> <h3><span class="ez-toc-section" id="_HTML-18"> Что такое HTML? </span></h3> <p> Итак, что такое HTML? HTML означает <strong> язык разметки гипертекста.</strong> </p> <p> Это способ отображения информации на веб-страницах в вашем браузере. </p> <p> Следует помнить, что HTML сам по себе не является языком программирования. Это язык разметки. В языках программирования, таких как PHP или Java, для управления содержимым используются такие вещи, как логика и условия. </p> <p> HTML этого не делает, но он по-прежнему чрезвычайно важен. В конце концов, он составляет каждый существующий веб-сайт! </p> <h3><span class="ez-toc-section" id="_HTML-19"> Загрузка HTML-файла в ваш браузер </span></h3> <p> Фактически вы можете создать HTML-файл на своем компьютере и загрузить его в свой браузер.Его не будет в Интернете, поэтому его может просматривать только ваш локальный компьютер. </p> <p> Для реальных веб-сайтов, к которым любой может получить доступ в Интернете, файлы HTML хранятся на компьютерах, называемых серверами. Но основной процесс очень похож. </p> <p> Для создания HTML-файла: </p> <ol> <li> Перейдите на рабочий стол или туда, куда вы хотите поместить файл. </li> <li> Затем щелкните правой кнопкой мыши и выберите «Новый» и «Текстовый документ». Убедитесь, что имя файла читается как «index.html» и не заканчивается на «.txt». <br/> (Если по какой-то причине вы не видите расширение файла, перейдите на вкладку «Просмотр» и убедитесь, что установлен флажок «Расширения имени файла».) </li> <li> Когда у вас все готово, откройте его в браузере. </li> <li> Если слева есть значок Chrome или другого браузера, это означает, что вы можете дважды щелкнуть, чтобы открыть его автоматически. Если этого не произошло, щелкните правой кнопкой мыши, выберите «Открыть с помощью» и выберите свой любимый браузер. </li> <li> В браузере все будет выглядеть пустым, и это нормально, потому что в файле еще ничего нет. </li> </ol> <h3><span class="ez-toc-section" id="i-63"> Редактирование файла </span></h3> <p> Теперь, когда у вас настроен файл, вы готовы приступить к кодированию! </p> <p> Чтобы отредактировать HTML-файл, откройте его в редакторе кода.Щелкните файл правой кнопкой мыши и выберите «Открыть с помощью» и редактор, либо у некоторых редакторов будет быстрая ссылка в меню. </p> <p> Я использую Visual Studio Code, но вы можете использовать и другие программы, например: </p> <p> Теперь, когда индексный файл открыт и в браузере, и в редакторе, мы приступим к написанию кода! </p> <h3><span class="ez-toc-section" id="HTML-4"> HTML-тегов </span></h3> <p> Давайте посмотрим на некоторые основные функции HTML. </p> <p> HTML состоит из тегов. </p> <p> <strong> Теги - это специальный текст, который вы используете для разметки или выделения частей вашей веб-страницы.Отсюда и язык «разметки» гипертекста. </strong> </p> <p> Эти теги сообщают браузеру, что нужно отображать содержимое тега определенным образом. </p> <p> Вот один пример действия тега: </p> <pre> <code> Это мой самый первый веб-сайт, и я <b> очень взволнован !!!!! </b> </code> </pre> <p> Вы можете видеть слова «чрезвычайно взволнован» в этих тегах <code> <b> </code> - «b» - жирный шрифт. </p> <p> Теперь давайте сохраним файл и перезагрузим браузер. Текст должен выглядеть так: </p> <p> </p> <p> Хорошо! Вы только что написали HTML.Уже чувствуете волнение? 🙂 </p> <h4><span class="ez-toc-section" id="_HTML-20"> Анатомия HTML-тега </span></h4> <p> Давайте еще раз взглянем на тег. </p> <p> Тег перед фразой называется открывающим тегом <strong> - </strong> <code> <b> </code> </p> <p> И тег после фразы - это закрывающий тег <strong> - </strong> <code> </b> </code>. Вы можете видеть, что закрывающий тег имеет косую черту перед буквой «b». </p> <p> Вместе эти два тега предписывают браузеру выделить текст между ними жирным шрифтом. Именно это и произошло.</p> <p> Теперь, возможно, это очевидно, но когда браузер загружает HTML, сами теги невидимы - они не отображаются на странице. </p> <p> Довольно круто, а? Одна из причин, по которой я так люблю создавать веб-сайты, заключается в том, что это почти похоже на волшебство - иметь возможность отображать объекты в вашем браузере. </p> <h3><span class="ez-toc-section" id="_HTML-21"> Базовая структура HTML-документа </span></h3> <p> Итак, эта строка текста, которую мы написали, работает, потому что мы сохранили файл как файл HTML, который может распознать ваш браузер. </p> <p> Но для настоящего HTML в Интернете нам нужно добавить в файл еще несколько тегов, чтобы все работало правильно.</p> <h4><span class="ez-toc-section" id="Doctype_HTML"> Doctype и HTML-теги </span></h4> <p> Самый первый тег, который вам понадобится, - это тег doctype. Это не совсем HTML-тег, но он сообщает браузеру, что это документ HTML5. </p> <p> Вот как это выглядит: <code> <! DOCTYPE html> </code> </p> <p> Этот тег не требует закрывающего тега, потому что он не окружает какой-либо текст, он просто объявляет, что это HTML. </p> <p> Другими типами документов, которые использовались в прошлом, являются HTML 4 или XHTML. Но сейчас HTML 5 - единственный используемый тип документа.</p> <p> После doctype у вас есть тег HTML. Он сообщает веб-браузеру, что все внутри него - HTML: </p>. <pre> <code> <! DOCTYPE html> <html> </html> </code> </pre> <p> Я знаю, это кажется немного избыточным, поскольку вы уже использовали тег HTML doctype. Но этот тег гарантирует, что все внутри него унаследует некоторые необходимые характеристики HTML. </p> <h4><span class="ez-toc-section" id="i-64"> Голова и части корпуса </span></h4> <p> Внутри основного тега HTML ваш контент обычно делится на две части: заголовок и тело.</p> <p> Вот как это будет выглядеть в коде: </p> <pre> <code> <! DOCTYPE html> <html> <head> </head> <body> </body> </html> </code> </pre> <p> Тег заголовка содержит информацию о веб-сайте, а также то, куда вы загружаете файлы CSS и JavaScript. Мы не будем рассказывать об этом сегодня, просто чтобы вы знали. </p> <p> Тег тела <strong> </strong> является основным содержимым веб-страницы. Все, что вы видите на странице, обычно находится в теге body.Итак, нам нужно переместить то предложение, которое мы сделали в начале, в тело. </p> <p> Вот как это должно выглядеть: </p> <pre> <code> <body> Это мой самый первый веб-сайт, и я <b> очень взволнован !!!!!! </b> </body> </code> </pre> <p> Когда вы перезагружаете страницу в браузере, все должно выглядеть точно так же, как и раньше. </p> <p> Теперь давайте перейдем к некоторым основным тегам, которые обычно используются в заголовке и в теле. </p> <p> Я не буду перебирать все возможные теги, потому что их больше сотни.И это займет целую вечность. </p> <p> Мы просто рассмотрим наиболее часто используемые, чтобы вы могли лучше понять, как устроена HTML-страница. </p> <h3><span class="ez-toc-section" id="i-65"> Теги базовой головки </span></h3> <h3><span class="ez-toc-section" id="i-66"> Мета-теги </span></h3> <p> Первый тег, который должен быть у вас в голове, - это этот метатег. Это устанавливает кодировку символов. </p> <pre> <code> <meta charset = "utf-8"> </code> </pre> <p> UTF-8 - это тип кодировки Unicode, используемый практически на всех веб-сайтах по всему миру. Нам нужна кодировка, потому что нам нужно переводить буквы, числа и символы, которые мы используем, в байты, используемые компьютерами.</p> <p> Вы можете думать об этом как о своего рода словаре, переводящем человеческие языки на компьютерный язык. </p> <p> Следующий метатег, который должен быть на всех веб-сайтах, - это тег области просмотра: </p> <pre> <code> <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no"> </code> </pre> <p> Это важно для отзывчивых веб-сайтов. Адаптивный означает, что веб-сайт может правильно отображаться на всех устройствах - компьютерах, планшетах и ​​мобильных телефонах. </p> <p> В содержимом этого тега говорится, что ширина веб-сайта должна быть такой же, как у любого устройства, которое его просматривает.</p> <p> Например, у мобильного телефона разрешение или размер экрана намного меньше, чем у портативного компьютера. Это позволит изменять размер веб-сайта в зависимости от того, что использует пользователь. </p> <p> Исходный масштаб устанавливает масштаб веб-сайта. В настоящее время в браузерах вы можете увеличивать и уменьшать масштаб, делая веб-сайт больше или меньше. Мы хотим, чтобы он был установлен на 1 по умолчанию, то есть не увеличивался или не уменьшался. </p> <h3><span class="ez-toc-section" id="i-67"> Заголовок </span></h3> <p> Помимо метатегов, одним из наиболее важных тегов является тег заголовка: </p> <pre> <code> <title> Мой первый сайт

      Как вы, наверное, догадались, это устанавливает заголовок веб-страницы.Если у веб-сайта разные страницы, каждая страница может иметь свой собственный заголовок.

      После того, как вы добавили все эти теги в свой код, тег заголовка должен выглядеть так:

        
         
         
          Мой первый веб-сайт 
        

      И вы увидите в своем браузере, что вкладка будет иметь то, что вы поместили в тег заголовка:

      Основные теги тела

      Давайте теперь посмотрим на забавные вещи - теги тела управляют контентом, который вы действительно видите.

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

      До появления CSS использование этих тегов помогало систематизировать и стилизовать ваш контент, чтобы его было легче понять читателю.

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

      Но я думаю, что все же полезно хотя бы знать, что это за основные теги.

      Теги заголовка

      Давайте сначала посмотрим на заголовок или теги заголовка, обозначенные буквой H. Каждый тег H также имеет номер после H. Они варьируются от

      до
      .

      Тег

      имеет наивысший приоритет. Обычно он используется для заголовка страницы.

      Мы собираемся добавить на нашу веб-страницу тег

      . Внутри тега мы поместим заголовок веб-страницы «Мой первый веб-сайт».

      Мы также добавим субтитры с помощью тега

      с содержанием: «Игровая площадка HTML».

      И просто для удовольствия, давайте добавим остальные теги H до

      .

      Итак, ваш тег на теле будет выглядеть примерно так:

        
         

      Мой первый веб-сайт

      Площадка для игры в HTML

      Площадка для игры в HTML

      Площадка для игры в HTML
      Площадка для игры в HTML
      Площадка для игры в HTML

      Если вы сохраните и перезагрузите веб-страницу, она будет выглядеть так:

      Вы можете видеть, как размер шрифта постепенно уменьшается с

      до
      .

      Большинство веб-сайтов не используют все теги H. Обычно они используют

      для заголовка,

      для субтитров и

      иногда для заголовков разделов. Довольно редко используются значения от
      до
      .

      пункт

      Следующий тег, который мы рассмотрим, - это абзац или тег

      . Как и в Word, вы можете использовать абзацы для разделения содержимого на блоки.Вы можете создать абзац, заключив в свой контент теги

      .

      Мы собираемся сделать абзац с текстом-заполнителем.

      Один из самых простых способов найти текст-заполнитель - это поискать в Google « lorem ipsum . ”Это тот сайт, который я использую довольно часто.

      Текст Lorem ipsum - это бессмысленные латинские слова, которые используются в публикации и дизайне для заполнения текста при работе над макетом.

      Итак, мы скопируем этот абзац сюда и поместим его в наш код внутри тега

      .Сделаем и второй абзац. Мы скопируем еще немного текста и поместим его во второй тег

      .

        

      Lorem ipsum dolor sit amet, conctetur adipiscing elit. Nullam facilisis arcu vel mollis finibus. Nunc facilisis vel nisl lacinia cursus. Cras Suscipit augue sed volutpat tincidunt. Aenean dictum tincidunt urna, quis eleifend quam mattis eu. Целочисленный sollicitudin, nisl faucibus aliquam ullamcorper, metus sapien scelerisque lorem, at ornare dui orci non orci.Целое число tempus conctetur metus, vitae blandit nibh aliquam nec. Pellentesque vestibulum arcu eget ante sollicitudin, id accumsan dui molestie. Suspendisse Vehicleula semper dui id congue. Suspendisse sed velit сидеть amet velit luctus varius. Ut condimentum tincidunt consquat. Sed eu ligula non magna scelerisque auctor.

      Maecenas feugiat iaculis imperdiet. Duis vitae pellentesque nunc, eget elementum metus. Nulla sollicitudin bibendum nibh, сидеть амет семпер мучитель.Nunc rhoncus non arcu in scelerisque. Donec magna mauris, congue ac dignissim rutrum, tincidunt quis leo. Maecenas dictum orci in magna iaculis, in elementum felis viverra. Энеан сидит, амет сапиен одио. Донецкое молесье est et nisl mattis dictum. Nullam at nibh aliquet, tincidunt lorem et, facilisis enim. Praesent id felis sit amet quam dignissim volutpat. Nam nec cursus mi, quis tincidunt justo.

      В браузере это будет выглядеть так:

      И вот оно.Браузер автоматически добавляет пробел между абзацами и другим содержимым:

      Разрыв строки

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

      Давайте возьмем еще текст lorem ipsum и поместим его в наш редактор.

      Теперь нужно отметить, что HTML не разбивает строки автоматически.

      Если вы нажмете клавишу ввода несколько раз в своем контенте, на странице ничего не изменится.То же самое касается нажатия пробела несколько раз.

      Браузер предоставит только одно место, и все. Чтобы создать разрыв строки, вам необходимо добавить тег
      .

      Вы даже можете добавить несколько разрывов строк, чтобы добавить больше места в вашем контенте.

        Fusce sit amet rutrum lacus. 




      Sed efficitur laoreet nisl, ac faucibus velit hendrerit sit amet. Phasellus ac orci eget nisi porta accumsan a eget ex.Нам лациния dolor at mi tristique rhoncus. Mecenas nisl est, roncus id cursus. non, tempor a neque.

      Пустые элементы не требуют закрывающего тега

      Вы заметите, что нет закрывающего тега - он не нуждается в закрывающем теге, потому что он не используется для окружения текста.

      Эти типы тегов, у которых нет закрывающего тега, называются пустыми элементами. Пустота означает пустой, потому что у них нет содержания.

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

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

      Теги стиля

      Следующий набор тегов, который мы рассмотрим, - это теги стиля. Эти теги добавляют стили к тексту.

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

      Как мы уже говорили, эти теги стиля используются не так часто, потому что теперь вы можете использовать CSS для стилизации всего.

      Давайте рассмотрим каждый из тегов стиля:

      • Тег выделяет текст полужирным шрифтом .
      • Тег делает текст курсивом .
      • Тег делает текст подчеркнутым.
      • Тег (выделенный) обычно интерпретируется в браузерах как курсив .
      • И тег обычно представляет собой полужирный текст .

      Вот демонстрационный код того, как каждый из них будет выглядеть:

         Sed efficitur laoreet nisl,  
      ac faucibus velit hendrerit sit amet.
      Phasellus ac orci eget nisi porta accumsan a eget ex.
      Nam lacinia dolor at mi tristique rhoncus.
      Maecenas nisl est, roncus id cursus non, tempor a neque.

      А вот как этот код будет выглядеть в браузере:

      Горизонтальная линейка

      Тег горизонтальной линейки создаст горизонтальную линию на вашей веб-странице, которая будет проходить полностью.

      Вы пишете так:


      Подобно тегу разрыва строки, горизонтальная линейка является пустым элементом и требует только одного тега без закрывающего тега.

        ...
       Maecenas nisl est, roncus id cursus non, tempor a neque. 
      
      Phasellus venenatis dapibus laoreet. Sed in lacus a augue rutrum ultricies. Donec eget lacinia elit. Suspendisse Commodo Justo at lorem molestie, vitae tempus enim laoreet. ...

      Содержимое до тега


      будет над линией, а содержимое под ним будет под строкой, например:

      Якорное звено

      Ссылки - один из основных способов передвижения по Интернету.

      Тег ссылки записывается как тег . Это означает «якорь», потому что ссылка соединяет два веб-сайта, как якорь лодки соединяет лодку с тем, к чему она привязана.

      Чтобы создать ссылку, сначала поместите тег вокруг текста ссылки, который должен быть интерактивным.

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

      Атрибуты

      Используемый атрибут - href . Это сокращение от гипертекстовой ссылки . А значение - это URL-адрес целевого веб-сайта.

      Например, если вы хотите создать ссылку на главную страницу Google, вы должны использовать URL-адрес https://www.google.com/.

      URL-адрес

      означает Universal Resource Locator , и он действует как адрес, который дает вам местоположение веб-страницы или файла, который вы хотите загрузить.

      Еще один часто используемый атрибут в теге - «цель». Это определяет, будет ли ссылка, по которой вы щелкнули, открываться на той же странице или открываться на новой странице или вкладке в вашем браузере.

      По умолчанию ссылка будет открываться на той же странице. Если вы хотите, чтобы ссылка открывалась на новой странице, установите для цели значение «_blank».

      Вот демонстрация якорной ссылки:

         Sed in lacus a augue rutrum   

      Изображения

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

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

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

      Давайте найдем изображение в Интернете для использования в этом примере. Одно действительно полезное место, куда я иду для тестовых изображений, - это https: // placeholder.com /.

      Мы возьмем URL-адрес изображения с Placeholder.com и поместим его в источник изображения, которое мы создаем:

          

      В качестве альтернативы вы можете загрузить само изображение и поместить его в ту же папку, что и ваш файл index.html, и сослаться на него следующим образом:

        
        

      Один из атрибутов, который использует тег , - это граница , которую можно установить на количество пикселей:

          

      Это будет выглядеть так:

      Списки

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

      Маркированные списки называются неупорядоченными списками , в отличие от упорядоченных списков, в которых используются числа.

      Для создания списка вы будете использовать тег списка -

        или
          в зависимости от того, составляете ли вы упорядоченный или неупорядоченный список.

          Составим неупорядоченный список разных фруктов.

          Сделаем наш тег

            для списка.

            Внутри тега списка вы помещаете элементы списка. Каждый элемент будет помещен в свой собственный тег элемента списка, записанный как

          • .

            Добавим яблоки, апельсины, ананасы, манго и драконьи фрукты:

              
            • яблоки
            • апельсины
            • ананасы
            • манго
            • драконий фрукт

            А вот как это выглядит.

            Теперь, если мы изменим наш список на упорядоченный, используя тег

              , вот как это будет выглядеть.

              Вложенные списки

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

              Итак, в теге apple

            1. я добавлю новый тег
                под текстом «яблоко».

                Затем мы добавим несколько разных сортов яблок - Golden Delicious, Gala, Granny Smith.

                  
                • яблоки
                  • золотой вкусный
                  • бабушка смит
                  • гала
                • апельсины
                • ананасы
                • манго
                • драконий фрукт

                Когда мы перезагружаем нашу страницу, вы можете видеть, что вложенный список типов яблок имеет даже больший отступ, чем основной список.

                Вложенность и отступ

                Это подводит меня к важному аспекту написания хорошего HTML. Если вы поместите тег HTML внутрь другого, это называется вложением.

                Дочерние и родительские элементы

                Элемент внутри другого называется дочерним элементом , а внешний элемент называется родительским элементом .

                Чтобы организовать родительские и дочерние элементы, мы делаем отступ для дочернего элемента. Это помогает отличить его от родительского.

                Вы можете видеть, что в списке фруктов я сделал отступ для основных пунктов списка (яблоки, апельсины и манго). А потом для типов яблок я сделал еще больший отступ.

                Отступы делают код читаемым для людей

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

                Если бы все элементы HTML вообще не имели отступов и находились на одном уровне, все выглядело бы более запутанно. Только представьте, что у вас есть не один элемент, а множество различных элементов и тегов, вложенных друг в друга.Чтобы разобрать, что говорит код, потребуется целая вечность.

                Такая практика отступов считается хорошей практикой не только для HTML, но и для CSS, JavaScript и в основном существующих языков программирования.

                Это не обязательно для компьютеров, но необходимо, чтобы люди читали код. На моей первой работе отступление было первым, чему меня научили во время обучения.

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

                Стол

                И, говоря об отступах и вложенных элементах, последний тег HTML, который мы собираемся рассмотреть, использует много этого. Это стол.

                Таблицы изначально использовались как эффективный способ организации данных в строки и столбцы. Для демонстрации давайте составим таблицу для гипотетического ежемесячного бюджета домохозяйства.

                Построение стола

                Для начала нам понадобится тег

                .Все остальное в таблице будет внутри этого тега.

                Внутри таблицы у нас будут строки таблицы, ячейки таблицы и заголовки таблиц для заголовков столбцов.

                Затем мы добавим в первую строку таблицы, используя тег

                .

                  <таблица>
                   

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

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

                  <таблица>
                   
                       Месяц 
                       Аренда 
                       Утилиты 
                       Продовольственные товары 
                       Питание вне дома 
                       Развлечения 
                   
                  

                Затем в следующую строку мы добавим данные за август.Поскольку это не заголовки, мы будем использовать тег для табличных данных.

                Хорошо. Допустим, наша ежемесячная арендная плата составляет 1500 долларов? Затем мы получили 150 долларов на коммунальные услуги, 350 долларов на продукты, 100 долларов на питание вне дома и 50 долларов на развлечения.

                  <таблица>
                   
                       Месяц 
                       Аренда 
                       Утилиты 
                       Продовольственные товары 
                       Питание вне дома 
                       Развлечения 
                   
                   
                       август 
                       1500 долларов 
                       150 
                       350 долларов 
                       100 
                       50 
                   
                  

                Посмотрим, как это выглядит.А вот и наша таблица:

                Стилизация стола

                Довольно простой вид, правда? Мы можем немного стилизовать таблицу с помощью некоторых встроенных атрибутов таблицы.

                Сначала мы можем добавить строки в таблицу, установив атрибут border в тег таблицы. Установим границу толщиной 1 пиксель. Если вы используете большее число, рамка вокруг стола станет шире. Однако границы между ячейками таблицы по умолчанию всегда имеют ширину 1 пиксель.

                Вы также можете использовать cellpadding , который контролирует количество дополнительного пространства внутри каждой ячейки, от текста до границы. Так что давайте попробуем клетку из 10. И это дает немного больше места для передышки, поэтому она не кажется такой тесной.

                Другой атрибут, который вы можете изменить, - это интервал ячеек . Это контролирует количество пространства между ячейками. Лично мне нравится отсутствие промежутка между ячейками, поэтому оставим его равным 0.

                  

                Вот как выглядит таблица с этими атрибутами стиля:

                Лучшие практики для столов

                При построении таблицы HTML необходимо убедиться в том, что в каждой строке таблицы должно быть одинаковое количество столбцов.

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

                  
                Месяц Аренда Утилиты Питание вне дома Развлечения
                август 1500 долларов 150 350 долларов 100 50

                Если вы посмотрите на таблицу в браузере, вы увидите, как заголовки теперь смещены на единицу, а в конце есть странное пустое пространство, потому что там нет ячейки таблицы.Так что давайте вернем это обратно.

                Ячейки таблицы могут охватывать несколько столбцов / строк

                Однако можно сделать так, чтобы ячейка таблицы занимала несколько столбцов. Допустим, мы хотели разбить Утилиты, чтобы иметь два типа данных: один для воды и один для электричества. Итак, мы скажем, что электричество стоит 100 долларов, а вода - 50 долларов.

                Для этого мы фактически создадим дополнительную ячейку в данных и настроим количество утилит. У нас сначала электричество за 100 долларов, а затем вода за 50 долларов.

                  
                Месяц Аренда Утилиты Продовольственные товары Питание вне дома Развлечения
                август 1500 долларов 100 50 долларов 350 долларов 100 50

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

                Атрибут Colspan

                Мы хотим, чтобы ячейка заголовка Utilities была выше ячейки 100 и 50 долларов.

                Для этого мы добавим атрибут с именем colspan , то есть диапазон столбцов, в ячейку заголовка Utilities. И установите его на 2.

                   Утилиты   

                В результате ячейка «Утилиты» будет занимать 2 столбца вместо одного.

                И вот мы! Выглядит очень организованно, не правда ли?

                Атрибут Rowspan

                В дополнение к colspan вы также можете использовать атрибут rowspan, чтобы ячейка занимала несколько строк.

                Допустим, у нас есть данные за июнь, июль и август, и мы хотели обозначить их как «Осень».

                Я просто собираюсь снова скопировать и вставить и использовать данные за август для создания данных за июнь и июль.

                Чтобы создать ячейку для осени, я хочу, чтобы она располагалась слева от месяцев, начиная с июня. Итак, в июньском ряду я создам новую ячейку до июня и добавлю в нее «Осень». Затем я установлю диапазон строк этой ячейки равным 3, чтобы он охватывал июнь, июль и август.

                И нам нужно добавить разделительную ячейку в первую строку, чтобы в общей сложности 4 строки были охвачены этим первым столбцом.

                  
                Месяц Аренда Утилиты Продовольственные товары Питание вне дома Развлечения
                Осень июнь 1500 долларов 100 долларов 50 350 долларов 100 50
                июль 1500 долларов 100 50 350 долларов 100 50
                август 1500 долларов 100 50 350 долларов 100 50

                Вот как выглядит финальный стол!

                Таблицы использовались для макетов сайта

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

                Так, например, если у вас есть дизайн веб-сайта с заголовком, основным содержимым и нижним колонтитулом, вы можете создать одну большую таблицу с тремя строками. Затем вы можете поместить все свое содержимое в эти ячейки таблицы. Ячейки таблицы могут содержать любой HTML-код: изображения, ссылки, текст и т. Д.

                Когда-то это было очень удобно. В настоящее время столы используются нечасто. Единственное распространенное исключение, которое я могу придумать, - это электронные письма в формате HTML, потому что некоторые старые почтовые системы не могут использовать много CSS, поэтому кодирование, подобное тому, что было в 1999 году, к сожалению, является единственным вариантом.

                Закрытие

                Вот и все - вы создали базовый веб-сайт на HTML.

                Если вы заинтересованы в изучении HTML и веб-разработки, я бы порекомендовал для начала использовать некоторые из следующих ресурсов:

                • freeCodeCamp - бесплатный онлайн-курс для начинающих по программированию, организованный некоммерческой организацией. Многие выпускники устроились на постоянную работу в области веб-разработки.
                • Учебный курс для веб-разработчиков, созданный Кольтом Стилом - полный учебный онлайн-курс для веб-разработчиков на Udemy, проводимый бывшим инструктором учебного курса по программированию.

                Если вам понравился этот пост, пожалуйста, оставьте комментарий ниже или поделитесь им с друзьями!

                Добавление Google Analytics и HTML-кода в Express Editor

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

                Что дает мне право на бесплатный перевод?

                HostGator предоставляет бесплатные переводы для новых учетных записей в течение 30 дней после регистрации , а также для новых обновленных учетных записей.Для обновленных учетных записей это должно быть межсерверное обновление, чтобы соответствовать требованиям. Обратите внимание, что аккаунты с пониженной версией не имеют права на бесплатные переводы.

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

                Полные переводы cPanel - это количество включенных передач cPanel в cPanel.

                Макс. Ручные переводы - это максимальное количество ручных переводов, включенных в вашу учетную запись.

                Всего бесплатных переводов - это общее количество веб-сайтов, которые мы переместим для вас.

                Тип счета Всего бесплатных переводов Переводы через полную cPanel Макс. Ручные переводы
                ? Общий 1 1 2 1
                ? Реселлер 30 30 2 30 1 Безлимитный 2 10 на уровень VPS
                ? Выделенный (базовый) Безлимитный 1 Безлимитный 2 75 ? ) Безлимитный 1 Безлимитный 2 100

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

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

                Несколько примеров: Учетная запись торгового посредника Aluminium включает до 30 бесплатных переводов. Из этих 30 у вас может быть 20 переводов cPanel на cPanel и 10 переводов вручную, или любая комбинация этих двух, что в сумме составляет 30 или меньше веб-сайтов.Другой пример: выделенный сервер Pro включает неограниченное количество передач cPanel на cPanel, это означает, что вы можете перенести 150 сайтов (или даже больше). Кроме того, поскольку общее количество переводов не ограничено, вы можете использовать до 100 переводов вручную.

                Для получения дополнительной информации см. Статью «Поддержка переводов», свяжитесь с нашим отделом переводов по адресу [email protected]

  • Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *