Как создать веб-страницу

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

Создание веб-страницы

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

Регистрация и размещение вашего домена

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

Советы по доменам

Авторитетная компания по регистрации доменов будет иметь:

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

Советы хостам

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

Допустимая пропускная способность
Какие меры безопасности предлагаются для предотвращения вторжений
Скорость загрузки страницы
Операционная система сервера
Есть ли панель управления в центральном месте

Выбор редактора

HTML-редакторы

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

HTML-редактор CoffeeCup
Блокнот . Зарекомендовавший себя как «один из самых простых пользовательских интерфейсов среди всех инструментов веб-разработки в Интернете», «Блокнот» прост и опрятен, но он не будет обнаруживать за вас никаких HTML-ошибок.
CoffeeCup : Этот относительно недорогой редактор HTML довольно мощный и имеет приятный интерфейс как для новичков, так и для экспертов. Он также включает в себя FTP, который упрощает «оживление» вашей страницы.
Adobe Dreamweaver CC : Вероятно, самый известный из всех редакторов, эта программа имеет множество расширенных функций для опытного дизайнера уровней, но она достаточно проста для освоения новичком.

WYSIWYG-редакторы

Если вы хотите создать свою страницу с минимальными усилиями, бесплатный конструктор веб-страниц может быть более быстрым, поскольку вся работа выполняется всего несколькими нажатиями клавиш. Вы можете выбрать один из бесплатных веб-редакторов и конструкторов веб-сайтов WYSIWYG (What You See Is What You Get), таких как:

KompoZer : С помощью этой простой программы вы концентрируетесь на дизайне и верстке, пока программа создает код. Программа похожа по внешнему виду на Dreamweaver.
Microsoft Expression Web 4 : еще одна мощная программа, которая когда-то была платным продуктом. Бесплатная версия имеет все функции платной версии, и хотя новичок может легко использовать ее, эксперт оценит ее мощные функции.
BlueGriffon : Благодаря хорошо продуманному и интуитивно понятному рабочему пространству эта программа чрезвычайно полезна для новичков, незнакомых с тегами HTML. Программное обеспечение известно своим превосходством и было названо лучшим бесплатным программным обеспечением 2012 года по версии PCMag.com.

Использование системы управления контентом

Системы управления контентом (CMS) являются альтернативой веб-редакторам и программам WYSIWYG. Эти системы становятся все более популярным методом запуска, создания и обслуживания веб-сайтов. Это в значительной степени связано с тремя популярными системами, WordPress , Drupal и Joomla , которые значительно упростили текущее обслуживание веб-сайта. Если вы ожидаете, что ваш сайт значительно вырастет с годами, создание его внутри CMS, вероятно, является хорошим способом, поскольку всеми элементами сайта, включая контент, изображения и мультимедиа, можно управлять из одного места.

Эти системы обеспечивают:

Широкий выбор шаблонов
Более простые способы установить больше «наворотов» с помощью плагинов.
Бесплатные уроки
Сообщество разработчиков, улучшающих продукт

Размещение ваших изображений

Вы можете добавить изображения на свой сайт одним из двух способов: загрузить изображения непосредственно на файловый сервер вашего хоста или разместить изображения на стороннем сайте.

Преимущества использования стороннего сайта включают в себя:

Стоимость : большинство фотохостингов бесплатны.
Пропускная способность : вы будете использовать меньше пропускной способности вашего собственного сайта.
Простота в использовании : опыт работы с HTML не требуется.

Однако недостатком является:

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

Собираем все вместе

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

Использование шаблона

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

Части страницы

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

<!ДОКТИП HTML>

<html>

<голова>

<мета-кодировка=»UTF-8″>

<title>Название документа</title>

</голова>

<тело>

Содержание документа……

</тело>

</html>

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

Форматирование вашего контента

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

<H1> следует использовать только один раз на странице, и его следует зарезервировать в качестве заголовка над наиболее важным содержимым страницы. Остальные теги <H> следует использовать в порядке убывания; <H2> важнее, чем <H3> и так далее. Редко можно использовать все шесть тегов <H> на странице.
Тег открытия/закрытия абзаца <p></p> используется вокруг каждого абзаца текста. Вы можете использовать <br/>, если вам нужен неразрывный пробел между абзацами.
Если нужно выделить слово или несколько слов, вы можете использовать тег <b></b>, чтобы выделить слово жирным шрифтом, или тег <em></em>, чтобы выделить его курсивом.
При цитировании информации из другого источника обозначайте ее, помещая содержимое между открывающими/закрывающими тегами <blockquote>.

Поскольку HTML используется для форматирования страницы, полагайтесь на CSS для управления внешним видом.

Работа с изображениями

Кодирование изображения

Если вы хотите добавить изображение на свою страницу, вставьте тег <img> на страницу, где вы хотите, чтобы изображение отображалось.

Вот что контролирует каждый из атрибутов.

Высота/ширина: этот атрибут измеряется в пикселях и определяет точный размер вашего изображения. Все изображения должны включать атрибуты высоты и ширины, потому что они сообщают браузеру количество места, которое нужно зарезервировать для изображения. Когда этот атрибут не включен, это замедляет время загрузки страницы.
Hspace/vspace: Хотя этот атрибут обеспечивает приемлемый способ управления горизонтальным и вертикальным пространством вокруг изображения, этот интервал чаще всего контролируется таблицей стилей.
Граница: это еще одна деталь, обычно управляемая таблицей стилей. В приведенном выше примере кодирования изображение будет иметь границу в 1 пиксель вокруг него.
Alt: это текст, описывающий изображение; тег alt всегда должен быть включен для доступности.

Использование правильного расширения

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

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

Добавление интерактивности

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

Электронное письмо

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

Отправьте мне <a href=mailto:someone@example.com?Subject=»Hello»>электронное письмо</a>

Когда пользователь нажимает на ссылку, он открывает свою программу электронной почты и помещает слово «Привет» в строку темы. Если вам ничего не нужно в строке темы, удалите ?Subject=»Hello» из тега.

Форумы, блоги и чаты

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

Запуск сайта

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

Если вы использовали программу-редактор со встроенным FTP , вам просто нужно перейти в меню и нажать «Опубликовать» или «Загрузить». Это загрузит все файлы, которые вы выбрали на удаленном сервере.

Если в вашей программе нет FTP, вам необходимо:

Скачайте FTP-программу; Обычно используется FileZilla .
Введите логин и пароль для удаленного сервера; Хостинговая компания предоставит их.
Как только вы подключитесь к удаленному серверу, переместите свои папки и файлы в область, указанную хостинговой компанией.

Как привлечь внимание к вашему сайту

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