Html код для веб страниц. Пример страницы HTML и основные принципы создания. Срочно нужен интернет-магазин, а времени на изучение HTML, CSS, PHP и других технологий нет. Тогда просто можете арендовать интернет магазин с полностью реализованным функционало

  • 30.10.2019

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

Пример 4.1. Исходный код веб-страницы

Пример веб-страницы Заголовок

Первый абзац.

Второй абзац.

Скопируйте содержимое данного примера и сохраните его в папке c:\www\ под именем example41.html. После этого запустите браузер и откройте файл через пункт меню Файл > Открыть файл (Ctrl+O) . В диалоговом окне выбора документа укажите файл example41.html. В браузере откроется веб-страница, показанная на рис. 4.1.

Рис. 4.1. Результат выполнения примера

Элемент предназначен для указания типа текущего документа - DTD (document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, ведь HTML существует в нескольких версиях, кроме того, имеется XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), похожий на HTML, но различающийся с ним по синтаксису. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать .

Существует несколько видов , они различаются в зависимости от версии HTML, на которую ориентированы. В табл. 4.1. приведены основные типы документов с их описанием.

Табл. 4.1. Допустимые DTD DOCTYPE Описание
HTML 4.01
Строгий синтаксис HTML.
Переходный синтаксис HTML.
В HTML-документе применяются фреймы.
HTML 5
В этой версии HTML только один доктайп.
XHTML 1.0
Строгий синтаксис XHTML.
Переходный синтаксис XHTML.
Документ написан на XHTML и содержит фреймы.
XHTML 1.1
Разработчики XHTML 1.1 предполагают, что он постепенно вытеснит HTML. Как видите, никакого деления на виды это определение не имеет, поскольку синтаксис один и подчиняется четким правилам.

Разница между строгим и переходным описанием документа состоит в различном подходе к написанию кода документа. Строгий HTML требует жесткого соблюдения спецификации HTML и не прощает ошибок. Переходный HTML более «спокойно» относится к некоторым огрехам кода, поэтому этот тип в определенных случаях использовать предпочтительнее.

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

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

Часто можно встретить код HTML вообще без использования , веб-страница в подобном случае все равно будет показана. Тем не менее, может получиться, что один и тот же документ отображается в браузере по-разному при использовании и без него. Кроме того, браузеры могут по-своему показывать такие документы, в итоге страница «рассыплется», т.е. будет отображаться совсем не так, как это требуется разработчику. Чтобы не произошло подобных ситуаций, всегда добавляйте в начало документа.

Тег определяет начало HTML-файла, внутри него хранится заголовок ( ) и тело документа ( ).

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

Тег является универсальным и добавляет целый класс возможностей, в частности, с помощью метатегов, как обобщенно называют этот тег, можно изменять кодировку страницы, добавлять ключевые слова, описание документа и многое другое. Чтобы браузер понимал, что имеет дело с кодировкой UTF-8 (Unicode transformation format, формат преобразования Юникод) и добавляется данная строка.

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

Тег определяет заголовок веб-страницы, это один из важных элементов предназначенный для решения множества задач. В операционной системе Windows текст заголовка отображается в левом верхнем углу окна браузера (рис. 4.2).

Рис. 4.2. Вид заголовка в браузере

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

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

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

Заголовок

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

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

: HTML - язык разметки гипертакста (или язык гипертекстовой разметки).

Так давайте познакомимся с ним поближе.

Для начала создайте у себя на компьютере файл с любым названием и расширением.html (название должно быть на английском языке - например index.html). Что бы создать такой файл - создайте обычный текстовый документ ("Пуск" - "Все программы" - "Стандартные" - "Блокнот") и сохраните ("Файл" - "Сохранить как") его в любом месте, введя название и расширение (бывает, что при введении расширения блокнот все равно сохраняет его как текстовый файл, а нам нужет web файл. Для этого перед сохранением выберите тип файла - "Все файлы(*.*)").

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

При правильном сохранении, значок файла должен поменяться на значок браузера (по умолчанию Internet Explorer).

Теперь откройте этот файл через блокнот и скопируйте туда такой код.

Это первая web-страница!

Сохраните и откройте через браузер.

Поздравляю, вы только что создали свою первую web-страницу.

Текст "Это первая web-страница!" можете поменять на любой другой, например так - "Это моя первая web-страница!!!". сохраняем, обновляем браузер, любуемся результатом.

Но у нашей страницы нет загаловка.

Надо это исправить - немного подправим код, вернее добавим в него "Голову сайта", используя теги и .

Первая страница Это моя первая web-страница!!!

Сохраняем, обновляем, любуемся. Теперь у нашей страницы есть загаловок.

Описание тегов.

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

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

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

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

В следующем уроке мы поговорим о видах тегов и правило их написания.

Создание веб-сайтов не так ое сложно е дело, как кажется. Узнайте, как закодировать простую страницу с помощью HTML - язык а разметки для Web.

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

HTML - это основной язык разметки веб-страниц. Давайте изучим его основы, и попробуем создать простую страницу.

Введение в HTML

HTML - это язык гипертекстовой разметки.

Гипертекст - это текст, который работает как ссылка.

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

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

HTML является основным языком разметки для Web. Однако он используется для создания статических веб-страниц, без интерактивности и анимации. HTML5, последняя версия HTML, немного лучше в этом смысле, особенно что касается видео или аудио.

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

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

Веб и HTML

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

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

Согласно обзору W3Techs, HTML - это язык, используемый на 74,3% всех сайтов.

Как создать простую HTML-страницу

Разработка HTML проста, и поэтому можно легко научиться кодировать простую HTML-страницу. Но для начала нужно изучить основы языка.

Кодирование HTML с помощью текстового редактора

Документ HTML - это в основном текстовый документ. Существует множество доступных редакторов текста, которые можно использовать для написания HTML. Два самых популярных: Dreamweaver и Sublime Text. Бесплатные редакторы - Notepad ++ для Windows и Text Wrangler для Mac. На самом деле сделать веб-страницу можно и в Microsoft Word, но делать это не стоит, поскольку он добавляет дополнительный и ненужный код в документы HTML.

Для примера мы будем использовать Notepad ++ в качестве редактора. Вы можете выбрать любой редактор по вашему выбору.

Создание и редактирование HTML

Создание нового документа HTML такое же, как и для любого другого типа документа. Выберите «Файл» - «Новый», чтобы открыть новый документ в Notepad ++. Внесите изменения в документ и нажмите «Сохранить».

Сохранение HTML

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

Если вы написали код в «Блокноте» и сохранили его как текстовый документ, то перевести его в html-страничку можно с помощью программы Total Commander. Выбираем команду «Переименовать» и меняем расширение файла из.txt на.html.

Формат HTML-страницы

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

Элементы HTML

Элементы определяют структуру и содержимое веб-страницы. Обозначаются угловыми скобками вокруг имени элемента. Содержимое, которое не находится между "", будет отображаться на веб-сайте. Элемент выглядит примерно так:

Теги

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

Например:

Открывающий тег:

Закрывающий тег:

Содержимое между открывающим и закрывающим тэгами является содержимым элемента.

Теги могут использоваться двумя способами:

Использование тегов в паре

Парные теги содержат открывающий и закрывающий теги. Вот как они выглядят:

Здесь какой-то текст

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

Одиночные теги

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

Эти элементы пишутся так:

Закрытие / (косая черта) также не является обязательным. Это то же самое, что и при записи . Однако, чтобы избежать путаницы с открывающим тегом, рекомендуется добавить / (косую черту) в конце.

Атрибуты

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

Тег с атрибутом будет выглядеть так:

Тег «HTML» выше имеет атрибут «lang» со значением «en-US».

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

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

DOCTYPE или DTD: Декларация типа документа указывает версию используемого HTML. Этот тег помещается в начале документа.

HTML: Пара тегов HTML определяет начало и конец документа HTML.

Раздел HEADER < head>: этот раздел определяет общую информацию для страницы, и обычно короткий. Содержимое этого элемента не отображается на странице. Заголовок содержит тег TITLE, который определяет название документа, отображаемое в строке заголовка браузера. HEADER также может содержать метаданные, или ссылки на внешние файлы.

Раздел BODY : Этот раздел содержит основную часть страницы. Его содержимое отображается в браузере. Большая часть кода HTML-страницы находится внутри элемента body.

Кодировка: этот тег указывает кодировку, используемую в документе HTML. Кодировка указывает, как файл сохраняется, и как будут отображаться специальные символы. Общепринятым значением для этого тега является UTF-8, который позволяет отображать практически все символы языка.

Простая страница HTML

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

Шаг 1: Первая строка добавляемого HTML-кода указывает элемент DOCTYPE как «html». Это означает, что используется последняя версия HTML.

Шаг 3: Затем мы добавляем тег заголовка с тегом Title и сведениями о наборе символов.

Hello World

Шаг 4: После этого пишется тег BODY.

Hello World

Шаг 5: Теперь пустой HTML-документ готов. Давайте начнем добавлять текст для отображения. Мы добавляем тег заголовка и тег

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

Hello World

Hello World

Простая страница HTML

Основная HTML-страница готова, и мы можем сохранить ее в папке по нашему выбору.

Просмотр страницы HTML


Чтобы просмотреть HTML-страницу, нам нужно открыть ее в браузере. Перейдите в папку, где был сохранен документ HTML, и дважды щелкните по нему.

Он откроется в браузере, и мы видим очень простую страницу. Вы можете проверить, что он показывает:

Заголовок как «Hello World»

Заголовок первого уровня как «Hello World»

Абзац с текстом «Простая страница HTML»

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

Расширенное форматирование текста

В HTML предусмотрены специальные элементы для специального форматирования текста.

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

Теги

используются для указания начала нового абзаца. Браузер обычно добавляет одну пустую строку между двумя абзацами.

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

Жирный –

Курсив –

Подчеркнутый –

Шрифт –

Полный список этих тегов доступен по ссылке .

Добавление ссылок

Это текст ссылки


Добавление изображений

Тег является одиночным тегом, без тега закрытия. Вы можете указать атрибуты изображения.

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

Атрибут style имеет много параметров, включая ширину и высоту изображения в пикселях.

Атрибут alt дает краткое описание изображения. Используется, если по какой-либо причине изображение не загружается.


Добавление заголовка

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

Расширенные понятия в HTML

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

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

Проверка HTML-кода

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

Валидация также дает рекомендации по коду, который не соответствует последнему стандарту HTML. Недействительный HTML сделает сайт непригодным для использования. Это может вызвать проблемы с загрузкой или несогласованность вывода с различными браузерами. Многие сервисы проверки бесплатны, например, validator.w3.org

Добавление дополнительных тегов

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

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

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

Добавление CSS и JavaScript

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

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

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

И используйте один из редакторов.

Основные теги Текст Ссылки Фреймы Таблицы Списки Формы Изображения

Пример 1. Структура документа HTML



Название документа


Здесь расположен сам Web-документ.
Всем привет!

Здравствуй, мир!


Пример 2. Структура простейших веб-страниц



Поисковые системы Internet.

Поисковые системы в Интернете

Ниже приведены некоторые популярные зарубежные
поисковые системы и отечественная система Rambler. Для поиска
информации используется окно Search, в которое вводится ключевое
слово и нажимается кнопка Search.

Просмотрите примеры:
ALTAVIST.HTM,
EXCITE.HTM,
YAHOO.HTM!

1.
2.
3.
4.

5.
6.
Используйте поисковые системы для
поиска информации в Интернете!



Пример 3. Разметка веб-страницы



Эхо Москвы.


24 часа в сутки!

Информация на любые темы!
Частота на УКВ 73,82 МГц или 91,2 МГц FM.


Слушайте Эхо Москвы!
Остальное видимость!

Адрес в Интернете:
http://www.echo.msk.ru


Пример 4. Простой пример на HTML



Упорядоченные и неупорядоченные списки


Неупорядоченный список


  • Элемент 1.
  • Элемент 2.
  • Элемент 3.


Упорядоченный нумерованный список

  • Элемент 1.
  • Элемент 2.
  • Элемент 3.





    Списки определений


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

    Название термина 1
    Определение термина 1
    Другое определение термина 1
    Название термина 2
    Определение термина 2
    Другое определение термина 2
    Название термина 3
    Определение термина 3
    Другое определение термина 3



    Петров И.C., E-mail:





    Формы



    Элементы диалога

    Элемент ISINDEX


    Элементы INPUT
    Ввод текстовой строки

    Ввод пароля

    Флажки


    Переключатели



    Кнопка подтверждения ввода

    Кнопка с изображением

    Кнопка очистки формы

    Файл


    Элемент SELECT

    Первый
    Второй
    Третий
    Четвертый


    Элемент TEXTAREA

    Область для ввода текста



































    Этот текст написан полужирным шрифтом.


    Этот текст логически выделен тегом strong (может отображаться как обычный текст в некоторых браузерах или отображаться полужирным шрифтом). В некоторых браузерах действие аналогично действию тега b.


    Этот текст отображается более крупным шрифтом (может отображаться обычным шрифтом в некоторых браузерах)


    Этот текст логически выделен тегом em. В некоторых браузерах действие аналогично действию тега i.


    Этот текст отображается курсивом.


    Этот текст отображается более маленьким шрифтом.


    Этот текст ниже , а этот выше уровня основного текста.






    Это предварительно
    отформатированный текст.
    В нем сохраняются
    все пробелы и пустые
    строки, которые вы указали.

    Тег pre хорошо использовать для отображения компьютерного кода.:


    For i = 1 to 10
    print i
    next i





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

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

    Текст, отмеченный тегом tt отображаетя моноширинным текстом. Этот тег относится к группе тегов физического форматирования.

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

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





    Дональд Дак

    почтовый ящик 555

    Диснейленд

    США





    UN


    WWW

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






    Блок цитаты:

    Это длинная цитата. Это длинная цитата. Это длинная цитата. Это длинная цитата.

    Браузер вставляет пустую строчку и отступы перед и после блока цитаты.


    Короткая цитата:
    Это короткая цитата

    Элемент q никак не выделяется и отображается как обычный текст.






    Дюжина - это
    тринадцать
    двенадцать
    единиц.


    Большая часть браузеров перечеркивают удаленный текст и подчеркивают вставленный текст.


    Старые браузеры могут отображать удаленный текст как простой текст.






    UN

    Это параграф.


    Это другой параграф.






    Форматированиеhtml


    y=x2-уравнениепараболы.


    H2O-формулаводы.




    Форматированиеhtml


    Это заголовок первого уровня
    Это заголовок второго уровня
    Это заголовок третьего уровня
    Это заголовок четвертого уровня
    Это заголовок пятого уровня
    Это заголовок шестого уровня
    Это просто текст




    А этот текст
    приведет вас на известный видеохостинг Youtube.










    К примерам html

    Если вы укажете атрибуту target значение “_blank”, ссылка откроется в новом окне браузера.






    Это ссылка на отправку почты:
    ?subject=Привет%20тебе”>
    Отправить письмо!


    Внимание: Пробелы между словами должны быть заменены знаком «%20» , чтобы вы были уверены, что браузер будет правильно отображать ваш текст.



























    Некоторые старые браузеры не поддерживают строчные фреймы.


    В этом случае строчный фрейм не будет отображен в окне браузера.












    Каждая таблица начинается с тега table.
    Каждая строчка таблицы начинается с тега tr.
    Каждая ячейка таблицы начинается с тега td.


    Таблица из одной колонки:




    100

    Одна строчка из трех колонок:






    100 200 300

    Две строчки по три колонки:











    100 200 300
    400 500 600





    Таблица с обычной рамкой:









    Первая строчка
    Вторая строчка

    С широкой рамкой:









    Первая строчка
    Вторая строчка

    С очень широкой рамкой:









    Первая строчка
    Вторая строчка





    Заголовки таблицы:


    Имя
    Телефон
    Телефон






    Билл Гейтс 555 77 854 555 77 855

    Вертикальные заголовки:


    Имя:



    Телефон:



    Телефон:


    Билл Гейтс
    555 77 854
    555 77 855






    Эта таблица с широкой рамкой и названием


    Название










    100 200 300
    400 500 600





    Ячейки состоит из двух колонок:


    Имя
    Телефон






    Билл Гейтс 555 77 854 555 77 855

    Ячейка состоит из двух строк:


    Имя:



    Телефон:





    Билл Гейтс
    555 77 854
    555 77 855





    Неупорядоченный список:


    • Кофе

    • Чай

    • Молоко






    Упорядоченный список:

  • Кофе

  • Чай

  • Молоко






  • Значки списка в виде закрашенного круга:

    • Яблоки

    • Бананы

    • Лимоны

    • Апельсины


    Значки списка в виде незакрашенного кругаCircle bullets list:

    • Яблоки

    • Бананы

    • Лимоны

    • Апельсины


    Значки списка в виде закрашенного квадрата:

    • Яблоки

    • Бананы

    • Лимоны

    • Апельсины






    Нумерованный список:

  • Яблоки

  • Бананы

  • Лимоны

  • Апельсины


  • Нумерация заглавными буквами:

  • Яблоки

  • Бананы

  • Лимоны

  • Апельсины


  • Нумерация строчными буквами:

  • Яблоки

  • Бананы

  • Лимоны

  • Апельсины


  • Нумерация заглавными римскими цифрами:

  • Яблоки

  • Бананы

  • Лимоны

  • Апельсины


  • Нумерация строчными римскими цифрами:

  • Яблоки

  • Бананы

  • Лимоны

  • Апельсины






  • Вложенный список:

    • Кофе

    • Чай

      • Черный чай

      • Зеленый чай



    • Молоко







    Имя:


    Фамилия:







    Имя пользователя (логин):


    Пароль:


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







    Мужчина:


    Женщина:


    Пользователь может выбрать только одно значение.








    Вольво
    Сааб
    Фиат
    Ауди














    У меня есть мотоцикл:



    У меня есть машина:



    У меня есть аэроплан:






    Если вы нажмете на кпопку «Подвердить», вы отправите ваши данные на новую страницу, которая называется html1.asp.






    Вставка простого изображения:
    width=”111″ height=”111″>


    Двигающееся изображение (анимация):
    width=”62″ height=”62″>


    Помните, что синтаксис вставки анимации ничем не отличается от синтаксиса вставки простого изображения.






    Взгляните, мы вставили изображение, как фон!

    Можно вставлять изображения форматов gif, jpg/jpeg и png.


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






    align =”left” width=”48″ height=”48″>
    Параграф с изображением. Атрибуту «align» присвоено значение «left». Изображение «всплывает» влево по отношению к тексту.




    align =”right” width=”48″ height=”48″>
    Параграф с изображением. Атрибуту «align» присвоено значение «right». Изображение «всплывает» вправо по отношению к тексту.








    width=”20″ height=”20″>


    width=”45″ height=”45″>


    width=”70″ height=”70″>


    Вы можете изменять размер изображения, меняя значения атрибутов «height» (ширина) и «width» (высота) тега img.