понедельник, 25 ноября 2019 г.

Использованные скрипты с CodeWeek 2019!

В этом посту я собрал все скрипты, которые использовались мной на CodeWeek 2019!

С этого мы начали! 1. <title>С этого мы начали!</title>
<script>
alert("Так начался наш CodeWeek!");
</script>

Пробуем делать действия

2. <title>Пробуем делать действия</title>
<script type="text/javascript">
var one = 6;
var two = 23;
var add = one + two;
var minus = one - two;
var multiply = one * two;
var divide = one/two;
document.write("Первая цифра: = " + one + "<br />Вторая цифра: = " + two + " <br />");
document.write(one + " + " + two + " = " + add + "<br/>");
document.write(one + " - " + two + " = " + minus + "<br/>");
document.write(one + " * " + two + " = " + multiply + "<br/>");
document.write(one + " / " + two + " = " + divide + "<br/>");
</script>



3. <title>Пробуем конструкцию while</title>
<script type="text/javascript">
document.write("<b>Используем конструкцию while </b><br />");
var i = 0, j = 1, k;
document.write("Числа фибоначчи, которые меньше 121<br />");
while(i<121)
{
document.write(i + "<br />");
k = i+j;
i = j;
j = k;
}
</script>


Пробуем конструкцию if
4. <title>Пробуем конструкцию if</title>
<script type="text/javascript">
var age = prompt("Сколько тебе лет?");
if(age>=18)
document.write("У тебя медицина платная!<br />");
if(age<18)
document.write("У тебя медицина бесплатная!<br />");
</script>
</head>




5. <title>Пробуем конструкцию if...else</title>
<script type="text/javascript">
var hours = new Date().getHours();
if(hours<12)
document.write(Доброе утро!<br />");
else
document.write(Добрый день!<br />");
</script>

понедельник, 4 ноября 2019 г.

Работаем со шрифтами и цветом!


А теперь самое приятное в CSS, мы меняем шрифты и цвета тексту! А приятно всё тем, что это - конец всего объяснения CSS.
И задаётся вопрос - как установить сам шрифт? Это делается очень просто: нужно установить свойство font-family, после которого в ковычках пишется сам шрифт.
Именно таким образом в этом предложении я поставил шрифт Times New Roman
Это выглядит вот так:
<span style="font-family: "Times New Roman;">...

Также доступны видоизменения шрифтов с помощью свойств font-weight ( жирность текста ), font-stretch ( растянутость шрифта ), font-style ( курсивность текста ) и font-size ( размер текста )

Если вы думали, что изменение шрифта - просто, то изменение цвета ещё проще! Чтобы поменять цвет используется атрибут color после которого можно написать цвет ( например: black, white, yellow, red,... ) или его код ( сейчас все из мира дизайна меня поймут - значение из букв и цифр, перед которым стоит #).
Здесь у меня стоит чёрный цвет, который я поставил, написав black
Здесь у меня стоит хах, смешно, стоит один из любимых цветов для графического дизайна, который я поставил, написав #181f27. Сейчас добавлю подленник мною сказанного. мой темплейт не поддерживает этот цвет

В идеальном мире это выглядело бы именно так:
<span style="color: black; font-family: &quot;open sans&quot;;">...
и
<span style="color: #181f27; font-family: &quot;open sans&quot;;">...

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

пятница, 1 ноября 2019 г.

Работаем с текстом с помощью CSS

Работаем с текстом с помощью CSS! Чем дальше мы идём, тем скучнее всё выглядит.
 

Сейчас я дам отдельные списки по разным способам преобразования текста!

text-transform

Cвойство text-transform стилизует текст:
  1. text-transform: none - отсутствие эффектов.
  2. text-transform: capitalize делает все первые буквы слов прописными.
  3. text-transform: uppercase делает все буквы прописными.
  4. text-transform: lowercase делает все буквы строчными.
  5. text-transform: initial - значение по умолчанию.
  6. text-transform: inherit - наследование значений от родительского элемента.

white-space

Cвойство white-space работает с пробелами и переносами строк:
  1. white-space: normal - отсутствие эффектов: между словами один пробел, текст переносится по необходимости.
  2. white-space: nowrap запрещает переносить текст, это возможно осуществить только с помощью <br />.
  3. white-space: pre в браузере отображаются дополнительные пробелы и переносы.
  4. white-space: pre-wrap сохраняет пробелы в тексте, переносит текст по необходимости.
  5. white-space: pre-line удаляет лишние пробелы в тексте.
  6. white-space: break-spaces - работает аналогично pre-wrap, только пробелы в конце строк имеют значение.
  7. white-space: initial - значение по умолчанию.
  8. white-space: inherit - наследование значений от родительского элемента.

tab-size

Cвойство tab-size устанавливает отступ, который получается с помощью клавиши TAB, оно работает только для элементов <textarea>, <pre>. Это свойство может быть обозначенно целым положительным числом или длинной ( в правильных единицах измерения, например, px ), также доступны значения initial, inherit

word-break

Cвойство word-break определяет возможность мягкого перехода текста на новую строку, разделяя слова. Используются значения normal, break-all ( разрыв строк происходит без переноса слов ), keep-all ( разрыв происходит между парными символами ), initial, inherit.

line-break

Cвойство line-break определяет правила переноса строк относительно знаков препинания и символов
  1. line-break: auto назначает значение по умолчанию относительно используемого браузера.
  2. line-break: loose разделяет строки по наименьшему количеству правил, чаще используется для коротких строк.
  3. line-break: normal разбивает строки стандартным набором правил.
  4. line-break: strict разделяет строки, используя строгий набор правил переноса.
  5. line-break: initial - значение по умолчанию.
  6. line-break: inherit наследует значение.

text-align

Свойства text-align, text-align-all, text-align-last выравнивают текст по значению, которое вы устанавливаете. Такими могут быть: start, end, left, right, center, justify и match-parent по-моему, понятно, что есть что

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

понедельник, 28 октября 2019 г.

Позиционируем элементы с CSS


Позиционирование элемента? Это же элементарно! Взял и поставил!


CSS-позиционирование

Есть три главные схемы позиционирования - это нормальный поток, обтекание и абсолютное позиционирование
  1. Нормальный поток - относительное и липкое позиционирование уровня блока и строки (блочный контекст форматирования - элементы display, block, list-item или table; строчный контекст форматирования - display inline, inline-block или inline-table). 
  2. В Обтекании блок удаляется из нормального потока и позиционируется справа или слева от элемента (float: left/right). 
  3. Абсолютное позиционирование полностью убирает элемент из нормального потока и ему присваивается позиция относительно непосредственно блока. (position: absolute/fixed)
Cодержащий блок - прямоугольник, относительно которого определяется положение и размер элемента, он полностью зависит от типа позиционирования.


Свойство position

Свойство position определяет, какой алгоритм позиционирования используется. Существует несколько алгоритмов позиционирования:
  1. position: static - блок располагается в соотвествии с нормальным потоком.
  2. position: relative - блок располагается, смещаясь относительно нормальному потоку.
  3. position: absolute - положение блока задаётся с помощью атрибутов top, bottom, left, right ( в них можно указывать как и растояние в пикселях, так и процентуальные значения относительно экрана ), границы с помощью атрибута margins. Абсолютное позиционирование убирает блок из нормального потока.
  4. position: sticky - блок располагается, смещаясь относительно ближайшему предку потока.
  5. position: fixed - блок располагается во всём окне просмотра.
  6. position: initial - блок располагается по умолчанию.
  7. position: inherit - блок располагается относительно родительскому элементу.

С помощью свойства float можно установить обтекание элементов ( left/right, в зависимости от стороны обтекания ).
Теперь вы можете сместить блоки - так держать!

понедельник, 30 сентября 2019 г.

CSS, или вы думали, что HTML был сложным


Чтобы сделать наикрасивейший блог одного HTML недостаточно. Существует язык таблиц стилей, который позволяет прикреплять единый стиль к структурированным документам.
Как раз-таки для подобных целей существует CSS, благодаря которому возможно осуществить единость стиля всей веб-страницы. Каскадные таблицы стилей описывают правила форматирования элементов с помощью свойств и допустимых значений этих свойств. 
Элемент форматирования состоит из двух главных частей - селектора и объявления (в свою очередь объявление состоит из свойства и значения). Селектор - тот объект, который подлежит форматированию, объявление указывает сам вид форматирования (свойство указывает, какой аспект объекта надлежит форматированию (обычно это может быть шрифтом, размером, цветом и т.д), а значение указывает, как форматируется). Чтобы упростить мне вам жизнь, я попытаюсь кратко объяснить разделение CSS стилей в кратком и лаконичном списке определений (Забыл, что это? Тебе сюда!)
Виды таблиц стилей
Внешняя таблица стилей
Является текстовым файлом с расширением .css, которая подключается к веб-странице тегом <link>, который находится внутри тегов <head>...</head> HTML документа. Также существует возможность вставить несколько тегов <link>, указывая с помощью атрибута media их назначение. Важно отметить, что среди всех таблиц стилей их приоритет самый низкий
Например:
<head>
<link rel="style1" href="css/style1.css" media="all">
</head> 
Внутренние стили
Внутренние стили также находятся внутри тегов <head>...</head>, но они определяются внутри тегов <style>...</style>. Их приоритет выше внешней таблицы стилей
Например:
<head>
<style>
h1 { color: bright-red; }
</style>
</head> 
Встроенные стили
Встроенные стили пишутся непосредственно в сам тег, используя атрибут style.
Например:
<span style= color: "#444444"; font-family: "open sans";>
Очень важными во всём CSS являются понятия наследования и каскадирование.
Наследование по названию же не очевидно является механизмом, с помощью которого возможна передача свойств от предков к потомкам. Наследуемые свойства: color, font, letter-spacing, line-height, list-style, text-align, text-indent, text-transform, visibility, white-space и word-spacing. Также существует возможность принудительно присвоить наследуемость любого свойства с помощью атрибута inherit.
Каскадирование - механизм, который который управляет конечным результатом в ситуации, когда к одному элементу применяются несколько CSS стилей. Есть три главных критерия, по которым происходит каскадирование: наличие ключевого слова !important после значения свойства, отбор стилей по их специфичности (выбирается более специфичное свойство), и по порядку подключённых таблиц (выбирается то, что находится ниже HTML документе).


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

суббота, 28 сентября 2019 г.

Без картинок некрасиво...



Без картинок некрасиво - слоган этого поста. Но появляется вопрос, как их вставить в языке HTML? К этому вопросу есть несколько подходов.
Одна из мох недавних фотографий, эгоцентричная тварь

Добавить изображение не так сложно - можно использовать тег <img>, внутри которого должен находится обязательный атрибут src, который хранит в себе местонахождение изображения, и атрибуты height и width, указывающие на его размеры.
Первое фото, которое я нашёл, загуглив Kirils Gončarovs, мне не нужно повторяться

Изначально я прописал:
<img src="https://www.festivalslampa.lv/public/uploads/speakers/large_20170609125358_96a0f-500x500.png?token=d92513ea604d81e1b4673ad5c0bf7a58" width=320 height=320>

Но считыватель HTML в Blogger автоматически изменил мой тег на:
<a href="https://www.festivalslampa.lv/public/uploads/speakers/large_20170609125358_96a0f-500x500.png?token=d92513ea604d81e1b4673ad5c0bf7a58" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://www.festivalslampa.lv/public/uploads/speakers/large_20170609125358_96a0f-500x500.png?token=d92513ea604d81e1b4673ad5c0bf7a58" width="320" /></a>

Но нужно понимать, что оба варианта допустимы!

Кроме обычных изображений, с помощью языка HTML можно сделать карты-изображения (изображения, у которых есть отдельные зоны для перехода на ссылку). После введения тега <img> нужно использовать теги <map>...</map>. Важной деталью является то, что в теге <img> нужно ввести дополнительный атрибут usemap с названием, которое будет обозначать карту-изображение. И это же название нужно добавить в теге <map> атрибутом name. То есть, это будет выглядеть следующим образом:

<img src="ресурс" usemap="название">
<map name="название">
...
</map>

Между тегами <map>...</map> появляется тег <area>, в котором самыми главными атрибутами являются shape, cords и href. Атрибут shape устанавливает форму поля (circle - круг; poly - многоугольник; rect - прямоугольник; default - вся площадь изображения). Атрибут cords устанавливает координаты поля (для круга - центр окружности и радиус, для прямоугольника - верхний левый и правый нижний угол, для многоугольника - все вершины). А атрибут href является ссылкой, нажав на которую произойдёт переход на другую страницу. Проверим всё на практике!
А теперь посмотрим, как это выглядит в языке HTML:
<a ... usemap="myfirstattempt" />
<map name="myfisrtattempt">
<area href="https://www.instagram.com/uksindus/" shape="rect" cords="0,212 64,0">
</map>
</a>
(Как оказалось, Blogger (или мой темплейт) не разрешает создание подобных ссылок, но теоретически - это правильно!)

Теперь вы знаете основы MsWord HTML - дальше будет изучение комбинации этого языка с другими!

Список покупок в HTML!


Для того, чтобы завершить список всех функций MsWord понять оставшиеся основные функции языка HTML осталось лишь две задачи: как вставить картинку и как сделать списокИ сейчас мы разберёмся, как делаются списки на любой случай жизни!
Начнём с того, какие виды списков существуют? В основном выделяется три вида списков - маркированный, нумерованный и список определений (я мог сделать очередной список, но их и так будет слишком много)

Маркированные списки

Маркированный список - список, в котором отсутствует нумерация и используются вместо этого метки разного типа (точки, галочки и т.д.). Для того, чтобы создать маркированный список нужны теги <ul>...</ul> (UL - Unordered List, здесь тоже есть логика!), внутри которых каждый элемент списка должен находится в тегах <li>...<li>. Например, вот типичный маркированный список:
  • Первый элемент
  • Второй элемент
  • Третий элемент
И вот как выглядит этот список в языке HTML:
<ul>
<span style="color: #444444; font-family: &quot;open sans&quot;;"> (единый стиль текста)
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
</span>
</ul>

При этом можно делать и многоуровневые маркированные списки (также, как и все остальные подвиды, но здесь проще объяснить основы)
  • Первый элемент
    • Первая подгруппа первого элемента
    • Вторая подгруппа первого элемента
  • Второй элемент
  • Третий элемент
И делается это намного проще, чем может показаться, просто нужно запихнуть написать внутри тегов ещё одну пару тегов <ul>...</ul>:
<ul>
<span style="color: #444444; font-family: &quot;open sans&quot;;">
<li>Первый элемент</li>
<ul>
<li>Первая подгруппа первого элемента</li>
<li>Вторая подгруппа первого элемента</li>
</ul>
<li>Второй элемент</li>
<li>Третий элемент</li>
</span>
</ul>

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

В отличии от маркированных списков, в нумерованных есть...нумерация! (я знаю, это так неожиданно!) Из-за этого используются другие теги - <ol>...</ol> (OL - Ordered List), которые создают тот самый порядок!
  1. Первый элемент
  2. Второй элемент
  3. Третий элемент
А всегда ли римская нумерация в списке, хотели вы спросить (я хотел, чтобы вы спросили, cпросите, пожалуйста). Ответ - нет! Но это можно сделать атрибутом type внутри тега <ol>. Посмотрим, как это выглядит:
<ol type="I">
<span style="color: #444444; font-family: &quot;open sans&quot;;">
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
</span>
</ol>

При этом, у атрибута type есть разные подвиды использования, "1" - стандартная десятичная нумерация, "A"/"a" - алфавитная нумерация списка (заглавные/строчные буквы), "I"/"i" - римская нумерация списка (заглавные/строчные буквы). Также, используя атрибут reversed можно сделать так, чтобы список был в обратном порядке (начинаясь с максимального значения). 
Как я говорил до этого, также существуют многоуровневые нумерованные списки:
  1. Первый элемент
    1. Первая подгруппа первого элемента
    2. Вторая подгруппа первого элемента
  2. Второй элемент
    1. Первая подгруппа второго элемента
    2. Вторая подгруппа второго элемента
    3. Третья подгруппа второго элемента
  3. Третий элемент
    1. Первая подгруппа третьего элемента
    2. Вторая подгруппа третьего элемента
<ol>
<span style="color: #444444; font-family: &quot;open sans&quot;;">
<li>Первый элемент</li>
<ol>
<li>Первая подгруппа первого элемента</li>
<li>Вторая подгруппа первого элемента</li>
</ol>
<li>Второй элемент</li>
<ol>
<li>Первая подгруппа второго элемента</li>
<li>Вторая подгруппа второго элемента</li>
<li>Третья подгруппа второго элемента</li>
</ol>
<li>Третий элемент</li>
<ol>
<li>Первая подгруппа третьего элемента</li>
<li>Вторая подгруппа третьего элемента</li>
</ol>
</span>
</ol>

Cписки определений

Отдельным видом списков являются списки определений, в которых отсутствуют какие либо символы для обозначения нумерации, но присутствует точное разделение между уровнями элементов. Они создаются с помощью тегов <dl>...</dl> (DL = Description List), в котором главные элементы обозначаются тегами <dt>...</dt>, а элементы подгрупп <dd>...</dd>. Вот как выглядит список определений:
Первый элемент
Первая подгруппа первого элемента
Вторая подгруппа первого элемента
Второй элемент
Первая подгруппа второго элемента
Вторая подгруппа второго элемента
Третья подгруппа второго элемента
Третий элемент
Первая подгруппа третьего элемента
Вторая подгруппа третьего элемента

И вот как выглядит этот список в языке HTML:
<dl>
<span style="color: #444444; font-family: &quot;open sans&quot;;">
<dd><b>Первый элемент</b></dd>
<dt>Первая подгруппа первого элемента</dt>
<dt>Вторая подгруппа первого элемента</dt>
<dd><b>Второй элемент</b></dd>
<dt>Первая подгруппа второго элемента</dt>
<dt>Вторая подгруппа второго элемента</dt>
<dt>Третья подгруппа второго элемента</dt>
<dd><b>Третий элемент</b></dd>
<dt>Первая подгруппа третьего элемента</dt>
<dt>Вторая подгруппа третьего элемента</dt>
</span>
</dl>

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