Создание сайта средствами HTML-программирования (по учебнику Н.Д.Угриновича)
2. Вид Web -страницы задается тэгами, которые заключаются в угловые скобки. Html -код страницы помещается внутри контейнера .
Заголовок Web – страницы заключается в контейнер
Название Web -страницы содержится в контейнере
Наша страница будет называться «Компьютер»:
Основное содержание страницы помещается в контейнер и может включать текст, таблицы, бегущие строки, ссылки на графические изображения и т.д.
Поместим на страницу текст «Все о компьютере»
Созданную Web -страницу необходимо сохранить в виде файла. Титульный файл сайта принято сохранять под именем index . htm
Загрузите полученный файл в окно браузера для просмотра.
3. Для форматирования текста:
v размер шрифта задается тэгами от < H 1>( самый мелкий) до < H 6>(самый крупный).
v Положение заголовка на странице позволяет задать атрибут ALIGN , которому требуется присвоить определенное значение. Выравнивание по правой границе окна реализуется с помощью записи ALIGN =” right ”, а по центру – ALIGN =” center ”
v С помощью тэга FONT и его атрибутов можно задать параметры форматирования шрифта любого фрагмента текста. Атрибут FACE позволяет задать гарнитуру шрифта ( например, FACE =” Arial ”), атрибут SIZE – размер шрифта( например, SIZE =4), атрибут COLOR – цвет шрифта (например, COLOR =” blue ”).
v Заголовок целесообразно отделять от остального содержания страницы горизонтальной линией с помощью одиночного тэга < HR >.
v Разделение текста на абзацы производится с помощью контейнера
v Разместим на титульной странице текст, разбитый на абзацы с различным выравниванием:
< P ALIGN =” left ”>На этом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие.
< P ALIGN = “ right ”>Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету.
Т.о. сейчас в контейнере < BODY >находится следующая последовательность тэгов:
4. Вставка изображений.
На Web — страницах могут размещаться графические файлы трех форматов- gif , jpg , png .
Для вставки изображения используется тэг < IMG >с атрибутом SRC , который указывает на место хранения файла. Если файл сохранен в том же каталоге, что и файл Web -страницы, то в качестве значения атрибута SRC достаточно указать только имя файла.
Если файл находится в другом каталоге, то надо указать путь к нему. ( Например,
Поясняющий текст выводится с помощью атрибута ALT , значением которого является текст, поясняющий, что должен был увидеть пользователь
< IMG SRC =” computer . gif ” ALT = “компьютер”>Расположить рисунок относительно текста можно различными способами, с помощью атрибута < ALIGN >тэга < IMG >( TOP (ВВЕРХ), MIDLE (СЕРЕДИНА), BOTTOM (НИЗ), LEFT (СЛЕВА), RIGHT (СПРАВА)
Итак, при вставке изображения получим:
II . Гиперссылки на Web -страницах.
Для создания связи между титульной страницей и другими страницами сайта необходимо создать заготовки страниц, которые должны иметь заголовок, но пока могут не иметь содержания.
Все создаваемые страницы необходимо сохранить в виде файлов в папке сайта.
Каждая страница будет содержать следующий HTML -код:
Заголовок страницы
Создайте пустые страницы «Программы», «Словарь», «Комплектующие» и «Анкета» и сохраните их в файлы с именами software . htm , glossary . htm , hardware . htm , anketa . htm в каталоге сайта.
Перейдем к созданию гиперссылок. Гиперссылки принято размещать в нижней части страницы, поэтому разместим их под введенным текстом в новом абзаце одну строку разделенными несколькими пробелами.
[Программы] & nbsp [Словарь] & nbsp [Комплектующие]Для каждой гиперссылки определим адрес перехода. Для этого используется контейнер гиперссылки с атрибутом HREF
Вставьте в титульную страницу код, создающий панель навигации:
[A HREF =”software.htm”> Программы ]  
[A HREF =”glossary.htm”> Словарь ]  
[A HREF =”hardware.htm”> Комплектующие ]  
[A HREF =”anketa.htm”> Анкета ]
Можно создать на титульной странице ссылку на адрес электронной почты
III . Использование списков.
На странице «Программы» разместим информацию об основных типах программного обеспечения компьютера в форме вложенного списка.
Список располагается внутри контейнера , а каждый элемент списка определяется тэгом < LI >. Тип нумерации определяется с помощью атрибута TYPE тэга < OL >(“ I ” –римские цифры, “ a ”- строчные буквы…)
Откройте файл software . htm , введите заголовок «Программное обеспечение» и добавьте следующий HTML — код
LI > Системы программирования
Добавим вложенный список для элемента < LI >Прикладные программы
LI > системы управления базами данных.
Страницу «Словарь» мы представим в виде словаря компьютерных терминов. Для этого используем контейнер списка определений . Внутри него текст оформляется в виде термина, который выделяется непарным тэгом < DT >, и определения, которое следует за тэгом
Откройте файл glossary . htm , введите заголовок «Компьютерные термины» и добавьте следующий HTML -код, задающий список определений:
DD > Центральное устройство компьютера, производящее обработку информации в двоичном коде.
DD >Устройство, в котором хранятся программы и данные
IV . Создание форм.
Для того, чтобы посетители сайта могли не только просматривать информацию, но и отправлять сведения его администраторам сайта, на его страницах размещают формы.
Разместим на странице «Анкета» анкету для посетителей.
Вся форма заключается в контейнер
В первую очередь выясняется имя посетителя и его электронный адрес. Для этого разместим два однострочных текстовых поля с помощью тэга < INPUT >со значением атрибута TYPE =” text ” Атрибут NAME является обязательным и служит для идентификации полученной информации. Значением атрибута SIZE является число, задающее длину поля ввода в символах.
Чтобы анкета читалась, необходимо разделить строки с помощью тэга перевода строки < BR >.
Откройте файл anketa . htm и добавьте код:
Пожалуйста, введите ваше имя:
Далее мы хотим выяснить, к какой группе пользователей относит себя посетитель: учащийся, студент, учитель. Для этого необходимо создать группу переключателей (радиокнопок). Создается такая группа с помощью тэга < INPUT >со значением атрибута TYPE =” radio ”. Все элементы в группе должны иметь одинаковые значения атрибута NAME . Еще одним обязательным атрибутом является VALUE , которому присвоим значения “ schoolboy ”, “ student ”, “ teacher ”. Атрибут CHECKED , который задает выбор кнопки по умолчанию, в данном случае не используется.
Укажите, к какой группе пользователей вы себя относите:
“schoolboy”> учащийся
“ student ” > студент
“ teacher ”> учитель BR >
Выясним, какой из браузеров предпочитает посетитель сайта. Перечень браузеров представим в виде раскрывающегося списка. Для реализации такого списка используется контейнер , в котором каждый элемент списка определяется тэгом
В заключении поинтересуемся, что хотел бы видеть посетитель на страницах нашего сайта. Создается такая текстовая область с помощью тэга < TEXTAREA >с обязательными атрибутами: NAME , задающим имя области, ROWS , определяющим число строк, и COLS — число столбцов.
Какую еще информацию вы хотели бы видеть на нашем сайте?
Для отправки данных из формы наберите:
VALUE=” отправить ”>
VALUE=” очистить ”>
Таблица основных тегов html с примерами
HTML — язык разметки, который используется в большинстве веб-страниц. Браузер интерпретирует его значения (теги) и отображает текст и элементы так, как их представляли разработчики. Без стандартизированного языка страницы сайта превращались бы в мешанину из букв, картинок и форм, которой невозможно нормально пользоваться.
Несмотря на то, что сейчас можно создавать отличные сайты на конструкторах в визуальном режиме, использование языка HTML остаётся важным навыком разработчика. Даже если вы не пишете шаблон с нуля, может возникнуть необходимость отредактировать его или вставить виджет стороннего сервиса — через HTML-код.
HTML позволяет форматировать страницы, придавая им необходимый вид. Если такой задачи нет, то знание тегов поможет отредактировать код встраиваемого виджета. Понимая структуру HTML, вы, например, можете быстро изменить размер видео или виджета и другие особенности его отображения.
Базовые теги
— тег для добавления комментариев в документ. Помещённые внутри него теги не интерпретируются браузером.
— показывает браузеру тип документа, сообщает его версию и язык.
— корневой тег, который сообщает браузеру, что это HTML-документ. Все остальные элементы помещаются внутри него.
— контейнер, в который помещаются метаданные документа, не видимые пользователям, но считываемые поисковыми роботами: например, или .
— тег для оформления метаданных документа, используемых браузером для обработки страницы, а поисковиками — для индексации.
— тег, обрамляющий видимую пользователям часть документа. Всё, что вы укажите внутри этого контейнера, отобразится на странице. Тег имеет несколько атрибутов, позволяющих управлять цветами.
— цвет фона документа в формате RGB.
— цвет гиперссылок, по которым уже переходили.
— цвет гиперссылок при нажатии.
— метатег, который задаёт название страницы, отображаемое на вкладке браузера.
— определяет содержимое блока с вводной информацией сайта или группой ссылок.
Форматирование текста
. . — теги заголовков, от самого большого к самому маленькому.
— жирный текст без придания важности выделенному фрагменту.
— расставление акцентов в тексте путём выделения его фрагментов полужирным начертанием.
— выделение текста курсивом без придания важности.
— зачёркивает текст, помечая его удалённым.
— отображает перечёркнутый текст.
— подчёркивает текст, визуально выделяя внесённые изменения.
— подчёркивание без дополнительного акцентирования внимания.
— расставление акцентов путём выделения фрагментов текста курсивом.
— выделение частей текста жёлтым маркером.
— имитация текста, набранного на печатной машинке.
— отображение фрагмента с меньшим кеглем шрифта, чем у остального текста.
— подстрочное начертание символов.
— надстрочное начертание символов.
— добавление контактов или подписи автора. При открытии в вею-браузере выделяется курсивом.
— вывод неформатированного текста с сохранением пробелов и особенностей переносов.
— переносит текст на другую строку без создания абзаца.
— отступы с обеих сторон для оформления цитаты или врезки.
— контейнер для размещения термина и его определения.
— добавление определения понятия
— выделение термина курсивом. Последующий текст должен раскрывать понятие.
— указывает, что текст является аббревиатурой или акронимом. Для добавления пояснения используется атрибут title.
— добавление гиперссылки в текст. Имеет обязательный атрибут href, в котором указывается ссылка или якорь. Внутри контейнера помещается текст, при нажатии на который происходит переход на другую страницу или другое место на этой же странице.
— выделение фрагмента кода с помощью шрифта monospace.
Встраивание элементов
— вставка изображения. Имеет атрибут src, который указывает на адрес нужного файла. Есть и другие атрибуты:
— выравнивание к одной из сторон документа. Например, значение right переместит рисунок в правый край, а left — в левый.
— позволяет настроить в пикселях толщину рамки вокруг изображения.
— контейнер для расположения элемента без , который даёт браузеру возможность самостоятельно выбрать подходящую картинку.
— вставка звукового контента.
— вставка видео (поддерживается Ogg, WebM и MP4).
— указывает местоположение файла для , и
— контейнер, через который встраиваются мультимедийные файлы. Для передачи параметров применяется тег .
— размещает на странице горизонтальную линию. Имеет несколько атрибутов.
— устанавливает высоту линии.
— устанавливает ширину линии.
— определяет выполнение сценария на стороне посетителя сайта. Может содержать сам скрипт или иметь ссылку на внешний источник.
— ограничивает фрагмент документа, в котором скрипт не выполняется.
Работа с таблицами
— размещает таблицу. Все остальные теги для форматирования таблиц должны находиться внутри это контейнера.
— указывает на заголовок ячейки.
— показывает нижний колонтитул.
— позволяет указать ширину и другие параметры одной или нескольких колонок.
Создание форм и кнопок
— создание форм на странице. С помощью HTML описывается только внешний вид, для выполнения функций требуется запуск соответствующих скриптов на сервере.
— создаёт интерактивную кнопку. Внутри контейнера нужно поместить текст или изображение.
— формирует меню с поддержкой скроллинга.
— описывает каждый отдельный пункт меню.
— формирует поля для добавления пользовательских данных.
— выводит результаты вычислений, сделанных с помощью скрипта.
— оформляет пометку для поля, созданного тегом .
— создаёт большие поля для ввода текста.