Web страница представляет собой текстовый файл с расширением htm

Обновлено: 03.07.2024

Файлы с расширением HTM или HTML – это файлы на языке разметки гипертекста ( Hypertext Markup Language ), являющиеся стандартными веб-страницами.

Поскольку HTM-файлы – это текстовые файлы, они содержат только текст, а также текстовые ссылки на другие внешние файлы. Например, на картинки в этой статье.

HTM и HTML-файлы могут содержать ссылки на другие типы файлов – например, видео, CSS или JS-файлы .

Изучаем формат HTML: чем открыть

Любой браузер, как, например, Internet Explorer , Firefox , Chrome , Opera и т.д., будет открывать и корректно отображать HTM и HTML-файлы .

Существует много программ, разработанных для того, чтобы сделать редактирование и создание HTM/HTML-файлов проще. Наиболее популярными редакторами являются Eclipse , Komodo Edit , и Bluefish .

Еще одним популярным редактором с огромным количеством дополнительных возможностей является Adobe Dreamweaver , однако он не доступен для свободного использования.

Также можно использовать простой текстовый редактор, чтобы вносить изменения в HTM или HTML-файл . Notepad++ – возможно, лучший вариант. « Блокнот », входящий в состав операционной системы Windows тоже работает с HTML-файлами . Но он был разработан для решения других задач. Поэтому перед тем, как открыть HTML файл , нужно привыкнуть к его особенностям.

Как конвертировать в HTM и HTML-файлы

Структура HTM-файлов построена особым образом и имеет весьма специфичный синтаксис. Это сделано для того, чтобы код и текст внутри него при открытии в браузере отображались должным образом.

Поэтому конвертация HTM или HTML-файла в другой формат приведет к потере веб-страницы. Но если вы хотите конвертировать HTM или HTML-файл в другой формат для более удобного просмотра, например, в картинку или PDF-файл , то это делается очень просто.

Чтобы конвертировать веб-страницу в PDF в браузере Google Chrome , в меню « Печать » выберите пункт « Сохранить как PDF ».

Также для браузера Google Chrome доступно расширение Full Page Screen Capture . Оно конвертирует открытый в браузере файл в формат PNG . Другие браузеры также имеют похожие инструменты и расширения.

Помимо этого можно использовать специальные сервисы, предназначенные для конвертации HTM/HTML-файлов , – такие как iWeb2Shot , Convert Webpage , или Web-capture .

Примечание : Важно понимать, что нельзя конвертировать HTM/HTML-файл в любой другой формат, отличный от текстового. Например, он не может быть преобразован в аудиофайл формата MP3 .

HTM vs HTML: в чем разница?

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

Помимо буквы « L », разумеется…

Короткий ответ : разницы нет.

Длинный ответ : разницы нет, но будьте внимательны, используя то или иное расширение.

Раньше, во времена MS-DOS , расширения файлов были ограничены тремя буквами. В течение относительно короткого периода времени, когда в мире господствовало и HTM , а HTML не существовало.

На сегодняшний день полностью приемлемы веб-страницы, которые оканчиваются как на HTM , так и на HTML .

Сервер, на котором размещается веб-страница, может потребовать использовать определенного расширения HTML файла. Например, index.html либо index.htm . Если вы не уверены в том, какое расширение применять, обратитесь к своему хостинг-провайдеру.

Дайте знать, что вы думаете по данной теме материала в комментариях. Мы крайне благодарны вам за ваши комментарии, отклики, дизлайки, подписки, лайки!

Пожалуйста, оставляйте ваши мнения по текущей теме статьи. Мы крайне благодарны вам за ваши комментарии, лайки, дизлайки, подписки, отклики!

13. Для создания Web-страниц используется эта программа:
а) Блокнот +
б) ScanDisk
в) QBasic

14. Для создания Web-страниц используется эта программа:
а) MS FrontPage +
б) Defrag
в) Turbo Pascal

15. Они используются для разбивки окна браузера на несколько областей, каждая из которых представляет собой отдельный HTML-документ:
а) фреймы +
б) гиперссылки
в) контейнеры

16. Для выравнивания текста в документе используется атрибут:
а) src
б) align +
в) valign

17. Тэг может быть:
а) главным
б) основным
в) закрывающим +

18. Тэг может быть:
а) автономным
б) одиночным +
в) вспомогательным

19. Тэг может быть:
а) четким
б) авторитетным
в) парным +

22. Сайт можно создать, воспользовавшись:
а) языком программирования Си
б) языком разметки гипертекста HTML +
в) электронными таблицами

23. Кто занимается проектированием структуры wеb-сайта:
а) wеb-программист
б) системный администратор
в) wеb-дизайнер +

24. При наполнении страниц сайта информационными материалами не следует:
а) избегать слишком длинных текстов
б) использовать пестрый фон +
в) применять краткие названия пунктов

25. Как называется услуга размещения сайта на сервере, постоянно находящемся в сети Интернет:
а) моделинг
б) адаптация
в) хостинг +

26. Как называют схему страницы, на которой представлены элементы, имеющиеся на страницах сайта:
а) хостинг
б) шаблон +
в) браузер

27. Как можно создать сайт:
а) сохранив документ в формате HTML +
б) с помощью электронных таблиц
в) воспользовавшись языком программирования Си

28. Чтобы отличать теги от текста, их заключают в:
а) фигурные скобки
б) квадратные скобки
в) угловые скобки +

29. При наполнении страниц сайта информационными материалами не следует:
а) ставить точку в названиях страниц, если они состоят из одного предложения +
б) применять краткие названия пунктов
в) избегать слишком длинных текстов

30. Недостаток бесплатного хостинга:
а) доменное имя
б) коммерческая реклама от поставщика услуги +
в) отсутствие вариантов размещения

HTML - Hyper Text Markup Language.

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

на языке HTML формата *.htm или *.html, размещенный в World Wide

Web (WWW). WWW -Всемирная Паутина, распределенная система доступа

к гипертекстовым документам, существующая в Интернете. Web-стра-

ница кроме текста может содержать гипертекстовые ссылки, при по-

мощи которых можно переходить к другим Web-страницам и просматри-

вать их. Web-страница может содержать вставки в виде графики,

анимации, видеоклиппов и музыки. Для просмотра Web-страниц можно

использовать, например MicroSoft Internet Explorer или NetScape

Navigator (просмотрщик или броузер).

Язык HTML позволяет: 1) Создавать и редактировать Web-страницы,

в том числе свою домашнюю Web-страницу, которую можно затем раз-

местить в Интернете; 2) Редактировать документы HTML, полученные

из Интернета, так чтобы функционировали все внедренные в документ

объекты (картинки, анимации и т.д.); 3) Создавать мультимедийные

презентации, слайд-шоу, демонстрационные проекты, благодаря ги-

пертекстовым ссылкам и возможности вставлять в документ HTML ри-

сунки, диаграммы, анимации, видеоклипы, музыкальное и речевое

сопровождение, текстовые спецэффекты (например, бегущая строка).

Существуют три способа создания Web-страниц (или документов HTML):

1) Использование текстового редактора Блокнот (NotePad), встроен-

ного в Windows, и просмотр результатов с помощью броузера. Этот

самый простой способ рекомендуется начинающим. Технология созда-

ния Web-страницы такова:

В редакторе Блокнот создается файл Web-страницы, который сохра-

няется с расширением *.htm. Затем этот файл загружается и прос-

матривается программой Internet Explorer. Для вызова редактора

Блокнот с целью редактирования файла Web-страницы во время ее

просмотра в Internet Explorer, используется пункт меню Вид, Ис-

точник. После сохранения файла и выхода из Блокнота для просмот-

ра отредактированной страницы надо нажать клавишу F5 или кнопку

"Обновить" в панели инструментов Internet Explorer.

2) Использование специальных редакторов документов HTML, например

Hot Metal Light, Hot Dog Professional, MS Front Page, HTMLPad и др.

3) Использование WinWord 97, где создается текст документа, кото-

рый затем конвертируется в HTML-формат.

Рассмотрим основные понятия языка HTML.

1. Элемент -это конструкция языка HTML, или контейнер, содержащий

данные. Web-страница представляет собой набор элементов.

2. Тег - это стартовый и конечный маркеры элемента. Теги опреде-

ляют границы действия элементов и отделяют элементы друг от друга.

В тексте Web-страницы теги заключаются в угловые скобки, например:

<HTML>. Конечный тег всегда снабжается косой чертой: </HTML>.

3. Гиперссылка - фрагмент текста, который является указателем на

другой файл или объект. Гиперссылки позволяют переходить от одно-

го документа к другому .

4. Фрейм - область гипертекстового документа со своими полосами

5. Апплет - программа, передаваемая на компьютер клиента в виде

отдельного файла и запускаемая при просмотре Web-страницы.

6. Скрипт - программа, включенная в состав Web-страницы для рас-

ширения ее возможностей.

7. Загрузка (DownLoad) - копирование документа с Web-сервера на

компьютер клиента. UpLoad - копирование документа c компьютера

клиента на Web-сервер - используется при создании собственной

Рассмотрим общую структуру типичного простейшего документа HTML:

Здесь расположен текст самого документа HTML.

Дадим пояснения указанным тегам документа HTML.

<COMMENT> или  - Комментарий к документу. Он игнорируется

броузером. Комментарий не является обязательным и может отсутствовать.

<HTML> - идентификатор всего блока HTML-команд.

<HEAD> - идентификатор заголовка документа HTML.

<TITLE> - идентификатор заголовка окна просмотра.

<META> - этот непарный тег применяется для указания подробной

информации о документе.

<BODY> - идентификатор HTML-команд документа для просмотра.

Три основных тега <HTML>, <HEAD> и <BODY> передают броузеру ос-

новную информацию для идентификации и организации документа.

Все указанные теги - парные, то есть каждый из них заканчивается

конечным тегом с косой чертой.

Все команды можно писать как с маленькой буквы, так и с большой.

Рассмотрим теги форматирования текстового потока:

<P> - идентификатор конца абзаца.

<BR> - идентификатор перевода строки.

<HR> - идентификатор изображения горизонтальной линии.

Эти теги одиночные, т.е. непарные, они не требуют тегов с косой

<PRE> - установка равноширинного шрифта. В конце нужен тег </PRE>.

Рассмотрим парные теги форматирования заголовков и подзаголовков

будут выведены большими буквыми, причем размер букв у тега <H1>

будет самый большой, у <H2> меньше, у <H3> еще меньше и т.д.

Рассмотрим парные теги форматирования символов текста:

<B> - идентификатор полужирного шрифта.

<strong> - идентификатор выделенного шрифта.

<i> - идентификатор курсива.

<U> - идентификатор подчеркивания.

<s> - идентификатор перечеркивания.

<tt> - идентификатор равноширинного шрифта (телетайпного или

<big> - задает увеличенный размер шрифта.

<small> - задает уменьшенный размер шрифта.

<CENTER> - задает центрирование текста.

<sub> - задает нижний индекс.

<sup> - задает верхний индекс.

Рассмотрим теги форматирования абзацев:

<p align=left> - выравнивание текста в абзаце по левому краю.

<p align=right> - выравнивание текста в абзаце по правому краю.

<p align=center> - выравнивание текста в абзаце по центру.

<p align=justify> - полное выравнивание по обоим краям экрана.

align - атрибут выравнивания.

Рассмотрим теги списков.

Они являются способом наглядного отображения структурированной

Упорядоченные списки служат для отображения последовательных

операций или алгоритмов. Броузер автоматически генерирует номера

для каждого пункта в списке.

<OL> - идентификатор упорядоченного списка. В конце </OL>.

Неупорядоченные списки служат для составления перечней, когда

порядок следования пунктов несущественен. Перед каждым элементом

будет стоять специальный списочный значок (точка).

<UL> - идентификатор неупорядоченного списка. В конце </UL>.

Отдельные элементы в упорядоченном и неупорядоченном списках

помечают одиночным тегом <LI>, а элементы в списках определений

<DL> тегами <DT> для термина и <DD> для значения термина.

<LI> - идентификатор элемента в упорядоченном и неупорядоченном

списке. Конечный тег </LI> может быть опущен.

Списки определений обеспечивают специальное форматирование, как

в словарях, для терминов и связанных с ними описаний.

<DL> - идентификатор списка определений. В конце </DL>.

<DT> - идентификатор термина в списке определений.

<DD> - идентификатор значений термина в списке определений.

Списки определений имеют вид:

<DT> название термина 1

< DD> определение термина 1

<DD> другое определение термина 1

Применение тегов списков изложено в Примерах 4 и 5.

Некоторые важнейшие теги HTML

<BODY bgcolor="teal" text="aqua" link="red"> - задает цвет текста

(text), цвет фона (bgcolor) и цвет гипертекстовой ссылки (link).

Задают еще alink="" и vlink="" -цвета активной и посещенной ссылки.

<BODY background="back.jpg"> - задает фоновый рисунок (обои) на Web-

странице в файле back.jpg.

<BODY background="/windows/tartan.bmp"> - фоновый рисунок (обои)

взят из файла tartan.bmp, причем указан путь этого файла.

<font color="yellow" size=5> - задает цвет символов текста (атрибут

color) и их размер (атрибут size). В конце нужен тег </font>.

<hr color="lime"> - задает цвет горизонтальной линии.

<hr color="red" size=3 width=220 align=center> - атрибут size=N

задает толщину линии в пикселах; атрибут width=M задает длину линии

в пикселах; атрибут align=center (или left, или right) задает смеще-

ние линии (ее размещение в центре, или смещение влево, или вправо).

<IMG SRC="lycos.jpg"> - вставка графического изображения в виде

файла lycos.jpg. Есть и анимационные gif-файлы. Можно также ис-

пользовать и графические файлы формата *.jpg (или *.jpg), *.bmp.

Пример графического файла lycos.jpg, вставленного в документ HTML:

<IMG SRC="echomsk.jpg" width="403" height="263"> - если при вставке

изображения использованы атрибуты width и height, то при загрузке

изображения броузер покажет сперва рамку, где должно быть изображе-

ние, а затем уже само изображение, поскольку оно загружается дольше.

Таким образом резервируется место на экране под изображение.

Атрибут width задает ширину изображения в пикселах.

Атрибут height задает высоту изображения в пикселах.

<img src="/html/animat/iexplor.jpg"> - вставка графического

изображения в виде файла iexplor.jpg, причем указан полный путь

графического файла на диске: с:\html\animat\iexplor.jpg.

<img src="http://presfiz.narod.ru/edu/scene.jpg" border=3 alt="Картина"> - атрибут border

задает рамку по периметру изображения толщиной 3 пиксела. Атрибут

Alt дает текст на месте рамки, если изображения нет.

Атрибут border=0 используется, чтобы убрать рамку вокруг рисунка.

Это необходимо, например, при использовании анимированных *.jpg на прозрачной основе.

Здесь атрибут hspace=5 обеспечивает плавное обтекание рисунка текстом.

Он задает ширину незаполненного пространства справа и слева от рисунка в пикселях.

Атрибут align="left" обеспечивает размещение рисунка слева.

<a href="EXCITE.HTM">EXCITE.HTM</a> - гипертекстовая ссылка, пе-

реход к файлу EXCITE.HTM.

<a href="C:\book\book.inf">BOOK.INF</a> - гипертекстовая ссылка,

переход к файлу BOOK.INF. При запуске броузера следует указать про-

При работе в Интернете, в отличие от локального компьютера, сле-

дует различать файлы с большими и с маленькими буквами в имени и

расширении. Должно быть полное соответствие между именами файлов

по размеру каждой буквы в имени и расширении, указанными в ги-

перссылке и лежащими на сервере, иначе гиперссылки не будут рабо-

тать. Для облегчения работы можно задавать цифровые имена файлов

(цифры всегда одного размера).

гипертекстовая ссылка, переход в Интернете к Web-странице.

Нажмите здесь: <a href="zinn.jpg"><img src="globe.jpg" border="3"></a> -

гипертекстовая ссылка в виде изображения globe.jpg, переход к просмотру

адрес электронной почты. При нажатии происходит вызов почтовой

программы и указанный адрес вводится в пункт Кому.

<EMBED SRC="Welcome.avi" Wid th=280 Height=140 autostart=true> - вставка

объекта в документ HTML. В данном случае это мультимедийный файл *.avi,

причем при загрузке страницы происходит автозапуск этого файла, размеры

которого на экране заданы атрибутами Width и Height.

Если документ HTML большой, то внутри него делают переходы по

Создание бегущей текстовой строки (только для Internet Explorer):

Интернет - это окно в мир!</marquee>

Если текстовая строка должна бежать влево, то вместо right должно

быть слово left. Можно создать бегущую текстовую строку еще проще

(то есть без атрибутов, и она будет бежать влево):

Если текстовая строка должна бежать то влево, то вправо, то в теге

<marquee> используется атрибут behavior="alternate". Пример:

Цвет символов бегущей строки задается тегом <font color="">,

а цвет фона строки тегом <body bgcolor="">.

Для воспроизведения звука (файл *.mid) после загрузки документа HTML

в броузер (т.е. в фоновом режиме), надо записать следующую команду:

Можно также использовать файл формата *.wav. Число воспроизведений

музыки loop можно увеличить с 1 до n.

Список цветов символов HTML

(16 основных цветов)

aqua - бирюзовый; black - черный; blue - синий;

gray - серый; green - зеленый; lime - ярко-зеленый;

maroon - темно-красный; white - белый; navy - темно-синий;

olive - оливковый; purple - фиолетовый; red - красный;

silver - светло-серый; teal - ярко-голубой; yellow - желтый;

Кроме указанных основных цветов, есть дополнительные цвета:

brown - коричневый, orange - оранжевый, cyan - оттенок бирюзового,

pink - розовый и др. Всего до 216 цветов для Netscape Navigator.

Вместо указанных терминов для задания цвета можно использовать

Меняя RGB-коды, можно подбирать желаемые цвета текста и фона.

Редактор Web-страниц HTMLPad

Использование редактора HTMLPad значительно ускоряет и облегчает

процесс создания Web-страниц за счет использования кнопок в пане-

ли инструментов и меню. Например, кнопка New позволяет сразу соз-

дать бланк документа HTML, содержащий основные теги, кнопки H1-H6

создают теги форматирования заголовка, кнопки B, I, U, tt, PR за-

дают теги форматирования символов, кнопка BR - задает тег перево-

да строки, кнопка A^A задает тег цвета символов, пункт меню For-

mat, Center задает тег центрирования заголовка, Format, Paragraf

-конец абзаца, кнопка Tags содержит ряд полезных тегов, например

Adress, Sup, big. Коды цветов текста, фона и др. задаются кнопка-

ми с основными цветами. Кнопки и радиокнопки задаются в пункте

меню Insert, Submit Baton и Radio Baton. Тег BODY удобно редакти-

ровать с помощью пункта меню Insert, BODY. Теги списков вставля-

ются кнопками OL, UL, LI.

Таблицы создаются с помощью пункта меню Insert, Table, го-

ризонтальная линия с помощью пункта меню Insert, Horizontal Line

или с помощью кнопки и изображением семейства линий разной толщи-

ны. Есть стадартные для всех редакторов кнопки Save, Save As,

Open, Copy, Cut, Paste, Undo, облегчающие рутинные операции при

редактировании текста документа.

С помощью кнопок вставляются картинки (кнопка с изображением

фотоаппарата), создаются гиперссылки (адрес E-mail вставляется

кнопкой с изображением почтового конверта). Причем картинку можно

выбрать на диске с помощью кнопки обзора, но путь надо записывать

самому вручную. С помощью пункта меню Insert можно вставлять все

основные Формы, гиперссылку на адрес в Интернете, внедрять в до-

кумент Скрипты и Апплеты.

Для создания документа, содержащего Фреймы (окна с полосами

прокрутки), необходимо выбрать пункт меню Insert, Frameset. Затем

можно выбрать вертикальные (обозначаются cols) или горизонтальные

(обозначаются rows) фреймы Вы будете создавать. Затем указать в

процентах размеры окон. Затем после слов src="" указать в кавыч-

ках имена файлов HTML, которые будут показаны в окнах документа с

Файл документа сохраняется с расширением HTML (по умолчанию)

или HTM. Просмотр документа HTML производится в Internet Explorer

c помощью кнопки с иконкой этого броузера.

HTMLPad занимает на диске 1,3 Мб, работает в Windows-95/98.

Информация об HTMLPad содержится на сайте в Интернете:

Создание таблиц в HTML

Таблицы являются удобным средством форматирования данных в HTML.

Таблицу задает и определяет ее общие свойства тег <table></table>.

По горизонтали, например по центру, таблицу можно выровнять с

помощью тега <p align="center">, размещаемого перед <table>.

Тег <table> может иметь атрибуты:

<table border="5" width="100" ce llpadding="10" cellspacing="10">, где

border="5" - ширина боковой грани в пикселях. При нулевом зачении

рамка исчезает совсем.

width="100" - ширина таблицы в пикселях или

width="50%" -ширина таблицы в % по отношению к ширине страницы в окне.

cellspacing="10" - ширина фронтальной грани в пикселях.

cellpadding="10" - задает размер пустого пространства в пикселях,

окружающего данные в ячейке.

Тег <caption></caption> задает заголовок таблицы.

Тег <tr> задает строку таблицы. Следующий тег <tr> задает следующую

строку таблицы. Конечный тег необязателен.

Тег <td> задает ячейку таблицы. Следующий тег <td> задает следующую

ячейку таблицы. Конечный тег необязателен.

Цвет фона ячейки задается в теге <td>: <td bgcolor="yellow">

Непарный тег <th> - задает элемент ячейки, которая является

заголовком таблицы. Этот тег должен находиться внутри тега <tr>.

Ячейка-заголовок отличается от обычной тем, что текст внутри нее

выделяется полужирным шрифтом.

Цвет фона заголовка задается: <tr><th bgcolor="yellow">Заголовок 1.

Создание таблиц в HTML дано в следующих примерах.

<td bgcolor="yellow"><b>Петров М.H.

<title>Таблица 2, Экология.</title>

По какому URL будут отправлены данные, введенные в форме?

данный фрагмент HTML-кода не валиден, так как атрибут action содержит пустое значение

данные формы будут отправлены по URL , с которого загружена страница с формой

данные формы не будут отправлены никуда, так как атрибут action содержит пустое значение

Содержимое одного и того же HTML-документа отображается одинаково во всех браузерах.

Какой результат выполнения следующего кода?

ничего не будет выведено

возникнет синтаксическая ошибка

Что делает функция include в php?

включает и выполняет указанный файл

записывает данные в файл

подключает файл как новую страницу

Какая из функций осуществляет подключение к СУБД MySQL:

mysql_connect()

Какие команды способны изменить цвет фона документа?

Каким тегом определяется маркированный список

< UL >… UL >

Раздел заголовка содержит

Информация содержимого документа

Служебную информацию не считающимся содержанием документа

Информация, которая содержится в окне браузера

С какой конструкции начинаются и заканчиваются все теги

С помощью какого тега определяется строка таблицы

Вариант 3

Специальная команда, записанная в угловых скобках

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

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

Фрагмент программы, включённой в состав Web-страницы

Гиперссылки на Web - странице могут обеспечить переход.

только в пределах данной web – страницы

только на web - страницы данного сервера

на любую web - страницу данного региона

на любую web - страницу любого сервера Интернет

Каким тегом определяется абзац текста?

Какой тег используется для организации списков?

В какой тег заключается основное содержание web-страницы?

< body > body >

Какой html -код задает вывод текста в две строки

< p > Информационные < br > технологии br > p >

HTML (HYPER TEXT MARKUP LANGUAGE) является :

Одним из средств при создании Web -страниц

Системой программирования

Графическим редактором

Системой управления базами данных

Способ организации информации на Web-сервере называется:

W eb-сайтом

Какие тэги помещают название документа в оглавление программы просмотра web-страниц?

< title > title >

< body > body >

< h 1> h 1>

< img src =” name ”>

Какие теги перечисленные ниже определяют блочные элементы:

Тег < U > позволяет задать:

подчеркнутый шрифт

моноширинный шрифт

полужирный шрифт

Назовите параметр, обязательный для тега < form >:

method

action

Какой из перечисленных тегов непригоден для открытия и закрытия PHP блока?

Что будет выведено в результате выполнения следующего кода?

AB D

Возникнет ошибка

Какая разница между равенством и эквивалентностью?

Знак эквивалентности используется только для строк, а знак равенства применим для всех типов

Знак равенства проверяет лишь значения операндов, а знак эквивалентности значения и их типы.

Знак эквивалентности проверяет лишь значения операндов, а знак равенства значения и их типы.

Никакой разницы нет

Каков результат выполнения у данного скрипта:

Переменная $ x = 5

Переменная 5 = 5

Переменная x = 5

Ошибка, поскольку строки с переменными должны быть в одинарных кавычках

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

задать значение атрибута value для

указать значение атрибута url в теге

задать значение атрибута action в теге

добавить атрибут enctype в тег

добавить атрибут method в тег

Какие тэги не обязательны в html документе в соответствии со спецификацией?

Какие из следующих пар операторов не являются противоположными?

Что такое контент сайта?

это оформление сайта

это статьи на сайте

это вся текстовая и графическая информация на сайте

Сколько байт займет строка «Привет» записанная в поле с типом VARCHAR(10)

Какая из трёх программ задаёт вывод текста в две строки:

Программа 1

Программа 2

Программа 3

Гавриков < BR >

Иван < BR > Гавриков

вторая

… - это особое деление страницы на раздельные области просмотра.

Фрейм

Каким тегом создаётся таблица

Сколько уровней заголовков содержит HTML документ

С помощью какого тега определяется ячейка таблицы

Вариант 4

Тег - это:

Идентификатор заголовка окна просмотра

Идентификатор заголовка документа HTML

Идентификатор перевода строки

Идентификатор HTML-команд документа для просмотра

Ссылка на адрес электронной почты задается тегом:

текст

Какие теги из перечисленных ниже определяют элементы-контейнеры?

Значение какого адреса может принять параметр HREF тега < A >?

IP адрес

Закладки (якорь с указанным именем)

электронной почты (с префиксом mailto:)

имя файла

В какой тег заключается название web-страницы?

< body > body >

Каким тегом задается вставка изображения на web-страницу?

Каким тегом задается метка на web-странице?

< font color =". ">

Тэг - это:

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

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

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

Фрагмент программы, включённой в состав Web-страницы

Какие теги определяют видимую часть документа?

< body > body >

< p > p >

< html > html >

< title > title >

Назовите параметр тега < BODY > , с помощью которого задается фоновое изображение для страницы:

bgcolor

alink

bgproperties

background

Тег < FT > позволяет задать:

курсив

подчеркнутый шрифт

моноширинный шрифт

полужирный шрифт

Тег разрыва строки:

Стандартный тег для открытия и закрытия PHP блока?

<?php ?>

Что будет выведено в результате выполнения следующего кода?

Возникнет ошибка

Есть строка: $str = "123456". Как из этой строки получить подстроку "5"?

$str[4];

$str[5];

$str[6];

$str[];

Что выведет данный скрипт:

111

000

123

333

Что верно о HTML-теге ? (выберете несколько вариантов)

тег не поддерживается ни одним из браузеров

тег не поддерживается всеми браузерами

тег задает текст нижней части окна (status bar)

тег создает бегущую строку

Выберите правильные варианты создания строковой переменной со значением "text"

var s = 'text';

var s = "t" . "ext";

var s = "text";

var s = text;

var s = new String('text');

Укажите все корректные типы данных в PHP.

varchar

char

float

complex

Где в основном применяется ActionScript?

в анимации

в работе с базой MySQL

для защиты форм от спама

Выберите верную тройку непарных тэгов:

,, a br>

Какие команды способны изменить цвет шрифта документа?

. ;

P >;

< BIG > . BIG >;

… - это набор связанных между собой близких по смыслу Web – страниц.

Web – приложение

Web – сайт

CGI – сценарий

… - это элемент, который предназначен для организации интерактивного режима работы с пользователем.

Форма

Фрейм

Тег

Какой тег не входит в элемент таблицы

Каким тегом определяется список определений

< UL >

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

Курс повышения квалификации

Дистанционное обучение как современный формат преподавания

Курс профессиональной переподготовки

Методическая работа в онлайн-образовании

Курс профессиональной переподготовки

Математика и информатика: теория и методика преподавания в образовательной организации

Найдите материал к любому уроку,
указав свой предмет (категорию), класс, учебник и тему:

Номер материала: ДБ-240872

Не нашли то что искали?

Вам будут интересны эти курсы:

Оставьте свой комментарий

Минпросвещения разрабатывает образовательный минимум для подготовки педагогов

Время чтения: 2 минуты

В 16 регионах ввели обязательную вакцинацию для студентов старше 18 лет

Время чтения: 1 минута

В Осетии студенты проведут уроки вместо учителей старше 60 лет

Время чтения: 1 минута

Учителям предлагают 1,5 миллиона рублей за переезд в Златоуст

Время чтения: 1 минута

На новом «Уроке цифры» школьникам расскажут о разработке игр

Время чтения: 1 минута

В Минпросвещения предложили организовать телемосты для школьников России и Узбекистана

Время чтения: 1 минута

Подарочные сертификаты

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

Все материалы, размещенные на сайте, созданы авторами сайта либо размещены пользователями сайта и представлены на сайте исключительно для ознакомления. Авторские права на материалы принадлежат их законным авторам. Частичное или полное копирование материалов сайта без письменного разрешения администрации сайта запрещено! Мнение администрации может не совпадать с точкой зрения авторов.

HTML

Учебник о языке разметки HTML

В Википедии имеется статья по теме «HTML»

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

Содержание

Мы ранее сказали, что будем рассказывать об HTML5. Чем отличается стандарт HTML5 от предыдущих HTML? Существует такая организация W3C (World Wide Web Consortium). Суть её работы хорошо выражена в их лозунге «Leading the Web to Its Full Potential…» («Приведём всемирную паутину к лидерству, раскрыв все её возможности»). И когда они говорят, что в будущем браузеры не будут поддерживать старые версии HTML, то оно наверняка так и будет - в данный момент, почти все браузеры придерживаются единого стандарта, который разрабатывает W3C, а именно - HTML5.

Когда W3C создавали стандарт HTML, в нём не предусматривалось тегов для форматирования гипертекста - теги показывали только структуру документа, например:

Но потом разработчики браузеров начали добавлять в HTML свои теги, которые им нравились. Например:

Вскоре, количество тегов сильно разрослось.

Также нежелательно было появление в стандарте HTML 3.2 тега <font> (он нужен для изменения цвета, шрифта и размера текста). Представьте себе, что нужно написать страницу, где все заголовки красные. И приходится помимо тегов в заголовке писать ещё тег шрифта с атрибутом цвета.

С HTML4 разделяются форматирование документа и его структура. Теперь в HTML-странице сохраняются только структура страницы (разноуровневые заголовки, абзацы, цитаты, списки), а всё, что относится к форматированию, описывается в CSS. Это удобно, поскольку позволяет быстро менять оформление всего сайта изменением только файла со стилем, и, кроме того, уменьшает длину кода, который нужно написать.

В HTML5 же, была предпринята попытка стандартизации: многие привычные теги (в том числе и выше названный <font> ) осуждаются, все оформление рекомендуется использовать в отдельном CSS-файле, появились новые семантические теги, функции для которых будут добавлены в будущем.

Первым делом, нам понадобится текстовый редактор. Текстовый редактор есть на каждом компьютере. Важно заметить: нам нужна программа для редактирования текстовых файлов, а не документов (то есть ни в коем случае нельзя использовать текстовые препроцессоры по типу Microsoft Word). Обычно стандартного «Блокнота» Windows достаточно, но есть текстовые редакторы, которые лучше приспособлены к написанию HTML-страниц. Неплохие редакторы Notepad ++, Brackets, Atom, Sublime Text в которых хорошо писать не только HTML, CSS, но и ещё несколько десятков других языков программирования и разметки. У них есть несколько удобных функций,таких как подсветка синтаксиса, которая позволяет выявлять ошибки прямо во время их создания, автоматическое дополнение тегов, что позволит сэкономить время на написание кода и многое другое.

Веб-страницы состоят из гипертекста. Гипертекст отличается от обычного текста тем, что содержит гиперссылки. Они обычно обозначены синим цветом, и позволяют сделать переход в другой гипертекст, или любое другое место (якорь), указанное с помощью URL. Гипертекст состоит из тегов.

Открывающие
Закрывающие
Одинарные.

Открывающие и закрывающие теги всегда существуют парами: открывающий <html> и закрывающий </html> . Закрывающий отличается от открывающего тем, что после угловой скобки < стоит знак слэш (знак дроби) «/».

Приведу пример кода веб-страницы:

Все теги, которые встречаются выше, обязательны. Они присутствуют в каждой интернет-странице. Конечно, если вы какой-то из них забудете, браузер-то разберётся, но все серьёзные люди такие вещи не забывают. Тег <html> говорит браузеру, что в нём содержится код HTML. Тег <head> говорит, что в нём содержится заголовочная информация страницы. Эта информация на самой странице отсутствует. Тег <title> , как уже было сказано, содержит заголовок, который обычно отображается на вкладке. <body> содержит тело, тоесть содержимое страницы.

В HTML существует проблемы с символами сравнения. Чтобы отображать некоторые нестандартные символы, существует понятие специальных символов. Специальные символы в HTML описываются так: &код;. Например:

Название	Код	Вид
Менее	<	<
Более	>	>
Амперсанд	&	&
Кавычка	"	"

Здесь я указал только самые-самые нужные. Если вам нужно больше, надо поискать. Можно поискать где-то здесь. То есть то, что мы хотели описать в предыдущем примере, будет выглядеть так:

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

Оба способа одинаковы. Но второй короче.

Некоторые теги имеют свойства, которые называются атрибутами. Например, почти каждый тег имеет атрибут title. В нём прописывается текст подсказки, которая видна, когда пользователь наводит курсор на элемент тега. Пусть нам нужно написать известное сокращение: HTML. И если пользователи наводят на него курсор, они могут его расшифровать. Это делается просто:

Здесь мы видим, как правильно записывать атрибуты. Название атрибута, затем знак равенства, и значение в двойных кавычках. В стандарте HTML 4.01 нет атрибутов без значений.

Лучше писать все атрибуты и их значения маленькими буквами

Зачем? Ради будущего!

Теперь перейдём к форматированию текста. Форматирование задаёт не так внешний вид, как структуру страницы. Важнейшими тегами форматирования есть абзацы (англ. paragraph) и заголовки (англ. header)

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

Эта страница отобразится так:

В этой книге речь пойдет преимущественно о хоббитах, и с ее страниц читатель узнает немало об их . и т. д.

I Долгожданная гостиная

XII Побег к броду

Я здесь пишу и пишу примеры. Не забывайте пробовать что-то сами! Или хотя бы по крайней мере посмотрите как будут выглядеть примеры страниц, которые вам даются, в вашем браузере (а если у вас несколько браузеров, то не забывайте посмотреть как выглядит страница в других!).

К сожалению, браузеры отвергают все символы переноса строки, табуляции, а также лишние пробелы. Поэтому этот стишок отображается в одну или несколько строк (в зависимости от ширины окна). Но есть выход.

Можно каждую строчку стихотворения поместить в отдельный абзац. Правда обычно между абзацами большие белые поля. Поэтому можно использовать одинарный тег <br />. Этот тег обозначает переход на новую строку, то есть обрыв (break) старого.

Это выглядит следующим образом:

It is a long tail, certainly, 'said Alice, looking down with wonder at the Mouse's tail'

`But why do you call it sad? ' And she kept on puzzling about it while the Mouse was speaking,

so that her idea of the tale was something like this: -

Ещё немного о теге изменения шрифта. Шрифт может иметь три дополнительных атрибута: жирность (bold), курсив (italic) и подчёркивание (underlined). Они меняются с помощью тегов: <b> , <i> и <u> соответственно.

Для того чтобы обходиться без <s> , придумали тег <del> он помечает что текст был именно удалён как неверный и автор акцентирует пользователя на этом. Кроме тега удаления ввели тег вставки <ins> . Тег вставки указывает текст, который вставили после удаления. Выглядит такая вещь примерно так:

А отобразится она так:

Причём текст в теге <ins> будет подчёркнут. (А ребята из W3schools говорили использовать CSS)

Далее опишу все теги в таблице, потому что мне уже надоело здесь о них рассказывать, а вам видимо надоело читать.

— это язык разметки гипертекста

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

Как я уже говорил, основным свойством, которое отличает нормальный текст и гипертекст, является гиперссылка. Гиперссылки создаются с помощью тега <a> с атрибутом href, который принимает значение нужного нам URL. Например, нужно создать страницу, которая содержит ссылку на статью. Это может выглядеть примерно так:

При обращении к каталогу всегда в конце добавляйте слэш. Если вы не будете добавлять слэш, то сервер будет вынужден выполнять два запроса. Сначала ваш, без слэша. Потом, когда он разберётся, что это запрос к каталогу, он сгенерирует свой запрос, со слэшем, и уже его выполнит.

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

Например, если вы певец и хотите поделиться своими песнями с другими, вы можете положить в папку с сайтом файл track1.mp3, а в файле index.htm написать:

Если файлы находятся в одном каталоге, то в атрибуте href достаточно написать название файла, чтобы сделать ссылку. Если же мы имеем файлы «site/1.htm» и «site/subdir/2.htm», то чтобы с первого сделать ссылку на второй, а со второго на первый, надо написать href ="subdir/2.htm" и href ="../1.htm" соответственно. Такие адреса называются относительными. Две точки означают «тот каталог что выше». Относительные адреса хороши тем, что когда мы переименовываем папку «site» или меняем хостинг их не нужно менять.

Я правда не понимаю для чего делать закладки с помощью тега <a>, когда атрибут id есть в каждом тезисе. Но всеми способами получается нормально.

Чтобы долго не объяснять снова приведу пример:

Чаще страницы загружаются в том окне, где вы щёлкнули ссылку. Но мы можем выбрать место, где будут загружаться страницы. Для этого в теге <a> существует атрибут target. Он может принимать значения _blank, если нам нужно загружать страницу в новом окне, _self, если нам ничего менять не нужно (оно и так загружается в том окне где щёлкнули), _parent, если мы хотим забрать из окна фрейма и открыть страницу на всё окно.

Этот тег нестандартный и не входит в спецификации. Поддерживается только IE. Вместо него рекомендуется использовать тег <audio> .

Тег <bgsound> указывает на музыкальный файл, который будет проигрываться на веб-странице при её открытии. Звук, время звучания музыки и другие характеристики указываются с помощью параметров тега, а также могут управляться при помощи скриптов. Этот тег должен размещаться только в середине тега <head> .

Чтобы указать файл, который будет проигрываться, нужно написать так:

В HTML5 добавили новый тег <audio> .

Вот как он выглядит:

Обращаем ваше внимание на непонятный тег <source /> .

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

Подробно про атрибуты тега <audio> :

Иногда вы что-то пишете, пишете, и вдруг чувствуете что нужно подвести черту.

Делается это просто как новая строка: <hr /> (horisontal ruler). Вообще-то в этом теге есть атрибуты, которые настраивают внешний вид, но их использование в новых стандартах нежелательно. Разрешены только общие атрибуты, такие как id, class, style и атрибуты событий, но это темы следующего раздела.

Иногда картинки не отображаются. Это происходит по разным причинам. Тем не менее, нужно чтобы пользователь и в таких случаях знал, что вы хотели ему показать. Для этого картинки имеют атрибут alt. Он задает текст, который отображается на месте картинки в тех случаях, когда сама картинка недоступна.

Не стоит забывать о том, что картинки очень долго загружаются при медленном доступе к интернету. И даже когда доступ в интернет достаточно быстрый, некоторые пользователи исключают загрузку картинок в целях экономии. И это замечание актуально даже в 2011 году. Поэтому не пренебрегайте атрибутом alt.

Также мы можем изменить размер картинки. Например, если мы имеем маленькое изображение, мы можем его растянуть. Правда тогда оно будет отображаться несколько размыто. Также можно изменять размеры изображения вместе с изменением размеров окна браузера. Для этого размеры указывают в процентах. Размеры задаются атрибутами width и height. Пример:

Картинки могут быть помещены между тегами <a> и </a>, тогда щелчок по ним будет аналогичным щелчку по обычным ссылкам. Вокруг картинки появится синяя рамка. Но есть ещё более интересный способ сделать из картинки гиперссылку. Это карты.

Пример я бессовестно «сдул» отсюда. Очень хорошее место, чтобы потренироваться, без лишней мороки.

Форму задают с помощью атрибута coords, который содержит четыре координаты (лево, верх, право, низ) для прямоугольника, три (координаты центра и радиус) для круга, и чётное количество для многоугольника (координаты каждой вершины). Координаты можно узнать морем способов. Можно в Paint’е посмотреть. А если форма сложная, точек много, то можно и специальную программу использовать. Это вроде X-Map. Хотя, если честно, ни этой программой, ни картами я не пользовался. Но если такое есть, то надо дать людям знать. Иначе книжка какая-то не солидная будет.

Списки в HTML бывают трёх видов: упорядоченные (ordered list) <ol>, неупорядоченные (unordered list) <ul> , и списки определений (definition list) <dl> . Элементы двух первых списков задаются тегом <li> (list item). Элементом списка может быть любой текст, картинки, абзацы, а также другие списки. Например, упорядоченный список задают так:

Выглядит это так:

Список определений не является списком элементов. Это список терминов и определений терминов. Список определений начинается с тега <dl>. Каждый термин списка определений начинается с тега <dt>. Каждое определение списка начинается с тега <dd>:

Строка 1 Столбец 1	Строка 1 Столбец 2	Строка 1 Столбец 3
Строка 2 Столбец 1	Строка 2 Столбец 2	Строка 2 Столбец 3
Строка 3 Столбец 1	Строка 3 Столбец 2	Строка 3 Столбец 3

По умолчанию таблицы отображаются без границ. То есть границы невидимы. Это иногда полезно, но иногда мы хотим, чтобы границы были видны. Для этого задают значение атрибута border. Он задаёт толщину границ таблицы. (Правда только внешних). Если его значение ноль, то границы не отображаются.

Иногда надо назвать столбцы или строки, используют ячейку заголовка. Для этого вместо тега <td> пишут <th>. Выглядит это так:

Столбец 1	Столбец 2
Строка 1	Строка 1 Столбец 1	Строка 1 Столбец 2
Строка 2	Строка 2 Столбец 1	Строка 2 Столбец 2

А пишется вот так:

Стоит заметить, что такой способ лучше чем писать содержимое ячейки в тегах <b> или <strong>. И не только потому, что так короче. А и потому, что потом можно будет применить к заголовкам таблицы отдельные стили.

Некоторые браузеры не отображают пустые ячейки (то есть не обводят их рамкой). Можете посмотреть что делает ваш, в предыдущем примере верхняя левая ячейка пуста. Чтобы обмануть браузер и заставить его отображать ячейку будто там что-то есть, мы можем положить туда невидимый символ -. Это символ несокрушимого пропуска (Non Breakable SPace). Назвали его несокрушимым оттого, что слова, разделённые таким пропуском, переносятся на следующую строку только вместе.

Даёт такой результат:

Строка 1 Столбец 1 растягивается на два вправо		Строка 1 Столбец 3
Строка 2 Столбец 1	Строка 2 Столбец 2 растягивается на 2 вниз	Строка 2 Столбец 3
Строка 3 Столбец 1	Строка 2 Столбец 2 растягивается на 2 вниз	Строка 3 Столбец 3

Кроме строк таблица может иметь заголовок. Тег <caption> предназначен для создания заголовка к таблице и может размещаться только в середине тега <TABLE>, причём сразу после открывающего тега. Такой заголовок представляет собой текст, который по умолчанию отображается перед таблицей и описывает её.

Также можно выделить строки таблицы в группы, с различным функциональным назначением и назначить им разные стили. Ой как мне не терпится уже дойти до стилей. Но по порядку. Можно выделить заголовочный часть <thead>, основную часть <tbody> и итог <tfoot>.

Читайте также: