Текстовые редакторы, например Блокнот (Notepad)

Так нужно ли изучать HTML и заниматься «ручной работой», если есть такие мощные редакторы ?

Мнение авторитетных вебдизайнеров в этом вопросе однозначно — да!

1.13M

Category:

internet

Web-конструирование с помощью HTML

1. Web-конструирование с помощью HTML

2.

В современном мире разразился
настоящий бум сайтостроения. Свои
странички в Интернете имеют все:
государственные учреждения, большие
компании, мелкие предприниматели,
магазины, библиотеки, школы и даже
сады и ясли.

3. Инструментарий для создания web-страниц

Существуют три класса программных
средств, используемых для создания
web-страниц сайтов.

4. Текстовые редакторы, например Блокнот (Notepad)

при этом web-страница полностью создается вручную, путем
вставки управляющих кодов – тегов.

5. HTML – редакторы

например, 1st Page 2000. Это
специальные программы, с помощью
которых создаются web-страницы. В
них предусмотрен ряд инструментов,
позволяющих автоматически
вставлять в текст соответствующие
теги.

6. WYSIWYG – редакторы

(например, Microsoft FrontPage, Netscape Navigator Gold,
HomeSite, Macromedia Dreamweaver, Publisher). Пользователь
не видит "внутренностей" документа, с которым он работает,
Программа автоматически генерирует требуемый HTML-код

7. Недостатком WYSIWYG – редактора

является: громоздкость, а значит и время
загрузки страницы, созданного
документа и если случится какойнибудь сбой, найти ошибку, не понимая
HTML-кода, очень трудно

8. Так нужно ли изучать HTML и заниматься «ручной работой», если есть такие мощные редакторы ?

9. Мнение авторитетных вебдизайнеров в этом вопросе однозначно — да!

Мнение авторитетных
вебдизайнеров в этом вопросе
однозначно — да!
Артемий Лебедев
Алленова Наталья
www.artlebedev.ru
www.postroika.ru
Дуванов А.А.
Якоб Нильсен
www.botik.ru/~robot
www.webmascon.com

10. Зачем надо знать HTML

• Можно прочувствовать всю «кухню»
сайтостроения
• Знать основные теги, чтобы в любой
момент внести изменения на Webстранице
• Построить оригинальный сайт

11. История

1989
- Тим Бернерс-Ли разработал систему
разметки гипертекстовых документов
HTML

12.

HTML
HyperText Markup Language
- язык разметки гипертекста

13.

Гипертекст - специальным
образом организованный текст,
позволяющий пользователю
осуществлять по указателям
мгновенный переход к связанным
ресурсам.

14. Структура Web-страницы

• Web-страницы открываются в браузере,
который просматривает HTML-код. В
нем находит специальные команды,
называемые тегами
меню Вид → Просмотр HTML-кода

15. Терминология

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

16. Терминология

17. Терминология

18. Терминология

19. Терминология

20. Терминология

21. Терминология

22. Терминология

23. Терминология

24. Терминология

25. Терминология

26. Терминология

27. Терминология

28. Терминология

29. Терминология

30.

Тег
- единица разметки, стартовый
или конечный маркер элемента.
Запись стартового тега в общем виде: <тег>
ИНТЕРГРАД
Запись конечного тега в общем виде: </тег>
ИНТЕРГРАД
Теги определяют границы действия элементов.

31.

ИНТЕРГРАД
ИНТЕРГРАД

32. HTML - документ

Заголовок
HTML - документ
Тело программы
<HTML>
<head>
<title>Мой первый шаг
</title>
</head>
<body>
Здравствуйте, это моя
первая страница.
<br>
Добро пожаловать! :)
</body>
</HTML>

33. HTML - документ

HTML
документ
index.html или *.htm

34. Вложенность элементов

80
50
50
80
<тег1>
<тег2>
</тег2>
</тег1>

35.

Атрибут - параметр или свойство элемента.
Запись атрибута в общем виде:
имяАтрибута="значение"
Все атрибуты записываются внутри стартового тега.
Запись стартового тега с атрибутом в общем виде:
<тег имяАтрибута="значение">
Атрибуты внутри стартового тега разделяются пробелами.

36. Наиболее распространенные атрибуты

1. align-выравнивание
2. width - ширина в пикселах или процентах от
ширины окна браузера
3. height - высота в пикселах или процентах от
ширины окна браузера
4. color - Указывает цвет в формате RGB или
стандартный цвет.

37. Основные элементы HTML

Основные элементы HTML можно разделить по их
назначению на следующие группы:
•Разметка текста
•Создание списков
•Создание таблиц
•Графика
•Гиперссылки

38. Разметка текста

Средства выделения текста
<b>…</b> - жирный (bold);
<i>…</i> - курсив (italic);
<u>…</u> - подчеркивание (underline).
Комбинация:
<b><i><u>Жирный курсив с подчеркиванием</u></i></b>
Жирный курсив с подчеркиванием

39. Заголовки

Тег
<h1>
<h2>
Результат
Заголовок
Заголовок
Заголовок
<h3>
Заголовок
<h4>
Заголовок
<h5>
Заголовок
<h6>
Пример записи для форматирования:
<H1>Заголовок</H1>

40. Создание списков

В виде HTML
Нумерованный список
<OL>
<li>Сначала сделаем это
<li>Затем мы сделаем то
<li>А также действие третье
<li>И с ним нас четвертое ждет
</OL>
<OL type=’’I’’>
<LI> Пункт 1
<LI> Пункт 2
<LI> Пункт 3
<LI> Пункт 4
</OL>
type=’’1’’
type=’’i’’
type=’’I’’
type=’’a’’
type=’’A’’
На сайте
1. Сначала сделаем это
2. Затем мы сделаем то
3. А также действие третье
4. И с ним нас четвертое ждет
I. Пункт 1
II. Пункт 2
III.Пункт 3
IV.Пункт 4
1,2,3,4,...
i, ii, iii, iv,...
I, II, III, IV,...
a, b, c, d,...
A, B, C, D,...

41. Вставка таблицы

42. Вставка картинки

Запись элемента в общем виде: <IMG SRC=“ИмяФайла”>
Пример: <IMG SRC=“leo1.gif”>
Использование атрибута align:
align=left
align=right
align=bottom
align=top
Текст располагается справа
Текст располагается слева
по нижней границе строки
по верхней границе строки

43. Организация гиперссылки

Запись элемента в общем виде:
<А HREF=“Адрес”>Текст ссылки</A>
Пример:
Внешний вид документа с сылкой:
Поисковая система Аппорт

44. Реализация сайта

• Разработка общей структуры сайта
• Подготовка текстового и иллюстративного
материала для наполнения страниц
• Разработка навигационной модели сайта
• Разработка структуры и дизайна главной
страницы сайта
• Разработка структуры и дизайна
остальных страниц сайта
• Заполнение страниц материалом

45. Навигационная модель сайта

• Древовидная
(иерархическая)
модель
• Линейная
(последовательная)
модель

46. Первая страница сайта

• Обложка журнала
• Ваше лицо в мире
• Произведение искусства
• Фойе здания
• Первая страница газеты
• Рекламный буклет

47. Основные элементы страницы

Баннер Графические украшения Счетчик посещений

English Русский Rules