Web разработка

January 31, 2019 at 09:12 PM

Решил печатать сюда, периодически, статьи собственного производства по веб разработке.

Если замечу интерес у местной публики к сему поделию - буду делать это регулярно и (по возможности) часто.

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

Итак, начнём с самого базового, а именно, с вёрстки веб страниц.

Начинаем изучать HTML и CSS.

Для этого сперва настроим свой компьютер:

1) Нам нужно сделать видимым расширение файлов.

О том, как это сделать - для Windows 7, для Windows 10

2) скачать удобный текстовый редактор. Я лично предпочитаю IDE от JetBrains, но на первых порах нам можно установить это.

После того как мы вывели расширение файлов и установили текстовый редактор, можем перейти к написанию первой простой веб страницы.

Создаем где-нибудь папку, внутри файл с произвольным именем, но обязательным расширением .html (например index.html).

Открываем этот файл с помощью установленного нами текстового редактора, и пишем:

<!DOCTYPE html>
<html>
  <head>

  </head>
  <body>

  </body>
</html>

Первая строчка - указание типа документа ( у нас он - html)

Теперь переходим к HTML тегам. Большинство тегов являются парными, то есть есть открывающий тег и закрывающий.В приведенной выше конструкции - есть корневой тег html, внутри него два парных тега <head></head> и <body></body>. В head указывается служебная информация, к нему мы вернёмся позже. А вот в body - идёт вся видимая часть веб страницы. Вот и выведем текст:

<!DOCTYPE html>
<html>
    <head>
        
    </head>
    <body>
        Мой первый текст!
    </body>
</html>

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

В этой статье познакомимся с ещё одним тегом - "p". Он также является парным. Служит для создания параграфов в статье.

<!DOCTYPE html>
<html>
    <head>
        
    </head>
    <body>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae illo error nemo a accusamus commodi ipsam, provident cum itaque amet nobis numquam fugit qui aliquid! Blanditiis qui modi cumque atque.
        </p>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae illo error nemo a accusamus commodi ipsam, provident cum itaque amet nobis numquam fugit qui aliquid! Blanditiis qui modi cumque atque.
        </p>
    </body>
</html>

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

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

January 31, 2019 at 09:20 PM

Хорошее дело! Продолжайте.

February 1, 2019 at 08:48 PM

HTML теги бывают строчными и блочными. Блочные по умолчанию занимают всю доступную ширину, строчные же занимают на странице пространство - равное собственной ширине.

Например вышеупомянутый тег параграфа - является блочным.

Так же у HTML тегов могут быть атрибуты - средства расширяющие их функционал . На примерах ниже мы увидим их использование.

Изображения

Для размещения изображений на странице используется тег "img". Тег "img" - непарный, строчный. Оформляется как <img />. Для указания пути до картинки - используется атрибут src. Итак, кладем картинку обязательно рядом со своим html файлом и пишем внутри тега body -

Пример 1

вот тут мы и встречаемся с атрибутами. Как видите, "шаблон" атрибута - такой: название атрибута, знак равенства в двойных кавычках (чаще всего) - его (атрибута) значение.

В случае с примером 1 мы указываем в атрибуте src название нашей фотки с её расширением.

Так же мы видим атрибут alt. Он служит для указания альтернативного текста (описания) для картинки. Когда и если картинка подгружается, значение этого атрибута перестает быть видным пользователю. Этот атрибут не является обязательным, но желательно его указывать.

Указываю полный код текущего файла на всякий случай:

<!DOCTYPE html>
<html>
    <head>
        
    </head>
    <body>
        <img src="picture.png" alt="My beautiful picture" />
    </body>
</html>

Поговорим о путях к файлам.

Пути к файлам бывают абсолютные и относительно документа и относительно корня сайта.

Абсолютный путь - полный путь к файлу (познакомимся с ними поближе, когда дойдём до работы с локальным веб сервером)

Путь относительно корня сайта - ну тут название говорит само за себя (мы также познакомимся с ними работая с локальным веб сервером)

Путь относительно документа - (то есть относительно того HTML файла в котором мы работаем). Вот их сейчас разберём подробнее.

Рядом с нашим html файлом, создаём папку images и перемещаем нашу картинку туда. Обновляем страницу в браузере, и видим что теперь браузер не может её найти (так как относительно нашего документа - путь теперь указан неверно).

И так наша текущая структура: html файл и рядом с ним папка images (внутри которой лежит наша картинка).

Тут нам нужно просто указать верный путь к картинке

Пример 2

либо

Пример 3

Точка в путях к файлу обозначает текущую директорию. То есть в примере 3:

текущая папка (директория) / (слеш) images / название картинки с расширением.

"./" можно не писать.

А что если бы наш html файл лежал внутри какой-то папки - назовём её my_folder?

Наша текущая структура - такова: 2 папки (images и my_folder), внутри images лежит картинка, внутри my_folder - лежит наш html файл.

Если перетаскивали всё вручную переоткройте файл в редакторе и в браузере откройте уже из папки my_folder

Чтобы теперь достучаться до картинки, нам надо, из html файла выйти на ступень выше (где лежат сами images и my_folder) затем images/название картинки.

Пример 4:

.. (две точки подряд) в пути к файлу - это обозначение родительской категории,

то есть .. - выходим наверх (где лежат images и my_folder) и далее по старому.

Если бы html файл был бы глубже ещё на одну папку то есть: внутри my_folder лежала бы папка files а в ней уже наш html файл. То путь выглядел бы так:

../../images/picture.png то есть поднимаемся 2 раза , попадая на уровень к папке images и там уже путь к картинке.

Запутанная тема немного. Постарался объяснить максимально просто. Важно очень понять этот принцип. Вопросы - приветствуются.

February 1, 2019 at 09:11 PM

Ссылки

Сделать ссылку на странице - очень просто.

Для них имеется специальный тег - "a". Тег "а" - парный и строчный.

то есть пишем:

Пример 1:

<a href="https://www.google.com/">Эта ссылка откроет сайт "Google"</a>

в атрибуте href - пишем адрес ссылки, а между открывающим и закрывающим тегом - текст ссылки.

Адрес в href может также вести и на другой файл, путь к нему указывается ровно по тому же принципу, который я описывал выше - для картинок.

Попробуйте самостоятельно сделать другой html файл и в href прописать путь к нему.

То есть сделайте новый html файл, например other.html и сделайте в первом html файле ссылку, при клике на которую, откроется страница other.html

Чтобы ссылка открылась в новой вкладке - добавьте в неё атрибут target со значением _blank

Пример 2

<a href="https://www.google.com/" target="_blank">Эта ссылка откроет сайт "Google" в новой вкладке</a>

В следующий раз рассмотрим

Заголовки, ссылки на конкретные разделы страницы, начнём уже потихоньку параллельно знакомиться с CSS (чтобы обучение не выглядело слишком пресным )

Edited February 1, 2019 at 09:14 PM by Rust programming language

February 2, 2019 at 09:32 PM

Заголовки

В HTML есть 6 типов заголовков:

h1, h2, h3, h4, h5, h6 теги, все они парные и блочные. Самый крупный заголовок - h1. h2 - поменьше, h3 еще меньше и так далее, самый маленький (как вы уже поняли) h6.

Внутри body пишем -

<h1>Заголовок</h1>

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

Теперь уже можно верстать простенькие статьи, ибо заголовки, параграфы, ссылки и картинки - мы уже прошли.

Ещё несколько важных тегов

Есть также тег title, он является парным, указывается внутри тега head, и служит названием для текущей страницы. Внутри тега head пишем <title>Моя страница</title>, обновляем страницу, и смотрим на вкладку браузера, в ней теперь отображено название - "Моя страница".

Тег div - выделение или группирование текста, html элемента(-ов). Является парным и блочным. То есть он просто создаёт блок с которым что-то, потом можно сделать. В дальнейшем подробнее рассмотрим манипуляции с ним. Если вам сейчас не совсем ясна его роль на странице - ничего страшного. Скоро вы точно поймёте что это, так как элемент div чаще всего встречается пожалуй.

Тег span - парный, строчный - делает тоже самое что и div - единственное отличие, то что он - строчный.

По HTML на сегодня - всё. На следующем уроке мы продолжим изучать его.

Основы CSS

Итак, чтобы обучение было немного веселее и интереснее, я решил объяснять CSS параллельно урокам по HTML.

CSS - набор правил для HTML тегов - влияющих на поведение, внешний вид и т.д.

Внутри body создаем несколько параграфов с текстами.

Внутри тега head - создаем тег style, как показано ниже, и указываем

p {

color: red;

}

Пример 1:

<!DOCTYPE html>
<html>
    <head>
        <title>Document</title>
        <style>
            p {
                color: red;
            }
        </style>
    </head>
    <body>
        <p>
            Первый - Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam perspiciatis architecto ratione, repellendus repellat, maiores accusamus rem esse amet eum quas assumenda cum ullam! Aperiam quaerat numquam officiis recusandae eligendi.
        </p>
        <p>
            Второй - Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam perspiciatis architecto ratione, repellendus repellat, maiores accusamus rem esse amet eum quas assumenda cum ullam! Aperiam quaerat numquam officiis recusandae eligendi.
        </p>
        <p>
            Третий - Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam perspiciatis architecto ratione, repellendus repellat, maiores accusamus rem esse amet eum quas assumenda cum ullam! Aperiam quaerat numquam officiis recusandae eligendi.
        </p>
        <p>
            Четвертый - Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam perspiciatis architecto ratione, repellendus repellat, maiores accusamus rem esse amet eum quas assumenda cum ullam! Aperiam quaerat numquam officiis recusandae eligendi.
        </p>
    </body>
</html>

Итак, кратко о нашей структуре:

У нас есть четыре параграфа, условимся, что называть в дальнейшем я эти параграфы, буду по их первому слову в тексте (чтобы не перепутать)

Наверху в head внутри тега style , мы пишем название тега ( в конкретном случае мы выбираем тег параграфа, то есть - "p"), Открываем фигурные скобки, внутри пишем color: red;.

Как видите, CSS правило имеет следующий шаблон, название правила, двоеточие, значение, точка с запятой.

Если бы мы хотели к этому тегу применить ещё одно правило, мы конечно можем, написать :

p {

background-color: yellow;

}

, но гораздо более предпочтительнее написать так:

p {

color: red;

background-color: yellow;

}

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

Подробнее о значении этих правил (в дальнейшем я буду их называть - "свойствами") мы позже поговорим, а сейчас я бы хотел остановиться поподробнее на селекторах.

Селекторы - выборка тех элементов, для которых мы хотим применить наши стили.

Мы выбрали и покрасили параграфы, в красный цвет с желтым фоном ( не очень красивое сочетание кстати, ну да ладно).

А что если мы хотим, покрасить только 2 параграфа, а не все.

Тогда, мы даём атрибут class , тем параграфам, которые мы хотим покрасить:

Пример 2:

<!DOCTYPE html>
<html>
    <head>
        <title>Document</title>
        <style>
            .paint-me {
                color: red;
                background-color: yellow;
            }
        </style>
    </head>
    <body>
        <p class="paint-me">
            Первый - Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam perspiciatis architecto ratione, repellendus repellat, maiores accusamus rem esse amet eum quas assumenda cum ullam! Aperiam quaerat numquam officiis recusandae eligendi.
        </p>
        <p class="paint-me">
            Второй - Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam perspiciatis architecto ratione, repellendus repellat, maiores accusamus rem esse amet eum quas assumenda cum ullam! Aperiam quaerat numquam officiis recusandae eligendi.
        </p>
        <p>
            Третий - Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam perspiciatis architecto ratione, repellendus repellat, maiores accusamus rem esse amet eum quas assumenda cum ullam! Aperiam quaerat numquam officiis recusandae eligendi.
        </p>
        <p>
            Четвертый - Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam perspiciatis architecto ratione, repellendus repellat, maiores accusamus rem esse amet eum quas assumenda cum ullam! Aperiam quaerat numquam officiis recusandae eligendi.
        </p>
    </body>
</html>

Итак, параграфам, которые мы хотим покрасить, даём атрибут class , с любым названием (но чтобы не начиналось с числа, двух дефисов подряд или дефиса и числа), желательно давать смысловое название классу, разделяя дефисом, чтобы читая код, можно было догадаться, для чего был нужен этот класс. В CSS выборка по классу осуществляется по следующему шаблону: точка, название класса, и дальше как обычно, фигурные скобки и правила.

В следующей статье, мы пройдём списки и таблицы в HTML, а также продолжим тему селекторов.

Edited February 2, 2019 at 09:37 PM by Rust programming language

February 3, 2019 at 06:54 PM

HTML списки

1) упорядоченный список:

В HTML за создание упорядоченного списка отвечает тег "ol". Элементами списка выступает тег "li".

Пример 1:

<ol>

</ol>

Естественно, используется внутри тега "body".

2) Неупорядоченный список:

Всё тоже самое, только там уже тег списка не "ol", а "ul".

Пример 2:

<ul>

</ul>

3) Список определений:

<dl>

<dd>Test 1 definition</dd>

<dd>Test 2 definition</dd>

</dl>

Тег "dl" -тег списка, тег определяемого значения - "dt", само определение - "dd"

Все теги списков - парные и блочные. У списков есть несколько свойственных только им CSS правил, с которыми мы познакомимся позже (углубившись в дебри CSS).

HTML таблицы

Тег таблиц - "table",

тег тела для контейнера заголовков таблиц - "thead",

тег для самих заголовков - "th",

тег тела таблицы "tbody",

Тег горизонтального ряда таблицы - "tr",

тег элементов со значениями в таблице - "td"

Сейчас я дам пример простой таблицы, и сразу всё станет на свои места:

<!DOCTYPE html>
<html>
    <head>
        <title>Document</title>
        <style>
            td, th{
                border: 1px solid #000;
            }
        </style>
    </head>
    <body>
        <table>
            <thead>
                <tr>
                    <th>Item</th>
                    <th>Quantity</th>
                    <th>Color</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>
                        Pen
                    </td>
                    <td>
                        5
                    </td>
                    <td>
                        Blue
                    </td>
                </tr>
                <tr>
                    <td>
                        Pencil
                    </td>
                    <td>
                        3
                    </td>
                    <td>
                        Red
                    </td>
                </tr>
                <tr>
                    <td>
                        Bag
                    </td>
                    <td>
                        4
                    </td>
                    <td>
                        Green
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

Вот выводится полноценная таблица на странице. Все роли тегов я пояснил.

В head, я добавил специальный стиль, чтобы таблица показывалась границами, позже в CSS мы пройдём это правило (отвечающее за отображение рамок).

Если один из элементов таблицы должен занимать не одну ячейку по горизонтали а больше, то пропускаем соседние элементы, а длинной ячейке даём атрибут - "colspan":

<!DOCTYPE html>
<html>
    <head>
        <title>Document</title>
        <style>
            td, th{
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
        <table>
            <thead>
                <tr>
                    <th>Item</th>
                    <th>Quantity</th>
                    <th>Color</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td colspan="2">
                        Pen
                    </td>
                    
                    <td>
                        Blue
                    </td>
                </tr>
                <tr>
                    <td>
                        Pencil
                    </td>
                    <td>
                        3
                    </td>
                    <td>
                        Red
                    </td>
                </tr>
                <tr>
                    <td>
                        Bag
                    </td>
                    <td>
                        4
                    </td>
                    <td>
                        Green
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

Сейчас тег со значением "pen" - занимает две ячейки благодаря атрибуту.

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

По HTML на сегодня - всё, в следующей статье продолжим им заниматься.

CSS селекторы (продолжение):

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

Есть также атрибут "id". Универсальный идентификатор HTML элемента. На одной HTML странице, значение id - должно быть уникально.

То есть, не может быть двух HTML тегов с id="book".

Рассмотрим применение на практике по нашему вчерашнему примеру:

<!DOCTYPE html>
<html>
    <head>
        <title>Document</title>
        <style>
            #second{
                color: blue;
            }
            .paint-me {
                color: red;
                background-color: yellow;
            }
            #third{
                color: green;
            }
        </style>
    </head>
    <body>
        
        <p class="paint-me">
            Первый - Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam perspiciatis architecto ratione, repellendus repellat, maiores accusamus rem esse amet eum quas assumenda cum ullam! Aperiam quaerat numquam officiis recusandae eligendi.
        </p>
        <p id="second" class="paint-me">
            Второй - Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam perspiciatis architecto ratione, repellendus repellat, maiores accusamus rem esse amet eum quas assumenda cum ullam! Aperiam quaerat numquam officiis recusandae eligendi.
        </p>
        <p id="third">
            Третий - Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam perspiciatis architecto ratione, repellendus repellat, maiores accusamus rem esse amet eum quas assumenda cum ullam! Aperiam quaerat numquam officiis recusandae eligendi.
        </p>
        <p>
            Четвертый - Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam perspiciatis architecto ratione, repellendus repellat, maiores accusamus rem esse amet eum quas assumenda cum ullam! Aperiam quaerat numquam officiis recusandae eligendi.
        </p>
    </body>
</html>

Итак, чтобы использовать селектор по "id", используется символ "#" и значение "id" атрибута.

Вес селекторов

Обратите внимание, что у второго параграфа, есть класс paint-me, который пытается покрасить его в красный цвет, но селектор по id="second" - перебивает этот стиль хоть и использован выше в стилях, чем paint-me. Всё потому что, селектор по Id имеет больший вес, чем селектор по классу, а селектор по классу имеет больший вес, чем селектор по тегу..

Комбинация селекторов:

Для придания большей силы селекторам можно их "уточнять", поясняю на примере:

<!DOCTYPE html>
<html>
    <head>
        <style>
            .add-color{
                color: red;
            }
            div.container p.other-class{
                color: violet;
            }
            span.add-color{
                color: blue;
            }
            
        </style>
    </head>
    <body>
        <div class="container">
            <span class="add-color">
                span
            </span>
            <p id="one" class="add-color other-class">
                test1
            </p>
            <p id="two" class="add-color">
                test2
            </p>
            <p id="three" class="add-color">
                test3
            </p>
        </div>

    </body>
</html>

Принцип тут незамысловатый:

Если между селекторами нету пробела, то они указаны у одного тега, то есть если мы пишем - "p.add-color" то значит у тега "p" есть класс add-color и мы пытаемся лишь "усилить" действие этого селектора.

Если между селекторами есть пробелы, например ".container p.add-color", это значит что класс container находится у одного из тегов, содержащих "p.add-color". Вес селекторов также усиливается в этом случае.

В нашем случае, параграф находится в теге "div", то есть тег "div" - содержит тег параграфа, говорят ещё, тег "div" является родительским для тега "p".

В следующий раз :

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

Edited February 3, 2019 at 06:55 PM by Rust programming language

February 3, 2019 at 08:52 PM

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

February 3, 2019 at 09:15 PM

22 minutes ago, Spirt said:

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

Ок, спасибо большое за совет. Учту обязательно.

February 3, 2019 at 09:57 PM

49 minutes ago, Rust programming language said:

Ок, спасибо большое за совет. Учту обязательно.

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

February 4, 2019 at 05:42 PM

Веб формы

Полный код сегодняшнего урока:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            .form-item label{
                display: block;
                font-weight: bold;
            }
            .form-item{
                margin-bottom: 20px;
            }
            input[type=text], textarea, select{
                margin-top: 10px;
            }
            .form-role{
                font-size: 20px;
                text-decoration: underline;
                margin-bottom: 10px;
            }
            .form-parts, .form-part{
                margin-right: 20px;
                display: flex;
            }
            .submit-form input{
                cursor: pointer;
                border: none;
                outline: none;
                width: 150px;
                display: flex;
                align-items: center;
                justify-content: center;
                height: 50px;
                background-color: blue;
                color: #fff;
                transition: all .5s;
            }
            .submit-form input:hover{
                background-color: red;
                transition: all .5s;
                box-shadow: 0px 0px 31px 0px rgba(0,0,0,0.75);
            }
        </style>
    </head>
    <body>
        <form action="" method="">
            <div class="form-item">
                <label for="name">
                    Имя
                </label>
                <input type="text" id="name" name="name" placeholder=""/>
            </div>
            <div class="form-item">
               <input type="text" placeholder="фамилия" name="surname"/>
            </div>
            <div class="form-item">
                <input type="email" placeholder="Введите ваш email" name="email"/>
            </div>
            <div class="form-item">
                <label for="about">Немного о себе</label>
                <input type="text" id="about" name="about" value="Web developer"/>
            </div>
            <div class="form-item">
                <div class="form-role">
                    Пол
                </div>
                <div class="form-parts">
                    <div class="form-part">
                        <label for="male">
                            Мужской
                        </label>
                        <input type="radio" name="gender" value="male" />
                    </div>
                    <div class="form-part">
                        <label for="female">
                            Женский
                        </label>
                        <input type="radio" name="gender" value="female" />
                    </div>
                </div>
            </div>
            <div class="form-item">
                <div class="form-role">
                    Интересы
                </div>
                <div class="form-parts">
                    <div class="form-part">
                        <label for="sport">
                            Спорт
                        </label>
                        <input id="sport" type="checkbox" name="sport" value="sport" />
                    </div>
                    <div class="form-part">
                        <label for="music">
                            Музыка
                        </label>
                        <input type="checkbox" id="music" name="music" value="music" />
                    </div>
                    <div class="form-part">
                        <label for="science">
                            Наука
                        </label>
                        <input type="checkbox" id="science" name="science" value="science" />
                    </div>
                </div>
            </div>
            <div class="form-item">
                <label for="language">
                    Ваш родной язык
                </label>
                <select name="language" id="language">
                    <option value="en">Английский</option>
                    <option value="cn">Китайский</option>
                    <option value="fr">Французский</option>
                    <option value="de">Немецкий</option>
                    <option value="jp">Японский</option>
                </select>
            </div>
            <div class="form-item">
                <label for="language">
                    Какая-то информация
                </label>
                <textarea name="" id="" cols="30" rows="10"></textarea>
            </div>

            <div class="submit-form">
                <input type="submit" value="Отправить форму"/>
            </div>

        </form>

    </body>
</html>

Вот пример веб формы, они служат для отправки каких-либо данных от пользователя на сервер.

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

Вот сверстал я форму, заранее извиняюсь за страшный дизайн, уж не дизайнер я).

Итак, начинаем разбирать подробно (по блокам).

Первый тег - тег "form" , собственно нужен для объявления самой формы. Атрибуты action и method - нужны для серверной части.

Пример 1

<div class="form-item">
  <label for="name">
    Имя
  </label>
  <input type="text" id="name" name="name" placeholder=""/>
</div>

Тег "label" - ярлык для поля ввода, связывается с нужным полем ввода через атрибут "for". В атрибуте for - пишется id поля ввода. И поэтому кликая по ярлыку, мы фокусируемся на нужном поле ввода.

Тег input c атрибутом type="text". Обычное поле ввода, которое наверное все неоднократно видели. Атрибут type - очень важный, так в зависимости от значения этого атрибута, внешний вид поля может поменяться кардинально.

Все атрибуты name здесь - нужны на сервере, на этапе верстки пока о них забываем.

Пример 2:

<div class="form-item">
  <input type="text" placeholder="фамилия" name="surname"/>
</div>

По сути тут всего лишь показывается работа атрибута - placeholder. (полупрозрачная подсказка у поля ввода.)

Пример 3:

<div class="form-item">
  <input type="email" placeholder="Введите ваш email" name="email"/>
</div>

Тут лишь демонстрируется тип email . Попробуйте ввести не email и попытаться отправить форму, браузер выдаст предупреждение.

Пример 4:

<div class="form-item">
  <label for="about">Немного о себе</label>
  <input type="text" id="about" name="about" value="Web developer"/>
</div>

Показано поле ввода с заполненным значением. Просто в атрибуте value пишите желаемое значение.

Пример 5:

<div class="form-item">
  <div class="form-role">
    Пол
  </div>
  <div class="form-parts">
    <div class="form-part">
      <label for="male">
        Мужской
      </label>
      <input type="radio" name="gender" value="male" />
    </div>
    <div class="form-part">
      <label for="female">
        Женский
      </label>
      <input type="radio" name="gender" value="female" />
    </div>
  </div>
</div>

Если запустите весь код, вы увидите кружки, которые можно переключать, это называется Радио кнопки. Строятся они (как видите): type="radio", чтобы они работали как положено, значение атрибута name должно быть обязательно одинаковым. Значение value - полетит на сервер.

Пример 6

<div class="form-item">
  <div class="form-role">
    Интересы
  </div>
  <div class="form-parts">
    <div class="form-part">
      <label for="sport">
        Спорт
      </label>
      <input type="checkbox" id="sport" name="sport" value="sport" />
    </div>
    <div class="form-part">
      <label for="music">
        Музыка
      </label>
      <input type="checkbox" id="music" name="music" value="music" />
    </div>
    <div class="form-part">
      <label for="science">
        Наука
      </label>
      <input type="checkbox" id="science" name="science" value="science" />
    </div>
  </div>
</div>

Флажки или чекбоксы, "квадратики", которые можно отмечать. (запустив код - сразу же их узнаете). type="checkbox".

Пример 7:

<div class="form-item">
  <label for="language">
    Ваш родной язык
  </label>
  <select name="language" id="language">
    <option value="en">Английский</option>
    <option value="cn">Китайский</option>
    <option value="fr">Французский</option>
    <option value="de">Немецкий</option>
    <option value="jp">Японский</option>
  </select>
</div>

Выпадающий список. Строится так, тегом "select" оборачиваются варианты, которые можно выбрать. В свою очередь тег самих вариантов - "option", value - у option - это то значение, которое и полетит на сервер.

В выпадающем списке можно также создавать группы из вариантов (для удобства пользователя), для этого определенное количество тегов option, оборачивается в тег optgroup. Например:

<select name="language " id="language">
  <optgroup label="most popular">
    <option value="en">Английский</option>
    <option value="cn">Китайский</option>
  </optgroup>
  <option value="fr">Французский</option>
  <option value="de">Немецкий</option>
  <option value="jp">Японский</option>
</select>

Где label у optgroup - название группы.

Также тегу select можно дать атрибут multiple="multiple", либо просто multiple, этот атрибут позволит выбирать несколько значений у выпадающего списка, атрибут size, регулирует количество видимых элементов выпадающего списка.

Пример 8:

<div class="form-item">
  <label for="language">
    Какая-то информация
  </label>
  <textarea name="" id="" cols="30" rows="10"></textarea>
</div>

Текстовая панель (textarea), с которой вы тоже неоднократно встречались. Атрибут col - количество колонок. row - количество рядов.

<div class="submit-form">
  <input type="submit" value="Отправить форму"/>
</div>

Input type="submit" кнопка отправки формы. При нажатии на эту кнопку (по умолчанию) форма улетает на сервер. Текст внутри кнопки указывается атрибутом value

February 4, 2019 at 06:22 PM

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

Итак код CSS может быть очень длинным. Поэтому существует возможность подключать их через файл.

Пример 1:

Итак создаём файл main.css пишем весь свой CSS код там, в HTML файле в теге head, пишем непарный тег link, в href указываем путь к этому файлу. Атрибут rel сообщает о том - что мы пытаемся подключить.

Следующий способ подключить css, задать атрибут style:

пишем атрибут style, а в значении перечисляем правила, для текущего тега.

Стили указанные в атрибуте style - сильнее, чем те которые указаны в теге <style>, а стили указанные в теге <style> сильнее, чем те которые мы подключаем через внешний файл.

Свойство color (как вы уже поняли из названия) служит для установки цвета тексту, внутри тега. Значение указывается чаще всего либо в hex формате, либо rgb формате..

Про форматы цветов можно прочесть в интернете, по сути эта инфа уже ближе к дизайну чем к вёрстке макетов. На реальных проектах - действие происходит так, дизайнер предоставляет верстальщику макет, а верстальщик оттуда "тупо" копирует коды цветов, и вставляет в CSS. Поверхностных знаний о цветах верстальщику вполне бывает достаточно, если конечно он еще по совместительству не дизайнер.

Для конвертации цвета из hex формата в rgb можно воспользоваться очень простенькой программой типа colormania, да и сам photoshop это вроде как умеет.

Cвойство background-color, устанавливает цвет фона. Форматы цветов используется те же что и в color.

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

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

February 5, 2019 at 09:49 AM

1 hour ago, fransuz said:

C# ( си шарп ,уроки будут?

Нет, по backend я планирую писать статьи по PHP. Так как, самое главное для веб разработчика - как можно быстрее окунуться в рабочий процесс. Прочувствовать весь процесс и быстро перевести программирование из "хобби", в профессиональное занятие. А потом уже работая, можно подумать и об изучении других технологий. Зная один язык программирования, выучить другой - несложно.

А для этого нужно выбирать самую популярную технологию в своей нише. В нише backend веб сайтов - таковой является - PHP. Да и не владею я C#.

Edited February 5, 2019 at 09:51 AM by Rust programming language

February 5, 2019 at 10:09 AM

Простите, но то что вы написали вообще не соответствует действительности.

Единственное - согласен, что C# - популярен для создания ПО под windows. Всё же остальное - в корне неправильно.

February 6, 2019 at 05:14 PM

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

<!DOCTYPE html>
<html>
    <head>
        <title>Document</title>
        <style>
            
        </style>
    </head>
    <body>
        
        <p>
            Lorem ipsum dolor sit amet consectetur <strong>adipisicing</strong> elit. <br/> Natus ducimus ex incidunt. Ipsum, <i>quia</i> rem provident inventore nulla dignissimos explicabo odit aperiam, possimus placeat iste, repudiandae voluptatem a ducimus quas.
          </p>
        
        <!-- комментарии  -->

        &copy; &nbsp; &lt;
        
        
        
    </body>
</html>

Тег <br /> - одинарный. Служит для переноса строки.

Тег strong - жирность.

Тег i - курсивное написание

В HTML можно делать комментарии:

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

Спецсимволы:

В HTML имеются спецсимволы (короткие директивы для вывода того или иного символа).

Complete list of HTML entities - FreeFormatter.com

WWW.FREEFORMATTER.COM

Complete list of all HTML entities with their name and numbers

Вот привожу список всех символов.

Итак, на сегодня по HTML - всё.

Переходим к CSS.

Высота и ширина элементов:

<!DOCTYPE html>
<html>
    <head>
        <title>Document</title>
        <style>
            .outer{
                height: 100px;
                width: 300px;
                background-color: red;
            }
            .inner{
                height: 50%;
                width: 70%;
                background-color: green;
            }
            .some-block{
                background-color: blue;
                height: 50vh;
                width: 80vw;
            }
        </style>
    </head>
    <body>
        <div class="outer">
            <div class="inner">
                Первый пример
            </div>
        </div>
        

        <div class="some-block">
                Второй пример
        </div>
        
    </body>
</html>

Итак, взглянув на этот код, мы сразу замечаем какие правила отвечают за высоту и ширину элементов. height и width- по сути "высота" и "ширина" в переводе с английского. В IT вообще английский просто необходим как воздух, поэтому для глубокого изучения той или иной отрасли IT, лучше подучить этот язык хотя бы на уровне чтения документации.

Итак, далее мы видим единицы измерения.

Пиксели, ну тут всё понятно.. Сколько пикселей займёт тот или иной блок.

Проценты, сколько процентов от родительского элемента занимает тот или иной блок. Например, в "первом примере", у нас красный блок высотою 100 и шириною 300 пикселей, а внутренний с классом .inner - занимает 50% внешнего блока (по высоте) и 70% ширины внешнего блока.

Во "втором примере" - мы видим единицы измерения vh и vw:

vh - сколько процентов от высоты окна браузера займёт блок.

vw - сколько процентов от ширины окна браузера займёт блок.

Внешние отступы

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    
    <title>Document</title>
    <style>
        .block-margin{
            background-color: red;
            width: 100px;
            height: 100px;

            margin-left: 40px;
            margin-bottom: 50px;
            margin-top: 20px;
            margin-right: 30px;
        }
        .inline{
            margin-left: 20px;
            margin-top: 50px; /* Не сработает у строчного элемента */
        }
    </style>
</head>
<body>
    <div class="block-margin">
        Block 1
    </div>

    <span class="inline">Line 1</span>
</body>
</html>

В этом примере - у Block 1:

margin-left - отступ от левой границы блока

margin-right - отступ от правой границы блока

margin-top - отступ от верхней границы блока

margin-bottom - от нижнего края.

У Line 1 - так строчный элемент, не может быть (по умолчанию) верхних и нижних отступов. Есть только левый и правый. Да и тут вы знакомитесь с комментариями в CSS /* */ - так же невидимый блок, для заметок и отключений блоков.

у margin есть сокращенные формы написания:

margin: 20px 30px 50px 40px;

итак тут после двоеточия:

верхний, правый, нижний и левый отступы.

margin: 10px 20px;

Это означает верхний и нижний по 10px, а левый и правый по 20px.

margin: 10px 30px 20px;

Верхний - 10 пикселей, нижний - 20, правый и левый по 30.

Единицы измерения могут быть такими же как и у высот с ширинами.

Интересная особенность: Если блочному элементу с ограниченной шириной, задать margin-left: auto; - то его прижмёт к правому краю, если же сюда ещё и добавить margin-right: auto; - то блок станет по центру.

Следующий раз мы пройдём внутренние отступы и элементов, а так же границы, познакомимся со стилизацией текста.

February 8, 2019 at 07:35 PM

Внутренние отступы:

отступы от границы самого элемента до границы дочернего (внутреннего элемента) или текста.

Обозначаются свойством padding:

Практически полностью копируют синтаксис внешнего отступа. padding-top (верхний), padding-left(левый) ... и т.д. Сокращения точно такие же как и для внешних отступов, то есть margin заменяется на padding и отступ действует внутрь..

Границы:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    
    <title>Document</title>
    <style>
        div{
            margin-bottom: 30px;
        }
        .border-style-div{
            border-style: solid;
            /* 
            dotted - точечный
            dashed - пунктирный
            solid - сплошной
            double - двойной
            groove - 3d эффект 
            ridge - 3d эффект 
            inset - 3d эффект 
            outset - 3d эффект 
            none (нету границы)
            hidden (тоже самое что и none, за исключением применения в таблицах)
            
            
             */
        }
        .border-width-div{
            border-style: solid;
            border-width: 2px;
        }
        .border-color-div{
            border-style: solid;
            border-color: rgb(100, 100, 100);
        }
        .bordertop-style-div{
            border-top-style: dotted;
            border-top-color: green;
        }
        .border-div{
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div class="border-style-div">
        Block 1
    </div>
    
    <div class="border-width-div">
        Block 2
    </div>

    <div class="border-color-div">
        Block 3
    </div>

    <div class="bordertop-style-div">
        Block 4
    </div>

    <div class="border-div">
      	Block 5
  	</div>
</body>
</html>

Свойство border-style

как видим из примера, указывает стиль границы, значения этого свойства я указал в комментариях. В местах где я описал как 3d эффект, просто запустите и посмотрите, что это за эффект (ибо описать его словами я не возьмусь).

Если у border-style - значение одно. То оно применяется ко всем четырём сторонам, если два значения (например):

border-style: solid dashed;

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

Если четыре значения, то тоже как и у отступов( первое - верхней границе, второе - правой, третье - нижней, четвертое - левой)

border-style: solid dashed dotted solid;

Свойство border-width:

Мы видим его действие у блока 2, то есть он указывает ширину границы, помимо пикселей и прочих единиц измерения, имеются (предопределенные значения, thin, medium, thick)

border-width: medium;

Как и у border-style - если одно значение - то всем четырём сторонам, если 2 (верхнее+нижнее / правое-левое), если 4 ( верхнее, правое, нижнее, левое).

Свойство border-color:

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

Правило количества значений как и border-style и border-width.

Свойства для одной стороны:

Есть также возможность стилизовать только одну сторону (см. пример Блок 4)

border-top-style

border-bottom-style

border-right-style

border-left-style

border-top-color

border-bottom-color

border-right-color

border-left-color

border-top-width

border-bottom-width

border-right-width

border-left-width

Каждое из этих свойств, принимает одно значение, ориентируясь на последнюю часть свойства (-style), (-width) ...

По приведенному примеру думаю понятно его действие.

Сокращенная запись border:

Как видно из примера Блок 5, border: ширина, стиль, цвет. Значение применяются ко всем четырём сторонам.

Можно также написать значение только для одной стороны (сокращённо):

border-left: 1px dotted blue;

border-right: 1px dashed green;

border-top: 2px dashed red;

border-bottom: 2px dotted yellow;

February 9, 2019 at 04:32 PM

CSS наследование.

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

Шрифты:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    
    <title>Document</title>
    <style>
   
    @font-face {
        font-family: robotoMyFont;
        src: url('./fonts/Roboto-bold.ttf');
        font-weight: 300;
    }
    @font-face {
        font-family: robotoMyFont;
        src: url('./fonts/Roboto-Light.ttf');
        font-weight: 400;
    }
    .ff{
        font-family: robotoMyFont;
        font-weight: 300;
        font-style: italic;
        font-size: 100%;
    }
    .fv{
        font-variant: small-caps;

    }
    </style>
</head>
<body>
    <div class="ff">
        font family
    </div>
    <div class="fv">
        font variant
    </div>
</body>
</html>

Для указания названия шрифтов используется свойство font-family. Например:

font-family: Arial;

Подключит шрифт Arial (если он установлен в рабочем окружении пользователя).

В свойстве font-family можно прописать, несколько шрифтов через запятую:

font-family: Helvetica, Arial;

В таком случае, сначала будет произведена попытка, подключить первый шрифт. Если - неудачно, то второй. В конце значений font-family, обычно указывают семейство шрифтов serif(с засечками), sans-serif (без засечек), cursive (курсивные) и т.д.

Например:

font-family: Helvetica, Arial, sans-serif;

Если в названии шрифта есть пробел, то само название шрифта следует обрамлять одинарными или двойными кавычками. Например: 'Times New Roman'.

Свойство font-style:

Это стиль начертания шрифта. Обратите внимание на блок с классом ff в примере, там у font-style - значение italic (курсивное). может быть также и oblique (наклонное), normal (нормальное), inherit(взять у родителя).

У многих CSS свойств есть значение inherit (взять свойство у родителя ).

Свойство font-weight:

Толщина шрифта.

Значения: normal (обычное), bold(жирное), bolder(более высокая степень жирности), lighter (тонкая). Кроме этих значений присутствуют и числовые:

100, 200, 300, 400, 500, 600, 700, 800, 900

Чем больше число, тем толще начертание.

Свойство font-size:

Размер шрифта.

у шрифтов много единиц измерений:

пиксели (например font-family: 16px; )

% (как в моем примере),

em (относительно текущего шрифта) Например если текущий размер - 16px, то 1em = 16px,

1.3em = 1.3 x 16px .

и т.д.

Свойство font-variant:

Может использоваться для того, чтобы представлять строчные буквы, как прописные, отличая их только размером, для этого ему надо задать значение:

font-variant: small-caps;

Пример у блока с классом fv

Чтобы отключить это поведение, надо задать значение normal. Чтобы взять у родителя - inherit.

Сокращенная запись шрифтов:

font: italic bolder small-caps 12px sans-serif;

Шаблон такой:

font: font-style font-weight font-variant font-size font-family;

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

Рядом со своим html файлом, я создал папку fonts и поместил туда шрифты.

Чтобы подключить шрифт в CSS используется инструкция @font-face

Итак, рассмотрим на примере:

@font-face {
  font-family: robotoMyFont;
  src: url('./fonts/Roboto-bold.ttf');
  font-weight: 300;
}
@font-face {
  font-family: robotoMyFont;
  src: url('./fonts/Roboto-Light.ttf');
  font-weight: 400;

}

Тут подключаются разные написания одного и того же шрифта (Roboto).

font-family внутри @font-face задаёт имя, src - путь (по правилу путей описанному мною в предыдущих статьях), font-weight (font-style и т.д.) задаёт параметр.

Объясняю подробнее этот момент:

Обратите внимание что font-family в обоих @font-face - одинаковый, а font-weight и src разные. Это значит что когда мы вызовем font-family внутри селектора (у меня в примере это в классе ff) , то какой из двух шрифтов подключится, будет зависеть от параметра font-weight (в данном случае). Так сделано для того чтобы, мы могли подключать различные начертания шрифта, по одному имени (так как это один шрифт), но в зависимости от их начертания выбираться будет нужный.

Запутанно получилось, но вы потренируйтесь и всё поймёте тут, если нет, задавайте вопросы.

Edited February 9, 2019 at 04:33 PM by Rust programming language

February 11, 2019 at 05:26 PM

Псевдоклассы

Это классы - которые определяют специальное состояние элемента. Их огромное количество, мы рассмотрим работу с псевдоклассами на основе пожалуй самого популярного - hover. Он срабатывает когда курсор мышки наводится на элемент. Естественно на touch устройствах это не работать не будет.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    
    <title>Document</title>
    <style>
        .border-style-div:hover{
           background-color: blue; 
        }
        .border-style-div-2{
            background-color: aqua;
        }
        .border-style-div-2 p{
            width: 100px;
            background-color: blueviolet;
        }
        .border-style-div-2:hover p{
           background-color: silver; 
        }
        .border-style-div{
            height: 300px;
            background-color: red;
        }
        .is-float{
            float: left;
            background-color: green;
        }
        
        .not-float{
            background-color: yellow;
        }
        .not-float-too{
            background-color: black;
            color: #fff;
        }
        .float-right{
            float: right;
        }
        .i-add-clear{
            clear: left;
        }
        .m-right{
            width: 400px;
            margin-left: auto;
        }
    </style>
</head>
<body>
    <div class="border-style-div-2">
        <p>hi there</p>
    </div>
    <div class="border-style-div">
        Block 1
    </div>
    <div class="is-float">
        i am float left
    </div>
    <div class="i-add-clear"></div>
    <!-- предотвращает обтекание -->
    <div class="not-float">
        i am not float
    </div>
    <div class="is-float float-right">
        i am float right
    </div>
    
    <div class="not-float-too">
        i am not float too
    </div>
    <div class="m-right">
        <div class="is-float">
            i am float left
        </div>
        <div class="is-float">
                i am float left
            </div>
            <div class="is-float">
                i am float left
            </div>
      <!-- добавьте здесь элемент со свойством clear -->
            <div class="not-float">
                i am not float
            </div>
    </div>
    
    
    
</body>
</html>

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

.border-style-div:hover{
	background-color: blue; 
}

Наведите на Этот div и вы вы увидите как цвет фона сменится.

.border-style-div-2:hover p{
	background-color: silver; 
}

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

Псевдоклассов - множество, есть псевдокласс, который определяет фокус (:focus (например по текстовому полю). Есть псевдокласс для выборки первого и последнего элемента в выборке (:first-child), (:last-child). Постараюсь по чаще их использовать в своих примерах, если что - полный список - здесь можно посмотреть.

"Плавающие" элементы

Свойство float, заставляет обтекать элемент которому оно присвоено. Оно может прижимать к левому краю родительского элемента (float: left;), либо к правому (float: right;).

Остальные элементы будут его обтекать, как река обтекает камень.

При нехватке места для несколько рядом расположенных элементов, крайний - переносится вниз (что позволяет делать адаптивные сетки).

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

Например мы хотим сделать следующую структуру.

Три блока рядом, а четвертый под этими тремя. По умолчанию, если у первых трёх блоков float, четвертый ( хоть и не является плавающим) будет в одной плоскости с этими тремя.

Но если мы насильно предотвращаем обтекание с помощью clear, то четвертый элемент станет туда куда мы хотим.

У float - значения:

left (влево)

right (вправо)

none (отключаем плавающее состояние)

inherit (взять у родителя)

у clear - значения:

left (отключаем обтекание слева)

right(отключаем обтекание справа)

both( отключаем обтекание с обеих сторон)

inherit (берём у родителя)

none (не отключаем обтекание)

Float-ы активно использовались и до сих пор иногда используются для адаптивных сеток (если нужна поддержка старых браузеров). А так, сейчас существует мощная штуковина под названием flexbox. Flexbox делает жизнь верстальщика намного проще, его мы пройдём чуть позже. Есть кстати ещё более современная технология построения сеток - grid, но к сожалению поддержка браузерами - сильно хромает, поэтому grid мы рассматривать не будем..

February 13, 2019 at 05:07 PM

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div, table, ul{
            margin-bottom: 40px;
        }
        .center{
            text-align: center;
        }
        th, td{
            border: 1px solid red;
        }
        table{
            border-collapse: collapse;
        }
        ul{
            background-color: #000;
            padding-left: 20px;
            width: 400px;
            list-style-type: circle;
            list-style-position: inside;
            /* list-style-image: url('./images/picture.png'); */
            
        }
        ul li{
            color: #fff;
        }
        ul li:nth-child(even){
            background-color: red;
        }
        ul li:nth-child(odd){
            background-color: blue;
        }


        .overflow{
            width: 200px;
            height: 200px;
            background-color: red;
            color: #000;
            overflow: auto;
        }
        .overflow p{
            width: 300px;
        }
    </style>
</head>
<body>
    <!-- text-align -->
    <div class="center">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Totam accusantium dolorem, delectus est quam iste id voluptate aperiam soluta rerum autem porro, ipsum repudiandae, necessitatibus non sit sunt molestias laudantium. Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem cumque, rem, voluptatem ad quam harum voluptatum provident maxime laborum debitis porro. Molestiae dicta quibusdam a, ex quis eum neque aliquid!
    </div>

    <!-- border-collapse -->
    <table>
        <thead>
            <tr>
                <th>title1</th>
                <th>title2</th>
                <th>title3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>test1</td>
                <td>test2</td>
                <td>test3</td>
            </tr>
            <tr>
                <td>test1</td>
                <td>test2</td>
                <td>test3</td>
            </tr>
        </tbody>
    </table>


    
     
    <ul>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
    </ul>


    <div class="overflow">
        <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis repudiandae vero enim necessitatibus sint mollitia accusantium laboriosam, voluptas consequuntur porro cumque, veritatis dolores soluta quod nam asperiores! Similique, fugiat iste. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Error, nam? Magni dolores explicabo, atque eos odit distinctio, minus animi hic, odio velit excepturi cum suscipit nulla dolor reiciendis repellendus quod.
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Incidunt asperiores perspiciatis eos aliquid. Ad placeat adipisci necessitatibus labore aperiam ex, rem molestiae at minima quas quod, quae obcaecati natus fugit.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus veniam doloribus et est cupiditate fugiat natus? Et soluta assumenda explicabo odio quos, laborum, cupiditate natus ducimus expedita voluptatum repellendus delectus!
        </p>
    </div>
</body>
</html>

В этой статье разберём несколько полезных свойств.

Выравнивание строчных, строчно-блочных (такие тоже пройдём) и текста - по горизонтали осуществляется с помощью свойства text-align:

значения этого свойства:

left - налево

right - направо

center - в центр

justify - пытается разровнять текст так, чтобы левая сторона прижималась влево, а правая вправо (путём добавления определенных отступов высчитанных браузером).

border-collapse - свойство для таблиц , по умолчанию имеет значение separate ( при таком значении в случае если ячейкам задан border - то между ячейками будет две границы), если задано значение collapse, то между ячейками таблицы - будет одна граница. Взглянув на пример и переключая значения этого свойства - вы мгновенно поймёте что оно делает.

Есть специальные свойства, которые предназначены для работы со списками. Разберём и их:

list-style-type

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

list-style-position

Устанавливает , находится ли маркер в пределах тега li или нет. Значения: inside - в пределах, outside - за пределами. У меня в примере по переключайте значение этого свойства, и сразу всё станет понятно

list-style-image

можно указать картинку вместо маркера у списка, для этого в значение url передайте путь к картинке:

list-style-image: url('./images/picture.png');

Обратите внимание на то как я с помощью псевдоклассов выбрал четные и нечётные теги li

Переполнение

На примере вы видите, как размер блока параграфа, превышает размеры родительского элемента div. Мы можем заставить переполненный элемент вести себя следующим образом с помощью свойства overflow

Значения:

auto - добавляет полосы прокрутки (при необходимости)

scroll - просто добавляет полосы прокрутки

hidden - обрезает переполненную часть.

Есть также свойства overflow-x и overflow-y, значения одни и те же, разница в том, что overflow-x - по горизонтали, а overflow-y по вертикали.

Edited February 13, 2019 at 05:08 PM by Rust programming language

February 17, 2019 at 05:18 PM

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .background{
            float: left; 
            height: 500px;
            width: 500px;
            background-image: url("./images/picture.png");
           
        }
        .bg1{
            background-size: 40px 50px;
            background-repeat: repeat-x;
            background-color: red;
        }
        .bg2{
            background-repeat: no-repeat;
            background-size: 100px 100px;
            background-position: center center;
            background-color: blue;
        }
        .bg3{
            clear: both;
            float: none;
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-size: cover;
            background-position: center center;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="background bg1">
        background 1
    </div>
    <div class="background bg2">
        background 2
    </div>
    <div class="background bg3">
        background 3
    </div>
</body>
</html>

Работа с фоновым изображением

Чтобы вставить изображение на фон какого-либо элемента, используется свойство background-image.

background-image: url("./images/picture.png");

Здесь в значении url мы в кавычках указываем путь к изображению, которое хотим подключить.

По умолчанию изображение будет дублироваться по горизонтали и вертикали блока. Это поведение можно изменить с помощью свойства background-repeat.

Значения этого свойства:

repeat - повторяться по вертикали и горизонтали (собственно значение по умолчанию)

repeat-x - повторяться только по горизонтали

repeat-y - повторяться только по вертикали

no-repeat - не повторяться

round - повторяется так, чтобы картинки поместились целыми (без обрезки и пробелов), при необходимости повторяющиеся изображения растягиваются.

space - повторяется так, чтобы картинки полностью заполнили фон и поместились без обрезки (но с пробелами при необходимости)

Фоновому изображению можно задать размер с помощью свойства background-size.

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

auto - размер изображения без изменений

contain - изображение увеличивается максимально (но так, чтобы полностью помещаться в элементе (без обрезок)).

cover - растягивается полностью покрывая элемент ( при этом обрезается сохраняя пропорции)

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

Делается это с помощью свойства background-position.

Например:

background-size: 100px 70px;

Означает что внутри элемента фоновое изображение отобразится с горизонтальным смещением в 100 пикселей, и вертикальным в 70. В этом свойстве также часто используются специальные слова.

left, right, center, top, bottom

Например:

background-position: left center;

February 17, 2019 at 05:29 PM

Предыдущая статья была сохранена с ошибками.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .background{
            float: left; 
            height: 500px;
            width: 500px;
            background-image: url("./images/picture.png");
           
        }
        .bg1{
            background-size: 40px 50px;
            background-repeat: repeat-x;
            background-color: red;
        }
        .bg2{
            background-repeat: no-repeat;
            background-size: 100px 100px;
            background-position: center center;
            background-color: blue;
        }
        .bg3{
            clear: both;
            float: none;
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-size: cover;
            background-position: center center;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="background bg1">
        background 1
    </div>
    <div class="background bg2">
        background 2
    </div>
    <div class="background bg3">
        background 3
    </div>
</body>
</html>

Работа с фоновым изображением

Чтобы вставить изображение на фон какого-либо элемента, используется свойство background-image.

background-image: url("./images/picture.png");

Здесь в значении url мы в кавычках указываем путь к изображению, которое хотим подключить.

По умолчанию изображение будет дублироваться по горизонтали и вертикали блока. Это поведение можно изменить с помощью свойства background-repeat.

Значения этого свойства:

repeat - повторяться по вертикали и горизонтали (собственно значение по умолчанию)

repeat-x - повторяться только по горизонтали

repeat-y - повторяться только по вертикали

no-repeat - не повторяться

round - повторяется так, чтобы картинки поместились целыми (без обрезки и пробелов), при необходимости повторяющиеся изображения растягиваются.

space - повторяется так, чтобы картинки полностью заполнили фон и поместились без обрезки (но с пробелами при необходимости)

Фоновому изображению можно задать размер с помощью свойства background-size.

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

auto - размер изображения без изменений

contain - изображение увеличивается максимально (но так, чтобы полностью помещаться в элементе (без обрезок)).

cover - растягивается полностью покрывая элемент ( при этом обрезается сохраняя пропорции)

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

Делается это с помощью свойства background-position.

Например:

background-size: 100px 70px;

Означает что внутри элемента фоновое изображение отобразится с горизонтальным смещением в 100 пикселей, и вертикальным в 70. В этом свойстве также часто используются специальные слова.

left, right, center, top, bottom

Например:

background-position: left center; означает что изображение будет расположено слева и вертикально по центру, то есть левое слово - означает позицию по горизонтали, а правое - по вертикали.

background-position: center center;

и по горизонтали и по вертикали - в центре.

Можно так же влиять и на то, как фоновое изображение будет скроллиться.

Сделать это можно с помощью свойства background-attachment.

Значения background-attachment:

scroll - фон скроллится как обычно (поведение по умолчанию)

fixed - фон остаётся неподвижным при скролле.

В следующей статье мы продолжим рассматривать работу с фоном.

Edited February 17, 2019 at 05:31 PM by Rust programming language

February 19, 2019 at 06:03 PM

По фонам - есть ещё хорошее свойство - background-origin, указывающее на то относительно чего будет позиционироваться фоновое изображение. Значения свойства:

padding-box - учитывая саму границу

border-box - не учитывая границу (фоновое изображение подползает под границу)

content-box - относительно контента

Сегодня рассмотрим ещё одну важную тему, как позиционирование элементов:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div.relative{
            background-color: green;
            width: 400px;
            position: relative;
            height: 400px;
            left: 40px; 
            margin-bottom: 100px;
        }
        div.relative div.relative{
            left: 40px; 
            background-color: red;
        }
        .absolute{
            top: 10px;
            left: 20%;
            position: absolute;
            width: 50px;
            height: 50px;
            background-color: blue;
        }
        .absolute.yellow{
            z-index: 2;
            background-color: yellow;
        }
        .absolute.pink{
            z-index: 1;
            background-color: pink;
        }
        .opacity{
            opacity: 0.5;
        }
        
        
    </style>
</head>

<body>
    <div class="relative">
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab nisi tempora ratione architecto doloremque beatae quidem, cupiditate ipsa itaque corporis officiis! Aliquid placeat nulla rerum cupiditate sint corrupti quaerat accusantium!
        <div class="relative">
                
        </div>
    </div>
    <div class="relative">
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab nisi tempora ratione architecto doloremque beatae quidem, cupiditate ipsa itaque corporis officiis! Aliquid placeat nulla rerum cupiditate sint corrupti quaerat accusantium!
        <div class="absolute">
            
        </div>
    </div>
    <div class="relative">
        <div class="absolute yellow">
            z-index 2
        </div>
        <div class="absolute pink">
            z-index 1
        </div>
    </div>
    <div class="relative opacity">

    </div>
</body>
</html>

Итак,

позиционирование задаётся свойством position.

Первое значение свойства - relative.

Значение relative - означает что элемент позиционируется относительно своей (исходной позиции). Например:

<div class="relative">
  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab nisi tempora ratione architecto doloremque beatae quidem, cupiditate ipsa itaque corporis officiis! Aliquid placeat nulla rerum cupiditate sint corrupti quaerat accusantium!
  <div class="relative">

  </div>
</div>

Обратите внимание как тут внутренний div с классом relative сместился относительно своей исходной позиции.. Это делается с помощью дополнительных свойств:

left, right, top, bottom

У всех этих свойств (left, right, top, bottom), значение по умолчанию - auto, также они принимают значения в пикселях, процентах и т.д.

В данном примере, красный блок сместился влево на 40px, left: 40px;

position: static; - собственно дефолтное значение (по умолчанию).

Абсолютное позиционирование - position: absolute;

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

Например:

<div class="relative">
  Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab nisi tempora ratione architecto doloremque beatae quidem, cupiditate ipsa itaque corporis officiis! Aliquid placeat nulla rerum cupiditate sint corrupti quaerat accusantium!
  <div class="absolute">

  </div>
</div>

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

Важное замечание

Допустим у нас такая структура:

Элемент с относительным позиционированием, внутри него элемент с дефолтным позиционированием (static), что является фактически обычным элементом, а внутри этого обычного элемента, уже элемент с абсолютным позиционированием.. В этом случае, абсолютно спозиционированный элемент будет позиционироваться не относительно родителя, а относительно своего предка с относительным позиционированием..

Абсолютно неважно насколько глубоко запрятан абсолютно спозиционированный элемент, он всегда будет позиционироваться относительно (relative, absolute, fixed (fixed рассмотрим ниже)..

В случае если среди родителей элемента, нету (relative, absolute, fixed) элементов, абсолютно спозиционированный элемент позиционируется относительно рабочей области.

Фиксированное позиционирование position: fixed;

Также управляется через left, bottom, top, right

Позиционирование элемента относительно окна браузера, при этом даже при прокрутке страницы, фиксированный элемент остаётся в той же точке, относительно окна браузера..

z-index

У любых спозицинированных элементов (fixed, relative, absolute), может иметься z координата, устанавливаемая с помощью свойства z-index. Z-index принимает в качестве значения - целые числа. Чем больше число, тем ближе он к нам по оси z находится.

Например:

<div class="relative">
  <div class="absolute yellow">
    z-index 2
  </div>
  <div class="absolute pink">
    z-index 1
  </div>
</div>

Попереключайте значения z-index у div-ов yellow и pink, и увидите как ось z меняется у них.

По позиционированию - всё. Сложная тема, если есть вопросы - готов выслушать и разъяснить непонятные моменты.

Прозрачность

Прозрачность элементов задаётся свойством opacity, в качестве значения принимает десятичную дробь. 0 (вообще невидимый), 0.1 - слабо различимый, 0.2 - чуть лучше различимый, 1 - полностью видимый).

Ну тут (с прозрачностью) всё легко и понятно в принципе. Просто взгляните на мой пример и попереключайте значения opacity

February 21, 2019 at 06:38 PM

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    div{
      background-color: red;
      margin-bottom: 50px;
      color: #fff;
    }
    .width-100{
      width: 100px;
      height: 100px;

    }
    .radius-50{
      border-radius: 20px 40px 20px 60px;
    }
    .circle{
      border-radius: 50%;
    }

    .has-text{
      text-decoration: line-through;
    }
    .inline-block{
      display: inline-block;
      width: 300px;
      height: 50px;
    }
    
    .table-cell{
      height: 100px;
      display: table-cell;
     
      vertical-align: middle;
    }
    .table-cell span{
      background-color: green;
    }
  </style>
</head>
<body>
  <div class="border-radius width-100 radius-50">
    
  </div>
  <div class="border-radius width-100 circle">
    
  </div>
  <div class="has-text">
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sint architecto, quas, in dolore et sequi rem soluta temporibus rerum ullam quam? Autem dolor temporibus ut soluta exercitationem excepturi, nisi enim?
  </div>

  <div class="inline-block">
    display inline-block
  </div>
  <div class="inline-block">
    display inline-block
  </div>

  
    <div class="table-cell">
      <span>
      я в центре
    </span>
    </div>
  
</body>
</html>

Закругленные углы

В СSS есть свойство(border-radius) - позволяющее закруглять углы у блоков.

<div class="border-radius width-100 radius-50"></div>

В этом примере, каждому углу прописывается свое значение в пикселях, по правилу:

левый верхний, правый верхний, правый нижний, левый нижний

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

При сокращении до двух значений: первое для верхнего левого и нижнего правого, а второе для оставшихся других. При сокращении до одного значения - естественно для всех 4-х углов.

Тут я закруглил div до формы круга.

Так же в этой статье рассмотрим свойство text-decoration для работы с текстом.

Значения

line-through - перечеркивание текста,

underline - подчеркивание,

overline - линия над текстом,

none - убирает все вышеперечисленные эффекты.

Display

Указывает как, представлять элемент на странице.

display: block; - превращает элемент в блочный

display: inline-block строчно-блочный элемент ( у него могут быть высота, вертикальные отступы, но он не растекается на всю ширину как блочный элемент, также его можно выравнивать по центру через text-align: center; у родителя.

display: inline; - превращает элемент в строчный

Есть также display table, table-cell и т.д. для придания элементу поведения элементов таблицы. Например, есть возможность выравнять с помощью свойства vertical-align со значением middle. (как у меня показано в примере)

Есть также display: none; - которое скрывает элемент на странице.

Итак, мы приближаемся к адаптивной вёрстке ( вёрстка, которая перестраивается красиво под различные девайсы.

В следующей статье мы рассмотрим display: flex; (Flexbox) и если успею то также затрону и media запросы ( как одно из важнейших средств для придания адаптивности).

После этих тем уже подыщу вам простой шаблон для самостоятельной вёрстки.

February 23, 2019 at 10:04 PM

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
       .max{
            background-color: green;
            width: 1000px;
            max-width: 600px;
            height: 500px;
            max-height: 200px; 
        }
        .min{
            background-color: blue;
            width: 200px;
            min-width: 600px;
            height: 100px;
            min-height: 400px; 
        }
        div{
            background-color: red;
            height: 100px;
            border: 1px solid black;
        }
        .flex{
            margin-bottom: 50px;
            display: flex;
            flex-direction: row-reverse;
        }
        .fb20{
            flex-basis: 20%;
        }
        .fb30{
            flex-basis: 30%;
        }
        .fb50{
            flex-basis: 50%;
        }
		 .has-order .fb20{
            order: 2;
        }
        .has-order .fb30{
            order: 3;
        }
        .has-order .fb50{
            order: 1;
        }
       
    </style>
</head>
<body>
    
    <div class="max">

    </div>

    <div class="min">

    </div>


    <div class="flex">
        <div class="fb20"></div>
        <div class="fb30"></div>
        <div class="fb50"></div>
    </div>
    <div class="flex has-order">
        <div class="fb20"></div>
        <div class="fb30"></div>
        <div class="fb50"></div>
    </div>
</body>
</html>

Минимальная высота и минимальная ширина - устанавливают минимальный размер для блоков. Принимают те же значения что и высота с шириной, но при этом у них ещё может быть значение auto (фактически отменяющее их действие).

Максимальные высота и ширина - наоборот, устанавливают максимальные размер для блоков. Помимо значений которые есть у ширины и высоты, у них есть значение none - отменяющие их действие.

Теперь рассмотрим технологию flexbox. Это один из современных подходов к адаптивной вёрстке.

Итак, даём элементу display: flex;

Создаётся флекс блок (на всю ширину как блочный элемент)

display: inline-flex; (создаёт флекс как строчный элемент)

Теперь внутренние элементы по умолчанию выстраиваются по горизонтали. Направление оси можно менять с помощью свойства flex-direction.

Значения flex-direction:

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

row-reverse - элементы располагаются в обратном порядке по горизонтали

column - направляющая ось становится по вертикали

column-reverse - элементы будучи расположенными по вертикали, располагаются также в обратном порядке

flex-basis

Это свойство указывает размер элемента внутри flex контейнера. Может указываться в процентах, пикселях и т.д. Значение auto - сбрасывает значение.

order

порядок элемента во flex контейнере, принимает в качестве значения - целое число.

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

February 25, 2019 at 08:48 PM

error

Edited February 25, 2019 at 08:49 PM by Rust programming language
Сохранено с ошибкой

February 25, 2019 at 09:10 PM

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
<style>
div{
    display: flex;
    
}
.parent{
    height: 600px;
    background-color: green;
    margin-bottom: 20px;
}
.align-items{
    align-items: flex-start;
}
.child{
    flex-basis: 100px;
    
    background-color: red;
    border: 3px solid #000;
}
.justify-content{
    justify-content: space-between;
}
.align-content{
    flex-wrap: wrap;
    align-content: center;
}


.shrink-1{
    flex-shrink: 1;
}
.shrink-3{
    flex-shrink: 3;
}
.shrink-4{
    flex-shrink: 4;
}
.flex-shrink .child{
    flex-basis: auto;
    width: 400px;
}
.flex-grow .child{
    flex-basis: auto;
}
.grow-1{
    flex-grow: 1;
}
.grow-3{
    flex-grow: 3;
}
.grow-4{
    flex-grow: 4;
}
.margin-auto{
    margin-left: auto;
    margin-right: auto;
}
</style>
</head>

<body>
    <!-- align-items -->
    <h2>Align items</h2>
    <div class="parent align-items">
        <div class="child">
            test
        </div>
        <div class="child">
            test <br /> test 
        </div>
        <div class="child">test <br /> <br /> test </div>
        <div class="child">test</div>
        <div class="child">test</div>
    </div>


    <!-- Justify content -->
    <h2>justify-content</h2>
    <div class="parent justify-content">
        <div class="child">
            test
        </div>
        <div class="child">
            test <br /> test 
        </div>
        <div class="child">test <br /> <br /> test </div>
        <div class="child">test</div>
        <div class="child">test</div>
    </div>
    
    <!-- align-content -->
    <h2>align-content</h2>
    <div class="parent align-content">
        <div class="child">
            test
        </div>
        <div class="child">
            test <br /> test 
        </div>
        <div class="child">test <br /> <br /> test </div>
        <div class="child">test</div>
        <div class="child">test</div>
        <div class="child">test</div>
        <div class="child">test</div>
        <div class="child">test</div>
        <div class="child">test</div>
        <div class="child">test</div>
        <div class="child">test</div>
        <div class="child">test</div>
        <div class="child">test</div>
        <div class="child">test</div>
        <div class="child">test</div>
        <div class="child">test</div>
        <div class="child">test</div>
        <div class="child">test</div>
        <div class="child">test</div>
        <div class="child">test</div>
    </div>

    <!-- flex-shrink -->
    <h2>flex-shrink</h2>
    <div class="parent flex-shrink">
        <div class="child shrink-1">
            test
        </div>
        <div class="child">
            test <br /> test 
        </div>
        <div class="child shrink-3">test <br /> <br /> test </div>
        <div class="child shrink-4">test</div>
        <div class="child">test</div>
    </div>

    <!-- flex-shrink -->
    <h2>flex-grow</h2>
    <div class="parent flex-grow">
        <div class="child grow-1">
            test
        </div>
        <div class="child">
            test <br /> test 
        </div>
        <div class="child grow-3">test <br /> <br /> test </div>
        <div class="child grow-4">test</div>
        <div class="child">test</div>
    </div>

    <h2>margins</h2>
    <div class="parent margin">
        <div class="child">
            test
        </div>
        <div class="child margin-auto">
            test <br /> test 
        </div>
        <div class="child">test <br /> <br /> test </div>
        
    </div>

</body>
</html>

Продолжаем рассматривать flexbox

align-items свойство выравнивающее элементы внутри флекс контейнера перпендикулярно оси направления..

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

Значения align-items:

flex-start - выравнивает в начало контейнера ( например если ось слева направо идёт, то align-items: flex-start - прижмёт элементы к верху)

flex-end - соответственно в конец перпендикуляра располагает элементы

stretch - растягивает эл-ты по всему контейнеру

center - в центр перпендикуляра

initital - исходное состояние

justify-content - располагает элементы вдоль оси (по самой оси). То есть если ось идёт слева направо, то это свойство будет раскидывать элементы по горизонтали.

Значения justify-content:

flex-start - в начало оси

flex-end - в конец оси

center - в центр

initial - исходное состояние

space-between - старается прижать первый элемент в начало оси, последний в конец, при этом расстояние между элементами - равное.

space-around - равное расстояние между элементами

align-content - выравнивает flex оси если их несколько. Для того чтобы понять свойство align-content для начало рассмотрим свойство flex-wrap. Это свойство отвечает за перенос элементов при переполнении.

Значения свойства flex-wrap:

nowrap - собственно исходное значение (элементы сжимаются, но не переносятся)

wrap - переносятся при переполнении

wrap-reverse - переносятся при переполнении в обратном порядке

Вот теперь то мы готовы рассмотреть align-content. Его действие видно когда элементы переносятся и у нас фактически несколько линий элементов.. Вот этот align-content - как раз отвечает за выравнивание этих линий, перпендикулярно оси. На примере думаю будет ясно. (Если всё-таки возникнут проблемы с этим свойством, обращайтесь)

Значения align-content:

stretch - значение по умолчанию (занимает доступное место)

center - смещает линии в центр

flex-start - в начало перпендикуляра

flex-end - в конец

space-between - разносит по принципу justify-content: space-between; только по перпендикуляру

space-around - разносит по принципу justify-content: space-around; только по перпендикуляру

flex-shrink - коэффициент сжатия элементов, в качестве значения принимает целые числа.

Чем больше число, тем меньше элемент при переполнении относительно других. Посжимайте браузер по ширине, и поймёте как оно работает. Свойство применяется к самим элементам во флекс контейнере

flex-grow - коэффициент роста элементов. Так же принимает в качестве значений - целые числа. Чем больше число тем элемент больше относительно других. На примере видно его действие.

Есть ещё свойство align-self - оно также даётся самому элементу находящемуся во флекс контейнере - действует оно также как align-items - но только для конкретного элемента.

Свойство margin - со значением auto, внутри flex контейнера работает по особому.

Например если дать одному из элементов margin-left: auto; упрётся в правый край flex контейнера и потянет за собой элементы находящиеся справа от него (если ось слева на право тянется). Подробнее - привёл в примере.

Итак у нас по сути осталась одна статья посвященная только CSS - это media запросы.

February 26, 2019 at 09:37 PM

Итак по сути последняя статья, посвященная полностью только CSS. Медиа запросы.

Конечно свойств в CSS - вагон и маленькая тележка. И приводить все я здесь не буду. Мы рассмотрели базовый минимум, может чуть больше. Остальное изучается по ходу на практике.

Итак, медиа запросы. По медиа запросам я расскажу принцип действия, как всегда я прикреплю исходный код примеров (в котором это всё демонстрируется). В конце объяснения, дам ссылку на исчерпывающую статью по всем "фичам" медиа запросов. Там много всякой всячины, но принцип один (и мы его сейчас рассмотрим).

В CSS существует возможность писать стили для определенных типов устройств. Например для принтера. Для этого либо подключаем CSS файл через link с типом media print:

Либо внутри CSS кода:

@media print {

/* тут стили для принтера */

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    
    <style>
        @media screen and (min-width: 1000px) {
            body {
                background-color: red;
            }
        }

        .width-500-1000, .height-300-600{
            height: 200px;
            border: 1px solid yellow;
            background-color: #000; /* по умолчанию блоки черные */
        }

        @media all and (min-width: 500px) and (max-width: 1000px){
            .width-500-1000{
                background-color: green;
            }
        }

        @media all and (min-height: 300px) and (max-height: 600px){
            .height-300-600{
                background-color: blue;
            }
        }
        
    </style>
</head>
<body>
    <div class="width-500-1000"></div>
    <div class="height-300-600"></div>

    
</body>
</html>

Есть возможность задать стили для конкретной ширины / высоты экрана с использованием логических операторов.

Рассмотрим их на примере, который я вам сверстал:

@media screen and (min-width: 1000px) {
  body {
  	background-color: red;
  }
}

Здесь логический оператор AND указывает что должны выполнятся оба условия:

То есть это должно быть устройство с дисплеем и шириной не меньше 1000 пикселей.. Запустите мой пример в браузере и посжимайте окно (браузера), увидите что если окно шириной меньше 1000 пикселей, у body пропадает красная заливка.

@media all and (min-width: 500px) and (max-width: 1000px){
  .width-500-1000{
  	background-color: green;
  }
}

Тут условие выполняется в диапазоне 500 до 1000 пикселей (ширина). По сжимайте браузер по горизонтали и вы увидите что фоновый цвет становится зеленым в этом диапазоне.

@media all and (min-height: 300px) and (max-height: 600px){
  .height-300-600{
  	background-color: blue;
  }
}

Тут тоже самое, только для вертикального диапазона (сжимаем браузер по вертикали и видим разницу).

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

Вот тут исчерпывающая информация по media запросам. Если что непонятно - я к вашим услугам.

Обратите внимания на meta тег viewport описанный в head. Там подробно расписано что он делает. Вообще мета теги - дополнительные инструкции браузеру или поисковым системам. Там можно указать и кодировку и ключевые слова для SEO и т.д.

Нашёл в простенький шаблон для вёрстки. Ссылка на него -

BerYoga.psd

WWW.DROPBOX.COM

Shared with Dropbox

Попробуйте сверстать сами. Будут затруднения на каком-то моменте - обращайтесь сюда или в ЛС.

Готовые работы можете также присылать мне. После этого можно продолжить изучать фронтенд глубже, то бишь начать изучать уже программирование на языке под названием "JavaScript" (не путать с Java 😉). Язык программирования JavaScript по мне - далекооо не самый приятный. Да и не самый подходящий для новичков.

Но, рынок есть рынок.

Адекватных альтернатив (достойных внимания) у JavaScript в браузере - нет, в этом уж будьте уверены.

Edited February 26, 2019 at 09:40 PM by Rust programming language

February 26, 2019 at 09:47 PM

8 minutes ago, Rust programming language said:

<link rel="stylesheet" media="screen" type="text/css" href="mystyle.css">

Тут - опечатка.. media="print" у принтеров

March 11, 2019 at 05:53 PM

JavaScript

Итак, в этой статье я расскажу, для чего он вообще используется.

Javascript (дальше - JS) - это язык программирования, который используется:

1) Программирование клиентской части (именно его мы и будем рассматривать в статьях, ниже объясню, что это такое)

2) создание относительно простых программ для мобильных телефонов

3) Серверное программирование (технология node.js)

4) Создание простых десктопных приложений (например вышеупомянутый редактор Visual Studio Code - написан на JS ( в ядре там конечно имеется C++, (но программист юзая ElectronJS фреймворк его не касается ))

5) Пиксельная графика в браузере (Canvas)

6) И даже на микроконтроллерах где-то

Это пожалуй основные сферы, где его используют.

Программирование клиентской части это:

1) Управление HTML и CSS

2) асинхронные запросы на сервер (позже объясню что это, пока просто имейте в виду).

В статьях буду расписывать основные возможности JS, по возможности подробно.

Чтобы от этого всего был толк нужно много-много практиковаться, гуглить, спрашивать меня, читать документацию, смотреть дополнительно видеоуроки и т.д. Веб разработка может и несложная, по сравнению например с системным программированием, но и в ней есть свои нюансы. Если решились окунуться в это, то определенно придётся попотеть, тратить много времени и т.д.

По JS я буду рассказывать и старую и новую спецификации.

JS на странице подключается через тег script

у этого тега может атрибут src в котором указывается путь к файлу с JS. Но пока я буду писать код прямо внутри тега script.

Переменные

Это средства языка предназначенные для хранения данных. Переменные создаются с помощью ключевого слова var, в новой спецификации для создания переменной появилось слово let. О том чем отличается var от let, поговорим позже, когда пройдём необходимые для этого объяснения темы.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script>
    var a = 8;
    let b = 9;
    alert(a);
    alert(b);
  </script>
</head>
<body>
  
</body>
</html>

Знак = это знак присваивания значения переменной, то есть

var a = 5; означает что в переменную с именем a положили число 5, точка с запятой в JS - означает конец инструкции.

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

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

March 14, 2019 at 05:08 PM

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

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

В JS для обозначения переменных широко используется "верблюжья нотация". Это когда следующее слово начинается с большой буквы, вот так:

этоМояПеременная

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script>
    var a = 5;
    var b = 6;
    alert(a + b);
    
    // Пример строки
    var thisIsString = "Hi there";

    // Пример boolean
    var bool = true;
  </script>
</head>
<body>
  
</body>
</html>

Типы данных

В языках программирования есть понятие типов данных. То есть единица данных может относиться к Числу, к строке, и т.д.

Рассмотрим типы данных

number - число (целое или дробное)

string - строка

boolean - логический тип (имеет только 2 возможных значения true и false)

undefined - тип данных фактически с одним этим самым значением. Переменная имеет этот тип если её объявить и не присвоить никакого значение. Можно также специально присвоить переменной значение undefined

null - также тип с одним возможным значением означающий - "неизвестное значение или пустое значение".

С числами мы уже встречались. Теперь поговорим о строках. Строки в JS обрамляются в кавычки (одинарные или двойные).

Например:

var isNum = 5;

var isString = "5";

В переменной isNum лежит число 5, а в переменной isString лежит строка частью которого является литерал 5.

Операции с другими типами мы рассмотрим в следующей теме.

Если между 2мя строчками поставить оператор "+", то эти 2 строчки склеятся в одну. Это называется конкатенация строк. Например

var firstString = "Hello";

var secondString = "my";

alert(firstString + secondString + "friends");

Запустите этот пример и вы всё поймёте.

Важный момент, если складывать число и строку, то JS автоматически приводит число к строке. Например:

alert( 5 + "10" );

Результатом будет строка 510, а не число 15.

В следующей теме продолжим говорить о типах данных.

March 17, 2019 at 09:57 AM

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        var a;
        alert(typeof a);
        /*
        var x = null;
        alert(typeof x);

        var str = "Hi there";
        alert(typeof str);

        */
        
        
        /*
        alert(5 % 2);
        alert(5 / 2); 
        alert(5 + 2); 
        alert(5 - 2); 
        alert(5 * 2); 
            

        */
    </script>
</head>
<body>
    
</body>
</html>

Оператор typeof возвращает тип переменной. В случае типа null возвращается тип объект. Это признанный баг JS, его не исправляют для сохранения обратной совместимости. То бишь на эту ошибку много завязано, и в случае исправления, функционал многих приложений и библиотек может сломаться.

Комментарии в JS

В JS есть строчные комментарии // которые "исключают" строку из анализируемых движков. И блочные /* */ . Как в примере, отключают целый блок. Служат они для того же, что и комментарии HTML/CSS.

Математические операции в JS.

Собственно стандартная математика (как видно из примеров). Единственное объясню что такое 5 % 2. Это конструкция возвращает остаток от деления. Тут если мы пятерку делим на двойку - остаток как раз единица. Этот приём часто используется внутри условных конструкций, к которым мы потихоньку приближаемся.

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

В программировании существует понятие истины и лжи. true и false.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        var a = true;
        var b = false;
    alert(a || b); //вернет true - так как один из аргументов - истина
    alert(a && b); // вернет false так как один из аргументов - ложь

    alert(!a); // вернет false - так как аргумент - истина
    </script>
</head>
<body>
    
</body>
</html>

&& логический оператор "И". (возвращает истину если все аргументы - истинны)

|| логический оператор "ИЛИ" (возвращает истину если хоть один из аргументов - истина)

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

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

Web разработка

Recommended Posts

+Rust programming language 3,170

Link to comment

Share on other sites

+Меч во тьме 2,735

Link to comment

Share on other sites

+Rust programming language Topic Author 3,170

Link to comment

Share on other sites

+Rust programming language Topic Author 3,170

Link to comment

Share on other sites

+Rust programming language Topic Author 3,170

Link to comment

Share on other sites

+Rust programming language Topic Author 3,170

Link to comment

Share on other sites

+Spirt 16,885

Link to comment

Share on other sites

+Rust programming language Topic Author 3,170

Link to comment

Share on other sites

+Spirt 16,885

Link to comment

Share on other sites

+Rust programming language Topic Author 3,170

Link to comment

Share on other sites

+Rust programming language Topic Author 3,170

Link to comment

Share on other sites

+Rust programming language Topic Author 3,170

Link to comment

Share on other sites

+Rust programming language Topic Author 3,170

Link to comment

Share on other sites

+Rust programming language Topic Author 3,170

Complete list of HTML entities - FreeFormatter.com

Link to comment

Share on other sites

+Rust programming language Topic Author 3,170

Link to comment

Share on other sites

+Rust programming language Topic Author 3,170

Link to comment

Share on other sites

+Rust programming language Topic Author 3,170

Link to comment

Share on other sites

+Rust programming language Topic Author 3,170

Link to comment

Share on other sites

+Rust programming language Topic Author 3,170

Link to comment

Share on other sites

+Rust programming language Topic Author 3,170

Link to comment

Share on other sites

+Rust programming language Topic Author 3,170

Link to comment

Share on other sites

+Rust programming language Topic Author 3,170

Link to comment

Share on other sites

+Rust programming language Topic Author 3,170

Link to comment

Share on other sites

+Rust programming language Topic Author 3,170

Link to comment

Share on other sites

+Rust programming language Topic Author 3,170

Link to comment

Share on other sites

+Rust programming language Topic Author 3,170

BerYoga.psd

+Rust programming language
Topic Author
3,170

+Rust programming language
Topic Author
3,170

+Rust programming language
Topic Author
3,170

+Rust programming language
Topic Author
3,170

+Rust programming language
Topic Author
3,170

+Rust programming language
Topic Author
3,170

+Rust programming language
Topic Author
3,170

+Rust programming language
Topic Author
3,170

+Rust programming language
Topic Author
3,170

+Rust programming language
Topic Author
3,170

+Rust programming language
Topic Author
3,170

+Rust programming language
Topic Author
3,170

+Rust programming language
Topic Author
3,170

+Rust programming language
Topic Author
3,170

+Rust programming language
Topic Author
3,170

+Rust programming language
Topic Author
3,170

+Rust programming language
Topic Author
3,170

+Rust programming language
Topic Author
3,170

+Rust programming language
Topic Author
3,170

+Rust programming language
Topic Author
3,170

+Rust programming language
Topic Author
3,170

+Rust programming language
Topic Author
3,170

+Rust programming language
Topic Author
3,170

+Rust programming language
Topic Author
3,170

+Rust programming language
Topic Author
3,170

+Rust programming language
Topic Author
3,170