Time to site

Здесь можно заказать сайт и продвижение в сети

телефоны: +3 (095) 818 40 61 или +3 (063) 135 02 90

Вы здесь: Главная / Статьи / Создание сайта / Основы HTML. Изображения, закладки, рамки
18
Дек2013

Основы HTML. Изображения, закладки, рамки

Основы HTML. Изображения, закладки, рамки

В прошлой статье я писал про HTML. Сейчас я хочу продолжить тему прошлого поста, и рассказать вам про еще несколько «фишек» в HTML.

Как оформить страницу HTML

Нам для этого потребуется любой текстовый редактор, но я бы предпочел Notepad ++. Для начала поставьте кодировку UTF-8 без BOM и синтаксис XML. Это поможет вам разобраться в контейнерах.
Начало документа - <DOCTYPE html> - мы показали, что работаем в HTML. Вторая строка - <html> - подтверждение. Третья - <head> - голова. Здесь мы прописываем различные теги для верха страницы. Первый тег в контейнере <head> - <META charset=”utf-8”>. Мы указали, что мы работаем в кодировке UTF(этот тег не закрывается, как и самая первая строчка). Следом за ней - <title> - это текст, который мы видим на вкладках в браузере. Тайтл – текст. После – закрывающийся тег тайтл. Потом закрываем тэг <head>, и на след строке открываем тэг <body>(тело страницы). И начинаем писать. Не забываем в конце позакрывать все теги.

Изображение в HTML

Чтобы разобраться, как вставлять изображения на ваш сайт и делать кнопки – желательно прочитать мой прошлый пост про ссылки в HTML. Если вы разберетесь с ссылками, то вставить изображение в сайт не составит особого труда. Для этого используют тэг <img>. Также этот тэг обязан содержать атрибут src, который будет говорить об расположении нашего изображения, и путь, куда оно ведет, как ссылка. Допустим, изображение расположено на диске «D», в папке «Folder», и называется img1.jpg. Для вставки данного изображения прописываем код так:

<img src="file://d:/Folder/img1.jpg" /> 

Или же если нам надо закинуть изображение из хостинга, или стороннего ресурса – можно писать тег так:

<img src="file://d:/Folder/img1.jpg" />

Готово! Теперь картинка у нас на сайте. Как сделать картинку кликабельной? Для этого используют следующий код :

<a href="/ссылка"><img src="/расположение_картинки" alt="текст" border="0" /></a>

Вообще, существует и ряд других атрибутов для изображения, но мы собрали самые необходимые, потому что с развитием HTML некоторые атрибуты отменились вообще.

  • Первый атрибут - src – является обязательным, так как указывает абсолютный или относительный адрес файла изображения.
  • alt – тоже обязательный атрибут, который показывает альтернативный текст. Возможно сейчас мы инее увидим его, но первые пользователи интернета, у которых скорость была от 16 килобит, помнят, что зайдя на сайт, картинки грузились не сразу, и пока они грузились – на их месте оказывалась рамка и название картинки. Это и есть альтернативный текст.
  • Width и Height – ширина и высота изображения, соответственно. Но не рекомендую ими злоупотреблять.
  • Border – это рамка, а значение 0 - это её толщина.

Закладки

Что такое закладки в HTML? Видели ли вы когда-нибудь ссылку, при нажатии которой вас бы перенесло не на другую страницу, а на эту, но только к отдельному абзацу/графе/форме? Например, когда заполняйте много граф при регистрации, и где-то напишете неправильно, вас перенаправит в то место, где вы ошиблись. Это и называется «закладка». Как её делать?
Для этого нам следует указать в тексте, или заголовке атрибут «id» + уникальный идентификатор элемента. К примеру мы сделали закладку 1 в заголовке «наш текст». Смотрим, что из этого вышло:

<h2 id="chapter1">Наш текст</р2>

Чтобы на неё сослаться в текущем документе надо написать ссылку:

<a href="#chapter1">Перейти к нашему тексту</a>

Чтобы сослаться на документ на другой странице нам нужно указать URL этой страницы:

<a href="/htmldocs/book.html#chapter5">Перейти к 5й главе</a>

Прочитано 122 раз Последнее изменение Среда, 18 Декабрь 2013 12:50
Оцените материал
(1 Голосовать)
Другие материалы в этой категории: « Гиперссылки в HTML. Основные примеры

Комментарии  

+1 # Игорь 20.12.2013 07:57
Про изображения - весьма полезно
Ответить | Ответить с цитатой | Цитировать
+1 # Администратор 20.12.2013 07:58
Всегда рады помочь :lol:
Ответить | Ответить с цитатой | Цитировать
0 # Валера 28.12.2013 10:51
С закладками контент читается легче ;-)
Ответить | Ответить с цитатой | Цитировать

Добавить комментарий


Защитный код
Обновить

Мы в социальных сетях

Связаться с нами

Веб студия Time To Site
г. Донецк, бул. Шевченко, д. 133
Телефон: +3 (8095) 818-40-61
Мы работаем с 10:00 до 18:00

QR - код