Инструментарий интернет-журналиста: платформы, "хард" и "софт". Основы HTML. Семинар 3.
Download as PPTX, PDF1 like1,014 views
Документ представляет собой инструментарий для интернет-журналистов, охватывающий основы HTML, оборудование и программное обеспечение, необходимые для работы в сети. Он включает в себя различные платформы для публикации и взаимодействия, а также освещает важные теги и структуры языка HTML. Основное внимание уделяется практическим аспектам и ресурсам, которые помогут журналистам эффективно использовать интернет в их деятельности.
Инструментарий интернет-журналиста: платформы, "хард" и "софт". Основы HTML. Семинар 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/
- 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. Текстовые подстановки < Знак неравенства "меньше" (<) > ; Знак неравенства "больше" (>), & Знак амперсанта (&) " Знак кавычек