Материалы к Семинару №3 по Интернет-журналистике для студентов 3 курса ф-та Журналистики (Институт массмедиа, РГГУ)

1. Инструментарий интернет-
журналиста: платформы, «хард» и
«софт». Основы HTML.
Материалы к семинарам для
факультета журналистики
Институт Массмедиа
2013

2. Что такое «знать Интернет»?
1. Отслеживать появление новых ресурсов в
Интернете и понимать их смысл и влияние
на среду + следить за изменениями
существующих
2. Отслеживать появление новых технологий,
нового «железа» («харда»)
3. Отслеживать появление новых программ
(«софта»)

3. Оборудование рабочего
пространства
• достаточность для решения актуальных задач и
задач, которые, вероятнее всего, появятся в
ближайшем будущем
• соответствие условиям работы и образу жизни;
• совместимость с имеющимся оборудованием и
переносимость информации
• соответствие современному уровню развития
техники и возможность апгрейда
• оптимальность отношения «цена/качество»
По А.Калмыкову

4. Состав оборудования
• Стационарное: десктоп (настольный
компьютер) с интернетом + сканер + принтер
• Мобильное:
- Ноутбук (ультрабук)
- Планшет
- Смартфон (с функциями фото/видео съемки +
диктофона)
- (Цифровая фото/видео камера)
- (Цифровой диктофон)

5. Что нужно веб-журналисту от
Интернета?
• Организовать коммуникации и сбор
информации
• Организовать обработку, редактирование и
хранение информации
• Опубликовать информацию в интернете

6. Софт для работы
Браузеры: IE, Opera, FireFox, Chrome, Safari
Почтовые клиенты: Windows Outlook, The Bat!
Текстовые редакторы: Word, Open Office
Визуальные редакторы: XnView, ACDsee
Визуальные HTML-редакторы:
Microsoft FrontPage, Macromedia Dreamweaver MX

7. «Цифровой минимум»
Регистрация доменов и хостинга: nic.ru, hc.ru
Сервисы подкастов: podfm.ru
Видеохостинги: youtube.com
Блогохостинги: livejournal.com, liveinternet.ru
Микроблоги: twiter.com, tumblr.com
Соцсети: facebook.com, vk.com
Геолокационные сервисы: foursquare.com, altergeo.ru
Фотосервисы и фотохостинги: fotki.yandex.ru, instagram.com
Мессенджеры: skype.com, WhatsApp
Виртуальные диски: dropbox.com, box.com, disk.yandex.ru,
drive.google.com
Хостинг презентаций: slideshare.net
Публиковать книги, журналы онлайн: issuu.com
Закладки и заметки: Evernote
Проектная работа в группах: BaseCamp, Мегаплан

8. Блог-платформы и гражданская
журналистика
http://www.livejournal.com/ (крупнейший блогохостинг Рунета)
https://twitter.com/ (популярнейшая платформа для микроблоггинга)
https://www.tumblr.com/ (популярный короткоформатный микроблог)
http://gidepark.ru/ («Социальная сеть для зрелых людей»)
http://publicpost.ru/ (редакция + платформа для гражданских журналистов)
http://www.ridus.ru/ («Агентство гражданской журналистики»)
http://www.lookatme.ru/ (стиль, мода)
http://www.afisha.ru/ (развлечения)

9. Standalone (автономные) блоги
WordPress – наиболее популярная платформа
для ведения собственного блога. http://ru.wordpress.org/
Шаблоны «СМИ и пресса» (с демонстрацией)
http://wp-templates.ru/category/smi-i-pressa/
http://wordpressstyle.ru/novosti/
http://bagthemes.com/category/press/
http://wordpresse.ru/themes/category/smi-i-pressa/
Почитать о платформе WordPress
http://mywordpress.ru/

10. Основы языка HTML

11. Тэги
• Теги - служебные символы, представляющие собой команды HTML,
которые указывает броузеру, как следует отображать Web-страницу.
• Теги начинаются со знака < , за которым следует ключевое слово, и
заканчивается знаком > .
Примеры:
< HTML >
< B O D Y >
< T A B L E >
< I M G >

12. Тэги
• Теги делятся на две категории. Начальный тег,
который содержит имя тега, открывает
действие по представлению гипертекста, а
конечный тег, который содержит тоже самое
имя тега с предшествующим ему символом /
("косая черта" или "слэш"), - отменяет его.
• Теги не чувствительны к регистру символов, то
есть тег < TABLE > может быть записан и как <
table >.

13. Основные тэги
< html >< /html >
• Тег HTML указывает начало и конец HTML
документа.

14. Основные тэги
< head >< /head >
• Тег HEAD (заголовок HTML-документа)
содержит информацию, относящуюся к
документу в целом.

15. Основные тэги
< body >< /body >
• Тег BODY охватывает ту часть HTML-
документа (текст, изображения и элементы
формирования), которая будет видна
пользователю.

16. Основные тэги
<title >< /title >
• Тег TITLE устанавливает заголовок HTML-
документа, выводимый в строке заголовка
окна броузера.

17. Структура HTML документа
<HTML> - Начало документа
<HEAD>ЗАГОЛОВОК ДОКУМЕНТА</HEAD>
<BODY>
ТЕЛО ДОКУМЕНТА
</BODY>
</HTML> - Конец документа

18. Основные тэги
< body bgcolor=? >
• Атрибут BGCOLOR устанавливает цвет фона
HTML-документа. Цвет может быть указан с
помощью с помощью названия или
шестнадцатиричного кода.

19. Основные тэги
< body text=? >
• Атрибут TEXT устанавливает цвет для всего текста HTML-
документа. Цвет может быть указан с помощью с
помощью названия или шестнадцатиричного кода.
< body link=? >
• Атрибут LINK устанавливает цвет всем ссылкам HTML-
документа, которые еще не были активизированы. Цвет
может быть указан с помощью с помощью названия или
шестнадцатиричного кода.

20. Тэги элементов текста
< h1 >< /h1 >
• Тег H1 определяет заголовок первого уровня (самые
крупные буквы в заголовке). Всего имеется шесть
уровней заголовков.
< h6 >< /h6 >
• Тег H6 определяет заголовок шестого уровня (самые
мелкие буквы в заголовке). Всего имеется шесть
уровней заголовков.

21. Пример: код
<html>
<head>
<title> Отображение заголовков</title>
</head>
<body>
<hl> Заголовок первого уровня </h1>
<h2> Заголовок второго уровня </h2>
<h3> Заголовок третьего уровня </h3>
<h4> Заголовок четвертого уровня </h4>
<h5> Заголовок пятого уровня </h5>
<h6> Заголовок шестого уровня </h6>
<р>0бычный текст</р>
</body>
</html>

22. Пример: вид

23. Тэги элементов текста
< b >< /b >
• Тег B устанавливает отображение текста в
жирном начертании.
< i >< /i >
• Тег I устанавливает отображение текста
курсивом.

24. Тэги элементов текста
< em >< /em >
• Тег EM устанавливает отображение текста
жирным курсивом.
< strong >< /strong >
• Тег STRONG устанавливает отображене текста в
жирном начертании.

25. Тэги элементов текста
< font size=? >< /font >
• Атрибут SIZE тега FONT устанавливает относительный
размер шрифта. Список возможных значений состоит из
положительных и отрицательных чисел от 0 до 7.
< font color=? >< /font >
• Атрибут COLOR тега FONT устанавливает цвет текста.
Цвет может быть указан с помощью с помощью
названия или шестнадцатиричного кода.

26. Тэги элементов текста
< p >< /p >
• Тег P устанавливает начало и конец абзаца.
< p align=? >
• Атрибут ALIGN тега P устанавливает режим
выравнивания текста: влево (LEFT), вправо
(RIGHT) или по центру (CENTER).

27. Тэги элементов текста
< br >
• Тег BR устанавливает перенос строки (даже если текст
продолжается за тегом).
< blockquote >< /blockquote >
• Тег BLOCKQUOTE устанавливает отступы слева и справа
от текста. Кроме этого тег устанавливает разрыв абзаца
до и после указанного текста.

28. Тэги элементов текста
< ol >< /ol >
• Тег OL ("ordered list" - упорядоченный список) устанавливает режим
последовательной нумерации элементов, размещенных внутри списка.
< ul >< /ul >
• Тег UL ("unordered list" - неупорядоченный список) устанавливает режим
отображения текста в виде маркированного списка.
< li >< /li >
• Тег LI устанавливает режим отображения текста в виде пункта списка. Такой
список может быть неупорядоченным, упорядоченным или маркированным.

29. Пример: в коде
Список структурированный
<ul>
<li> Собака </li>
<li> Кошка </li>
<li> Мышь </li>
</ul>

30. Пример: вид
Список структурированный
• Собака
• Кошка
• Мышь

31. Теги графических элементов
< img src="name" >
• Тег IMG устанавливает режим отображения графического файла.
< img src="name" align=? >
• Атрибут ALIGN тега IMG устанавливает режим выравнивания указанного изображения в
отведенном ему пространстве. Возможно выравнивание влево (LEFT), вправо (RIGHT), по
центру (CENTER), вниз (BOTTOM), вверх (TOP), посередине (MIDDLE).
< img src="name" border=? >
• Атрибут BORDER тега IMG устанавливает режим отображения рамки вокруг указанного
изображения. Рисунок с гиперссылкой по умолчанию имеет рамку, цвет которой совпадает с
цветом, используемым для гиперссылок.
< img src="name" alt=? >
• Атрибут ALT тега IMG устанавливает режим отображения указанного текста (в качестве
альтернативы) в случае, если броузер не может отобразить графический файл.

32. Пример
Код:
Поставьте к себе этот баннер:
<img title="Баннер" align=center
src="http://87.242.91.21/110324/gazeta/6839/
60848.jpg" width=780 height=90>
Вид:
Поставьте к себе этот баннер:

33. Теги элементов ссылок
< a href="URL" >< /a >
• Тег A устанавливает связь с некоторой точкой внутри того же
HTML-документа или с другим URL (гипертествовая ссылка).
Атрибут HREF тега A описывает объект, представляющий собой
текст или рисунок внутри HTML-документа, либо текст или
рисунок во внешнем документе.
< a name="NAME" >< /a >
• Тег A устанавливает связь с некоторой точкой внутри того же
HTML-документа или с другим URL (гипертествовая ссылка).
Атрибут NAME тега A описывает точку внутри HTML-документа,
в которую нужно переместить пользователя.

34. Пример
Код:
Прочитайте <a
href="http://www.gazeta.ru/column/rynska/356
9689.shtml">этот замечательный</a> текст
Вид:
Прочитайте этот замечательный текст

35. Теги таблиц
< table >< /table >
• Тег TABLE устанавливает начало и конец таблицы. Все теги,
определяющие структуру таблицы, должны располагаться между
тегами TABLE.
< tr >< /tr >
• Тег TR определяет строку таблицы.
< td >< /td >
• Тег TD определяет колонку таблицы. Текст, заключенный между
тегами TD ("table data" - табличные данные), отображается внутри
одной ячейки.

36. Текстовые подстановки
&lt; Знак неравенства "меньше" (<)
&gt ; Знак неравенства "больше" (>),
&amp; Знак амперсанта (&)
&quot; Знак кавычек