HTML уроки. Первый урок по HTML верстке. Уроки HTML CSS JS. Урок №1

Автор Zhanna Belchenko
HTML уроки. Первый урок по HTML верстке. Уроки HTML CSS JS. Урок №1

Привет.

Это фрилансер по жизни пришло время поделиться с тобой своими практическими наработками и лайфхаками делайте — это буду уроках туториалов в отдельном в плейлисте начнем с самых. Азов последствий будем верстать целое сайты готовы, тогда вперёд в этом уроке создадим свой первый проект по верстке. Круто правда первым делом нужно правильно организовать систему файлов и папок чтобы потом не потеряться в сотнях тысячах проекта.

Итак представим себе, что — это твой диск с данными.

И здесь нужно создать общую папку проекта назвать её нужно как-нибудь. Позитив фонтан. Нарния асгард. Ну или. Как тебе угодно. Я назову её два далее создадим папку для временных файлов. Я зову её там всё, что можно будет сбрасывать различные материалы на оценку ещё до того как проехать взять в работу рядом. Мы создадим текущим годом и уже внутри неё мы можем создать реальный конкретный проект. Сегодня мы назовем его что-то типа майфонтс против в дальнейших уроках мы будем давать актуальные имя про. Заходим в проект и создаем папку для исходников исходники — это различные материалы необходимые для работы этой макеты дизайна техническое задание и шрифты и материалы предоставленные заказчиком. Я назову её соус. Что означает исходник рядом создаем рабочую папку проекта с тем же названием, что и сам проект. Майерс против тут же я обычно создается текстовый. Файлик назовем его инфо туда я записываю всякую информацию связанную с проектом бюджета сроки контактные данные заказчика правки и прочее всё здесь и она у меня всегда под рукой вернёмся к проекту. Заходим в него и создаём ряд папа для удобно файл создаем папку CSS. Где в последствии будем хранить каскадные таблицы стилей CSS куда впоследствии положим наши скрипты и ещё две папки для хранения картинок икона ifans для хранения подключаемых шрифтов с папками покончено. И теперь мы наконец-то можем создать твой в жизни HTML File Index HTML для этого мы создаем простой текстовый документ вместо имени пишем индекс, а вместо расширение HTML, что отобразить расширение Windows 10 нажимаем вид и ставим галочку напротив расширения имен файлов. И теперь мы можем переименовать тексте HTML. Почему именно. Яндекс потому, что практически все сервера открывает файл именно с таким по умолчанию — это означает главная страница например открыть сайт. ФНС буду у нас откроется главная страница то фактически открывается Index HTML просто имя файла не отображается, но расширение говорит нам, что файл содержит код написанный на языке HTML который поднимают браузер и теперь мы можем открыть наш индекс один пример с помощью хром сейчас мы видим белый экран — это потому, что файл пустой, но — это ненадолго отбросив все сомнения перенесём наш проект редактор кода я использую. Для этого просто перенесём рабочую папку проекта в программу вот таким вот образом полное руководство по установке и настройке саблайм текст 3. Смотри вот в этом выпуске открываем наш индекс двойным щелчком и мы готовы к ли сегодня мы напишем только необходимый минимум с каждым уроком будем увеличивать объем и так первым делом мы указываем файл редактор тем самым сообщаем браузеру как стоит обрабатывать эту страницу далее открываем оболочку документа HTML с единственным атрибутом. Где указан язык содержимого далее уже внутри наши оболочки создаем заголовок страницы которой является контейнером для других важных. Дат содержание его не отображается на странице внутрь контейнера заголовка я помещаю Tag title — это заголовок страницы в браузере. Как он работает я покажу немного позже я помещаю метод с определением кодировке нашей странице заголовком. Мы закончили поэтому я закрываю контейнер Head и тут же открываю боди. От тела странице всё, что будет внутри Body будет видно браузере отступаю немного для нашего года и закрываю. Наше тело, а также закрываю Tag HTML нашу общую оболочку на смайлики Index HTML полностью настроен и готов к работе и мы можем написать. Какое первое приветствие для этого внутри тела Body создадим так H1 заголовок и внутреннего что-нибудь напишем после этого сохраняет документ нужно в. Контру с программистом приходим наши проекты открываем. Яндекс с помощью любого браузера например Chrome и вот здесь вот в теле страницы мы должны увидеть нашу надпись, а сверху в заголовки браузера мы должны увидеть содержимое тега title о котором мы говорили ранее получилось. Крутяк Я очень с тобой горжусь остались вопросы. Напиши в комментариях архив с файлами сегодняшнего урока. Ищи в телеграм канале ссылка на него в описании, но у нас впереди ещё количество интересных уроков. Обучайся развивайся и помни. Живи работаешь свободное время.

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

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