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

Скайдом: три в ряд

Три в ряд, Головоломки, Казуальные

Играть

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

  • solenakrivetka solenakrivetka 7 постов
  • Animalrescueed Animalrescueed 53 поста
  • ia.panorama ia.panorama 12 постов
Посмотреть весь топ

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

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

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

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

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

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

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

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


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


Ну например, что бы на ваш сайт смогли зайти только реальные люди. Что бы всякие серферы не смогли клонировать контент вашего сайта. Ну и просто защита от 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

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

4 года назад

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


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


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


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


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

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

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

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

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

cd ../

Показать полностью 4
[моё] CSS Основы HTML Обучение Web-программирование Длиннопост
32
6
nfh2860
nfh2860

Знакомство с html⁠⁠

4 года назад

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

Потратив ни мало ни много половину суток, ознакомился по меньшей мере с более чем 100 различными ресурсами. Это были различные информационные сайты и платформы с курсами,блоги, youtube и тому подобное. Из всеx их я выбрал пару, которые необходимые для начала.

Ознакомившись с созданием сайтов, я для начала обратил своё внимание на создание визуальной части сайта, к которой как правило относится front-end, объединяющий вместе необходимые для этого инструменты как html, css и javascript. Javascript для меня ещё будет сложноват, да и пока в необходимости я не вижу, поэтому начну с html и css.

По html и css хорошей литературы я не нашёл, поэтому для ознакомления с этими двумя ресурсами выбрал понравившуюся мне платформу, на которой последовательность, тем что мне интересно, почти схожа с картой, которую я описывал в предыдущих постах. Это freeCodeCamp, вот ссылочка на ресурс https://www.freecodecamp.org/.

freeCodeCamp объединяет на платформе следующие курсы…

Знакомство с html

На freeCodeCamp начал с изучения html. Сложности в понимании html не возникло, там я понял что html это просто текст страницы и все его элементы должны находиться между правильно подобранными тегами, это сложности никакой для меня не составило. Есть теги которые содержатся только в заголовке документа в блоке <head>, и употреблять их где либо ещё не рекомендуется, другие же содержаться в теге <body>. Дополнительные атрибуты тегов можно узнавать по необходимости использования, а их перечень по каждому тегу узнать из ещё одного привлекательного ресурса как MDN Web Docs, вот ссылочка на ресурс https://developer.mozilla.org/en-US/. Любой корневой html файл должен иметь название index - это традиционное название файла, который используется в качестве индекса для каталога веб-сайта.

На данный момент этих двух ресурсов мне хватит для получения базовых знаний. Надеюсь к концу дня удастся ознакомится и с css. А там и разобраться с github и что нибуть даже опубликовать.

Показать полностью 1
[моё] Основы HTML Веб-разработка Обучение
22
Usernamelre3
Usernamelre3

Создание и редактирование html страницы⁠⁠

5 лет назад

Надеюсь информативно

И так это видео создании.. о том что написанно на превью

Вообщем то html это основа вэб программирования а создание и редактирование это основа основы

https://youtu.be/tGIavqhDUwg

Показать полностью
[моё] HTML Html 5 Основы HTML Web Web-программирование Программирование Windows Файл Сайт Видео
14
Antkon

Основы html . Web-разработка⁠⁠

5 лет назад

Начнём с основ . HTML - это язык разметки.Вы наверное уже видели что видео имееет расширение (.mp4)  и в html  тоже есть расширение (.html). 

Если у вас ещё нету html-редактора , то будем пользоваться блокнотом (notepad) в компьютере .


Есть программы которые рекомендуется использовать новичкам html кода это Atom , Notepad++ , Sublime Text 3 и Visual Studio Code . 

Ладно перейдём к главному... Заходим в блокнот или другую программу для создания html кода.  И сейчас вы сами всё увидите .

Перейти к видео

Файл я назвал index.html  и .html  это и есть расширение html файла. Я выбрал кодировку utf-8 сейчас это самая рекомендуемая кодировка .  И как мы видим когда я назвал файл index.html  то он стал открываться с помощью firefox  если у вас другой браузер то это  ничего не поменяет.

Это конец первой части ! И плиз не пишите гневные комменты : чё так коротко и вроде этого,  для второй части мне нужен видеоредактор чтобы более подробно объяснить . И ещё напишите топовые видеоредакторы ! Очень надо! Вопросы задавайте тоже в комментах.

Показать полностью 1 1
[моё] Веб-разработка HTML Основы HTML Видео
32
DELETED

Html. 4 урок, пишем статью⁠⁠

5 лет назад

За основу взята статья из википедии «Города России».

Так будет выглядеть конечный результат.

Html. 4 урок, пишем статью

Шаг 1. Вначале создадим папку, назовем её к примеру, Cities.

Шаг 2. Создадим в данной папке файл “cities.html” и папку с названием “img”.

Шаг 3. Запомнил файл cities.html следующим шаблоном. (Я буду писать в VSCode)


<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>Города России</title>

</head>

<body>


</body>

</html>

Шаг 4. Оформляем текст. Статья начинается с заголовка «Города России», так что добавил внутрь тега body тег h1 и напишем туда текст. <hr/> - тег, создающий горизонтальную черту, или конец страницы.


<body>

<h1>Города России</h1>

<hr />

Далее у нас идет простой текст (параграф), добавляем и заключаем его в тег p.


<p>Согласно своду правил «Градостроительство. Планировка и застройка городских и сельских поселений» (СП 42.13330.2011) от Минрегионразвития РФ, города страны классифицированы следующим образом:</p>

Мы видим, что текст, «Градостроительство. Планировка и застройка городских и сельских поселений» выделен курсивом, так что помещаем его в строчный тег курсива <i> или <em>, а Минрегионразвития РФ выделен синим цветом, что указывает что он является ссылкой, поэтому заключаем его в тег ссылки <а>, и пусть он ведет на сайт «http://government.ru/department/57/events/»


<p>Согласно своду правил <i>«Градостроительство. Планировка и застройка городских и сельских поселений»</i>(СП 42.13330.2011) от <a href="http://government.ru/department/57/events/"> Минрегионразвития РФ</a>, города страны классифицированы следующим образом:</p>

Далее у нас идет ненумерованный список, так что оформим его следующим образом, где <ul> – указывает, что текст ненумерованный, а <li> – элемент списка.


<ul>

<li>Крупнейшие —  с населением свыше 1 млн чел.</li>

<li>Крупные —  от 250 тыс. чел. до 1 млн чел. (в том числе подкатегории от 250 до 500 тыс. и от 500 тыс. до 1 млн чел.)</li>

<li>Большие —  от 100 до 250 тыс. чел.</li>

<li>Средние —  от 50 до 100 тыс. чел.</li>

<li> Малые —  до 50 тыс. чел. (в том числе подкатегории до 10 тыс., от 10 до 20 тыс. и от 20 до 50 тыс. чел.;</li>

</ul>


Далее у нас идет подзаголовок (заголовок 2 уровня) «Содержание», так что помещаем его в тег <h2>.


<h2>Содержание</h2>


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


<ol>

<li>История </li>

<li>Группировка городов по населению</li>

<li>Города с населением более 1 млн человек (крупнейшие города)</li>

</ol>


Мы видим, что у Истории есть подсписок, который также начинается с 1. Просто создаем еще один нумерованный список и вставляем его внутрь тега <li>История …</li>


<li>История

<ol>

<li>Последние изменения</li>

</ol>

</li>

Далее идет «История» с текстом, оформляем её как подзаголовок с параграфом.


<h2 >История</h2>

<p>В послереволюционную эпоху число городов Российской Федерации изменялось в результате административно-территориальных преобразований, в том числе следует отметить те преобразования, которые увеличивали число городов:</p>

Далее у нас идет Заголовок 2 уровня с заголовком третьего уровня.


<h2>Группировка городов по населению</h2>

<h3>Оценка по состоянию на 1 января 2019 года</h3>


А затем идет таблица. Вообще, html-таблица сама по себе сложна, про неё будет отдельный урок, а пока сделайте так.


<table border="2">

<tr>

<th>Федеральный округ</th><th>Крупнейшие</th>

</tr>

<tr>

<td>Дальневосточный</td><td>0</td>

</tr>

<tr>

<td>Приволжский</td><td>5</td>

</tr>

</table>


Тег <table> указывает на то, что это таблица. <tr> - это строка таблицы. <th> - столбец с заголовком, <td> - столбец с данными.

И в завершении, скачайте любой рисунок, к примеру, карту России, и поместите его в папку img. Затем добавляем последний заголовок 2 уровня с параграфом и картинкой.


<h2 id="map">Города с населением более 1 млн человек (крупнейшие города)</h2>

<p>Карта городов с населением более <b>1 млн человек</b></p>

<img src="img/russia.png" height="300"/>


Путь к файлу с картинкой указывается в теге img – src. Путь идет относительно расположения файла, который вы создали, так что указываем папку img, а в ней указываем название картинки.

Если испытываете затруднение, здесь находится эта статья HTML5.docx с примером  с названием cities.html

Показать полностью 1
Основы HTML Урок Длиннопост
11
0
DELETED

HTML урок 3⁠⁠

5 лет назад

В прошлом уроке мы разобрали, что теги 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).


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


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

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


<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-мя пробелами. Закрывающий тег, если он родительский, находится на одном уровне с открывающимся. Это очень удобно, сравните.

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

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

HTML урок 1,2⁠⁠

6 лет назад

Урок 1

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

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


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

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

<!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.

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


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


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

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