Тема 1 Введение с HTML Работа с

Зарегистрируйтесь, чтобы просмотреть полный документ!

Тема № 1 Введение с HTML Работа с основными тэгами

Введение в html HTML Hypertext Markup Language был впервые разработан Тимом Бернерс-Ли Первая спецификация этого универсального и общедоступного языка разметки - HTML 0 была утверждена в 1991 году Web-страничка обычный это текстовый соответствующей кодировке файл в В нем описывается вся страничка с помощью языка гипертекстовой разметки – HTML

Стандарты Web - HTML • используется для разбиения документа, определения его содержания и структуры, и определения значения каждой части CSS Java. Script • Каскадные таблицы стилей (CSS) предоставляю т полный контроль над тем, как выводится элемент • предоставляет Web-сайту динамические функции

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

Основные тэги html Все теги (тэг — элемент языка разметки гипертекста) делятся на два типа «одиночные» и «закрывающиеся» . Кроме того теги заключаются в следующие символы < >. Тег открывается символами < >, а закрывается </ > <html> Является обязательным тегом, он означает что между ним будет содержаться гипертекстовая разметка </html> <head> </head> - голова документа, в нем можно описать несколькими словами суть страницы. Между этим тегом можно вставить тег <title> </title> и текст расположенный между ним будет отображен в имени вкладки браузера Все тэги, расположенные между <body> </body> - являются содержанием документа.

Пример создания html-страницы Откроем блокнот notepad и внесем туда следующий текст: <html> <head> <title>Мой первый шаг </title> </head> <body> Здравствуйте, это моя первая страница. Добро пожаловать! : ) </body> </html> А теперь сохраним этот документ, присвоив ему имя *. html (прим. ) D: первые шагиindex. html Теперь откроем, допустим, Internet Explore (не закрывайте блокнот, он нам еще пригодится). Файл - Открыть - кнопка Обзор - Наш документ (index. html).

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

Заголовки, начертание <H 1> текст </H 1> <H 2> текст </H 2> <H 3> текст </H 3> <H 4> текст </H 4> <H 5> текст </H 5> <H 6> текст </H 6> Теги <h 1>, …, <h 6> относятся к блочным элементам, они всегда начинаются с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него добавляется пустое пространство. Полужирный текст Наклонный текст (курсив) Подчеркнутый текст Верхний индекс Нижний индекс

Атрибуты Атрибут является дополнением тега, он вписывается внутри него и обладает дополнительными функциями. Чаще всего атрибуты вписываются в тег , который определяет выводимый шрифт, его цвет и размер текста. • Атрибут Align служит для: ü Центрирования текста - текст ü Выравнивания по левому краю - текст ü Выравнивания по правому краю - текст ü Выравнивания по ширине - текст • Атрибут size служит для: ü Установления размера текста от 1 до 7 - текст • Атрибут color служит для: ü Установления цвета текста – можно использовать как формат RRGGBB, так и его имя - текст текст • Атрибут face служит для: ü Определения шрифта текста - текст

Атрибуты тела документа, отступы • Атрибут Bgcolor: <body bgcolor=“red”> </body> ü Устанавливает цвет фона документа в виде RRGGBB - пример: FF 0000 - красный цвет. Или же можно использовать буквенное значение – red • Атрибут Text: <body text=“white”> </body> ü Определяет цвет всего текста внутри тела документа, которому не задан фиксированный цвет. • Атрибут background: <body background="fon. gif"> </body> ü Атрибут при помощи которого можно задать картинку фоном всей страницы. При этом изображение должно находиться в той же папке что и сам файл сайта. Тег можно использовать для принудительного перевода строки. Над омраченным Петроградом Дышал ноябрь осенним хладом. Плеская шумною волной В края своей ограды стройной, Нева металась, как больной В своей постеле беспокойной.

Тема № 3 Ccылки

Ссылка Ссылкой на документы может быть текст картинка

Простейшая ссылка Тег <a> (от anchor- якорь), в него можно заключить текст или рисунок, которые станут ссылкой на те или иные документы. Атрибут тега <a> href задаёт имя и путь к документу на который указывает ссылка. <a href="prf. html">посмотреть мои фотографии</a>

Принципы прописывания пути Документ лежит в той же директории, что и документ, в котором мы ссылаемся на prf. Html Документ лежит в поддиректории /photos Ссылка на сайт http: //www. home. ru, где лежит нужный документ <a href="prf. html">мои фотографии</a> <a href="photos/prf. html">мои фотографии</a> <a href="http: //www. home. ru/prf. html"> мои фотографии</a>

Стилевое оформление ссылки Атрибут LINK Атрибут ALINK Атрибут VLINK ЦВЕТ ССЫЛКИ ЦВЕТ НАЖАТОЙ, АКТИВНОЙ ССЫЛКИ ЦВЕТ УЖЕ ПОСЕЩЕННОЙ ССЫЛКИ <body text="blue" bgcolor="green" link="red" alink="black" vlink="yellow">

Ссылка - изображение Принцип ссылки тот же, что и в случае с текстом, только между тэгами вставляется не текст, а картинка, используя незакрывающийся тег <img> и атрибут <img src=“D: //Картинки/Raspisanie. jpg”> который показывает путь до файла картинки. <a href=“Raspisanie. txt”> <img src=“D: //Картинки/Raspisanie. jpg”></a>

Ссылка внутри документа Способ № 1 Параметр тэга <a> атрибут NAME -имя закладки <A name="stih 3">Стих третий</A> На что ссылается <A href="#stih 3">Ссылка на стих третий</A> <A href="ancorpri. html#stih 3"> Ссылка на стих третий из какого-то другого документа </A> Сама ссылка Закладка в другом документе

Пример ссылки <H 2>Григорий Остер, "Вредные советы. Книга для непослушных детей и их родителей". </H 2> <A href="#stih 1">Ссылка на стих первый</A> <A href="#stih 2">Ссылка на стих второй</A> <A href="#stih 3">Ссылка на стих третий</A> <PRE> Недавно ученые открыли, что на свете бывают непослушные дети, которые все делают наоборот. Им дают полезный совет: "Умывайтесь по утрам" - они берут и не умываются. Им говорят: "Здоровайтесь друг с другом" - они тут же начинают не здороваться. Ученые придумали, что таким детям нужно давать не полезные, а вредные советы. Они все сделают наоборот, и получится как раз правильно. </PRE> <H 3><A name="stih 1">Стих первый</A></H 3> <PRE>. . . тра-ля-ля 1. . . </PRE> <H 3><A name="stih 2">Стих второй</A></H 3> <PRE>. . . тра-ля-ля 2. . . </PRE> <H 3><A name="stih 3">Стих третий</A></H 3> <PRE>. . . тра-ля-ля 3. . . </PRE>

Примечания Атрибут title предлагает информацию об элементе, для которого он устанавливается Например для тега <a> <a href="ssilka. html" title="Ваша подсказка"> ССЫЛОНЬКА </a> При наведении курсора мыши, если ваш броузер поддерживает спецификацию Html 4. 0, вы увидите

Скачать презентацию Тема 1 Введение с HTML Работа с

знакомство с HTML.ppt

Количество слайдов: 19