Всем привет, в данном курсе мы будем изучать HTML с полного нуля. Даже если вы никогда не занимались программированием и думаете, что это не ваше, то попробуйте прочитать эти статьи!
Не будем углубляться в дебри, не будем лить много воды, а для тех кто хочет много знать, можно воспользоваться поисковиком, КСТАТИ, УМЕНИЕ НАХОДИТЬ ИНФОРМАЦИЮ В ИНТЕРНЕТЕ, КАЧЕСТВО КОТОРОЕ ЦЕНИТСЯ В ПРОГРАММИСТАХ ОЧЕНЬ СИЛЬНО, дальше поймете почему!
Итак HTML - это язык гипертекстовой разметки, полностью звучит так HyperText Markup Language. Код который написан на html открывается в любом браузере, далее вы сами попробуете написать код и открыть его! Писать сам код мы будем в специализированных приложениях, я использую Sublime Text 3. Его просто скачать в интернете, но для облегчения задачи, оставлю тут ссылку: https://www.sublimetext.com/3.
Итак, скачали саблайм, если он скачался на и все органы управления на другом языке, то вот ссылка https://pc.ru/articles/rusificiruem-sublime-text-3 которая вам поможет его русифицировать!
Для начала давайте создадим на рабочем столе папку, в которой будут сохраняться файлы. Для этого нажимаем правой кнопкой мыши на рабочем столе, высветиться меню, как на картинке ниже, наведем мышью на поле создать и откроется доп. меню. Там мы выбираем папку, называем ее как вам угодно.
Далее открываем уже русифицированный саблайм и начинаем изучение html. Для начала создадим файл, в котором будем писать код. Для этого нажмем в левом верхнем углу, на кнопку файл, в выпадающем меню, выбираем новый файл.
Отлично, после создания нового файла, нам нужно задать его имя и форма. По этикету, да у программистов есть свой этикет ну или общепринятые нормы написания кода, правда не все этим пользуются! Да, если вы новичок и ничего не понимаете - это абсолютно нормально, так как по чуть чуть с изучением курсов, вы постепенно начнете все понимать, не надо гнаться сразу за всем.
Итак созданный файл называем index и присваиваем ему формат html. формат указывается в любом файле на компьютере, он нужен для того, чтобы компьютер понимал какую кодировку использовать для того или иного документа. А чтобы задать имя и формат файлу, зажимаем горячие клавиши Ctrl + S и вам высветится окно сохранения файла, в нем вы выбираете ранее созданную папку и прописываете сохранить файл с выше указаным именем и форматом, образец на картинке!
Обратите внимание, если вы все сделали правильно, то название untitled, которое на картинке подчеркнуто красным цветом, после сохранение поменят название и формат, на тот, который нам нужен.
Итак мы создали файл в котором будем работать, а теперь давайте познакомимся с базовыми тегами html. Тег - это команды, которые используются для описание содержимого страницы, каждый тег пишется в скобках (галочках) <> Давайте рассмотрим пример, любой сайт начинается с тега <html> - это тег контейнер, с которого начинается любой сайт, и внутри этого тега, пишутся другие. Тег <html> является парным и требует закрытия, которое выглядит следующим образом </html>. Да для закрытия тега используется тот же самый тег, только перед ним ставится слеш / . Но не все теги требуют закрытия, в дальнейшем мы вернемся этому вопросу и вы все поймете. В саблайм есть удобная функция, которая помогает вам правильно писать все теги и даже готовые шаблоны, для того чтобы понять что это, начните писать в саблайм ТЕГ<HTML>
Как только вы начнете писать, саблайм сразу же накидает вам готовые варианты на выбор, что намного упрощает нам задачу. Поэтому я дважды щелкну, на предложенный тег который я итак хотел написать.
Вот насколько нам облегчил написание кода саблайм. Это стандартный шаблон, который используется для написания сайта. Обратите внимание, красным, желтым и зеленым цветами, я подчеркнул парные теги, которые открываются и закрываются, а синим не парный тег, который не требует закрытия. Не будем сейчас разбираться во всех, так как мы затронем их далее, просто запомним это как пример.
Итак, мы создали шаблон, написали в контейнере <HTML> </HTML>Давайте же разберемся в этих тегах.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
</body>
</html>
Тег <!DOCTYPE html> не требует закрытия и нужен для того, чтобы указать тип документа. Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, поскольку HTML существует в нескольких версия.
Тег <html> мы уже разбирали, но повторим - это контейнер, внутри которого указываются все остальные теги, он необходим, без него не будет работать сайт. Как правило тег в документе тег идет вторым, после определяющего тега, который мы разобрали выше!
Затем идет тег <head>, тег парный и требует закрытия, переводится как "голова" и нужен для хранения других элементов, цель которых — помочь браузеру в работе с данными. Также внутри контейнера <head> находятся метатеги, которые используются для хранения информации предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных. Не будем останавливаться на метатегах, так как в дальнейшем вернемся к этому, сейчас остановимся на тегах <title></title>
Попробуйте указать между тегами <ttlei></title>, любую фразу, я например укажу: "Приветствую Вас" пример на картинке ниже
Сохраняем файл уже знакомой вам горячей клавишей Ctrl + S, после чего, перейдите в папку с вашим документом, который мы назвали index.html и откройте его, он должен открыться в браузере. Увидели вашу надпись? Отлично! Думаю вы уже догадались что тег <ttlei> отвечает за заголовок, но его важность состоит еще и в другом и позже вы поймете почему. Идем дальше
Открывается тег <body> и я думаю вы уже поняли, что он переводится как тело. И да, в этом теге уже будет находится вся информация сайта, которую вы видите. Все тексты, кнопки, прочее прочее, находится в теге <body>. А теперь попробуйте написать какой нибудь коротенький текст ну или скопировать его среди готовых и разместить его в теге <body>. Пример <body> Ваш любой текст </body> на картинке это выглядит следующим образом!
Естественно, сохраните эти изменения и откройте ваш файл index.html. Вы увидите, что на вашем сайте появилось наполнение, пусть и маленькое. Теперь, У вас есть, своя страничка, пусть ее нет в сети, на ней мало информации, но зато, вы теперь знаете как ее создать и начать заполнять. В следующих уроках, мы будем изучать другие теги и постепенно добавим, CSS, который поможет вам сделать стиль еще более красивым.
А теперь, давайте выполним закрепляющие задание, можете считать его домашним. Для того чтобы информация хорошо укладывалась в голове, я на этапах обучения старался повторять их несколько дней подряд по 5-10 раз - это мне действительно помогало хорошо это запоминать. На сегодня все, до новых встреч.