Лабораторная работа №1 по HTML

Автор: | 23.09.2015
Нет комментариев

Лабораторная работа №1:

Задание сверстать страницу по ссылке 

Ход выполнения работы:

  1. Создайте сайт (папку) и назовите «dog»

В папку «dog» создайте папку с изображениями «images» и создайте файл index.html.

  1. Откройте index.html через NotePad++
  1. Напишите структуру html
 <html>
      <head>
        <title></title>
     </head>
    <body></body>
  </html>
  1. Пропишите все meta тэги (<meta name=»description» content=»описание сайта»> и т.д.)
  1. Сделайте верстку по по ссылке 
  1. Создайте гиперссылку на изображения и укажите путь к изображениям. 

___________________________________________________________________

Форматирование шрифтов. Шрифты различаются по своему внешнему виду (начертанию), по размеру, по стилю (прямой, курсив или наклонный) и по «жирности» отображения (нормальный, полужирный).

  • font-family – приоритетный список шрифтов. Вместо названия конкретного шрифта можно использовать типовые семейств шрифтов: serif, sans-serif, cursive, fantasy, monospace.
  • font-style – стиль шрифта: нормальный (normal), курсивный (italic) или наклонный (oblique).
  • font-weight – жирность шрифта: нормальная (normal), полужирный (bold).
  • font-size – размер шрифта. Его значение может быть абсолютным (xx-small, х-small, small, medium, large, x-large, xx-large или в pt) или относительным (larger и smaller, процентах или em).
  • line-height – высота строки.

Для сочетания всех возможных стилей для шрифта используется свойство font. Если свойство не задаётся, то это соответствует значению по умолчанию. Размер шрифта и высота строки задаются через косую черту.

Р {font-family: Impact, «Times New Roman», serif}

Р {font-size: l2pt}

Р {line-height: l4pt}

Цвет и фон. Свойства этой категории определяют цвет и фон элемен-та. Фон можно задать в виде цвета или изображения.

  • color – цвета текста. Начальное значение – transparent, которое определяет фон элемента как прозрачный.
  • background-color – цвет фона.
  • background-image – фоновое изображение.

background-image: url(путь к файлу) | none | inherit

text-align

Данный стиль задает выравнивание текста внутри родительского блока. Может иметь значения left, right, center.

Тег <img>

Тег <img> предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG или PNG. Адрес файла с картинкой задаётся через атрибут src. Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив тег <img> в контейнер <a>. При этом вокруг изображения отображается рамка, которую можно убрать, добавив атрибут border=»0″ в тег <img>.

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

Синтаксис

HTML <img src=»URL» alt=»альтернативный текст»>
XHTML <img src=»URL» alt=»альтернативный текст» />

Атрибуты

alt — Альтернативный текст для изображения.

width – Ширина изображения.

height – Высота изображения.

Src — Путь к графическому файлу.

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

Не требуется.

Пример

<img src=»images/girl.png» width=»189″ height=»255″ alt=»Фото моей дочки»>

ТЕГ <a>

Тег <a> является одним из важных элементов HTML и предназначен для создания ссылок. В зависимости от присутствия атрибутов name или href тег <a> устанавливает ссылку или якорь. Якорем называется закладка внутри страницы, которую можно указать в качестве цели ссылки. При использовании ссылки, которая указывает на якорь, происходит переход к закладке внутри веб-страницы.

Для создания ссылки необходимо сообщить браузеру, что является ссылкой, а также указать адрес документа, на который следует сделать ссылку. В качестве значения атрибута href используется адрес документа (URL, Universal Resource Locator, универсальный указатель ресурсов), на который происходит переход. Адрес ссылки может быть абсолютным и относительным. Абсолютные адреса работают везде и всюду независимо от имени сайта или веб-страницы, где прописана ссылка. Относительные ссылки, как следует из их названия, построены относительно текущего документа или корня сайта.

Синтаксис

<a href=»URL»>…</a>

<a name=»идентификатор»>…</a>

Атрибуты

Title — Добавляет всплывающую подсказку к тексту ссылки.

Href — Задает адрес документа, на который следует перейти.

Списки <UL> <LI>

Тег <ul> устанавливает маркированный список. Каждый элемент списка должен начинаться с тега <li>. Если к тегу <ul> применяется таблица стилей, то элементы <li> наследуют эти свойства.

Синтаксис

<ul>

<li>элемент маркированного списка</li>

</ul>

Пример

 

<!DOCTYPE HTML>

<html>

            <head>

                        <meta charset="utf-8">

                        <title>Тег UL</title>

           </head>

 <body>

  <ul>

                                    <li>Чебурашка</li>

                                   <li>Крокодил Гена</li>

                                   <li>Шапокляк</li>

                        </ul>

 </body>

</html>