Напишите пожалуйста в обсуждении или в личку как вам такой формат?
В уроке #фронтенд_html_урок1 мы изучили базу HTML.
Сегодня предлагаю узнать о тегах подробнее.
Одиночные и парные теги пишутся с атрибутами и без.
Нужно знать типы атрибутов, чтобы правильно задавать им значения. Например для атрибутов, которые обозначают размер задают значения в px или %, иначе будет ошибка.
Ознакомьтесь с правилами применения тегов и атрибутов прежде чем писать разметку.
Теги также делятся по типам.
Рассмотрим подробнее теги верхнего уровня и теги заголовка документа.
Обязательный блок верхнего уровня <head></head> содержит метаданные документа, которые не видят пользователи. Они нужны, чтобы браузер правильно отображал страницы.
Подробная статья о том, что можно и нужно писать в блоке <head></head>.
#фронтенд_html_урок2
Сегодня предлагаю узнать о тегах подробнее.
Одиночные и парные теги пишутся с атрибутами и без.
Нужно знать типы атрибутов, чтобы правильно задавать им значения. Например для атрибутов, которые обозначают размер задают значения в px или %, иначе будет ошибка.
Ознакомьтесь с правилами применения тегов и атрибутов прежде чем писать разметку.
Теги также делятся по типам.
Рассмотрим подробнее теги верхнего уровня и теги заголовка документа.
Обязательный блок верхнего уровня <head></head> содержит метаданные документа, которые не видят пользователи. Они нужны, чтобы браузер правильно отображал страницы.
Подробная статья о том, что можно и нужно писать в блоке <head></head>.
#фронтенд_html_урок2
Думаю, что этого материала хватит на два дня, поэтому следующий тест будет в четверг😉
Ребята я не удержалась и запилила тест к уроку #фронтенд_html_урок2 😊 http://webinsidepro.tilda.ws/test-html-2
Привет ребята! Я сделала небольшую анкету для тех кто хотел бы обучаться со мной как с наставником, заполните пожалуйста кому актуально) https://forms.gle/1ReKLqj7hjCGbjgb6
Google Docs
Анкета веб-разработчика
Заполните анкету, чтобы я могла разработать максимально комфортный формат обучения для вас.
Спасибо что заполнили анкету! Я все учту😉 Сегодня приготовила для вас следующий блок статей👇
Поговорим о том зачем и как правильно использовать теги для разметки текста.
Задача верстальщика сделать разметку семантической, чтобы она несла смысл. Когда мы используем тег <h1> то показываем, что текст внутри это заголовок страницы, а не просто текст, написанный большими буквами.
Для разметки текста часто используют теги: <h1>-<h3>, <p>, <ul><li></li></ul>, <ol><li></li></ol>.
Для создания акцента используют тег <em>, а для выделения важного фрагмента <strong>.
В html также есть теги <b>, <i>, <u>, которые раньше использовали для стилизации текста, потому что браузеры плохо поддерживали CSS. Сейчас их не рекомендуется использовать.
Подробнее о семантической разметке текста читайте в статье.
Иногда в верстке текста нужны верхний и нижний индексы и спецсимволы.
Об остальных тегах, которые используют для форматирования текста, читайте в статье.
#фронтенд_html_урок3
Задача верстальщика сделать разметку семантической, чтобы она несла смысл. Когда мы используем тег <h1> то показываем, что текст внутри это заголовок страницы, а не просто текст, написанный большими буквами.
Для разметки текста часто используют теги: <h1>-<h3>, <p>, <ul><li></li></ul>, <ol><li></li></ol>.
Для создания акцента используют тег <em>, а для выделения важного фрагмента <strong>.
В html также есть теги <b>, <i>, <u>, которые раньше использовали для стилизации текста, потому что браузеры плохо поддерживали CSS. Сейчас их не рекомендуется использовать.
Подробнее о семантической разметке текста читайте в статье.
Иногда в верстке текста нужны верхний и нижний индексы и спецсимволы.
Об остальных тегах, которые используют для форматирования текста, читайте в статье.
#фронтенд_html_урок3
Напишите, пожалуйста, как вам такой формат?👆 Краткое описание в посте со ссылками на подробную информацию.
Сегодня поговорим о гиперссылках, главной фишке, благодаря которой работает Интернет.
Каждый ресурс в сети имеет уникальный адрес, URL, на который указывает ссылка. URL содержится в атрибуте href, <a href=”URL”></a>.
Есть тонкий момент в случае, когда элемент нужно сделать ссылкой.
<div><a><img><p></p></a></div> - верно
<a><video></video></a> - не верно
В старом стандарте HTML4 ссылки были строчными элементами и в них можно было заворачивать только строчные элементы. В новом стандарте HTML5 в ссылки можно заворачивать любые элементы, кроме интерактивных.
Видео о том, как правильно заворачивать блоки в ссылки.
Ссылки бывают абсолютными, ссылаются на другой сайт и относительными, работают в рамках одного сайта.
Также ссылка может быть якорем, указывать на отдельный элемент страницы. Чтобы сделать якорь задайте id элементу, на который укажет ссылка. В атрибут ссылки href добавьте #значение Id.
<div id=”top”></div>
<a href=”#top”>Я указываю на div</a>
Хороший тон использовать относительные адреса везде где возможно, это экономит ресурсы браузера. Делать текст ссылки понятным для пользователя. Ссылки с одинаковым названием не должны указывать на разные ресурсы.
Чтобы создать ссылку для обратной связи по электронной почте в атрибуте href пишут mailto.
<a href=”mailto:test@test.ru”></a> откроет почтовую программу и создаст пустое письмо для адресата test@test.ru.
Читайте подробнее о создании гиперссылок.
#фронтенд_html_урок4
Каждый ресурс в сети имеет уникальный адрес, URL, на который указывает ссылка. URL содержится в атрибуте href, <a href=”URL”></a>.
Есть тонкий момент в случае, когда элемент нужно сделать ссылкой.
<div><a><img><p></p></a></div> - верно
<a><video></video></a> - не верно
В старом стандарте HTML4 ссылки были строчными элементами и в них можно было заворачивать только строчные элементы. В новом стандарте HTML5 в ссылки можно заворачивать любые элементы, кроме интерактивных.
Видео о том, как правильно заворачивать блоки в ссылки.
Ссылки бывают абсолютными, ссылаются на другой сайт и относительными, работают в рамках одного сайта.
Также ссылка может быть якорем, указывать на отдельный элемент страницы. Чтобы сделать якорь задайте id элементу, на который укажет ссылка. В атрибут ссылки href добавьте #значение Id.
<div id=”top”></div>
<a href=”#top”>Я указываю на div</a>
Хороший тон использовать относительные адреса везде где возможно, это экономит ресурсы браузера. Делать текст ссылки понятным для пользователя. Ссылки с одинаковым названием не должны указывать на разные ресурсы.
Чтобы создать ссылку для обратной связи по электронной почте в атрибуте href пишут mailto.
<a href=”mailto:test@test.ru”></a> откроет почтовую программу и создаст пустое письмо для адресата test@test.ru.
Читайте подробнее о создании гиперссылок.
#фронтенд_html_урок4
YouTube
Ссылки вокруг блоков — HTML Шорты
Рассказываем, можно ли оборачивать ссылкой блочные элементы и как правильно писать код по Спецификации.
Запись на курс «HTML и CSS. Профессиональная вёрстка сайтов» — https://tml.io/09xl5
Полезные ссылки:
- Раньше в HTML 4 было нельзя — https://tml.io/5ato9…
Запись на курс «HTML и CSS. Профессиональная вёрстка сайтов» — https://tml.io/09xl5
Полезные ссылки:
- Раньше в HTML 4 было нельзя — https://tml.io/5ato9…
Структура сайта. Валидация html-документов.
Сегодня поговорим о том, как спланировать и проверить на валидность структуру сайта.
На 2012 год доля людей с нарушениями зрения, слабовидящие и люди с дальтонизмом, составляет 12-13% населения. Чтобы эти люди чувствовали себя комфортно на сайте, соблюдайте семантические правила разметки.
Для этого в HTML есть специальные теги:
Заголовок: <header>.
Навигационное меню: <nav>.
Основное содержимое: <main>, с подразделами содержимого, представленными элементами <article>, <section> и <div>.
Боковая панель: <aside>, располагается внутри <main>.
Нижний колонтитул: <footer>.
Теги <div> и <span> не семантические, используйте их только в тех случаях когда семантические теги не уместны. Например, <div> можно использовать для создания корзины на сайте.
Подробнее о семантической разметке читайте в статье.
Писать семантическую и валидную разметку считается хорошим тоном. Но даже если верстальщик не соблюдает общепринятые правила, браузер исправит разметку, чтоб показать контент пользователю. Правда в этом случае результат, который увидит пользователь может сильно отличаться от предполагаемого.
Все иногда делают ошибки, поэтому перед публикацией прогоняйте код через валидатор.
Подробнее о работе с валидатором.
Распространенные ошибки в html-разметке.
Разбор ошибок.
Короткое видео о спецификациях, правилах написания разметки. #фронтенд_html_урок5
Сегодня поговорим о том, как спланировать и проверить на валидность структуру сайта.
На 2012 год доля людей с нарушениями зрения, слабовидящие и люди с дальтонизмом, составляет 12-13% населения. Чтобы эти люди чувствовали себя комфортно на сайте, соблюдайте семантические правила разметки.
Для этого в HTML есть специальные теги:
Заголовок: <header>.
Навигационное меню: <nav>.
Основное содержимое: <main>, с подразделами содержимого, представленными элементами <article>, <section> и <div>.
Боковая панель: <aside>, располагается внутри <main>.
Нижний колонтитул: <footer>.
Теги <div> и <span> не семантические, используйте их только в тех случаях когда семантические теги не уместны. Например, <div> можно использовать для создания корзины на сайте.
Подробнее о семантической разметке читайте в статье.
Писать семантическую и валидную разметку считается хорошим тоном. Но даже если верстальщик не соблюдает общепринятые правила, браузер исправит разметку, чтоб показать контент пользователю. Правда в этом случае результат, который увидит пользователь может сильно отличаться от предполагаемого.
Все иногда делают ошибки, поэтому перед публикацией прогоняйте код через валидатор.
Подробнее о работе с валидатором.
Распространенные ошибки в html-разметке.
Разбор ошибок.
Короткое видео о спецификациях, правилах написания разметки. #фронтенд_html_урок5
MDN Web Docs
Структура документа и веб-сайта - Изучение веб-разработки | MDN
В дополнение к определению отдельных частей вашей страницы (таких как «абзац» или «изображение»), HTML также содержит ряд элементов блочного уровня, используемых для определения областей вашего веб-сайта (такие как «заголовок», «навигационное меню», «колонка…
Inside Pro | Елизавета К pinned «Привет ребята! Нас собралось уже больше 100 человек и пришло время наполнить этот канал смыслом😀 Я создала карту развития фронтенд-разработчика и буду выкладывать по ней бесплатные материалы для самообучения. Я придерживаюсь структурного и поэтапного подхода…»
Сегодня поговорим о важной составляющей сайтов, изображениях и работе с ними.
Чтобы добавить изображение на страницу используйте тег <img> с обязательным атрибутом src — путь к файлу изображения.
<img src=”my-first-imsge.img”>
Не используйте изображения, если не уверены что они есть в открытом доступе или пока не оплатили его.
Не добавляйте в src ссылки на изображения, лежащие на других сайтах. Если такое изображение будет удалено владельцем сайта, то перестанет отображаться и у вас.
У изображений есть атрибут alt, текст который появится на месте картинки, если ее не удалось загрузить по каким-то причинам. Также alt помогает пользователям со слабым зрением понимать, что показано на картинке.
Для создания фона лучше использовать свойство CSS background-image, будем говорить о нем в блоке уроков по CSS.
Атрибуты width и height придуманы для задания размеров изображения, но лучше делать это в CSS или сразу загружать картинки нужного размера.
Если вам нужно добавить на страницу изображение с подписью, семантически верно будет завернуть его в тег <figure>. А подпись в тег <figcaption>.
Подробнее об изображениях читайте в статье. #фронтенд_html_урок6
Чтобы добавить изображение на страницу используйте тег <img> с обязательным атрибутом src — путь к файлу изображения.
<img src=”my-first-imsge.img”>
Не используйте изображения, если не уверены что они есть в открытом доступе или пока не оплатили его.
Не добавляйте в src ссылки на изображения, лежащие на других сайтах. Если такое изображение будет удалено владельцем сайта, то перестанет отображаться и у вас.
У изображений есть атрибут alt, текст который появится на месте картинки, если ее не удалось загрузить по каким-то причинам. Также alt помогает пользователям со слабым зрением понимать, что показано на картинке.
Для создания фона лучше использовать свойство CSS background-image, будем говорить о нем в блоке уроков по CSS.
Атрибуты width и height придуманы для задания размеров изображения, но лучше делать это в CSS или сразу загружать картинки нужного размера.
Если вам нужно добавить на страницу изображение с подписью, семантически верно будет завернуть его в тег <figure>. А подпись в тег <figcaption>.
Подробнее об изображениях читайте в статье. #фронтенд_html_урок6
Сегодня поговорим о самом важном элементе взаимодействия пользователя с сайтом, HTML-формах.
Формы используют для отправки данных на сервер, например почты и телефона пользователя, или для изменения интерфейса, например пользователь добавляет пункт в список дел.
Веб-формы состоят из элементов управления, полей ввода и переключателей, которые чаще всего представлены тегом <input> и кнопки, которая отправляет данные <button>.
Чтоб задать форму используйте тег <form>. Атрибут action указывает на скрипт на сервере, который будет обрабатывать данные формы. Атрибут method обозначает метод отправки.
Тег <label> обозначает заголовок поля ввода. У тега <label> есть атрибут for, он равен id поля ввода, к которому относится.
Выше пример простой формы.
#фронтенд_html_урок7
Формы используют для отправки данных на сервер, например почты и телефона пользователя, или для изменения интерфейса, например пользователь добавляет пункт в список дел.
Веб-формы состоят из элементов управления, полей ввода и переключателей, которые чаще всего представлены тегом <input> и кнопки, которая отправляет данные <button>.
Чтоб задать форму используйте тег <form>. Атрибут action указывает на скрипт на сервере, который будет обрабатывать данные формы. Атрибут method обозначает метод отправки.
Тег <label> обозначает заголовок поля ввода. У тега <label> есть атрибут for, он равен id поля ввода, к которому относится.
Выше пример простой формы.
#фронтенд_html_урок7
В зависимости от того какой тип вы зададите в атрибуте type тега <input> элемент управления будет выглядеть по разному. В примере выше type=”text” обозначает поле для ввода текста.
Для удобство пользователя проектируйте веб-формы так, чтобы в них было как можно меньше полей.
Подробнее о проектировании и создании форм.
#фронтенд_html_урок7
Для удобство пользователя проектируйте веб-формы так, чтобы в них было как можно меньше полей.
Подробнее о проектировании и создании форм.
#фронтенд_html_урок7
Сегодня готовлю первый пост по CSS. А пока ловите дополнительный полезный материал по работе с изображениями👇
Векторная графика.
В вебе используют 2 типа изображений, растровые - .jpeg, .png и векторные .noscript.
Качество растровых изображений ухудшается при изменении размера картинки, а векторных остается неизменным, но векторные весят больше и сильнее грузят браузер.
Поэтому рекомендуется использовать растровые картинки для фотографий и сложных изображений, а векторные для иконок.
SVG это язык для создания изображений похожий на HTML, поэтому картинки в .noscript формате можно стилизовать при помощи CSS.
Добавить noscript-изображение на страницу можно через атрибут src тега <img>, <img src=”my-noscript.noscript”>, но тогда не получится стилизовать его в CSS.
Второй способ это открыть .noscript в редакторе, скопировать код и добавить его в html-разметку. Тогда вы сможете стилизовать изображение.
Подробнее о SVG читайте в статье.
В продуктовой разработке программисты не вставляют каждую иконку вручную, а используют для этого технологию noscript-спрайты.
Подробнее о работе со спрайтами читайте в статье.
В вебе используют 2 типа изображений, растровые - .jpeg, .png и векторные .noscript.
Качество растровых изображений ухудшается при изменении размера картинки, а векторных остается неизменным, но векторные весят больше и сильнее грузят браузер.
Поэтому рекомендуется использовать растровые картинки для фотографий и сложных изображений, а векторные для иконок.
SVG это язык для создания изображений похожий на HTML, поэтому картинки в .noscript формате можно стилизовать при помощи CSS.
Добавить noscript-изображение на страницу можно через атрибут src тега <img>, <img src=”my-noscript.noscript”>, но тогда не получится стилизовать его в CSS.
Второй способ это открыть .noscript в редакторе, скопировать код и добавить его в html-разметку. Тогда вы сможете стилизовать изображение.
Подробнее о SVG читайте в статье.
В продуктовой разработке программисты не вставляют каждую иконку вручную, а используют для этого технологию noscript-спрайты.
Подробнее о работе со спрайтами читайте в статье.
Отзывчивые (responsive) изображения - изображения, которые хорошо отображаются на любых устройствах, компьютер, планшет, мобильный.
Думаю каждый сталкивался с ситуацией, когда сайт хорошо выглядит и быстро открывается на компьютере, но плохо грузится и выглядит ужасно на мобильном.
Чтобы предотвратить такие ситуации в HTML добавили атрибуты srcset и sizes для тега <img>, которые позволяют загружать картинки с меньшим разрешением для небольших экранов.
И атрибут <picture>, который позволяет загружать разные картинки для разных устройств, например панорамное фото на компьютере и детализированное на мобильном.
Статья о том как работать с отзывчивыми изображениями в HTML.
Думаю каждый сталкивался с ситуацией, когда сайт хорошо выглядит и быстро открывается на компьютере, но плохо грузится и выглядит ужасно на мобильном.
Чтобы предотвратить такие ситуации в HTML добавили атрибуты srcset и sizes для тега <img>, которые позволяют загружать картинки с меньшим разрешением для небольших экранов.
И атрибут <picture>, который позволяет загружать разные картинки для разных устройств, например панорамное фото на компьютере и детализированное на мобильном.
Статья о том как работать с отзывчивыми изображениями в HTML.