HTML — Базовый курс 2


189 просмотров.

Краткое описание видео: .продолжаем изучение html в данном случае.мы познакомимся со структурой.html-документа да узнаем из чего он.состоит.попробуем создать свой первый html.документ и проверить как он будет.работать в браузере до первым делом я.вам советую создать папку на.каком-нибудь диски своего компьютера для.хранения html-документов которые мы.будем создавать на протяжении этого.курса например на диске c создайте папку.html там мы будем хранить наши документы.также сразу советую запустить блокнот.потому что именно в нем мы будем писать.html-код.и так приступаем к разбору структуры.первое что у нас идет в html документе.это указание версии в том уроке я уже.говорил что основная на сегодняшний день.версия до 40 1 и здесь мы ее используем.триграммы строку запоминать не.обязательно мы один раз только напишем и.затем будем вставлять во все наши html.документ и которые мы будем создавать.следующий момент в структуре.html-документа это два корневых тега.html.во-первых что такое тик-так это ячейка.самого языка html.из которой он по сути и строится да то.есть грубо говоря это такие кирпичики.которые занимаются с помощью которых мы.делаем разметку всего документа по ним.браузер понимает что здесь нужно.отобразить.допустим текст таким образом а здесь.другим сюда нужно вставить картинку и.так далее то есть теги.это и есть элементы разметки в данном.случае мы имеем дело самым корневым.бегом html который говорит браузеру о.том что все что находится между ним.будет с html-кодом какие особенности.есть у тегов.во-первых теги заключается между такими.скобками.все что находится между скобками.является названием в данном случае это.html.отсеки бывают парные и непарные в данном.случае мы видим парный так он сначала.открывается.наверху да и внизу закрывается о.закрытии говорит вот этот обратный слеш.как вы увидите позже.теги бывают одинарные то есть только.открылись и все кроме этого у тебя может.могут быть атрибуты об этом мы поговорим.чуть позже когда увидим такой так вторым.элементом структуры html документа.является два тега hide с английского это.голова поэтому здесь нетрудно догадаться.что это бага вала документа которая.содержит служебную информацию такой как.название html-страницы кодировку да то.есть на каком языке у нас основной текст.написан на русском.английском немецком и так далее да а.дальше сюда же мы помещаем различные так.называемые мета теги для поисковых.систем.поэтому сейчас мы посмотрим все.подробнее да итак 1 т который помещается.в голову документа это так тайтл выйдут.так помещается название данного.документа то есть видим на стек открылся.затем мы туда помещаем название и.закрываем это название которое будет.отображаться вот здесь самой верхней.строке браузера при просмотре этой html.страницы.здесь вам нужно запомнить написание тега.тату надпись вот так он пишется а.следующие служебные те которые.помещаются в голову документа it attacks.кодировкой вот таким образом он пишется.как вы видите это одинарный так здесь в.принципе запоминать каком пишется тоже.не обязательно потому что мы будем.копировать его также из документов.документ здесь самое главное запомнить.название кодировки windows 1251 эта.кодировка предназначенная для русского.языка то есть если у вас в тексте html.страницы будет встречаться русский язык.но вы должны указать эту тренировку.чтобы браузер правильно отобразил.русские символы если основной язык это.английский то здесь нужно прописать.windows 1252 а кроме этого здесь мы.видим что так метр он одинарный да то.есть он открывается и больше у него.закрывающего тега нет и кроме этого.здесь мы видим что появились у нас те.самые атрибуты о которых я говорил то.есть вот это выражение это и есть.атрибут контент это тоже атрибут здесь.мы на них останавливаться не будем далее.когда мы будем изучать более простые.теги вы там увидите более наглядное.действие этих атрибутов и зачем они.вообще нужны а следующий служебный так.это так meta keywords предназначен он.для поисковиков то есть у него идет.атрибут name в который мы заносим.ключевое слово кейворд потребует контент.мы заносим ключевые слова которые у нас.будут встречаться на html страницы.этот так больше предназначен для.поисковых систем и то в последнее время.они его даже не учитывают но в.литературе на сайтах вы этот тег можете.встретить поэтому вы должны знать что.keywords это ключевые слова которые.встречаются на странице мы всегда.записываем через запятую на следующий.служили так также который хранится в.голове документа.это так meta description также так для.поисковиков в него вносятся.а краткое содержание страницы то есть о.чем будет идти речь и на этой странице.при этом в поиске когда допустим человек.на том же я мог сильно google и вводит.какой-то поисковый запрос да и этот.запрос удовлетворяет вашему сайту в.результатах вывода как раз таки.выведется вот эта информация по вашему.сайту.поэтому сюда можете писать нормальную.информацию то есть.краткое содержание страницы так с этой.частью странице мы закончили как вы.понимаете из всех этих тегов.пользователь видит только текст той.толпе то есть результат работы тега.title.который отображается самом верху.html-страницы вот основной же контент.который будет видеть пользователь.он у нас будет находиться между тегами.body будет с английского это тело.поэтому здесь.то так же смысл подходит да то есть это.будет тело документа в котором будет.содержаться вся эта информация которую.будет видеть пользователь зашедший на.вашу html-страницу так будем также.парные да как вы видите он открывается и.закрывается на данном этапе давайте.остановимся и наберем весь этот код в.нашем блокноте да потому что мы как бы.основную структуру создали.и нам осталось только наполнить данную.страницу каким-нибудь содержимым чтобы.уже посмотреть результаты ее работы.поэтому вот этот каркас мы один раз.наберем вручную а затем уже будем.использовать постоянно на всех наших.html страницах которые мы будем.создавать единственный омар будет только.там менять название страницы до.описание и ключевые слова поэтому.переходим блокнот и начинаем набирать.этот код до естественная весь код.набирать при вас не буду я сейчас.отключусь и наберу весь код вы также.вместе со мной должны набрать этот код.вручную и.пока остановиться и так вот что у вас.должно было получиться html-код то есть.вся структура нашей странице теперь.давайте сохраним данный файл для этого.выберите пункт пункт файл сохранить и.укажете эту самую папку html которую вы.создали кроме этого здесь мы должны.прописать имя файла назовем файл яндекс.и указать обязательно расширение html.чтобы сказать операционной системе что.это именно html-файл а не обычный.текстовый.весь проследите чтобы у вас стоял тип.все файлы нажимаем сохранить у нас в.строке появилось название индекс на html.теперь давайте попробуем через браузер.открыть данный файл выбираем файл.открыть через обзор находим этот файл.нажимаем открыть нажимаем ok и видим что.у нас данный файл открылся и сюда.прописалась название нашей страницы.которые мы указали в теге title.но у нас пока никакого текста на.странице нет потому что у нас в теге.body пока пусто да если мы посмотрим.html-код страницы мы увидим тот самый.код который мы набрали на.а теперь давайте займемся наполнением.нашей страничке внесем туда какой-нибудь.элемент который будет уже выводиться на.экран если посмотреть структуру мы.сейчас будем добавлять два абзаца при.этом сразу запоминаете что любой абзац.чтобы его выделить в тексте мы должны.указать.так псп это сокращение от английского.параграф поэтому очень легко.запоминается там где нам нужен абзац мы.открываем т.п..там где мы хотим абзаца закончить мы акб.и закрываем то же самое дальше до.открыли закрыли давайте наберем этот.текст нашей html страницы и посмотрим.как он будет отображаться браузером.открываем т.п. и пропишем тот текст.который у нас там есть вы в принципе.можете прописать любой текст 2 любых.абзаца текста.вот примерно что в итоге у вас должно.получиться между тегами body.идет два абзаца текста давайте сохраним.данную страницу и посмотрим ее убрала.возвращаемся браузера нажимаем кнопку.обновить.и видим что у нас отображается два.абзаца который мы вели если мы посмотрим.опять.и html-код мы не кен два абзаца мы видим.то есть теперь вам понятно да как.транслируется этот html код нашим.браузер на этом этапе мы закончим данный.урок сон структуры мы разобрались.научились создавать html документ и.научились просматривать его браузере в.следующем уроке уже продолжим обучение.будем заниматься по html.дальше

HTML — Базовый курс 2

Как? Вы еще не смотрели? Ну это зря...