Web development

Июль 27, 2022

Содержание

2. Site structure
3. Прототипирование (mockups)
4. … … …
6. …
7. Аттрибуты какой-то текст какой-то текст
12. windows-1251 koi8-r UTF-8
14. HTML tags html head body meta script style link title br a p hr h1 ..
15. CSS selector { key: value; key: value; } .class #id tag
17. F12
18. Network – правильно ли прописаны пути плюс проверка скорости загрузки HTML (elements) – изучаем структуру и
19. Developer tools / Network
20. HTML escape & < > "   & > " space
21. Практическое задание
24. «Ручками» создать Web-страничку «Резюме», содержащую: информацию о Вас Ваше фото (выровнять по левому краю) список технологий,
25. .
26. «Ручками» создать Web-страничку «Резюме», содержащую: информацию о Вас Ваше фото (выровнять по левому краю) список технологий,
27. .
28. Формы в HTML и элементы форм
29. Формы в HTML и элементы форм
30. Формы в HTML и элементы форм ... Параметры: action="mailto:info@programming.kr.ua" action="http://www.programming.kr.ua/имя программы" method="post" target="_blank"
31. Формы в HTML и элементы форм Однострочные поля: name= value= size= maxlength= >
32. Формы в HTML и элементы форм Скрытый текст: value="1111“ size=4 maxlength=8> Выберите файл: size=50 maxlength=255> Логин:
33. Формы в HTML и элементы форм Текст сообщения: value="Memo"> Многострочные поля: name= cols= rows= wrap= (off,
34. Формы в HTML и элементы форм Флажки текст: метка метка ... Укажите Ваш пол: мужской женский
35. Формы в HTML и элементы форм Флажки текст: метка метка ... Интересы: Сис.программирование Web-программирование Моб.программирование
36. Формы в HTML и элементы форм Выпадающий список: текст: > метка ... Ваш уровень: > начальный
37. Формы в HTML и элементы форм … … Кнопки: Контейнер:
39. Скачать презентацию

Слайд 2

Site structure

Слайд 3

Прототипирование (mockups)

Слайд 4

<br> …<br>
…

…

Слайд 5

Слайд 6

…

Слайд 7

Аттрибуты

какой-то текст

какой-то текст

Слайд 8

Слайд 9

Слайд 10

Слайд 11

Слайд 12

windows-1251
koi8-r
UTF-8

Слайд 13

Слайд 14

HTML tags
html
head
body
meta
script
style
link title br
a
p
hr
h1 .. h6
b
i
img ul, ol
li
table
tr, th, td
div, span
form

Слайд 15

CSS
selector
{
key: value;
key: value;
}
.class #id tag

F12

Network – правильно ли прописаны пути
плюс проверка скорости загрузки
HTML (elements)

– изучаем структуру и стили
Scripts – отлаживаем скрипты
Console – проверяем на наличие ошибок

Developer tools / Network

HTML escape
&
<
>
"

&
<
>
"
space

Практическое задание

«Ручками» создать Web-страничку «Резюме», содержащую:
информацию о Вас
Ваше фото (выровнять по

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

Домашнее задание

.

«Ручками» создать Web-страничку «Резюме», содержащую:
информацию о Вас
Ваше фото (выровнять по

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

Домашнее задание

.

Формы в HTML и элементы форм

Формы в HTML и элементы форм

Формы в HTML и элементы форм

...

Параметры:
action="mailto:info@programming.kr.ua"
action="http://www.programming.kr.ua/имя программы"
method="post"
target="_blank"

Формы в HTML и элементы форм
Однострочные поля:

name=
value=
size=
maxlength=
>

Формы в HTML и элементы форм

Скрытый текст:

value="1111“ size=4 maxlength=8>

Выберите файл: size=4 maxlength=8>

Пароль:

Формы в HTML и элементы форм

Текст сообщения:

</h2><div class="slides-content">rows=4 wrap=off <br> value="Memo"> <!wrap=virtual><br>
Многострочные поля:
name= <br> cols= <br> rows= <br> wrap= (off, virtual, hard)<br> value=<br>

Формы в HTML и элементы форм
Флажки

текст:

checked> метка
метка
...

Укажите Ваш пол:
мужской
женский

Формы в HTML и элементы форм
Флажки

текст:

checkbox name=… checked> метка

метка

...

Интересы:

Сис.программирование

Web-программирование

Моб.программирование

Формы в HTML и элементы форм
Выпадающий список:

текст:

Ваш уровень:

Формы в HTML и элементы форм

Кнопки:

Контейнер: