2.3 Форматирование текста
В разделе BODY все символы табуляции и конца строк браузером игнорируются и никак не влияют на отображение страницы. Поэтому перевод строки в исходном тексте HTML-документа не приведет к началу новой строки в отображаемом обозревателем тексте при отсутствии специальных тегов. Это правило очень важно помнить и не забывать ставить разделяющие строки теги, иначе у текста не будет абзацев, и он станет нечитаемым.
Для начала новой строки используется тег <BR> (сокр. от англ. break - прервать). Этот тег приводит к отображению браузером дальнейшего текста с начала следующей строки. Закрывающий для него тег не используется. Он удобен, если требуется с какого-то места писать с новой строки без начала нового абзаца, например, в стихотворении. Повторное его использование позволяет вставить одну или несколько пустых строк, отодвинув следующий фрагмент страницы вниз.
Сплошной текст без промежутков читается не очень легко, его неудобно просматривать и находить нужные места. Разбитый на абзацы, текст воспринимается гораздо быстрее. Для начала нового абзаца используется тег <P> (англ. paragraph - абзац). Этот тег, кроме начала новой строки, вставляет одну пустую строку. Но многократное повторение <P>, в отличие от <BR>, не приведет к появлению нескольких пустых строк, останется все та же одна пустая строка.
Внутри скобок тега кроме его названия могут размещаться также атрибуты (англ. atributes - атрибуты). Они отделяются от названия и между собой пробелами (одним или несколькими), а пишутся в виде имя_атрибута="значение". Если значение не содержит пробелов, то кавычки могут быть опущены, но так делать не рекомендуется. Тег <P> может содержать атрибут ALIGN, определяющий выравнивание абзаца. По умолчанию абзац выровнен влево ALIGN="left". Возможны также выравнивания вправо ALIGN="right" и по центру ALIGN="center". При использовании атрибутов, после форматируемого текста следует использовать закрывающий тег </P>. Если его нет, то новый тег <P> означает закрытие предыдущего, соответственно вложенные <P> невозможны. Выровнять текст по центру возможно также тегом <CENTER>.
Теперь мы можем поместить на нашу Web-страницу некоторый текст с различным выравниванием:
<HTML> <HEAD> <TITLE>Вышивка крестом</TITLE> </HEAD> <BODY> <P align=center>Добро пожаловать на сайт Вышивай.ру! <P align=left>На них Вы сможете найти:<BR>- рассказ обо мне и о моих увлечениях;<BR>- мои работы. <P align=right>С одной из моих страниц можно будет<BR>отправить мне электронное письмо. </BODY> </HTML>
Кроме использования этих тегов, для разрыва строк возможно использование символов конца строк и табуляций в самом HTML-документе. Для этих целей существует тег <PRE>. Весь текст, помещенный между тегами <PRE> и </PRE> будет выводиться без изменений, то есть со всеми концами строк и табуляциями.
Например:
<PRE>Это текст написан в две строки.</PRE>
В HTML-документе, кроме текста, могут содержаться горизонтальные разделительные линии. Они, как и текст, не требуют никаких внешних файлов. Тег <HR> выведет горизонтальную линию единичной толщины вдоль всей ширины страницы. Горизонтальная разделительная линия всегда приводит к разрыву строки, но пустых строк между линией и текстом не появляется. Тег <HR> может содержать несколько атрибутов. <HR SHADE> и <HR> дают контурную линию с трехмерным эффектом углубления. <HR NOSHADE> дает сплошную черную линию. Линия может не простираться во всю ширину страницы, а составлять лишь некоторую часть. Атрибут WIDTH задает ширину линии, в процентах от ширины всей страницы или в пикселях. Например, 50% - половина ширины страницы, 400 - ширина в 400 пикселей. Атрибут ALIGN может принимать значения, аналогичные его значениям для тега <P>, но выравнивание по умолчанию - по центру. Атрибут SIZE задает толщину линии в пикселях от 1 до 175; по умолчанию 1, но если <HR SHADE>, (линия - контурная), то добавляется толщина, необходимая для трехмерного эффекта углубления.
Линии, наряду с абзацами, позволяют выделить логические фрагменты текста. Но большое количество горизонтальных линий неприятно для посетителя нашей Web-страницы, поэтому после каждого абзаца их ставить не следует. Они больше подходят для выделения целых разделов.
2.4 HTML-редакторы
Каждый выбирает свой инструмент для создания Web-страниц. Это может быть MS FrontPage или Macromedia DreamWeaver, Allaire HomeSite или 1st Page 2000. А кто-то пользуется простым текстовым редактором, например Блокнотом (Notepad).
Основным недостатком MS FrontPage является то, что он генерирует очень большой HTML-код (слишком много лишнего), поэтому страницы получаются большими, что сказывается на скорости загрузки. Более того, при создании Web-страниц в этом редакторе видишь одно, а в окне браузера - совсем другое (особенно это касается Netscape Navigator). Поэтому для создания качественных Web-страниц рекомендуется использовать пакеты, которые будут рассмотрены ниже.
Macromedia DreamWeaver. Компания Macromedia считается лидером по производству программ для создания веб-сайтов, а также законодателем моды в этой области.
Версия HTML-редактора этой компании - DreamWeaver 3, который относится к категории WYSIWYG-редакторов, и этот пакет имеет очень много достоинств: удобный интерфейс, настройка функций, поддержка больших проектов и ShockWave технологий, возможность закачки файлов через FTP, поддержка SSI и многое другое. Для работы в этой программе не нужно досконально знать HTML (в этом и заключается преимущество технологии WYSIWYG - что вижу, то и получаю).
Но DreamWeaver на несколько шагов опережает другие редакторы, использующие технологию WYSIWYG, в первую очередь тем, что генерирует очень чистый HTML-код. DreamWeaver позволяет вам избавиться от однотипной работы при создании страниц (например, верстка текста) при помощи использования опции "запись последовательности команд" вы записываете последовательность производимых вами команд, потом нажимаете, например, CTRL+P, и DreamWeaver воспроизводит все в той же последовательности.
Следующий редактор - HomeSite 4 - для создания страниц вручную, т. е. для знатоков HTML. Вы получаете полный контроль над HTML-кодом, причем существует возможность оптимизировать свою страничку под один из трех популярных браузеров (MSIE, NN, Opera).
HomeSite содержит два основных режима: Edit и Design. Режим Design - это подобие WYSIWYG-редактора, выдающее HTML-код, причем, если вы загрузите чужой HTML-код, то HomeSite все перепишет по-своему. Режим Edit позволяет получить полный контроль над страничкой. Здесь вы можете настроить практически все, сможете прописать функции каждого тега (тогда ваша страничка в любом браузере будет смотреться одинаково).
Еще одна отличительная особенность HomeSite - это его «склейка» с Dreamweaver. HomeSite обладает кнопкой «Dreamweaver», а также входит в его стандартный пакет поставки. Впрочем, и DreamWeaver имеет возможность подключения HomeSite, как редактора для корректировки HTML-кода.
2.5 NotePad++
Notepad++ - текстовый редактор, который приняли «на вооружение» не только программисты, Web-мастера, модификаторы, но и обычные пользователи, так или иначе связанные с редактированием. Программа распространяется свободно, имеет открытый исходный код, потребляет минимум ресурсов, быстро загружается. Утилита позиционируется, прежде всего, как редактор исходных кодов. Вместе с этим, Notepad++ довольно часто используется для открытия различных текстовых файлов.
Документы открываются программой в так называемых табах – отдельных вкладках. При работе пользователь может перемещаться между ними, активируя необходимый документ, внося в него изменения, и сохраняя его нажатием клавиши мыши. Помимо этого, при закрытии и следующем запуске приложения, табы, над которыми совершались действия, сохраняются.
Рабочее окно утилиты можно разделить на две части. В такой способ удобно сравнивать несколько вариаций одного и того же документа. Для определения отличий в Notepad++ встроен плагин Compare.
С помощью Notepad++ можно открыть следующие форматы файлов:
Текстовые: ini, log, txt, text. C++ language Files: h, hpp, hxx, c, cpp, cxx, cc, m. Java & Pascal: java, class, cs, pas, inc. Web Scripts: html, htm, php, phtml, js, asp, aspx, css, xml. Public Scripts: sh, bsh, nsi, nsh, lua, pl, pm, py. Property Scripts: rc, as, mx, vb, vbs. Fortran, Tex, SQL: f, for, f95, f2k, tex, sql. Остальное: mak, nfo, cmd, bat, reg.
Программа способна выполнять функции файлового менеджера, поэтому доступен просмотр файлов, размещенных на компьютере и открытие их в установленных браузерах.
Кроме всего вышеперечисленного, стоит отметить следующие особенности Notepad++:
- сворачивание блоков и подсветка текста, в зависимости от синтаксиса языка программирования;
- функция WYSIWYG – вывод на печать того, что находится на экране в окне редактирования;
- автозавершение набираемого слова;
- поддержка Поиска/Замены регулярных выражений – пользователь может менять определенные строки в документе, используя определенные выражения;
- перемещение фрагментов текста или отдельного слова на новое место;
- масштабирование – уменьшение и увеличение содержимого документа;
- динамическое видоизменение окон просмотра;
- поддержка огромного числа языков;
- автоопределение состояния файла – при изменении или удалении файла, редактируемого в Notepad++, иной утилитой, пользователь получает программное сообщение;
- расстановка заметок по тексту документа;
- запись макросов и их выполнение.
Главная же особенность Notepad++ - поддержка плагинов, которые способствуют расширению базового функционала редактора. В программу интегрируются дополнительные плагины, позволяющие настроить проверку орфографии, автоматическое сохранение документов, симметричное и асимметричное шифрование текста, HEX-редактор, FTP-менеджер.
РАЗРАБОТКА ПЕРСОНАЛЬНОГО WEB-САЙТА
На что стоит обратить внимание
Первое что включает в себя создание сайтов, это информация, которую он содержит. Ведь именно ее ищут пользователи всемирной паутины Интернет. Чем качественнее и полезнее информация содержится на сайте, тем большее количество людей будут его посещать. Самое главное- информация должна соответствовать тематике сайта. К примеру, если сайт об автомобилях, значит и контент должен быть автомобильной тематики. Также следует учитывать доменное имя, оно должно быть собственным и иметь название, относящееся к сайту. Сайты имеющие бесплатное доменное имя не воспринимаются в серьез ни пользователями, ни поисковыми системами, поэтому здесь очень проблематично будет добиться серьезных успехов. «Одежка» сайта (дизайн):
Не смотря на то, что поговорка гласит – встречают по одежке…, я решила поставить этот пункт на второе место после информации. Но дизайн сайта играет не менее важную роль в процессе разработка сайтов, так как в первую очередь внимание посетителя обращается на внешний вид сайта, а уж потом на его содержание. Качество сайта показывает на сколько уважительно конкретная компания относится к своим потенциальным клиентам. Прежде всего сайт – это лицо любой компании и именно по его оформлению клиент делает выводы о вашей фирме сравнивая вас с конкурентами. Помимо грамотного исполнения, существует еще целый ряд правил, которые не стоит выпускать из внимания в процессе создание сайтов, рассмотрим некоторые из них:
- размер (вес) файлов графических; - оправданность применения той или иной технологии; - режимы и скорость загрузки страниц; - креативность; - ценность эстетическая; - цветовой баланс и его совместимость и правильность оформления.
- Навигация и структура сайта.
Бриллиант можно сравнить с ценностью информации, с его оправой – дизайн, а навигацию и структуру – с огранкой камня. Процесс разработка сайтов профессионалами, всегда предусматривает тщательно продуманную и грамотную структуру и навигацию. Инструменты навигации должны быть легки в управлении и понятны даже самому неопытному пользователю, по структуре пользователь должен легко определить специфику предложения компании. Хорошо сделанный сайт не имеет страниц с информацией о идущих работах по их наполнению.
Стиль текста и его грамматика:
На сайте не допустимы – плохая литературная стилистика, опечатки, ошибки. Не соблюдение этих правил влияют не только на оценку сайта со стороны пользователя, но и на продвижение сайтов – поисковые системы очень не любят неграмотные тексты.
Персональный Web-сайт
В данной курсовой работе я создала сайт, состоящий из шести страниц:
- На «главной странице» размещена информация о тематике сайта, что на нем можно найти и краткой информацией о себе. Так же размещена gif-анимация с фотографиями, для более наглядного представления об авторе сайта.
- «Вышивка крестом для начинающих». На этой странице содержится вся необходимая информация для новичков в этом нелегком, но очень увлекательном деле, а так же, краткая история появления этого ремесла. Прежде чем начать, следует узнать обо всем этот подробнее, тогда и процесс вышивания будет более увлекательным и подходить к этому делу Вы будете серьезнее.
- «Как выбрать иглы для вышивания крестом?». Информация на этой странице является очень важной. При выборе иглы для вышивания лучше брать иглу с тупым кончиком, т.к. при вышивании очень часто можно уколоться.
-«Как выбрать вышивальные нити?». Огромный выбор нитей для вышивания может напугать начинающих рукодельниц. Эта статья поможет определиться, какие нити подойдут именно для Вас. Содержащиеся фотографии, наглядно покажут как они выглядят.
-«Техника вышивания». Эта страница - наглядное пособие от того как правильно вставлять и закреплять нить, до того, какой способ вышивания крестика подходит и будет удобен именно Вам.
-«Мои работы». На данной странице представлены фотографии красочных, уже вышитых работ. Они служат для вдохновления начинающих мастериц.
Каждая страница содержит гиперссылки для удобного перехода по ним. Изображения разработанных страниц представлены в приложении А.
Заключение
Таким образом, мы изучили возможности языка HTML для создания Web-страниц. Узнали какие HTML - редакторы лучше использовать в Web-дизайне, каковы преимущества и недостатки тех или иных программных пакетов.
Поняв принцип построения Web-страницы, изучив возможности соединения в ней различных видов информации, мы можем смело сказать, что Web-страницы с их потенциалом могут применяться для различных целей.
Web-страница – это лицо той фирмы, того учреждения, человека, который разместил ее в интернете. Именно поэтому сегодня Web-дизайну уделяется такое огромное внимание. От него на прямую зависит популярность того или иного информационного ресурса сети. Недаром сейчас профессия Web-дизайнера является одной из самых высокооплачиваемых.
Человек, создающий Web-страницу, соединяет свои знания и навыки со своим творческим потенциалом. Умение творить – вот что отличает настоящего Web-дизайнера. Для того чтобы создать Web-страницу, которая бы радовала глаз, нужно сочетать в себе качества художника и программиста.
В результате проведенных работ на базе выбранных технологий был создан прототип современного web-сайта.
БИБЛИОГРАФИЧЕСКИЙ СПИСОК
Стивен Шафер HTML, XHTML и CSS. Библия пользователя / 5-е издание. М.: Диалектика, 2011. – 656с.
Учебник HTML / HTML.net. Режим доступа: http://ru.html.net/tutorials/html/lesson1.php, свободный.
Что нужно для создания хорошего сайта / administrating. Режим доступа:http://www.administrating.ru/chto_nuzhno_znat_dlja_sozdanija_khoroshjego_sajta/