Работа в Интернете. Энциклопедия
Шрифт:
YouTube
YouTube – популярный сервис, дающий возможность своим пользователям добавлять, просматривать и комментировать видеосюжеты (рис. 10.20).
Рис. 10.20. Окно сайта http://youtube.com
Именно из-за простоты и удобства использования он полюбился многим миллионам людей. Технической основой идеи является технология Flash Video, которая позволяет при небольшом объеме данных получить удовлетворительное качество записи. Все это сделало данный сервис хорошим способом развлечения.
Загружать видео на YouTube разрешается в форматах MPEG и AVI. При этом оно автоматически конвертируется в формат FLV с использованием специального кодека H.263 и становится доступным для просмотра в режиме онлайн.
Опубликованный видеоролик можно поместить на любую другую веб-страницу. Для этого каждый ролик сопровождается уже готовой HTML-разметкой. Такая простая возможность сделала распространение видеофайлов с YouTube очень популярным. Кроме этого, пользователи могут оставлять свои комментарии, оценивать чужие, а также выставлять оценку просмотренному видео. Комментарии и врезка в другие веб-страницы могут быть запрещены автором видеосюжета.
Скачать
• Перед ссылкой на видеофайл в адресной строке браузера ввести слово kiss перед доменом, то естьзаменить на http://www.kissyoutube.com/.
В новом окне опять будет показан ролик с размещенной под ним кнопкой Download now. Скачать клип в формате FLV можно, нажав данную кнопку.
• Воспользоваться специальными сайтами для формирования ссылки:
http://keepvid.com;
http://0download.ru;
http://www.videodl.org.
Принцип работы прост: в специальное поле ввести ссылку на ролик, нажать кнопку Скачать (Get It! или Download) и с помощью сформированной ссылки скачать ролик.
• Установить специальные дополнения для браузеров:
– активизировать сценарий Download Video from YouTube в настройке IE7Pro (см. подраздел «Дополнения к Internet Explorer» раздела «Internet Explorer» гл. 2);
– UnPlug или VideoDownloader для Firefox.
• Просмотренное видео временно хранится в кэше браузера:
– в Internet Explorer – в папке Temporary Internet Files;
– в Opera – в папке Cache4;
– для доступа в кэш Firefox в адресном поле необходимо ввести команду about: cache.
В кэше ролик начинается с get_video?video=id=, далее следует код ролика в адресе. Файл не имеет расширения, его можно скопировать в отдельную папку и приписать в конце расширение FLV или AVI. После этого ролик можно просмотреть с помощью проигрывателя, поддерживающего данный формат, например VLC.Google Earth
Google Earth – один из сервисов компании Goolge, с помощью которого можно увидеть спутниковые фотографии всей поверхности Земли. Сервис доступен в трех вариантах: бесплатная версия с ограниченной функциональностью, Google Earth Plus с дополнительными возможностями (платная, $20 в год) и Google Earth Pro ($400 в год) для коммерческого использования.
Чтобы воспользоваться сервисом, необходимо скачать и установить одноименную программу (рис. 10.21).
Рис. 10.21. Стартовая страница сервиса Goolge Earth
Помимо простого обзора, программа располагает и другими возможностями.
• Время от времени программа подкачивает и сохраняет на жесткий диск изображения и другие данные для дальнейшего использования. Поэтому при следующих запусках программы закачиваются только новые данные, что экономит время и трафик.
• Управляя положением обзора, можно добиться трехмерного изображения ландшафтов Земли.
• Можно установить высокое разрешение фотографий, а также подключить другие дополнительные данные: названия городов, водоемов, аэропортов, дорог и т. д. Приведена подробная информация о многих городах, об их достопримечательностях и названиях улиц; отмечены также заправки, гостиницы и другие пункты (Street View). Присутствуют данные со ссылками на статьи из «Википедии» (Geographic Web).
• Пользователям разрешено создавать собственные метки, содержащие более детальные снимки, полученные из других источников, и карты. Метками можно обмениваться с другими пользователями через форум Google Earth Community . Через некоторое время отправленные ссылки станут видны всем пользователям.
• Есть возможность измерять расстояние между заданными точками.
• Технология Google Sky позволяет рассматривать звездное небо и астрономические объекты.
• Имеется авиасимулятор.Глава 11 Создание собственного веб-сайта
• Основы HTML
• Создание сайтов в визуальном режиме WYSIWYG
• Размещение сайта в Интернете
Познакомившись с Интернетом и узнав о его возможностях, пользователи, как правило, рано или поздно задумываются: «Как же все-таки делаются те красивые веб-странички, которые выводит нам браузер, и откуда они берутся?» Многие начинают подумывать и о том, чтобы создать свой собственный сайт в Сети. Цели создания такого сайта могут быть самые разные. Кто-то хочет рассказать миру о себе, своих увлечениях, мыслях, делах. Для кого-то создание веб-сайта – способ продвижения услуг собственного бизнеса, а также привлечения новых партнеров и клиентов. Кто-то мечтает создать крупный и популярный веб-портал. Во всех перечисленных случаях создателю сайта, от простейшего до большого и сложного, не обойтись без знания основ языка HTML. С этого и начнем.
Основы HTML
Язык HTML (от англ. HyperText Markup Language) – это язык гипертекстовой разметки. Многие читатели, далекие от программирования, наверняка занервничали, увидев слово «язык» и почувствовав аналогию с языками программирования. Следует отметить, что HTML не является языком программирования, хотя, положа руку на сердце, нужно отметить, что есть что-то общее между языками программирования и HTML. Однако это не должно пугать читателей, считающих программирование чем-то сложным и непонятным. Ведь HTML служит не для написания программ, а лишь для разметки странички, придания определенного вида тому или иному элементу: таблице, тексту или картинке. Создание HTML-страницы – увлекательное и творческое занятие, тем более что этот процесс в настоящее время усовершенствован и автоматизирован, а автору веб-сайта достаточно порой лишь базовых знаний HTML. Рассказать подробно о языке гипертекстовой разметки в рамках одной главы невозможно, поэтому поговорим лишь об основных понятиях.
Базовые понятия
HTML-страница – это, по сути, текстовый файл, который можно создать с помощью обычного Блокнота. Помимо текста, который будет выводиться браузером при просмотре такой странички, этот файл содержит невидимый для программы навигации по Сети и пользователя код. Вот этот код и есть язык гипертекстовой разметки – HTML. Чтобы начать знакомство с этим языком, нужно открыть Блокнот и создать в нем текстовый файл с содержимым, приведенным в листинге 11.1.
Листинг 11.1.
Пример простейшей веб-страницы
<HTML>
<HEAD>
<TITLE>Простейшая веб-страница</TITLE>
</HEAD>
<BODY>
<H1>Пример веб-страницы</H1>
Это простейшая web-страничка, созданная в стандартном <I>Блокноте</I>
и отображенная в браузере <B>Microsoft Internet Explorer</B>.
</BODY>
</HTML>
Созданный
Примечание
Веб-страницы, то есть, по сути, файлы на языке HTML могут иметь расширение HTM или HTML. Принципиального отличия нет, разница лишь в том, что некоторые старые операционные системы не поддерживают расширение файлов длиннее трех символов, поэтому вариант HTM более универсальный.
Необходимо запустить файл, дважды щелкнув кнопкой мыши на его имени, – откроется окно, в котором будет что-то похожее на рис. 11.1.
Рис. 11.1. Пример простейшей веб-страницы в окне браузера Internet Explorer
Таким образом, вы создали свою первую веб-страницу. Конечно, она не несет большой смысловой нагрузки и для ее создания использовался текст из рассмативаемого примера, а не писался самостоятельный HTML-код, однако создание этой странички очень важно для понимания принципов создания веб-страниц вообще. Разберемся подробнее в значении присутствующих в рассмотренном примере команд языка HTML, которые, кстати, называются HTML-тегами.
Прежде всего стоит определить расположение тегов. Дело в том, что теги в большинстве своем состоят из двух частей – открывающего (он же – содержащий параметры) и закрывающего, то есть конца тега. Закрывающий выглядит так же, как и открывающий, но начинается со знака /. Заданные в теге параметры действуют только между его началом и концом, то есть только внутри тега. В приведенном примере слово Блокноте заключено между тегами <I> и </I>. Значение этого тега становится понятным, если взглянуть на результат обработки HTML-кода браузером. Как видно на рисунке, это слово написано курсивом, из чего можно заключить, что тег <I> позволяет выделять фрагменты текста наклонным шрифтом – курсивом.
Определим значения остальных тегов, присутствующих в примере.
• <HTML> – весь HTML-код страницы заключен в этот тег (открывающий <HTML> и закрывающий </HTML>), данный тег сообщает браузеру, что обрабатываемый текст написан на языке HTML.
• <HEAD> – данный тег означает заголовок страницы, обычно в заголовке задаются разные параметры, которые не выводятся на экран в теле веб-страницы.
• <TITLE> – определяет текст, который будет выводиться в заголовке окна браузера, то есть название страницы, данный тег располагается внутри тега <HEAD>.
• После закрытия тега <HEAD> сразу же открывается тег <BODY> – в этот тег заключено тело страницы, то есть то, что пользователь будет видеть в окне браузера.
• <H1> – данный тег обозначает заголовок первого уровня, встречаются также теги <H2>, <H3> и т. д. Как видно из рисунка, заголовок отличается от остального текста.
• – служит для обозначения абзаца основного текста, в такой тег заключается каждый новый абзац.
• <I> и <B> – теги для определения начертания шрифтов, которые означают соответственно курсив и полужирный шрифт.
Как видите, ничего сложного нет. Главное – уяснить, что существуют обязательные теги, которые встречаются на всех веб-страницах, а также то, что теги, как правило, парные, то есть присутствуют открывающий и закрывающий теги. Впрочем, существуют и непарные, то есть такие, где открывающий тег присутствует, а закрывающего нет. Среди таких тегов следует назвать тег <BR>, означающий перенос строки без начала нового абзаца, а также тег <HR>, который вставляет горизонтальную линию на страницу.
Сделаем еще некоторые важные замечания. Во-первых, несмотря на то, что в рассматриваемом примере все теги написаны прописными (большими) буквами, вполне допустимо их написание и строчными (маленькими) символами. Не нужно только заменять в теге латинские буквы похожими по написанию русскими. Если текст HTML-страницы в этом случае с точки зрения человека выглядит одинаково, то браузер такие неправильно написанные теги будет понимать неправильно.
Браузеру не важно положение тега, все отступы и сдвиги нужны только для того, чтобы облегчить человеку понимание и ориентирование в коде. Конечно, количество пробелов внутри кода увеличивает размер HTML-странички, поэтому злоупотреблять ими не стоит. Но если пользователь выделит какие-либо теги определенным образом, то хуже не станет. Все пробелы больше одного браузеры просто «не замечают», то есть сколько бы пробелов в тексте ни ставилось, браузер все равно отобразит его с одним пробелом.
Работа со шрифтами
Рассмотрим подробнее, как можно видоизменять отображение шрифта с помощью не только тегов <B> и <I>, но и других.
Для определения параметров шрифта, которым будет выводиться текст, служит парный тег <FONT>. Этот тег имеет дополнительные параметры, с помощью которых можно управлять внешним видом шрифта. Один из таких параметров – SIZE – задает размер шрифта. Создадим еще один файл – 2.htm и впишем в него содержимое листинга 11.2.
Листинг 11.2. Демонстрация шрифтов разных размеров<HTML>
<HEAD>
<TITLE>Шрифты разных размеров</TITLE>
</HEAD>
<BODY>
<FONT SIZE="1">текст размера 1</FONT><BR>
<FONT SIZE="2">текст размера 2</FONT><BR>
<FONT SIZE="3">текст размера 3</FONT><BR>
<FONT SIZE="4">текст размера 4</FONT><BR>
<FONT SIZE="5">текст размера 5</FONT><BR>
<FONT SIZE="6">текст размера 6</FONT><BR>
<FONT SIZE="7">текст размера 7</FONT><BR>
</BODY>
</HTML>В результате обработки этого HTML-кода браузером получим шрифты с размером от 1 до 7, показанные на рис. 11.2. Из приведенного примера также становится ясно, каким образом задаются параметры тега: после его названия пишется параметр, а затем знак =, после которого в кавычках указывается значение этого параметра.
Если нужно задать несколько параметров, то они отделяются друг от друга пробелом. Если первую строку после тега <BODY> привести к виду <FONT SIZE="1" FACE="COMIC SANS MS">текст размера 1</FONT>и то же самое сделать с остальными строками вплоть до шрифта с размером 7, то получится страница другого вида (рис. 11.3).