Главная | Обратная связь | Поможем написать вашу работу!
МегаЛекции

Принудительный разрыв строки




Лекция 1. Введение.

Назначение HTML. Основные понятия.

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

Улучшеная страничка

Форматирование текста

Управление цветом

Рисунки на Web - странице.

Гиперссылки

Таблицы

Создание и форматирование таблиц

Разметка Web- страницы при помощи таблицы

 

 

Назначение HTML. Основные понятия.

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

Окройте любую Web- страничку. То, что вы видите в броузере – это ее “лицо”. Чтобы увидеть “изнанку” Web- страницы, выполните команду View \ HTML Code. Откроется текстовый редактор Блокнот, в котором вы увидите “устройство” этой страницы.

Введем несколько новых терминов.

НТML – язык разметки гипертекста

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

Отдельный документ, выполненный в формате HTML, называется:

HTML – документом

Web- документом

Web- страницей

Такие страницы имеют расширение HTM, HTML.

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

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

Каждая HTML - страница имеет свой уникальный URL - адрес в Интернете.

Скрипт

Браузер - программа для просмотра Web- страниц

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

Любая Web- страница представляет собой набор элементов.Основная идея гипертекста – возможность вложения элементов.

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

< Начальный тэг >Содержание элемента </Конечный тэг>

 

 

Пример 1.

< P><I> Этот текст в отдельном обзаце </ P></I>

< P align = " center"><I> Этот текст выровнен по центру экрана </I></ P>

Атрибут - параметр или свойство элемента. Атрибуты располагаются внутри начального тэга и отделяются друг от друга пробелами.

Пример 2.

< P align = " center"> Этот текст выровнен по центру экрана </ P>

Табуляция для вложенных, новая строка для каждого элемента.

 

Структура HTML документа. Простейшая HTML - страничка.

Устройство простейшей HTML- пронрамми изучим на следующем примере.

Любая Web - страница начинается с тєга <HTML> и заканчивается тєгом </HTML>.

Пример 1. doc1.htm  
<HTML> <HEAD> < meta http-equiv = “Content-Type” content =”text/html; charset = windows-1251 “> <TITLE> Упражнение 1 </TITLE> </HEAD> <BODY> <h1> Первый HTML -- документ </h1> <hr> <p> Корова похожа на лошадь. А лошадь не похожа на корову. Имеено это сходство мы берем за основу </p> </BODY> </HTML>   Начало HTML - документа Начало головной части Информация о документе   Название документа Конец головной части Начало тела документа   Заголовок Горизонтальная линия Начало абзаца Абзац   Конец абзаца Конец тела документа Конец HTML - документаа  

HTML – программа

Команды языка HTML (теги) заключаються в угловые скобки. Теги парные. Первый тег открывает описание команды, второй, отличающийся от первого наличием косой черты „/” перед ключевым словом – закрывает его.

Тег <HTML> открывает программу, а тег </HTML> - закрывает ее.

Между этими двумя основными тегами располагается головная часть программы и ее тело.

<HTML>

головная часть

тело

</HTML>

 

Головная часть программы

В блоке <HEAD> … </HEAD> описываются общие правила отображения HTML –документа и содержится вспомогательная информация о документе.

Команда <META > задает информацию о кодировке, в которой написан HTML - документ.(стандартная кодировка Windows).

Между парой тегов <TITLE> располакается имя документа, которое показывается в заголовке окна браузера.

 

Тело программы

Между тегами <BODY> располагаются команды, следуя которым браузер выводит информацию в окно документа.

<body background= файл_картинка bgcolor=цвет>

Осрбый паркетный фон: висота - 1 пикел, ширина-1600 пикселов.

Заголовки

Разделяют информацию на отдельные логические части. Поддерживаются заголовки 6 - уровней.

<Hn>Текст заголовка </Hn> n = 1-6

Горизонтальная линия

Горизонтальная линия задается тегом <hr>. Он не имеет парного. <hr>.

Абзац

Абзацы отделяются друг от друга пустыми строками. Задается абзац тегам <p> и </p>, между которыми помещается текст. Парный тег </p> просто игнорируется браузером.

Броузер выполняет команду следующим образом:

  • Перед абзацем выводится пустая строка;
  • Абзац выравниватся по левому краю;
  • Между словами помещается ровно по одному пробелу независимо от того, сколько пробелов проставлено в HTML программе;
  • Перенос текста на новую строку происходит тогда, когда очередное слово не помещается на экранной строке, а не тогда, когда новая строка начинается в HTML –программе.

 

Как работает браузер

Улучшеная страничка

<p>Корова похожа на лошадь.

<p>А лошадь не похожа на корову.

<p>Имеено это сходство

<p> мы берем за основу

Принудительный разрыв строки

Команда <br> заставляет браузер продолжать вывод абзаца с новой строки. Не имеет парного.

<p>

Корова похожа на лошадь. <br>

А лошадь не похожа на корову. <br>

Имеено это сходство <br>

Мы берем за основу.

Вопросы и упражнения.

  1. Что такое HTML- программа
  2. Кто выполняет программу
  3. При записи абзаца поставили между соседними словами поставили 5 пробелов.Сколько прбелов увидит он в броузере? (пять, один, ни одного, два)
  4. <P>

Иванов

Иван

</P>

Как покажет текст браузер?

· в две строчки

· в одну строчку с двумя прбелами

· в одну строчку с одним прбелом

· не покажет вовсе

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

 

Программа 1 Программа 2 Программа 3
<P> Іванов <br> Иван<br> </P>   <P> Іванов<br> Иван </P>   <P> Іванов <br> Иван </P>  

 

Форматирование текста

Структура, стиль и внешний вид текстового документа

Можно рекомендовать следующий способ оформления:

Поделиться:





Воспользуйтесь поиском по сайту:



©2015 - 2024 megalektsii.ru Все авторские права принадлежат авторам лекционных материалов. Обратная связь с нами...