Инструментарий интернет-журналиста: платформы, «хард» и

«софт». Основы HTML.

Материалы к семинарам для факультета журналистики

Институт Массмедиа

2013

Что такое «знать Интернет»?

1. Отслеживать появление новых ресурсов в Интернете и понимать их смысл и влияние на среду + следить за изменениями существующих

2. Отслеживать появление новых технологий, нового «железа» («харда»)

3. Отслеживать появление новых программ («софта»)

Оборудование рабочего пространства

• достаточность для решения актуальных задач и задач, которые, вероятнее всего, появятся в ближайшем будущем

• соответствие условиям работы и образу жизни;

• совместимость с имеющимся оборудованием и переносимость информации

• соответствие современному уровню развития техники и возможность апгрейда

• оптимальность отношения «цена/качество»

По А.Калмыкову

Состав оборудования

• Стационарное: десктоп (настольный компьютер) с интернетом + сканер + принтер

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

диктофона)- (Цифровая фото/видео камера)- (Цифровой диктофон)

Что нужно веб-журналисту от Интернета?

• Организовать коммуникации и сбор информации

• Организовать обработку, редактирование и хранение информации

• Опубликовать информацию в интернете

Софт для работы

Браузеры: IE, Opera, FireFox, Chrome, Safari

Почтовые клиенты: Windows Outlook, The Bat!

Текстовые редакторы: Word, Open Office

Визуальные редакторы: XnView, ACDsee

Визуальные HTML-редакторы: Microsoft FrontPage, Macromedia Dreamweaver MX

«Цифровой минимум»

Регистрация доменов и хостинга: 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, Мегаплан

Блог-платформы и гражданская журналистика

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/ (развлечения)

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/

Почитать о платформе WordPresshttp://mywordpress.ru/

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

Тэги

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

• Теги начинаются со знака < , за которым следует ключевое слово, и заканчивается знаком > .

Примеры:

< HTML >

< B O D Y >

< T A B L E >

< I M G >

Тэги

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

• Теги не чувствительны к регистру символов, то есть тег < TABLE > может быть записан и как < table >.

Основные тэги

< html >< /html >

• Тег HTML указывает начало и конец HTML документа.

Основные тэги

< head >< /head >

• Тег HEAD (заголовок HTML-документа) содержит информацию, относящуюся к документу в целом.

Основные тэги

< body >< /body >

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

Основные тэги

<title >< /title >

• Тег TITLE устанавливает заголовок HTML-документа, выводимый в строке заголовка окна броузера.

Структура HTML документа

<HTML> - Начало документа

<HEAD>ЗАГОЛОВОК ДОКУМЕНТА</HEAD>

<BODY>ТЕЛО ДОКУМЕНТА</BODY>

</HTML> - Конец документа

Основные тэги

< body bgcolor=? >

• Атрибут BGCOLOR устанавливает цвет фона HTML-документа. Цвет может быть указан с помощью с помощью названия или шестнадцатиричного кода.

Основные тэги

< body text=? >

• Атрибут TEXT устанавливает цвет для всего текста HTML-документа. Цвет может быть указан с помощью с помощью названия или шестнадцатиричного кода.

< body link=? >

• Атрибут LINK устанавливает цвет всем ссылкам HTML-документа, которые еще не были активизированы. Цвет может быть указан с помощью с помощью названия или шестнадцатиричного кода.

Тэги элементов текста

< h1 >< /h1 >

• Тег H1 определяет заголовок первого уровня (самые крупные буквы в заголовке). Всего имеется шесть уровней заголовков.

< h6 >< /h6 >

• Тег H6 определяет заголовок шестого уровня (самые мелкие буквы в заголовке). Всего имеется шесть уровней заголовков.

Пример: код

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

</body></html>

Пример: вид

Тэги элементов текста

< b >< /b >

• Тег B устанавливает отображение текста в жирном начертании.

< i >< /i >

• Тег I устанавливает отображение текста курсивом.

Тэги элементов текста

< em >< /em >

• Тег EM устанавливает отображение текста жирным курсивом.

< strong >< /strong >

• Тег STRONG устанавливает отображене текста в жирном начертании.

Тэги элементов текста

< font size=? >< /font >

• Атрибут SIZE тега FONT устанавливает относительный размер шрифта. Список возможных значений состоит из положительных и отрицательных чисел от 0 до 7.

< font color=? >< /font >

• Атрибут COLOR тега FONT устанавливает цвет текста. Цвет может быть указан с помощью с помощью названия или шестнадцатиричного кода.

Тэги элементов текста

< p >< /p >

• Тег P устанавливает начало и конец абзаца.

< p align=? >

• Атрибут ALIGN тега P устанавливает режим выравнивания текста: влево (LEFT), вправо (RIGHT) или по центру (CENTER).

Тэги элементов текста

< br >

• Тег BR устанавливает перенос строки (даже если текст продолжается за тегом).

< blockquote >< /blockquote >

• Тег BLOCKQUOTE устанавливает отступы слева и справа от текста. Кроме этого тег устанавливает разрыв абзаца до и после указанного текста.

Тэги элементов текста

< ol >< /ol >

• Тег OL ("ordered list" - упорядоченный список) устанавливает режим последовательной нумерации элементов, размещенных внутри списка.

< ul >< /ul >

• Тег UL ("unordered list" - неупорядоченный список) устанавливает режим отображения текста в виде маркированного списка.

< li >< /li >

• Тег LI устанавливает режим отображения текста в виде пункта списка. Такой список может быть неупорядоченным, упорядоченным или маркированным.

Пример: в коде

Список структурированный

<ul>

<li> Собака </li>

<li> Кошка </li>

<li> Мышь </li>

</ul>

Пример: вид

Список структурированный

• Собака

• Кошка

• Мышь

Теги графических элементов

< 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 устанавливает режим отображения указанного текста (в качестве альтернативы) в случае, если броузер не может отобразить графический файл.

Пример

Код:

Поставьте к себе этот баннер:

<img title="Баннер" align=center src="http://87.242.91.21/110324/gazeta/6839/60848.jpg" width=780 height=90>

Вид:

Поставьте к себе этот баннер:

Теги элементов ссылок

< a href="URL" >< /a >

• Тег A устанавливает связь с некоторой точкой внутри того же HTML-документа или с другим URL (гипертествовая ссылка). Атрибут HREF тега A описывает объект, представляющий собой текст или рисунок внутри HTML-документа, либо текст или рисунок во внешнем документе.

< a name="NAME" >< /a >

• Тег A устанавливает связь с некоторой точкой внутри того же HTML-документа или с другим URL (гипертествовая ссылка). Атрибут NAME тега A описывает точку внутри HTML-документа, в которую нужно переместить пользователя.

Пример

Код:

Прочитайте <ahref="http://www.gazeta.ru/column/rynska/3569689.shtml">этот замечательный</a> текст

Вид:

Прочитайте этот замечательный текст

Теги таблиц

< table >< /table >

• Тег TABLE устанавливает начало и конец таблицы. Все теги, определяющие структуру таблицы, должны располагаться между тегами TABLE.

< tr >< /tr >

• Тег TR определяет строку таблицы.

< td >< /td >

• Тег TD определяет колонку таблицы. Текст, заключенный между тегами TD ("table data" - табличные данные), отображается внутри одной ячейки.

Текстовые подстановки

&lt; Знак неравенства "меньше" (<)

&gt ; Знак неравенства "больше" (>),

&amp; Знак амперсанта (&)

&quot; Знак кавычек