Специальные символы CER (Character Entity Reference)

Инструменты для создания html и css кода

419.52K

Category:

programming

1 Верстка сайтов

1. Верстка сайтов

ВЕРСТКА САЙТОВ
Мухина Юлия Рамилевна
1

2. Этапы разработки веб-приложений

№
Этап
Результат
1
Формирование требований
Техническое задание
2
Разработка дизайна
Макет сайта (набор psd-файлов)
3
Верстка сайта
Шаблон сайта (html, css, js)
4
Разработка логики приложения Готовое приложение
(программирование)
5
Тестирование
Исправление ошибок, оптимизация
6
Публикация сайта в сети
Интернет
Размещение сайта на хостинге,
настройка хостинга
7
Продвижение сайта, SEO
Увеличение видимости сайта в
поисковых системах
2

3. Верстка сайта

Это процесс создания HTML+CSS шаблона сайта.
Чаще всего в шаблон встраиваются и js-скрипты (JavaScript),
отвечающие за интерактивность веб-страниц.
На сегодняшний день для разработки большинства шаблонов
используются библиотеки и фреймворки, облегчающие верстку.
Фреймворк Bootstrap (HTML, CSS, JavaScript)
Создать основу шаблона можно также с помощью
http://csstemplater.com/
3

4. Основы HTML

ОСНОВЫ HTML
4

5. Структура проекта

site.local
index.html
img
pict.jpg
pict.png
pict.gif
pict.svg
css
style.css
js
font
5

6. Структура html-документа

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>Простейший документ</title>
</head>
<body text=‘#0000ff’ bgcolor=‘#f0f0f0’>
<h1>Пример простого документа</h1>
<hr>
</body>
</html>
6

7. Тег

Тег – указатель разметки
<имя_тега>
<имя_тега атрибут1=значение атрибут 2=значение …>
<p>
<br>
<table width=570 align=center cellpadding=10
cellspacing=2 border=6>
<img src=“img/pict.jpg”>
7

8. Контейнер

Контейнер – это элемент разметки HTML
<имя_тега список атрибутов>
содержание контейнера
</имя тега>
<HTML>web-страница</HTML>
<p>абзац</p>
<table>таблица</table>
8

9. Контейнер

10.

Есть не закрывающиеся теги:
<img>
<hr>
<br>
10

11. Структура html-документа

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>Простейший документ</title>
</head>
<body text=#0000ff bgcolor=#f0f0f0>
<h1>Пример простого документа</h1>
<hr>
</body>
</html>
11

12. Вложенные теги

Правильно!
<ul>
<li>Первый элемент списка</li>
<li> Второй элемент списка </li>
</ul>
Не правильно!
<ul>
<li>Первый элемент списка</li>
<li> Второй элемент списка
</ul></li>
12

13. Атрибуты тегов

<img src=‘img/avatar.jpg’>
<img src=‘img/avatar.jpg’ width=‘200’>
<img src=‘img/avatar.jpg’ width=‘200’ height=‘300’>
13

14. Специальные символы CER (Character Entity Reference)

Числовой код Именная замена Символ Описание
"
"
"
Кавычка
&
&
&
Амперсанд
<
<
<
Меньше
>
>
>
Больше
 
 
¡
¡
¡
Перевернутый восклицательный знак
¢
¢
¢
Цент
£
£
£
Фунт
¤
¤
¤
Валюта
¥
¥
¥
Йена
¨
¨
¨
Умляут
©
©
©
Копирайт
«
«
«
Левая угловая кавычка
®
®
®
Зарегистрированная торговая марка
±
±
±
Плюс или минус
»
»
»
Правая угловая кавычка
Неразрывный пробел
14

15. Группы тегов

• определяющие структуру документа;
• оформление блоков гипертекста (параграфы, списки,
таблицы, картинки);
• гипертекстовые ссылки и закладки;
• формы для организации диалога;
• и др.
15

16. Комментарии в HTML

<!–- закомментированный код -->
16

17. Браузер – основной инструмент

18. Каскадные таблицы стилей

КАСКАДНЫЕ
ТАБЛИЦЫ СТИЛЕЙ
18

19. CSS

Cascading Style Sheets (Таблицы Каскадных Стилей) –
это язык, содержащий набор свойств для описания
внешнего вида любых HTML документов.
19

20. Стилевые правила через атрибут style

Вместо:
<img src=‘img/avatar.jpg’ width=‘200’ height=‘300’>
Это:
<img style=‘width:300;height:200’ src=‘img/avatar.jpg’>
<p style=‘text-align:center;color:#fff;font-size:14’><p>
20

21. Структура CSS-стиля (правила)

22. Внутренние таблицы стилей

23. Внешние таблицы стилей

body {
color: #545C66;
background-color: #cccccc;
}
h1 {
font-size: 1.5em;
font-weight: normal;
}
23

24. Подключение таблицы стилей

25. Структура проекта

site.local
index.html
img
css
pict.jpg
pict.png
pict.gif
pict.svg
style.css
js
font
25

26. Комментарии в CSS

/*
закомментированный код */
26

27. Инструменты для создания html и css кода

Бесплатные программы:
1.
Atom
2.
Notepad++
3.
NetBeans
4.
HTML-Kit
5.
CoffeeCup Free HTML Editor
6.
TextWrangler
7.
Eclipse
8.
Aptana Studio
27

28. Инструменты для создания html и css кода

Коммерческие программы:
1.
EditPlus
2.
CoffeeCup
3.
textMate
4.
BBEditor
5.
Dreamweaver
6.
Expression Web Designer
28

English Русский Rules