Создание сайта на wordpress с нуля для новичка
Создание сайта на wordpress с нуля для новичка, для начинающего сайтостроителя.
WordPress что это?
Содержание статьи :
WordPress — это свободное программное обеспечение, которое поможет вам создать красивый сайт, блог или веб-приложение. Еще можно сказать что WordPress это CMS(Content Management System или Система управления контентом).
Пошаговое создание сайта на WordPress на локальном компьютере.
- Скачиваем программное обеспечение. Скачивать нужно только с официального сайта WordPress. Вот здесь: ru.wordpress.org
Должны получить .zip архив с названием типа: «wordpress-5.1.1-ru_RU.zip» - Нам нужен локальный сервер, если Вы его уже установили, то пропускайте данный шаг. Я предпочитаю локальный сервер «Open Server». Это мультизадачное программное обеспечение для Windows. В Open Server есть всё что нужно для комфортного локального сервера. Здесь есть множество инструментов для разработчика и обычного пользователя. Его можно скачать вот здесь, ospanel.io/download. Наберитесь терпения, скачивание займет достаточно долгое время.
Так же есть другие локальные серверы, например XAMPP, возможно именно Вам он и подойдет. Прост в работе, без дополнительного софта. Скачать его можно здесь, — apachefriends.org
Скачиваем и устанавливаем, установщики достаточно простые. Думаю можно разобраться самостоятельно. Единственное что XAMPP он на английском, но в нем очень мало настроек, так что думаю это не будет проблемой.
Локальный сервер, устанавливаем на главный диск :C
Разберем как создать сайт на WordPress на примере локального сервера Open Server.Как работать с XAMPP?
На XAMPP, принцип такой же только сайт будет хранится по такому пути, — C:\xampp\htdocs
Что бы попасть на сайт нужно в браузере перейти вот по такой ссылке, — http://localhost/
А что бы попасть в PhpMyAdmin (приложение для работы с базой данных MySQL), — http://localhost/phpmyadmin/
В остальном принцип работы такой же как и с Open Server. - Теперь нам нужно скачанный .zip архив, распаковать. Открываем папку(wordpress-5.1.1-ru_RU) и берем из неё папку «wordpress». Нам нужно перенести эту папку в директорию, — C:\OSPanel\domains. Что бы в результате, у нас получился вот такой путь, — C:\OSPanel\domains\wordpress
Как запустить Open Server?
- Запускаем Open Server. в треи должен появится вот такой красный флаг.
Жмем на этот флаг, должно появится вот такое меню:
Кликаем на зеленый флаг «Запустить». Если всё удачно, то через несколько секунд, в треи, будет зеленый флаг. Если флаг не стал зеленым, значит нужно открыть настройки Open Server. Во вкладке «Модули» и вкладке «Сервер» нужно сделать вот такие настройки.Как подготовить базу данных для WordPress?
- Теперь нам нужно подготовить Базу данных для нашего WordPress. Для этого кликаем по зеленому флагу пункт меню, — «Дополнительно», а в нем жмем «PhpMyAdmin». Откроется встроенный в Open Server браузер, и в нем будет путь http://127. 0.0.1/openserver/phpmyadmin/index.php.
Вводим данные: Пользователь будет, — root, а Пароль оставляем пустым, жмем вперёд. В открывшемся окне кликаем на «Создать БД».
Пишем название для нашей базы данных( это такой комплект таблиц, где будут хранится все данные сайт на WordPress). И жмем «Создать».
Все наша база данных, — готова к использованию. - Настраиваем сам WordPress. В Open Server жмем, — «Мои сайты», ищем наш сайт «wordpress». И в браузере откроется настройка WP.
Жмем «Вперед!». Попадаем на такое окно, заполняем поля. Поле «Пароль», оставляем пустым! Нажимаем «Отправить».Появится вот такой текст, это значит, мы все сделали верно. Кликаем «Запустить установку».
Теперь нужно заполнить поля, эти данные нужны для того что бы попасть в админ панель WordPress. Я заполнил таким образом. Вы можете заполнить на свой лад, но если забудете пароль, то лучше указать настоящий e-mail.Если все хорошо, то мы в результате увидим такое окно, кликаем «Войти».
Вводим логин и пароль, попадаем в админ панель WordPress.
В принципе WordPress установлен. Если мы клацнем по домику вот тут, — то мы попадем на наш созданный сайт на WordPress. Дальше мы можем установить другие темы, что бы наш сайт красиво выглядел. И дополнить функциональностью наш сайт, плагинами.
Установка темы на WordPress?
Тема для wordpress, — это внешний вид сайта, и дополнительные возможности, другими словами, можно сказать что тема, это шаблон на котором будет работать Ваш сайт.
Возможно у Вас уже есть идея сайта, и цель, Вам будет легко определится с внешним видом для сайта. По умолчанию в wordpress темы очень простые. Но WordPress даёт очень много бесплатных тем на любую тематику. Тут лишь одно указание качайте официальные темы с официальных источников, для Вашего сайта.
- Переходим в админ панель WordPress по адресу, — http://wordpress/wp-admin/
- Выбираем меню в правой колонке, — «Внешний вид» — «Темы». Здесь будут все установленные темы, которые мы можем использовать прямо сейчас.
- Добавим новую тему. Жмем кнопку, — «Добавить новую»
Здесь может показаться что тем мало, но Вы не теряйтесь по кликайте по заголовкам, их тут тысячи. Ну или воспользуйтесь поиском.
Кликайте описание и просмотр, знакомьтесь по ближе с шаблоном для сайта, если определились, то кликайте, — «Установить».
Затем жмём, — «Активировать». И все шаблон примениться для нашего сайта. И дальше переходим на наш сайт http://wordpress/
Так же есть возможность настроить внешний вид сайта, двумя способами.
Как установить плагины на WordPress?
Плагины, — это дополнительное программное обеспечение для Вашего сайта. Плагины дают огромнейшие возможности для сайта. Думаю что закроют все задачи для сайта в общем и в частности. Как правило ставят плагины:
- Безопасность, анти-спам.
- Продвижение SEO, блок для сбора e-mail адресов.
- Поведенческий фактор типа, — комментарии, оценки, кнопки для соц. сетей., гео. карты, опросники.
- Внешний вид сайта, типа галереи фото, меню, сайдбары, дополнительные блоки информации.
- Оптимизация сайта, скорость загрузки, скорость работы.
- Удобство для работы со стороны админ панели. Редакторы кода, шорт-коды и пр.
Что бы установить плагин, нужно перейти в панель администратора, слево в меню, пункт, «Плагины» — «Добавить новый».
Можете ознакомится с плагином нажав кнопку, — «Детали». Что бы установить плагин, достаточно нажать кнопку, — «Установить».
Осторожно!
- Нужно быть осторожным с выбором плагинов, нужно обязательно проверить, совместим ли данный плагин с Вашей версией WordPress.
- Плагины могут нагружать сайт, в результате чего сайт может работать медленнее.
- Взломщики всегда будут пытаться сломать сайт, через дырявые плагины.
Постарайтесь ограничить устанавливаемое количество плагинов.
Если Вам нужно установить WordPress на хостинг, или перенести с локального компьютера Ваш сайт WordPress на сервер к хостинг провайдеру. Можете ознакомится с моей статьёй «WordPress установка на хостинг простыми словами».
Я постарался описать тему, — «Создание сайта на WordPress с нуля для новичка». Надеюсь всё было понятно. Если у Вас что-то не получается, пишите, чем смогу помогу.
Как создать локальный сервер на компьютере за 5 минут
Как создать локальный сервер на компьютере? Подобный вопрос, прежде всего, волнует тех, кто решил создать собственный сайт и дабы его протестировать решил установить локальный сервер. Но, что всё-таки нужно для установки и зачем, вообще, это нужно?
Локальный сервер представляет собой программу, позволяющую осуществлять разработку сайта прямо у себя на компьютере.
От хостинга он отличается тем, что сайт на локальном сервере доступен только там, где он непосредственно установлен.
Такая работа проводится с целью проверки работоспособности будущего сайта, чтобы в последующем на хостинге не возникало каких-либо непредвиденных неполадок.
Существует несколько программ, позволяющих установить локальный сервер.
Подобные сервера содержат все необходимые файлы для работы – Apache, PHP, MySQL, Perl и т. д., что значит, нужно будет только загрузить непосредственно сам пакет.
Затем заняться установкой, после чего все должно корректно работать, что, например, нельзя сказать о серверах в сети, где постоянно что-то не работает. Поэтому это, безусловно, главное удобство локального сервера.
Как создать локальный сервер на компьютере в denwer
Шаг 1. Загрузка локального сервераДля того чтобы создать локальный сервер, прежде всего, нужно скачать набор необходимых файлов. Для этого, нужно перейти на сайт самого «Денвера» (//www.denwer.ru/). Выглядит он следующим образом:
Затем нажимаем на кнопку «СКАЧАТЬ». Нам предложат выбрать версию одну из двух версий PHP, выбираем самую новую. Затем, откроется новое окно, где нужно будет указать свои контактные данные – имя, фамилию и почту. Далее, на email придёт ссылка на скачивание «Денвера».
Ждём несколько минут и скачиваем файлы программы к себе на компьютер, по ссылке которую получили на указанный ранее email адрес.
После завершения загрузки, запускаем инсталлятор. Нажимаем да и начнётся распаковка. Дальше просто следуем инструкциям.
Однако, при нажатии клавиши Enter можно столкнуться или не столкнуться с ошибкой «Отказано в доступе». Но, несмотря на это все равно жмём Enter и продолжаем установку.
В качестве места установки можно использовать не системный диск C, дабы при возможной установки другой версий операционной системы все данные сохранились.
В процессе самой установки инсталлятор предложит выбрать букву Z, как место установки.
Выглядят они вот так:
Браузер в новом окне пишет, что «Денвер» установлен, а также приводит список возможных ошибок, которые могут возникнуть при запуске и работе с локальным сервером.
Например, это блокировка вирусом NOD32 в Windows XP. Другая же проблема наиболее распространена и связана с конфликтом в программе Skype. По умолчанию, обе программы занимают 80 порт, поэтому, если программа не будет работать, то нужно отключить использование порта в Skype. Для этого, заходим в инструменты > проблемы с соединением> убираем галочку с использования порта 80 и 443 > затем сохраним и проблема должна решиться.
Для того чтобы убедиться, что все работает нужно вбить адресную строку localhost. Но некоторые браузеры используют данную строку как поиск. Поэтому в первый раз лучше вбить полный адрес – //localhost. Если все сработало, то должна отобразиться вот такая страница:
На этом установка локального сервера завершена, остаётся только создать на нём сайт и довести его до совершенства, а затем перенести на хостинг.
Узнав о том, как создать сервер локальной сети, может возникнуть вполне логичный вопрос: «А что дальше?». Чтобы на него ответить нужно, понять, зачем, вообще, человеку нужен локальный сервер. Если он хочет просто попрактиковаться в создании сайтов и поднять уровень своей квалификации, то ему стоит заняться изучением языков гипертекстовой разметки и таблицы стилей.
Если же создание локального сервера ему было нужно, чтобы протестировать существующий сайт перед его непосредственной загрузкой в сеть, то тогда следует заняться в первую очередь его установкой на локальный сервер. Спросите: «Как это сделать?» Об этом чуть ниже.
Посадка сайта на локальный серверЛокальный сервер на компьютере выполняет те же функции, что и сайт в сети. Единственное отличие между ними – это доступность. Ведь локальный сервер, установленный на компьютере, будет доступен только вам, а сайт на хостинге будут видеть все. Поэтому, чтобы избежать негативной критики в свой адрес от злых пользователей сайта, устранять все ошибки следует именно локально.
Сайт представляет собой набор веб-страниц, которые написаны на языке HTML, CSS и Javascript. Эти инструменты разработки можно использовать без помощи локального сервера и поэтому именно с них, и начинается разработка сайта. PHP, в свою очередь, можно использовать на сервере (любом), он необходим, чтобы сайт был динамическим.
То есть, если бы потребовалось изменить информацию на всех страницах сайта, то не нужно было лезть в каждый файл и что-то менять.
Достаточно было бы это сделать в одном. Однако на этапе начала разработки сайт является статическим, но это неважно, потому как там нужно создать только те страницы, который будут отличаться друг от друга. Обычно это главная, подраздел и страница со статьёй. В последующем можно добавить форму обратной связи, страницу регистрации и форум.
Однако гораздо более удобно будет создавать сайт сразу на локальном сервере, дабы использовать все функции на максимум с самого начала. Для этого переходим в Мой компьютер и видим диск, который создал «Денвер».
Заходим в диск, переходим в папку home и создаём новую папку и как название пишем адрес сайта. Далее, внутри нужно создать папку www. И уже непосредственно в ней создаём текстовый файл с расширение html (например, index.html). Чтобы проверить корректно ли он отображается, нажимаем на него правой кнопкой мыши и выбираем открыть с помощью блокнота (либо любого другого редактора – Sublime text, Notepad и т. д.). Внутри файла напишем стандартную программу «Hello world!». Выглядит это так:
Затем сохраняем и перезапускаем «Денвер», нажимая на ярлык Restart Denwer, чтобы все сделанные изменения вступили в силу. Однако, если мы сейчас попробуем сейчас перейти на наш сайт, который называется так же как и папка, созданная в диске «Денвер», то мы ничего не увидим.
Файл хостов позволяет идентифицировать определённые адреса сайтов с определённым ip-адресом. Например, нашей локальной машины – 127.0.0.1 www.localhost. Когда мы набираем любой сайт в браузерной строке, то первым делом проверяет этот сайт и переходит по адресу, находящемуся слева. Если переход на наш локальный сайт не работает, то это значит, что его адрес не прописан в файле hosts. Часто причиной этого является антивирус, который блокирует доступ.
Для решения этой проблемы нужно зайти в антивирус и выбрать раздел – параметры. Там нужно найти категорию «угрозы и исключения» > жмём кнопку «настройка» и выбираем нашу папку, которую мы создали в «Денвер». Далее, сохраняем все внесённые изменения и жмём ok.
Конечно, такая проблема может возникнуть не у всех. Обычно она возникает из-за особенностей какого-то конкретного антивируса. Теперь после перехода на локальный сайт, на экране должна появиться надпись: «Hello world!».
Если же мы захотим, чтобы наш сайт работал по адресу localhost, то нужно просто перейти в папку localhost на «Денвере», зайти в www и также создать файл html.
Часто у пользователей «Денвера» возникает проблема по поводу отправки писем. Дело в том, что «Денвер» реально не отправляет писем, он его только формирует и хранит в папке:
tmp > !sendmail. В той папке в виде обычных текстовых фалов будут лежать письма. Так что, если они отправляются на локальном сервере, то и на реальном проблем не возникнет.
Таким образом, можно сказать, что локальный сервер – это отличное площадка для разработки сайтов, которая подойдёт как новичкам, так и профессионалам. Потому как установка не требует каких-то особых знаний и навыков, достаточно быть просто знакомым с компьютером и уметь использовать прикладные программы.
Плюс ко всему, следует отметить, что локальный сервер нельзя увидеть из интернета. Единственное, что можно сделать – это открыть доступ для своей домашней сети, при условии, что все компьютеры находятся у вас дома и используют общее подключение к сети. Но, обычно такие вопросы не волнуют рядовых пользователей.
Гораздо более важные для них моменты связаны непосредственно с возможными затратами по содержанию сайта. Например, оплата за хостинг и домен. Однако волноваться по этому поводу явно не стоит, ведь приобрести домен стоит около тысячи в год, за столько же можно найти и хостинг. Разве это такие большие затраты, на которые нельзя пойти, чтобы сайт стал доступен массам и каждый увидел то, что создавалась не один месяц, а то и год.
Если же такие аргументы все равно не убеждают человека, то на первых порах можно использовать бесплатный хостинг, но он ограничивает пользователя в действиях. Например, нельзя продавать ни в каком виде рекламу с сайта, а как известно, это основной источник дохода веб-ресурса. Так что, когда администратор сайта увидит, что посетители все пребывают, требуют хлеба и зрелищ, а он не получает за свой труд ровным счётом ничего, то переход на платный хостинг произойдёт в один момент.
Пожалуй, прочитав эту статью, каждый пользователь, узнал для себя что-то новое, и теперь если его спросят: «Как создать локальный сервер?», он с уверенным видом расскажет все, что выяснил здесь. Чтоб не пропустить мою следующую, не менее интересную статью, настоятельно рекомендую подписаться на rss ленту моего блога.
Ну, как вам статья? Понравилась? Может, вы хотите её дополнить или попросить меня написать что-то, стоящее в следующий раз? Не стесняйтесь, пишите в своих комментариях об этом.
На этой ноте я завершаю эту статью, и пользуясь, случаем хочу всех поздравить с наступающим Новым 2017 годом! Пусть грядущий год будет лучше прежнего! Здоровья и удачи!
Бала ли вам статья полезной? Да, спасибо31Нет, извините |
Локальный сервер Denwer — как создать сайт на компьютере — установка, настройка и удаление Денвера
Обновлено 16 мая 2021- Где скачать Denwer, как его установить и запустить?
- Проверка работоспособности локального сервера
- Настройка и установка Joomla или WordPress на Денвер
- Создание базы данных и пользователя средствами Denwer
- Перенос сайта на хостинг
- Как удалить Денвер с компьютера
Это очередная статья из рубрики Инструменты вебмастера, в которой я хочу поговорить о работе с сайтом на бесплатной сборке под названием Denwer, которую можно свободно скачать с ресурса разработчика. Сначала расскажу о том, что же такое локальный сервер и зачем нам с ним работать. Попросту говоря, его вы можете установить и сконфигурировать у себя на компьютере, получив бесплатный аналог хостинга (читайте о том, что такое хостинг и домены здесь).
Для работы на любом движке сайта вам, в этом случае, не придется покупать хостинг и даже не обязательно иметь доступ в интернет. Возможности, которые предоставляет вам Денвер, практически ничем не отличаются от возможностей удаленного хоста, да и состоять он будет из тех же самых компонентов и иметь те же возможности. Он уже содержит в себе базы данных MySQL, которой можно будет управлять через PhpMyAdmin читайте подробнее об этом скрипте), сервер Apache (читайте что такое server), имеет поддержку PHP и многое другое.
Где скачать Denwer, как его установить и запустить?
Можно скачать по отдельности все описанные выше компоненты локального сервера и, поставив их у себя на компьютере, правильно сконфигурировать, но ведь не все способны это сделать. И даже те, кто понимает что к чему, могут испытать массу трудностей при установке и особенно при его конфигурировании.
Поэтому, для упрощения нам с вами жизни, были придуманы и созданы разнообразные установочные пакеты (сборки), позволяющие при минимальных затраченных усилиях скачать полностью рабочий и сконфигурированный комплекс.
Вам только останется скачать подходящую сборку и установить на него движок вашего проекта (Joomla, WordPress и т.п.), а затем начинать работать на нем, точно так же, как вы бы делали при нахождении файлов движка на физическом хосте. Кстати, как вариант и альтернативу данному решению, можно рассматривать свободный от платы хостинг с поддержкой MySQL и PHP, т.е. способного работать с Joomla и WordPress. Но в этой статье мы будем говорить именно за localhost.
Итак, что же нам предлагают разработчики таких бесплатных установочных пакетов? Давайте я перечислю ссылки на страницы ресурсов, где можно их будет скачать, а потом расскажу в подробностях именно про установку и настройку одного из них, которого я выбрал в качестве фаворита.
Это лично мой выбор, а вы можете пользоваться тем пакетом, который больше понравится вам. Благо, что работа с ними довольно однотипна и, поняв как работать с одной сборкой (сегодня мы будем говорить исключительно о Denwer), вы без труда разберетесь и с любой другой.
Где можно бесплатно скачать сборки локального сервера:
- Денвер — скачать бесплатно
- Xampp — скачать
- VertrigoServ — скачать
- Wamp — скачать
Пройдя по ссылке вы должны будете зарегистрироваться в предложенной форме, после чего к вам придет письмо с ссылкой на скачивание дистрибутива Denwer.
Запускаете скачанный файл с расширением exe, соглашаетесь установить пакет, после чего начинается его распаковка, а затем откроется также окно браузера с описанием установки, которое можно сразу закрыть, и еще появляется черное досовское окно с мастером установки:
Следуя указаниям мастера для продолжения установки нажимаем «Enter». В следующем окне нам нужно указать, в какую папку на нашем компьютере мы будем устанавливать сервер. Можно выбрать, например, C:\server
.
Нажимаете «Enter», на вопрос, точно ли вы хотите установить Денвер именно в эту директорию, вы отвечаете установкой «y» (игрек) и опять жмете «Enter». Далее нас информируют, что сейчас будет создан отдельный виртуальный диск, который необходим для функционирования всех компонентов локального сервера.
Просто жмем «Enter», а в следующем окне выбираем букву для виртуального диска. Эта буква, естественно, не должна в данный момент использоваться вашей системой (т.е. диск, латинскую букву «с», точно не надо выбирать).
Лучше выбрать что-нибудь из последних букв латинского алфавита, например, Z. Если окажется, что эта буква уже используется для обозначения какого-либо диска в вашей операционной системе Windows, то вы увидите сообщение о невозможности создать такой диск.
В этом случае, вам нужно будет нажать «Enter» и повторить шаг с вводом имени директории установки, опять нажать «Enter» и ввести уже другую букву. Какие именно буквы для обозначения дисков в вашем компьютере уже заняты, вы можете посмотреть в «Мой компьютер».
В случае, если выбранная вами буква не занята, вы увидите сообщение об успешном создании виртуального диска.
Нажимаете «Enter», в результате чего начнется копирование файлов этой сборки в указанную вами ранее папку компьютера. Далее вам предложат выбрать вариант загрузки, на что вы отвечаете вписыванием единицы и нажатием «Enter». Вас также спросят, создавать ли ярлыки для запуска, остановки или перезагрузки на рабочем столе, на что вы ответите «y».
С помощью этих ярлыков вы сможете запустить или остановить сервер. Мастер установки после этого закроется, а откроется окно браузера со страницей описания последующих шагов работы со сборкой Denwer.
Проверка работоспособности локального сервера
Далее вы переходите на рабочий стол и запускаете Денвер, щелкнув по ярлыку «Start». При этом на короткое время откроется досовское окно говорящее о запуске сервера, а затем в трее (область в правой стороне панели задач Windows, рядом с часами) появятся иконки в виде перышка и черной шляпы, говорящие о том, что он запущен.
Теперь набираете в адресной строке вашего браузера localhost
, в результате чего попадете на страницу с надписью «Ура, заработало». Это означает, что сборка удачно установилась на ваш компьютер с Windows. Прокрутив эту страничку вниз, вы увидите ссылки для проверки ее работоспособности:
Если в результате щелчков по этим ссылкам вы увидите страницы с различными сообщениями, то значит все составляющие Denwer работают правильно. Последняя ссылка в этой табличке позволит вам проверить работоспособность отправки почты.
Вы переходите по этой ссылке, затем в открывшемся окне вводите в поле «Текст» какой-нибудь текст (лучше на русском языке — проверить, что с кодировкой будет все в порядке) и нажимаете на кнопку «Послать через mail». Если все сработало правильно, то вы получите сообщение вида: OK, функция mail () сработала корректно. Но нужно так же проверить, что письмо действительно дошло.
Для этого нужно зайти на наш виртуальный диск (вспоминайте букву, которую указали при установке этой сборки) и пройти по следующему пути:
Z:\tmp\!sendmail\
Кстати, можно заходить и не на виртуальный диск, а на реальный, где у вас установлен локальный сервер (в моем случае это диск С) по тому же пути:
С:\tmp\!sendmail\
Если с отправкой почты у вас все в порядке, то в этой папке вы должны будете обнаружить посланное вами письмо. Открыв его, вы можете проверить правильность кодировки русского языка.
Настройка и установка Joomla или WordPress на Денвер
Для начала нужно будет зайти в папку, куда вы установили сборку (у меня это c:\server\
) и пройти по следующему пути:
c:\server\home\localhost\www\
В этой директории WWW вы должны создать каталог, в который в последствии нужно будет загрузить файлы движка (Joomla, WordPress и т.п.). Название папки придумываете сами, например:
c:\server\home\localhost\www\Proba\
После создания папки перезапустите локальный хост с помощью ярлыка «Restart Denwer» на рабочем столе (если он еще не был запущен, то запустите его). Для проверки его работоспособности введите в адресной строке вашего браузера:
http://localhost/Proba/
Если откроется страница с заголовком «http://localhost/Proba/», то значит все в порядке. Если никакого окна не откроется, то попробуйте еще раз перезагрузить Denwer.
Теперь вам нужно установить движок (Joomla, WordPress и т. п.) точно таким же способом, как вы делали это для реального хостинга (установка Joomla описана тут (в деталях и картинках). Как установить форум SMF я писал здесь, а установка WordPress освещена довольно таки подробно по приведенной ссылке.
Т.е. нужно скопировать файлы движка в созданную на вашем компьютере (он выступает в роли локального хостинга) папку. В моем случае это папка:
c:\server\home\localhost\www\Proba\
От установки движка на реальный хост (что это такое?) этот процесс будет отличаться лишь тем, что для копирования файлов нет нужды использовать FTP-менеджер — вполне сгодится и обычный проводник, ну, или файловый менеджер, на вроде описанного по ссылке Тотал Коммандера.
После того, как вы скопируете файлы Джумлы или Вордпресса в папку Денвера, вам нужно для установки сайта или блога набрать в адресной строке браузера:
http://localhost/Proba/
В результате чего откроется окно мастера установки того или иного движка. Дальше вы действуете по тому же сценарию, что и при обычной установке на реальный хостинг, с тем лишь исключением, что вы создаете базу данных и пользователя не через cPanel, как описано в статье про установку Joomla (см. ссылку выше), а способом описанным ниже.
Создание базы данных и пользователя средствами Denwer
Для того, чтобы попасть в программу phpMyAdmin, входящую в комплект сборки локального сервера, нужно набрать в адресной строке вашего браузера следующий Урл:
http://localhost/tools/
В открывшемся окне щелкаете по ссылке под названием «phpmyadmin», в результате чего откроется главная страница этой программы. На ней, в области «Создать новую БД», вы вводите желаемое имя базы данных (для простоты ее можно назвать также как и каталог для сайта в папке localhost, т.е. «Proba», в моем случае) и нажимаете кнопку «Создать».
Теперь возвращаемся на главную страницу phpMyAdmin, щелкнув по иконке домика в левой колонке окна программы. Находите в области « MySQL» ссылку «Привилегии» и щелкаете по ней.
На открывшейся странице phpMyAdmin, в центре, вы должны найти пункт «Добавить нового пользователя» и щелкнуть по нему.
В области «Имя пользователя» вводим желаемое имя (я для простоты использую опять «Proba»), в области «Хост» вводим localhost
, в областях «Пароль» и «Подтверждение» вводим два раза какой-нибудь очень сложный пароль.
В области «Глобальные привилегии» жмете по надписи «Отметить все», чтобы у создаваемого пользователя баз данных были максимальные права.
Все, база данных и пользователь на Денвере созданы. Теперь вы можете использовать эти данные при установке Joomla, WordPress и др., которая будет идти тем же чередом, что и при установке на реальном хостинге. По завершении этого процесса ваш ресурс будет доступен по адресу:
http://localhost/Proba/
Работать с Joomla или WordPress вы сможете обычным образом, но при этом существенно упрощается и ускоряется работа по редактированию файлов движка, установке и удалению различных расширений, а также появляется возможность работать над своим проектом даже там, где нет доступа в интернет.
Перенос сайта на хостинг
После окончания работы над проектом вы должны перенести сайт с Denwer на хостинг для того, чтобы он стал доступен посетителям из интернета. Делается это точно так же, как если бы вы просто переезжали с одного хостинга на другой или же восстанавливали свой сайт из резервной копии (тут я писал про создание и восстановление из бэкапа).
Для этого вам нужно будет с помощью программы FileZilla (о которой я писал здесь) переместить все файлы из папки локального сервера (в моем случае это папка «Proba») в корневую директорию удаленного хоста (обычно это либо PUBLIC_HTML, либо HTDOCS).
А затем открыть на редактирование конфигурационный файл вашего движка и изменить параметры абсолютного пути к файлам и папкам этого движка, а также имя базы данных, пользователя и пароль, на те, что вы зададите при создании новой базы данных на хостинге. Все это подробно описано в статье про резервное копирование и перенос сайта, ссылку на которую вы найдете поднявшись на пару абзацев повыше).
Как удалить Денвер с компьютера
Довольно часто возникает вопрос, как удалить эту сборку со своего компьютера. Основная загвоздка удаления состоит в отключении созданного при установке виртуального диска. Но обо всем по порядку. Сначала вам нужно будет, конечно же, остановить работу локального сервера с помощью соответствующего ярлычка на рабочем столе.
Затем удалить виртуальный диск, который был создан при установке. Вспомните, какую букву вы присвоили этому виртуальному диску и перейдите в Windows по следующему пути «Пуск» — «Выполнить» (можно вместо этого нажать сочетание клавиш Win+R), введите в открывшемся окне команду:
subst z: /d
Вместо буквы виртуального диска Z вам нужно будет ввести свой вариант (диск Z предлагаетcz в качестве буквы для виртуального диска по умолчанию). Ну, и для окончательного удаления сборки Denwer с вашего компьютера будет достаточно удалить каталог WebServers (по умолчанию это папка «C: \WebServers») и убрать три ярлычка с рабочего стола вашей операционной системы Windows. Все, можно считать, что нам удалось удалить его малой кровью.
Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru
Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru
Как создать сайт на виртуальном хостинге
Если Вы хотите сделать сайт и уже приобрели домен, то необходимо сделать несколько шагов, чтобы сайт заработал: настроить NS серверы домена и создать сайт на виртуальном хостинге. Расскажем об этом по порядку. Если ещё не приобрели домен, то рекомендуем ознакомиться со статьёй «Как купить домен?».Регистрация домена — это долгий процесс, который может занять до 48 часов. Изменить NS записи домена можно будет только после завершения процесса регистрации.
Для выполнения действий из этой статьи важно использовать персональный компьютер. Ни мобильный телефон, ни планшет не позволят вам видеть весь раздел управления хостингом, поэтому настоятельно рекомендуем использовать только персональный компьютер (или ноутбук).
Настройка NS серверов домена
Если планируете размещать домен на наших NS серврах, то необходимо убедиться в правильности настроек. Войдите в личный кабинет управления хостингом: my.mousedc.ru. В верхнем меню найдите пункт «Домены». Кликните на него: Откроется список доменов. Найдите нужный домен в списке и выберите его, кликнув по нему один раз левой кнопкой мышки. Откроется форма для изменения настроек домена. В левом меню кликните на кнопку «Сервера имён (NS)»: Проверьте, чтобы в первые две строчки содержали адреса NS серверов виртуального хостинга MouseDC.ru:- ns1.vhost.mousedc.ru
- ns2.vhost.mousedc.ru
Создание сайта на виртуальном хостинге
Если Вы ещё ни разу не заказывали услугу виртуального хостинга, то рекомендуем ознакомиться со статьёй «Как заказать виртуальный хостинг». Далее расскажем о том, как создать сайт внутри уже существующей услуги виртуального хостинга.В верхнем меню панели администрирования найдите пункт «Хостинг». Кликните на него: Если виртуальный хостинг ещё не заказан, то список будет пуст. В этом случае рекомендуем ознакомиться со статьёй «Как заказать виртуальный хостинг».
Если виртуальный хостинг уже заказан, то необходимо перейти в его панель управления. Делается это несколькими способами. Первый — кликнуть на кнопку вызова выпадающего меню в списке, а затем кликнуть на кнопку «Перейти в панель»: Либо можно кликнуть на название хостинга в списке, и в открывшемся окне изменения настроек найти кнопку «Меню». Оно вызовет то же самое выпадающее меню, в котором нужно кликнуть на пункт «Перейти в панель»: Произойдёт переход в панель управления виртуальным хостингом. Через этот раздел можно загрузить файлы, настроить базу данных, настроить почтовые ящики и многое другое. Наша задача — загрузить файлы на сервер: дамп базы данных и архив с файлами сайта. Для этого в боковом меню найдите пункт «WWW» и подпункт «WWW-домены». Кликните на него: Откроется список сайтов, которые есть на хостинге (он будет пустым, если сайтов ещё нет). Необходимо создать сайт. Для этого кликните на кнопку «Создать» в верхнем меню: Откроется форма создания сайта. В этой форме самая главная (она же первая по списку) графа — это «Имя». Введите в неё доменное имя сайта: Вводите доменное имя без «www»! После ввода имени сайта остальные обязательные графы заполнятся автоматически.
После внесения изменений в форму нажмите на кнопку «Ок» под формой. Сайт будет создан и можно будет перейти по купленному домену, чтобы убедиться в его работоспособности.
В графе «Псевдонимы» автоматически появляется домен с приставкой «www». На текущий момент эта приставка является атавизмом. Поэтому если не хотите, чтобы сайт открывался по адресу с приставкой «www», то оставьте поле «Псевдонимы» пустым.
Обратите внимание, что если сайт доступен одновременно по домену и его псевдониму с «www», то это ухудшает его ранжирование в поисковых сетях, откуда приходит почти 80% аудитории сайтов. Потому что поисковые роботы воспринимают эти два адреса как два разных сайта, которые воруют контент друг у друга. Поэтому обязательно сделайте перенаправление с одной версии на другу. А если сайт новый, то сразу определитесь, какую версию (с «www» или без) будете использовать.
На одном виртуальном хостинге можно разместить одновременно до 3 сайтов. Но ресурсы используются сайтами совместно: если поставить три проекта на один виртуальный хостинг, то они будут соперничать за процессор и оперативную память, которые выделяются на одну услугу виртуального хостинга. Если три сайта — это статичные HTML файлы (без PHP кода и соединения с базой данных), то сайты будут работать без проблем. А если это будет три сайта на ресурсоёмкой CMS (к примеру, «1С-Битрикс» старшей редакции «Бизнес» для создания огромных высоконагруженных интернет магазинов), то сайты будут притормаживать. В таком случае будет лучше разделить сайты на три отдельных услуги виртуального хостинга.
Напишите нам в техподдержку, через личный кабинет, если появятся затруднения в создании сайтов на виртуальном хостинге. Поможем сделать все настройки.Как создать локальный сайт на WordPress с помощью XAMPP
Вы хотите создать локальный WordPress сайт на вашем компьютере с помощью XAMPP? Установка WordPress на вашем компьютере помогает вам попробовать WordPress, тестовые темы/плагины, а также узнать WordPress. В этой статье мы покажем вам, как создать локальный сайт WordPress с использованием XAMPP.Почему необходимо создать локальный WordPress сайт?
Создание локальных сайтов WordPress является обычной практикой среди разработчиков и владельцев сайтов. Это позволяет тестировать WordPress без создания реального сайта в Интернете.
Локальные сайты видны только вам на вашем компьютере. Вы можете попробовать различные темы WordPress и плагины, проверить свои возможности и изучить основы WordPress.
Если у вас уже есть WordPress сайт, то вы можете создать локальную копию вашего сайта на вашем компьютере, чтобы опробовать новый плагин до обновления и реализации его на вашем веб – сайте.
Важно: Локальный сайт будет виден только вам на вашем компьютере. Если вы хотите построить живой сайт WordPress, то вам нужно доменное имя и WordPress хостинг.
Сказав это, давайте посмотрим, как установить WordPress локально на Windows, Mac или Linux с помощью XAMPP.
Что такое XAMPP?
Для того, чтобы создать локальный сайт на WordPress, вам нужно будет настроить программное обеспечение веб-сервера (Apache), PHP и MySQL на вашем компьютере.
PHP это язык программирования и MySQL является программным обеспечением для управления базами данных. Оба они необходимы для запуска WordPress.
Установка каждого из этих программ по отдельности довольно сложно для начинающих. Для этого приходит на помощь XAMPP.
XAMPP делает его легким для вас, чтобы построить WordPress сайты на локальном уровне. Он доступен для компьютеров на базе Windows, Mac и Linux.
Давайте начнем.
Установка XAMPP на компьютере
Во-первых, вы должны посетить веб – сайт XAMPP и нажмите на кнопку загрузки операционной системы.
В зависимости от операционной системы, ваш мастер установки и интерфейс приложения может отличаться от скриншотов здесь. Ради этой статье мы покажем вам версию программного обеспечения для Windows.
После загрузки XAMPP, вам нужно будет нажать и запустить программу установки.
XAMPP спросит вас, куда вы хотите установить программное обеспечение и какие пакеты вы хотите установить. Настройки по умолчанию будет работать для большинства пользователей. Продолжайте нажимать на «Далее» для завершения работы мастера настройки.
После завершения работы мастера, установите флажок «Запустить панель управления в настоящее время», а затем нажмите на кнопку Готово.
Это запустит панель управления XAMPP. Идите вперед и нажмите на кнопку запуска рядом с Apache и MySQL.
XAMPP теперь запустит Apache и MySQL. Вы можете увидеть уведомление брандмауэра Windows, это важно, что вы нажимаете на кнопку «Разрешить доступ» для обоих приложений для запуска на вашем компьютере.
После того, как оба приложения запустятся, их имена будут выделены зеленым цветом.
Вы успешно установили XAMPP на компьютере.
Теперь вы готовы создать локальный веб-сайт и установить WordPress с помощью XAMPP.
Создание локального сайта на WordPress с помощью XAMPP
Во-первых, вам нужно будет загрузить WordPress. Посетите сайт WordPress.org и нажмите на кнопку “Download WordPress”.
После загрузки WordPress, вам нужно извлечь файл архива, и вы увидите папку wordpress
. Вы должны скопировать эту папку.
Затем перенесите в папку установки XAMPP.
В Windows это будет C:/Program Files/XAMPP/htdocs или папка C:\Xampp\htdocs.
На Mac, это будет папка /Applications/XAMPP/htdocs.
Вставьте скопированную ранее папку wordpress
внутри HTDOCS.
Мы рекомендуем переименовать WordPress папку WEBSITE1. Это поможет вам легко определить ваш локальный сайт.
Далее вам необходимо открыть ваш любимый веб-браузер и посетить LOCALHOST/WEBSITE1. Вы увидите страницу, вроде этой:
Эта страница расскажет вам, что WordPress требует имя базы данных, имя пользователя базы данных, пароль, и разместить информацию.
Давайте создадим базу данных для WordPress сайта.
Вам нужно открыть новую вкладку браузера и посетить страницу localhost/PHPMyAdmin/. Это запустит приложение phpMyAdmin, которое поставляется с предварительно установленной с XAMPP. Это позволяет легко управлять базами данных, используя простой интерфейс.
Вам нужно будет нажать на базу данных, укажите имя новой базы данных, а затем нажмите на кнопку Создать, чтобы продолжить.
Теперь, когда вы создали базу данных, вы можете использовать ее для вашего WordPress сайта.
Переключитесь на браузер в вкладку /localhost/website1/ и нажмите на кнопку «Далее».
На следующем экране вам будет предложено указать свою информацию базы данных для WordPress.
Введите имя базы данных, созданную ранее. Ваше имя пользователя является «root», и вы должны оставить поле пароля пустым. Для поля хоста базы данных, необходимо использовать localhost.
Смотрите скриншот ниже:
После того, как вы закончите, нажмите на кнопку «Отправить», чтобы продолжить.
Если вы на Windows, или Linux, WordPress теперь будет хранить эти настройки в файле конфигурации WordPress под названием wp-config.php.
Однако, если вы находитесь на Mac, то он покажет вам содержимое файла и предложит вам создать его.
Вам нужно будет создать этот файл в корневой папке вашего сайта.
После создания файла, вставьте текст, скопированный ранее в нем. Далее необходимо сохранить файл и вернуться обратно в установщик WordPress, чтобы продолжить.
На следующем этапе, WordPress попросит вас предоставить информацию о вашем сайте. Во-первых, введите название, которое вы хотите использовать для этого сайта.
После этого вам нужно ввести имя пользователя, пароль и адрес электронной почты для учетной записи администратора.
После того, как вы заполнили всю информацию, нажмите на кнопку «Установить WordPress», чтобы продолжить.
WordPress теперь запустит установку и предложит вам войти в систему, как только это будет сделано.
Вы можете войти на свой веб – сайт, перейдя на страницу /localhost/website1/wp-admin
и использовать имя пользователя/пароль(по гиду – пустой) , который вы ввели во время установки для входа.
Что следует попробовать после создания локального WordPress сайта
Теперь, когда вы создали свой локальный сайт WordPress с помощью XAMPP, вы можете работать на нем, как вы могли бы сделать на сайте живого WordPress.
Зайдем на вкладку Внешний вид, чтобы настроить внешний вид вашего сайта или установим новую тему.
Следующая вещь, которую вы хотели бы попробовать это плагины для WordPress. Плагины как приложения для вашего WordPress сайта, они позволяют добавлять интересные функции, как контактную форму, фотогалереи, магазин электронной коммерции и т.д.
Нужна помощь в установке плагинов? Смотрите наш шаг за шагом руководство о том, как установить плагин в WordPress.
После работы на локальном сайте WordPress Вы можете переместить его на сервер. Загляните на наше руководство, шаг за шагом о том , как переместить WordPress с локального сервера на живой сайт.
Мы надеемся , что эта статья помогла вам узнать , как создать локальный сайт WordPress с использованием XAMPP. Вы также можете посмотреть на альтернативные способы создания локальных сайтов WordPress на Windows с помощью WampServer, и на Mac с помощью MAMP.
Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.
Создание сайта—ArcGIS Enterprise | Документация для ArcGIS Enterprise
Сайт представляет собой развертывание ArcGIS Server. При первом открытии ArcGIS Server Manager отобразится сообщение с предложением создать новый сайт или подключиться к существующему. Приведенные ниже шаги описывают процесс создания сайта.
Когда вы создаете сайт, вам будет предложено ввести учетную запись, которая будет выступать в качестве главного (первичного) администратора сайта. Вы будете использовать эту учетную запись, чтобы первоначально войти в Manager и настроить безопасность. Эта учетная запись отличается от записи ArcGIS Server, указанной во время установки.
При каждой последующей попытке открытия Менеджера отобразится сообщение с запросом на ввод имени пользователя и пароля. Вы можете либо предоставить имя и пароль главного администратора сайта, либо предоставить пользователя, которому вы предоставили права администратора или издателя с помощью механизмов безопасности ArcGIS Server.
Если вы хотите добавить больше компьютеров на ваш сайт, сначала установите ArcGIS Server на этих компьютерах. При первом открытии Менеджера на этих компьютерах необходимо выбрать Подключиться к существующему сайту и введите информацию для вашего сайта. Более подробно см. в разделе Подключиться к существующему сайту.
Более подробно:
Когда вы создаете или присоединяете компьютер к сайту, журналы на уровне Подробный записываются в <ArcGIS Server installation directory>\usr\logs\<machine name>\server. Если создание сайта или присоединение к нему не удается, то вы можете открыть журналы с помощью текстового редактора, чтобы получить больше информации о проблеме.
По завершении создания сайта или присоединения, журналы перемещаются в <ArcGIS Server installation drive>\arcgisserver\logs, а уровень журналирования переключается на Предупреждения. Если учетная запись ArcGIS Server не имеет прав на создание этой папки или на запись в нее, то создание сайта или присоединение к нему не удастся. Если вы не хотите передавать учетной записи ArcGIS Server прав на создание папок на всем диске, вы можете вручную создать эту папку заранее и предоставить учетной записи ArcGIS Server права на запись в нее.
Для чтения |
| ||||||||||
Правила блокирования контента |
| ||||||||||
Автовоспроизведение |
| ||||||||||
Масштаб страницы | Выбрать увеличение масштаба (в процентах), чтобы текст и изображения на сайте были лучше видны. | ||||||||||
Камера |
| ||||||||||
Микрофон |
| ||||||||||
Общий экран |
| ||||||||||
Размещение |
| ||||||||||
Загрузки |
| ||||||||||
Уведомления |
| ||||||||||
Всплывающие окна | Можно блокировать всплывающие окна, которые появляются при открытии или закрытии веб-страниц.
Примечание. Некоторые веб-сайты используют всплывающие окна для отображения важной информации. | ||||||||||
WebGL |
Параметр «WebGL» отображается только для компьютеров, на которых WebGL может представлять угрозу безопасности. Если этот параметр не отображается, сайт может отображать содержимое WebGL. | ||||||||||
Веб-сайты, открытые в данный момент | Веб-сайты, открытые в окне или вкладке браузера Safari. Для некоторых из этих веб-сайтов уже может быть выбран вариант во всплывающем меню. | ||||||||||
Настроенные веб-сайты | Список настроенных Вами веб-сайтов. Если список «Настроенные веб-сайты» пуст, Вы еще не настроили ни одного веб-сайта или очистили список. | ||||||||||
Удалить | Удаление выбранного веб-сайта из списка настроенных веб-сайтов. | ||||||||||
При посещении других веб-сайтов | Чтобы применить настройку к веб-сайту, для которого настройка еще не выбрана, нажмите это всплывающее меню и выберите нужный вариант. Чтобы применить настройку ко всем веб-сайтам, убедитесь, что список «Настроенные веб-сайты» пуст (чтобы быстро очистить этот список, выберите веб-сайты и нажмите «Удалить»). Затем нажмите это всплывающее меню и выберите нужный вариант. |
Как создать веб-сайт
Введение
При создании веб-сайта, будь то профессионально или в качестве хобби, есть несколько простых шагов, чтобы убедиться, что вы начнете правильно. Вам понадобится текстовый редактор, установленный на вашем компьютере. Если у вас его нет, нажмите здесь, чтобы прочитать статью о том, как его установить. К концу этой статьи вы сможете создать веб-сайт на своем компьютере так же легко, как и на Codecademy!
Следите за этим видео:
1.СОЗДАНИЕ НОВОГО HTML-ПРОЕКТА
Во-первых, вы должны настроить правильную файловую структуру для вашего проекта. По мере того, как ваши проекты разрастаются и включают в себя файлы разных типов (например, CSS), очень важно, чтобы ваш каталог был отформатирован так, как описано ниже, чтобы веб-браузеры могли правильно находить, интерпретировать и отображать ваши файлы.
Упражнение I. Создайте каталог
Если у вас его еще нет, создайте каталог (также называемый папкой) на вашем компьютере, где вы будете хранить все свои программные проекты.Здесь, в Codecademy, мы рекомендуем назвать этот каталог
projects
, но вы можете называть его как хотите.Внутри каталога проектов
создайте новую папку с именем «hello_html». Обратите внимание, что важно исключить пробелы в именах ваших каталогов, поэтому мы используем здесь подчеркивание.
Упражнение II: Откройте папку проекта
Откройте текстовый редактор (Atom или Sublime Text) и добавьте папку
hello_html
.В Atom вы можете сделать это, щелкнув File> Add Project Folder, затем перейдя в каталогhello_html
и щелкнувopen
.Щелкните правой кнопкой мыши
hello_html
и выберите «Новый файл», чтобы создать новый файл. Сохраните этот файл как index.html .
Примечание. Каждый раз, когда вы создаете веб-сайт, рекомендуется называть домашнюю страницу «индексом», чтобы браузер мог интерпретировать эту страницу как домашнюю.Кроме того, другие разработчики, открывающие ваш проект, могут легко перейти на домашнюю страницу.
2. Добавление шаблона HTML
Когда вы создаете новую веб-страницу, всегда полезно начать с шаблонного кода HTML. Вы можете сделать это двумя разными способами. Если вы наберете html
, а затем нажмете клавишу вкладки , ваш текстовый редактор, скорее всего, внесет важную информацию для вас. Atom может добавить
. Не стесняйтесь оставить его или удалить.Если вкладка клавиша
не работает, вы можете вручную добавить следующий код:
Упражнение III: Шаблон HTML
В index.html введите html, затем нажмите вкладку
В теге заголовка назовите свой веб-сайт «Hello, HTML!»
Внутри тега body используйте тег
Сохраните файл!
3. ВСЕ О URL
При посещении веб-сайта в браузере вы можете перейти непосредственно на страницу, которую хотите видеть, например https://www.codecademy.com/learn/learn-html-css. Это называется унифицированным указателем ресурса или URL-адресом.URL-адрес сообщает браузеру, где найти ресурс (или файл). Приведенный выше URL-адрес указывает браузеру запросить ресурс learn-html-css
из каталога learn
с codecademy.com.
Браузер - это просто программа, которая может интерпретировать и отображать файлы HTML (точно так же, как вы можете использовать медиаплеер для прослушивания музыки или Microsoft Word для просмотра файла .docx).
URL-адрес - это то же самое, что и путь к файлу или путь для поиска файла на вашем компьютере.По умолчанию большинство текстовых редакторов отображают дерево файлов в левой части приложения. Если ваше файловое дерево не отображается в Atom, выберите «Просмотр»> «Переключить представление дерева». Ваше файловое дерево должно выглядеть примерно так:
В верхней части дерева находится каталог проектов
, а внутри проектов
находится hello_html
, который содержит index.html . Если папка «проекты» находится внутри папки «Документы» на Mac, путь к файлу должен выглядеть примерно так:
/ Users / YourName / Documents / projects / hello_html / index.HTML
Этот путь ведет ваш браузер из корневого каталога, затем в папку YourName, затем в Документы, затем проекты, затем hello_html
, затем index.html. Символ /
обозначает разные папки.
4. Местный VS. Пульт
Файлы, сохраненные на вашем компьютере, называются локальными URL:
/Users/YourName/Documents/projects/hello_html/index.html
Путь к файлу относится к файлу, расположенному на вашем локальном компьютере - это считается локальным путем к файлу.
Существует большая разница между вашим локальным путем к файлу и https://www.codecademy.com/learn/learn-html-css
, удаленным путем . Codecademy.com - это не каталог на вашем компьютере - он находится на компьютере (или сервере) Codecademy. Чтобы просмотреть файл в каталоге Codecademy.com, ваш компьютер делает запрос в Codecademy. Если Codecademy разрешает запрос, он отправляет файл, например learn-html-css.html , и ваш браузер отображает его.
5. Протокол передачи гипертекста
Когда вы вводите адрес веб-сайта в свой браузер, браузер запрашивает веб-сайт у его владельца и отображает его для вас.Префикс http означает протокол H yper T ext T ransfer P , который относится к протоколу, по которому HTML-файл с другого сервера передается на ваш компьютер. В современных браузерах обычно не нужно вводить http
, потому что браузер включает его за вас.
6. НАВИГАЦИЯ ПО ЛОКАЛЬНОМУ URL
Когда вы работаете над своим веб-сайтом локально, рекомендуется открыть его в браузере и посмотреть, как он выглядит, когда вы вносите изменения.Есть несколько способов сделать это.
Вы можете перетащить файл из файлового менеджера в Chrome.
На панели инструментов Chrome вы можете нажать «Файл»> «Открыть файл», а затем перейти к index.html.
Вы можете ввести путь, который мы нашли в разделе 2, начиная с
file: //
. Например, вы можете ввестиfile: ///Users/YourName/Documents/projects/hello_html/index.html
.В Atom вы можете найти свой путь, выбрав файл в дереве файлов, щелкнув правой кнопкой мыши и выбрав «Копировать полный путь».Вставьте его в Chrome.
Упражнение IV. Предварительный просмотр HTML-документа в Chrome
- Перейдите к файлу
index.html
и откройте его в веб-браузере. На вкладке браузера должно появиться сообщение «Привет, HTML!». и ваш заголовок должен отображаться в окне вашего браузера.
Упражнение V: внесите изменения
- В настоящее время на вашем веб-сайте есть только один элемент
Поздравляем! Вы настроили файловое дерево для своего первого проекта, добавили шаблонный код для домашней страницы своего веб-сайта, нашли локальный URL и перешли на него. Добавьте на страницу больше контента, используя HTML-теги, и обновите страницу, чтобы увидеть свои изменения!
Как мне создать свой собственный веб-сайт?
Самое лучшее в Интернете - это то, что любой, у кого есть идея, может создать веб-сайт практически бесплатно.Простой веб-сайт стоит около 1 доллара в день. Это означает, что каждый день испытываются миллионы различных идей. Веб-сайты мгновенно транслируются на огромную мировую аудиторию - никогда в истории мира ни один человек не мог охватить такое количество людей за такие небольшие деньги.
Итак, допустим, у вас есть идея для веб-сайта. Что вам нужно сделать, чтобы начать? Ваша идея может быть реализована на нескольких уровнях.Давайте посмотрим на них.
Допустим, у вас есть идея для веб-сайта, и у вас есть классное доменное имя , которое вы хотите использовать. Вы не уверены, когда сможете начать работу с самим сайтом, но вы хотите убедиться, что никто другой не уловил идею и не взял это доменное имя. Например, предположим, что ваше доменное имя - MyIdea.com. Что вы хотите сделать, так это проверить реестр доменных имен и убедиться, что он еще не зарегистрирован. Если он доступен, вы хотите зарегистрировать это доменное имя (также известное как «резервирование» или «парковка» доменного имени).Регистрация имени дает вам право собственности на него. Чтобы вы могли припарковать доменное имя , оно должно фактически располагаться где-то на сервере. Обычно у него есть какое-то уведомление «В стадии разработки», которое появляется, когда люди пытаются получить доступ к этому доменному имени.
Вам необходимо зарегистрировать свое доменное имя. Есть много компаний, которые размещают ваше доменное имя на сервере, и некоторые из них взимают плату. Verio - одна из компаний, которая будет парковать ваше доменное имя, и она предоставляет удобную форму, которая упрощает проверку доступности доменного имени.Проверка и резервирование доменного имени займет всего пару минут.
Допустим, у вас есть идея для сайта с содержанием и вы хотите сразу приступить к работе. Информационный сайт - это сайт, содержащий информацию, которую люди могут прочитать или просмотреть. Информация может быть словами, картинками, ссылками и т. Д. Yahoo! по сути, это сайт с огромным содержанием. Чтобы создать контентный сайт, вам нужно выучить HTML , чтобы вы могли создавать свои страницы, а затем вам нужно найти компанию, которая разместит сайт.То есть вам нужна компания, которая будет управлять веб-сервером для вашего сайта:
Или, может быть, у вас есть идея для сайта электронной коммерции. Сайт электронной коммерции позволяет отображать то, что вы хотите продать, принимать заказы, обрабатывать кредитные карты и т.д. связанные услуги. Однако это не такая уж большая проблема.
Удачи в создании вашего нового сайта!
Эти ссылки помогут вам узнать больше:
1.Создание вашей первой страницы
Глава 1. Создание вашей первой страницы
Каждый веб-сайт представляет собой набор веб-страниц, поэтому неудивительно, что ваше путешествие по созданию полноценного сайта начинается здесь , с написания единую веб-страницу.
Технически веб-страница - это особый тип документа, написанный на компьютерном языке, который называется HTML (это сокращение от языка гипертекстовой разметки). Веб-страницы написаны для веб-браузеров - таких программ, как 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 не содержит ни одного элемента для этой цели, поэтому вам необходимо объединить знакомый элемент
(чтобы выделить текст полужирным шрифтом) с элементом
(чтобы выделить его курсивом).Вот пример:
Это слово выделено полужирным шрифтом и курсивом.
Когда браузер просматривает этот фрагмент HTML, он создает текст, который выглядит следующим образом:
Это слово имеет полужирное и курсивное форматирование.
Между прочим, не имеет значения, поменяете ли вы порядок тегов
и
. Следующий HTML дает точно такой же результат.
Это слово выделено курсивом и полужирным шрифтом.
Однако вы всегда должны закрывать теги в порядке , обратном , из которого вы их открывали. Другими словами, если вы применяете курсивное форматирование, а затем полужирное форматирование, вы должны сначала отключить полужирное форматирование, а затем курсивное форматирование. Вот пример, который нарушает это правило:
Это слово выделено курсивом и полужирным шрифтом.
Браузеры обычно могут разобраться в этом и сделать хорошее предположение о том, чего вы действительно хотите, но это опасная привычка, которая возникает при написании более сложного HTML.
Как вы увидите в следующих главах, HTML предоставляет гораздо больше способов вложения элементов. Например, вы можете вложить один элемент в другой, а затем вложить другой элемент в , и так далее до бесконечности.
Note
Если вы занимаетесь графическим дизайном, вам, вероятно, не терпится заполучить более мощные HTML-теги для изменения выравнивания, интервалов и шрифтов. К сожалению, в мире Интернета вы не всегда можете контролировать все, что хотите. В главе 2 содержится подробное описание, а в главе 3 представлено лучшее решение, которое называется таблиц стилей .
Общие сведения о документах HTML
До сих пор вы рассматривали фрагменты HTML - части полного документа HTML. Это дало вам представление о том, как работает HTML, но вам нужно активизировать свою игру, прежде чем вы сможете покорить Интернет. В этом разделе вы узнаете о структуре, которая отличает фрагмент HTML от официального документа HTML.
Определение типа документа
На заре Интернета веб-браузеры были полны причуд.При разработке веб-страниц люди должны были учитывать эти особенности. Например, браузеры могут вычислять поля вокруг плавающих блоков текста несколько по-разному, в результате чего страницы в одном браузере выглядят правильно, а в другом - странно.
Спустя годы правила HTML (и CSS, стандарта таблиц стилей, о котором вы узнаете в главе 3) были формализованы. Используя эти новые правила, каждый браузер может отображать одну и ту же страницу одинаково. Но это изменение вызвало серьезную головную боль для старых браузеров, таких как Internet Explorer, которые пережили темные века HTML.Он должен был каким-то образом поддерживать новые стандарты, сохраняя при этом возможность правильно отображать существующие веб-страницы, в том числе те, которые основывались на старых причудах.
Интернет-сообщество остановилось на простом решении. При разработке новой современной веб-страницы вы указываете этот факт, добавляя код, называемый определением типа документа (DTD) или doctype , который идет в самом начале вашего HTML-документа (рис. 1-9).
Рисунок 1-9. Определение типа документа (DTD) - это первая часть информации в файле HTML.Он сообщает браузеру, какой стандарт разметки вы использовали для написания страницы.
Когда браузер обнаруживает doctype, он переключается в стандартный режим и отображает страницу наиболее согласованным и стандартизированным способом. Конечным результатом является то, что страница выглядит практически идентично во всех современных браузерах.
Но когда браузер встречает HTML-документ, у которого нет документа, все ставки отключены. Internet Explorer, например, переключается в ужасный режим quirks , где он пытается вести себя так же, как 10 лет назад, с причудами и всем остальным.Это гарантирует, что действительно старые веб-страницы сохранят вид, который они имели при первом создании, даже если они полагаются на старые ошибки браузера, которые уже давно исправлены. К сожалению, разные браузеры по-разному ведут себя при просмотре страницы без документа. Скорее всего, вы получите текст разного размера, несогласованные поля и границы, а также неправильно расположенное содержание. По этой причине веб-страницы без доктайпов - плохая новость, и вам следует избегать их создания.
В прошлом веб-дизайнеры использовали разные типы документов для обозначения разных версий разметки HTML (например, XHTML, HTML5 или действительно старый HTML 4.01). Но сегодня веб-разработчики почти всегда используют простой универсальный тип документа HTML5:
Несмотря на то, что этот тип документа был формализован как часть HTML5, каждый браузер его поддерживает - даже старые версии IE, о которых никогда не слышали. HTML5. Это потому, что универсальный тип документа ничего не говорит о том, какую версию HTML вы предпочитаете. Вместо этого он просто указывает, что язык - это HTML. Этот однострочный документ просто отражает истинную философию HTML - поддерживать старые и новые документы.
Для сравнения, вот более многословный тип документа для XHTML 1.0, который вы все еще можете встретить на старых веб-страницах:
Даже опытным веб-разработчикам приходилось копировать документ XHTML 1.0 с существующей веб-страницы, чтобы избежать неправильного ввода.
В этой книге во всех примерах используется doctype HTML5 не только потому, что это текущий стандарт, но и потому, что он подготавливает ваши страницы к будущему.Но то, что вы используете этот тип документа, не означает, что вы можете использовать все функции HTML5. Фактически, вам следует пока избегать большинства из них, если только вы не уверены, что они хорошо поддерживаются всеми браузерами, которые люди используют сегодня.
Примечание
В этой книге вы будете использовать только функции HTML5, которые работают во всех современных браузерах. Но если вам интересно узнать о более экспериментальных частях языка, которые все еще не очень хорошо поддерживаются браузерами, ознакомьтесь с HTML5: отсутствующее руководство (O’Reilly).
Теперь вы готовы заполнить остальную часть веб-страницы.
Чтобы создать настоящий HTML-документ, вы начинаете с трех элементов контейнера:
,
и
. Эти три элемента работают вместе, чтобы описать базовую структуру вашей страницы:
-
Этот элемент обертывает все (кроме документа) на вашей веб-странице.
-
Этот элемент обозначает заголовок часть вашего документа, которая включает некоторую информацию о вашей веб-странице.Первая деталь - это заголовок - откройте свою страницу в браузере, и этот заголовок появится как заголовок на вкладке. При желании раздел
может также включать ссылки на таблицы стилей (о которых вы узнаете в главе 3) и файлы JavaScript (глава 14).-
Этот элемент содержит основную часть вашей веб-страницы, включая фактическое содержимое, которое вы хотите показать миру.
Есть только один правильный способ использовать эти три элемента на странице.Вот их правильное расположение с типом документа HTML5 в начале страницы:
... ...
Каждая веб-страница использует эту базовую структуру. Эллипсы (…) показывают, куда вы вставляете дополнительную информацию. Пробелы между линиями не обязательны - они нужны только для того, чтобы вам было легче увидеть структуру элемента.
Когда у вас есть скелет HTML, вам нужно добавить в смесь еще два элемента контейнера.Для каждой веб-страницы требуется элемент
, который находится в разделе заголовка страницы, и вам необходимо создать контейнер для текста в разделе
страницы. Один универсальный текстовый контейнер - это элемент
, который представляет абзац.
Вот элементы, которые вам нужно добавить:
-
Этот элемент устанавливает заголовок для вашей веб-страницы. В названии играет несколько ролей.Сначала веб-браузеры отображают его на вкладке браузера или в верхней части окна браузера. Во-вторых, когда посетитель добавляет вашу страницу в закладки, браузер использует название в качестве метки закладки. В-третьих, когда ваша страница появляется в веб-поиске, поисковая система обычно отображает этот заголовок в качестве первой строки результатов, за которым следует фрагмент контента со страницы.
-
Обозначает абзац. Веб-браузеры не делают отступы между абзацами, но они добавляют небольшой промежуток между последовательными абзацами, чтобы они оставались разделенными.
Вот веб-страница с этими двумя новыми ингредиентами (выделены жирным шрифтом):
Все, что я знаю о веб-дизайне
Если вы откроете этот документ в веб-браузере, вы обнаружите, что страница пуста, но отображается заголовок (как показано на рисунке 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-страницы, но не содержит содержимого.
Добавьте заголовок в раздел
Добавьте элемент
в новую строку между открывающим тегом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. Следуя стрелкам, вы увидите, что элемент верхнего уровня
содержит элементы
и
.Внутри элемента
находится элемент
, а внутри элемента
находятся два абзаца и маркированный список с четырьмя элементами. Если вы посмотрите на модель дерева достаточно долго, вы поймете, почему HTML называет все эти элементы «элементами-контейнерами».
Если вы мазохист, вам не нужно использовать пробелы. Предыдущий пример в точности эквивалентен следующему гораздо менее читаемому HTML-документу:
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.Вот веб-страница, на которой встроено изображение благодаря связывающей способности элемента изображения. Чтобы отобразить этот документ, веб-браузер выполняет отдельный запрос на получение файла изображения. В результате ваш браузер может отображать текст веб-страницы перед загрузкой изображения, в зависимости от того, сколько времени занимает загрузка (обычно это доли секунды).
Note
В главе 4 вы узнаете о многих других приемах веб-графики, в том числе о том, как изменять их размер и обтекать их текстом.
10 самых важных элементов (и еще несколько)
Теперь вы достигли точки, когда вы можете создать базовый документ HTML, и у вас уже есть несколько элементов за плечами. Вы знаете основы - все, что вам осталось, - это расширить свои знания, научившись использовать больше элементов.
HTML имеет относительно небольшой набор элементов. Скорее всего, вы будете использовать менее 25 на регулярной основе. Это ключевая часть успеха HTML, потому что он делает HTML простым языком общего доступа, понятным каждому.
Примечание
Вы не можете определять свои собственные элементы и использовать их в документе HTML, потому что веб-браузеры не знают, как их интерпретировать.
Некоторые элементы, такие как элемент
, форматирующий абзац, важны для определения общей структуры страницы. Они называются блочными элементами . Блочные элементы получают дополнительное пространство - когда вы добавляете один на страницу, браузер начинает новую строку (отделяя этот блочный элемент от предыдущей). Браузер также добавляет новую строку в конец элемента блока, отделяя его от следующего элемента.
Вы можете размещать блочные элементы непосредственно внутри раздела
вашей веб-страницы или внутри другого блочного элемента. В Таблице 1-1 представлен краткий обзор некоторых из наиболее фундаментальных блочных элементов, некоторые из которых вы уже видели. Он также указывает, какие из них являются элементами контейнера, а какие - автономными. (Как вы узнали из статьи «Понимание элементов», элементы контейнера требуют начального и конечного тегов, но автономные элементы обходятся только одним тегом.) Вы более подробно изучите все эти элементы в главе 2.
Таблица 1-1. Базовые блочные элементы.
ЭЛЕМЕНТ | НАИМЕНОВАНИЕ | ТИП ЭЛЕМЕНТА | ОПИСАНИЕ24 00 | Контейнер | Как, вероятно, вам сказал учитель английского в средней школе, абзац является основной единицей для организации текста.Когда вы используете более одного элемента абзаца в строке, браузер вставляет пробел между двумя абзацами - чуть больше, чем полная пустая строка. | |
| Заголовок | Контейнер | Элементы заголовка - это хороший способ структурировать вашу страницу и выделить заголовки.Они отображают текст большими жирными буквами. Чем меньше число, тем крупнее текст, поэтому | |||
| Горизонтальная линия (или горизонтальная линия на языке HTML) | Автономный | Горизонтальная линия может помочь вам отделить один раздел вашей веб-страницы от другого .Линия автоматически соответствует ширине окна браузера. (Или, если вы поместите строку внутри другого элемента, например ячейки в таблице, она займет ширину своего контейнера.) | |||
| Неупорядоченный список, элемент списка | Контейнер | Эти элементы позволяют создавать базовые маркированные списки. Браузер автоматически помещает отдельные элементы списка в отдельные строки и делает отступ для каждого из них.Для быстрого изменения темпа вы можете заменить |
Другие элементы предназначены для работы с более мелкими структурными деталями, например фрагментами текста, выделенного жирным или курсивом, разрывами строк, ссылками, ведущими на другие веб-страницы, и изображениями. Эти элементы называются встроенными элементами . Вы можете поместить встроенный элемент в блочный элемент, но никогда не должны помещать блочный элемент внутри встроенного элемента.В таблице 1-2 перечислены наиболее полезные встроенные элементы.
Таблица 1-2. Основные встроенные элементы.
ЭЛЕМЕНТ | ИМЯ | ТИП | ОПИСАНИЕ | ОПИСАНИЕ | 0 Полужирный и курсив | Контейнер | Эти два элемента применяют стиль символов - жирный или курсивный текст.(Технически | |
| разрыв строки | Автономный | Иногда все, что вам нужно, - это текст, разделенный простыми переносами строки, а не отдельными абзацами.Благодаря этому последующие строки текста будут ближе друг к другу, чем при использовании абзаца. | |||||
| Изображение | Автономный | Для отображения изображения внутри веб-страницы используйте этот элемент. Убедитесь, что вы указали атрибут | |||||
Якорь | Контейнер | Элемент привязки является отправной точкой для создания гиперссылок, позволяющих посетителям веб-сайта переходить с одной страницы на другую.Вы узнаете об этом незаменимом элементе в главе 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). Если вы создаете страницы вручную в текстовом редакторе, вы можете использовать бесплатный инструмент онлайн-проверки (см. Ниже).
Вот некоторые потенциальные проблемы, которые может обнаружить валидатор:
Отсутствуют обязательные элементы (например, элемент
). Начальный тег контейнера без соответствующего конечного тега.
Неправильно вложенные теги.
Теги с отсутствующими атрибутами (например, элемент
src
).Элементы или контент в неправильном месте (например, текст, помещенный непосредственно в раздел
В Интернете можно найти множество инструментов для проверки.Следующие шаги показывают, как использовать популярный валидатор, предоставляемый организацией по стандартизации W3C (официальные владельцы языка HTML). Попробуйте это с помощью файла resume.htm , который вы создали во втором учебнике (Учебник: Создание полного HTML-документа). Или дайте валидатору повод для жалоб с помощью файла popsicles.htm , который вы создали в первом руководстве (Учебник: Создание файла HTML). Поскольку это фрагмент HTML, а не полный документ HTML, валидатор быстро пожалуется на недостающие биты, такие как требуемые элементы
,
и
.
После того, как вы решите, что вы хотите проверить, выполните следующие действия:
Убедитесь, что ваш документ имеет тип документа (Общие сведения о документах HTML).
Тип документа сообщает валидатору, какие правила использовать при проверке вашего документа. В этой книге мы придерживаемся универсального документа HTML5 («Базовый скелет»).
В веб-браузере перейдите по адресу http://validator.w3.org (рис. 1-17).
Валидатор W3C предлагает три варианта выбора, представленных тремя вкладками: Проверить по URI (для страницы, которая уже находится в сети), Подтвердить с помощью загрузки файла (для страницы, которая хранится на вашем компьютере) и Подтвердить с помощью прямого ввода (для разметки). вы вводите прямо в предоставленное поле).
Рисунок 1-17. На веб-сайте http://validator.w3.org есть три варианта проверки HTML. Вы можете ввести адрес страницы в Интернете, вы можете загрузить свой собственный файл (показанный здесь) или ввести разметку напрямую.Щелкните нужную вкладку и введите содержимое HTML .
Проверить по URI позволяет проверить существующую веб-страницу. Просто введите URL-адрес (это полный Интернет-адрес) страницы в поле «Адрес» (например, www.MySloppySite.com/FlawedPage.html).
Подтвердить загрузкой файла позволяет загружать любой файл с вашего компьютера. Сначала нажмите кнопку «Обзор» (которая называется «Выбрать файл в Chrome»), чтобы увидеть стандартное диалоговое окно «Открыть». Перейдите к местоположению вашего HTML-файла, выберите его и нажмите «Открыть». Это самый простой способ убедиться, что вы все правильно поняли со страницей resume.htm , которую вы создали ранее.
Проверка с помощью прямого ввода позволяет проверять любую разметку - вам просто нужно ввести ее в предоставленное большое поле.Самый простой способ использовать эту опцию - скопировать разметку из текстового редактора и вставить ее в поле.
Прежде чем продолжить, вы можете щелкнуть Дополнительные параметры в любом из окон с вкладками, чтобы установить другие параметры, но вы, вероятно, этого не сделаете. Лучше всего позволить валидатору автоматически определять тип документа; Таким образом, валидатор будет использовать тип документа, указанный на вашей веб-странице. Точно так же оставьте параметр «Кодировка символов» установленным на «обнаруживать автоматически», если вы не написали свою страницу не на английском языке, и у валидатора возникнут проблемы с определением правильного набора символов.
Нажмите кнопку Проверить .
После небольшой задержки валидатор сообщает, прошел ли ваш документ проверку валидации или, в случае неудачи, какие ошибки обнаружил валидатор (см. Рисунок 1-18).
Валидатор также может предложить несколько безобидных предупреждений для совершенно корректного HTML-документа, включая предупреждение о том, что кодировка символов была определена автоматически, и предупреждение о том, что служба проверки HTML5 считается экспериментальной, незаконченной функцией.
Рисунок 1-18. В этом файле валидатор обнаружил 10 ошибок, связанных с двумя ошибками. Во-первых, на странице отсутствует обязательный элемент
. Во-вторых, он закрывает элемент
перед закрытием элемента
, вложенного внутрь. (Чтобы решить эту проблему, замените
на
.) Между прочим, этот файл все еще достаточно близок, чтобы исправить, что браузеры могут отображать его правильно.
Как создать собственный веб-сервер дома
Используйте код KB4KDO0L9 , чтобы получить постоянную скидку 10% на любом сервере.
Вы когда-нибудь хотели настроить собственный веб-сервер для размещения веб-сайта или обмена файлами с семьей? Создать веб-сервер очень просто, и мы покажем вам все, что вам нужно для начала работы.
В этом руководстве мы установим все компоненты, необходимые для настройки веб-сервера на сервере ServerMania. Это настроит все основные компоненты веб-сервера.Если вы будете размещать много сайтов или хотите более надежное управление сайтом, вам следует вместо этого установить панель управления, такую как cPanel.
См. Также: Как использовать Magento для электронной коммерции
Почему я должен использовать внешний сервер для моего веб-сервера вместо компьютера в моем доме?
Существует множество причин, по которым вы должны использовать гибридный или выделенный сервер ServerMania для настройки своего веб-сервера вместо настройки веб-сервера дома
- Стоимость: Хотя может показаться дешевле использовать этот компьютер, ничего при создании веб-сервера, если учесть затраты на круглосуточное питание старого компьютера, это может стать очень дорогим.Настольный компьютер мощностью 250 Вт, работающий 24 часа в сутки по цене 12 центов за кВт / ч, - это колоссальные 262 доллара в год! Не говоря уже о расходах на Интернет, замену оборудования и т. Д. В долгосрочной перспективе гораздо дешевле арендовать сервер ServerMania каждый месяц.
- Надежность: Интернет и компьютерное оборудование потребительского уровня не рассчитано на круглосуточное использование и подключение по всему миру. ServerMania, с другой стороны, использует оборудование и соединения корпоративного уровня, чтобы каждый мог подключиться к вашему серверу на молниеносной скорости.
- Поддержка: Одним из основных недостатков хостинга собственного веб-сайта является то, что вы несете ответственность за любые вопросы поддержки. С ServerMania вы получаете круглосуточную поддержку, включенную в каждый сервер, поэтому вы знаете, что мы всегда здесь, если вам понадобится помощь.
СКАЧАТЬ: календарь управления сервером
Увеличьте время безотказной работы и безопасность сервера с помощью нашего рекомендованного ежемесячного календаря задач управления сервером.
Компоненты веб-сервера
Существует несколько основных компонентов для настройки веб-сервера: Его часто называют стеком LAMP.
Linux: За стеком LAMP стоит операционная система Linux. Это легкая и безопасная ОС, что делает ее одним из самых популярных вариантов для лучших веб-серверов.
Apache: Это программное обеспечение, используемое для работы протокола HTTP, который доставляет веб-контент с сервера в веб-браузер.
MySQL: Популярный механизм баз данных, используемый для веб-сайтов, управляемых базами данных.
PHP: Являясь популярным языком многих веб-сайтов, PHP требуется для таких популярных сценариев веб-сайтов, как WordPress.
Что вам понадобится
Начните с заказа гибридного или выделенного сервера ServerMania. Вы можете использовать код купона KB4KDO0L9 для пожизненной скидки 10%.
Системные требования
Системные требования для настройки личного веб-сервера зависят от типа сайтов, которые вы собираетесь запускать. Минимальные требования:
- Гибридный или выделенный сервер ServerMania
- CentOS 7+
- 512 МБ ОЗУ
- 2 ГБ дискового пространства
Сайтам, управляемым базами данных, может потребоваться больше системных ресурсов для эффективной работы.
Linux
Эти инструкции будут работать в Ubuntu / Debian Linux. Команды могут отличаться в других дистрибутивах.
Инструкции по установке
Шаг 1. Подключитесь к серверу ServerMania через SSH.
ssh root @ IP-адрес
Шаг 2: Установите утилиты wget, screen и unzip, которые необходимы для выполнения сценария установки:
apt-get -y install wget screen git
Шаг 3: Загрузите Скрипт установки LAMP из github с использованием wget:
git clone https: // github.com / teddysun / lamp.git
Шаг 4: Перейдите в папку lamp-master:
cd lamp
Шаг 5: Сделайте сценарий установки исполняемым:
chmod + x * .sh
Шаг 6: Откройте экран, чтобы начать процесс установки:
screen -S lamp
Шаг 7: Выполните сценарий установки:
./lamp.sh
Шаг 8: Выполните следующие шаги в процессе установки:
- Выберите версию apache.Мы рекомендуем последнюю версию из списка.
- Выберите базу данных, которую вы хотите установить. Мы рекомендуем MySQL и выбираем последнюю версию.
- Нажмите Enter, чтобы использовать каталог данных MySQL по умолчанию.
- Введите пароль root для MySQL.
- Выберите версию PHP. Рекомендуем выбрать самую последнюю версию.
- Установите все необходимые модули PHP. php-imagick - хороший вариант, если вы не уверены, что вам нужно.
- Выберите 1, чтобы установить PHPMyAdmin
- Нажмите любую клавишу, чтобы начать процесс установки
Управление компонентами веб-сервера
Теперь, когда ваш стек LAMP установлен, вы можете использовать эти команды для запуска, остановки и перезапуска компонентов Интернета. server:
Apache
service httpd (start | stop | status | restart)
MySQL
service mysqld (start | stop | status | restart)
Создание нового сайта
Теперь, когда стек LAMP установлен, Теперь вы можете настроить свой первый веб-сайт на веб-сервере.
Следующая команда добавит сайт в ваш файл конфигурации apache:
lamp add
Следуйте инструкциям в сценарии, указав имя домена и информацию о базе данных (при необходимости).
Теперь вы можете добавлять файлы в каталог вашего сайта. Каталог по умолчанию:
data / www / domain.com
Вы можете использовать команду scp с локального компьютера для загрузки файлов в каталог:
Windows
Для тех, кто хочет настроить веб-сервер на Windows Server 2012 , Windows Server 2016 или Windows Server 2019 можно выполнить следующие действия.
Инструкции по установке
Шаг 1: Откройте диспетчер серверов
Шаг 2: Щелкните Управление> Добавить роли и компоненты
Шаг 3: Нажмите Далее
Шаг 4: Нажмите Далее
Шаг 5 : Выберите сервер и нажмите Далее
Шаг 6: Выберите Веб-сервер и нажмите Далее
Шаг 7: Нажмите Далее
Шаг 8: Нажмите Далее
Шаг 9: Нажмите Далее
Шаг 10: Щелкните Установить
Управление сервером
Теперь вы можете открыть диспетчер IIS.Если вы щелкните ссылку «Сайты» и нажмите «Обзор», вы сможете просмотреть корневую веб-папку и переместить любые файлы сайта в это место.
Затем вы можете посетить основной IP-адрес своих серверов, чтобы получить доступ к своему сайту, или следуйте инструкциям ниже, чтобы указать домен на сервер.
Указание домена на веб-сервер
Вам нужно будет войти в интерфейс администратора у вашего регистратора домена. В нашем руководстве не устанавливались серверы имен на сервере, поэтому вам нужно будет использовать внешнего поставщика серверов имен.Большинство регистраторов доменов предоставляют это бесплатно.
Просто скопируйте IP-адрес своего сервера в запись A файла зоны DNS доменного имени.
После того, как вы укажете A-запись домена на общедоступный IP-адрес вашего сервера, данные в этой папке будут видны пользователям в их браузерах.
Заключение
Теперь вы настроили свой веб-сервер. Теперь вы можете установить на свой веб-сервер популярное программное обеспечение, такое как WordPress, или загружать файлы на сервер для загрузки пользователями.
Основы Интернета: использование веб-браузера
Урок 5: Использование веб-браузера
/ ru / internetbasics /standing-the-cloud / content /
Использование веб-браузера
Веб-браузер - это тип программного обеспечения, которое позволяет находить и просматривать веб-сайты в Интернете. Даже если вы этого не знали, сейчас вы используете веб-браузер, чтобы читать эту страницу! Существует множество различных веб-браузеров, но некоторые из наиболее распространенных включают Google Chrome , Internet Explorer , Safari , Microsoft Edge и Mozilla Firefox .
Независимо от того, какой веб-браузер вы используете, вы захотите изучить основы работы в Интернете. В этом уроке мы поговорим о , переходящем с на разные веб-сайты, о с использованием вкладок , , просмотре , создании закладок, и многом другом.
Посмотрите видео ниже, чтобы узнать об основах использования веб-браузера.
На протяжении всего урока мы будем использовать веб-браузер Google Chrome , но вы можете использовать любой браузер, какой захотите.Имейте в виду, что ваш браузер может выглядеть и действовать немного по-другому, но все веб-браузеры работают в основном одинаково.
URL и адресная строка
Каждый веб-сайт имеет уникальный адрес, который называется URL (сокращение от Uniform Resource Locator ). Это как уличный адрес, который сообщает вашему браузеру, куда идти в Интернете. Когда вы вводите URL-адрес в адресную строку браузера и нажимаете Введите на клавиатуре, браузер загрузит страницу, связанную с этим URL-адресом.
В приведенном ниже примере мы набрали www.bbc.com/travel в адресную строку.
Ссылки
Всякий раз, когда вы видите слово или фразу на веб-сайте, обозначенное синим или подчеркнутым синим цветом , вероятно, это гиперссылка или ссылка для краткости. Возможно, вы уже знаете, как работают ссылки, даже если никогда раньше не задумывались о них. Например, попробуйте щелкнуть ссылку ниже.
Эй, я ссылка! Нажми на меня!
Ссылки используются для навигации по сети .Когда вы нажимаете ссылку, она обычно переводит вас на другую веб-страницу. Вы также можете заметить, что ваш курсор меняется на значок руки всякий раз, когда вы наводите курсор на ссылку.
Если вы видите этот значок, это означает, что вы нашли ссылку. Таким же образом вы найдете и другие типы ссылок. Например, многие веб-сайты фактически используют изображений в качестве ссылок, поэтому вы можете просто щелкнуть изображение , чтобы перейти на другую страницу.
Просмотрите наш урок о гиперссылках, чтобы узнать больше.
Кнопки навигации
Кнопки Назад и Вперед позволяют перемещаться по веб-сайтам, которые вы недавно просматривали . Вы также можете нажать и удерживать любую кнопку, чтобы просмотреть свою недавнюю историю.
Кнопка Обновить перезагружает текущую страницу. Если веб-сайт перестает работать, попробуйте использовать кнопку «Обновить».
Просмотр с вкладками
Многие браузеры позволяют открывать ссылки в новой вкладке .Вы можете открывать столько ссылок, сколько хотите, и они останутся в том же окне браузера , вместо того, чтобы загромождать экран множеством окон.
Чтобы открыть ссылку в новой вкладке, щелкните правой кнопкой мыши ссылку и выберите Открыть ссылку в новой вкладке (точная формулировка может отличаться от браузера к браузеру).
Чтобы закрыть вкладку a, щелкните X .
Чтобы создать новую пустую вкладку , нажмите кнопку справа от любых открытых вкладок.
Закладки и история
Если вы найдете веб-сайт, который хотите просмотреть позже, может быть сложно запомнить точный веб-адрес. Закладки , также известные как избранные , - отличный способ сохранять и упорядочивать определенные веб-сайты, чтобы вы могли возвращаться к ним снова и снова. Просто найдите и выберите значок Star , чтобы добавить текущий веб-сайт в закладки.
Ваш браузер также будет хранить историю каждого посещаемого вами сайта. Это еще один хороший способ найти сайт, который вы посещали ранее.Чтобы просмотреть историю, откройте настройки браузера - обычно щелкнув значок в правом верхнем углу - и выберите История .
Скачивание файлов
Ссылки не всегда ведут на другой веб-сайт. В некоторых случаях они указывают на файл , который можно загрузить, или сохранить на вашем компьютере.
Если вы щелкнете ссылку на файл, он может загрузиться автоматически, но иногда в вашем браузере открывается вместо загрузки.Чтобы предотвратить его открытие в браузере, вы можете щелкнуть правой кнопкой мыши ссылку и выбрать Сохранить ссылку как (разные браузеры могут использовать несколько разные формулировки, например Сохранить цель как ).
Просмотрите наш урок по загрузке и отправке, чтобы узнать больше.
Сохранение изображений
Иногда вам может понадобиться сохранить изображение с веб-сайта на свой компьютер. Для этого щелкните изображение правой кнопкой мыши и выберите Сохранить изображение как (или Сохранить изображение как ).
Плагины
Плагины - это небольшие приложения, которые позволяют просматривать определенные типы контента в вашем веб-браузере. Например, Adobe Flash и Microsoft Silverlight иногда используются для воспроизведения видео, а Adobe Reader - для просмотра файлов PDF.
Если у вас нет подходящего подключаемого модуля для веб-сайта, ваш браузер обычно предоставляет ссылку для его загрузки. Также могут быть случаи, когда вам нужно обновить ваши плагины.Прочтите наш урок по установке и обновлению подключаемых модулей, чтобы узнать больше.
/ ru / internetbasics /standing-hyperlinks / content /
Создать или отредактировать гиперссылку
Вы можете создавать гиперссылки, которые ссылаются на документ Word или сообщение электронной почты Outlook, которое включает стили заголовков или закладки. Вы также можете ссылаться на слайды или настраиваемые показы в презентациях PowerPoint и на определенные ячейки и листы в электронных таблицах Excel.
Советы:
Узнайте о добавлении закладок.
Чтобы добавить стиль заголовка, выделите текст заголовка, щелкните вкладку Home в Word или вкладку Format Text в Outlook и выберите стиль в группе Styles .
Создать гиперссылку на место в текущем документе
Выберите текст или изображение, которое вы хотите отобразить в виде гиперссылки.
Нажмите Ctrl + K.
Вы также можете щелкнуть правой кнопкой мыши текст или изображение и выбрать Ссылка в контекстном меню.
В разделе Ссылка на щелкните Поместить в этот документ .
В списке выберите заголовок (только текущий документ), закладку, слайд, настраиваемый показ или ссылку на ячейку, на которые вы хотите создать ссылку.
Необязательно: Чтобы настроить всплывающую подсказку, которая появляется при наведении курсора на гиперссылку, щелкните ScreenTip в правом верхнем углу диалогового окна Insert Hyperlink и введите нужный текст.
Создать гиперссылку на место в другом документе
Выберите текст или изображение, которое вы хотите отобразить в виде гиперссылки.
Нажмите Ctrl + K.
Вы также можете щелкнуть правой кнопкой мыши текст или изображение и выбрать Ссылка в контекстном меню.
В разделе Ссылка на щелкните Существующий файл или веб-страницу .
В поле Искать в щелкните стрелку вниз, найдите и выберите файл, на который нужно создать ссылку.
Щелкните Закладка , выберите заголовок, закладку, слайд, настраиваемый показ или ссылку на ячейку, а затем щелкните OK .
Необязательно: Чтобы настроить всплывающую подсказку, которая появляется при наведении курсора на гиперссылку, щелкните ScreenTip в правом верхнем углу диалогового окна Insert Hyperlink и введите нужный текст.
Руководство по разработке веб-сайтов для новичков
С 1990-х годов мало что оставалось вечным общественным продуктом, например, Friends , Pokémon , Бритни Спирс и Интернет.
Серьезно. Многое пришло и ушло, но эти ребята остались, выдержали удары 2000 года и интегрировались в наше общество. ( Pokémon Go или новая резиденция Бритни Спирс в Вегасе, кто-нибудь?)
Тем не менее, ничто не говорит «Я здесь, чтобы остаться», как Интернет.От коммутируемого доступа и AOL до всего до Chrome и Интернета вещей ~ * interwebs * ~ полностью проникли в нашу жизнь.
Изучение веб-разработки похоже на питье из пожарного шланга. Google "кодирование", и вы включили шланг на полную мощность. Это руководство поможет вам познакомиться с миром веб-разработки и заинтриговать им. Это ни в коем случае не исчерпывающее руководство.
В этом руководстве мы рассмотрим самые простые основы веб-разработки, процесс создания веб-сайта и дополнительные ресурсы для тех, кто хочет узнать больше о разработке или стать разработчиком самостоятельно.
Продолжайте читать, чтобы погрузиться в разработку веб-сайтов, или используйте ссылки на главы, чтобы перейти к руководству.
Что такое разработка веб-сайтов?
Разработка веб-сайтов - это работа, которая идет на создание веб-сайта. Это может относиться к чему угодно, от создания единой веб-страницы с открытым текстом до разработки сложного веб-приложения или социальной сети.
Хотя веб-разработка обычно относится к веб-разметке и кодированию, она включает в себя все связанные задачи разработки, такие как сценарии на стороне клиента, сценарии на стороне сервера, настройка безопасности сервера и сети, разработка электронной коммерции и разработка системы управления контентом (CMS).
Узнайте, почему тысячи клиентов используют CMS Hub для создания оптимизированного веб-сайта, который интегрируется с их данными HubSpot CRM и полным маркетинговым пакетом.
Почему важна веб-разработка?
Вы можете быть владельцем бизнеса, нанимающим разработчика-фрилансера для создания вашего веб-сайта, маркетологом, предлагающим свое видение вашей команде разработчиков, или студентом, который изучает развитие как карьеру. Независимо от того, кто вы и почему вы читаете это руководство, понимание основ разработки веб-сайтов может оказаться полезным в этом мире, основанном на технологиях.
Интернет не уйдет в ближайшее время. Фактически, он стал порталом и основным методом исследования, общения, обучения и развлечений в мире. По состоянию на 2019 год в мире насчитывается 4,2 миллиарда пользователей Интернета. Это более половины населения мира, и эти люди пользуются Интернетом по самым разным причинам.
Что общего у этих причин? Им нужен веб-сайт, и каждый веб-сайт требует квалифицированного веб-разработчика.
Веб-разработка - это также быстро развивающаяся отрасль.Ожидается, что с настоящего момента до 2028 года занятость веб-разработчиков вырастет на 13%. Это намного быстрее, чем в большинстве других профессий в сфере высоких технологий.
Основы веб-разработки
- Что такое веб-сайт
- Что такое IP-адрес
- Что означает HTTP
- Что такое кодирование
- Что означает интерфейс
- Что такое серверная часть
- Что такое CMS
- Что такое кибербезопасность
Теперь, когда мы определились с веб-разработкой, давайте рассмотрим некоторые основы веб-разработки, чтобы лучше познакомить вас с этой темой.
1. Что такое веб-сайт
Веб-сайты - это файлы, хранящиеся на серверах, которые представляют собой компьютеры, на которых размещаются (причудливый термин «хранить файлы для») веб-сайты. Эти серверы подключены к гигантской сети, называемой Интернетом… или Всемирной паутиной (если придерживаться терминологии 90-х годов). Подробнее о серверах мы поговорим в следующем разделе.
Браузеры - это компьютерные программы, которые загружают веб-сайты через ваше интернет-соединение, например Google Chrome или Internet Explorer.Ваш компьютер также известен как клиент .
2. Что такое IP-адрес
Интернет-протокол - это набор стандартов, регулирующих взаимодействие в Интернете.
Чтобы получить доступ к веб-сайту, вам необходимо знать его IP-адрес. IP-адрес - это уникальная строка чисел. Каждое устройство имеет IP-адрес, чтобы отличаться от миллиардов веб-сайтов и устройств, подключенных через Интернет.
IP-адрес для HubSpot - 104.16.249.5. Вы можете найти IP-адрес любого веб-сайта, посетив такой сайт, как Site 24x7, или используя командную строку в Windows или Network Utility> Traceroute на MacBook.
Чтобы узнать IP-адрес вашего устройства, вы также можете ввести «какой у меня IP-адрес» в поисковом браузере.
Хотя вы можете получить доступ к веб-сайту, используя его IP-адрес, большинство пользователей Интернета предпочитают использовать доменные имена или использовать поисковые системы.
3. Что такое HTTP
Протокол передачи гипертекста (HTTP) соединяет вас и ваш запрос веб-сайта с удаленным сервером, на котором хранятся все данные веб-сайта. Это набор правил (протокол), который определяет, как сообщения должны отправляться через Интернет.Он позволяет переключаться между страницами сайта и веб-сайтами.
Когда вы вводите веб-сайт в свой веб-браузер или ищете что-то в поисковой системе, HTTP предоставляет структуру, позволяющую клиенту (компьютеру) и серверу говорить на одном языке, когда они отправляют запросы и отвечают друг другу через Интернет. По сути, это переводчик между вами и Интернетом: он считывает запрос вашего веб-сайта, считывает код, отправленный обратно с сервера, и переводит его для вас в виде веб-сайта.
4. Что такое кодирование
Кодирование относится к написанию кода для серверов и приложений с использованием языков программирования. Их называют «языками», потому что они содержат словарный запас и грамматические правила для общения с компьютером. Они также включают специальные команды, сокращения и знаки препинания, которые могут быть прочитаны только устройствами и программами.
Все программное обеспечение написано по крайней мере на одном языке кодирования, но языки различаются в зависимости от платформы, операционной системы и стиля.Существует много различных типов языков программирования… все они делятся на две категории: интерфейсные и внутренние.
5. Что означает интерфейс пользователя
Внешний интерфейс (или клиентская сторона) - это сторона веб-сайта или программного обеспечения, которую вы видите и с которой взаимодействуете как пользователь Интернета. Когда информация веб-сайта передается с сервера в браузер, языки программирования внешнего интерфейса позволяют веб-сайту функционировать без постоянного «взаимодействия» с Интернетом.
Интерфейсный код позволяет таким пользователям, как вы и я, взаимодействовать с веб-сайтом и воспроизводить видео, увеличивать или уменьшать изображения, выделять текст и т. Д.Веб-разработчики, которые работают над интерфейсным кодом, работают над разработкой на стороне клиента.
Мы расскажем больше о фронтенд-разработке в следующем разделе.
6. Что такое серверная часть
Внутренняя часть (или серверная) - это сторона, которую вы не видите при использовании Интернета. Это цифровая инфраструктура, и для людей, не являющихся разработчиками, она выглядит как набор цифр, букв и символов.
Внутренних языков программирования больше, чем языков интерфейса. Это связано с тем, что браузеры - во внешнем интерфейсе - понимают только JavaScript, а сервер - в бэкенде - можно настроить так, чтобы он понимал практически любой язык.Далее мы поговорим о внутренней разработке.
7. Что такое CMS
Система управления контентом (CMS) - это веб-приложение или серия программ, используемых для создания и управления веб-контентом. (Примечание: CMS - это не то же самое, что и конструкторы сайтов, такие как Squarespace или Wix.)
Узнайте, почему тысячи клиентов используют CMS Hub для создания оптимизированного веб-сайта, который интегрируется с их данными HubSpot CRM и полным маркетинговым пакетом.
Хотя для создания веб-сайта не требуется, использование CMS упрощает задачу.Он предоставляет строительные блоки (например, плагины и надстройки) и позволяет создавать структуру с помощью вашего кода. CMS обычно используются для электронной коммерции и ведения блогов, но они полезны для всех типов веб-сайтов.
8. Что такое кибербезопасность
Пока существует Интернет, будут пользователи, которые будут искать уязвимости на веб-сайтах для раскрытия частной информации, кражи данных и сбоев серверов. Практика кибербезопасности для защиты данных, сетей и компьютеров от этих угроз.
Методы, используемые хакерами, постоянно развиваются, как и меры безопасности, принимаемые для защиты от них. Непонимание того, как ваш сайт может стать целью, может привести к катастрофе.
Итак, при изучении веб-разработки важно иметь хотя бы базовое понимание кибербезопасности - дополнительную информацию можно найти в нашем руководстве по кибербезопасности.
Типы веб-разработки
- Front-end разработка
- Внутренняя разработка
- Разработка полного стека
- Разработка веб-сайтов
- Разработка настольных ПК
- Мобильная разработка
- Разработка игр
- Встроенная разработка
- Разработка системы безопасности
Собираетесь ли вы нанять веб-разработчика или стать им, вы должны понимать различные типы веб-разработки, которые могут освоить разработчики.
Эти различные типы веб-разработки в первую очередь относятся к различным секторам профессии, в которых могут работать веб-разработчики ers - на некоторые из них мы ссылались в разделах выше. Некоторые из этих различий пересекаются, и часто веб-разработчики овладевают несколькими типами веб-разработки.
1. Front-end разработка
Front-end разработчики работают с клиентской или пользовательской стороной веб-сайтов, программ и программного обеспечения - другими словами, над тем, что видят пользователи.Они проектируют и разрабатывают визуальные аспекты, включая макет, навигацию, графику и другую эстетику.
Основная задача этих разработчиков - создавать интерфейсы, которые помогают пользователям достигать своих целей, поэтому они также часто участвуют в пользовательском аспекте своих проектов. Опыт работы с пользователем помогает интерфейсным разработчикам формировать сочувствие к конечным пользователям.
2. Внутренняя разработка
Если интерфейс - это то, что видят пользователи, то бэкэнд - это то, что они не видят.Back-end веб-разработчики работают на серверах веб-сайтов, программ и программного обеспечения, чтобы убедиться, что все работает правильно за кулисами.
Эти разработчики работают в таких системах, как серверы, операционные системы, API-интерфейсы и базы данных, и управляют кодом безопасности, контентом и структурой сайта. Они сотрудничают с интерфейсными разработчиками, чтобы довести свои продукты до пользователей.
3. Разработка полного стека
Разработчики полного стека работают как на внешней, так и на внутренней стороне веб-сайта.Они могут создать веб-сайт, приложение или программное обеспечение от начала до конца. «Стек» относится к различным технологиям, которые выполняют разные функции на одном и том же веб-сайте, например сервер, интерфейс и т. Д.
Поскольку разработчикам полного стека требуются годы для получения необходимого опыта, эта роль часто востребована. Их всесторонние знания помогают им оптимизировать производительность, выявлять проблемы до их возникновения и помогают членам команды понимать различные части веб-службы.
4. Разработка веб-сайтов
Разработчики веб-сайтов могут быть фронтенд-разработчиками, бэкэнд-разработчиками или разработчиками полного цикла. Однако эти профессионалы специализируются на создании веб-сайтов, в отличие от мобильных приложений, программного обеспечения для настольных компьютеров или видеоигр.
5. Разработка настольных компьютеров
Разработчики настольных компьютеров специализируются на создании программных приложений, которые запускаются локально на вашем устройстве, а не через Интернет в веб-браузере. Иногда набор навыков этих разработчиков совпадает с навыками веб-разработчиков, если приложение может работать как в интерактивном, так и в автономном режиме.
6. Мобильная разработка
Мобильные разработчики создают приложения для мобильных устройств, таких как смартфоны или планшеты. Мобильные приложения работают иначе, чем другие веб-сайты и программы, поэтому для этого требуется отдельный набор навыков разработки и знание специализированных языков программирования.
7. Разработка игр
Разработчики игр специализируются на написании кода для видеоигр, как консольных (Xbox, PlayStation и т. Д.), Так и мобильных игр, что означает, что эта специальность частично перекликается с разработкой мобильных приложений.
Разработчики игр, однако, специализируются на создании игрового опыта, что само по себе является совершенно другим набором навыков.
8. Встроенная разработка
Разработчики встраиваемых систем работают со всем оборудованием, кроме компьютера (или, по крайней мере, с тем, что большинство из нас представляет себе как «компьютеры», с клавиатурой и экраном). Сюда входят электронные интерфейсы, потребительские устройства, устройства IoT, системы реального времени и многое другое.
В связи с недавним ростом количества взаимосвязанных устройств, таких как интеллектуальные устройства, технологии Bluetooth и виртуальные помощники, разработка встраиваемых систем становится востребованной практикой.
9. Развитие безопасности
Разработчики системы безопасности устанавливают методы и процедуры безопасности программного обеспечения или веб-сайта. Эти разработчики обычно действуют как этические хакеры, пытаясь «взломать» веб-сайты, чтобы выявить уязвимости без намерения причинить вред. Они также создают системы, которые обнаруживают и устраняют риски безопасности.
Теперь давайте погрузимся в процесс веб-разработки (который включает в себя многие из этих типов разработки).
Процесс разработки веб-сайтов
Процесс создания веб-сайта не так прост, как 1-2-3.Каждый путь разработки отличается в зависимости от типа веб-сайта, языков программирования и ресурсов.
Следующий раздел служит кратким обзором процесса веб-разработки и кратким введением в наиболее распространенные языки и опции CMS.
1. Составьте план.
Перед тем, как прикоснуться ручкой к бумаге или руками к клавиатуре, жизненно важно сначала связаться с командами и персоналом в вашей организации, чтобы разработать план для вашего веб-сайта.
Вот несколько вопросов, которые следует рассмотреть перед созданием первого черновика сайта:
- Какова цель вашего сайта?
- Кто ваша аудитория, и хотите ли вы, чтобы они занимались на вашем сайте?
- Какой тип веб-сайта? (е.грамм. базовая информационная, членская, интернет-магазин)
- Какой контент вы собираетесь публиковать и в каком объеме? Какова цель этого контента?
- Рассматривая общую картину, как вы структурируете свой веб-сайт для наилучшей навигации?
- Каков ваш бюджет?
Ответ на вопросы потребует взаимодействия между вашими веб-разработчиками, маркетологами и финансовыми командами, чтобы делать информированные звонки. Отсюда вы можете составить список своих приоритетов и составить расписание на время до обеда.Намного проще создать дорожную карту в начале процесса, чем повернуть вспять, когда вы столкнетесь с препятствием.
2. Создайте каркас.
Все хорошие сайты начинаются с проекта. Разработчики называют это каркасом или картой сайта (не путать с sitemap.XML, XML-файлом, который помогает поисковой выдаче сканировать и находить ваш сайт). Это не обязательно должен быть официальный документ; это просто видение вашего сайта, которое даст вам и вашим разработчикам направление и отправную точку.Вы можете нарисовать его на доске или использовать такой инструмент, как Invision, Slickplan или Mindnode.
Так же, как бизнес-план дает потенциальному инвестору представление о ваших целях и результатах, карта сайта дает разработчику представление о том, что вы изображаете, и информацию, необходимую для реализации вашего видения. Вы можете создать карту сайта самостоятельно или сотрудничать со своим разработчиком (-ами).
Вот несколько вопросов, которые следует задать себе при планировании сайта:
- Какие отдельные страницы вам нужны? Какой контент будет на этих страницах?
- Как вы можете организовать эти страницы по категориям? (Эти категории могут представлять меню вашей домашней страницы - если это помогает думать об этом так.)
- Какова иерархия страниц на вашем сайте?
- Как страницы будут связываться друг с другом?
- Какие страницы и категории важны для вашего сайта и взаимодействия с пользователем, а какие можно удалить или объединить?
Опять же, рекомендуется проконсультироваться с другими командами в вашей организации. Если у вас есть команда SEO и / или контент-стратегии, их вклад будет иметь решающее значение для структуры ссылок и категоризации ваших страниц.
3. Напишите код вашего сайта.
Следующим шагом в процессе веб-разработки является написание кода.
Разработчики будут использовать разные языки кодирования для внешнего и внутреннего интерфейса веб-сайтов, а также для различных функций сайта (таких как дизайн, интерактивность и т. Д.). Эти разные языки работают вместе для создания и запуска вашего сайта.
Начнем с наиболее часто используемых языков. Почти каждый веб-сайт использует эти три вместе, и ваш, вероятно, тоже.
HTML
HyperText Markup Language (HTML) используется с 1990-х годов.Это основа всех веб-сайтов и представляет собой минимум того, что необходимо для создания веб-сайта. (Да, вы можете создать веб-сайт, используя только HTML. Однако это выглядело бы не слишком красиво.)
Ниже приведен HTML-код базовой кнопки Bootstrap.
Такие языки, как CSS и JavaScript, улучшают и изменяют базовую структуру сайта, созданную с помощью HTML-кодов. HTML5 является самой последней версией и поддерживает кроссплатформенные браузерные функции, что делает его популярным в разработке мобильных приложений.
CSS
Каскадные таблицы стилей (CSS) были разработаны в конце 1990-х годов. Он добавляет на веб-сайты такие элементы дизайна, как типографика, цвета и макеты - это косметический код.
CSS позволяет разработчикам преобразовать ваш сайт в соответствии с эстетикой, которую вы задумали для своего сайта, и, как и HTML5, CSS совместим со всеми браузерами.
Вот фрагмент кода для настройки элемента jumbotron в Bootstrap CSS.
.jumbotron {
background: # 27a967;
цвет: белый;
выравнивание текста: по центру;
} .jumbotron p {
цвет: белый;
размер шрифта: 26 пикселей;
}
JavaScript
JavaScript - это вершина языков программирования. Созданный в середине 90-х, JavaScript используется для добавления функциональности веб-сайтам. Разработчики используют его для добавления анимации, автоматизации задач на определенных страницах и добавления интерактивных функций, улучшающих взаимодействие с пользователем.
JavaScript быстро развивается. Когда-то считавшийся «игрушечным» языком, JavaScript сейчас является наиболее широко используемым языком программирования в мире.С помощью Node.Js это теперь серверный язык программирования. Это первый язык, который понимает браузер, и некоторые даже обсуждали применение к нему машинного обучения.
Ниже приведен фрагмент кода JavaScript для автоматического открытия ссылок в новом окне WordPress.
HTML, CSS, JavaScript - «большая тройка» веб-разработки. Почти каждый веб-сайт использует их в той или иной мере. Существует множество других языков, таких как серверные языки, такие как Java, C ++, Python и SQL, но понимание этих трех является основополагающим для ваших знаний о разработке веб-сайтов.
4. Создайте внутреннюю часть своего веб-сайта.
Написание кода может быть одной из наиболее сложных частей веб-разработки, но это далеко не единственный компонент. Вам также необходимо создать внутреннюю и внешнюю структуру и дизайн сайта.
Начнем с бэкенда.
Серверная часть обрабатывает данные, которые обеспечивают функциональность клиентской части. Например, серверная часть Facebook хранит мои фотографии, так что интерфейс может позволить другим просматривать их.Он состоит из двух основных компонентов:
- Базы данных , который отвечает за хранение, организацию и обработку данных, чтобы их можно было получить по запросам сервера
- Серверы , которые представляют собой оборудование и программное обеспечение, из которых состоит ваш компьютер. Серверы несут ответственность за отправку, обработку и получение запросов данных. Они являются посредником между базой данных и клиентом / браузером. Браузер, по сути, скажет серверу: «Мне нужна эта информация», и сервер будет знать, как получить эту информацию из базы данных и отправить ее клиенту.
Эти компоненты работают вместе, создавая основу для каждого веб-сайта.
Что касается создания вашего веб-сайта , backend-разработчики установят три вещи.
- Ваш логический код , который, по сути, представляет собой набор правил того, как ваш веб-сайт будет отвечать на определенные запросы и как будут взаимодействовать объекты вашего веб-сайта.
- Управление базой данных , с помощью которого ваш веб-сайт будет организовывать, управлять и извлекать свои данные.
- Ваша инфраструктура , на которой будет размещаться ваш сайт. Хостинг собственного сайта даст вам больший контроль, но это намного дороже и требует от вас поддержания работоспособности и безопасности собственного сервера.
С этими компонентами и решениями ваш веб-сайт будет готов к интерфейсной разработке.
Примечание : бэкэнд слегка касается веб-разработки, потому что вам не всегда нужен бэкэнд, если вы не храните какие-либо данные.«Данные» в этом контексте означает любую введенную пользователем информацию, которую необходимо сохранить и сохранить. Подумайте о входе на веб-сайт. Если у них нет серверной части, как они могут запомнить вашу информацию для входа? Или какие у тебя настройки профиля? Чтобы получить эту информацию, вам понадобится серверная часть.
Например,Facebook должен знать, какие люди есть в вашем списке друзей, к каким событиям вы присоединились, какие сообщения вы создали и многое другое. Это все «данные», которые хранятся в базе данных. Если бы у них не было серверной части с базой данных, ни одна из этих данных не была бы доступна для них.
С другой стороны, веб-сайт, который является чисто информационным и не требует от пользователей ввода каких-либо данных, не нуждается в серверной части.
Итак, если у вас нет данных, вам не обязательно нужна внутренняя разработка. Но это не значит, что вы не должны изучать основы. Никогда не знаешь, когда это может понадобиться.
5. Создайте внешний вид своего веб-сайта.
Если вы когда-нибудь занимались веб-дизайном или играли с веб-сайтом в WordPress, Squarespace или Google Sites, вы коснулись интерфейсной веб-разработки.
Внешний интерфейс важен - это то, что видят ваши посетители, клиенты и пользователи и как они будут использовать ваш сайт.
Внешняя (или клиентская) разработка включает комбинацию JavaScript, HTML и CSS. Он также управляет такими компонентами, как типографика и шрифты, навигация, позиционирование, совместимость и скорость реакции браузера. Эта часть будет больше отражать ваше первоначальное видение сайта и то, что вы включили в свой каркас.
По мере изменения технологий и предпочтений потребителей кодирование на стороне клиента имеет тенденцию устаревать… намного быстрее, чем разработка серверной части.Здесь пригодятся ресурсы для кодирования (например, те, которые мы включили ниже).
6. (Необязательно) Работа с CMS.
Почему кто-то предпочтет CMS кодированию «вручную» или «с нуля»? Что ж, CMS проще в использовании (вам нужно писать меньше кода), и в ней часто есть инструменты для размещения сайта. С другой стороны, он менее гибкий и, следовательно, дает вам меньше контроля над интерфейсом.
Узнайте, почему тысячи клиентов используют CMS HubSpot для создания оптимизированного веб-сайта, который интегрируется с их данными HubSpot CRM и полным маркетинговым стеком.
ОпцииCMS также часто включают плагины, которые устраняют необходимость в написании серверной части. Например, существуют плагины WordPress для электронной коммерции, поэтому вместо создания сложной серверной части для списания средств с кредитных карт клиентов вы можете просто использовать существующий плагин и вообще избежать необходимости иметь дело с базами данных и серверным кодом.
Популярные системы управления контентом включают HubSpot, Joomla, Magento и WordPress, которые занимают более 60% рынка. (В данном случае мы говорим о программном обеспечении WordPress с открытым исходным кодом, а не о конструкторе сайтов WordPress.)
7. Получите доменное имя.
На этом этапе у вашего веб-сайта будет IP-адрес. Ему также необходимо доменное имя, запоминающееся имя веб-сайта, которое ваши посетители могут использовать, чтобы найти ваш сайт.
Возможно, вы слышали о таких сайтах, как GoDaddy и Hover. Эти услуги помогут вам приобрести доменное имя и зарегистрироваться в ICANN (Интернет-корпорация по присвоению имен и номеров). Большинство регистраций доменов действительны в течение года, прежде чем вам потребуется продление.
Создатели веб-сайтов и службы хостинга, такие как WordPress и Squarespace, также позволяют приобретать доменное имя.
8. Запустите свой сайт.
После того, как вы настроили доменное имя и связали его с хостом, вы почти готовы опубликовать свою работу в Интернете.
Но не так быстро - есть еще несколько вещей, которые вам нужно проверить перед официальным запуском. К ним относятся планирование обязанностей в вашей команде, тщательное тестирование вашего сайта на наличие сбоев, оптимизация для SEO и окончательная проверка перед тем, как «щелкнуть выключателем» и запустить ваш сайт.
Ресурсы для разработки веб-сайтов
Хотите узнать больше о разработке и кодировании? Помимо связи и взаимодействия с другими разработчиками, существует множество ресурсов, к которым вы можете обратиться, чтобы углубить свое понимание или веб-разработку.
Курсы и классы веб-разработки
Если вы хотите изучить внутреннее, внешнее или полное кодирование, вот несколько онлайн-курсов и классов, рекомендованных нашими собственными разработчиками HubSpot.
УчебникиPoint
Все материалы и ресурсы на TutorialsPoint бесплатны. Среди учебных пособий, электронных книг и видео TutorialsPoint предлагает множество различных способов обучения.
яйцо
Согласно их веб-сайту, «egghead - это группа работающих профессионалов в области веб-разработки и участников с открытым исходным кодом, которые предоставляют вам краткие, насыщенные информацией видеокурсы по лучшим инструментам в отрасли.«Пользователи могут проходить курсы, слушать подкасты или брать уроки по широкому кругу тем веб-разработки.
Ханская академия
Khan Academy - широко известный бесплатный образовательный ресурс. Пользователи могут изучать все, что угодно, от макроэкономики до линейной алгебры и истории США, а также некоторые компьютерные темы.
бесплатноCodeCamp
freeCodeCamp - это некоммерческая организация (например, Khan Academy), которая помогает людям бесплатно научиться программировать. Благодаря тысячам статей, видео и интерактивных уроков, а также работе групп по всему миру, freeCodeCamp помогает тысячам разработчиков и инженеров узнать о программировании и разработке месторождений.
Дом на дереве
Team Treehouse - это программа онлайн-обучения на основе подписки. Пользователи платят ежемесячную плату и получают доступ к сотням курсов по более чем 20 различным темам. Treehouse может научить вас всему, что вам нужно знать о веб-разработке, от JavaScript до Python и PHP.
Сообщества веб-разработчиков
веб-разработчика - мастера Интернета, поэтому имело смысл проводить там время.
Согласно Code Condo, разработчики присоединяются к этим сообществам за:
- Актуальная информация и решение проблем
- Проницательные ответы, новые перспективы
- Советы и рекомендации для программистов любого уровня
- Ссылки на ресурсы, выступления и исследования
- Встреча с новыми друзьями, товарищами по программе и потенциальными партнерами
Вот несколько онлайн-сообществ, рекомендованных нашими разработчиками HubSpot.
Переполнение стека
Stack Overflow был представлен десять лет назад и с тех пор стал одним из самых популярных сообществ программистов в мире. По словам соучредителя Джеффа Этвуда, «[Stack Overflow] создан программистами, для программистов, с конечной целью коллективно увеличить общую сумму хороших знаний в области программирования в мире».
Stack Overflow - отличное место, чтобы задать вопросы, потому что в большинстве случаев другие разработчики задавали те же самые вопросы и отвечали на них.Форумы в Stack Overflow позволяют поддерживать связь с другими разработчиками, а также держать вас в курсе.
Сеть разработки Mozilla
Mozilla Development Network (MDN), как известно, является более тщательным и точным, чем другие онлайн-ресурсы. Это не столько сообщество, сколько исчерпывающий ресурс и библиотека документов для языков программирования. MDN полезен, когда вы изучаете, как работают определенные функции, и оставайтесь в курсе новостей кодирования и разработки.
Reddit - это форумное сообщество, где разработчики всех уровней собираются, чтобы задавать вопросы и отвечать на них.Он невероятно интерактивен и включает людей со всего мира. Вы также можете присоединиться к «субреддитам» в зависимости от темы, например, веб-дизайн, JavaScript или фриланс.
Погрузитесь в веб-разработку
Интернет никуда не денется. С каждым днем ситуация становится лучше, и веб-разработчики находятся на переднем крае этих нововведений и улучшений.