2020-06-08
136
Как создать свой сайт – этот вопрос задаёт себе огромное количество людей, недаром он вводится только в одном Yandex примерно 1000 раз в сутки. Но прежде, чем мы будем знакомиться с темой создания и раскрутки сайта, я хочу вас предупредить о следующем:
1. Многие думают, что создать сайт – это очень просто и быстро. И самое интересное, что в чём-то они правы. Действительно, существует большое количество CMS (систем управления контентом), которые позволяют создать сайт буквально за считанные минуты. Но создать сайт – это дело часто быстрое, а вот наполнить его полезным содержимым – дело, порой, нескольких лет.
2. Многие думают, что создать сайт – это очень сложно. Опять же – всё относительно. Смотря, какой сайт. Создать сайт на какой-нибудь CMS – очень просто, а вот разработать огромный портал с нуля да ещё и с кучей PHP-скриптов – это дело весьма сложное.
Итак, получается, что создание сайта – это дело, которое способен освоить практически любой человек, даже школьник, но чтобы стать профессионалом - придётся много работать.
Для создания своего собственного сайта, необходимо изучить следующие разделы:
|
|
|
1. HTML -Это язык, который является основой любого сайта, поэтому его просто необходимо знать.
2. CSS -Язык, без которого практически немыслим дизайн сайта.
3. JavaScript -Это язык, позволяющий писать различные скрипты, например, проверка введённых данных в форму, делать выпадающие меню, делать красивый и динамический сайт.
4. PHP -Этот язык является самым популярным по программированию Web-серверов. В частности, можно писать скрипты авторизации и регистрации пользователей, принимать и обрабатывать данные из формы, реализовывать поиск по сайту, делать собственные движки, другими словами, примеров использования PHP – бесчисленное множество.
5. MySQL -Данное программное обеспечение позволяет работать с базами данных, используя язык запросов SQL. MySQL - необходимая вещь для создания серьёзных сайтов.
После создания сайта необходимо разместить его в Интернете. То есть, надо знать, как разместить сайт в Интернете, где его разместить, как это сделать бесплатно и что лучше: разместить сайт бесплатно или за деньги? Наконец, после размещения стоит задуматься над вопросом: как раскрутить сайт. Всем этим мы и будем заниматься на наших занятиях.
Язык HTML
Мой первый сайт
HTML - это гипертекстовый язык разметки, на котором создаётся абсолютное большинство страниц в Интернете. Его знание необходимо абсолютно любому Web-мастеру, причём совершенно не важно, как Вы создаёте сайты: абсолютно с нуля или же с помощью какого-нибудь инструмента. И в первом, и во втором случае Вы будете использовать язык HTML.
|
|
|
Сам язык HTML состоит из множества элементов, так называемых тегов HTML. Каждый тег HTML выполняет свою задачу: одни вставляют ссылку, другие картинку, третьи создают таблицы для выравнивания других тегов, четвёртые позволяют делать отдельные блоки на странице, - все эти элементы Вы будете использовать при создании своих сайтов.
Также не так давно появился HTML 5. Это расширенный стандарт языка гипертекстовой разметки. В него вошло множество новых элементов, расширяющих возможности Web-мастеров, с которыми мы тоже познакомимся.
Ладно, пора приступать к созданию нашего с Вами первого сайта.
Первое, что нужно решить: где создавать сайт? Разумеется, можно и в обычном Блокноте. Но мы лучше будем использовать что-нибудь "потяжелее" - редактор "Notepad++".
Устанавливаем и запускаем редактор. Сразу сохраняем страницу под именем "index.html".
Теперь пишем (пожалуйста, напишите, а не скопируйте!) в окне редактора:
| <html> <head> </head> <body> </body> </html> |
Написали? Сохранили? Поздравляю Вас, Вы только что создали самую простую (но очень важную!!!) HTML-страницу! Теперь можно нашу страницу открыть в браузере. Так и поступим.
Что-нибудь видите? Скорее всего, нет. И это неудивительно, ведь это самая элементарная страница.
Но Вы можете посмотреть исходник страницы. Для этого в меню "Вид" выберите пункт меню "Просмотр HTML кода", "Исходный код страницы" или что-то в этом духе, в зависимости от Вашего браузера. Также можно просто нажать CTRL-U (в большинстве браузеров откроется исходный код страницы), и Вы увидите Ваш код.
Вернемся к нашему редактору и немного добавим текста на нашу страничку:
| <html> <head> </head> <body> Привет! Меня зовут Светлана, можете меня называть также Букля:) </body> </html> |
Еще раз сохраним документ и обновим его в браузере.
А теперь давайте обсудим, что мы здесь написали.
<html>, <head>, <body> - это открывающие теги. Иногда их ещё называют дескрипторы.
</html>, </head>, </body> - это закрывающие теги.
Теги бывают парные и одиночные.
Парные теги - это теги, которые нуждаются в закрывающем (то есть все три тега, которые мы использовали являются парными).
Одиночные теги - это теги, которые не требуют наличия закрывающего тега.
Теперь, что касается назначения данных тегов:
Тег <html> означает начало HTML-документа.
Тег <head> означает начало заголовка HTML-документа. Сюда могут входить, например, заголовок страницы, различные мета-теги. Обо всём об этом погорим чуть ниже.
Тег </head> означает конец заголовка HTML-документа.
Тег <body> означает начало самого документа. То есть всё (текст, картинки, ссылки и т. д.), что Вы видите на страницах в Интернете - всё расположено в теге <body>.
Тег </body> означает конец содержимого документа.
Тег </html> означает конец HTML-страницы.
Теперь давайте немного добавим в нашу страницу кода, уж, больно она примитивная у нас пока. Внутри тега <head> добавьте такой код:
| <title>Личная страница</title> <meta http-equiv="Content-type" content="text/html" charset="windows-1251"> |
Тег <title> определяет заголовок страницы, который будет отображён в заголовке окна браузера.
Тег <title> сообщает, что здесь заголовок заканчивается.
Что касается тега <meta>, то здесь сначала познакомимся с понятием атрибутов тегов.
У тегов могут быть различные атрибуты, определяющие их свойства, например, вид их содержимого.
Атрибуты ставятся внутри открывающего тега и имеют следующий вид: Название = "значение".
Тег <meta> у нас определяет тип содержимого документа.
Атрибут http-equiv и его значение Content-type определяет, что сейчас будет описан тип документа.
Атрибут content и его значение text/html сообщают браузеру, что данный документ является HTML-документом (text/html).
Атрибут charset и его значение windows-1251 сообщают браузеру, что кодировка этого документа - кириллица (windows-1251).
|
|
|
Это был пример мета-тегов.
Язык HTML
Заголовки. Атрибуты цвета тэга body.
Теперь займёмся содержимым документа.
Надеюсь, что Вы уже поняли, что раз содержимое страницы - значит, будем писать что-то внутри тега <body>.
Давайте напишем следующий код внутри тега <body>:
| <h1>Заголовок 1-го уровня</h1> <h2>Заголовок 2-го уровня</h2> <h3>Заголовок 3-го уровня</h3> <h4>Заголовок 4-го уровня</h4> <h5>Заголовок 5-го уровня</h5> <h6>Заголовок 6-го уровня</h6> |
Теги <h1>, <h2>, <h3>, <h4>, <h5>, <h6> - выводят текст в браузере. Причём этот текст является заголовком, более того, чем больше цифра в тэге (от 1-го до 6-ти), тем менее крупным шрифтом будет выведен соответствующий текст.
Таким образом, код Вашей страницы имеет вид:
| <html> <head> <title>Заголовки разного уровня</title> <meta http-equiv="Content-type" content="text/html" charset="windows-1251"> </head> <body> <h1>Заголовок 1-го уровня</h1> <h2>Заголовок 2-го уровня</h2> <h3>Заголовок 3-го уровня</h3> <h4>Заголовок 4-го уровня</h4> <h5>Заголовок 5-го уровня</h5> <h6>Заголовок 6-го уровня</h6> </body> </html> |
Сохраните страницу и посмотрите на неё в браузере.
Практическое задание: написать страницу-считалку «Я знаю 5…», в которой каждую строчку создаем заголовком следующего уровня.
|
Также можно добавить немного атрибутов и в тег <body>.
Давайте добавим атрибут text со значением green (зелёный). И атрибут bgcolor со значением yellow (жёлтый).
Таким образом, тег <body> выглядит так: <body text ="green" bgcolor ="yellow">
Сохраните страницу и посмотрите на неё в браузере. Как видите, фон страницы стал жёлтым, а текст стал зелёным.
| Практическое задание: используя таблицу HTML – цветов, подобрать цвета для страницы – считалки. |
