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

Пикаджамп

Аркады, Казуальные, На ловкость

Играть

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

  • AlexKud AlexKud 38 постов
  • SergeyKorsun SergeyKorsun 12 постов
  • SupportHuaport SupportHuaport 5 постов
Посмотреть весь топ

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

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

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

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

Помощь Кодекс Пикабу Команда Пикабу Моб. приложение
Правила соцсети О рекомендациях О компании
Промокоды Биг Гик Промокоды Lamoda Промокоды МВидео Промокоды Яндекс Директ Промокоды Отелло Промокоды Aroma Butik Промокоды Яндекс Путешествия Постила Футбол сегодня

HTML + Веб-разработка

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

CSS Программирование Javascript Верстка IT Сайт Web Разработка Программист Все
88 постов сначала свежее
7
shaitan.vladimir
shaitan.vladimir
3 года назад
Web-технологии

Атрибуты тегов HTML⁠⁠

Атрибуты тегов HTML HTML, Html 5, CSS, Css3, Frontend, Верстка, Разработка, Программирование, Веб-разработка, Разработчики, IT, Программист, Обучение, Баг, Урок, Видео, Длиннопост

Одна из важных концепций HTML это атрибуты и их значения.

<img src="./images/html-syntax.png" alt="HTML Syntax">

В примере выше мы используем тег одиночный тег <img>, для того чтобы добавить изображение на нашу страницу.


Для того чтобы сказать браузеру, какое именно изображение мы хотим показать на странице мы используем атрибут src и в качестве его значения указываем путь к файлу изображения. Таким образом браузер поймет что именно мы хотим показать на странице.

<p>
<a href="https://github.com" target="_blank" title="Popup info" id="link" class="link">
Github
</a>
</p>

В примере выше мы можем видеть большое количество атрибутов, в этом нет ничего страшного, теги могут принимать неограниченное количество атрибутов.


Но не стоит увлекаться, большое количество атрибутов делает код более сложным и сильнее нагружает браузер, который интерпретирует HTML.

<section>
<p class="paragraph" title="some additional info">
Lorem ipsum dolor sit amet.
</p>
<a href="https://github.com" target="_blank" class="link" title="title info">
Link to github
</a>
</section>

Существует 3 типа атрибутов, универсальные, уникальные и атрибуты событий.

Универсальные - атрибуты которые можно установить любому существующему тегу из пример выше можно понять что атрибуты class и title являются универсальными атрибутами. Так как мы можем их добавить любому тегу.

Уникальные - атрибуты, которые есть у определенных тегов или у определенного набора тегов. Одним из таких атрибутов является атрибут href тега <a>, а также атрибут target тега <a> тоже является уникальным.

Атрибуты событий - нужны для того связывания обработчиков событий с элементами на которых они должны срабатывать. Обработчики событий это JavaScript функции которые срабатывают при срабатывании события на элементе, например события клика по элементу.

Пример атрибута события


<p onclick="alert('Hello world!')" >
<mark>Lorem ipsum dolor sit amet.</mark>
</p>

Из чего состоит тег ?

Атрибуты тегов HTML HTML, Html 5, CSS, Css3, Frontend, Верстка, Разработка, Программирование, Веб-разработка, Разработчики, IT, Программист, Обучение, Баг, Урок, Видео, Длиннопост

Видеоурок на эту тему

Показать полностью 1 1
[моё] HTML Html 5 CSS Css3 Frontend Верстка Разработка Программирование Веб-разработка Разработчики IT Программист Обучение Баг Урок Видео Длиннопост
28
3
shaitan.vladimir
shaitan.vladimir
3 года назад
Web-технологии

Начало работы с HTML 5 - Теги⁠⁠

Взглянем ближе на HTML


<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat, tempora!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat, tempora!</p>


Что означает конструкция <p> ?


В языке HTML Такая конструкция называется тег. Ранее мы уже видели несколько тегов <section>, <h1>. Теги оборачивают наш контент и в итоге обрабатываются браузерами.

<div>
<h1>Some title</h1>
</div>

Все рассмотренные нами теги являются парными, так как имеют открывающую и закрывающую часть. В примере выше мы можем видим <h1>Some title</h1>.

<h1> — является открывающей частью тега.

</h1> — является закрывающей частью тега.

А между открывающей и закрывающей частью тега мы, обычно располагаем контент.

<hr>  <!-- Вариант 1 -->
<hr />  <!-- Вариант 2 -->
<br>  <!-- Вариант 1 -->
<br />  <!-- Вариант 2 -->

В примере выше явно видно то что кроме парных тегов в HTML есть и одиночные теги, такие теги не имеют закрывающей части. Обычно они используются для создания элементов которые отображают контент другим образом нежели парные теги.

<section>
<h2>Some another title</h2>
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
<hr>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab
excepturi incidunt maxime odio sint? Commodi cupiditate modi nesciunt
pariatur tempore?
</p>
</section>
Ключевой особенностью тегов является то что мы можем вкладывать их друг в друга, это хорошо видно из примера выше. Таким образом мы можем выстраивать более сложные композиции тегов и создавать более сложные системы.

<ul>
<li>Lorem ipsum.</li>
<li>At, maxime!</li>
<li>Dolores, recusandae.</li>
</ul>

В некоторых случаях вложенность является обязательной частью разметки текста. В примере выше, браузер не сможет интерпретировать теги <li> и их внутренний контент правильным образом, если теги <li> не будут вложены внутрь тега <ul>.
Показать полностью 1
[моё] HTML Html 5 Javascript CSS Frontend Программирование Сайт Интересные сайты Создание сайта Веб-разработка Pikaweb Программист IT Разработка Баг Видео
14
NiceMishan4ik
3 года назад

Псевдоклассы enabled, disabled,checked и focus⁠⁠

[моё] HTML Html 5 Css3 Программирование IT Программист Web-программирование Веб-разработка Видео
6
637
gfd75sdq
gfd75sdq
3 года назад
IT-юмор

Иерархия в семье⁠⁠

Иерархия в семье IT юмор, Веб-разработка, HTML, Заголовок
Показать полностью 1
IT юмор Веб-разработка HTML Заголовок
31
datamainer
3 года назад

HTML CSS⁠⁠

Подскажите, кто нибудь знает где можно посмотреть готовые кнопки, карусели, карточки и пр..
на чистом css и html ?


хотелось бы посмотреть исходники других прогеров :)

HTML CSS Программирование Верстка Веб-дизайн Веб-разработка Текст
6
32
andrew.motinga
3 года назад

Могу помочь изучить веб программирование⁠⁠

Помогу изучить веб программирование (Ruby, Javascript)


TLDR


Я программист, в США, пишу на Ruby on Rails преимущественно.

Я не знаком с русским рынком, не знаю популярна ли у вас Rails.

Но если это учите или хотите учить - я бы с радостью вам помог.


#### Кто?

Меня зовут Андрей, я родом из молдовы, вот мои профайлы:

* linkedin: linkedin.com/in/amotinga/

* github: github.com/AndreiMotinga

* reddit: https://www.reddit.com/user/junior_auroch

* resume: https://docs.google.com/document/d/e/2PACX-1vS1M70Mjd6WhMekg...

Я помогаю друзьям и близким учиться сейчас, могу помочь и вам

Я фулстак (бэкенд, фронтенд), мои ключыве навыки:

* Backend: Ruby on Rails. PostgreSQL

* Frontend: HTML, CSS, JavaScript, React

* Unix, Zsh, Chrome Dev Tools, Heroku, Git, GitHub, AWS

это то с чем я работаю каждый день, так что...


#### Что?

Я предлагаю помочь вам изучить навыки которыми обладаю, (перечисленные выше, и те что у меня в резюме) и по возможности помочь вам устроиться на работу в программировании.


2 очень важных замечания.


1. Я не знаю ничего кроме того что назвал выше, поэтому не могу помочь вам если ваш язык сюда не входит


2. Оригинально этот пост я написал на редит и пытаюсь помочь людям на американском рынке -это где я проходил интервью, искал работу, и работаю в данный момент. 
Я не знаю как работает рынок в России, (нужны ли кому то рэилс), какой спрос, требуют ли образование, насколько реально найти работу, как нанимают и тд… если кто-то откликнется, или знает - будем думать вместе.


А пока, считайте что вам может быть это полезно только если вы УЖЕ решили что этот список вам подходит.


В программировании есть миллион разных путей/специальностей - Я могу только помочь вам в том в чем сам разбираюсь. Я могу показать что нужно учить, и помочь в процессе. Исключительно только Rails и/или фронтенд на (html/css/javascript/react)


#### Как?

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


но если вы хотите программировать - надо учить Английский.

Трудно зачастую в том, что трудно выбрать хорошие ресурсы от не оптимальных

Так же иногда бывает, просто делаете как написано, но не работает, и что тогда?

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


Что конкретно могу сделать для вас:

* подсказать что конкретно читать / смотреть / проходить. либо найдем что-то бесплатное, либо за небольшие деньги.

* когда застреваете, смогу помочь с тех точки зрения

* поддержу морально. Я сам бросал дважды когда начинал в 2013

* рассмотрю код, дам отзыв, укажу на грубые ошибки, области что нужно укрепить

* возможно, помогу сделать резюме, портфолио, в поиске работы


Я в штатах, мы на ООООчень разных часах, поэтому будем выкручиваться как сможем. Но ребята текущие в Молдове и Украине (все на русском) 
друг друга сможете поддерживать. Я зацеплюсь как будет че то посложнее.

так же можем поделиться экраном,

могу посмотреть что вы делаете,

помогу показать свой сэтап,

как сам подхожу к решению задачек, пишу код и тд

В идеале идея работать в группе. посомтрим что выйдет, придумываю на ходу.

Как сказал вроде - текущая группа - 5 человек. кто то работает полной занятостью,

кто то учиться в универе,

кто-то учиться из дома по этой “программе”


#### Зачем мне это?

Хобби - у меня есть немного лишнего времени. - помогать приятно. (особенно близким)

проф рост, лишний раз попасться неспособным обьяснить Big(O) кому-то думаю

заставить лучше его понять. (Надеюсь)

личная польза - следующая ступень в пирамиде Маслова.

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

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


ВАЖНО:

что бы изучить мои навыки в достаточной степени чтобы искать и получить работу нужно потратить 600-1000 часов минимум

Это ~800 часов тяжелой работы, пота, и, порой, чувства полной беспомощности.

Это реально трудно!!!


И самое беспонтовое, что тут никак не смухлевать. Ничего не купить, нигде не скоротать.

Надо сесть и 3.14здячить.


Сомневаюсь что, кто-то реально подпишется или кому-то это надо, но если вдруг, пишите, спрашивайте.

Я буду счастлив если могу вам помочь каким либо образом.


Всех благ.

Показать полностью
[моё] Программирование Веб-разработка Образование Обучение Бесплатно Ruby on Rails SQL HTML CSS Javascript Длиннопост Текст
62
nfh2860
nfh2860
3 года назад

Выкладываю свою страничку на GitHub⁠⁠

Перед тем как приступить к JavaScript, решил реструктурировать html и css код, благо его немного, да и целесообразно сделать это сейчас , чем разбираться потом. Всё это делаю сейчас ещё и из-за того, что приступая к js, понял, что тема эта займёт много времени и пока буду с ней разбираться, кто-то может подсказать что-то дельное по уже существующему материалу.

Начал понятное дело с html. Постарался дать как кажется более приемлемые названия для классов. Объединил всё в блоки, в которых элементы близки по смыслу, а также выделены физически на фоне других блоков.

По поводу css, настраивал всё только под позиционирование, да и только на одну рамку под свой экран. Считаю что на данный момент нецелесообразно использовать media query, так как ещё не определился по поводу внешнего вида самих страниц. Только когда определюсь с содержимым сайта, я займусь графической стороной, а пока на данный момент все что я узнавал из тем по css, я применял на странице с целью ознакомления и убирал, не видя целесообразности в употребление того или иного свойства. Пока сайтик не будет функциональным с точки зрения его основного предназначения, его оформление будет вычурным и неестественный для контраста работы видимых границ блоков.

По поводу git и GitHub решил сильно не заморачиваться и пользоваться ими не через консоль, а через встроенный инструмент в Visual Studio Code. Для начала чтобы только пушить изменения в репозиторий мне будет достаточно.

Выкладываю свою страничку на GitHub HTML, CSS, Веб-разработка, Github

Вот ссылочка на GitHub https://github.com/Astrodynamic/itakaboom.com

Показать полностью 1
[моё] HTML CSS Веб-разработка Github
13
Партнёрский материал Реклама
specials
specials

Даже получать удовольствие ты должен с коммерческой выгодой для себя ©⁠⁠

Так говорил греческий судовладелец, миллиардер Аристотель Онассис. Миллиардеры, конечно, живут немножко иначе, но этот принцип вполне распространяется и на «простых смертных». Давайте посчитаем, какую выгоду вы получаете.

Посчитать

Бизнес Выгода Текст
14
CrazyCoding
CrazyCoding
3 года назад
Web-технологии

Карточки с градиентом HTML CSS⁠⁠

Всем привет, новое видео от меня!


Создаем карточки с градиентом на чистом HTML + CSS. Полностью рабочее решение для твоего будущего сайта, которое можно адаптировать под себя или изменить. Креативное оформление для карточек на вашем сайте. Можно поменять размер, цвета в градиенте и анимацию.


Важно! Это не уроки! Если ты неделю в вебе, то скорей всего ничего не поймешь! У меня нет цели кого-то учить, так как я считаю, что уроков и курсов и так полно на просторах интернета. Я делаю разнообразные задачки для себя в не скучном формате, чтобы всегда была практика и решил поделиться с другими, чтобы была возможность получить готовый код, адаптировать готовое решение под себя или попробовать реализовать тоже самое для практики (практика главное в разработке!). Критика и советы по поводу того, что убрать, что добавить, приветствуются. Также буду рад разбору кода и комментариям по нему.


CodePen: https://codepen.io/crazycoding21/pen/oNWLNeP

GitHub: https://github.com/CrazyCoding21/CC-HTML-CSS-19-Gradient-Bor...

Показать полностью 1
Программирование Web Веб-разработка HTML CSS Градиент Видео
3
Посты не найдены
О нас
О Пикабу Контакты Реклама Сообщить об ошибке Сообщить о нарушении законодательства Отзывы и предложения Новости Пикабу Мобильное приложение RSS
Информация
Помощь Кодекс Пикабу Команда Пикабу Конфиденциальность Правила соцсети О рекомендациях О компании
Наши проекты
Блоги Работа Промокоды Игры Курсы
Партнёры
Промокоды Биг Гик Промокоды Lamoda Промокоды Мвидео Промокоды Яндекс Директ Промокоды Отелло Промокоды Aroma Butik Промокоды Яндекс Путешествия Постила Футбол сегодня
На информационном ресурсе Pikabu.ru применяются рекомендательные технологии