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

Archer Ragdoll Masters

Аркады, Гиперказуальные, 2D

Играть

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

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

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

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

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

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

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

Основы HTML

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

HTML Программирование CSS IT Разработка Программист Css3 Все
49 постов сначала свежее
1
shaitan.vladimir
shaitan.vladimir
3 года назад
Web-технологии

Блочная модель документа⁠⁠

Блочная модель документа HTML, Html 5, Основы HTML, CSS, Css3, Javascript, Google Chrome, Opera, Mozilla, Верстка, Разработка, Создание сайта, Программирование, Программист, Баг, IT, Собеседование, Длиннопост

В современной верстке выделяется 2 типа элементов:


• Блочные (block level) - в основном, отвечают за каркас страницы.

• Строчные (inline level) - в основном, помогающие нам при стилизации страницы и тд.

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


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


<div class="block">Block Element #1</div>
<div class="block">Block Element #2</div>
<div class="block">Block Element #3</div>

Основные блочные элементы:


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


<div>div element</div>
<p>p element</p>
<hr>

Списочные теги


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



Маркированный список:


<ul>
<li>Lorem ipsum.</li>
<li>Similique, voluptas?</li>
<li>Enim, et!</li>
</ul>

Нумерованный список:


<ol>
<li>Lorem ipsum.</li>
<li>Beatae, fugit?</li>
<li>Id, molestiae.</li>
</ol>

Список описаний ( документация ):


<dl>
<dt>Lorem</dt>
<dd>Lorem ipsum dolor sit.</dd>
<dt>Lorem ipsum.</dt>
<dd>Lorem ipsum dolor sit.</dd>
</dl>

Теги заголовков


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


<h1>Lorem ipsum.</h1>
<h2>Lorem ipsum.</h2>
<h3>Lorem ipsum.</h3>
<h4>Lorem ipsum.</h4>
<h5>Lorem ipsum.</h5>
<h6>Lorem ipsum.</h6>

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


<div class="post">
<div class="post-title">
<h2>Hello world</h2>
</div>
<div class="post-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, ducimus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, ducimus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, ducimus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, ducimus.</p>
</div>
</div>

Из примера выше видно, что в div c классом post вложенные другие элементы. На самом деле, вложенность может достигать любого уровня, но не стоит сильно увлекаться так как чем больше будет вложенность тем сложнее будет браузеру и компьютеру это все обрабатывать.

Как делать нельзя?


Нельзя вкладывать теги <p> друг в друга.


<p>
Lorem ipsum dolor sit amet.
<p>Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet.</p>
</p>

Нельзя вкладывать заголовки друг в друга.


<h2>
Some title
<h3>Some subtitle</h3>
<h3>Some another subtitle</h3>
</h2>

ВАЖНО!


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


P.S. О строчных элементах напишу в следующем посте.

Показать полностью
[моё] HTML Html 5 Основы HTML CSS Css3 Javascript Google Chrome Opera Mozilla Верстка Разработка Создание сайта Программирование Программист Баг IT Собеседование Длиннопост
13
19
shaitan.vladimir
shaitan.vladimir
3 года назад
Web-технологии

Базовая структура HTML файла⁠⁠

Базовая структура HTML файла HTML, Основы HTML, Html 5, CSS, Css3, Javascript, Frontend, Верстка, IT, Программирование, Программист, Разработка, Баг, Длиннопост

Любой HTML файл начинается с базовой структуры. Обычно она включает в себя теги, которые есть в любом HTML файле.


Пример базовой структуры показан ниже.


Рассмотрим ее подробнее.


<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Моя первая страница</title>
</head>
<body>
</body>
</html>

Начнем с тега DOCTYPE

<!DOCTYPE html>

Задача этого тега - указать браузеру стандарт HTML который используется в документе. Этот тег не будет показан на странице, но будет присутствовать в HTML коде страницы. Данный тег должен располагаться перед всем HTML кодом странице, в начале файла.


Так как мы используем последний стандарт HTML, а именно HTML5, то нам нужно использовать именно этот тег.


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

Тег <html>


Тег <html> - парный, очень важный тег, благодаря ему браузер понимает, где начинается контент который нужно обрабатывать как HTML.


<html></html>

Также тег <html> имеет обязательный атрибут lang, в качестве значения мы указываем язык, на котором должна отображаться страница. Эта информация помогает браузеру считывать специфические символы которые могу встречаться в различных языках.


В качестве значения передаем сокращения языков: ru, en и тд.

Тег <head>


<head></head>

Тег <head> - парный тег, нужен для хранения служебной, внутри него возможны различные сочетания тегов, которые будут указывать браузеру: название страницы, описание, ключевые слова. Эта информация называется 'метаинформацией'. Также метаинформация активно используется для продвижения сайта в поисковых системах (Google, Yandex и тд.).


Все что находится внутри тега <head> не будет отображено пользователю.

Тег <meta>


<meta>

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


<meta charset="UTF-8">

В данный момент одним из важных <meta> тегов, является <meta> в котором указывается кодировка сайта. Кодировка помогает правильно интерпретировать текст. Указываем мы ее потому что у разных пользователей в их системе может быть указана разная кодировка, из-за чего контент сайта может выглядеть не так как мы ожидаем.


Самой универсальной кодировкой является UTF-8, ее мы и указываем.

Тег <title>


<title>Заголовок страницы</title>

<title> - парный тег, располагается внутри тега <head>, внутри него указываем текст который будет выводиться во вкладке нашего сайта.

Тег <body>


<body></body>

<body> - парный тег, располагается внутри тега <html>, после закрывающего тега </head>. Этот тег является телом нашей страницы и внутри него мы описываем HTML структуру нашего сайта которую будет видеть пользователь.


Пример конечной структуры в файле index.html.

Показать полностью
[моё] HTML Основы HTML Html 5 CSS Css3 Javascript Frontend Верстка IT Программирование Программист Разработка Баг Длиннопост
36
437
Fi1osof
Fi1osof
3 года назад
Лига фрилансеров

Перевел интерактивные уроки "ECMAScript 6"⁠⁠

Материал для начинающих.


В продолжение предыдущих топиков

Перевел интерактивные уроки "Базовый курс HTML"

Перевел интерактивные уроки "Базовый курс CSS" и "Базовый курс JavaScript"


Сообщаю: перевел курс ES6.

На очереди React.


UPD: На всякий случай уточню: если вы JS еще не изучали, не следует сразу этот курс проходить, надо сначала базовый курс по JS пройти: https://freecode.academy/learn/sections/ck4h36qju0hp007829wp...

[моё] Программирование Самообразование HTML Основы HTML Карьера Текст
22
234
DELETED
3 года назад
Лига программистов

Ответ на пост «Перевел интерактивные уроки "Базовый курс CSS" и "Базовый курс JavaScript"»⁠⁠1

Раз пошла такая пьянка, рискну рассказать о сервисе, который сейчас разрабатываю в качетсве пэт проджекта.

А решил я создать сайт с интерактивными курсами по программированию.
На текущий момент уже созданы курсы :
Базовый HTML,  (источник freecodecamp, планируется пополняться и расширяться)

Базовый CSS (источник freecodecamp)

Прикладной визуальный дизайн - дополнение к курсу по CSS (источник freecodecamp. Название курса может быть не совсем корректное)

Базовый курс по php - интерактивный курс по php, сборная солянка со всего интернета.
Дабы не спамить ссылками на все курсы - есть еще курс по JS, в разработке курс по SQL и базам данных.
Прекрасно понимаю, что сайт еще достаточно сырой, есть куча недоработок и багов. К сожалению разработка и наполнение ведется в одно лицо.

В планах сделать интерактивные курсы по питону.
Что из недостатков по сайту вижу сейчас:

- курс по sql - решил сделать озвучку видео при помощи голосовых апи (специальный сервис). Звучит немного убого. В будущем хочу перезалить/перезаписть

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

- не весь функционал реализован до конца

- некоторые курсы (в частности JS) содержат не совсем актуальную информацию. По JS в будущем хочу сделать отдельный курс по ES6 (либо актуальному на момент создания стандарту)


Проект в целом создавался скорее для собственного интереса, т.к. было интересно реализовать возможность интерактивных задач для различных ЯП в браузере.

Если будет интересно - могу сделать пару постов о том, как реализовал тот или иной тренажер.

P.S. - За внешний вид просьба не ругать, т.к. я чистый бэк и во фронт почти не умею.  Верстка найдена на просторах интернета и адаптирована под свои нужды


Да прибудут с Вами знания

Ответ на пост «Перевел интерактивные уроки "Базовый курс CSS" и "Базовый курс JavaScript"» Программирование, Самообразование, HTML, Основы HTML, Карьера, Языки программирования, PHP, Ответ на пост, Курсы, Курсы программирования, CSS
Показать полностью 1
[моё] Программирование Самообразование HTML Основы HTML Карьера Языки программирования PHP Ответ на пост Курсы Курсы программирования CSS
36
1088
Fi1osof
Fi1osof
3 года назад
Лига программистов

Перевел интерактивные уроки "Базовый курс CSS" и "Базовый курс JavaScript"⁠⁠1

Предыдущий топик Перевел интерактивные уроки "Базовый курс HTML" оказался довольно положительно воспринят пикабушниками (на самом деле сильно положительней, чем я ожидал), и это меня довольно сильно простимулировало на скорейший перевод еще двух курсов: Базовый CSS (44 урока) и Базовый JavaScript (107 уроков). Работы оказалось сильно больше, чем я предполагал, но и ценность материала на выходе сильно больше (не только исправил множество неточностей, но и дополнил своими комментариями).


Осталось перевести курс по ECMAScript 6 и можно будет перейти к самому главному: курс по React. Планирую сделать это на следующей неделе.


Всем приятной бесплатной учебы!

[моё] Программирование Самообразование HTML Основы HTML Карьера Текст
61
1527
Fi1osof
Fi1osof
3 года назад
Лига программистов

Перевел интерактивные уроки "Базовый курс HTML"⁠⁠

Материал для новичков, кто хочет освоить HTML. Здесь есть около 30 интерактивных уроков, переведенных на русский: https://freecode.academy/learn/sections/ck4h36qjt0hoq0782jj6...


То есть это не просто теория, но и сразу выполнение заданий.


P.S. на самом деле там много и уроков и по другим разделам веб-разработки, но они пока в процессе перевода. О их готовности буду сообщать отдельно. А вообще уроки взяты с https://www.freecodecamp.org/, но перевод там машинный, так что часто вообще полная дичь. Без ручного перевода будет не обойтись.

[моё] Программирование Самообразование HTML Основы HTML Карьера Текст
113
1
laifhak
laifhak
3 года назад

Как сделать собственную капчу для личного сайта (Урок!)⁠⁠

Как сделать собственную капчу для личного сайта (Урок!) HTML, Основы HTML, PHP, CSS, Капча, Длиннопост

Создать капчу для личного сайта очень просто! Конечно можно воспользоваться сервисами от Яндекса или от Гугла но там так много регистрации и всяческих токенов, с которыми не каждый новичок сможет разобраться, что куда проще написать собственный код который со временем можно только улучшать и всячески модернизировать как душе будит угодно!


Зачем она нужна эта капча?


Ну например, что бы на ваш сайт смогли зайти только реальные люди. Что бы всякие серферы не смогли клонировать контент вашего сайта. Ну и просто защита от DDoS атак.


С чего начать?


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


Значит от сюда следует что должна быть некая форма ввода и пример того что человек должен будит сделать самостоятельно. 


Например в вести код - 12345


если(код==12345)то{вход открыт}иначе{закрыт}


на языке PHP это будет выглядеть вот так:


if ($capcha==12345){ echo"ок!";}else{echo"не верно!";exit;}


А как логическая функция поймет, что человек ввел 12345 в переменную $capcha ?


Для этой цели воспользуемся  методам POST и передадим её значение через тег формы:


$capcha=$_POST[capcha]; // приём


<form method='post' action=''>

<input name='capcha' type='text' >

<button type='submit'>Отправить!</button>


Обратите внимание что action='' пустой , это значит что передавать данные мы будит на эту же самую страницу в которой и будем писать весь наш код!


Пример самого простого кода капчи:


<?

$capcha=$_POST[capcha]; // приём

if ($capcha==12345)

{ echo"ок!";

}else{

echo"

<center><br><br><br><br><br><br><br><br>

<p>Введите 12345</p>

<form method='post' action=''>

<input name='capcha' type='text' >

<button type='submit'>Отправить!</button>

</center>

";

exit;

}

?>

...............................

КОНТЕНТ САЙТА!

...............................


Очен простая капча, давайте её усложнять! Например сделаем так чтобы каждый раз надо было вводить разное цифры. Для этого воспользуемся методам генерации случайного числа - rand


<?

$capcha=$_POST[capcha]; // приём веденных значений

$cap_x=$_POST[x]; // приём случайного x

if ($capcha==$cap_x and $capcha==true)

{ echo"ок!";

}else{

$x=rand(10000,99999);// генерируем любое число от 10000 до 99999 и записываем в $x

echo"

<center><br><br><br><br><br><br><br><br>

<p>Введите $x</p>

<form method='post' action=''>

<input name='capcha' type='text' >

<input type='hidden' name='x' value='$x'  ><!--скрытно-->

<button type='submit'>Отправить!</button>

</center>

";

exit;

}

?>

...............................

КОНТЕНТ САЙТА!

...............................


Познав основы логики капчи вы сможете её делать все интереснее и интереснее!


Например использовать куки что бы человеку был доступ на сайт в течении 24 часов без повторного ввода капчи -  setcookie("ok", "1", time() + (3600 * 24) );


Давайте ее внедрим:


<?

$ok=$_COOKIE["ok"];

$capcha=$_POST[capcha]; // прием веденных значений

$cap_x=$_POST[x]; // прием случайного x

if ($capcha==$cap_x and $capcha==true || $ok==1 ){

echo"ок!";

setcookie("ok", "1", time() + (3600 * 24) );

}else{

$x=rand(10000,99999);// генерируем любое число от 10000 до 99999 и записываем в $x

echo"

<center><br><br><br><br><br><br><br><br>

<p>Введите $x</p>

<form method='post' action=''>

<input name='capcha' type='text' >

<input type='hidden' name='x' value='$x' ><!--скрытно-->

<button type='submit'>Отправить!</button>

</center>

";

exit;

}

?>

...............................

КОНТЕНТ САЙТА!

...............................



Так же можно играться со стилям капчи и вместо цифр показывать картинки, или звуки, или загадку, или впускать на сайт только тех людей у которым будут доступ к системе по определённому IP ! Или тех кто оплатил токен ключ прислав вам денюшки на кошелёчек!


Всё это можно реализовать самостоятельно и абсолютна бесплатно!


Ну и в конце я приведу пример шифрования значений капчи:


<?

$ok=$_COOKIE[ok];

$capcha=$_POST[capcha]; // прием веденных значений

$cap_x=$_POST[x]; // прием случайного x

$capcha=md5($capcha); //кодируем хеш в виде 32-символьного шестнадцатеричного числа

if ( $ok==false ){

if ($capcha==$cap_x and $capcha==true  ){

echo"ок!";

setcookie("ok", "1", time() + (3600 * 24) ); // сохраняем куку на 24 часа

}else{

for ($i=0;$i<6;$i++){

$x=rand(0,9);// генерируем любое число от 0 до 9 и записываем в $x1

$w=$w."<img src='$x-картинка.png' >"; // картинок должно быть от 0 до 9

$s=$s.$x;

}

$x_cod=md5($s); //кодируем хеш в виде 32-символьного шестнадцатеричного числа

echo"

<center><br><br><br><br><br><br><br><br>

<p>$w</p>

<form method='post' action=''>

<input name='capcha' type='text' >

<input type='hidden' name='x' value='$x_cod' ><!--скрытно-->

<button type='submit'>Отправить!</button>

</center>

";

exit;

}

}

?>

...............................

КОНТЕНТ САЙТА!

...............................



Готовый пример можно скачать по ссылке:



https://disk.yandex.ru/d/-2_0T8jnuxik9A

Показать полностью
[моё] HTML Основы HTML PHP CSS Капча Длиннопост
47
nfh2860
nfh2860
3 года назад

Изучение основ CSS⁠⁠

Неделька была уж чересчур насыщенная, из-за чего не было свободного времени даже открыть крышку ноутбука. Ох же эта работа, отнимает всё наше свободное время.


И вот наконец-то я подошёл к CSS. Занимаюсь всё там же на freeCodeCamp, весьма интересно и интерактивно. Сегодня получилось пробежаться по основам CSS, прошёлся по весьма простым темам, как работа с текстом и позиционирование элементов на странице.


Начал как это не банально с подключения css к html странице. Из чего выяснил что есть три способа подключения. Для себя выделил онин считая его оптимальным. Это подключение отдельно файла, содержащего в себе все свойства тех или иных html блоков страницы. А что удобно этот способ позволяет использовать эти свойства и на других страницах, всё что для этого требуется так это подключить необходимый файл.


<link rel="stylesheet" href="./css/index.css" />


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

Изучение основ CSS CSS, Основы HTML, Обучение, Web-программирование, Длиннопост

Получив доступ к элемента DOM с помощью селекторов, начал с банального изменения цвета, далее продвинулся к параметрам отображения текста. После изучил вопрос манипуляции размеров блоков, изменение параметров фона блока, окантовки. Немного смутил вопрос внешних и внутренних отступов. А смущало то, что при изменении внутреннего отступа менялся и размер самого блока. Эту проблему решил через изучение параметров размера блочной модели, а именно через свойство box-sizing.

Изучение основ CSS CSS, Основы HTML, Обучение, Web-программирование, Длиннопост

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

Изучение основ CSS CSS, Основы HTML, Обучение, Web-программирование, Длиннопост

Интересным также был вопрос позиционирования объектов на странице. Данная тема пока не вызывает огромного интереса, но я также с ней познакомился.

Изучение основ CSS CSS, Основы HTML, Обучение, Web-программирование, Длиннопост

Долго мучился с расположением элементов на страницы, чем-то пытался манипулировать через float, чем-то через display и position. Всё конечно получилось, но настраивать всё для каждого элемента весьма нудновато, поэтому пришлось поискать другое решение. Этим решением оказался Flex Box. Всё что нужно, так это задавать параметры только для родительского элемента. Пришлось переписать страницу под этот инструмент, хорошо что моя страничка учебная и на ней пока не так уж много элементов. Так познакомившись с Flex Box, решил пока на этом закончить. Надеюсь в следующий раз разобраться с github, чтобы по чуть-чуть, не спеша изучать git.

cd ../

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