Язык HyperText Markup Language. Заработок Веб - мастеру. Вторник, 19.03.2024, 08:46







Как продвинуть сайт


Оглавление раздела:


Часто создаваемые ошибки при вводе тегов:

1. НЕЛЬЗЯ ставить пробел после открывающей скобки "<"; 

2. Пробел НЕОБХОДИМО ставить между атрибутами тега:
  • правильное написание тега: <img scr:"123.jpg" height="300">
  • НЕправильное написание тега: <img scr:"123.jpg"height="300">
3. Кавычки в атрибутах тега ставить НЕ обязательно, но если уж Вы их поставили, не поленитесь и закрыть :)

Основные элементы программирования HTML. Структура HTML-документа.

Документы HTML состоят из двух основных частей: заголовка (HEAD) и "тела" (BODY) . И в загаловке, и в "теле" используются программные коды, называемые тегами . Теги определяют стиль шрифта, задают ссылки на файлы, управляют внедрением графики в текст, служат для создания тадлиц, а так же форм, которые используются для получения информации от пользователя.

Как я уже говорил, некоторые теги используются в одиночке, например тег <P> (тег нового обцатца). А некоторые теги требуют ОБЯЗАТЕЛЬНОГО парного ему тега, закрывающего , например тег <h1> и </h1> (шрифт первого размера). В закрывающем теге обязательно присутствует символ "/", или его еще называют "слэш".

Вот так выглядит текст в HTML, который вы видите выше:

<html>
<head>
<title> Основные элементы программирования HTML <title/>
</head>
<body>
<H1>Основные элементы программирования HTML <H1/>
<P>
Документы HTML состоят из двух основных частей: заголовка (HEAD) и "тела" (BODY). И в загаловке, и в "теле" используются программные коды, называемые тегами. Теги определяют стиль шрифта, задают ссылки на файлы, управляют внедрением графики в текст, служат для создания тадлиц, а так же форм, которые используются для получения информации от пользователя.
<P>
Как я уже говорил, некоторые теги используются в одиночке, например тег <P>(тег нового обцатца). А некоторые теги требуют ОБЯЗАТЕЛЬНОГО парного ему тега, закрывающего, например тег <h1> и </h1>(шрифт первого размера). В закрывающем теге обязательно присутствует символ "/", или его еще называют "слэш".
</body>
</html>

  1. Каждый документ должен начинаться с тега <html>. Файлы могут не содержать этот тег, в том случае, если документ создавался в специальных редакторах

  2. В начале документа должен стоять тег <head>. Между тегами <head> и </head>, обрамляющими загаловок файла, поставьте тег <title>.

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

  4. Остальную часть документа расположите между тегами <body> и </body>

  5. Теги <H1> и </H1> обрамляют текст, который будет воспроизводиться со стилем, принятым для заголовка первого уровня.

  6. После заполнения тела документа закройте тег </body> и обязательный тег </html>, который должен иметь каждый документ.


Логические стили

Один из способов оформления текстов состоит в использовании тегов логических стилей. К ним относятся шесть тегов заголовков, от H1 до H6, и два тега выделениятекста, strong, emphasis . Каждому тегу соответствует свой стиль, заданный в настройках браузера.

Во время перехода от стиля Н1 к стилю Н6 постепенно уменьшается размер и толщина шрифта.
Стиль Н1 самый крупный, его используют для оглавления, либо же выделения важных вещей на странице.
Стиль Н2 в основном используется для подзаголовков.
Стиль Н3 меньше и светлее, чем стили Н1 и Н2, его используют в том случае, если есть заголовки третьего уровня.
Стили уровней Н4, Н5, Н6 используются крайне редко, так как шрифт этих стилей маленький (чаще необходим для набросков)

Для записи адресов используется стиль <address> . Он преднпазначен для выделения адревов электронной почты, телефонов и так далее.
Тег <Cite> (citation) служит для выделения цитат.
Теги <em> (emphasis) и <strong> служат для выделения текста с целью привлечения к нему внимания.
Для записи текстов программ, символьных констант и текстов, вводимых с клавиатуры, существуют специальные логические стили. Им соответствуют теги <code> и <samp> . Выделенный текс отображается моноширинным шрифтом; обычно это Courier.
К прочим тегам, предназначенным для логического выделения, относятся <big> и <small> . Для верхнего индекса служит тег <sup> (supscript) . Для нижнего индекса - тег <sub> (subscript) .

Пример: <H1> Заголовок первого уровня </H1>

  • В начале текста заголовка поставьте открывающий тег.
  • Между тегами поместите текст, которому хотите задать стиль.
  • В конце текста поставьте закрывающий тег.

Выравнивание текста по горизонтали

С помощью тегов HTML можно управлять горизонтальным выравниваем текста. Если не оговаривать способ выравнивания, все элементы в документе будут выравниваться по левому краю и иметь неровное право поле, во многих документов это неплохо смотрится. Однако вы можете захотеть создать более выдающуюся домашнюю страницу, используя выравнивание по левому, правому краям или по середине.

Длинные абзатцы, выравненные по центру, могут быть трудны для чтения, но центрирование может придавать тексту определенную выразительность, если соответствует характеру создаваемой Web-страницы.
Некоторые браузеры поддерживают теги <left> и <right>, которые действуют аналогично тегу центрирования абзатца <center>. Однако более современные браузеры вмечто тегов <left> и <right> используют атрибуты align= . Атрибут align= встраивается в теги абзаца <Р> или заголовках ( <Н1> - <Н6> )

Пример:

<Р align=right> Это называется выключкой по правому полю </Р>


<H1 align=center> Центрирование заголовка </Н1>

<center>Абзац, выравненный по центру, может быть труден для прочтения. </center>


"Бегущая строка" в Web - документах

Сейчас все браузеры поддерживают тег <marquee> , дающий возможность использовать "бегущую строку" - это привлекает повышенное внимание при просмотре страницы, однако, может вызывать раздражение, поэтому его не используют часто.

Характеристики "бегущей строки" задает атрибут <marquee> , При хороших соотношениях между длиной сообщения, размером шрифта и скоростью движения строки, "бегущая строка" читается хорошо и выглядет очень привлекательно.

Вот пример записи "бегущей строки" со всевозможными атрибутами:

< marQuee
height=20 width=70%
hspace=5 vspace=5 align=top
bgcolor=yellow
direction=left loop=infinite behavior=scroll
scrollamount=5 scrolldelay=100 >

это бегущая влево строка, различные примеры строки можно увидеть Здесь
</marquee>

  • Поставьте открывающий тег <marquee
  • Установите атрибуты "бегущей строки" Height= и Width=. Их аргументы задаются в пикселях или процентах от размеров окна.
  • Задайте все атрибуты "бегущей строки", которыми хотите управлять (см. выше, описание - ниже)
  • Между открывающим тегом <marquee> и </marquee> разиестите нужный Вам текст
  • Поставьте закрывающий тег </marquee>

Атрибут Width= определяет ширину поля "бегущей строки" и задается в пикселях или процентах от ширины окна, а атрибут Height= определяет высоту поля и задается в пикселях.
Атрибуты HSpase= и VSpase= определяют интервалы по горизонтали и вертикали между текстом строки и краями ее поля.
Атрибут align= определяет расположение текста в поле "бегущей строки": top (вверху), bottom (внизу), middle (посередине).

Атрибут bgcolor= позволяет установить цвет фона, он задается либо шестнадцатеричным кодом, либо названием (можно найти тут)
Атрибут direction= определяет направление движения текста в "бегущей строке" - right (слева направо), left (справа налево)

Атрибут behavior= задает способ движения "бегущей строки". Аргумент scroll обеспечивает движение, при котором текаст появляется от одного края и исчезает за другим, при slide, "бегущая строка" вытягивается из одного края и останавливается у другого. Аргумент alertnate задает переменное направление - от одного края к другому и обратно.
Aтрибут loop= задает число повторений в тексте "бегущей строки". При аргументе infinite "бегущая строка" будет присутствовать все время. Атрибут loop= не влияет на поведение "бегущей строки" если для атрибута behavior= стоят аргументы slide или alertnate

Атрибут scrollamount= устанавливает длину в пикселах, на которую текст будет перемещаться за 1 такт. При большой величине показателя текст движется рывками, при малой - движение замедленно.
Атрибут scrolldelay= определяет величину паузы между отдельными тактами перемещения текста, он задается в тысячных долях секунды, например если scrolldelay=1000, то то пауза между шагами равна 1 секунде.


Текстовые ссылки

Текстовые ссылки позволяют щелчком по выделенному слову или фразе перейти на другую Web-страницу. Эта возможность называется гипертекстом .
Ниже показаны разные способы отображения гипертекста:

  • Самая простая ссылка:
    <a href="http://osnovihtml.do.am/publ/">Каталог статей</a>
  • Ссылка откроется в новом окне:
    <a href="http://osnovihtml.do.am/publ/" target="_blank">Каталог статей</a>
  • Всплывающая подсказка при наведении на ссылку курсора мыши:
    <a href="http://osnovihtml.do.am/publ/" title="Редактирование шрифта и абзацев">Каталог статей</a>
  • Ссылка в виде картинки (баннера):
    <a href="http://osnovihtml.do.am/publ/" title="Редактирование шрифта и абзацев" <img src=ссылка на картинку></a>
  • Ссылка в виде кнопки (формы):

    <form action="http://osnovihtml.do.am/publ/" target="_blank"><input type=submit value="Каталог статей"></form>
! Аргумент target="_blank" открывает ссылку в новом окне, если это не нужно, уберите его.

Ссылки в пределах одного документа

Текстовые ссылки могут указывать не только на другие Web-страницы, но и на разделы в пределах одной Web-страницы. Такие ссылки требуют наличия двух частей: якоря и самой ссылки. Якорь определяет точку на странице, куда происходит переход. Такая ссылка ничем почти не отличается от обычной ссылки, только в ней используется не адрес страницы, а якорь.
Вот пример записи таких ссылок:
Сама ссылка: <a href="#text">Текстовые ссылки</a>
Якорь: <a name="text">Текстовые ссылки</a>

Пример такого типа ссылки можно увидеть на этой странице, оглавление и есть этот пример :)


Размер графического изображения

Время загрузки графических изображений является одной из основный проблем, которые нужно учитывать при создании и обработки Web-страниц.
Существует 2 способа решения этой проблемы: первый - добавления в тег IMG атрибута lowsrc , или второй - установка атрибутов ширины ( width) и высоты ( height) изображения.

Стандарт Изменена ширина Изменена высота

Атрибуты размера изображения width и height, которые измеряются в пикселях, предупреждают браузер до приема всего графического файла о том, какой будет размер загружаемого изображения. Со всеми учетами размеров, браузер сначало выделяет место, требуемое для изображения, готовит макет документа, показывает текст и только после этого загружает графику. Это значит что клиент может прочитать содержимое до того, как загрузится изображение.
Вот так выглядит тег добавления изображения с атрибутами изменения размера изображения:
<img scr="photo1.gif" width="170" Height="73">
Как создать рамку вокруг вокруг изображения.
Для картинок в браузере так же существуют рамки, ими можно управлять, их можно создать, отменить и изменить толщину, она, кстати, измеряется в пикселях.
Изображение без рамки Изображение с рамкой

Рамки для картинок - это конечно же хорошо, однако не все хотят видеть эту черную полосу вокруг изображения. По этому еще есть функция поля вокруг изображения .
Как создать поле вокруг изображения.
Пустые поля над и под изображением создаются с помошью атрибута VSpace в теге <img>. Поля слева и справа - атрибутом HSpace . Размеры полей так же как и размеры рамки задаются в пикселях.
Ниже 2 примера, без рамки и с рамкой:

В обычных условиях графика встраивается вплотную к тексту. Текст плотно обтекает картинку со всех сторон. Иногда это выглядит нелепо, или не красиво, по этому вокруг изображения делают пустые поля.

В обычных условиях графика встраивается вплотную к тексту. Текст плотно обтекает картинку со всех сторон. Иногда это выглядит нелепо, или не красиво, по этому вокруг изображения делают пустые поля.


Разделительные полосы

Для разбиения Web-страницы на части используют разделительные полосы, они проходят по всей ширине страницы и вставляются тегом <hr>. В месте вставки полосы текст разбивается. Разные браузеры изображают полосы по-разному, но все они масштабируют длину полосы в соответствии с шириной окна браузера.

Вставка разделительных полос
Вот так выглядит стандартная полоса:

Но их можно форматировать, изменить, например:
- длину полосы и способ расположения её








- толщину полосы


- наличие или отсутствие оттенения


Какие атрибуты и за что отвечают, читайте ниже

Вид разделительных полос можно изменить некоторыми атрибутами, встраиваемые в тег <hr>.
Атрибут size задает толщину полосы, которая измеряется в пикселях.
Атрибут wight задает длину полосы. она может измеряться либо в пикелях, либо в процентах от ширины окна.
Атрибут noshade позволяет создать полосу без обычного оттенения.
Если длина полосы меньше ширины окна, можно выбрать её положение, за это отвечает атрибут align

Списки

Существует два вида основных списков: упорядоченные (по алфавиту или по цифрам) и неупорядоченные (с вводным маркетом).
Упорядоченные списки задаются парным тегом <ol>, а неупорядоченные - тегом <ul>. Оба вида используют для элементов списка одиночный тег <li>.

Для неупорядоченных списков есть три вида вводных маркеров. Это делается с помощью атрибута type= внутри тега <ul>. Возможные атрибуты - disc(круг), circle(окружность), square(квадрат).
Для упорядоченных списков существуют следующие способы индексации: арабские цифры, прописные буквы, строчные буквы, римские цифры. Это делается при помощи атрибута type= с соответствующем аргументом (1, А, а, i).

<ol type=1 start10>

  1. Этот список прописывается арабскими цифрами и начинает счет от числа 10
  2. Этот список прописывается арабскими цифрами и начинает счет от числа 10
  3. Этот список прописывается арабскими цифрами и начинает счет от числа 10
  4. Этот список прописывается арабскими цифрами и начинает счет от числа 10
  5. Этот список прописывается арабскими цифрами и начинает счет от числа 10
  6. Этот список прописывается арабскими цифрами и начинает счет от числа 10
</ol>

<ul type=circle>

  • А этот список будет прописываться окружностью
  • А этот список будет прописываться окружностью
  • А этот список будет прописываться окружностью
  • А этот список будет прописываться окружностью
  • А этот список будет прописываться окружностью
  • А этот список будет прописываться окружностью
    Можно так же и квадратом или кругом, как я писал ранее:
  • Вот пример квадратного маркера, в вводится он вот так: <li type="square"> Элемент списка
  • А для маркера в виде круга нужно набирать тег вот так: <li type="disc"> Элемент списка
</ul>


В начало


  • Развлечения: смотреть ТВ слушать Радио онлайн
  • Для детей: раскраски, игры, мультфильмы
  • Создание сайтов в Донецке и области
  • Русские шашки для детей. Интеллектуальное развитие ребёнка в Донецке.
  • Магазины продажи цветов,цветы продажа Киев,продажа цветов цены Борисполь
  • Интернет магазин климатической техники «КлимТехМаркет». Кондиционеры, вентиляция, отопление, водоснабжение, очистители и увлажнители.
  • Строительство бассейнов в Донецке и области
  • Спортивно - кинологический клуб Костюка
  • Продажи цветов,цветы продажа в Макеевке,продажа цветов цены Макеевка
  • Игры всех жанров для компьютера
  • Всё о рыбалке
  • Сайт Донецкого художника Куликова В.В.
  • Продажа недорогой детской и женской одежды в Киеве и области
  • Рефераты




  • WMlink.ru - рекламный брокер

     


    Яндекс.Метрика
    45 Rus © 2024 Создано при помощи