Vvedenie html 1
- 1. Что такое Internet Internet - это крупнейшая компьютерная сеть в мире. А начинался Internet из исследовательского проекта в конце 60-х годов, который выполнялся по заказу военных США. Тогда была создана сеть под названием ARPANET, охватывавшую большую часть территории США. Позже сеть подвергалась неоднократным улучшениям на основе новых технологий и получила название Internet. В начале 90-х годов компании стали предлагать услуги Internet, ориентированные на потребности обычных пользователей. Так постепенно сеть разрасталась и вовлекала граждан, живущих по всему миру. Физически Internet состоит из сотен тысяч соединенных между собой компьютеров, разбросанных по всему миру. Компьютеры в Internet взаимодействуют между собой, используя набор протоколов, называемых TCP/IP (Transmission Control Protokol/Internet Protokol). Это набор правил, регламентирующих способы передачи данных между компьютерами в сети. Протоколы TCP/IP позволяют компьютерам обмениваться информацией таким образом, будто они подключены друг к другу напрямую. Что такое WWW WWW (World Wide Web) - это часть Internet, представляющая собой гигантский набор документов, хранящихся на компьютерах по всему миру. Сокращенно WWW называют просто Вэб. Вэб-страница - это отдельный документ Вэб, который способен содержать информацию различного вида - текст, рисунки, фото, видео, аудиозаписи. Такие вэб-страницы хранятся на специальных компьютерах, которые называются серверами. Будучи сохраненной на вэб-сервере, страница становится доступной для использования другими пользователями. Коллекция вэб-страниц, объединенная по какому-либо признаку, называется вэб-сайтом или просто сайтом. Название сервера (доменное имя) - обозначает компьютер, содержащий данную вэб-страницу. Путь доступа - указывает местоположение страницы на диске сервера. Например http://city.zp.ua/html/index.html http - наименование протокола city.zp.ua - наименование сервера или доменное имя /html/index.html - путь доступа к странице на самом сервере.
- 2. Кроме http (Hyper Text Transfer Protocol) протокола, существуют другие виды протокола, применяемые для доступа к данным в Internet, - например, FTP (File Transfer Protocol). Сайты FTP, на которые следует ссылаться посредством аббревиатуры ftp, позволяют пользователю выгружать на сервер данные, хранящиеся в виде отдельных файлов. Что такое Web-браузер Web-браузер - это программа, установленная на компьютере пользователя, и служащая для поиска и отображения информации в сети. Браузер считывает вэб-страницы и другие файлы с диска сервера и отображает их содержимое на мониторе компьютера пользователя. Среди наиболее популярных браузеров следует назвать Microsoft Internet Explorer, Netscape Navigator, Opera.
- 3. Что такое HTML Существует несколько версий HTML. Стандарт языка непрерывно обновляется и дополняется, следствие этого - каждый год выходит новая версия HTML. С другой стороны - вэб-браузеры, с помощью которых пользователи просматривают html-страницы, также имеют свои различия в части интерпретации и поддержки отдельных тэгов. Это обусловлено тем, что разработкой браузеров занимаются различные компании. Что из этого следует? Попросту говоря, один и тот же html-код разные браузеры будут отображать по-разному, а некоторые тэги отдельные браузеры вообще "не понимают". Что такое HTML HTML (HyperText Markup Language, язык гипертекстовой разметки) - специальные инструкции браузеру, с помощью которых создаются Вэб-страницы. Т.е. Web-страницы - это документы в формате HTML, содержащие текст и специальные тэги (дескрипторы) HTML. По большому счету тэги HTML необходимы для форматирования текста (т.е. придания ему нужного вида), который "понимает" браузер. Документы HTML хранятся в виде файлов с расширением .htm или .html. Тэги HTML сообщают браузеру информацию о структуре и особенностях форматирования Вэб-страницы. Каждый тэг содержит определенную инструкцию и заключается в угловые скобки <>. Большинство тэгов состоят из открывающей и закрывающей частей и воздействуют на текст, заключенный внутри. Краткая история HTML Язык HTML был разработан Тимом Бернерс-Ли во время его работы в CERN и распространен браузером Mosaic, разработанным в NCSA. В 1990-х годах он добился особенных успехов благодаря быстрому росту Web. В это время HTML был расширен и дополнен. В Web очень важно использование одних и тех же соглашений HTML авторами Web-страниц и производителями. Это явилось причиной совместной работы над спецификациями языка HTML. HTML 2.0 (ноябрь 1995) был разработан под эгидой Internet Engineering Task Force (IETF) для упорядочения общепринятых положений в конце 1994 года. HTML+ (1993) и HTML 3.0 (1995) - это более богатые версии языка HTML. Несмотря на то, что в обычных дискуссиях согласие никогда не было достигнуто, эти черновики привели к принятию ряда новых свойств. Усилия Рабочей группы
- 4. World Wide Web Consortium по HTML в упорядочении общепринятых положений в 1996 привели к версии HTML 3.2 (январь 1997). Большинство людей признают, что документы HTML должны работать в различных браузерах и на разных платформах. Достижение совместимости снижает расходы авторов, поскольку они могут разрабатывать только одну версию документа. В противном случае возникает еще больший риск, что Web будет представлять собой смесь личных несовместимых форматов, что в конечном счете приведет к снижению коммерческого потенциала Web для всех участников. В каждой версии HTML предпринималась попытка отразить все большее число соглашений между работниками и пользователями этой индустрии, чтобы усилия авторов не были потрачены впустую, а их документы не стали бы нечитаемыми в короткий срок. С помощью чего создаются Web-страницы Что такое Вэб-страница? По сути дела - это простой текстовый документ, содержащий тэги (которые в свою очередь являются обычным текстом, заключенным в скобки). Т.е., исходя из вышеизложенного, Вэб-страницы можно набрать в любом текстовом редакторе (Блокнот, WordPad, Word и т.д.). В этом случае абсолютно все надо набирать своими ручками. Основной плюс такого метода - код получается абсолютно минимизированным, т.е. "вес" такой html- страницы будет минимальным. К недостаткам следует отнести тот факт, что пользователь должен очень хорошо знать язык html- разметки, да и результаты своего труда нельзя будет сразу посмотреть. Поэтому таким методом создания Вэб-страниц практически никто не пользуется. Порекомендовать его можно разве что для создания простеньких Вэб-страничек если нет возможности использования специализированных программ. Практически все Вэб-дизайнеры используют специальные программы, которые называются HTML-редакторы. Наиболее популярные - Macromedia HomeSite, Dreamweaver MX. Чем же они хороши? Прежде всего, тем, что они как раз и предназначены для создания Вэб-страниц. Синтаксис в таких программах обычно выделяется разными цветами, так что очень хорошо видно где находится текст, а где дескрипторы, а где php-код. Многие сложные конструкции тэгов можно вводить одним щелчком мышки. Результат своего труда виден тут же, в соседнем окошке.
- 5. Если вы серьезно занимаетесь вэб-дизайном, то без такой программы вам просто не обойтись. Кроме вышеуказанных программ существует еще один тип специализированных программ - это, так называемые, средства визуального проектирования (Microsoft FrontPage, HoTMetal Pro). Они позволяют создавать Вэб-страницы таким образом, чтобы полностью исключить необходимость набора тэгов HTML вручную. Подобные программы выполняют все необходимые операции автоматически, по мере "рисования" Вэб-страницы. К недостаткам таких программ следует отнести тот факт, что "вес" таких страниц оказывается большим из-за избыточного HTML-кода, да и изящную страничку без подправки кода "вручную" сделать весьма проблематично. Основные тэги Обязательные тэги Существует несколько основных тэгов HTML, которые должны присутствовать в тексте любой Вэб-страницы. Каждая Вэб-страница обязана содержать тэг <HTML>, располагаемый в самом начале. Этот тэг описывает ваш документ как Вэб-страницу, выполненную в формате HTML. Непосредственно за дескриптором <HTML> обычно следует тэг <HEAD>, который указывает на наличие текста, содержащего наименование страницы и дополнительные сведения о ней. В раздел HEAD обычно вложен тэг <TITLE>, служащий для обозначения наименования страницы. Наименования страниц обычно отображаются в строке заголовка окна браузера. Название Вэб- страницы может быть набрано только с помощью символов букв, цифр и пробела. Затем следует тэг <BODY>, который указывает на начало собственно "тела" Вэб-страницы. В этом разделе размещаются весь остальной текст, графика, таблицы и другие элементы содержимого страницы, которые увидит посетитель, обратившийся к вашему сайту. Пример 1:
- 6. <html> <head> <title>HTML</title> </head> <body> Текст сайта </body> </html> Результат: Текст сайта Задание: Внесите коррективы в текст программы так, чтобы во второй строке была написана Ваша фамилия. Нормальный HTML-редактор уже имеет набор вышеуказанных тэгов при создании новой страницы. Следует сказать, что к выбору наименований Вэб-страниц следует отнестись со всей серьезностью, т.к. они используются поисковыми системами для формирования каталогов Вэб-страниц. Поисковая система - это сайт, помогающий пользователям быстро находить интересующую их информацию. Ваша страница с большей вероятностью окажется найденной поисковой системой, которой задан определенный набор ключевых слов поиска, если эти слова присутствуют в названии страницы. Создание абзаца, символов пробела, заголовка Вэб-браузеры обычно не принимают во внимание те символы перевода строки, которые вносятся в текст пользователем на этапе ее формирования. Для начала нового абзаца служит тэг <P>. После открытия страницы в окне Вэб-браузера все абзацы ее текста, помеченные тэгом <P>, разделяются пустыми строками, что улучшает ее компоновку и внешний вид. По умолчанию браузер обычно форматирует абзац с выравниванием по левому полю. Для принудительного выравнивания служит атрибут align. С его помощью абзацы могут быть выровнены влево, вправо, по центру и по ширине. Пример 2: <html>
- 7. <head> <title> HTML</title> </head> <body> <p align="left">абзац выровнен влево...</p> <p align="right">абзац выровнен вправо...</p> <p align="center">абзац выровнен по центру...</p> <p align="justify">абзац выровнен по ширине...</p> </body> </html> Результат: Задание: Внесите коррективы в текст программы так, чтобы по центру была написана сегодняшняя дата, слева – день недели, справа – текущий месяц. Вэб-браузеры автоматически переносят текст внутри абзацев на новую строку. Если стоит задача размещения какого-либо сочетания слов в одной строке, то для этой цели используется тэг <NOBR>. Для перехода к новой строке используется тэг <BR>. Он сообщает браузеру, что следует прекратить размещение текста и других элементов страницы в пределах текущей строки и перейти к новой строке. Этот тэг не имеет своего двойника с косой чертой, так называемого закрывающего тэга. Основное использование этого тэга - для принудительного размещения встроенных элементов в определенном месте страницы. Он удобен, также, в тех случаях, когда необходимо увеличить пустые области между отдельными элементами страницы. Пример 3:
- 8. <html> <head> <title> HTML</title> </head> <body> <p>Делаем так, чтобы текст <nobr>"У Лукоморья дуб зеленый, златая цепь на дубе том"</nobr> находился на одной строчке.</p> <p>А теперь воспользуемся тэгом BR</p> У попа была собака,<br> Он ее любил,<br> Она съела кусок мяса,<br> Он ее убил. </body> </html> Результат: Задание: Напишите любое четверостишие, используя тег BR. Вэб-браузеры обычно игнорируют дополнительные символы пробела, введенные в текст страницы. Для этого используется команда  . Эта команда создает неделимое пустое пространство между элементами страницы, будь то графика или текст. Следует учитывать тот факт, что использование   вместо пробела между двумя соседними словами гарантирует, что оба слова не будут разнесены по разным строкам в окне браузера - они будут расположены всегда рядом. Заголовки и комментарии Создание заголовков H1,H2,...H6 Используются для создания заголовков текста. Существует шесть уровней заголовков, различающихся величиной шрифта. С их помощью можно разбивать текст на смысловые уровни - разделы и подразделы. Параметры: ALIGN - определяет способ выравнивания заголовка по горизонтали.
- 9. Возможные значения: left, right, center. Заголовки - отличный инструмент структурной организации содержимого Вэб-страницы. Стандарт HTML предусматривает возможность использования заголовков шести уровней. Заголовки 1 уровня обозначаются тэгом <Н1> и отображаются самым крупным шрифтом, а уровня 6 (<Н6>) - самым мелким. Заголовки с крупным шрифтом (1, 2, 3) обычно используют в качестве выделения разделов документа, а тэги <Н5>, <Н6> часто применяют для выделения фрагментов текста, содержащих сведения об авторских правах и другую служебную информацию. Шрифт заголовков, форматируемых с помощью тэга <Н4>, как правило, не отличается по размеру от шрифта, которым набран основной текст страницы. Грамотное использование заголовков значительно улучшает читабельность страницы, но надо заметить, что не следует использовать на одной странице заголовки более трех различных уровней вложенности. Пример 4: <html> <head> <title> HTML</title> </head> <body> <h1>Заголовок 1 уровня</h1> <h2>Заголовок 2 уровня</h2> <h3>Заголовок 3 уровня</h3> <h4>Заголовок 4 уровня</h4> <h5>Заголовок 5 уровня</h5> <h6>Заголовок 6 уровня</h6> </body> </html> Результат:
- 10. Задание: Напишите в порядке возрастания шрифта Ваши любимые предметы. Форматирование текста Предварительное форматирование текста PRE Используется для включения в документ уже отформатированного текста. Браузеры воспроизводят содержимое этого элемента с помощью моноширинного шрифта, сохраняя пробелы и символы конца строки. Вэб-браузеры игнорируют пустые строки и избыточные пробелы внутри текста страницы. Дескриптор <PRE> указывает браузеру сохранять в неприкосновенности пустые области текста страницы. Браузер отображает подобный предварительно отформатированный текст с помощью моноширинных шрифтов. Что такое моноширинный шрифт? Это шрифт, в котором под каждую букву отводится область одинакового размера. Поэтому, используя предварительное форматирование, удобно сразу пользоваться одним из моноширинных шрифтов, например Courier. Тогда сразу будет видно, как текст будет располагаться на экране в окне браузера. При обработке тэга <PRE>, браузер отображает текст, заключенный в этот тэг, точно так, как он набран - не удаляя избыточных пробелов и переносов. Следует помнить, что слишком длинные строки могут не уместиться в пределах окна.
- 11. Удобно пользоваться предварительным форматированием для создания простых таблиц. Пример 5: <html> <head> <title> HTML</title> </head> <body> <pre> У попа была собака, Он ее любил, Она съела кусок мяса Он ее убил. </pre> </body> </html> Результат: Выделение фрагментов текста STRONG Усиленное выделение. Текст, заключенный между начальным и конечным тэгами, будет выделен жирным шрифтом. То есть элемент STRONG практически аналогичен по действию элементу B. B Текст, заключенный между начальным и конечным тэгами, будет выделен жирным шрифтом. I Текст, заключенный между начальным и конечным тэгами, будет выделен курсивом. EM Логическое ударение. Используется для смыслового выделения текста, стоящего между начальным и конечным тэгами. Результат обычно отображается курсивом. То есть элемент EM практически аналогичен по действию элементу I.
- 12. U Данный элемент отображает помещенный между начальным и конечным тэгами текст как подчеркнутый. S, STRIKE Элемент STRIKE отображает помещенный между начальным и конечным тэгами текст как перечеркнутый. В HTML 3.2 вместо STRIKE был предложен более краткий тэг S. SUP Отображает текст со сдвигом вверх (верхний индекс) и уменьшением размера текущего шрифта на единицу. SUB Отображает текст со сдвигом вниз (нижний индекс) и уменьшением размера текущего шрифта на единицу. Для придания фрагменту текста смыслового значения очень удобно использовать средства изменения начертания шрифта. Для выделения текста полужирным шрифтом используется тэг <B> или <STRONG>, для выделения курсивом - <I> или <EM>, для подчеркивания текста - <U>, для зачеркивания текста - <STRIKE>. Фрагменты полужирного или курсивного текста используют для ввода новых терминов, выражения важных мыслей. С подчеркиванием текста надо быть очень осторожным, т.к. в Интернете таким образом принято выделять гиперссылки. Тэг <CENTER> позволяет центрировать текст на странице по горизонтали. Это удобно для выделения наименований или заголовков. HTML позволяет одновременно применять несколько дескрипторов, предназначенных для изменения начертания шрифта. Однако в этом случае необходимо следить, чтобы завершающие дескрипторы, содержащие символ косой черты, вводились в обратном порядке. Для преобразования текста в надстрочный индекс применяют тэг <SUP>, для подстрочного индекса - <SUB>. Эти тэги пригодятся при вводе математических текстов, химических формул, научных статей, построении сносок и т.д. Обычно индексы отображаются шрифтом меньшего размера по сравнению с основным. Это обстоятельство следует учитывать при выборе размера основного шрифта, т.к. при малом размере индексы могут быть просто не видны. Пример 6: <html>
- 13. <head> <title>HTML</title> </head> <body> <p><strong>Жирный текст</strong></p> <p><em>Курсив</em></p> <p><u>Подчеркнутый текст</u></p> <p><strike>Зачеркнутый текст</strike></p> <center>Центрирование</center> <p><strong><em>Жирный курсив</em></strong></p> <p>Верхний <sup>индекс</sup></p> <p>Нижний <sub>индекс</sub></p> </body> </html> Результат: Задание: Напишите Ваше ФИО и примените к нему следующие параметры форматирования: подчёркивание, жирный курсив, центрирование. Запишите математическое выражение вида: х2 +у1. Выбор шрифта FONT Позволяет изменять цвет, размер и тип шрифта текста, находящегося между начальным и конечным тэгами. Вне тэгов <FONT> и </FONT> используется шрифт, указанный в элементе BASEFONT. Параметры: SIZE - определяет размер шрифта. Возможные значения:
- 14. - целое число от 1 до 7; - относительный размер с указанием знака, вычисляется путем сложения с базовым размером, определенным с помощью параметра SIZE элемента BASEFONT. COLOR - определяет цвет текста. Задается либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов. FACE - определяет используемый шрифт. Для изменения шрифта служит тэг <FONT> с атрибутом FACE. Можно указывать шрифт по названию (Arial, Tahoma, Verdana) или типу(например, monospace). Желательно перечислить несколько имен шрифта, чтобы избежать ситуации, когда окажется, что требуемый шрифт не установлен у пользователя. Не рекомендую на одной странице применять более 2-3 различных шрифтов, иначе страница будет смотреться наляписто и непрофессионально. Пример 7: <html> <head> <title>HTML</title> </head> <body> <p><font face="Times New Roman, Arial">У попа была собака, ОН ЕЕ ЛЮБИЛ</p> <p><font face="Monotype Corsiva, Arial">Она съела кусок мяса, ОН ЕЕ УБИЛ</p> </body> </html> Результат: Задание: Запишите отрывок гимна Украины одним из известных Вам шрифтом. Изменение размера шрифта BASEFONT Не имеет конечного тэга. Определяет основной шрифт, которым должен отображаться текст документа. Впоследствии вы можете легко изменить шрифт в любой части документа, используя элемент FONT. Действие элемента BASEFONT не распространяется
- 15. на текст, заключенный в ячейки таблиц. Параметры: SIZE - обязательный параметр. Определяет базовый размер шрифта. Возможные значения : целые числа от 1 до 7 включительно. FACE - определяет используемый шрифт (гарнитуру). BIG Текст, заключенный между начальным и конечным тэгами, отображается увеличенным шрифтом (относительно текущего). SMALL Текст, заключенный между начальным и конечным тэгами, отображается уменьшенным шрифтом (относительно текущего). Для изменения размера шрифта используют атрибут SIZE. Чем крупнее шрифт, тем более легким для восприятия становится текст. Однако, мелкий шрифт позволяет уместить в пределах экрана больший объем информации. Используя данный атрибут с тэгом <BASEFONT> , вы можете изменить размер текста вэб-страницы целиком. Применяя атрибут SIZE совместно с тэгом <FONT>, можно воздействовать на внешний вид отдельного фрагмента текста. Доступно 7 размеров шрифтов. Самый малый обозначается цифрой 1, а самый крупный - 7. Изменять шрифт можно с помощью тэгов <BIG> и <SMALL>. <BIG> укрупняет шрифт указанного фрагмента по отношению к предыдущему тексту, а <SMALL>, соответственно, уменьшает. Меняя размер отдельных букв, можно добиться интересных эффектов. Например, таким образом можно получить буквицу - укрупненную прописную букву начала абзаца. Пример 8: <html> <head> <title> HTML</title> </head> <body> <p><font size="1">Шрифт размера 1</font></p> <p><font size="2">Шрифт размера 2</font></p> <p><font size="3">Шрифт размера 3</font></p> <p><font size="4">Шрифт размера 4</font></p> <p><font size="5">Шрифт 5</font></p> <p><font size="6">Шрифт 6</font></p> <p><font size="7">Шрифт 7</font></p>
- 16. <p><font size="6">У</font>тро красит нежным светом</p> <p><font size="+2">С</font>тены <small>старого</small> <big>Кремля</big></p> </body> </html> Результат: Выбор цвета шрифта COLOR - определяет цвет текста. Задается либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов. Отображение участков текста Вэб-страницы шрифтами разного цвета придает ей привлекательность. Используя атрибут TEXT в контексте тэга <BODY>, можно изменить цвет текста вэб-страницы целиком. Применение же атрибута COLOR с тэгом <FONT> (обладает более высоким приоритетом) позволяет взаимодействовать на внешний вид отдельного фрагмента текста. Чтобы изменить цвет текста, надо знать наименование цвета, либо его шестнадцатеричный код. Код состоит из символа фунта # и числа, представляющего интенсивность красной, зеленой и синей составляющих цвета. По имени можно сослаться только на 16 стандартных цветов. Пример 9: <html> <head> <title>HTML</title>
- 17. </head> <body> <p><font color="#ff0000">Красный цвет</font></p> <p><font color="blue">Синий цвет</font></p> </body> </html> Результат: Задание: Запишите цифры от 1 до 9 разными цветами и разными размерами. Изменение цвета фона Атрибут BGCOLOR дает возможность явного указания цвета фона вэб-страницы. Цвет фона задается аналогично цвету текста (именем или кодом). Пример 10: <html> <head> <title>HTML</title> </head> <body> <BODY BGCOLOR="#00FF00"> </BODY> </body> </html> Результат:
- 18. Задание: Установите фон страницы одним из цветов флага Украины. Блоки цитат BLOCKQUOTE Оформляет находящийся между начальным и конечным тэгами текст как цитату. Используется для длинных цитат (в отличие от элемента CITE). Цитируемый текст отображается отдельным абзацем с увеличенным отступом. Для создания блоков цитат применяют тэг <BLOCKQUOTE>. При этом цитата отображается с дополнительными отступами. Если надо сформировать короткую цитату внутри абзаца, можно использовать тэг <Q>. Фрагмент текста в этом случае будет заключен в двойные кавычки. Пример 11: <html> <head> <title> HTML</title> </head> <body> <p>Основной текст основной текст основной текст основной текст</p> <p><blockquote>Блок цитат блок цитат Блок цитат блок цитат Блок цитат блок цитат</blockquote></p> </body> </html> Результат: