2. Розділи курсу та технології
I. HTMLCSS
II. JavaScript
III. JQuery
IV. HTML5CSS3
3. HTMLCSS
HTML (від англ. HyperText Markup Language – «мова
розмітки гіпертексту») - стандартна мова розмітки
документів у Всесвітній павутині. Більшість веб-сторінок
створюються за допомогою мови HTML (або XHTML). Мова
HTML інтерпретується браузерами і відображається у
вигляді документа в зручній для людини формі.
4. Історія розвитку HTML
Перша версія HTML, була розроблена Тімом Бернерсом Лі в
Церні (Женева, Швейцарія) 1991-1993 році.
Подальший розвиток HTML:
5. Основні складові
1. Тег. У елементів, які мають вміст, їх зазвичай два - відкриваючий і
закриваючий.
2. Атрибут. У одного елемента їх може бути багато, а може і не бути зовсім.
Містить певну інформацію про елементи.
3. Значення атрибута.
4. Вміст елемента.
5. Цілісний елемент. Його межі описуються відкриваючим і закриваючим
тегами.
6. Семантика
<html>
<head>
… … …
</head>
<body>
… … …
</body>
</html>
Контейнер з елементами
Інформація про сторінку
Інформація для
користувача
7. Основні правила розмітки
1. Елементи не повинні перетинатися.
2. Блочні елементи можуть містити вкладені блочні і
текстові елементи.
3. Текстові елементи можуть містити вкладені текстові
елементи.
4. Текстові елементи не можуть містити вкладені блочні
елементи.
9. <p></p>
Параграф. Параграфів може бути кілька на сторінці. При
цьому між ними автоматично створюються вертикальні
відступи і після кожного параграфа проводиться
перенесення рядка.
10.
11. <pre></pre>
є контейнером, який відображає вміст, враховуючи всі
пробільні символи, зазначені всередині себе.
12.
13. <br/>
робить перенос на наступний рядок. Він не має вмісту, тому
наприкінці бачимо символ /.
14.
15. Заголовки h1-h6
Згідно з рекомендаціями пошукових систем:
•h1 – один на сторінку
•h2 – два-три на сторінку
•h3 – три-чотири на сторінку
16.
17. <hr / > - пряма лінія
Атрибути: align, color, size, width, noshade
align – вирівнювання (left, right, center).
color – колір прямої.
size – ширина прямої.
width – товщина прямої.
noshade – контроль тіні
23. <big> </big>
<small ></small>
розмір вмісту, всередині цих тегів,
збільшується/зменшується на одиницю. Можливо
вкладення цих тегів в інші теги для роботи з текстом.
27. <sub ></sub>
<sup></sup>
Текст в цих тегах переходить до нижнього/верхнього
індексу по відношенню до попереднього тексту.
28.
29. style
Містить в собі стилі з якими зручно працювати.
font-family – шрифт тексту
font-size – розмір тексту
color: – колір тексту
30.
31. Робота з гіперпосиланнями
<a href = "# "> </a> - це контейнер, який все текстовий вміст
всередині себе робить посиланням.
32.
33. Атрибути для роботи з гіперпосиланнями
1. href - адреса сторінки, на яку веде посилання.
2. name - ім’я посилання.
3. target – яким чином відкривати вікно:
• _self - відкрити в цьому ж вікні;
• _blank – відкрити в новій вкладці;
4. title - спливаюче вікно з підказкою
36. <img/>
Призначений для вставки зображень в розмітку.
Атрибути:
•src - джерело зображення
•alt, title – альтернативний текст
•width, height – контроль розмірів зображень
•align – положення зображення
