*Все для вашего форума*

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » *Все для вашего форума* » Учебник HTML и CSS » HTML-уроки


HTML-уроки

Сообщений 1 страница 8 из 8

1

Урок 1 | Немного о HTML и о тегах

А что такое HTML? Что скрывает за собой эта аббревиатура?

HyperText Markup Language (HTML) является стандартным языком, предназначенным для создания гипертекстовых документов в среде WEB. HTML-документы могут просматриваться различными типами WEB-броузеров. Использование HTML позволяет форматировать документы, то есть предавать простому тексту спец. эффекты (жирный шрифт, подчёркнутый, наклонный и т.д.) которые будут отображаться на вашей страничке. С помощью так же можно вставлять картинки и другие предметы.

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

Структура тега: <инструкция>

Как правило, существует стартовый тег (<инструкция>) и завершающий тег (</инструкция>). Чуть позже мы познакомимся с этими тегами.

0

2

Урок 2 | Структура документа

Когда WEB-броузер получает документ, он определяет, как документ должен быть интерпретирован. Самый первый тег, который встречается в документе, должен быть тегом <html>. Данный тег сообщает WEB-броузеру, что документ написан с использованием HTML.

   Заголовочная часть документа <head>

   Тeг заголовочной части документа должен быть использован сразу после тeга <html> и более нигде в теле документа. Данный тег представляет из себя общее описание документа. Избегайте размещать какой-либо текст внутри тeга <head>.

   Тело документа <body>

   Тело документа должно находиться между тeгами <body> и </body>. Это та часть документа, которая отображается как текстовая и графическая информация вашей странички.

   Минимальный HTML-документ будет выглядеть так:

<html>
<head>
</head>
<body>
</body>
</html>

0

3

Урок 3 | Head: заголовок, мета-теги

Большинство WEB-броузеров отображают содержимое тега <title> в заголовке окна. Заголовок, ограниченный тегами <title> и </title>, размещается внутри <head>-тегов.

<html>
<head>
<title>Самая первая страница</title>
</head>
<body>
</body>
</html>
Можно посмотреть пример и такой страницы. Заметьте, что теперь в строке заголовка окна браузера появилось то, что мы написали между тегами title.

   Meta-теги

   Чтобы облегчить жизнь поисковикам (да и себе тоже), не забывайте о meta-тегах. Все они вставляются между тегами head.:

   <META NAME="Description" CONTENT="описание вашего сайта">
   это описание должен выдавать поисковик рядом с ссылкой на ваш сайтик;

   <META NAME="Keywords" CONTENT="ключевые слова вашего сайта">
   ключевые слова, по которым поисковик найдёт вашу страницу; к сожалению поисковики сейчас больше обращают внимание на само содержание сайта, а не на ключевые слова; но всё же, лучше поставить

   <META NAME="Updated" CONTENT="дата обновления">
   дата последнего обновления сайта

   <META NAME="URL" CONTENT="http://адрес вашего сайта">
   определение главной страницы для индексирования

   <META NAME="language" CONTENT="Russian Federation">
   указание языка вашего сайта

   <META NAME="Author" CONTENT="Автор сайта">
   можно и автора указать)))

0

4

Урок 4 | Body: изменение фона, цвета ссылок, текста

Body по-русски означает "тело". Значит, всё мы вставим между этими тегами будет относиться к самой странице. В "теле" документа вы можете написать всё что хотите, разместить графику, таблицы и списки - была бы фантазия!

Чтобы наша страничка не была чёрно-белой и совсем стандартной, нужно отредактировать тег <body>. А именно задать фон страницы, изменить цвет ссылок, текста и фона.

Вот некоторые примеры изменений, которые вы можете сделать:
<body bgcolor=#код цвета> - цвет фона страницы всегда прописывайте этот тег, даже если у вас стоит фоновая картинка, ведь у посетителя может быть отключён показ графики. Очень распространённая ошибка это белый текст на белом фоне (случается когда тёмная фоновая картинка не загружается а цвет текста белый).

<body background="адрес картинки"> - фоновая картинка: картинку которая будет заполнять всю вашу страничку это и есть фоновая картинка. Советую всегда использовать картинки в формате .gif или .jpg/.jpeg . Фоны можете посмотреть здесь.

<body text=#код цвета> - цвет текста страницы

<body link=#код цвета> - цвет ссылок страницы

<body alink=#код цвета> - цвет активной ссылки
alink - active link; этот тег прописывать не обязательно, но можно и вставить - для красоты...

<body vlink=#код цвета> - цвет посещённой ссылки
vlink - visited link; очень помогает посетителю разобраться в посещённых разделах и в не посещённых
   Следовательно, тег будет выглядеть вот так:

<body background="адрес картинки" text=#код цвета bgcolor=#код цвета link=#код цвета alink=#код цвета vlink=#код цвета>

Цвета подбирайте сами, только не забывайте ставить кардинал (#) перед кодом.

После знакомства с тегом body, можно использовать все новые знания на практике. Вот такой код вы теперь можете самостоятельно написать:

<html>
<head>
<title>Моя первая страница</title>
</head>
<body background="fon/pestr/pestr1.gif" text=#000000 bgcolor=#ffffff link=#680068 alink=#000000 vlink=#680068>
Привет всем!
</body>
</html>

0

5

Урок 5 | Форматирование текста I

Этот урок будет посвящён параграфам и сменам строки. Следует запомнить что когда браузер считывает код вашей страницы, он игнорирует некоторые действия, а именно:
парагфар/смена строки (Enter)
более чем один пробел

Если вы хотите сделать более чем один пробел (non breakable space), просто вставьте следующую инструкцию, туда, куда вам надо:
&nbsp;

А вот смена строки (Enter) обозначаем тегом <br>. Это один из не закрывающихся тегом (не нуждается в </br>).
На пример, если вы хотите сделать 3 смены строки, то вставьте 3 раза тег , вот так: <br> <br> <br>.
Тег <br> ставится в конце строки с которой и будет переходить на следующую, но можно и в начале, большого значения не имеет.

Теперь хочу вас познакомить с не менее важным тегом, если по-точнее, то с тегом <p> - с параграфом.

Этот тег закрывающийся, в отличие от <br>. Весь текст, который вы вставите между тегами <p> и </p> будет единым абзацом.

По умолчанию (без форматирования) весь текст выравнивается по левому краю. Что бы ваш текст был на пример по-центру или справа, нужно в тег <p> вставить параметр align. Вот уже готовые примеры такого форматирования:

<p align="center"> *текст по-центру* </p>
<p align="right"> *текст справа*</p>
<p align="left"> *текст слева* </p>
<p align="justify"> *текст выравненный по левому и правому краю*</p>

К сожалению, параметр justify не всегда распознаётся редакторами.

Существует ещё один текст, позволяющий разбить весь текст на параграфы без особого труда. Это тег <pre> ... </pre> - преформатированный текст. Текст остаётся таким же, каким вы его создали, а именно, сохраняются все параграфы и абзацы.

Вообще, употреблять этот тег не советую, так как в других браузерах как Опера или Мозила может не прокатить - текст может появиться сплошняком!

Так что советую вам разделять всегда текст тегами и всё делать по уму, а не абы как: ели смена строки, то обязательно <br>!

Ну вот и всё! Надеюсь что теперь вы подружились с абзацами, пробелами и со сменой строки!

0

6

Урок 6 | Форматирование текста II

В этом уроке я хочу вам рассказать о форматирование текста, а именно - изменениe цвета, стиля, размера.

Первым делом разберём с вами заголовки - headings. Обычно размер заголовков больше размера шрифта на странице, но может быть и меньше. Так вот, размер заголовков может быть разным: от 1 (самый большой) до 6 (самый маленький).

Тег заголовков это <h*>, где * обозначает размер заголовка. На пример:
<h1>огромный </h1>
<h2>очень большой </h2>
<h3>большой </h3>
<h4>обычный </h4>
<h5>мелкий </h5>
<h6>очень мелкий </h6>
Внимание! <h*> имеет закрывающийся тег - </h*>.

Ну вот с заголовками разобрались, теперь перейдем к эффектам с текстом. Я приведу пример только самых распространённых тегов:
<b>...</b> - жирный текст
<b>...</b> - жирный
<i>...</i> - наклонный текст
<u>...</u> - подчёркнутый
<s>...</s> - зачёркнутый
<big>...</big> - более крупный шрифт, чем основной
<small>...</small> - более мелкий шрифт, чем основной
<tt>...</tt> - шрифт пишущей машинки (моноширинный)
<sup>...</sup> - верхний индекс
<sub>...</sub> - нижний индекс

Ещё один очень полезный тег это <center>...</center>. Текст, вставленный между этими тегам, выравнивается по-центру. Как вы заметили, этот тег тоже закрывающийся.

Приступим к изучению тега <font>. Он та и позволит нам изменять шрифт, цвет, размер текста на страничке. Как и большинство тегов, у этого есть закрывающийся тег - </font>.

Вот некоторые примеры управления текстом, которые вы можете сделать:

<font color="#xxxxxx> - цвет текста. Для того, что бы изменить цвет текста, нужно вместо "хххххх" вставить код любого цвета. Такие коды вы можете выбрать в нашей палитре.

<font size="0"> - размер текста (от -2 до 4). Как видите, размер текста можно изменять не только при помощи заголовков...

<font face="Verdana"> - определенный тип шрифта. Здесь можно вписывать несколько шрифтов - если у пользователя не будет первого шрифта из перечисленных, автоматически будет использован второй и т.д.

Следовательно, законченный тег будет выглядеть вот так:

<font color="#xxxxxx font size="0" face="Verdana"> Пишем текст между этими тегами... <font>

Вот и всё! Теперь вполне реально приукрасить текст на ваших страничках :)))

0

7

Урок 7 | Линии и отлиновки

Много вещей можно сделать на своём сайте, зная язык HTML. Сегодня я расскажу вам как делать горизонтальные линии, при помощи которых можно разделять текст или предметы.

Познакомлю вас с соответствующим тегом - <hr>. Как и некоторые другие, этот не имеет закрывающего тега ( то есть </hr>).

Если просто написать <hr>, то получится вот такая линия:

Но этим тегом можно управлять, в общем как и другими. Вот некоторые параметры:

<hr size=""> -толщина линии в пикселях
<hr width=""> - длина линии - в пикселях или %
<hr color=""> - цвет линии (внимание: только для IE!)
<hr align=""> - выравнивание линии (left, center, right)
<hr noshade> - запрет выпуклости

Вот пример тега, используя вышеприведенные параметры, и сама линия:

<hr width="380" size="4" color="purple" align="center">

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

Удачи!

0

8

"Плавающие" фрэймы - iframe

Iframe - это внедрённое окно. Это как страница внутри другой страницы. На пример, на нашем сайте я использую "плавающий" фрэйм - это окошко с розовым фоном, справа от меню (вы сейчас читает урок, который внутри этого ифрэйма).

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

Вот стандартный код любого iframe, мы его разберём:

<iframe name="tritroichki" src="index1.html" width="300" height="200" frameborder="1" scrolling="yes" marginheight="20" marginwidth="30"></iframe>

name — имя iframe (может быть любое!).

src — адрес странички, которая будет открываться внутри iframe.

width — длина iframe.

height — высота iframe.

scrolling — наличие полос прокруток (no — полос прокрутки нет, yes — есть, auto — наличие или отсутствие полос прокрутки определяет сам браузер).

frameborder — толщина рамочки викруг фрэйма (0 - без рамочки, 1 - с рамочкой и т.д.).

Ссылка при клике по которой страница открывается в iframe, то есть, в нужном нам окошечке:

<a href="page4.html" target="tritroichki">ссылка</a>

Что бы страница не открылась в новом окне, нужно обязательно прописать target в коде ссылки. Помимо этого, название фрэйма (name) не должно отличатся от того, что бы прописали в target (у меня name=target=tritroichki). Если вы всё сделали верно, страничка page4.html откроется ВНУТРИ фрейма с именем tritroichki.

Вроде всё ^^

0


Вы здесь » *Все для вашего форума* » Учебник HTML и CSS » HTML-уроки