HTML для начинающих — Урок №1 «Основные теги. Создание каркаса страницы»

Автор Andrei Golubev
HTML для начинающих — Урок №1 «Основные теги. Создание каркаса страницы»

День добрый друзья с вами.

Дмитрий Афанасьев и мы начинаем изучать HTML и CSS для web-разработчика и так. Давайте приступим, что для работа нам потребуется первую очередь нам потребуется браузер использовать мы будем Firefox в дальнейшем вы узнаете узнаете. Почему именно данный браузер и также нам потребуется дополнение фаербаг и так скачать Firefox установить если он вас не установлены установить дополнение фаербаг по данному адресу дали нам потребуется редактор для HTML кода использовать мы будем программа notepad Plus Plus и скачать её можно по данному адресу на 5 Plus ark там где вам создать папку HTML CSS и в данной папке мы будем вести обучение вести разработку в данной папке требуется создать ещё трипод — это папка Files папка гсы папка Style.

Итак приступим открываем программу notepad-plus-plus и создаем новый документ со следующим годом на данный документ требуется сохранить в наш созданную папку пока, что я все сразу в корне и назовём моего Index HTML чтобы на нотном в конце не добавил.

Нам нужно будет поменять расширение на types нажимаем сохранить проверяем как — это у нас. Получилось Да вот собрался Index HTML и в конце нету. txt возвращаемся блокнота. Давайте разберем, что мы здесь написали строка номер один doctype HTML данные строкой мы сообщаем браузеру. Что за документ у нас загружается в данном случае мы сообщаем о том, что загружается документ HTML на второй. Мы открываем теги HTML и закрываем. Ивана строке 12 — это главный Tag HTML документа. Иона символизирует начало документа и соответственно конец. Лента Далее идет Head Head открыли Head закрыли. Как видно из пояснения в теге Head размещается заголовке страницы CSS файлов JS файлов и разные. Техническая информация далее идёт так. Бади Бади открылся на восьмой строке ibody закрылся на строке в теге Body у нас располагается сама страница весь наш HTML код который формирует страницу располагается именно в теге Body. Итак давайте сформулируем наш заголовок. Нашид и. Допиши всегда следующий год отель META charset utf-8 с помощью данного мы определяем техническую информацию страницы. Техническая информация — это то, что страница у нас имеет кодировку utf-8 и. Дали тег title title — это заголовок нашего мента ну и соответственно чтобы мы его видели. Давайте напишем заголовок документа. Давайте сохраним сяе посмотрим в браузере, что у нас получилось сохраняем документ переходим в нашу папку и кликаем для того чтобы документ открывался в браузере внимание здесь у нас вместо заголовка вместо нашего текстовки заголовок документа пришли кракозябры это. Наиболее типичные ошибки начинающих поэтому я вам. Её показывай и сейчас я вам покажу как её разрешить. Суть в том, что сам файл у нас создался по умолчанию не utf-8, а здесь мы указываем, что браузер должен рассматривать данный файл как utf-8 соответственно русские символы у нас пришли уроки мы вот кракозябрами с помощью программы notepad-plus-plus можно поменять кодировку документа для этого нужно перейти в encoding и сделать конвертацию convert to utf-8 without Bom на сделали конвертацию сохранили перешли в браузере. Обновили страничку, а вот пожалуйста нормальная кириллица и. Давайте с помощью fargo посмотрим структуру нашего документа активируем фаербаг вот у нас открылся переходим на вкладку HTML и видим нашу структур которым SRS на файле и создал заголовок Head с двумя тегами и пустой пустой болен возвращаемся в блокнот дали. Давайте оформим Tag Body создадим каркас нашего сайта первое, что мы добавим — это Tag div. Ты где фотоэлемент блочного типа предназначен для выделения определенных моментов сайта то есть определённые логические структуры блоки странице помещается в данной книге утюгов бывает атрибуты атрибуты, а то есть какой-то описание данного тега. Например у тега. Мета есть атрибут charset и соответственно значение данного атрибута атрибут charset специфичный специфический атрибуты и предназначены только для атрибутами. То есть если мы часы. Запишем в каких-то других играх то браузер — это не поймет для. Димы здесь определили атрибут ID attribute ID можно определить для любого элемента для любого тега, но суть в том, что идентификатор соответственно должен быть уникальной на данной странице. То есть если мы определили для данного tdf идентификатор под названием то соответственно более никаких других блоков не должно быть соответствующего такого же идентификатора. Для чего нужны идентификаторы. И в частности для чего мы определили идентификатор для данного тега vaper идентификаторов в таблице стилей мы можем указать стиле специально для данного тега с данным идентификатором во-вторых при помощи GS мы можем обращаться к данному тегу менять его содержимое. И внешний вид удалить его или создать копию на основе него то есть же какие-то какие-либо действия по сути идентификатор — это как бы имя данного бега с помощью которого мы непосредственно только к нему можно обратиться. Итак с помощью данного тогда. Мы создали каркас для нашего документа. То есть — это самый большой главный блок который будет определять ширину высоту нашего документа. Давайте наполним его структурой из чего у нас состоит сайт самое начало страница сайта.

0 комментариев
0

Читайте также