Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

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

No description
by

Ievgen Bovkun

on 29 July 2016

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Блочные Эллементы

add logo here

Front-End Basic #2
Блочные Эллементы

Строчными называются такие элементы веб-страницы, которые являются непосредственной частью другого элемента, например, текстового абзаца. В основном они используются для изменения вида текста или его логического выделения.
<a>


<br>


<i>
<input>


<textarea>


<span>
<label>



<select>
<a> - ссылка
Атрибуты
href
- адресс ссылки
download
- загрузка содержимого
target
- новое окно / текущее
type
- MIME type

Смотрим на пример в a.html
Задание. Страница меню

<br> устанавливает перевод строки в том месте, где он находится.

<br> <br> Пустая строка с отступом.
<i> Устанавливает курсивное начертание шрифта. Допустимо использовать этот элемент совместно с другими, которые определяют начертание текста.
Сейчас <i> использую для добавления иконок к кнопкам и ярлыкам
<button>
<i class="glyphicon glyphicon-plus"></i> add
</button>
Главным образом <input> предназначен для создания текстовых полей, различных кнопок, переключателей и флажков.
Мы поговорим о магии input подробнее, когда будем рассматривать тему
"Формы"
<textarea> похож на <input> при этом о может сохранять форматирование текта и динамически меня свой размер
https://jsfiddle.net/5xxh1d8m/
https://jsfiddle.net/u14m34mo/
<span>
предназначен для выделения отдельных строк, символов или других строчных элементов для дальнейшего изменения их оформления с помощью стилей.
https://jsfiddle.net/msj00yfz/
<label> задает связь между меткой, своим контентом и эллементами формы, такими как <input>, <select>, <textarea>
Мы поговорим о магии label подробнее, когда будем рассматривать тему
"Формы"
https://jsfiddle.net/tnwjLsbb/
<select>
позволяет создать элемент интерфейса в виде раскрывающегося списка
https://jsfiddle.net/8v7smyhf/
Мы поговорим о магии select подробнее, когда будем рассматривать тему
"Формы"
Блочные элементы
характеризуются тем, что занимают всю доступную ширину, высота элемента определяется его содержимым, и он всегда начинается с новой строки.
<div>


<fieldset>


<h1>..<h6>
<ol>/<ul>


<p> / <pre>
<form>
<div>
Универсальный блочный элемент.
Используется для группировки.
Его сожержимое начинается с новой строки. После него также идет перенос строки.
https://jsfiddle.net/6n609dqn/1/
<h1> ... <h6> 6 заголовков которые идут по уменьшению размера h1 самый большой h6 cамый мелки.
https://jsfiddle.net/10sno4t4/
<ul> не нумерованный список
<ol> нумерованный список
<li> элемент списка
https://jsfiddle.net/faxe8tgk/1/
<p>
- задает тектстовый абзац. Два аюзатса дополнительно отделяются
разбивкой.

<pre>
- сохраняет форматирование.Текст отображается обычно моноширинным шрифтом и со всеми пробелами между словами.
https://jsfiddle.net/zfucs0pq/
<table>
Стили как они есть
Pазмеры:
Отступы:
Ширина.
width
: <размер> | <проценты> | auto
.
https://jsfiddle.net/wetugtd5/
https://jsfiddle.net/ahomnmk6/
Высота.
height
: <размер> | <проценты> | auto
Размер
: пикселы (px), дюймы (in), пункты (pt) и др.

Проценты
: записи ширина элемента вычисляется в зависимости от ширины родительского элемента

auto:
устанавливает высоту исходя из содержимого элемента
margin
Устанавливает величину отступа от каждого края элемента
margin
: [<размер> | <проценты> | auto] {1,4}
padding
Устанавливает значение полей вокруг содержимого элемента
padding
: [<размер> | <проценты>] {1, 4}
https://jsfiddle.net/dpezehjL/
Time To Code

1. Ссылка на страницу с контактами email, телефон

2. В новом окне открыть ссылку и скачать текстовый документ

3. Текст приветсвие выделеный красным цветом

Time to Code
text-align: center | justify | left | right | start | end
Cтиль который задает выравнивание контекста и контента внутри элемента


https://jsfiddle.net/3mue3xLp/
Выравнивание:
Создайте страницу ежедневника
1. Дата и день нелели.
2. Блок из 3 главных дел дня
3. Таблица расписание с 9.00 до 18.00
1.Колонка время с до [9:00 - 10:00]
2.Колонка дело (втреча, задание)
3.Важные дела выделенны
Красным

4.Ссылка на соседнюю страницу для загрузки файла
5.Ссылка телефон для конференции

Таблицы Table
<table>
служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью элементов
<tr>
и
<td>
. Внутри
<table>
допустимо использовать следующие элементы:
<caption>
,
<col>
,
<colgroup>
,
<tbody>
,
<td>
,
<tfoot>
,
<th>
,
<thead>
и
<tr>
.
Col https://jsfiddle.net/hq8bnu9n/
Table https://jsfiddle.net/uLubx36j/
Стили Позиционирования
Display:
none: Скрывает объект

block: как блочный

inline: как строчный

inline-block: как строчный

+ еще пара плюшек


table: как таблица

inline-table: таблица,
которая оптекаема текстом

table-cell: как td

table-row: как tr

table-column: как col
им можно задавать размеры, рамки и отступы, как и блочным элементам;

их ширина по умолчанию зависит от содержания, а не растягивается на всю ширину контейнера;

они не порождают принудительных переносов строк, поэтому могут располагаться на одной строке, пока помещаются в родительский контейнер;

элементы в одной строке выравниваются вертикально подобно строчным элементам.
display:Inline-block
<iframe></iframe>
Мы сделали для тебя стараницу в странице.
<iframe> создаёт встроенный фрейм, который находится внутри обычного документа, он позволяет загружать в область заданных размеров любые другие независимые документы.
<iframe src="page/banner.html" width="468" height="60">
Стиль Display:table-column
Наделяет блок свойсвами некоторыми <col>. Свойсва размера width и свойсво
background. В этом заключается ограницение на "СSS-Table"
Стили CSS
Чтобы подключить стили нужно:
1.Прописать их в index.html с помощью

<style type="text/css"></style>, либо

<link rel="stylesheet" type="text/css" href="">
Селекторы Стилей
1. Tэг: <div></div> ==> div {width: 200px;}

2. Id: <p id='first-article'></p> ==>

#first-article {text-align: center;}

3. Class: <div class='cell first-cell' ==>

.cell {display:table-cell;}
.first-cell {font-weight: bold}
Form
Формы служат для того, чтобы брать данные пользователя и передавать их на сервер.

Для этого у них есть два важный параметра
<form
action=
'/register'
method=
'POST'></form>
action=
'url' содержит адрес, который определяет, куда будет отправлена информация формы;

method=
'GET/POST' определяет способ которым будет переданны данные.
GET
c помощью параметров в адресе.
POST
в теле запроса.
<input> универсальный эллемент ввода.

Его поведение настраивается через атрибут type = [text, password, email, number, tel, checkbox,...]

C полным перечнем фишек элемента input можно познакомиться здесь
https://webref.ru/html/input
https://webref.ru/html/input/type
https://jsbin.com/pifacah/edit?html,output
<form> -
это элемент контейнер, сам по себе, он не будет отображаться на странице.

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

Для этого каждому элементу нужно иметь параметры:
name
- задает имя поля для связки данных.
value
- значение элемента.
В чем сила брат? В фишка!
1. placeholder='подсказка перед вводом'

2. [min, max] = вернхние и нижние ограничения вводимого числа.

3. required - обязательное для формы поле

4. pattern - RegEx шаблон для ввода данных
https://webref.ru/html/input/pattern

5. readonly - поле не доступно для именения
Checkbox - это элемент флаг.

<input type='checkbox' id='che1'>

<label for='che1'>Ярлык для флага che1. клик по ярлыку срабатывает и как клик по флагу. Также это удобная подпись для input</label>

свойство
checked
сразу устанавливает флаг в выбранное значеие


radiobutton переключатели
Select выпадающие списки.
Submit & Reset

<input type='radio' name='car' value='ZAZ'>

<input type='radio' name='car' value='BWM'>
Для того, чтобы связать radio-button в одну группу, следует задать им одинаковый name.

Выбранной в группе radio button может быть только одна опция.
Когда следуте выбрать из множесва опций, то лучше использовать элемент <select name='hero'>. Опции в данном случаи зажаються с помощью дочевних элементов
<option value='batman'>.

Для того, чтобы разрешить множесвенный выбор, то следует задать
<select name='heroes' multiple>
<button type='submit'>Submit</button>

отправляет формы на сервер.


<button type='reset'>Clear</button>

очищает все поля формы.
Time To Code
Форма записи самолета на обсуживание.
1. Имя Фамили пилота. Номер Лицензии
Пароль. Номер телефона. Email
2. Номер самолета.
1. Модель.
2. Выбор. Моноплан, Биплан
3. Выбор количесва двигателей 1 - 6
3. Текстовое поле с описание проблемы
4. Кнопки:
1.Очистка полей
2.Отправить форму
Full transcript