3.Тэги, фреймы, создание документа в html.
Итак, первым делом давайте ознакомимся с тем, как создать новый HTML документ. Для этого нужно знать из чего состоит каркас HTML документа, но прежде чем приступить к рассмотрению каркаса, давайте ознакомимся со значением такого слова, как тег.
Тег – это так называемый контейнер, который сообщает браузеру, как нужно отображать тот или иной элемент. Например, нам нужно чтобы текст был выделен абзацами. Для этого нужную часть текста помещаем в теги абзацев <p>. На практике это будет выглядеть таким образом:
| <p>Текст HTML документа, который должен быть выделен абзацем</p> |
Как видите HTML тег <p> парный, т.е. абзац начинается открывающим тегом <p> и заканчивается закрывающим тегом </p>. Это сообщает браузеру, что данный «контейнер» завершен. Также существуют непарные теги, которые закрывать не нужно, но об этом мы поговорим чуть позже.
Теперь давайте перейдем к самому процессу создания нового HTML документа. Для этого можно воспользоваться любой удобной для вас программой. Я бы рекомендовал как для работы, так и для обучения использовать программу Dreamweaver или Notpade++. Первая программа специально предназначена для работы с HTML, PHP, CSS и т.д., но ее я бы не советовал использовать, если вы только начинаете изучать язык гипертекстовой разметки HTML. Она прекрасно подойдет для разработки сайтов, если вы уже обладаете нужными знаниями в данной области.
Вторая программа под названием Notpade++ является простым текстовым редактором, который тоже отлично подойдет для наших целей, а именно для изучения HTML. Лично я при подготовке статьи пользовался именно программой Notpade++, так как она очень проста в использовании и не будет отвлекать внимание разнообразными доступными функциями. Плюс ко всему этому она очень легкая и не сильно нагружает компьютер (моему ноутбуку порядка 3-х лет и он с трудом дышит, когда на нем запущено несколько программ, таких как, например, Adobe PhotoShop CS5 + Dreamweaver + FireFox и т.д).
Итак, первым делом создаем новый документ, например, index.html. Для этого можно создать простой текстовый документ и изменить его расширение с txt на html. Для того чтобы изменить расширение через проводник (если вы используете операционную систему Windows), нужно первым делом зайти в Панель управления – Свойства папок – Вид и снять галочку с пункта «Скрывать расширение для зарегистрированных типов файлов». После этого в проводнике вы сможете просматривать и изменять расширения для файлов.
После создания HTML файла отрываем его на редактирование в программе Notpade++ и добавляем в него следующий код.
01 | <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> | |
02 | <html> |
|
03 | <head> |
|
04 | <title>Название страницы</title> |
05 | <meta http-equiv="Content-type" content="text/html" charset="windows-1251"> | |
06 | <meta name="keywords" content="ключевые слова через запятую"> |
|
07 | <meta name="description" content="краткое описание"> | |
08 | </head> |
|
09 | <body> |
|
10 | <p>Содержимое страницы</p> |
11 | </body> |
12 | </html> |
Данный код является каркасом HTML страницы, поэтому его можно один раз создать и в дальнейшем просто копировать, изменяя лишь нужные вам значения.
Теперь давайте подробно рассмотрим каждую строчку, которая присутствует в приведенном выше коде. Сразу хочу обратить ваше внимание на то, что данную структуру нужно сразу запомнить, так как она лежит в основе каждой HTML страницы.
<!DOCTYPE html PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN»> — данная строчка является обязательной. С ее помощью мы указываем, к какой версии стандарта принадлежит данный документ. В данном случае мы используем HTML версии 4.01.
Корневой тег <html> — указываем браузеру, что все содержимое будет написано на языке HTML. Данный тег парный и его нужно закрывать в самом конце страницы. Все содержимое страницы будет находиться между тегами <html>.
Тег <head> — данный тег тоже парный. С его помощью мы создаем так называемый контейнер для служебных тегов. В нем мы можем подключать к HTML документу таблицы стилей, скрипты, указывать ключевые слова, краткое описание для страницы и многое другое. Информация, которая находится между тегами <head>, не выводится пользователям, за исключением названия страницы.
Теги <body> — являются «телом» страницы. Между этими тегами будет находиться вся та информация, которая будет видна пользователям, которые будут просматривать эту HTML страницу.
Теги <title> — заголовок страницы. Он играет очень важную роль в поисковой оптимизации, так как именно его будут видеть пользователям при просмотре результатов поиска.
<meta http-equiv="Content-type" content="text/html" charset="windows-1251"> — указываем тип документа и его кодировку. В данном случае это текстовый или HTML документ с кодировкой windows-1251. Для русского сегмента интернета стоит использовать именно эту кодировку.
<meta content="ключевые слова через запятую"> — указываем ключевые слова для данной HTML страницы. Данное поле, как и следующее, предназначено для поисковых систем и не будет видно посетителям вашего сайта. Более подробно о ключевых словах, вы можете прочитать в статье «Как подобрать ключевые слова и определить конкурентность запроса».
<meta name="description" content="краткое описание"> — краткое описание HTML страницы. В кавычках вводим краткое описание для данной страницы, например, в моем случае это будет выглядеть примерно так: «Базовые понятия HTML. Как создать HTML страницу».
Кроме приведенных выше конструкций вы также можете поместить между тегами <head> следующие:
<link rel="shortcut icon" type="image/ico" href="/favicon.ico"> — указываем путь к фавикону. Данная картинка отображается в браузере в адресной строке рядом с адресом страницы. Ее также использует поисковая система Yandex при отображении результатов поиска.
<link rel="stylesheet" href="/style.css" type="text/css" media="screen"> — прописываем путь к таблице стилей CSS. Более подробно о CSS вы можете прочитать в статьях «Знакомство с CSS» и «Каскадные таблицы стилей. Свойства текста, полей, отступов, границ и шрифтов».
<script language="JavaScript" src="agent.js"></script> — подключение к документу скриптов.
Билет 22
- Классификация ит.
- 2. Инфологическое проектирование базы данных предметной области.
- 3. Определение Web-дизайна.
- Геоинформационные системы.
- 2. Этапы проектирования бд.
- 3. Общие характеристики пользователей и особенности программирования сайтов в зависимости от этих характеристик.
- 1.Принцип "открытости" информационной системы. Семиуровневая модель взаимодействия информационных систем. Технологии открытых систем.
- 2. Основы реляционной алгебры.
- 3. Проектирование сайтов.
- Распределенные системы обработки данных; технологии «клиент- сервер». Понятия «толстый» и «тонкий» клиенты.
- 2. Основные категории языка манипулирования данными sql.
- 3. Структура сайта.
- Информационные подсистемы tps, mis, oas, kws и kms, их место в системе управления организацией, основные пользователи этих подсистем.
- 2. Понятие бизнес-логики. Хранимые процедуры, триггеры, представления.
- 3. Теория навигации.
- Этапы моделирования систем.
- 2. Основные блоки эвм.
- 3. Понятие и структура электронного учебника, принципы разработки.
- Статистическое моделирование систем на эвм.
- 2. Системная плата персонального компьютера.
- 3. Управление коммуникативной деятельностью в дистанционном образовании.
- Программы, среды и системы моделирования.
- 2. Виды и структура основной памяти.
- 3. Особенности работы в системе Moodle.
- Основные понятия планирования экспериментов.
- 3. Педагогические особенности проведения образовательного процесса в дистанционном образовании.
- Основные элементы языка gpss.
- 3. Основные принципы и модели дистанционного образования.
- 1. Данные, информация и знания. Приобретение, создание, описание и кодификация, хранение/востребование, передача и использование знаний в организации.
- 2. Назначение и основные функции операционных систем.
- 3. На какие группы можно разделить всю информацию по видам восприятия, которые возможны при работе с компьютерной и коммуникационной техникой.
- 1. Семантические сети, их классификация и принципы построения. Типы объектов и отношений в семантических сетях.
- 2. Управление процессами и потоками.
- 3. Укажите известные вам форматы аудио, видео, графики укажите их преимущества и недостатки, области применения.
- Классификация инструментальных средств для работы со знаниями. Языки, использующиеся при представлении и обработке знаний.
- Функции операционных систем по управлению памятью.
- Нейронные сети и их применение в ис. Биологический прототип и искусственный нейрон.
- 2. Характеристики файловых систем операционной системы Windows.
- 3. Библиотеки в Macromedia Flash.
- 1. Персептроны и зарождение искусственных нейронных сетей. Персептронная представляемость. Обучение персептрона. Алгоритм обучения персептрона.
- 2. Функции операционных систем по защите данных; политики безопасности.
- 2.1. Принципы проектирования защищенных систем
- 2.2. Понятие защищенной операционной системы
- 2.3. Подходы к созданию защищенных операционных систем
- 2.4. Административные меры защиты
- 2.5. Адекватная политика безопасности
- 3. Структура проекта в Macromedia Flash - кадры, слои, сцены.
- Топологии компьютерных сетей.
- 2. Система внутренних коммуникаций компании: вертикальные и горизонтальные каналы распространения знаний.
- 3. Структура информационно-логической модели информационных систем в образовании.
- Эталонная модель взаимодействия открытых систем (модель osi).
- Основные операции над семантическими сетями. Агрегация и обобщение. Управление выводом в сетевых моделях.
- Проектирование и разработка пользовательского интерфейса информационных систем в образовании.
- Стандарты Ethernet и Fast Ethernet.
- 3. Архитектура информационных систем в образовании.
- 5.1.2. Централизованная архитектура
- 5.1.3. Архитектура "файл-сервер"
- 5.1.4. Архитектура "клиент-сервер"
- 5.1.5. Многоуровневый "клиент-сервер"
- 5.1.6. Архитектура распределенных систем
- Адресация в сетях tcp/ip.
- Общие сведения о языках инженерии знаний. Понятие о функциональном и логическом программировании. Особенности языков Лисп, Пролог и Смолток.
- 3. Инструментальные средства проектирования информационных систем в образовании.
- Безопасность информационных сетей.
- Типы онтологий: верхнего уровня, предметных областей, прикладных онтологий. Лексические онтологии.
- 3. Модели жизненного цикла программного обеспечения информационных систем в образовании.
- Классификация современных операционных систем.
- 2. Роль и место банков данных в информационных системах.
- 3.Тэги, фреймы, создание документа в html.
- Планирование процессов и потоков.
- Сетевая модель данных
- Реляционная модель данных
- 3. Формы в html документах.
- Тупики, методы устранения тупиков.
- 2. Ограничения и целостность данных в базе.
- 3. Формы, функции, мультимедиа.
- Методы реализации виртуальной памяти.
- 2. Понятие транзакции. Управление транзакциями.
- 3. Типы ссылок, глобальная структура документа, метаданные, стили, списки.
- 1. Структура и функции файловой системы.
- 2. Управление пользователями и их правами доступа к данным в базе.
- 3. Вызов cgi программ.
- Основные классы современных эвм.
- Структура информационной сети.
- 3. Заголовки запросов и ответов.
- Физическая и функциональная структура микропроцессора.
- Классификация компьютерных сетей.
- 3. Модели объектов javascript и свойств объектов.
- Типы, назначение и параметры шин.
- Основные способы доступа к среде передачи в информационных сетях.
- 3. Фреймы, наследование кода скриптов различными страницами.
- Периферийные устройства.
- Методы коммутации в информационных сетях.
- 3. Возможные способы создания Web-страниц.
- Сети эвм.
- Этапы моделирования в системе gpss World.
- Баннеры: принципы создания.