Web страница документ html представляет собой. Создание первой веб-страницы

HTML - Hyper Text Markup Language. Web-страница (документ HTML) представляет собой текстовый файл на языке HTML формата *.htm или *.html, размещенный в World Wide Web (WWW). WWW - Всемирная Паутина, распределенная система доступа к гипертекстовым документам, существующая в Интернете. Web-страница кроме текста может содержать гипертекстовые ссылки, при помощи которых можно переходить к другим Web-страницам и просматривать их. Web-страница может содержать вставки в виде графики, анимации, видеоклиппов и музыки. Для просмотра Web-страниц можно использовать, например, MicroSoft Internet Explorer или NetScape Navigator, или Opera (просмотрщик или броузер). Язык HTML позволяет: 1) Создавать и редактировать Web-страницы, в том числе свою домашнюю Web-страницу, которую можно затем разместить в Интернете; 2) Редактировать документы HTML, полученные из Интернета, так чтобы функционировали все внедренные в документ объекты (картинки, анимации и т.д.); 3) Создавать мультимедийные презентации, слайд-шоу, демонстрационные проекты, благодаря гипертекстовым ссылкам и возможности вставлять в документ HTML рисунки, диаграммы, анимации, видеоклипы, музыкальное и речевое сопровождение, текстовые спецэффекты (например, бегущая строка). Существуют три основных способа создания Web-страниц (или документов HTML): 1) Использование текстового редактора Блокнот (NotePad), встроенного в Windows, и просмотр результатов с помощью броузера. Этот самый простой способ рекомендуется начинающим. Технология этого способа создания Web-страницы такова: В редакторе Блокнот создается файл Web-страницы, который сохраняется с расширением *.htm. Затем этот файл загружается и просматривается программой Internet Explorer. Для вызова редактора Блокнот с целью редактирования файла Web-страницы во время ее просмотра в Internet Explorer, используется пункт меню Вид, Источник или В виде HTML. После сохранения файла и выхода из Блокнота для просмотра отредактированной страницы надо нажать клавишу F5 или кнопку "Обновить" в панели инструментов Internet Explorer. 2) Использование специальных редакторов документов HTML, например Hot Metal Light, Hot Dog Professional, MS Front Page, HTMLPad и др. 3) Использование редактора Word-97, где создается текст документа, который затем конвертируется в HTML-формат. Рассмотрим основные понятия языка HTML. 1. Элемент - это конструкция языка HTML, или контейнер, содержащий данные. Web-страница представляет собой набор элементов. 2. Тег - это стартовый и конечный маркеры элемента. Теги определяют границы действия элементов и отделяют элементы друг от друга. В тексте Web-страницы теги заключаются в угловые скобки, например: . Конечный тег всегда снабжается косой чертой: . 3. Гиперссылка - фрагмент текста, который является указателем на другой файл или объект. Гиперссылки позволяют переходить от одного документа к другому. 4. Фрейм - область гипертекстового документа со своими полосами прокрутки. 5. Апплет - программа, передаваемая на компьютер клиента в виде отдельного файла и запускаемая при просмотре Web-страницы. 6. Скрипт - программа, включенная в состав Web-страницы для расширения ее возможностей. 7. Загрузка (DownLoad) - копирование документа с Web-сервера на компьютер клиента. UpLoad - копирование документа c компьютера клиента на Web-сервер - используется при создании собственной Web-страницы (т.е. при ее опубликовании). Рассмотрим общую структуру типичного простейшего документа HTML: Комментарий Название документа Здесь расположен текст самого документа HTML. Просмотр простейшего документа HTML Дадим пояснения указанным тегам документа HTML. или - Комментарий к документу. Он игнорируется броузером. Комментарий не является обязательным и может отсутствовать. - идентификатор всего блока HTML-команд. - идентификатор заголовка документа HTML. - идентификатор заголовка окна просмотра. - этот непарный тег применяется для указания подробной информации о документе. - идентификатор HTML-команд документа для просмотра. Три основных тега , и передают броузеру основную информацию для идентификации и организации документа. Все указанные теги - парные, то есть каждый из них заканчивается конечным тегом с косой чертой. Все команды можно писать как с маленькой буквы, так и с большой. Рассмотрим теги форматирования текстового потока:

Идентификатор конца абзаца.
- идентификатор перевода строки. - идентификатор изображения горизонтальной линии. Эти теги одиночные, т.е. непарные, они не требуют тегов с косой чертой. Установка равноширинного шрифта. В конце нужен тег . Рассмотрим парные теги форматирования заголовков и подзаголовков документа: , , , , , . При этом заголовки будут выведены большими буквыми, причем размер букв у тега будет самый большой, у меньше, у еще меньше и т.д. Рассмотрим парные теги форматирования символов текста: - идентификатор полужирного шрифта. - идентификатор выделенного шрифта. - идентификатор курсива. - идентификатор подчеркивания. - идентификатор перечеркивания. - идентификатор равноширинного шрифта (телетайпного или курьера). - задает увеличенный размер шрифта. - задает уменьшенный размер шрифта. - задает центрирование текста. - задает нижний индекс. Пример: x1+x2=x3 - задает верхний индекс. Пример: Теорема Пифагора a2+b2=c2 Просмотр примера с тегами форматирования текстового потока. Рассмотрим теги форматирования абзацев:

Выравнивание текста в абзаце по левому краю.

Выравнивание текста в абзаце по правому краю.

Выравнивание текста в абзаце по центру.

Полное выравнивание по обоим краям экрана. align - атрибут выравнивания. Рассмотрим теги списков. Они являются способом наглядного отображения структурированной информации. Упорядоченные списки служат для отображения последовательных операций или алгоритмов. Броузер автоматически генерирует номера для каждого пункта в списке. - идентификатор упорядоченного списка. В конце . Неупорядоченные списки служат для составления перечней, когда порядок следования пунктов несущественен. Перед каждым элементом будет стоять специальный списочный значок (точка).

    - идентификатор неупорядоченного списка. В конце
. Отдельные элементы в упорядоченном и неупорядоченном списках помечают одиночным тегом
  • , а элементы в списках определений тегами для термина и для значения термина.
  • - идентификатор элемента в упорядоченном и неупорядоченном списке. Конечный тег
    • может быть опущен. Списки определений обеспечивают специальное форматирование, как в словарях, для терминов и связанных с ними описаний. - идентификатор списка определений. В конце . - идентификатор термина в списке определений. - идентификатор значений термина в списке определений. Списки определений имеют вид: название термина 1 определение термина 1 другое определение термина 1 ..... Применение тегов списков изложено в Примерах 4 и 5. Просмотр примера с тегами списков. Некоторые важнейшие теги HTML - задает цвет текста (text), цвет фона (bgcolor) и цвет гипертекстовой ссылки (link). Задают еще alink="" и vlink="" -цвета активной и посещенной ссылки. - задает фоновый рисунок (обои) на Web- странице в файле back.jpg. - фоновый рисунок (обои) взят из файла tartan.bmp, причем указан путь этого файла. - задает цвет символов текста (атрибут color) и их размер (атрибут size). В конце нужен тег . - задает цвет горизонтальной линии. - атрибут size=N задает толщину линии в пикселах; атрибут width=M задает длину линии в пикселах; атрибут align=center (или left, или right) задает смещение линии (ее размещение в центре, или смещение влево, или вправо). - вставка графического изображения в виде файла lycos.gif. Есть и анимационные gif-файлы. Можно также использовать и графические файлы формата *.jpg (или *.jpeg), *.bmp.

    Создать качественную web-страницу непросто, для этого нужны не только навыки дизайнера для красивого и стильного оформления, но и опыт программирования. Сложность и объем программ, требуемых для создания того или иного сайта, зависят от множества факторов, таких как структура, цель, функциональность, обеспечение надежности и система защиты сайта от информационных атак со стороны информации-«прилипалы» (спам, мусор) и вирусов.

    Web-технология (технология гипертекста) позволила связать всю совокупность опубликованных в Интернете документов в единую систему - WWW. Гипертекстовый документ содержит гиперссылки. Их обычно выделяют цветом и подчеркиванием. Гиперссылки позво­ляют пользователю немедленно перейти к нужному документу, неза­висимо от места его физического расположения. Это существенно облегчает поиск информации в Интернете.

    Использование гипертекстовой разбивки текстового документа в современных информационных системах во многом связано с тем, что гипертекст дает возможность создавать механизм нелинейного просмотра информации. В таких системах данные представляются не в виде непрерывного потока текстовой информации, а набором взаи­мосвязанных компонентов, переход по которым осуществляется с по­мощью гиперссылок.

    Если говорить о создании документов HTML , то можно представить себе два способа их формирования.

    Первый состоит в разметке существующего (или создаваемого) документа вручную. При этом автор или редактор добавляет в документ теги раз­метки. Эту работу можно выполнять в текстовом редакторе или редакторе HTML, имеющем специальные элементы управления для упрощения ввода тегов. В обоих этих случаях работа ведется средствами языка HTML, и человек, выполняющий эту работу, должен знать и уметь применять этот язык.

    Принципы другого подхода можно понять на основе изучения работы текстовых процессоров. Информацию о форматировании документа также можно рассматри­вать как «разметку», добавляемую в форматируемый документ. Однако для исполь­зования текстового процессора не требуется никаких знаний о формате документа и «языке разметки»: изменения, отображаемые на экране, вносятся в документ авто­матически. Такой принцип соответствия экранного изображения реальному получил название WYSIWYG (вайсевег) (от английского What You See Is What You Get (воч ю си ис воч ю гат) - Что видите, то и получаете).

    Они позволяют создавать целые web-узлы (порталы) и используют все современные технологии. Такие web-редакторы вполне подходят и профессионалам. Если вы пользуетесь MS Office, то можете исполь­зовать FrontPage из этого комплекта. Есть также Netscape Composer в составе Netscape Communicator. Можно также воспользоваться де­монстрационной версией web-редактора Macromedia HomeSite, получив ее на официальном сайте компании Adobe: www.adobe.com.



    Первый способ позволяет создавать более универсальные, более качественные и более разнообразные документы. Второй способ проще освоить, так как он не тре­бует знания языка HTML. Однако в этом случае используются средства формати­рования вместо средств описания, что может иногда приводить к нежелательным последствиям.

    Итак, для создания web-страниц вам понадобится текстовый или web- редактор. Надо отметить, что все web-редакторы обязательно содержат и текстовый редактор, web-редакторов сейчас существует большое количество, но самыми мощными признаны три:

    1. Macromedia Dreamweaver (макромедиа дримвиваф);

    2. Allaire HomeSite (аллер хом сайт);

    3. Microsoft FrontPage (майкрософт фонт пейдж).

    Они позволяют создавать целые web-узлы (порталы) и используют все современные технологии. Такие web-редакторы вполне подходят и профессионалам. Если вы пользуетесь MS Office, то можете исполь­зовать FrontPage из этого комплекта. Есть также Netscape Composer в составе Netscape Communicator. Можно также воспользоваться де­монстрационной версией web-редактора Macromedia HomeSite, получив ее на официальном сайте компании Adobe (эдоби): www.adobe.com. С помощью браузера следует зайти на указанный сайт в раздел Down­loads/Trial Downloads и выбрать Macromedia, HomeSite.

    Можно воспользоваться русской версией FrontPage Express из локализованного Internet Explorer - это сокращенный вариант FrontPage, но очень удобен для начала. На русском языке также известен web-редактор Visual Workshop (http://www.snkey.net/ download /products /index.html).

    Современные сервисы в Интернете предлагают готовые конструк­торы сайтов. Рассмотрим их на примере конструктора сайтов «Мой сайт» (www.narod.yandex.ru). С его помощью можно получить место под свой сайт (домашнюю страницу) и за 5 мин создать свой web-сайт с картинками, фотографиями и пр.

    Процесс конструирования сайта включает в себя три этапа:

    1. вход в конструктор сайта;

    2. регистрация, назначение имени сайта;

    3. конструирование сайта с использованием заготовок.

    Для создания рукотворного сайта, единственного в своем роде, требуются иные web-инструменты.

    Помимо HTML и конструкторов сайтов можно пользоваться и другими средствами программирования web-страниц. Одним из средств программирования сайтов является CGI (си джи ай) (Common Gateway, комон гейтвай).

    Принцип CGI прост и есте­ственен: программа на стороне сервера принимает некие данные, обрабатывает их и выдает ответ в виде web-страницы. Это очень частое явление на сегодняшний день, и порой даже не подозреваешь, что имеешь дело не с обычной страницей, а с результатом работы CGI-скрипта (кода). Область использования CGI широка, а цели разнообразны. Язык программирования, на котором пишется скрипт, должен быть гибким и в то же время мощным, так как предстоит не только постоянная работа с файлами, но и с БД, ОС и web-сервером. Самыми подходящими языками для CGI-программирования явля­ются Си (C++) и Perl. Последний наиболее часто используется для этих целей из-за своей простоты, надежности и широты возмож­ностей.

    Язык Си по праву считается универсальным и нашел свое место в среде CGI. Его применение естественно в родной стихии - Unix, на основе которой в большинстве случаев и строится web-узел.

    Для CGI-программирования используется также язык C++, который подразумевает создание и уничтожение неких объектов, реализуемых через классы, - по сути пользовательских типов данных. Естественно создать, например, класс Guestbook или DataBaseEntry, который со­держал бы необходимые переменные и функции. Стоит заметить, что почти все новые языки программирования (Java, JavaScript, Perl) со­держат конструкции, схожие с конструкциями Си или же являющие­ся их точными копиями. Поэтому рекомендуется сначала изучить именно этот фундаментальный язык.

    Язык Perl уникален. Во-первых, в нем отсутствуют типы данных, что благоприятно воздействует на написание CGI-скриптов. Во- вторых, очень много конструкций взято из Си. Надо отметить, что в Perl часто используются регулярные выражения, похожие на те, что применяются в сценариях Unix Shell. Имеется удобный цикл foreach и красивые, по сути, модификаторы выражений. Perl рас­полагает стандартной библиотекой, в которой есть функции поиска, работы с web-сервером, графикой и т.п. Из этого можно сделать вывод, что для программиста, знакомого с Unix, не составит труда изучить Perl. Для написания такой программы достаточно уметь работать с файлами из Perl и, немного, с переменными окружения web-сервера.

    Процесс создания Web-документов сродни программированию и так же подвер­жен ошибкам. Независимо от того, каким способом создается документ, следует регулярно проверять его соответствие замыслу, просматривая его в различных браузерах. Для художественной оценки получающейся страницы следует обратиться к независимому мнению.

    Вопросы для самоконтроля:

    1. Что означает понятие HTML-документ?

    2. Каковы преимущества этого вида документа?

    3. Что означает понятие «тэг»?

    4. Какие разновидности тэгов существуют?

    5. Что входит в состав объектов управления тэгами?


    www.univer.omsk.su/omsk/Edu/htmlbook/school/index2.htm

    http://dvo.sut.ru/libr/ite/i280levc/index.htm Ю.П. Левчук, Е.П. Охинченко, А.Д. Сотников, Т.А. Фоменко ИНФОРМАТИКА Часть 2 ИНТЕРНЕТ-ТЕХНОЛОГИИ


    1. Web-страница (документ HTML) представляет собой:

    а) текстовый файл с расширением.txt или.doc;

    б) текстовый файл с расширением.htm или.html;

    в) двоичный файл с расширением.com или.exe;

    г) графический файл с расширением.gif или.jpg.

    2. Для просмотра Web-страниц в Интернете используются программы:

    а) Microsoft Word или Word Pad;

    б) Microsoft Access или Microsoft Works;

    в) Internet Explorer или NetScape Navigator;

    г) HTMLPad или Front Page.

    3. Тег – это:

    а) инструкция браузеру, указывающая способ отображения текста ;

    б) текст, в котором используются спецсимволы;

    в) указатель на другой файл или объект;

    г) фрагмент программы, включённой в состав web-страницы.

    4. Гипертекст – это:

    а) текст очень большого размера

    б) текст, в котором используется шрифт большого размера

    HTML (HyperText Markup Language) - это специальный язык форматирования текстовых документов (его еще называют языком разметки документов - программа просмотра WWW документов). HTML представляет собой достаточно простой набор команд, которые описывают структуру документа. HTML позволяет выделить в тексте отдельные логические части (заголовки, абзацы, списки и т.д.), поместить на Web-страницу отдельно подготовленную фотографию или картинку, организовать на странице ссылки для связи с другими документами.

    HTML не задает конкретные и точные атрибуты форматирования документа, как, например, Microsoft Word. Конкретный вид документа окончательно определяет только программа-браузер на Вашем компьютере. Необходимость именно такого подхода связана с разнородностью аппаратного и программного обеспечения компьютеров, подключенных к Интернет. HTML также не является языком программирования, но web-страницы могут включать в себя встроенные программы-скрипты на языках Javascript и Visual Basic Script и программы-апплеты на языке Java.

    С точки зрения пользователя Windows, Web-страница – это просто файл типа *.htm или *.html, находящийся на сервере Интернет, в локальной сети или на жестком диске Вашей машины.

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

    Все теги в HTML делятся на два типа – это парные и непарные. Парными считаются те, у которых открывающийся тег требует наличия закрывающегося тега. Закрывающиеся теги в html обозначаются слешем и пишутся так . Непарные же теги не требуют закрывающегося тега. Примером таких тегов являет тег переноса на следующую строку
    . Так же существуют теги обязательные, которые должны обязательно использоваться на всех страницах, и необязательные, которые используются пожеланию.

    Когда вы загружаете из WWW хоть какой документ, то его текст в окне вашего браузера отображается в отлично отформатированном, комфортном для просмотра виде. Это означает, что WEB странички представляют собой не обычный текст, а содержат также некую вспомогательную информацию для управления представлением документа в окне вашего браузера. Так как при разработке документа не понятно, на компьютере какого типа пользователь будет его просматривать, то WEB странички не могут готовиться и храниться в формате, разработанном для определенной компьютерной платформы, к примеру, в формате Microsoft Word для Windows ХР. Для того, чтоб пользователь, работающий на компьютере хоть какого типа, лицезрел документ, отформатированный соответствующим образом, употребляется разработанный специально для этого язык HTML.

    Что все-таки представляет собой язык HTML?

    Если вы работаете с браузером , то изберите команду меню Вид - Просмотр HTML кода (View - Source). На дисплее появится окно с начальным кодом этой странички на языке HTML.

    В либо довольно надавить CTRL+U

    Вид WEB страничек в Интернет очень нередко изменяется. Но для нас на данный момент это не значительно.

    HTML - HyperText Markup Language (Язык разметки гипертекста)

    HTML - HyperText Markup Language (Язык разметки гипертекста) представляет собой достаточно обычный набор команд, описывающих структуру документа. Этот язык разметки позволяет выделить в документе отдельные логические части - заглавия, абзацы, таблицы, списки-перечисления и так далее, но не задает определенные атрибуты форматирования. Определенный вид форматирования определяет сам браузер при чтении документа, и конкретно браузер обеспечивает лучшее отображение WEB документа на вашем экране.

    Как ранее говорилось, создавать WEB странички можно при помощи особых программ-редакторов, автоматом генерирующих код HTML, работа с которыми не просит познания языка разметки. Но эти программки нередко ограничены в собственных способностях, содержат ошибки и часто делают нехороший HTML код, который работает не на всех платформах. Потому, если вы желаете серьезно освоить WEB дизайн и осознать принципы сотворения WEB документов, для вас не обойтись без познания основ языка HTML, тем паче, что создавать WEB странички на нем совершенно не тяжело. Может быть, это даже легче, чем освоить программку для сотворения HTML страничек.

    Язык HTML

    Язык HTML существует в нескольких вариантах, либо спецификациях. Как и версии программных товаров, спецификации пронумерованы: 2.0, 3.0, 3.2, 4.0. Любая следующая спецификация представляет собой расширение и дополнение предшествующей. Мы будем использовать конструкции последней спецификации HTML 4.0, которые поддерживаются последними версиями большинства всераспространенных браузеров.

    Документ в окне с кодом HTML - это текстовый документ специального формата. Все файлы этого формата имеют расширение HTML (.html), либо HTM (.htm). В документе HTML обыденный текст смешивается с элементами разметки, заключенными в угловые скобки < и >, к примеру, , , , . Такие элементы разметки именуются тегами. Теги бывают одиночными, открывающими и закрывающими и состоят из последующих вереницей в определенном порядке частей:

    • левой угловой скобки .

    Таким макаром, открывающий тег , стоящий сначала документа HTML и значащий его начало, состоит из имени HTML и двух угловых скобок < >, а тег , находящийся в конце WEB документа, не считая обозначенных частей содержит также знак слэш /, значащий закрывающий тег и указывающий на конец документа. Тег значит начало кода интегрированной в документ программы-сценария. Этот тег содержит, не считая имени script, атрибут language со значением "vbscript", значащий, что сценарий написан на языке vbscript.

    В тегах могут употребляться только знаки латинского алфавита, а в значениях атрибутов - любые знаки. Если в качестве значений атрибута употребляются, к примеру, знаки кириллицы, то они обязаны быть заключены в кавычки, к примеру, name="Раздел 1".

    Язык HTML не различает огромные и малые буковкы, так что теги , и эквивалентны. Но вот в 2010 году консорциум w3c, взявший на себя ответственность навести порядок в сфере спецификации HTML языка, в новейшей безотступно советует писать теги малеханькими знаками, и на другими словами весомые предпосылки. Потому дальше мы будем использовать написание тегов в нижнем регистре.

    Теги как база html

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

    Книжный Интернет-магазин Три Cтупеньки

    В таких случаях два тега и часть документа, заключенная меж ними, образуют блок, именуемый элементом HTML. Некие теги, к примеру, , являются одиночными и для их закрывающий тег не применяется. Такие теги сами по для себя являются элементами HTML.

    Большая часть тегов могут иметь один либо несколько атрибутов - характеристик, дающих дополнительную информацию о том, как браузер должен обрабатывать текущий тег. Но атрибутов может и не быть совсем. Атрибут тега состоит из имени, к примеру, align, знака равенства=и значения, которое задается строчкой знаков, к примеру, "center": align="center". Значения атрибутов обычно заключаются в кавычки. Но если эти значения употребляют только знаки латинского алфавита, числа и дефисы, то кавычки можно опустить, к примеру: align=center. Но опускать кавычки категорически не рекомендуется в силу ряда обстоятельств связанных с предстоящей интеграцией HTML с JavaScript и языками. Потому вырабатывайте привычку сходу писать атрибуты в кавычках.

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

    Каждый HTML документ имеет определенную структуру, которая смотрится последующим образом:

    …

    Структура HTML документа содержит последующие неотклонимые элементы:

    • теги и , которые отмечают начало и конец документа;
    • заголовок, ограниченный тегами и ;
    • тело, ограниченное тегами ….

    В заголовке, ограниченном тегами и , при помощи тегов … определяется заглавие документа, которое должно обрисовывать его содержимое и обычно содержит менее 5-6 слов. Это заглавие отображается браузерами в строке заголовка рабочего окна программки, а боты, составляющие индексы для поисковых машин, идентифицируют документ, используя его заглавие.

    Не считая элемента …, заголовок может содержать элементы …, к примеру, , для указания инфы о документе. Открывающий тег включает пары имя=значение, описывающие характеристики документа, к примеру, тип документа, его шифровку, авторство, перечень ключевиков и так далее Эти данные употребляются также поисковиками при индексации документов.

    Что такое web страница ? Это документ, написанный на языке разметки гипертекста (HTML ), который можно просмотреть с помощью браузера. Доступ к веб-странице осуществляется путем ввода URL-адреса .

    Веб-страница может содержать текст, графику и гиперссылки на другие страницы и файлы.

    Как открыть веб-страницу

    Для просмотра веб-страницы требуется браузер (например, Internet Explorer , Edge , Safari , Firefox или Chrome ). В браузере можно открыть веб-страницу, указав в адресной строке URL-адрес . Например, введя «https://www.computerhope.com/esd.htm », вы откроете страницу ESD Computer Hope .

    Если вы не знаете URL-адреса сайта, который хотите посетить, можно использовать поисковую систему, чтобы найти веб-страницу или воспользоваться поиском по сайту.

    Когда была создана первая веб-страница?

    Первая веб-страница была создана в CERN Тимом Бернерсом-Ли 6 августа 1991 года. Перед тем, вы можете посетить и просмотреть первый сайт и первую веб-страницу по адресу http://info.cern.ch/ .

    В чем разница между сайтом и веб-страницей?

    Сайт — это место, содержащее более одной веб-страницы. Например, наш ресурс является сайтом, который включает в себя тысячи различных веб-страниц, включая ту, которую вы сейчас читаете:

    В приведенном выше примере URL-адреса «url.htm» — веб-страница, это всегда последняя часть URL-адреса . Для URL , которые не имеют окончаний .htm , .html , .php , .cgi , .pl или другого расширения файла, сервер загружает веб-страницу index.htm по умолчанию. Например, для URL-адреса страницы контактов нет веб-страницы. В этом случае загружается индексный файл по умолчанию из каталога /contact .

    Примеры веб-страницы

    Мы уже упоминали, что для просмотра web страниц используются браузеры. Веб-страница состоит из нескольких элементов, включая CSS , изображения и JavaScript . Тело веб-страницы создается с использованием HTML . Этот код может быть создан с использованием HTML-редактора, написан человеком или сгенерирован с использованием серверных скриптов. Обычно веб-страница, созданная человеком, заканчивается расширением .htm или .html . Например, эта страница имеет имя файла «webpage.htm ». Страницы, сгенерированные скриптом, могут заканчиваться на .cgi , .php , .pl и т.д.

    Какие элементы содержит веб-страница?

    Ниже приведена разбивка основных элементов, чтобы веб-дизайнеры могли понять, какова логическая структура web страницы :

  • Название сайта, логотип или название компании почти всегда находятся в верхнем левом углу каждой веб-страницы. Также неплохо использовать слоган или краткое описание страницы, чтобы дать новым посетителям представление о сайте. Этот элемент веб-страницы обычно является ссылкой, которая ведет на главную страницу;
  • Панель поиска позволяет посетителям быстро найти веб-страницу. Она должна присутствовать на каждой странице;
  • Панель или меню навигации обычно находится в верхней или левой части каждой веб-страницы. Она и должна включать в себя ссылки на каждый из основных разделов сайта;
  • Рекламные баннеры могут отображаться в разных местах на веб-странице. Обычно они отображаются в верхней, левой, правой или нижней части веб-страницы или включены в основной контент;
  • Социальные кнопки позволяют посетителям делиться ссылкой на веб-страницу на сайтах социальных сетей;
  • В созданных web страницах хлебные крошки помогают посетителю понять, где он находится, а также перейти к другим разделам сайта;
  • Заголовок должен находиться в верхней части каждой веб-страницы. Он создается с использованием HTML-тега .
  • Начальный абзац является одним из наиболее важных элементов веб-страницы. Он должен заинтересовать посетителя ознакомиться с содержимым веб-страницы. Один из способов привлечь внимание посетителей — вставить изображение рядом с начальным абзацем;
  • Каждая веб-страница должна быть разбита на заголовки более низкого уровня, которые позволяют посетителю легко просматривать контент и находить на странице то, что ему наиболее интересно. При создании веб-страницы это можно сделать с помощью HTML-тегов … ;
  • Хорошая идея — предоставить посетителям ссылку или кнопку, перенаправляющую на форму обратной связи, чтобы они могли сообщить, была ли полезна им данная веб-страница или нет;
  • Дополнительная информация и инструменты, такие как кнопка для вывода страницы на печать, также могут быть полезны для пользователей;
  • Футер должен включать в себя дополнительную информацию, которая важна для компании или сайта. А также ссылки на другие веб-страницы;
  • Копирайт и любое юридическое или конфиденциальное уведомление также должны быть размещены на всех веб-страницах. В основах проектирования web страниц этот элемент не только может ссылаться на соответствующую юридическую информацию. Он также указывает, что посетители достигли конца веб-страницы;
  • Кнопка «Вверх страницы » может помочь посетителям быстро вернуться к верхней части веб-страницы, чтобы получить доступ к ссылкам меню.
    • Что пользователи могут сделать на веб-странице?

    На большинстве веб-странице есть интересные гиперссылки, по которым вы переходите, чтобы найти дополнительную информацию. Также можно слушать музыку, смотреть видео, совершать покупки, общаться и многое другое.

    Похожие статьи