Первые шаги — Учебник (руководство) по хтмл (html). Ступенька 1-ая.
Учебник по Html для чайников. Инструментарий.
Ступенька 1-ая.Порядок прежде всего, поэтому перед началом работы мы создадим на нашем компьютере отдельную папку для будущей страницы.
D:\первые шаги\
У себя на компьютере я создала такую папку на диске D, и назвала ее Первые Шаги. Вы, естественно, можете создать вашу папку, где угодно, и назвать ее, как угодно. Теперь откроем блокнот – notepad (start – programs – accessories – notepad или пуск – программы – стандартные – блокнот) и скопируем туда следующий текст:
<html>
<head>
<title>Мой первый шаг </title>
</head>
<body>
Здравствуйте, это моя первая страница.
<br>
Добро пожаловать! 🙂
</body>
</html> (посмотреть)
Сохраним этот документ, присвоив ему имя *.html
D:\первые шаги\index.html
Многие читатели спотыкаются на фразе: «А теперь сохраним этот документ, присвоив ему имя *.html«, они пишут письма, о том, что у них получается сохранить, только как текстовой документ *.txt, а вот как *.html — никак. Чтобы в дальнейшем избежать этого глупого недоразумения, я и пишу это примечание.
Если вы сохраняете документ, через Файл -> Сохранить (File -> Save), то, естественно, что он сохраняется как *.txt. Надо сохранять ваш документ следующим образом:
— Файл -> Сохранить Как (File -> Save as)
— Дальше вводите имя своего документа, например: index.html (а не просто index; приписочка *.html должна быть обязательно).
— Если вы уже сохранили ваш документ, как *.html, то при внесении изменений в этот документ вы можете уже сохранять их через Файл -> Сохранить (File -> Save).
Вот и все. Надеюсь, теперь у всех все будет в порядке.
Теперь откроем броузер, допустим, Internet Explorer (не закрывайте блокнот, он нам еще пригодится), и откроем в броузере наш документ.
Файл — Открыть — кнопка Обзор — Наш документ (index.html)
File – Open – Browse – index.html
Если мы чего-то изменим в нашем *.html документе (в блокноте), то, чтобы посмотреть, как это выглядит в нашем броузере, надо не забывать нажимать в броузере кнопку ОБНОВИТЬ. Если изменений не видно, то это значит, что вы где-то что-то неправильно написали, или забыли сохранить документ.
Посмотрим теперь, что у нас получилось, и разберемся, как оно так получилось 🙂
Первые шаги — Учебник (руководство) по хтмл (html). Ступенька 2-ая.
Учебник по Html для чайников. Инструментарий.
Ступенька 2-ая.
<html>
<head>
<title>Мой первый шаг </title>
</head>
<body>
Здравствуйте, это моя первая страница.
<br>
Добро пожаловать! 🙂
</body>
</html> (посмотреть)
Первое, что нам нужно усвоить: хтмл (html) — это то, что мы сейчас изучаем. Второе, что нам нужно усвоить: html не является языком программирования, он предназначен для разметки текстовых документов (т.е. с помощью него мы размечаем текст, таблицы, картинки и т.д. на нашей странице). То, как будут выглядеть картинки, текст и другие элементы на вашей странице, и как они будут располагаться относительно друг друга, определяют метки (tags или тэги).
Пример тэга: <br> (перенос текста на другую строку). Попробуйте вставить еще несколько тэгов <br> в нашем документе перед «добро пожаловать!». Сохраните. Посмотрите в вашем броузере, что получилось.
Итак, все, что находится между < и > — это тэг. Текст, не находящийся между такими скобками < > — весь виден при просмотре в броузере.
Как мы видим на нашем примере: тэгов много, и они разные :). Обратите внимание на картинку, она тут не просто так, она показывает нам обязательные тэги. Обязательные теги, это такие теги, которые вы всегда должны прописывать для каждой своей страницы, даже не смотря на бури, ураганы и другие стихийные бедствия.
<html>
Этот тэг должен открывать документ. Если есть открывающий тэг, то должен быть и закрывающий:
</html>
Некоторые тэги, вроде <br>, не требуют закрывающего тэга.
Итак, вернемся, к нашему документу и рисунку.
Первые шаги — Учебник (руководство) по хтмл (html). Ступенька 8-ая.
Учебник по Html для чайников. Простейшие.
Ступенька 8-ая.После того, как мы узнали о том, как задавать размер шрифта, настало время поговорить о том, как определить стиль шрифта. В этой главе мы узнаем, как выделить текст курсивом, подчеркнуть, перечеркнуть, сделать полужирным, как задавать моноширинный текст, как делать верхний и нижний индексы – все эти тэги, как правило, рассматриваются вместе, и мы не будем отступать от традиций.
Сначала рассмотрим курсив и полужирный текст:
<b> Полужирный текст </b>
<i> Наклонный текст (курсив) </i>
Как видите, все просто. Можете их сами понатыкать в тексте, где хочется, для пробы, а в примере я снова помучаю виртуального друга:
Теперь пара строк о моширинном шрифте. Что это такое за шрифт? Это шрифт с символами одинаковой фиксированной ширины, как шрифт у пишущей машинки. А тэг для него следующий:В наш пример я его вводить не буду (сделайте это самостоятельно).
Также моноширинным шрифтом отображается текст заключенный в тэг <pre></pre>:
<pre>
текст (куча пробелов) текст
текст (куча пробелов) текст
текст (куча пробелов) текст
</pre>У тэга есть одна замечательная особенность: текст, заключенный в него, выводится с точностью до пробела так, как вы его набили в блокноте. Этот тэг вам может быть полезен, допустим, для форматирования стихотворений.К одному фрагменту текста может применяться сразу несколько тэгов:
<tt><b><i> текст </i></b></tt>
В нашем примере текст моноширинный, полужирный, и выделен курсивом (вот так-то:). Не бойтесь использовать различные комбинации тэгов, экспериментируйте, но с умом:)
Итак, у нас еще осталось несколько тэгов, которые мы должны освоить на этой ступеньке, прежде чем двинуться дальше.
Подчеркнутый текст вводится при помощи тэга <u>:
<u> Подчеркнутый текст </u>
Тэги <strike> и <s> представляют текст перечеркнутым шрифтом, можете использовать какой вам угодно из них, принципиальной разницы между ними нет:
<strike> Перечеркнутый </strike>
<s> Перечеркнутый </s>
Тэг <big> представляется крупным шрифтом, а <small> малым шрифтом относительно основного текста:
<small> Малый </small>
Нормальный текст
<big> Большой </big>
Тэги Sup и Sub — определяют верхний и нижний индексы. Sup — верхний, Sub — нижний. Где они могут пригодиться? Ну, например, при написании какой-нибудь формулы — H2O (все, что мы выносим со школьной скамьи:).
Нижний индекс <sub> sub </sub>
Вот, собственно, и все. Можем переходить на следующую ступеньку.
Первые шаги — Учебник (руководство) по хтмл (html). Ступенька 11-ая.
Учебник по Html для чайников. Простейшие.
Ступенька 11-ая.Итак, мы задались вопросом как же сделать так, чтобы текст располагался весь рядом с картинкой, а не только одна его строчка. Все очень просто. Давайте вспомним об атрибуте align, который отвечает за выравнивание. Атрибут align есть и у картинок:
<img src=»pr1.png» align=»left»>
Это означает, что картинка будет прижата к левому краю экрана, а текст будет обтекать ее справа. Чтобы сделать наоборот (картинка справа, текст слева) надо прописать right:
<img src=»pr1.png» align=»right»>
Но это не все: текст может располагаться внизу картинки (это по умолчанию) — (1), посередине — (2), и вверху — (3):
(1) — <img src=»pr1.png» align=»bottom»>
(2) — <img src=»pr1.png» align=»middle»>
Кроме атрибута align для тэга <img> можно ввести еще несколько атрибутов:
(1) — <img src=»pr1.png» vspace=»10″>
(2) — <img src=»pr1.png» hspace=»30″>
(3) — <img src=»pr1.png» alt=»моя фотография»>
(4) — <img src=»pr1.png»>
(5) — <img src=»pr1.png»>
(6) — <img src=»pr1.png» border=»5″>
Теперь последуют объяснения по пунктам.
(1) — атрибут vspace — задает расстояние между текстом и рисунком (по вертикали). Расстояние задается в пикселях. Pixel — минимальная единица изображения, точка. Например, разрешение экрана 800х600 — 800 на 600 точек. В нашем примере расстояние равно 10 пикселям.
(2) — атрибут hspace — тоже задает расстояние между текстом и рисунком, но по горизонтали. Расстояние задается в пикселях. В нашем примере оно равно 30 пикселям (точкам).
(3) — атрибут alt — краткое описание картинки. Если навести курсором мыши на рисунок, и так подержать его (курсор) несколько секунд, выскочит описание картинки. В нашем случае это будет фраза — «моя фотография». Если параметр alt не задавать, описания не будет. Но умные люди говорят, что описание картинкам задавать следует (особенно, если это кнопки), т.к. есть особенные люди, которые бродят по интернету с отключенной графикой. Без alt им не будет видно на что нажимать (если картинка является ссылкой или кнопкой в меню), т.к. картинка не отображается, а при заданном alt, можно увидеть надпись, для чего картинка предназначена.
(4) атрибут width — ширина самой картинки (в пикселях). Если ширину не задавать специально, то по умолчанию она будет равна реальной ширине картинки (а так вы можете ее сделать или уже, или шире).
(5) — атрибут height — высота самой картинки (тоже в пикселях). Так же как в случае с width высоту (height) картинки можно и не задавать. Правда, те же умные люди говорят, что размеры картинок следует задавать, для тех же особенных людей с отключенной графикой…
(6) – атрибут border — рамка вокруг самой картинки (в пикселях). Можно не задавать. Однако, по умолчанию, рамка вокруг картинки есть всегда. И если вы хотите убрать ее, то выставляйте атрибут border равным нулю.
Как мы помним, атрибуты для одного тэга могут употребляться одновременно друг с другом, чтобы избежать путаницы продемонстрирую наглядно на нашей страничке. Введем следующие атрибуты для нашей картинки:
<img src=»pr1.png» align=»left» hspace=»30″ vspace=»5″ alt=»моя фотография»>
Наша картинка будет прижата к левому краю экрана, текст будет обтекать ее справа, расстояние до текста по горизонтали — 30 пикселей, по вертикали — 5 пикселей (чтобы красиво все смотрелось), ну, и если вы наведете на картинку курсор, то выскочит надпись — «моя фотография».
Советую вам прежде, чем двинуться дальше, поподставлять и другие атрибуты и их значения в наш пример: задать разное значение в пикселях для атрибутов и т.д. — это поможет вам лучше усвоить наш урок, все-таки тема большая и уже не такая простая:)Да, чуть не забыла сказать о том, что картинку можно сделать фоном документа. Это безобразие прописывается в открывающем тэге боди:
<body text=»#336699″ bgcolor=»#000000″ background=»ваш_фон.jpg»>
Атрибут background указывает на то, где лежит фоновая картинка, в нашем примере он указывает на то, что наша фоновая картинка лежит в той же директории (папке), что и наш документ.
Но зачем оставлять атрибут bgcolor, если есть background? А вдруг фоновая картинка не загрузится (представьте, такое может быть), тогда сами поймете зачем.
Если вы достаточно поигрались с параметрами картинок, то продолжим наше обучение.
Первые шаги — Учебник (руководство) по хтмл (html). Ступенька 6-ая.
Учебник по Html для чайников. Простейшие.
Ступенька 6-ая.В этой главе мы поговорим о параграфах. Параграфы вводятся тэгом:
<p></p>
С помощью параграфов мы можем центрировать текст:
<p align=»center»>текст</p>
С помощью параграфов мы можем выровнять текст по левому краю:
<p align=»left»>текст</p>
По правому краю документа:
<p align=»right»>текст</p>
По обоим краям документа:
<p align=»justify»>текст</p>
Теперь введем параграфы в наш документ и посмотрим наглядно, что получится (в наш пример я подставила параграф с атрибутом центрирования текста (align=»center»), попробуйте подставить в параграф атрибут align с другими значениями: Left, Right, Justify).
Кстати, правильно говорить не выравнивание, а выключка: выключка по левому краю, правому, центру, по обоим краям. Если вы позже будете углубляться в область дизайна, то вам наверняка этот термин встретится. Между прочим, HTML не имеет к дизайну ни малейшего отношения, не считайте, что, изучив HTML, вы станете вдруг дизайнером, это большое заблуждение многих начинающих в области сайтостроительства.
| <html> <head> <title>Мой первый шаг </title> </head> <body text=»#336699″ bgcolor=»#000000″> <p align=»center»> Здравствуйте, это моя первая страница. <br> <font color=»#CC0000″> Добро пожаловать!</font> 🙂 </p> </body> </html> (посмотреть) |
<p></p>
Пустые элементы <p> без какого-либо содержания (других тэгов или текста) могут игнорироваться броузерами. Не забывайте это. Заметьте, что текст в документе, если не задавать параграфы, всегда выравнивается по умолчанию по левому краю. Также запомните, что после закрывающего тега </p> автоматически происходит перенос строки. Но что делать, если вам этот перенос никак не нужен? Есть тэг альтернативный <p align=»center»>:
<center> текст </center>
| <html> <head> <title>Мой первый шаг </title> </head> <body text=»#336699″ bgcolor=»#000000″> <center> Здравствуйте, это моя первая страница. <br> <font color=»#CC0000″> Добро пожаловать!</font> 🙂 </center> </body> </html> (посмотреть) |
Не волнуйтесь, я еще просто не успела рассказать вам все:). Я вовсе не молчаливый партизан: секреты HTML выдам и другу, и врагу абсолютно бесплатно.
Конечно, тэг <center> хорош, но остался нам он еще с прошлых версий HTML (да, их было несколько, все в этом мире развивается, HTML не исключение). Пока что этот тэг никто не отменял, и его можно использовать, но это не слишком желательно.
Как же лучше поступить? Лучше использовать тэг <div></div>, одно из назначений которого выравнивание содержимого вашего документа. Все четыре значения атрибута align можно употреблять с <div>:
<div align=»center»> текст </div>
<div align=»left»> текст </div>
<div align=»right»> текст </div>
<div align=»justify»> текст </div>
| <html> <head> <title>Мой первый шаг </title> </head> <body text=»#336699″ bgcolor=»#000000″> <div align=»center»> Здравствуйте, это моя первая страница. <br> <font color=»#CC0000″> Добро пожаловать!</font> 🙂 </div> <p align=»justify»> Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появться еще один виртуальный друг? 🙂 </p> </body> </html> (посмотреть) |
<p align=»right»>
<p>текст</p>
<p>текст</p>
<p>текст</p>
</p>
и
<p align=»right»>
<div>текст</div>
<p>текст</p>
<div>текст</div>
</p>
Однако <div> может содержать в себе параграфы: с помощью него мы можем сгруппировать их, допустим, по правому краю.
<div align=»right»>
<p>текст первого абзаца</p>
<p>текст второго абзаца</p>
<p>текст третьего абзаца</p>
</div>
Конечно, <p> и <div> не несут в себе исключительно функцию выравнивания элементов. Но поскольку я хотела в этой главе освоить с вами только выравнивание, то к другим возможностям использования <div> и <p> мы вернемся гораздо позже, т.к. это уже более сложная тема для разговора, и вы, мой читатель, пока что к ней не готовы.
Первые шаги — Учебник (руководство) по хтмл (html). Ступенька 21-ая.
Учебник по Html для чайников. Таблицы.
Ступенька 21-ая.Долго ли, коротко ли, но мы добрались до таблиц. При создании сайтов таблицы используются очень часто. Например, Постройка.ру не обошлась бы в своем оформлении без таблиц никак: картинки, тексты – все размечено и размещено относительно друг друга при помощи таблиц (собственно, весь сайт, грубо говоря, расположен в большой сложной таблице). Или вот еще вот еще пример сайта, оформление которого тоже не обошлось бы без таблиц (заметьте, ни одной картинки, когда вы пройдете главы о таблицах без труда сможете сверстать подобное).
Таблица задается тэгом:
<table></table>
Увы, это далеко не все: таблица состоит из строк и столбцов (ячеек), поэтому нам надо еще указать и их.
<tr></tr> — строчка таблицы
<td></td> — столбец (ячейка) таблицы
Итак, перед вами таблица из двух строк и трех столбцов (ячеек). Для наглядности я выделила ячейки таблицы разными цветами. Границы таблицы не заданы, поэтому вы их не видите. Как же такая красота получилась? Итак следите за движениями моих рук:
<table> |
Сначала мы задали строки. В нашем примере их две. Теперь в каждой строке зададим по три столбца (ячейки):
<table> |
Итак, теперь нам надо заполнить получившийся каркас:
<table> |
Увы, фона (голубенького или желтенького, как в примере) еще не видно. Фон задается атрибутом bgcolor=»цвет_фона». Фон можно задать для таблицы в целом, для ряда, для ячейки (в пределе одного ряда). В нашем случае мы задаем фон для каждой ячейки.
| <table> <tr> <td bgcolor=»#FFCC33″>1×1</td> <td bgcolor=»#336699″>1×2</td> <td bgcolor=»#FFCC33″>1×3</td> </tr> <tr> <td bgcolor=»#336699″>2×1</td> <td bgcolor=»#FFCC33″>2×2</td> <td bgcolor=»#336699″>2×3</td> </tr> </table> |
Если вы хотите задать фон для ряда, то атрибут bgcolor мы прописываем для тэга <tr>:
<tr bgcolor=»#FFCC33″>
Если вы хотите задать фон для всей таблицы, то атрибут bgcolor мы прописываем для тэга <table>:
<table bgcolor=»#FFCC33″>
Однако, если при заданном фоне для всей таблицы, вы задаете свой фон для ряда или ячейки, то этот ряд или ячейка будут иметь фон отличный от всей таблицы.
Попробуйте самостоятельно задать фон для таблицы и для ряда (это для усвоения материала). Когда все усвоится переходите к следующей ступеньке, и мы продолжим разговор о таблицах.
Первые шаги — Учебник (руководство) по хтмл (html). Ступенька 4-ая.
Учебник по Html для чайников. Простейшие.
Ступенька 4-ая.Начнем с малого, легкого, и даже интересного, и постепенно перейдем к сложному, большому, и, возможно, даже нудному, без чего не обходится ни одно обучение. Но не буду вас расстраивать заранее. Итак, на этой ступеньке мы будем учиться раскрашивать. Для начала нам будет нужна палитра (все цвета интернета — http://www.artlebedev.ru/tools/colors/). Лучше всего сохраните палитру у себя на компьютере, она вам еще не раз пригодится:
Файл – Сохранить как (File – Save as)
Зачем все это? А затем, что все обозначения цвета в Html прописываются именно таким способом. Например, белый цвет – ffffff. Но вернемся к нашей страничке. Давайте окрасим слова Добро Пожаловать в красный.
<font color=»#CC0000″> Добро пожаловать! 🙂 </font>
Color – параметр (атрибут) для тэга font, он отвечает, в данном случае, за цвет заключенного в контейнер текста. Атрибут color, как и другие атрибуты, не принадлежит только одному тэгу, он может быть присвоен и некоторым другим тэгам.
Попробуйте вместо СС0000 подставить другие значения цветов для атрибута color. Обратите внимание, что значению цвета обязательно должен предшествовать значок «решетка» — #.
Кстати, если вы хотите лучше усвоить материал наших уроков, то вам следует не только исполнять от точки до точки мои задания, но и пытаться самостоятельно экспериментировать с кодом вашей странички на основе полученных вами знаний.
<html>
<head>
<title>Мой первый шаг </title>
</head>
<body>
Здравствуйте, это моя первая страница.
<br>
<font color=»#CC0000″> Добро пожаловать! 🙂 </font>
</body>
</html> (посмотреть)
Тэг <font></font> — многофункционален. Им может задаваться не только цвет текста в конкретной части документа, но и размер шрифта, и вид шрифта (Arial), но об этом чуть позже.
Как же еще задавать цвета в документе? — вспомним об открывающем тэге <body>:
<body text=»#336699″>
Это значит, что весь текст страницы будет синим, кроме текста, для которого мы специально прописали <font></font>. Если цвет текста в <body> не задавать, то по умолчанию он будет черным.
<html>
<head>
<title>Мой первый шаг </title>
</head>
<body text=»#336699″>
Здравствуйте, это моя первая страница.
<br>
<font color=»#CC0000″> Добро пожаловать!</font> 🙂
</body>
</html> (посмотреть)
С цветами для текста мы разобрались, теперь подумаем о фоне. Шагаем дальше:)