Создать страницу в интернете: Сделай сайт. 4 способа создать свою страницу в интернете

Содержание

Создаем 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

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

Как разработать веб страницу для мобильного & новости по созданию сайтов от ABCname

Как разработать веб-страницу для мобильных устройств

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

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

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

Протестируйте как можно больше устройств.

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

Сделайте ваши страницы изящными.

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

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

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

Макет веб-страницы для смартфонов

Первое, что вы должны помнить при написании страниц для рынка смартфонов, это то, что вам не нужно вносить какие-либо изменения, если вы этого не хотите. Самое замечательное в большинстве доступных смартфонов заключается в том, что они используют браузеры Webkit (Safari на iOS и Chrome на Android) для отображения веб-страниц, поэтому, если ваша страница выглядит хорошо в Safari или Chrome, она будет отлично смотреться на большинстве смартфонов (более или менее). Но есть вещи, которые вы можете сделать, чтобы сделать просмотр более приятным:

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

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

Советы по изображениям на смартфонах

Изображения должны быть маленькими. Да, Android и iPhone могут увеличивать и уменьшать изображения, но чем они меньше по размеру и времени загрузки, тем счастливее будут ваши клиенты. Оптимизация изображений — это всегда хорошая идея, но для страниц на мобильных телефонах это очень важно.

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

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

Компания ABCname

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

Помогла ли вам статья?

346 раз уже помогла

Комментарии: (0) Написать комментарий

Что нужно, чтобы создать веб-страницу

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

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

Если вы используете операционную систему MS Windows, то подойдет стандартный «Блокнот» (Notepad). Если же на вашем компьютере установлена другая операционная система, то сгодится аналогичный редактор текстов, например, Pico (Linux) или TextEdit (Mac).

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


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

Теперь создайте на любом диске своего компьютера (например, на диске C) папку с названием «html» и сохраните свой файл как «myfirstpage.html». Очень важно, чтобы у файла было расширение «.html»; некоторые текстовые редакторы, такие как «Блокнот», по умолчанию сохраняют файл с расширением «.txt».

Чтобы просматривать HTML файлы, они не обязательно должны быть размещены в сети Интернет. Откройте программу браузер, например, Firefox или Internet Explorer, и в адресной строке, где вы обычно вводите адрес сайтов, введите адрес только что созданного вами файла (например, «c:\html\myfirstpage.html») и нажмите ввод. Альтернативно вы можете войти в меню браузера «Файл», выбрать пункт «Открыть» и найти нужный файл.

И вот она! Ваша первая веб-страница!

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

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

Структура HTML документа Вверх Учебник HTML для начинающих

Способы создания web-страниц

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

Первый способ — с помощью онлайн редактора. Онлайн редакторы — это сайты, которые создаются в интернете на хостинге (Хостинг — место, где размещается сайт в сети интернет). Также в сети Интернет можно без труда найти бесплатные шаблоны, с помощью которых можно сделать себе сайт.

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

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

Недостатки визуальных редакторов:

1) Все созданные страницы можно легко отличить по обычному и примитивному исполнению.

2) Очень большой вес страниц

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

Microsoft FrontPage — это программа, с которой могут быть знакомы многие, благодаря курсам Федерации Интернет образования. Раньше эта программа была в расширенном пакете Microsoft Office, но с недавнего времени выпускается как отдельная программа.
Microsoft Publisher — еще один проект Microsoft. Эта программа использовалась в Microsoft Office 2003, в ней можно разрабатывать не только страницы, но документы большого размера.

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

добавление новых страниц в «Нубексе»

Чтобы создать новую страницу на сайте, войдите в админку и выберите в меню управления (слева) раздел «Страницы».

Следующий шаг зависит от того, в какой части сайта Вы хотите разместить новую страницу. Допустим, меню Вашего сайта содержит пять разделов: «Новости», «Галерея», «Коллектив», «Контакты» и «Отзывы». Это разделы первого уровня. Но некоторые из них могут содержать в себе другие разделы, более мелкие: например, внутрь общего раздела «Контакты» можно поместить страницы «Директор», «Зам. директора», «Секретарь». Это — вложенные страницы, или подразделы. Для подразделов также можно создавать вложенные страницы еще более низкого порядка.

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

Создание страницы первого уровня

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

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

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

Нас часто спрашивают, что писать в поле «Имя для построения URL». Туда пишется адрес страницы для адресной строки браузера.

Заполнять поле «Имя для построения URL» можно только латинскими буквами, цифрами и символами. Желательно, чтобы имя, внесенное в это поле, отражало тематику страницы: например, для страницы-каталога подойдет «catalog», для новостной ленты — «news». Вы также можете оставить имя, присвоенное по умолчанию: в таком случае это будет цифровой код.

Обратите внимание: Вы можете не только изменять основные параметры страницы (заголовок, текст, блоки и т.д.), но и работать со вкладками «Навигация» и «SEO».

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

О том, как заполнять SEO параметры страницы, существует отдельная статья.

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

Создание вложенной страницы

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

И уже внутри нужного раздела создайте новую страницу по алгоритму, приведенному выше.

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

Видео: как добавить страницу на сайт

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

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

Создание шаблона страницы. Как спроектировать современный сайт

Создание шаблона страницы

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

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

Для создания шаблона страницы выделим основные области

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

Более того, такое расположение позволяет решить проблему, часто возникающую при разработке сайтов, – крайняя правая колонка нередко не воспринимается. Многие пользователи уделяют мало внимания данной части страницы и имеют на то причины: владельцы сайтов обычно используют ее как место для размещения рекламы и информации о различных акциях. Логотип Designery.us, находящийся в верхней части данной области, поможет устранить этот эффект, потому что его заметное положение может визуально активизировать пространство.

Поместим логотип в нестандартное место – верхний правый угол

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

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

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

Добавление пользовательского входа под логотипом

Элементы аккаунта выровнены по сетке

Размещение элементов навигации вверху страницы

Данная область сетки состоит из 10 блоков, которые можно объединить в 5 колонок по 2 юнита в каждом. Ширина каждой колонки 110 пикселов, этого достаточно для размещения кнопок навигации. В нашей модели используются только 3 элемента навигации: Home, Articles и Browse (Profile теперь находится в правом дальнем углу). Учитывая важность ссылки на страницу About Designery, которая изначально находилась в нижнем колонтитуле, ее можно переместить на уровень элементов навигации. Теперь мы имеем 4 элемента. Одна из колонок до сих пор не используется и ее можно назначить для ссылки Ноте, самой важной из навигационных ссылок (теперь она занимает 4 юнита, 230 пикселов). Такой выбор сделает ссылку Ноте особенно заметной даже без дополнительных выделений.

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

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

Текст на элементах навигации не выровнен по базовой сетке

Ролловер-состояние элементов навигации

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

По сути, ни один текстовый блок не попадает на левый край соответствующей колонки. Весь текст расположен на небольшом расстоянии – 5 пикселов – от края.

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

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

Текст, попадающий на край колонки, смотрится нормально

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

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

Проблемы возникают при создании различных эффектов

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

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

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

Сдвинем элементы на несколько пикселов от края колонки

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

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

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

Добавление нижнего колонтитула

Готовый шаблон страницы

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

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

Данный текст является ознакомительным фрагментом.

Продолжение на ЛитРес

Лучшие страницы «О нас» для бизнеса: как создать страницу «О компании»?

Разработка сайта для бизнеса можно назвать проявлением силы воли.

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

Как сбалансировать создание замечательного контента с потребностями веб-дизайна?

Топ-12 лучших страниц «О нас» для бизнеса

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

Думаете, просто? Конечно же, нет. Эта страница является одной из самых важных на коммерческом сайте, и она требует тщательного продумывания. Статистика показывает: пользователи часто обращаются к странице «О нас», формируя мнение о компании.

Хорошие новости: мы собрали 12 действительно креативных и по-своему красивых примеров, которые вы можете перенести на собственный сайт. Давайте знакомиться.

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

№1: Yellow Leaf

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

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

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

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

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

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

№2: Eight Hour Day

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

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

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

Представление основателей по имени и размещение их фото на странице «О нас» позволяет понять, что Натан и Кэти — как они это проницательно говорят — два человека со страстью к творчеству, которых креативность делает счастливыми.

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

№3: Сайт Джо Пэйтона

Почему мы выбрали Джо Пэйтона? Страница уверенная, креативная и доступная.

Страницы «О нас» могут охватывать мнение и описание одного-единственного человека, когда вы продвигаете себя любимого — фотографа, копирайтера, юриста, врача, блогера.

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

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

№4: Apptopia

Эта страница свободна от профессионального жаргона и лишних слов.

Еще раз: малопонятные термины на странице «О компании» излишни. Пользователи ценят прямые, простые и ясные рассказы о том, чем занимается бизнес. Если людям непонятны отдельные пункты из того, что вы делаете, как они сформируют и осознают потребность в ваших услугах?

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

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

№5: Сайт MOZ

Неоднократный лидер всевозможных рейтингов лучших сайтов и страниц.

Компания, которая отличилась скромной и очень эффективной страницей «О нас». Ее концепция идеальна для бизнеса, у которого есть солидная история и тысячи клиентов.

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

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

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

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

№6: Aja Frost

Причина успеха этого сайта фрилансера — основательность и факты.

Креативность, которую исполнительница проявляет в бизнесе, прослеживается на странице «Обо мне» на всем веб-сайте. Представляя сферу SEO, где успех измеряется объективными цифрами и графиками, Аджа выложила все это на странице.

Клиенты хотят видеть, как работает SEO контент, и сайт это ярко демонстрирует.

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

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

№7: Kero Uno

Прекрасная многоязычная страница, где нет ничего лишнего.

Kero Uno — популярный хип-хоп исполнитель, ди-джей из Сан-Франциско, а его страница «Обо мне» дает ценный урок личным брендам, которые обслуживают несколько аудиторий. Особенно, если эти аудитории говорят на разных языках.

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

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

Сайт уникален тем, что без сложных переходов на языковые версии сначала рассказывает свою историю на английском, затем на японском, корейском и китайском. Удовлетворение специфической ЦА из Юго-Восточной Азии закрепляет успех бренда и делает его привлекательным для ВСЕХ людей, с которыми он идентифицирует себя.

№8: Сайт компании Nike

Мировой гигант спортивной одежды и обуви хорошо знает своих покупателей.

Nike кажется слишком большой компанией, чтобы вдохновлять малый бизнес. Странно, что этому бренду вообще требуется страница «О нас»! На самом деле они не забывают корней и используют любые возможности для общения со своей ЦА.

История успеха писалась в университетском городке Университета Орегона рукой тренера колледжа Билла Бауэрмана. И хотя он больше не работает в компании, одна из его любимых цитат по-прежнему висит на сайте Nike: «Если у вас есть тело, вы — спортсмен».

Столь смелое предложение проливает свет на аудиторию Nike. Бренд сегодня может казаться огромным, но Nike — о восходящих звездах, в контексте которых фирма, согласно остальной части своей страницы, «расширяет человеческий потенциал».

Вывод для маркетологов? Знайте свою аудиторию и сделайте это очевидным для пользователей, как только они начнут читать страницу «О компании».

№9: Refinery29

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

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

Маркетологи Refinery29 разбили страницу, чтобы передать нематериальные качества на уровне эмоций. Хотя они начинают страницу «О компании» обычным описанием своего бизнеса, получилось на ура. Четыре ура, если точно.

Помимо «миссии», креативная страница раскрывает «сущность» Refinery29, «обещание», которое компания выполняет, и «вибрацию», которую она испускает. Это те четыре искры бизнеса, от которых загораются интуитивные решения при покупке.

№10: Сайт Сары Дитчи

Страница «Обо мне», которая отличается разнообразием, пониманием ЦА и удачно встраивается в концепцию личного бренда владельца.

Для тех, кто не в курсе: Сара Дитчи (Sarah Dietschi) — это американский видеоблогер на YouTube с эклектичной коллекцией видео, связанных с технологиями и культурой. Яркое разнообразие Сара полностью отражает на своем сайте.

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

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

Цветные плитки, выравнивающие страницу (начиная с красной, как показано ниже), выполняют потрясающую работу, как бы сегментируя страницу по типам проектов.

Крупный логотип Intel на второй фотографии Сары наверняка повернет головы посетителей — отсылки на авторитетные бренды интригуют!

№11 Сайт Марка Энсина

Страница «Обо мне» от Марка Энсина звучит смешно, но профессионально.

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

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

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

№12: Doomtree

Эта страница показывает, рассказывает и имеет саундтрек.

По словам Джеймса Маккуиви из Forrester Research, минута видео стоит 1,8 миллиона слов.

Но как насчет аудио и видео в сочетании с действительно классной историей?

Это один из способов рассказать свою историю увлекательно — через мультимедиа.

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

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

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

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

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

Как создать эффективную страницу «О компании»?

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

Вот восемь практических шагов к созданию страницы «О компании»:

Шаг первый: четко сформулируйте миссию

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

Шаг второй: Опишите историю компании

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

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

Шаг третий: Покажите, как вы развивались

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

При создании страницы «О нас» появляется прекрасная возможность сделать это. Открыто рассказывайте, с чего вы начали, как вы росли, какие идеалы помогли вам взрослеть. Людям полезно знать, что вы готовы измениться и адаптироваться к потребностям отрасли.

Шаг четвертый: расскажите о своем aha-моменте

Каждая хорошая компания была основана на определенной идее — уникальной «фишке», которую конкуренты еще не могут предложить. Какой была ваша идея? Создайте свой aha-момент, поворотную точку в развитии бизнеса.

С какой проблемой вы столкнулись в процессе развития компании? Как этот вызов либо открытие повлияли на нынешний успех, на то, кем вы являетесь сегодня? Такие моменты пережила Microsoft, Alibaba, Amazon. Смело говорите о секретах успеха.

Шаг пятый: Объясните, кому вы служите

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

Кому вы предлагаете свои преимущества? Пишите для основного клиента.

Шаг шестой: Раскройте свое предложение

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

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

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

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

Шаг седьмой: Используйте социальное доказательство

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

Согласно данным Dimensional Research, информация о прошлых успехах компании может повлиять на решение о покупке до 90% сегодняшних клиентов B2B.

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

Шаг восьмой: Опишите свои ценности

Клиенты хотят, чтобы с ними обращались как с людьми.

Поэтому они должны чувствовать нешаблонное, человеческое общение.

Завершая страницу «О нас», уделите время описанию своей личности или профессиональной команды, перечислите ваши личные ценности. Какова культура вашей компании? Что движет вашим бизнесом? Каковы ваши гарантии? Как вы относитесь к экологии?

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

Помните, что среди читателей страницы «О нас» есть будущие сотрудники. Это еще одна причина, по которой описание ваших личных ценностей является хорошей идеей: ключ к сердцам кандидатов на работу — показать, что у вас тоже есть сердце.

На пути к разработке успешного сайта для бизнеса

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

На нашей стороне многолетний опыт веб-разработки, креативные дизайнеры и копирайтеры, профессиональная CMS «1С-Битрикс: Разработка сайта» с впечатляющим функционалом для бизнеса и стремление помогать клиентам, создавая совершенный продукт.

С хорошей историей, грамотным текстом, скромностью и естественными визуальными эффектами вы получите привлекательный пользовательский опыт.

Даже лучше: мы поможем вашему бизнесу выделиться из моря однотипных страниц.

Расскажите больше о себе, и начните путь к успеху вместе с нами!

Создание и просмотр веб-страницы на вашем компьютере

Требования:

Текстовый редактор
Интернет-браузер
Завершил Часть 1 курса «Изучение HTML и CSS» от Codecademy

Введение

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

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

Шаг 1. Откройте текстовый редактор

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

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

Шаг 2. Напишите свой HTML-скелет

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

    

  
     Моя первая веб-страница! 
  
  
     
 Привет, мир!

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

Шаг 3. Сохраните файл

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

Используйте расширение HTML .html , т. Е. about_me.html
Не используйте в имени файла пробелы или специальные символы.Вместо этого используйте подчеркивание (_) или дефис (-).
Решите, где на вашем компьютере вы сохраните файл, и обязательно запомните это место!

Используйте расширение файла

.html HTML

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

Не используйте пробелы и специальные символы в имени файла

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

Решите, где на вашем компьютере вы сохраните файл

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

Шаг 4. Откройте свою веб-страницу в браузере

Теперь вы готовы просматривать новую страницу в браузере! Сначала откройте свой браузер. В верхнем меню нажмите Файл> Открыть файл . Перейдите в место, где вы сохранили свою веб-страницу. Щелкните файл своей веб-страницы, а затем щелкните Открыть .Вы должны увидеть свою веб-страницу!

Обзор

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

Создайте свою собственную веб-страницу

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

Сначала вам нужно создать текстовый документ, содержащий слова, которые вы хотите разместить на своей веб-странице. Большинство текстовых редакторов будут работать нормально, если вы дадите своему документу имя, оканчивающееся на .html или .htm и сохраните документ как «Только текст». (Совет: лучше всего использовать все строчные буквы в имени файла и избегать использования каких-либо специальных символов или знаков препинания, кроме дефисов.) Еще лучше использовать приложение текстового редактора, такое как TextEdit, Notepad или Brackets. Напечатайте свою историю, рецензию на книгу, увлекательные факты о Юпитере или что-то еще, что вы хотите опубликовать.

Вот несколько советов по организации текста:

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

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

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

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

Теги форматирования сообщают интернет-браузеру (например, Firefox, Chrome, Safari или Internet Explorer), как расположить ваши слова и изображения на экране. Эти теги составляют язык, называемый языком разметки гипертекста или HTML. Базовый скелет HTML-документа выглядит так:

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

Обратите внимание, что (1) каждый тег форматирования появляется между знаками «меньше» (<) и «больше» (>), а (2) теги часто появляются парами, причем второй тег в паре начиная с «косой черты» (/). Теги, которые появляются парами, должны быть «вложенными» или правильно упорядоченными в других парах. Например:

Неправильный порядок: </head>

Правильный заказ:

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

На этой диаграмме показаны некоторые основные теги форматирования в HTML.

HTML-теги	Что они создают
`...`	заголовок, уровень 1 (шрифт самого большого размера для заголовка, обычно используется в начале страницы или в начале нового раздела) Меньшие заголовки помечены тегом ... , `...` и т. д. до уровня h6.
`...`	курсив (выделенный) текст
`...`	полужирный (сильно выделенный) текст
`...`	текст выделен в абзаце, с пробелом до и после Примечание: Любой возврат к абзацу, который вы вставляете в документ простым нажатием клавиши Return на клавиатуре, будет проигнорирован веб-браузером.Вы должны заключить каждый абзац между тегами ... для создания разрывов абзаца на экране.
`...`	текст абзаца по центру
	разрыв строки (без лишнего пробела)
	горизонтальная линейка (линия, идущая слева направо по странице, чтобы отделить один раздел от следующего)
`...`	упорядоченный или пронумерованный список Каждый элемент списка начинается с тега и находится где-то между тегами `...`.
`...`	неупорядоченный или маркированный список Опять же, каждый элемент списка начинается с тега .
`...`	гиперссылка на другой файл в той же папке
`...`	гиперссылка на другой сайт Вам необходимо знать унифицированный указатель ресурсов (URL) или веб-адрес любого сайта, на который вы хотите связать свою страницу. Атрибут `target = "_ blank"` сообщает браузеру открыть связанную страницу в новой вкладке.
	Этот тег вставит изображение с именем файла «image.gif» в крайнюю левую часть вашей страницы.

Это только основы. Более подробные глоссарии тегов HTML можно найти на следующих сайтах:

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

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

Пример веб-страницы

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Mozilla Learning HTML: Guides and Tutorials
Полный набор руководств по HTML, CSS, JavaScript и др.

Mozilla HTML Basics
Введение в HTML со ссылками на другие образовательные статьи

W3Schools Online Web Tutorials
Другой полный набор руководств по HTML и CSS, JavaScript и т. д.

Adobe’s Brackets
Бесплатное программное обеспечение для текстового редактора, разработанное специально для веб-дизайна

Visual Studio Code
Еще один бесплатный текстовый редактор, который поможет вам написать точный код

Mozilla’s Инструмент выбора цвета
Позволяет вам выбирать очень конкретные цвета и получать коды CSS для включения их в вашу веб-страницу

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

Список объектов HTML FreeFormatter
Предоставляет коды для символов, включая фигурные кавычки. , буквы с диакритическими знаками, математические символы и т. д.

Бесплатные картинки для детей
Предоставляет большой выбор общедоступных изображений в мультяшном стиле.

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

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

Нужно найти дом для вашей домашней страницы? Попробуйте следующие сайты.

Lunarpages
Предоставляет бесплатный веб-хостинг для государственных школ

Сайты Google
Инструмент для создания и размещения веб-страниц; требуется бесплатная учетная запись Google / Gmail

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.Вот как это сделать:

Выберите TextEdit → Настройки .
Откроется окно с вкладками для параметров TextEdit (рис. 1-2).
Рисунок 1-2. В окне настроек TextEdit есть две вкладки с настройками: «Новый документ» (слева) и «Открыть и сохранить» (справа).
Нажмите «Новый документ», а затем в разделе «Формат» выберите «Обычный текст».
Это указывает TextEdit начать вас с обычного неформатированного текста и отказаться от панели инструментов форматирования и линейки, которые в противном случае появлялись бы на экране, которые не имеют отношения к созданию файлов HTML.
Нажмите «Открыть и сохранить» и включите первый параметр «Отображать файлы HTML как HTML-код вместо форматированного текста».
Это указывает TextEdit, чтобы вы могли видеть (и редактировать) реальную разметку HTML, теги и все остальное, а не отформатированную версию страницы, как она будет отображаться в веб-браузере.
Закройте окно настроек, а затем закройте 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, первое руководство», если вам интересно).

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

Запустите текстовый редактор .
На компьютере с Windows это Блокнот. Чтобы открыть Блокнот, нажмите кнопку «Пуск», введите «блокнот» и щелкните появившийся значок Блокнота.
На Mac это TextEdit. Чтобы запустить его, перейдите в папку «Приложения» и дважды щелкните TextEdit.
Когда вы загружаете текстовый редактор, он запускает вас с новым пустым документом, а это именно то, что вам нужно.
Начните писать свой HTML-код .
Эта задача немного сложна, потому что вы еще не знакомы со стандартом HTML. Погодите — до конца этой главы помощь будет готова. На данный момент вы можете использовать следующий очень простой фрагмент HTML.Просто введите его в том виде, в каком он выглядит: текст, косые черты, заостренные скобки и все остальное:
```
  United Popsicle Workers Union  
 Мы боремся за ваши права. 
 
```
Технически в этом двухстрочном документе отсутствуют некоторые структурные детали, которые должны иметь уважаемые веб-страницы. Однако любой браузер может прочитать этот фрагмент HTML и правильно интерпретировать то, что вы хотите: две строки форматированного текста, показанные на рис. 1-1 вверху.
Когда вы закончите свою веб-страницу, выберите Файл → Сохранить .
Это вызывает окно «Сохранить» или «Сохранить как», в котором вы вводите данные для вашего нового файла (рис. 1-5).
Рисунок 1-5. Независимо от того, используете ли вы Блокнот (показан здесь) или TextEdit, в сохранении файла нет ничего сложного. Просто не забудьте включить «.htm» или «.html» в конце имени файла, чтобы идентифицировать его как документ HTML.
Выберите место для сохранения файла и дайте ему имя popsicles.htm .
Если вы не знаете, где хранить файл, пока можете сохранить его прямо на рабочем столе.
Когда вы называете файл, убедитесь, что вы добавили расширение .htm или .html в конец имени файла. Например, используя имя popsicles.htm или popsicles.html , вы гарантируете, что ваш компьютер распознает ваш документ как файл HTML.
Примечание для параноиков: нет разницы между файлами .htm и .html. Оба они на 100% одинаковы — текстовые файлы, содержащие HTML-контент.
Примечание
С технической точки зрения вы можете использовать любое расширение файла, какое захотите.Однако использование .htm или .html избавляет от путаницы (вы сразу понимаете, что файл является веб-страницей) и помогает избежать распространенных проблем. Например, использование расширения файла .htm или .html гарантирует, что, когда вы дважды щелкните имя файла, ваш компьютер будет знать, что открыть его в веб-браузере, а не в какой-либо другой программе. Также важно использовать расширение .htm или .html, если вы планируете загружать файлы на веб-сервер; колючие серверы могут отказываться выдавать страницы с нестандартными расширениями файлов.
При необходимости измените способ кодирования файла в текстовом редакторе на UTF-8 .
Это стандарт TextEdit, поэтому пользователи Mac могут пропустить этот шаг. Но в Блокноте вам нужно выбрать UTF-8 в списке «Кодировка» в нижней части окна «Сохранить как».
Ваша веб-страница будет работать, даже если вы не сделаете этого шага, но это гарантирует, что у вас не возникнет проблем, если вы используете специальные символы или другой язык на своей странице.
Нажмите «Сохранить», чтобы сделать его официальным .
Если вы используете TextEdit, программа может спросить, действительно ли вы хотите использовать .htm или .html вместо .txt , стандартного текстового файла; нажмите «Использовать .htm». В Блокноте такой шаг не требуется. Однако на самом деле вы не увидите свои HTML-файлы в списке, если не выберете «Все файлы (*. *)» В поле «Сохранить как тип» (в котором изначально выбрано «Текстовые документы (* .txt)»).
Чтобы просмотреть свою работу, откройте файл в браузере (рис. 1-6) .
Если вы используете расширение .htm или .html, открыть страницу обычно так же просто, как дважды щелкнуть имя файла.Или вы можете перетащить файл веб-страницы в открытое окно браузера.
Рисунок 1-6. Адресная строка браузера показывает, где на самом деле находится текущая веб-страница. Если вы видите в адресе «http: //», это значит, что он исходит от веб-сервера в Интернете (вверху). Если вы посмотрите на веб-страницу, которая находится на вашем собственном компьютере, вы увидите обычный адрес локального файла (посередине, показывающий расположение файла Windows в Internet Explorer), или вы увидите URL-адрес, который начинается с префикса «file: // / ”(Внизу, где показано расположение файла в Chrome).
По окончании редактирования закройте текстовый редактор .
В следующий раз, когда вы захотите изменить документ, просто запустите текстовый редактор, выберите «Файл» → «Открыть», а затем выберите нужный файл или перетащите его в уже открытое окно текстового редактора.

Подсказка

Вот уловка, которая поможет вам открыть 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 предоставляет гораздо больше способов вложения элементов. Например, вы можете вложить один элемент в другой, а затем вложить другой элемент в , а затем в и так далее до бесконечности.

`Примечание`

Если вы занимаетесь графическим дизайном, вам, вероятно, не терпится заполучить более мощные 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, например, переключается в ужасный режим quirks , где он пытается вести себя так же, как 10 лет назад, с причудами и всем остальным.Это гарантирует, что действительно старые веб-страницы сохранят вид, который они имели при первом создании, даже если они полагаются на старые ошибки браузера, которые уже давно исправлены. К сожалению, разные браузеры по-разному ведут себя при просмотре страницы без документа. Скорее всего, вы получите разные размеры текста, несогласованные поля и границы, а также неправильно расположенное содержание. По этой причине веб-страницы без доктайпов - плохая новость, и вам следует избегать их создания.

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

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

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

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

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

`Примечание`

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

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

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

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

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

 


...


...

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

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

  

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





 
 Чтобы сэкономить время в будущем, сохраняйте эту страницу, а затем копируйте и вставляйте этот скелет HTML каждый раз при создании нового файла. Папка с учебником включает файл с именем  skeleton.htm , который поможет вам в этом - он содержит doctype и три стандартных элемента HTML-страницы, но не содержит содержимого.
  Добавьте заголовок в раздел      .
 Добавьте элемент  </code> в новую строку между открывающим тегом <code><head> </code> и закрывающим тегом <code></head> </code>:</p><pre> <strong> <code> <title> Hire Me!    
  Добавьте свой контент в раздел .
 Например, предположим, вы хотите написать простую страницу резюме. Вот очень простой пример:
 


    Найми меня!   


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

 
 В этом примере выделены ( жирным шрифтом ) изменения, внесенные в базовый каркас HTML - измененный заголовок и одну строку текста. В этом примере используется единственный элемент    внутри абзаца, просто чтобы немного украсить страницу.
  Сохраните 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 :
  
 Как и обсуждавшийся ранее элемент  
 ,    является автономным элементом без содержимого. По этой причине имеет смысл использовать синтаксис пустого элемента. и добавьте косую черту перед закрывающей угловой скобкой.
 Однако есть очевидная разница между элементом  
  и элементом   . Хотя    является отдельным элементом, это не т самодостаточный.Чтобы элемент имел какое-либо значение, вам необходимо предоставить еще две части информации: имя файла изображения и некоторый альтернативный текст, который используется в тех случаях, когда браузер не может загрузить или отобразить изображение (см. Альтернативный текст ). Чтобы включить эту дополнительную информацию в элемент изображения, HTML использует атрибуты  , дополнительные части информации, которые появляются на  после  имени элемента, но перед закрывающим символом>.
 Пример    включает два атрибута, разделенных пробелом.Каждый атрибут состоит из двух частей: имени (которое сообщает браузеру, что делает атрибут) и значения (часть информации, которую вы предоставляете). Имя первого атрибута    -  src , что является сокращением от слова «источник»; он сообщает браузеру, где взять желаемое изображение. В этом примере значение атрибута  src  равно  leepark.jpg , что является именем файла с изображением Ли Пака.
 Имя второго атрибута    -  alt , что является сокращением от «альтернативного текста.Он сообщает браузеру, что вы хотите, чтобы он отображал текст, если он не может отображать изображение. Его значение - это текст, который вы хотите отобразить, в данном случае это «Lee Park Portrait».
 Как только вы разберетесь с элементом изображения, вы будете готовы использовать его в HTML-документе. Просто разместите его там, где это имеет смысл, внутри или после существующего абзаца:
 


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


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

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

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


 
 На рис. 1-15 показано, где именно заканчивается изображение.
 Рисунок 1-15.Вот веб-страница, на которой встроено изображение благодаря связывающей способности элемента изображения. Чтобы отобразить этот документ, веб-браузер выполняет отдельный запрос на получение файла изображения. В результате ваш браузер может отображать текст веб-страницы перед загрузкой изображения, в зависимости от того, сколько времени занимает загрузка (обычно это доли секунды).
 Примечание 
 В главе 4 вы узнаете много других техник для веб-графики, в том числе о том, как изменять их размер и обтекать их текстом.
 10 самых важных элементов (и еще несколько) 
 Теперь вы достигли точки, когда вы можете создать базовый документ HTML, и у вас уже есть несколько элементов за плечами. Вы знаете основы - все, что вам осталось, - это расширить свои знания, научившись использовать больше элементов.
 HTML имеет относительно небольшой набор элементов. Скорее всего, вы будете использовать менее 25 на регулярной основе. Это ключевая часть успеха HTML, потому что он делает HTML простым языком общего доступа, понятным каждому.
 Примечание 
 Вы не можете определять свои собственные элементы и использовать их в документе HTML, потому что веб-браузеры не знают, как их интерпретировать.
 Некоторые элементы, такие как элемент
, форматирующий абзац, важны для определения общей структуры страницы. Они называются  блочными элементами . Блочные элементы получают дополнительное пространство - когда вы добавляете один на страницу, браузер начинает новую строку (отделяя этот блочный элемент от предыдущей). Браузер также добавляет новую строку в конец элемента блока, отделяя его от следующего элемента.
 Вы можете размещать блочные элементы непосредственно внутри раздела   вашей веб-страницы или внутри другого блочного элемента. В таблице 1-1 представлен краткий обзор некоторых из наиболее фундаментальных блочных элементов, некоторые из которых вы уже видели. Он также указывает, какие из них являются элементами контейнера, а какие - автономными. (Как вы узнали из статьи «Понимание элементов», для элементов-контейнеров требуются начальный и конечный теги, но для автономных элементов достаточно одного тега.) Вы более подробно изучите все эти элементы в главе 2.
 Таблица 1-1. Базовые блочные элементы.
 9019 9019 ЭЛЕМЕНТ  НАИМЕНОВАНИЕ  ТИП ЭЛЕМЕНТА  ОПИСАНИЕ
 Контейнер  Как, вероятно, сказал вам учитель английского в средней школе, абзац является основной единицей для организации текста.Когда вы используете более одного элемента абзаца в строке, браузер вставляет пробел между двумя абзацами - чуть больше, чем полная пустая строка.
 
, , ,
 
, ,  Заголовок  Контейнер  Элементы заголовка - хороший способ структурировать вашу страницу и выделить заголовки.Они отображают текст большими жирными буквами. Чем меньше число, тем крупнее текст, поэтому 
 дает самый большой заголовок. К тому времени, когда вы дойдете до , заголовок уменьшится до того же размера, что и обычный текст, а 
 , хотя и полужирный, на самом деле меньше обычного текста.
 
  Горизонтальная линия (или горизонтальная линия на языке HTML)  Автономный  Горизонтальная линия может помочь вам отделить один раздел вашей веб-страницы от другого .Линия автоматически соответствует ширине окна браузера. (Или, если вы поместите строку внутри другого элемента, например ячейки в таблице, она займет ширину своего контейнера.)
 
 ,   Неупорядоченный список, элемент списка  Контейнер  Эти элементы позволяют создавать базовые маркированные списки. Браузер автоматически помещает отдельные элементы списка в отдельные строки и делает отступ для каждого из них.Для быстрого изменения темпа вы можете заменить 
  на  , чтобы получить автоматически пронумерованный  список  вместо маркированного списка (ol означает «упорядоченный список»).
 Другие элементы предназначены для работы с более мелкими структурными деталями, например фрагментами полужирного или курсивного текста, разрывами строк, ссылками, ведущими на другие веб-страницы, и изображениями. Эти элементы называются встроенными элементами  . Вы можете поместить встроенный элемент в блочный элемент, но никогда не должны помещать блочный элемент внутри встроенного элемента.В таблице 1-2 перечислены наиболее полезные встроенные элементы.
 Таблица 1-2. Основные встроенные элементы.
 ЭЛЕМЕНТ  НАИМЕНОВАНИЕ  ТИП  ОПИСАНИЕ
 Полужирный и курсив  Контейнер  Эти два элемента применяют стиль символов - жирный или курсивный текст.(Технически    означает «текст другим голосом», а    означает «стилистически смещенный текст», и есть способы изменить применяемое форматирование, как вы увидите в главе 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> doctype сообщает валидатору, какие правила использовать при проверке вашего документа. В этой книге мы придерживаемся универсального документа HTML5 (The Basic Skeleton).</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="i-44"> Как создать веб-страницу в Интернете </span></h2><p> Часто ли вы просматриваете Интернет? Вы удивлены, сколько страниц в Интернете существует сегодня в мире? Разве вы не хотите, чтобы вы могли принять участие в этом действии?</p><p> Вы, вероятно, думаете, что для того, чтобы создать веб-страницу в Интернете, вы должны быть каким-то компьютерным гением. Вы, вероятно, думаете, что должны поступить в колледж хотя бы один год, чтобы научиться создавать веб-страницы в Интернете.</p><p> Ну, раньше это было правдой, но теперь это не так.Я собираюсь показать вам, как сегодня можно создать веб-страницу в Интернете всего за несколько минут - даже если вы никогда не были обучены каким-либо электронным технологиям. Совершенно верно - вам не обязательно быть годичным выпускником колледжа или каким-либо другим гением в области электроники.</p><p> Просто следуйте пошаговым инструкциям, описанным в этой статье, и у вас будет собственная веб-страница для всеобщего обозрения.</p><p></p><h3><span class="ez-toc-section" id="i-45"> Создайте файл веб-страницы в Интернете </span></h3><p> Чтобы создать свою первую страницу, вам нужно сделать следующее: в нижней части экрана компьютера вы должны увидеть символ, похожий на тот, что показан ниже справа:</p><p> Это кнопка «показать рабочий стол».</p><p> <strong> (Важное примечание: если по какой-то нечестивой причине вы используете компьютер под названием «Macintosh Apple», то вы не увидите эту кнопку. В этом случае вам придется проигнорировать весь этот учебник, потому что там невозможно выполнить эти шаги на Macintosh Apple. Другими словами, у вас нет возможности создать веб-страницу в Интернете.) </strong></p><p> После того, как вы нажмете кнопку «показать рабочий стол», вы должны увидеть что-то похожее на это:</p><p> На рабочем столе переместите указатель мыши на место, которое не занято одним из графических символов (т.е.е. «Значки»), затем щелкните правой кнопкой мыши (т. Е. Выполните «щелчок правой кнопкой мыши»). Вы должны увидеть появившееся «меню». В этом меню выберите «новый» вариант, чтобы появилось другое меню. В этом «новом» меню выберите «Текстовый документ»:</p><p> Это помещает новый текстовый файл на ваш рабочий стол, и вы можете назвать этот файл как хотите. Но подождите - это не официальная страница в Интернете; это просто текстовый документ (также называемый текстовым файлом). Чтобы превратить этот файл в веб-страницу в Интернете, вам нужно изменить последние три буквы имени файла, а также дать ему собственное имя.</p><p> Итак, выберите файл, щелкните его правой кнопкой мыши, затем выберите в меню пункт «переименовать». Теперь введите «internet-web-page.html» вместо существующего имени. Это классное имя, потому что люди сразу узнают его как веб-страницу в Интернете.</p><p> <strong> (ЛЮБОПЫТНЫЙ ФАКТ: «html» в конце нужен для того, чтобы он стал официальной веб-страницей в Интернете. Буквы «html» - это четыре согласных, используемых в названии лучшего веб-сайта в мире: </strong> Hotmail <strong>.Люди, владеющие и управляющие Интернетом, выбрали буквы «html», потому что хотели отдать дань уважения этому удивительному и полезному Интернет-сайту, которым пользуются все.) </strong></p><p></p><h3><span class="ez-toc-section" id="i-46"> Редактировать свою веб-страницу в Интернете </span></h3><p> Теперь, когда вы создали официальную веб-страницу в Интернете, вы хотите добавить к ней некоторые элементы, отредактировав свою веб-страницу в Интернете. Чтобы отредактировать свою веб-страницу в Интернете, нажмите кнопку «Пуск» в нижнем левом углу экрана компьютера. Затем выберите «Выполнить», как показано на изображении ниже:</p><p> Теперь должно появиться окно «Выполнить».В этом поле введите слово «блокнот» и нажмите «ОК»:</p><p> Это автоматически откроет компьютерную программу Windows под названием «Блокнот». Он в точности похож на реальный блокнот, который вы используете для составления списков продуктов, за исключением того, что в отличие от реального блокнота, этот блокнот (обратите внимание на заглавную букву «N») создает и редактирует веб-страницы в Интернете.</p><p> Теперь, когда открыт Блокнот, вам нужно открыть свою веб-страницу в Интернете внутри Блокнота. В верхней части окна Блокнота выберите «файл», затем выберите «открыть».Теперь просто перейдите к месту нахождения вашего файла, которое находится на «рабочем столе». Выберите файл с именем «internet-web-page.html», и вы должны увидеть пустую веб-страницу в Интернете, открытую в Блокноте.</p><p> Теперь вы готовы создавать материалы, которые появятся на вашей первой веб-странице!</p><p></p><h3><span class="ez-toc-section" id="i-47"> Добавьте что-нибудь на свою веб-страницу в Интернете </span></h3><p> К сожалению, создать веб-страницу в Интернете с помощью «компьютерного программирования» очень сложно. Но есть простой способ сделать свою веб-страницу в Интернете красивым, не изучая ничего о сложном компьютерном программировании.На пустой веб-странице введите следующее точно, как показано:</p><p> <code><PRE> <br/> </PRE></code></p><p> В первой строке вы можете увидеть слово «PRE» внутри заостренных скобок. Затем в следующей строке вы снова видите слово «PRE» в заостренных скобках, за исключением того, что на этот раз перед словом «PRE» стоит косая черта. Вам не обязательно знать, что это значит. Все, что вам нужно сделать, это вставить много слов и изображений между этими заостренными скобками «PRE», и вам не придется беспокоиться о сложном программировании.</p><p> Вот пример того, что вы могли бы поместить внутри остроконечных скобок «PRE»:</p><p> Это так просто! Теперь, когда вы представили своих домашних кроликов на своей веб-странице в Интернете, вы также хотите включить реальное изображение своих домашних кроликов. Если у вас есть изображение домашних кроликов, просто поместите файл изображения на рабочий стол рядом с веб-страницей в Интернете, а затем добавьте следующую строку на свою веб-страницу в Блокноте:</p><p> Не беспокойтесь о том, что означает эта линия.Вам не обязательно это понимать. Все, что вам нужно знать, это то, что теперь, когда вы разместили эту строку на своей веб-странице, ваши кролики появятся на виду у всех. Вам просто нужно убедиться, что изображение ваших кроликов на вашем рабочем столе называется «my-3-rabbits.jpg».</p><p></p><h3><span class="ez-toc-section" id="i-48"> Проверьте свою веб-страницу в Интернете </span></h3><p> Пришло время протестировать вашу новую веб-страницу. Чтобы проверить свою веб-страницу в Интернете, просто сделайте то, что вы обычно делаете для подключения к Интернету: на рабочем столе щелкните изображение большой синей буквы «e».Буква «e» означает «Интернет», и это выглядит так:</p><p> После того, как вы нажмете на большую синюю букву «e», вам придется подождать одну или две минуты, пока загрузится Интернет. Как только он загрузится, вы увидите интернет-окно. Должно получиться так:</p><p> Чтобы увидеть свою веб-страницу в Интернете, все, что вам нужно сделать, это открыть свою веб-страницу в этом окне. В верхней части интернет-окна вы увидите слово «Файл». Нажмите на это слово, и откроется меню. Внутри этого меню выберите опцию «открыть».Теперь перейдите на рабочий стол и выберите свою веб-страницу в Интернете, затем нажмите «ОК». Затем ваша веб-страница в Интернете загрузится в окно Интернета. Когда ваша веб-страница в Интернете завершит загрузку, она будет выглядеть так:</p><p> Presto! Как по волшебству, ваша новая веб-страница в Интернете (как и ваши кролики)! Это так просто.</p><p> Но есть еще кое-что, что вы можете добавить на свою веб-страницу. Например, вы можете создавать «горячие ссылки» на свои любимые веб-сайты, такие как AOL и Hotmail.Вернитесь в окно Блокнота и добавьте следующие строки:</p><p> В этих новых строках используется специальный секретный код, который создает «горячие ссылки» на другие веб-страницы в Интернете. Этот код называется A HREF и произносится как «Эх, Харрефф».</p><p> <strong> (ВАЖНОЕ ПРИМЕЧАНИЕ: у вас может возникнуть соблазн произнести это «Эх, эйч реф», но это неправильный способ произнести это. Правильный вариант - «Эх, Харрефф». Просто представьте, что вы человек из Канады и у вас есть друг по имени «Харрефф». Вы можете сказать что-то вроде: «Эх, Харрефф, как загружать тот хоккейный матч прошлой ночью?») </strong></p><p></p><h3><span class="ez-toc-section" id="i-49"> Просматривайте свои изменения в окне Интернета </span></h3><p> Теперь сохраните внесенные вами изменения и вернитесь в окно Интернета.Конечно, вы хотите обновить интернет-страницу в интернет-окне, чтобы вы могли видеть изменения. Для этого нажмите на клавиатуре клавишу с надписью «F5».</p><p> <strong> (ЛЮБОПЫТНЫЙ ФАКТ: вы также можете обновить страницу, нажав зеленую кнопку «Утилизация», которая появляется в верхней части окна Интернета. </strong>)</p><p> Это обновит веб-страницу в Интернете, и она должна выглядеть так:</p><p> Теперь три ваших любимых веб-сайта перечислены на вашей веб-странице в Интернете, так что другие могут посетить их, щелкнув «горячие ссылки».</p><p></p><h3><span class="ez-toc-section" id="i-50"> Отправить по электронной почте свою веб-страницу в Интернете своим друзьям </span></h3><p> Поскольку ваша веб-страница в Интернете завершена, вам остается только поделиться этой веб-страницей со своими друзьями. Тогда ваши друзья поделятся им со своими друзьями, и это будет снежный ком. За несколько месяцев вашу страницу в Интернете может посетить до 35 человек. Вот как можно начать снежный ком:</p><p> В окне Интернета вы заметите белое поле под названием «Адрес».Текущий «адрес» вашей веб-страницы - «C: \ Desktop \ internet-web-page.html». Поместите курсор мыши в это поле и выберите весь адрес. Затем на клавиатуре нажмите и удерживайте кнопку «CTRL», а затем нажмите букву «C». Это «скопирует» адрес вашей веб-страницы в память вашего компьютера.</p><p> Теперь перейдите на сайт www.hotmail.com в своем интернет-окне и войдите в свою учетную запись электронной почты Hotmail. Если у вас нет учетной записи электронной почты Hotmail, вы можете создать ее на этой странице.</p><p> (<strong> ВАЖНОЕ ПРИМЕЧАНИЕ: Если у вас в настоящее время нет учетной записи электронной почты Hotmail, то вы очень-очень глупый человек. </strong>)</p><p> После входа в свою учетную запись электронной почты Hotmail создайте новое сообщение электронной почты и сделайте его похожим на сообщение на изображении ниже:</p><p> Единственная проблема сейчас в том, что у ваших друзей нет веб-страницы в Интернете и изображения трех ваших кроликов на рабочем столе. Таким образом, вы должны отправить его им по электронной почте. Вы можете сделать это, нажав кнопку «Вложения» в новом сообщении электронной почты.После того, как вы прикрепите эти два файла, вы можете добавить дополнительную заметку в свою электронную почту, чтобы сообщить своим друзьям, что делать с прикрепленными файлами. Теперь ваш адрес электронной почты должен выглядеть так:</p><p> Теперь просто нажмите «Отправить», и все, кто прочитает вашу электронную почту, смогут просматривать вашу веб-страницу в Интернете. Кто знал, что веб-дизайн в Интернете настолько прост?</p><p></p><h3><span class="ez-toc-section" id="i-51"> Последние советы и напоминания </span></h3><p> Есть еще очень много вещей, которые вы можете узнать о создании веб-страниц в Интернете, но я могу включить здесь лишь некоторые из них.Хотя наиболее важные задачи описаны выше, вы можете сделать еще кое-что, чтобы улучшить создаваемые вами веб-страницы в будущем. Вот некоторые вещи, которые вы можете изучить дополнительно:</p><ul><li> Если вы хотите создать дополнительное пространство между материалами на своих веб-страницах, вы можете использовать так называемый «разделительный GIF», который представляет собой прозрачное изображение, размер которого можно изменять до любого размера.</li><li> Чтобы создать сетку для вашей веб-страницы в Интернете, вы можете использовать специальный код<TABLE> с параметром «BORDER», установленным на «1».</li><li> Чтобы поисковые системы, такие как Lycos и Alta Vista, распознавали вашу веб-страницу, вы можете включить популярные ключевые слова в Интернете, такие как «Регис и Кэти Ли» или «Золотые девушки» (или любой другой предмет популярной поп-культуры).</li><li> Вы можете сделать свои ключевые слова в Интернете невидимыми для людей, но видимыми для поисковых систем, используя белый текст на белом фоне (это может быть полезно, например, если ваша веб-страница в Интернете не о Golden Girls, но вы все равно хотят нажиться на их популярности)</li><li> Существуют объекты, называемые апплетами, которые вы можете включить на свою веб-страницу в Интернете, чтобы ваша веб-страница выглядела красочно и модно.</li><li> Вы можете разместить «счетчик посещений», который выглядит как спидометр, на своей веб-странице в Интернете, и он покажет вам, сколько людей его просмотрели</li><li> Каждый раз, когда вы меняете или обновляете свою веб-страницу в Интернете, вы можете отправить электронное письмо своим друзьям, чтобы напомнить им «нажать F5», чтобы они могли видеть изменения в своем интернет-окне.</li></ul><p> Было весело раскрыть вам секреты создания веб-страницы в Интернете.Интернет-дизайн больше не предназначен только для компьютерных гениев. Теперь любой может создать веб-страницу в Интернете и поделиться ею со всем миром!</p><p> <em> Этот пост был написан специально для Webdesigner Depot Луи Лазарисом, писателем-фрилансером и веб-разработчиком. Луи запускает Impressive Webs, где публикует статьи и руководства по веб-дизайну. Вы можете подписаться на Луи в Twitter или связаться с ним через его веб-сайт. </em></p><p> <strong> <em> У вас есть другие советы по созданию веб-страницы в Интернете? Поделитесь своими комментариями ниже.</em> </strong></p><h2><span class="ez-toc-section" id="i-52"> Как создавать веб-страницы </span></h2><blockquote></blockquote><blockquote><p> Веб-страница хранится в файле особого типа, который называется «html-файл». html
файлы можно создавать практически в любой программе, которую можно использовать для редактирования текста
файлы. Также существуют программы, помогающие создавать файлы HTML. В
Преимущество этих программ состоит в том, что они часто просты в использовании.
Недостатком является то, что они не всегда генерируют правильные html-файлы. Мы
рекомендую создавать веб-страницы с помощью обычного текстового редактора, например <code> vi </code>, <code> pico </code>, Блокнот в Windows 95 или подобное.</p><p> HTML-файл содержит «управляющие коды», которые определяют, как будет выглядеть страница.
при просмотре через веб-браузер. Эти управляющие коды называются "html".
теги ". Вам не нужно выучить более 10 тегов, чтобы создать
простая веб-страница.</p></blockquote><blockquote><p> Если вы сидите дома и создаете веб-страницу или пользуетесь Интернетом
подключенный компьютер без ACC, вам необходимо загрузить файл, содержащий
веб-страницу в вашу учетную запись ACC. Это делается с помощью
FTP (в настоящее время только на шведском языке).</p><p> Самый простой способ создания веб-страниц - войти в свою учетную запись ACC и
создавать страницы с помощью одного из редакторов системы. Тогда у тебя нет
возиться с SFTP.</p><p> Когда вы создали веб-страницу и хотите ее опубликовать, вы должны разместить
файл (ы), содержащий вашу веб-страницу в специальном месте. Это особое место
каталог <code> ~ / public_html </code> в вашей учетной записи ACC (
Символ «<code> ~ </code>» означает «домашний каталог»). Каталог <code> ~ / public_html </code> создается командой <br/> <code> мкдир ~ / public_html </code>.Все, что вы положили в это
каталог будет общедоступен по адресу <code> http://www.acc.umu.se/~your-username </code>.</p><p> Чтобы разрешить веб-серверу отправлять ваши веб-страницы людям, которые хотят посмотреть
при этом вы должны сделать каталог общедоступным. Это делается с помощью
команда ниже: <br/> <code> chmod 755 ~ / public_html </code></p><p> Файл, содержащий вашу домашнюю страницу, должен иметь особое имя, <code> index.html </code>, чтобы веб-сервер знал, какую веб-страницу показывать.
если у вас много файлов, содержащих веб-страницы.Файлы, как и каталог,
должны быть общедоступными для чтения, а файлы становятся общедоступными для чтения с помощью
коммандос <br/> <code> chmod 644 filename </code> <br/> где <code> filename </code> заменяется на имя файла, который вы
хотите сделать общедоступным для чтения.</p><p> Если вы не уверены в этом, вы всегда можете использовать команду
"<code> fixchmod </code>", который автоматически устанавливает права доступа на
правильные ценности. Таким образом, вам не нужно использовать <code> chmod </code> - команда.Просто напишите <code> fixchmod </code>, и он будет
позаботьтесь об остальном.</p></blockquote><blockquote><p> Если ваша страница становится очень большой, вам следует разделить ее на несколько меньших страниц.
Это делается путем простого создания нескольких разных html-файлов, содержащих
разные страницы. Файл, содержащий главную страницу, должен по-прежнему иметь имя <code> index.html </code>, и из него вы сделаете ссылку на другие файлы. Делать
убедитесь, что вы правильно называете файлы, давая им такие имена, как <code> about_me.html </code>, ссылок <code>.html </code> и так далее.</p><p> Вы также можете структурировать свои страницы, разместив их в разных каталогах.
в зависимости от того, какая информация содержится на разных страницах. Для
Например, вы можете поместить все страницы со ссылками в каталог <code> ~ / public_html / links / </code> и ваши страницы Spice-Girls в
каталог <code> ~ / public_html / spicegirls / </code> и так далее ... Основная ссылка
затем следует поместить страницу в файл <code> index.html </code> в папке
link-directory, чтобы веб-сервер мог его найти.Страница, содержащая ссылки
для всех ваших друзей домашние страницы могут быть названы <code> friends.html </code> и быть помещенным в каталог ссылок. И так далее...</p></blockquote><blockquote><p> Если у вас есть cgi-скрипт, который вы хотите запустить какое-то время, например, чтобы
управлять гостевой книгой или подсчитывать количество посещений вашей страницы, этот скрипт
должен быть помещен в каталог <code> ~ / public_html </code> или в
подкаталог в <code> ~ / public_html </code>. cgi-скрипты должны быть исполняемыми,
и настроены так, введя команду <br/> <code> chmod 755 имя сценария </code> <br/> где <code> имя сценария </code> заменено на имя содержащего
cgi-скрипт.<br/> Команда <code> fixchmod </code> сделает это автоматически, если вы думаете
кажется сложным использовать команду <code> chmod </code>.</p><p> Теперь, как вы можете заставить cgi-скрипт запускаться каждый раз, когда кто-то смотрит на страницу?
Это действительно довольно просто. Просто поместите следующую строку где-нибудь в свой
html: <br/> <code> <! - # include virtual = "scriptname.cgi" -> </code> <br/> и scriptname.cgi будут запускаться, когда кто-то просматривает веб-страницу, и
текстовый или html-код, созданный скриптом, окажется на веб-странице.А
короткий пример: <br/> <code> Эта страница была посещена <! - # include virtual = "counter.cgi" -> раз! </code> <br/> может привести к этому, в зависимости от того, что дает <code> counter.cgi </code>: <br/> <code> Эту страницу посетили 65 раз! </code> <br/> Можно создать cgi-скрипты, которые создают html-код, говорящий, что
изображение должно отображаться. Если counter.cgi в приведенном выше примере является сценарием
который отображает количество посетителей, показывая изображения чисел,
результат может выглядеть так: <br/> <code> Эта страница была посещена <noscript><img class="lazy lazy-hidden" src = "6.gif "></noscript><img class="lazyload lazy lazy-hidden" src = "6.gif "><noscript><img src = "6.gif "></noscript> <noscript><img class="lazy lazy-hidden"
src = "5.gif"></noscript><img class="lazyload lazy lazy-hidden"
src = "5.gif"><noscript><img
src = "5.gif"></noscript> раз! </code> <br/>, что заставит веб-браузер загружать изображения 6.gif и 5.gif и
покажите их.</p><p> У ACC есть несколько скриптов, которые наши пользователи могут использовать на своих веб-страницах, например
счетчик, который подсчитывает количество посетителей страницы. Чтобы использовать это в сети
страницы, вы пишете следующую строку в своем html файле: <br/> <code> Эта страница была посещена <! - # exec
cgi = "/ cgi-bin / scripts / acc_count" -> раз! </code> <br/>, если вы хотите использовать скрипт <code> / cgi-bin / скрипты / acc_count </code>.</p><p> Более подробную информацию о счетчиках можно найти на counter.html.</p><p> Для получения информации о других cgi-скриптах см. Cgiscripts.html.sv (только на шведском языке).</p></blockquote><blockquote> Есть несколько способов сделать страницы, защищенные паролем, но учтите, что
реализация его с помощью сценария CGI является распространенной дырой в безопасности, поскольку пароль
хранится в файле журнала веб-сервера.<p> Более безопасный способ - использовать вместо этого htaccess, который
объясняется на отдельной странице.</p></blockquote><blockquote><p> Это не полный курс по созданию веб-страниц, но
больше задумано как введение, чтобы дать вам представление об основах
создание веб-страницы.Лучший способ научиться программировать html - это посмотреть на некоторые
html со страницы, на которой есть какая-то функция, которую вы хотите, и измените его.
в соответствии с вашими потребностями.</p></blockquote><blockquote><p> Тег - это своего рода управляющий код, который определяет внешний вид страницы. An
Пример тега - <code> <br> </code>, который вставляет разрыв строки.
Многие теги могут / должны иметь аргументы, например <code> img </code> тег, который используется для включения изображений на страницу. Пример того, как это можно
смотреть это <br/> <code> <noscript><img class="lazy lazy-hidden" src = "картинка.gif "alt =" Изображение "align =" middle "
width = "200"></noscript><img class="lazyload lazy lazy-hidden" src = "картинка.gif "alt =" Изображение "align =" middle "
width = "200"><noscript><img src = "картинка.gif "alt =" Изображение "align =" middle "
width = "200"></noscript> </code></p><p> Теги должны быть окружены символами <code> <</code> и <code>> </code> или они не будут работать! Некоторые аргументы тегов должны быть
в кавычках (<code> "</code>). Если вы допустили ошибку в теге, ваш
страница, вероятно, будет выглядеть не так, как вы планировали, даже если некоторые веб-страницы
браузеры пытаются угадать, что вы имели в виду. Некоторые теги должны быть завершены, для
Например, тег <code><center> </code>, который центрирует текст на странице.Перед текстом, который нужно центрировать, пишут <code><center> </code>,
и <code></center> </code> после. Текст между этими двумя тегами
будет по центру. Также нужно иметь <code><p & gt </code> перед
абзац, а после него - <code> </ p & gt </code>. Вот как это делается
эта страница.</p><p> Некоторые теги, которые могут быть в html-файле, являются «обязательными». Им следует
быть в файле, если вы хотите, чтобы ваша страница отображалась с исправлением как можно большего количества
как можно больше людей, независимо от того, какой браузер они используют.Это для
например, <code><html> </code>, <code><head> </code> и <code> <тело> </code>.</p></blockquote><blockquote><p> Здесь мы шаг за шагом рассмотрим создание простой веб-страницы.</p></blockquote> <b> Начало страницы </b><blockquote><p> В начале файла у нас должен быть тег <code><html> </code>,
чтобы указать, что файл является файлом HTML. Затем нам нужен заголовок на странице.
Заголовок размещается в заголовке страницы. Таким образом, нам понадобится голова: <code> <заголовок> </code>.Название пишется внутри <code><title> </code> tag: <code><title> Мой
домашняя страница . Теперь мы закончили с головой, так что давайте
прекратить его:  .
  Текст на странице  Теперь пишем актуальную страницу. Это места в так называемом «теле». Таким образом, мы
введите тег   с несколькими аргументами, чтобы указать
какие цвета мы хотим на нашей странице:  .Теперь мы можем войти
текст, который мы хотим на странице. Если нам нужен разрыв строки на определенном
места в тексте вводим тег  
 . Веб-браузеры
автоматически оптимизирует текст на веб-страницах так, чтобы он занимал всю ширину
окно, поэтому пытаясь отформатировать текст вручную, вводя много  
  тегов, это пустая трата времени. Кроме того, разные
люди имеют разные размеры на окнах, поэтому страница, которая выглядит идеально
вам может показаться не очень идеальным для другого человека, поскольку сеть этого человека
браузер вставляет разрывы строк по-другому.Проверьте себя
измените размер окна вашего веб-браузера, и вы увидите!
  Изображения  Если вам нужны изображения на своей веб-странице, вы вставляете их с помощью специального тега:   . Тег    может иметь много
разные аргументы, чтобы указать размер изображения, толщину
рамку вокруг изображения и т. д. Мы хотим, чтобы на нашей странице было изображение логотипа ACC:   .Это включает в себя изображение  /images/logo/acc_small.gif  на странице или в тексте
«Логотип ACC», если веб-браузер не показывает изображения. Ширина изображения составляет
200 пикселей, и он будет выровнен по центру.
  Ссылки  Чтобы создать ссылку на другие страницы или документы, введите что-то вроде этого:   cnn  . Это создаст ссылку на
www.cnn.com, называемый «cnn». 
 У вас также могут быть ссылки на изображения:    .
  Конец страницы  Внизу html файла нужно завершить теги, которые были "открыты"
в начале файла. Это делается путем ввода   и  .
  Пример  Вот что мы создали на данный момент:
  
 
 
 Моя домашняя страница 
 
 
 Привет и добро пожаловать на мою домашнюю страницу.На данный момент он не содержит никакой полезной информации,
но подождите, пока я выучу больше html! 
 
 
 
 Вот ссылка на  cnn , где вы
можете читать последние новости .. 
 
 
 
 Изображение логотипа ACC: 
  
 
 Пока, с возвращением! 
 
 У нас есть дополнительная информация о html и, в частности, о некоторых других тегах на другой странице.
 6 простых шагов для создания базового веб-сайта 
 Кажется ли создание веб-сайта сложной задачей? Вы откладываете создание веб-сайта для своего бизнеса, некоммерческой организации или портфолио, потому что это кажется слишком большой работой? Если обучение программированию, поиск фотографий и выяснение того, как создавать формы звучит ошеломляюще, у меня есть отличные новости.
  Вам не нужно знать, как это сделать, чтобы создать простой веб-сайт. 
 Времена, когда для создания простого веб-сайта требовался дорогой дизайнер или веб-разработчик, давно прошли.Сегодня все, что вам нужно, - это день и (в зависимости от используемых вами инструментов) от 20 до 100 долларов.
 И вот в чем дело: если вы хотите построить и развивать успешный бизнес, веб-сайт просто необходим.
 97% людей ищут в Интернете местный бизнес.
 Итак, в этом посте мы расскажем вам обо всем, что вам нужно сделать, чтобы создать базовый веб-сайт:
 Определите цель вашего сайта
 Выбрать хостинговую компанию
 Выберите конструктор сайтов
 Обозначьте свои веб-страницы
 Оптимизируйте свой сайт
 Настроить платежную систему
 Приступим.
 1. Определите цель вашего сайта 
 Прежде чем погрузиться в собственное создание вашего веб-сайта, вам нужно выделить время, чтобы определить, какова будет цель вашего веб-сайта.
 Понимание функций вашего веб-сайта будет важным при выборе инструментов.
  Прежде чем начать, ответьте на следующие вопросы о своем веб-сайте: 
  Какова основная цель вашего сайта?  Вы хотите увеличить посещаемость, продавать товары в Интернете, делиться еженедельным меню, принимать онлайн-заказы или что-то еще? Ответ на этот вопрос повлияет на то, какой хост вы выберете, какой конструктор сайтов вы используете, и на все другие решения, которые вы примете.
  Как вы в настоящее время продвигаете свой бизнес?  Ваша маркетинговая стратегия повлияет на необходимые вам инструменты. Например, если электронный маркетинг важен для вашего бизнеса, вам нужно будет добавить подписку по электронной почте. Если Instagram привлекает кучу трафика, вы можете подумать о встраивании своей ленты Instagram на свой сайт.
  Какие функции нужны вашему сайту?  Вы продаете товары в Интернете? Вам нужно выбрать конструктора сайтов и хостинг, специализирующийся на электронной коммерции.А как насчет цифровых продуктов? Вам понадобится возможность отправлять файлы автоматически. Вы хотите указать направление к физическому местонахождению вашего магазина? Составьте список необходимых вам функций и возможностей. Вы будете обращаться к этому списку, когда будете думать, какой веб-хостинг или конструктор сайтов выбрать.
  Каким вы видите свой бизнес в ближайшие несколько лет?  Какие функции или маркетинговые стратегии вы хотели бы изучить? Например, если вы планируете использовать платную рекламу, вы можете убедиться, что выбранный вами хостинг поддерживает значительное увеличение трафика и простое создание целевых страниц.
 2. Выберите хостинговую компанию 
 Для создания веб-сайта требуются три основных компонента:  - хост  (который хранит файлы вашего веб-сайта и доставляет их по запросу пользователей),  - доменное имя  (которое служит в качестве местоположения сайта в Интернете) и  - сайт. Builder  (инструмент, используемый для создания страниц, добавления копий, загрузки изображений и т. д.).
 Эти три функции часто предлагаются в комплексных пакетах от веб-хостов, таких как GoDaddy, BlueHost и SiteGround.Существуют десятки веб-хостов, и каждый предлагает множество пакетов, что может усложнить выбор хоста.
  Вот как правильно выбрать веб-хостинг для своего сайта: 
  Решите, какой тип хостинга вам нужен:  Общий или облачный хостинг дешевле и его будет достаточно для большинства веб-сайтов малого бизнеса. Высокому трафику или крупным брендам электронной коммерции следует подумать о выделенном хостинге или VPS.
  Обратите внимание на время работы:  Если ваш сайт недоступен, вы потеряете деньги.Ищите веб-хостинг, который предлагает не менее 99,9% времени безотказной работы и вернет часть ваших сборов, если они не выполнят свою гарантию.
  Подумайте о безопасности:  Хосты должны обеспечивать безопасность ваших веб-файлов, поэтому вам нужен хост, который заботится о безопасности. Ищите такие функции, как включенный сертификат SSL, брандмауэр и защиту от вредоносных программ.
  Думайте о будущем:  Если ваш сайт предназначен для информационных целей, дешевый план виртуального хостинга может подойти.Однако подумайте, будет ли существенно увеличиваться трафик по мере роста вашего бизнеса, и ищите хостинг-провайдера с планами, которые будут расти вместе с вами.
  Посмотрите на особенности:  Хосты часто предлагают широкий спектр других продуктов, включая конструкторы сайтов, сертификаты SSL (которые дают вашему сайту префикс https), бесплатные доменные имена, маркетинговые кредиты и хостинг электронной почты. Выберите хостинг, который предлагает то, что вам нужно, а не более дорогой план, включающий «бесплатные» функции, которыми вы никогда не будете пользоваться.
  Обратите внимание на информацию о ценах:  Многие хосты предлагают скидки на первый год или «бесплатное» доменное имя, которое продлевается по гораздо более высокой цене. Перед покупкой проверьте стоимость продления на второй год хостинга.
 Наконец, прочтите обзоры каждой хостинг-платформы перед тем, как совершить покупку. Хотя перемещение хостов не невозможно, это может быть сложно. Чтение обзоров поможет вам избежать неприятностей. Who Is Hosting This и Hosting Facts публикуют подробные обзоры и сравнивают самые популярные варианты хостинга.
 3. Выберите конструктор сайтов 
 В прошлом создание веб-сайта было сложным процессом, который занимал недели. Сегодня с помощью шаблонов и конструкторов сайтов с перетаскиванием можно создать функциональный сайт всего за несколько минут.
 Ваш первый шаг должен состоять в том, чтобы увидеть, что предлагает ваш хост. Многие хостинг-провайдеры включают собственный конструктор сайтов или доступ к стороннему разработчику с вашим планом хостинга.
 Например, Siteground предлагает бесплатное использование Weebly или WordPress с каждым тарифным планом.
  Вот краткий обзор самых популярных конструкторов сайтов на рынке. 
 WordPress 
 Как самая популярная система управления контентом в Интернете, вы наверняка слышали о WordPress.
 Есть два варианта: WordPress.com и WordPress.org. WordPress.com - это платный сервис, который предоставляет хостинг и помогает защитить ваш сайт. WordPress.org - это бесплатные файлы, которые вы можете скачать у своего хостинг-провайдера.
 WordPress может быть настолько сложным или простым, насколько вам нравится, и есть множество тем на выбор.Если вы планируете расширять свой сайт, WordPress - отличный вариант.
 Squarespace 
 Squarespace - это инструмент для создания сайтов на основе шаблонов и универсальная платформа. Они предлагают хостинг, домены, конструктор сайтов и даже функции электронной коммерции.
 Сайты Squarespace довольно гибкие, но их возможности немного ограничены по сравнению с WordPress.
 Выбор шаблона включает сайты для ресторанов, портфолио, мероприятий, свадеб, музыкальных групп и интернет-магазинов.
 Если вы не хотите возиться с созданием своего сайта Squarespace самостоятельно, вы можете нанять дизайнера Squarespace, который создаст сайт для вас.
 Weebly 
 Weebly - очень простой в использовании конструктор сайтов на основе шаблонов с функциями перетаскивания.
 Добавить функции и даже магазин очень просто; однако Weebly ограничивает ваши возможности настройки. Однако для простого сайта ограниченная настройка может подойти.
 Weebly также предлагает доменные имена, если вы еще не приобрели их.
 Weebly становится все популярнее, особенно среди малых предприятий, которым не нужен сайт со сложной функциональностью. Это доступный вариант, но компании, стремящиеся к расширению, быстро перерастут Weebly.
 4. Обозначьте свои веб-страницы 
 Когда у вас есть хост и конструктор сайтов, пора приступить к написанию и созданию страниц вашего сайта. Хотя количество страниц будет сильно различаться в зависимости от вашего бизнеса, есть несколько страниц, которые должны быть на каждом веб-сайте.
 Имейте в виду, пользователям не нужно копаться, чтобы найти информацию. Если страница важна, обязательно укажите ее на главной панели навигации или в нижнем колонтитуле.
  Вот несколько основных страниц веб-сайта, которые должен включать каждый сайт: 
  Домашняя страница:  Это ваша презентация в лифте, ваше первое впечатление. Объясните, кто ваша компания и ваши ценности. Включите призыв к действию на другие страницы, например, чтобы связаться с нами и продуктами или услугами. Идеи для домашней страницы можно найти здесь.
  Страницы услуг или продуктов:  Включите по одной странице для каждой основной линейки услуг или продуктов, которые предлагает ваш бизнес. Например, в пекарне можно разделить страницы, посвященные тортам, пирогам и кейтерингу. Здесь вы можете найти советы по описанию продукта.
  О нас Страница:  Это взгляд на историю и людей, стоящих за вашей компанией. Какова ваша история основания? Каким предысторием вы хотите поделиться? Вы ветеран, бывший милиционер, есть ли у вас семья?
  Контактная страница:  Как посетители сайта могут связаться с вами? Ваша контактная страница может включать онлайн-форму, номер телефона, адрес, часы работы и встроенную карту Google.
  Заявление о конфиденциальности:  На этой странице вы объясняете, какую информацию вы собираете от посетителей сайта и что вы делаете с этой информацией.
 Не забудьте включить призыв к действию или CTA на каждой странице. Например, внизу каждой страницы LOCALiQ есть форма для начала работы:
 В зависимости от вашей бизнес-модели вы можете использовать CTA, чтобы направлять посетителей сайта на ваш список адресов электронной почты, страницу контактов или страницу вашего продукта.
 5. Оптимизируйте свой веб-сайт 
 Когда ваш сайт появится в сети, как пользователи его найдут?
 Большинство пользователей находят нужную информацию, набирая (или произнося) поисковый запрос в Google. Например, семья, которая ищет магазин детской одежды, может ввести «детская одежда рядом со мной».
 Google использует более 200 факторов ранжирования, чтобы определить, какой сайт показывать, и оптимизация вашего сайта даст ему больше шансов на высокий рейтинг для вашей отрасли и местоположения.Инструменты, которые вы используете для оптимизации своего сайта, будут зависеть как от создателя сайта, так и от используемого вами хоста. Вот некоторые из них.
 И это руководство по основам SEO предоставляет больше информации о том, как оптимизировать ваш сайт, чтобы он занимал более высокое место в Google.
 6. Настроить платежную систему (при необходимости) 
 Если вы планируете продавать товары через Интернет или позволяете делать заказы через Интернет, то вашему сайту потребуется способ приема платежей.
 Популярные способы оплаты включают PayPal, Stripe и Square, хотя существует множество других способов оплаты.Выбранный вами хост также может предоставлять опцию электронной коммерции.
  Вот краткое изложение трех самых популярных вариантов платежных систем: 
  Stripe  - это API для онлайн-платежей, который хорошо работает для компаний электронной коммерции. Collect for Stripe также позволит вам принимать личные платежи.
  PayPal  - один из самых популярных процессоров онлайн-платежей. Они предлагают онлайн-кассу, выставление счетов и платежи, которые подходят для большинства предприятий электронной коммерции.
  Square  предлагает различные POS-системы, онлайн-кассу и выставление счетов, которые хорошо подходят как для онлайн, так и для обычных предприятий.
 При выборе платежной системы подумайте, как ваша целевая аудитория предпочитает платить, а также сколько взимает каждая платежная система.
 Придерживайтесь основ 
 Если у вас небольшой бизнес, вы, вероятно, слышали, насколько важно иметь хотя бы простой базовый веб-сайт, но на самом деле создание веб-сайта может показаться непосильным.Благодаря широкому спектру инструментов и решений, представленных сегодня на рынке, для запуска вашего бизнеса в сети больше не нужно знать, как кодировать, или тратить тысячи долларов.
 Используя инструменты и пошаговое руководство, описанные выше, ваша компания может быть готова подключиться к 4,33 миллиардам пользователей Интернета всего за полдня.
 Создайте свой веб-сайт в Mailchimp 
 Создайте веб-сайт в Mailchimp, чтобы поделиться своим бизнесом со всем миром и оставаться на связи со своей аудиторией. Мы поможем вам создать ваши веб-страницы, опубликовать ваш сайт в домене, отслеживать его производительность и все остальное, что вам нужно для выхода в Интернет.
 Из этой статьи вы узнаете, как создать веб-сайт в Mailchimp.
 Создать сайт 
 Чтобы создать веб-сайт, выполните следующие действия.
 Щелкните значок веб-сайта  . 
 Щелкните  Веб-сайт . 
 Введите название своего веб-сайта и нажмите  Далее , чтобы выбрать аудиторию. 
 Используйте раскрывающееся меню, чтобы выбрать аудиторию, и щелкните  Изменить мой сайт .
 
 Если у вас более одной аудитории, вам сначала нужно выбрать ту, которую вы хотите связать со своим веб-сайтом.
 Добавьте контент и создайте свой сайт 
 Когда вы нажмете кнопку «Редактировать свой сайт», вы попадете в конструктор сайтов Mailchimp. Здесь вы выбираете страницу, с которой хотите работать, и добавляете изображения, текст и другой контент, чтобы поделиться своей историей или чем-то еще, что вы хотите, чтобы посетители знали. Добавляйте дополнительные страницы по мере необходимости и используйте меню «Стили», чтобы выбрать шрифты, цвета и другие элементы, чтобы создать общий внешний вид вашего сайта, соответствующий вашему бренду.Здесь вы также можете управлять настройками баннера cookie на вашем сайте. Пошаговые инструкции по созданию веб-сайта см. В статье «Дизайн веб-сайта в Mailchimp».
 После того, как вы закончите добавление контента и разработку своей страницы, нажмите  Preview , чтобы увидеть, как он выглядит, или нажмите  Done , чтобы вернуться на страницу управления сайтом. Щелкните  Finish Later , чтобы вернуться на панель управления веб-сайтом, где вы можете продолжить настройку своего сайта.
 Редактировать доменное имя 
 Если вы хотите изменить настройки своего веб-сайта, включая доменное имя или предпочтения отслеживания посетителей, вы можете обновить эти данные через панель управления своего веб-сайта.
 Чтобы изменить доменное имя вашего веб-сайта, выполните следующие действия.
 На панели управления веб-сайта нажмите кнопку  Настройки . 
 В разделе  Домен  щелкните  Изменить . 
 Введите субдомен, который вы хотите использовать для своего веб-сайта.
 Нажмите  Сохранить . 
 Отличная работа! Теперь у вас есть фирменный URL-адрес, которым вы можете поделиться после публикации своего веб-сайта.
 Добавить отслеживание сайта 
 Отслеживание сайта позволяет отслеживать уникальные посещения вашего сайта и новые регистрации.
 Чтобы добавить отслеживание на свой веб-сайт, выполните следующие действия.
 На панели управления веб-сайта нажмите кнопку  Настройки . 
 В разделе  Site Tracking  щелкните  Edit .
 Установите флажок рядом с параметрами отслеживания, которые вы хотите использовать, и нажмите  Сохранить  для подтверждения. 
 Чтобы узнать больше о наших вариантах отслеживания, ознакомьтесь с разделами «Отслеживание с помощью Mailchimp», «Отслеживание с помощью пикселя Facebook» и «Отслеживание с помощью Google Analytics».
 Отличная работа! Затем мы рассмотрим настройки для ваших отдельных веб-страниц.
 Изменить настройки URL, SEO и социальных сетей 
 Каждая страница, которую вы вручную добавляете на свой веб-сайт, имеет индивидуальные настройки, управляющие ее отображением на панели навигации вашего сайта, в веб-браузерах, в результатах поиска и в публикациях в социальных сетях. Вы также можете изменить URL-путь каждой страницы. Здесь вы можете применить тактику SEO (поисковая оптимизация), чтобы сделать вашу страницу более доступной для поиска и увеличить посещаемость.
 Пошаговые инструкции по изменению настроек страницы см. В разделах «Редактировать URL-адрес страницы», «Настройки SEO и социальных сетей».
 Предварительный просмотр и публикация вашего сайта 
 После того, как вы отредактируете свой домен, стили, контент, отслеживание и другие настройки, вы будете готовы поделиться своим сайтом со всем миром. Перед публикацией мы рекомендуем вам предварительно просмотреть, как он будет выглядеть на настольных компьютерах и мобильных устройствах.
 Чтобы просмотреть и опубликовать свой веб-сайт, выполните следующие действия.
 На панели управления веб-сайта наведите указатель мыши на изображение своей домашней страницы и щелкните  Предварительный просмотр сайта , чтобы просмотреть свой контент, как он будет отображаться в реальном времени. 
 
 Щелкните значок  X  в правом верхнем углу окна, чтобы выйти из предварительного просмотра.
 Когда все будет готово, нажмите кнопку раскрывающегося меню  Edit Site  и выберите  Publish . 
 Во всплывающем окне просмотрите наши дополнительные условия, затем нажмите  Принять условия и опубликовать  для подтверждения.
 Вы сделали это! Ваш веб-сайт доступен по URL-адресу на вашей панели управления. При необходимости вы можете отменить публикацию своего веб-сайта позже. Ознакомьтесь с Управлением своим сайтом в Mailchimp для получения дополнительной информации о процессе отмены публикации.
 Следующие шаги 
 Ваш веб-сайт запущен и работает. Что теперь? Вот несколько способов максимально использовать эту функцию.
  Добавьте больше страниц  
 Развивайте свой веб-сайт с помощью нового содержания и дополнительных веб-страниц.Регулярно обновляя свой веб-сайт, вы расширяете аудиторию и поощряете повторные посещения. Чтобы узнать, как добавлять веб-страницы и управлять ими, ознакомьтесь с разделом «Управление веб-сайтом в Mailchimp».
  Добавить всплывающую форму регистрации  
 Всплывающая форма регистрации поможет вам связаться с посетителями вашего веб-сайта. Разработайте и настройте его в соответствии с вашим брендом, а также добавьте специальные предложения или скидки, чтобы помочь расширить свою аудиторию и повысить продажи. Чтобы узнать больше, ознакомьтесь с разделом «Добавить всплывающую форму регистрации на свой веб-сайт».
  Создать магазин  
 Добавьте интернет-магазин для продажи ваших товаров. Создание магазина в Mailchimp позволяет добавлять страницы магазина на существующий веб-сайт. Затем вы можете добавлять и продавать столько товаров, сколько захотите. Чтобы узнать больше, ознакомьтесь с разделом «Создание своего магазина Mailchimp».
  Назначение встреч  
 Добавьте инструменты планирования для развития вашего бизнеса. Если вы предлагаете профессиональные услуги, вы можете использовать Mailchimp Appointments для настройки деталей ваших услуг, включая цены и доступность.Клиенты смогут записаться к вам на прием на вашем сайте. Чтобы узнать больше, ознакомьтесь с разделом «Использовать встречи Mailchimp».
  Продвигайте свой веб-сайт  
 Продвигайте и делитесь своим новым веб-сайтом с помощью маркетинговых кампаний в Mailchimp. Разместите рекламу для своего сайта. Ссылка на ваш сайт из обычной рассылки по электронной почте. Вы также можете поделиться URL-адресом своего веб-сайта в социальных сетях.

ЭЛЕМЕНТ	НАИМЕНОВАНИЕ	ТИП ЭЛЕМЕНТА	ОПИСАНИЕ
Контейнер	Как, вероятно, сказал вам учитель английского в средней школе, абзац является основной единицей для организации текста.Когда вы используете более одного элемента абзаца в строке, браузер вставляет пробел между двумя абзацами - чуть больше, чем полная пустая строка.
, , , , ,	Заголовок	Контейнер	Элементы заголовка - хороший способ структурировать вашу страницу и выделить заголовки.Они отображают текст большими жирными буквами. Чем меньше число, тем крупнее текст, поэтому дает самый большой заголовок. К тому времени, когда вы дойдете до , заголовок уменьшится до того же размера, что и обычный текст, а , хотя и полужирный, на самом деле меньше обычного текста.
	Горизонтальная линия (или горизонтальная линия на языке HTML)	Автономный	Горизонтальная линия может помочь вам отделить один раздел вашей веб-страницы от другого .Линия автоматически соответствует ширине окна браузера. (Или, если вы поместите строку внутри другого элемента, например ячейки в таблице, она займет ширину своего контейнера.)
,	Неупорядоченный список, элемент списка	Контейнер	Эти элементы позволяют создавать базовые маркированные списки. Браузер автоматически помещает отдельные элементы списка в отдельные строки и делает отступ для каждого из них.Для быстрого изменения темпа вы можете заменить на , чтобы получить автоматически пронумерованный список вместо маркированного списка (ol означает «упорядоченный список»).

ЭЛЕМЕНТ	НАИМЕНОВАНИЕ	ТИП	ОПИСАНИЕ
Полужирный и курсив	Контейнер	Эти два элемента применяют стиль символов - жирный или курсивный текст.(Технически означает «текст другим голосом», а означает «стилистически смещенный текст», и есть способы изменить применяемое форматирование, как вы увидите в главе 3. Но в реальном мире почти все веб-разработчики ожидают, что означает курсив, а означает жирный шрифт.)
	Разрыв строки	Автономный	Иногда все, что вам нужно, - это текст, разделенный простыми переносами строки, а не отдельными абзацами.Благодаря этому последующие строки текста будут ближе друг к другу, чем при использовании абзаца.
	Изображение	Автономный	Чтобы отобразить изображение внутри веб-страницы, используйте этот элемент. Убедитесь, что вы указали атрибут `src` , чтобы указать имя файла изображения, которое вы хотите, чтобы браузер отображал.
	Якорь	Контейнер	Элемент привязки является отправной точкой для создания гиперссылок, позволяющих посетителям веб-сайта переходить с одной страницы на другую.Вы узнаете об этом незаменимом элементе в главе 6.

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

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

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

Как разработать веб страницу для мобильного & новости по созданию сайтов от ABCname

Как разработать веб-страницу для мобильных устройств

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

Макет веб-страницы для смартфонов

Советы по изображениям на смартфонах

Компания ABCname

Что нужно, чтобы создать веб-страницу

Способы создания web-страниц

Недостатки визуальных редакторов:

добавление новых страниц в «Нубексе»

Создание страницы первого уровня

Создание вложенной страницы

Видео: как добавить страницу на сайт

Создание шаблона страницы. Как спроектировать современный сайт

Лучшие страницы «О нас» для бизнеса: как создать страницу «О компании»?

Создание и просмотр веб-страницы на вашем компьютере

Создание и просмотр веб-страницы на вашем компьютере

Привет, мир!

Используйте расширение файла

Не используйте пробелы и специальные символы в имени файла

Решите, где на вашем компьютере вы сохраните файл

Создайте свою собственную веб-страницу

...

...

...

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

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

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

Примечание

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

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

Подсказка

United Popsicle Workers Union

Примечание

Подсказка

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

Подсказка

Примечание

Примечание

Примечание

Примечание

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

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

Примечание

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

Подсказка

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

Примечание

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

Примечание

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

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

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

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

6 простых шагов для создания базового веб-сайта

1. Определите цель вашего сайта

2. Выберите хостинговую компанию

3. Выберите конструктор сайтов

WordPress

Squarespace

Weebly

4. Обозначьте свои веб-страницы

5. Оптимизируйте свой веб-сайт

6. Настроить платежную систему (при необходимости)

Придерживайтесь основ

Создайте свой веб-сайт в Mailchimp

Создать сайт

Добавьте контент и создайте свой сайт

Редактировать доменное имя

Добавить отслеживание сайта

Изменить настройки URL, SEO и социальных сетей

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

Следующие шаги

Добавить комментарий Отменить ответ

`Примечание`

`Примечание`

`Примечание`

`Примечание`

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

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

`Примечание`

`Добавить комментарий Отменить ответ`