Горячее
Лучшее
Свежее
Подписки
Сообщества
Блоги
Эксперты
Войти
Забыли пароль?
или продолжите с
Создать аккаунт
Я хочу получать рассылки с лучшими постами за неделю
или
Восстановление пароля
Восстановление пароля
Получить код в Telegram
Войти с Яндекс ID Войти через VK ID
Создавая аккаунт, я соглашаюсь с правилами Пикабу и даю согласие на обработку персональных данных.
ПромокодыРаботаКурсыРекламаИгрыПополнение Steam
Пикабу Игры +1000 бесплатных онлайн игр
Щелкните блоки, чтобы они улетели в 3D. Разблокируйте куб, чтобы овладеть головоломками

Разбери Кубик

Головоломки, 3D, Обучающая

Играть

Топ прошлой недели

  • Oskanov Oskanov 8 постов
  • alekseyJHL alekseyJHL 6 постов
  • XpyMy XpyMy 1 пост
Посмотреть весь топ

Лучшие посты недели

Рассылка Пикабу: отправляем самые рейтинговые материалы за 7 дней 🔥

Нажимая кнопку «Подписаться на рассылку», я соглашаюсь с Правилами Пикабу и даю согласие на обработку персональных данных.

Спасибо, что подписались!
Пожалуйста, проверьте почту 😊

Новости Пикабу Помощь Кодекс Пикабу Реклама О компании
Команда Пикабу Награды Контакты О проекте Зал славы
Промокоды Скидки Работа Курсы Блоги
Купоны Biggeek Купоны AliExpress Купоны М.Видео Купоны YandexTravel Купоны Lamoda
Мобильное приложение

Html 5

С этим тегом используют

HTML Программирование CSS Javascript Css3 IT Разработка Все
90 постов сначала свежее
TotemFly
TotemFly
5 лет назад

Комментарии в веб разработке⁠⁠

Приветствую всех читателей.
*Для новичков

Комментарии в веб - разработке.
Речь пойдёт о таких языках: HTML, CSS, JS.

HTML - чтобы сделать комментарий нужно заключить его таким образом:
<!-- комментарий -->

CSS - чтобы сделать комментарий нужно заключить его таким образом:
/* комментарий */

JS - чтобы сделать комментарий нужно заключить его таким образом:
// комментарий.

Надеюсь статья помогла новичкам и вновь вернувшимся из долгого "запоя".
Всем спасибо, всем добра.

[моё] Веб-разработка Программирование Комментарии HTML CSS Html 5 Css3 Javascript Текст
42
0
DELETED
5 лет назад

HTML урок 3⁠⁠

В прошлом уроке мы разобрали, что теги div – «блочные элемент», а span – «строчный элемент». Прежде чем мы рассмотрим другие теги, рассмотрим же, для чего создавался HTML.


Представьте ученых, которые публикуют свои научные статьи и документацию. И захотели они хранить свои статьи не на жестком диске, а в интернете. И чтобы текст имел хоть какой-нибудь приличный стилизованный вид, придумали теги.


Тег p – отображает параграфы, h1,h2,h3 – соответственно заголовок, подзаголовок, подподзаголовок (или заголовок первого, второго и третьего уровня), а – ссылка на источник, другой документ или на место в статье, img – картинка.


Помимо общего оформления текста, также понадобилось оформление отдельных букв, слов и словосочетаний. Появились теги b – для выделения их жирным, u – подчеркивать текст, i – курсив и т.д.


Всё! В этом был весь смысл HTML – оформления текста + ссылки.


Это потом набежали программисты, добавили в HTML кнопки и поля ввода, а потом набежали дизайнеры, придумали выпадающее меню, навигацию, фоновые картинки, слайдшоу, всплывающую рекламу… (Да-да даже до сих пор в html нет готовый тегов для выпадающего меню, табов, выпадающих панелей, и других вполне привычных вещей, как под разработкой других приложений, типа WPF, Android Studio). Итак, разобрались теперь быстро пробежим по тегам.

Блочные элементы:


<p></p> - тег параграфа, имеющий отступы сверху и снизу (16px в Chrome/Y). Возникает вопрос. А почему не обозначать параграф клавишей «Enter», как например, в том же Word. Если же вы попробуете добавить Enter в тексте, то HTML его просто проигнорирует. Дело в том, что в HTML Enter мы используем для того, чтобы текст удобно отображался в редакторе кода, а не в браузере.


Все теги имеют уже предустановленные по умолчанию стили в браузере. Для того, чтобы их увидеть, нажмите клавишу «F12», выберите кнопку со стрелочкой, и наведите на интересующий вас фрагмент в браузере. (У меня Yandex браузер, просто мне однажды понадобились плагины и с Firefox и Chrome, и Opera).


HTML урок 3 Урок, Основы HTML, Html 5, Длиннопост

Тут, конечно же тема ближе к стилям, так что объясню поверхностно. Мы видим, что по умолчанию текст имеет цвет #000000, шрифт 16px и отступы сверху и снизу по 16px; И тянется тег “p” на всю ширину браузера, что подтверждает, что он блочный элемент.


Теги с <h1></h1> по <h6></h6> - заголовки с 1 по 6 уровень.

HTML урок 3 Урок, Основы HTML, Html 5, Длиннопост

Строчные элементы:


<b> - Делает текст жирным. <strong> - выделяет текст жирным. А в чем разница? Словом, раньше не было нормального стандарта, в одном браузере текст делался жирным тегом b, в другом strong. Потом тег b как бы устарел и начали советовать использовать только тег strong, и в дальнейшем хотели вообще избавиться от устаревших тегов. А что же тогда делать с сайтами, которые были созданы в начале 90-х? Поэтому в HTML5 решили эту проблему следующим образом. Вы можете использовать оба тега, но тег strong предпочтителен.


<s>, <del> - зачеркивает текст.

<i> <em> - выделяет текст курсивом.

<small> - делает текст меньшим размером.

<mark> - выделяет текст маркером. (В Y – желтым цветом)

<sub> <sup> - помещает текст над и под строкой. К примеру, всякие химические формулы H2O, или указания степени.

<a href="content.html">Учебник по HTML5</a> - отображает ссылку для перехода на другую веб-страницу или место в документе. href – определяет адрес ссылки.

<img src="les.png" width=”200” alt="Лес" /> - изображение картинки леса. src – путь к файлу, width – ширина в пикселях, alt – альтернативный текст вместо изображения, если вдруг не будет найден файл.

Оформление HTML разметки:

HTML оформляют следующим образом. Если тег находится внутри родительского тега, то он отделяется от него клавишей Tab или 4-мя пробелами. Закрывающий тег, если он родительский, находится на одном уровне с открывающимся. Это очень удобно, сравните.

HTML урок 3 Урок, Основы HTML, Html 5, Длиннопост

Следующий урок будет практическим – мы напишем статью.

Показать полностью 3
[моё] Урок Основы HTML Html 5 Длиннопост
5
4
DELETED
5 лет назад

HTML урок 1,2⁠⁠

Урок 1

Зачем нужны эти уроки, если по HTML их тьма? Ну, во-первых, я пытаюсь писать так, как другие не пишут, а во-вторых у меня есть план: написать материал HTML+CSS+Bootstrap+C#+SQL+.Core.

До этого я писал HTML-уроки, но они не отличались от других уроков. Но в один день у меня возник мысль написал уроки в данном формате. Поехали.


Как создать Web-страницу? Откройте стандартный блокнот. Напишите туда любой текст. А затем выберите «Файл-Сохранить как…». И напишите «Имя_файла.html». Всё, вы создали веб-страницу, теперь двойной клик по ней откроет браузер с вашим текстом.

HTML урок 1,2 Урок, Основы HTML, Html 5, Длиннопост

Конечно, так веб-страницы не создаются, это просто пример того, что для создания веб-страниц не нужны специальные программы. Структура же веб-документа может выглядеть следующим образом.

HTML урок 1,2 Урок, Основы HTML, Html 5, Длиннопост

<!DOCTYPE html> - указывает нам на то, что мы имеем дело c HTML5. (До этого был HTML4)

<html></html> - эти теги указывают на начало и конец html документа. Яркий аналог тегов – кавычки в предложениях. Когда они открываются, начинается прямая речь, когда закрываются, заканчивается прямая речь. Также и теги: они тоже открываются и закрываются, указывая начало и конец содержимого в них.


<head></head> - В них содержатся данные, скрытые от глаз пользователя (кроме title). Они содержат важная техническая информация для обработки страницы браузером: всякие ссылки на стили, иногда скрипты, различные мета-теги.


<title></title> - Когда мы открываем веб-страницу, появляется вкладка в браузере. Он отображает тот текст на вкладке, который указан в тегах title.


<body></body> - Содержит данные, видимые глазу пользователя (всякие кнопки, ссылки, текст, картинки и многое другое). По сути своей, всё, что в теге <body> - это и есть контент веб-страницы.


Конечно, можно создавать веб-страницы в блокноте, но согласитесь, когда есть подсветка текста и подсказки тегов, это намного облегчает работу. Для себя я выделил два таких редактора: notepad++ и visual studio code.

Урок 2. div и span.


Считаю их самыми важными тегами в веб-документах, с помощью которых (со стилями соответственно) можно заменить почти все другие теги (кроме специфических тегов, вроде тегов <img>,<a>, тут без них никак не обойтись).


В данном уроке, для их объяснения, нам не обойтись без стилей, таких как:

background-color: red; - указывает цвет фона тега.

width: 200px; - указывает ширину тега в 200 пикселей.


Итак, что из себя представляет тег «div»?

Представьте себе прямоугольник с шириной, равной ширине браузера (если он вложен в тег body, иначе равен ширине родительского тега) и высотой, равной высоте контента внутри него (картинки, текст, другой блок). Конечно, высоту и ширину div можно будет менять, но по умолчанию он действует так. Даже если мы явно зададим двум тегам такую ширину, что они оба смогут поместить по ширине браузера, то (по умолчанию) все равно второй div будет начинаться с новой строки. Это называется “блочным элементом” html.


Тег «span» также представляет собой прямоугольник с шириной и высотой контента внутри. Мы не можем задать ему произвольную высоту и ширину, без толку. А теперь покажем разницу между ними на данном примере. Это называется “строчным элементом” html.

HTML урок 1,2 Урок, Основы HTML, Html 5, Длиннопост
HTML урок 1,2 Урок, Основы HTML, Html 5, Длиннопост

Стили тегам задаются в первом открывающемся теге, и начинается он со слова style=””. Далее внутри кавычек перечисляются свойства стилей, разделенных “;”.


Хоть мы и div и span задали одинаковую ширину, span же проигнорировал заданную ширину, и взял ширину текста.


Внутри тега div могут находится любые теги (div, span и тд), а внутри тега span желательно только строчные элементы (другие span и т.д.)

HTML урок 1,2 Урок, Основы HTML, Html 5, Длиннопост
Показать полностью 5
Урок Основы HTML Html 5 Длиннопост
6
freemanrain
freemanrain
5 лет назад

HTML CSS JS. С чего начать?⁠⁠

Доброго времени суток, товарищи. Подскажите кто разбирается пожалуйста с чего начать изучать html css js? Чем сами пользовались и какие источники лучше не затрагивать. Подойдёт все от книг до интерактивных курсов. Спасибо.

Html 5 CSS Javascript Текст
32
Midimz
Midimz
5 лет назад
Лига фрилансеров

Что бы вы хотели знать о html5 баннерах⁠⁠

Готовлю доклад о создании html5 баннерах
но не могу найти проблем в их создании. Для меня все просто и понятно.
помогите сформулировать проблемы

[моё] Помощь Html 5 Баннер Текст
11
Comrades.mp4
Comrades.mp4
5 лет назад

ШКОЛЬНИК И HTML 2.⁠⁠

Привет, а вот и я. Поделюсь своими первыми успехами. С помощью видео - урока я познакомился с различными тегами. Я сделал две странички, одна про рецепт бананового печенья, а вторая про стих о Шалтае - Болтае.

У меня возникли некоторые трудности с добавлением картинки на страницу, тобишь с помощью тега <img>, но, с помощью дополнительных интернет ресурсов я разобрался как правильно вставлять и редактировать картинку на сайте. К посту я прикладываю два скриншота с сайтов и исходные коды к каждому из них.

Спасибо за чтение, увидимся завтра.

P.S. Мне не понравилось что на страничке с стихом про Шалтая - Болтая много свободного  места, но я не знаю как его чем то закрывать.

Исходный код для страничке о стихе про Шалтая - Болтая.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>шалтай-болтай для пикабу</title>

</head>

<body style="background-color: #FDD9B5">

<h1>ШАЛТАЙ-БОЛТАЙ.</h1>

<img src="photo/egg.jpg" width="400" height="300">

<p>Стих про <b>Шалтая-Болтая.</b><br>

<big>Шалтай-Болтай</big><br>

<em>Сидел</em> на стене.<br>

<small>Шалтай-Болтай</small><br>

<em>Свалился</em> во сне.</p>

</body>

</html>

Исходный код к страничке о рецепте бананового печенья.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>рецепт печенья для пикабу</title>

</head>

<body style= "background-color: #7366BD">


<h1>Быстрый рецепт домашнего печенья</h1>

<img src="photo/bananlol.jpg" alt="">

<p>Что делать если захотелось сладенького к чаю, в этом нам

поможет быстрый рецепт домашнего печенья.</p>

<p>Ингредиенты:</p>

<ul>

<li>2 больших старых банана</li>

<li>стакан геркулеса</li>

<li>орехи</li>

<li>изюм</li>

<li>шоколад</li>

</li>корица (по желанию)</li>

</ul>

<hr>

<h3>Приготовление домашнего печенья</h3>

<img src="photo/banan.jpg" alt="banan">

<p>Для начала нужно хорошенько размять подготовленные и очищенные

бананы с овсянкой, а после чего премешать.</p>

<p>Готовить при температуре 350 <sup>0</sup>C, предварительно смазав

лист для выпечки маслом, 15 минут.</p>


</body>

</html>

А вот и скриншоты страничек:

ШКОЛЬНИК И HTML 2. Web-программирование, Html 5, Длиннопост, Языки программирования
ШКОЛЬНИК И HTML 2. Web-программирование, Html 5, Длиннопост, Языки программирования
ШКОЛЬНИК И HTML 2. Web-программирование, Html 5, Длиннопост, Языки программирования
Показать полностью 3
[моё] Web-программирование Html 5 Длиннопост Языки программирования
10
MihAndrF
MihAndrF
5 лет назад
Лига программистов

Прошу посоветовать книгу⁠⁠

Начал изучать html5 и css3, но мне удобнее читать книгу, чем смотреть видеоуроки. Пожалуйста, посоветуйте актуальные книги для новичков по html5 и css3, можно и в электронном виде :-)

[моё] HTML Html 5 CSS Css3 Книги Совет Нужен совет Текст
5
Anifor
Anifor
6 лет назад

Привет⁠⁠

Привет, я решил тут начать со знакомства, приветствия. Давайте начнём.
Меня зовут Анифор. Я люблю изучать ЯП* и иностранные языки. Знаю пару API**: PM API*** и VK API****. Ещё люблю иностранные языки. Изучаю английский, немецкий и японский. Думаю основной тематикой будут ЯП, их изучение вместе с вами, а ещё, я буду вам что-то объяснять, если хотите. А у меня за окном солнышко встаёт, на часах 04:17, а я тут пост пишу. Ну тупой, с кем не бывает :D Думаю всё, что-ли =) Пишите в комментариях, что написать в следующем посте и про что) А я спатки :3

*ЯП - Языки Программирования
**API - библиотека приложения (грубо говоря, хотя вроде норм объяснение)
***PM API - (ток не надо ставить минусы и хейтить в комментариях) API для серверов Minecraft PE (Pocket Edition), то есть возможность писать модификации для этих серверов. (Пишу кстати я на PHP)
****VK API - API социальной сети ВКонтакте. Позволяет писать ботов и многое другое.

Привет Программирование, Иностранные языки, Minecraft, ВКонтакте, PHP, HTML, Html 5, Javascript
[моё] Программирование Иностранные языки Minecraft ВКонтакте PHP HTML Html 5 Javascript
18
Посты не найдены
О Нас
О Пикабу
Контакты
Реклама
Сообщить об ошибке
Сообщить о нарушении законодательства
Отзывы и предложения
Новости Пикабу
RSS
Информация
Помощь
Кодекс Пикабу
Награды
Команда Пикабу
Бан-лист
Конфиденциальность
Правила соцсети
О рекомендациях
Наши проекты
Блоги
Работа
Промокоды
Игры
Скидки
Курсы
Зал славы
Mobile
Мобильное приложение
Партнёры
Промокоды Biggeek
Промокоды Маркет Деливери
Промокоды Яндекс Путешествия
Промокоды М.Видео
Промокоды в Ленте Онлайн
Промокоды Тефаль
Промокоды Сбермаркет
Промокоды Спортмастер
Постила
Футбол сегодня
На информационном ресурсе Pikabu.ru применяются рекомендательные технологии