Создание веб-сайтов

Содержание

Слайд 2

Как создать веб-страницу?

Любой текстовый редактор (Блокнот и т.п.)

2×ЛКМ

Текстовые редакторы с подсветкой HTML-тэгов:

Как создать веб-страницу? Любой текстовый редактор (Блокнот и т.п.) 2×ЛКМ Текстовые редакторы
Sublime Text (sublimetext.com)
NotePad++ (notepad-plus-plus.org)
Bluefish (bluefish.openoffice.nl)
HEFS (kpolyakov.spb.ru/prog/hefs.htm)

Редакторы WYSIWYG = What You See Is What You Get
TinyMCE (www.tinymce.com)
Kompozer (kompozer.net)
CKEditor (ckeditor.com)
openWYSIWYG (www.openwebware.com)
BlueGriffon (bluegriffon.org)

Слайд 3

Первая веб-страница



Тэг – команда языка HTML

открывающий тэг

закрывающий тэг



Первая страница

Первая веб-страница Тэг – команда языка HTML открывающий тэг закрывающий тэг Первая

Привет!



Первая страница


Привет!

контейнер (парный тэг)

Слайд 4

Заголовки

заголовок документа

заголовок раздела

– заголовок документа

– заголовок раздела

– заголовок подраздела

Заголовки заголовок документа заголовок раздела – заголовок документа – заголовок раздела –
– заголовок параграфа

Глава 1. Информация


1.1 Что такое информация?


Задачи, связанные с хранением, передачей и обработкой информации человеку приходилось решать во все времена...

Слайд 5

Выравнивание заголовков

Глава 1. Информация


left,
center,
right

атрибут (свойство)

Выравнивание заголовков Глава 1. Информация left, center, right атрибут (свойство)

Слайд 6

Абзацы (параграфы)

И вечный бой! Покой нам только снится
Сквозь кровь и пыль...
Летит, летит

Абзацы (параграфы) И вечный бой! Покой нам только снится Сквозь кровь и
степная кобылица
И мнёт ковыль...

Слайд 7

Абзацы (параграфы)

И вечный бой! Покой нам только снится


Сквозь кровь и пыль...


Летит, летит

Абзацы (параграфы) И вечный бой! Покой нам только снится Сквозь кровь и
степная кобылица


И мнёт ковыль...


paragraph – абзац

интервал

Слайд 8

Выравнивание абзацев


Молекула воды испарилась из кипящего чайника и, подлетая к потолку,

Выравнивание абзацев Молекула воды испарилась из кипящего чайника и, подлетая к потолку,
лоб в лоб столкнулась с неизвестно как
прокравшейся на кухню молекулой
водорода. Кто быстрей отлетел?


left, center, right, justify

Решение:
align="left"

Слайд 9

Переход на новую строку

И вечный бой! Покой нам только снится
Сквозь кровь и

Переход на новую строку И вечный бой! Покой нам только снится Сквозь
пыль...
Летит, летит степная кобылица
И мнёт ковыль...

break – разрыв

Слайд 10

Специальные символы (HTML entities)

Специальные символы (HTML entities)

Слайд 11

Применение специальных символов

Дом сдали в 2011 году.

А.С. Пушкин

Пёс весил 12 кг.

Неразрывный пробел ( )

год

инициалы

единицы измерения

Из

Применение специальных символов Дом сдали в 2011 году. А.С. Пушкин Пёс весил 12 кг. Неразрывный
дома вышел А.С. Пушкин – солнце
русской поэзии.

не отрывать:

Слайд 12

Применение специальных символов

Вышел А.С. Пушкин — солнце русской поэзии.

Длинное тире (—)

Вышел А.С. Пушкин

Применение специальных символов Вышел А.С. Пушкин — солнце русской поэзии. Длинное тире (—) Вышел
– солнце русской поэзии.

не начинать строку с тире!

Короткое тире (–)

Дорога Васюки–Васютино строилась
в 2007–2013 годах.

Слайд 13

Применение специальных символов

Угловые скобки (< >)

Верно ли, что X < Y?


X

Применение специальных символов Угловые скобки (&lt; &gt;) Верно ли, что X X
< Y

это начало тэга?

Слайд 14

Маркированные списки


  • Вася

  • Петя

  • Коля


unordered list (неупорядоченный список)

list item (элемент списка)

изменение маркера:

Маркированные списки Вася Петя Коля unordered list (неупорядоченный список) list item (элемент
type="disc">
...

disc ∙
circle ○
square ■

Слайд 15

Нумерованные списки


  1. Вася

  2. Петя

  3. Коля


ordered list (упорядоченный список)

изменение нумерации:


    ...

1, i, I,

Нумерованные списки Вася Петя Коля ordered list (упорядоченный список) изменение нумерации: ...
a, A

Слайд 16

Многоуровневые списки


  1. Россия

  2. Украина



  • Москва

  • Санкт-Петербург



  • Киев

  • Одесса


Многоуровневые списки Россия Украина Москва Санкт-Петербург Киев Одесса

Слайд 17

Гиперссылки (локальные)

Переход на
новую страницу.

anchor
(якорь)

hyper reference (гиперссылка)

страница в

Гиперссылки (локальные) Переход на новую страницу . anchor (якорь) hyper reference (гиперссылка)
том же каталоге:

во вложенном каталоге:

Информация.

в родительском каталоге:

Информация.

в соседнем каталоге:

Информация.

Слайд 18

Гиперссылки (внешние)


Информация
.

на URL:

на главную страницу сайта:

Информация.

для скачивания архива:


Скачать
.

для запуска

Гиперссылки (внешние) Информация . на URL: на главную страницу сайта: Информация .
почтовой программы:

Напишите мне!

Слайд 19

Как записать гиперссылки от show.htm?

Как записать гиперссылки от show.htm?

Слайд 20

Метки внутри документов

Там в лесу живет
медведь.
...
...
...

Медведь


Медведь — хищное млекопитающее семейства

Метки внутри документов Там в лесу живет медведь . ... ... ...
медвежьих.

медведь

на метку в другом файле:

медведь

Имя файла: Создание-веб-сайтов.pptx
Количество просмотров: 35
Количество скачиваний: 0