Как создать свой сайт

Содержание

Слайд 2

Как создать свой сайт – этот вопрос задаёт себе огромное количество

Как создать свой сайт – этот вопрос задаёт себе огромное количество

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

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

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

Слайд 3

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

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

HTML - (Это язык,

который является основой любого сайта, поэтому его просто необходимо знать)
CSS - (Язык, без которого практически немыслим дизайн сайта)
JavaScript - (проверка введённых данных в форму, выпадающие меню, итд)
PHP - (скрипты авторизации и регистрации пользователей, принятие и обработка данных, реализация поиска по сайту, итд)
MySQL - (работа с базами данных)
Слайд 4

Создание сайта средствами HTML Первое, что нужно решить: где создавать сайт?

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

Первое, что нужно решить: где создавать сайт? Разумеется,

можно и в обычном Блокноте. 
Устанавливаем и запускаем редактор. Сразу сохраняем страницу под именем "index.html". (Файл-Сохранить как..)
Слайд 5

Открываем файл с помощью Блокнота(Правой кнопкой мыши/Открыть с помощью/выбрать другое приложение/ещё приложения/блокнот)

Открываем файл с помощью Блокнота(Правой кнопкой мыши/Открыть с помощью/выбрать другое приложение/ещё

приложения/блокнот)
Слайд 6

Теперь пишем в окне редактора как на рисунке: Затем нажимаем Файл / Сохранить и закрываем Блокнот

Теперь пишем в окне редактора как на рисунке:
Затем нажимаем Файл /

Сохранить и закрываем Блокнот
Слайд 7

Открываем файл index.html двойным нажатием левой кнопкой мыши Это ваша первая

Открываем файл index.html двойным нажатием левой кнопкой мыши
Это ваша первая HTML

страничка, она пока что пустая, но сейчас мы добавим в неё немного текста.
Закрываем страничку.
Слайд 8

Снова открываем страничку в режиме Блокнота и добавляем туда новый текст между Тегами Сохраняем/Закрываем

Снова открываем страничку в режиме Блокнота и добавляем туда новый текст

между Тегами
Сохраняем/Закрываем
Слайд 9

Теперь снова открываем файл index.html двойным нажатием ЛКМ Получается такая страничка

Теперь снова открываем файл index.html двойным нажатием ЛКМ
Получается такая страничка
ВАЖНО! Если

при открытии странички у вас вместо текста получились иероглифы, просто откройте страничку с помощью другого браузера(у меня это Хром)
Слайд 10

, , - это открывающие теги. Иногда их ещё называют дескрипторы.

, ,  - это открывающие теги. Иногда их ещё называют дескрипторы.
,

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

Теперь обсудим что мы такое написали:

Слайд 11

Тег означает начало HTML-документа. Тег означает начало заголовка HTML-документа. Сюда могут

Тег  означает начало HTML-документа.
Тег  означает начало заголовка HTML-документа. Сюда могут входить, например, заголовок

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

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

Слайд 12

Теперь давайте немного добавим в нашу страницу кода, уж, больно она

Теперь давайте немного добавим в нашу страницу кода, уж, больно она

примитивная у нас пока. Внутри тега  добавьте такой код:

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

Слайд 13

Если у вас как и у меня после открытия странички с

Если у вас как и у меня после открытия странички с

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

У нас появилось Название странички!

Слайд 14

Надеюсь, что Вы уже поняли, что раз содержимое страницы - значит,

Надеюсь, что Вы уже поняли, что раз содержимое страницы - значит,

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

Теперь займёмся содержимым документа.

Теги 

,

,

,

,

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

Сохраняем страницу и вот такой результат у нас получился:

Сохраняем страницу и вот такой результат у нас получился:

Слайд 16

Создаём новый документ Блакнот/Сохраняем под названием index.html И пишем внутри данный код: Практическое задание:

Создаём новый документ Блакнот/Сохраняем под названием index.html
И пишем внутри данный код:

Практическое

задание:
Слайд 17

Сохраняем, закрываем открываем через браузер:

Сохраняем, закрываем открываем через браузер:

Слайд 18

Добавим немного цвета в нашу страничку: Открываем в с помощью блокнота и добавляем текст в тег

Добавим немного цвета в нашу страничку:
Открываем в с помощью блокнота и

добавляем текст в тег
Слайд 19

Проверяем наши изменения

Проверяем наши изменения

Слайд 20

Нужно подобрать также другие цвета для практической. В интернете ищем таблицу

Нужно подобрать также другие цвета для практической.
В интернете ищем таблицу HTML

– цветов:
Я выбрал самую простую:
Слайд 21

Выбираем из таблицы любые цвета и изменяем наш код:

Выбираем из таблицы любые цвета и изменяем наш код: