Архив Айгуст —
архив помогалки Августа
«Никто не вечен… В отличие от знаний»
Внимание!
  Материалы на данном сайте представляют собой архивную копию форума «Айгуст - помогалка Августа» на момент октября 2019 года с целью сохранения знаний. Все права на материалы принадлежат их авторам. Материалы представлены в открытый доступ в ознакомительных целях, запрещено их коммерческое использование без согласования с авторами. Администрация сайта не несёт ответственности за содержание материалов, в том числе за наличие вредоносных закладок в коде, используйте любой предоставленный код на свой страх и риск. Рекомендуется проверять любые файлы вручную и перезаливать на собственный хостинг, дабы избежать возможной модификации или исчезновения в будущем.

Уроки HTML для начинающих

Katletos
Админ
Сообщений: 60
22.08.2010 18:22:34
Уроки HTML для начинающих
Вы хотите создать собственный сайт в сети интернет и заработать много денег? – Очень хорошо! Но прежде, чем организовать свой интернет-бизнес, вам будет нужно освоить HTML уроки.
HyperText Markup Language или сокращенно HTML – язык гипертекстовой разметки документов, продукт W3C консорциума – лежит в основе почти всех существующих web-страниц, что ставит его на первое место в иерархии инструментов для создания сайтов. Следует уделить особое внимание изучению уроков этого раздела.

уроки по HTML специально для начинающих.

Уроки HTML – это уроки по созданию интернет-страниц.
Уроки HTML – первая ступень, первый шаг на пути освоения web-ремесла.
Уроки HTML и уроки web-дизайна – различные понятия.
Синтаксис HTML довольно-таки простой и легкий для понимания, но это не означает, что процесс обучения будет проходить гладко и без ошибок. Не нужно их бояться – они неизбежны. Совершая ошибки, вы получаете информацию о том, как не следует поступать в дальнейшем, эта информация стоит определенных усилий, времени, а поэтому особенно ценна. Так накапливаются знания и опыт.

Создавая свои первые страницы, вы будете наслаждаться мыслью о том, что открываете для себя мир, которого раньше не знали и может даже не догадывались о его существовании – мир других возможностей – мир Web.
Будьте осторожны! Вы можете пристраститься к новому занятию.
#616
Katletos
Админ
Сообщений: 60
22.08.2010 18:40:54
Re: Уроки HTML для начинающих
Введение в курс:

Пример HTML кода
[изображение]

Рассмотрим его элементы:
<html>
</html>– теги, определяющие начало и конец документа.
<head>
</head>– служебная секция. Здесь размещаются команды для браузеров, инструкции для поисковых роботов, ссылки на отдаленные файлы, скрипты.
<title>
</title> – теги, определяющие главный заголовок документа.
<body>
</body>– эта секция содержит всю видимую часть web-страницы.

В браузере мы увидим Hello World!
Для изучения HTML необходим Блокнот [изображение] . В нем мы будем вручную печатать код. Пожалуй, все... Интерпретацией кода занимается программное обеспечение для просмотра web-страниц, то есть Internet Explorer, Firefox, Opera, Chrome и другие браузеры.
В уроках данного курса будет представлен HTML 4.01, XHTML и CSS включения. Такая комбинация является оптимальной для обучения и позволяет значительно ускориться в освоении материала.
В настоящее время на официальном сайте W3C консорциума уже доступна спецификация HTML 5. Разработка пятой версии началась еще в 2007 году, в основе ее лежит XML и по сути она является, дополненным новыми элементами и атрибутами, XHTML-ем. Пятая версия HTML предлагает более широкую функциональность и упрощает процесс создания интерактивных сайтов и web-приложений. Помимо этого, HTML 5 содержит дополнительные элементы, обеспечивающие размещение внутри web-страницы мультимедийного контента.

Новый HTML пока еще не получил статус рекомендации, а его теги, на данном этапе, распознаются только некоторыми браузерами. Но несмотря на это, уроки HTML 5 доступны уже сегодня.
Post Scriptum:Сеть интернет состоит из бесконечного множества web-страниц, связанных между собой гиперссылками, посредством «протокола передачи гипертекста» -- HyperText Transfer Protocol или сокращенно HTTP -- протокол передачи данных в виде гипертекстовых документов. А что такое HTML? HTML -- HyperText Markup Language или язык гипертекстовой разметки документов... Сделаем единственный правильный вывод: чтобы самостоятельно создать свой сайт, нужно изучить современные уроки HTML для начинающих сайтостроителей.

Уроки HTML и уроки CSS являются основой сайтостроения. Отделив достаточно времени на их изучение, вы научитесь создавать свои первые web-страницы. Уроки Photoshop дадут необходимые знания в области web-дизайна... Соберитесь с мыслями и вперед – покорять свои вершины!
#618
Katletos
Админ
Сообщений: 60
22.08.2010 19:16:25
Re: Уроки HTML для начинающих
Урок 1. Правильная структура HTML документа
Структура HTML документа или web-страница изнутри
Структура HTML по большому счету лежит в основе каждой web-страницы.
Сегодня существует несколько типов HTML документов. Каждому типу документа соответствует его собственная HTML структура .
Правильная начальная структура HTML является залогом кросс-браузерности сайта.
Создадим на диске D папку My_first_site, впрочем, можно назвать ее как угодно.
В системном меню Start или Пуск заходим в раздел Программы (All Programs), открываем папку Стандартные (Аccessories), выбираем Блокнот [изображение] . Конечно же, это не единственное средство для написания кода, но на этом этапе вам нужен именно он.
Пример документа:
<html>
<head>
<title>Структура HTML документа</title>
</head>
<body>
<h3>Мой первый заголовок</h3>
<p>Мой первый параграф</p>
<p>Мой второй параграф</p>
</body>
</html>
Рассмотрим HTML теги:
<html> </html> – обязательные, определяют HTML документ.
<head> </head> – определяют секцию со служебной информацией, содержат инструкции для поисковиков, для браузеров, скрипты.
<title> </title> – определяют основной заголовок web-страницы.
<body> </body> – обязательные, определяют видимую часть документа.
<h3> </h3> – определяют заголовок 3-го уровня.
<p> </p> – определяют параграф.
Пишeм HTML код:
Последовательность действий следующая:

1. Пишeм в Блокноте HTML код:

[изображение]
2. Заходим в File ⇒ Save as (Файл ⇒ Сохранить как), находим нашу папку D\My_first_site\ ⇒ прописываем имя файла: (File name) index.html (index – это имя, .html – расширение файла) ⇒ сохраняем.

4. Открываем IE (Internet Explorer). В меню выбираем File ⇒ Open... ⇒ находим сохраненный файл ⇒ нажимаем Open ⇒ OK:
[изображение]

[изображение]
Результат
Для дальнейшего изучения материала необходимо следующее:
Вы просто обязаны иметь у себя на компьютере несколько различных браузеров. Качаем бесплатно Mozilla Firefox, Opera и продолжаем наш урок.

Открываем index.html с помощью Firefox (File ⇒ Open File... ⇒ Open). В результате мы не можем прочитать, написанный нами, текст. Устраняется данная некорректность простым включением в HTML код двух тегов с набором атрибутов, которые также являются обязательными.
Правильная структура HTML 4.01:
Такой должна быть начальная структура HTML документа:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Структура HTML</title>
</head>
<body>

</body>
</html>
Самостоятельно добавьте параграфы, заголовок и посмотрите, что вышло. Не забывайте после каждого сохранения документа обновлять содержимое окна браузера нажатием кнопки [изображение] в Mozilla Firefox или кнопки [изображение] в Internet Explorer, или F5, чтобы изменения вступали в силу.

У вас все получилось? – Значит вы были внимательны и все сделали правильно.

Комментарий к HTML коду:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> – указывает браузеру с каким именно документом он имеет дело.

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> – определяет тип контента и кодировку, windows-1251 – поддерживает как латинский так и кириллистический алфавит.
#619
Katletos
Админ
Сообщений: 60
22.08.2010 19:26:34
Re: Уроки HTML для начинающих
Урок 2. HTML заголовки:
HTML теги, определяющие HTML заголовки:
Дальше в примерах будут показаны только участки кода, но в своих экспериментах не забывайте прописывать его целиком, по шаблону из первого урока и после каждого изменения в документе обновляйте web-страницу, нажатием на [изображение] в Mozilla Firefox или на [изображение] в Internet Explorer, или F5.
В предыдущем уроке вы познакомились с HTML заголовком 3-го уровня – всего их 6:
<html>
<head>
<title>HTML заголовки</title>
</head>
<body>
<h1>Заголовок 1-го уровня</h1>
<h2>Заголовок 2-го уровня</h2>
<h3>Заголовок 3-го уровня</h3>
<h4>Заголовок 4-го уровня</h4>
<h5>Заголовок 5-го уровня</h5>
<h6>Заголовок 6-го уровня</h6>
</body>
</html>
Для тегов заголовков характерно следующее: чем меньше цифра, тем больше размер шрифта.
Результат: размеры HTML заголовков
Зачем в тексте заголовки думаю понятно, к тому же, они используются поисковыми машинами для анализа содержимого web-страниц.

HTML заголовки определяют название отдельной статьи или web-страницы.
В идеале страница должна иметь не более одного HTML заголовка 1-го уровня, не более двух второго уровня и так далее.
HTML заголовки, независимо от того, что каждому уровню соответствует определенный размер, могут быть любых размеров – с помощью CSS возможно какое угодно форматирование.
Горизонтальное выравнивание HTML заголовков:
Примеры:
<h3 align="left" style="color:Tomato">HTML заголовок слева</h3>
HTML заголовок слева
<h2 align="center" style="color:Black">HTML заголовок по центру</h2>
HTML заголовок по центру
<h1 align="right" style="color:Gray">HTML заголовок справа</h1>
HTML заголовок справа

Атрибуты и значения:
align="" – определяет горизонтальное выравнивание.
align="left" – определяет выравнивание по левой стороне (по умолчанию).
align="right" – выравнивание по правой стороне.
align="center" – определяет горизонтальное центрирование.
style="color:" – определяет цвет текста.
Элементы style="" есть линейные CSS включения.

______________________________________________________________
Материал сайта Уроки HTML
#620
Sverxu
Админ
Сообщений: 36
22.08.2010 19:38:27
Re: Уроки HTML для начинающих
за данный материал благодарить http://ab-w.net
#622
Katletos
Админ
Сообщений: 60
25.08.2010 22:36:25
Re: Уроки HTML для начинающих
Урок 3. HTML текст и шрифт:
изучаем HTML теги, форматирующие текст:
HTML текст является основной составляющей большинства страниц интернета.
По ключевым фразам в тексте HTML-страницы пользователи могут найти ваш сайт.
Можно установить размер и цвет HTML текста по своему усмотрению. Вы также можете определить вид шрифта и его объемность.
К HTML тексту очень часто применяются различные форматирующие теги.
Ниже представлены HTML теги, форматирующие текст:
<strong> </strong> – отображают HTML текст полужирным шрифтом.
<b> </b> – отображают HTML текст полужирным шрифтом.
<kbd> </kbd> – отображают HTML текст моноширинным шрифтом.
<code> </code> – отображают HTML текст моноширинным шрифтом.
<samp> </samp> – отображают HTML текст моноширинным шрифтом.
<big> </big> – отображают HTML текст размером больше обычного.
<em> </em> – отображают HTML текст наклонным (курсивным) шрифтом.
<i> </i> – отображают HTML текст наклонным (курсивным) шрифтом.
<dfn> </dfn> – отображают HTML текст наклонным (курсивным) шрифтом.
<ins> </ins> – определяют подчеркнутый текст.
<del> </del> – определяют зачеркнутый текст.
<small> </small> – отображают HTML текст размером меньше обычного.
<sub> </sub> – отображают HTML текст в нижнем индексе.
<sup> </sup> – отображают HTML текст в верхнем индексе.
Форматируем HTML текст:
<strong>... текст полужирным шрифтом</strong>
Результат: ... текст полужирным шрифтом
<code>... текст моноширинным шрифтом</code>
Результат: ... текст моноширинным шрифтом
<big>текст больше обычного</big>
Результат: текст больше обычного
<em>... текст курсивным шрифтом</em>
Результат: ... текст курсивным шрифтом
<ins>подчеркнутый текст</ins>
Результат: подчеркнутый текст
<del>зачеркнутый текст</del>
Результат:<del>зачеркнутый текст</del>
<small>текст меньше обычного</small>
Результат: текст меньше обычного
<sub>текст в нижнем индексе</sub>
Результат:текст в нижнем индексе
<sup>текст в верхнем индексе</sup>
Результат:текст в верхнем индексе
Cпособы форматирования, представленные выше, должны применяться только для небольших участков текста. Пользуйтесь CSS если хотите установить определенный шрифт для всей страницы, или для нескольких строк, например.
Размер HTML текста:
<html>
<head>
<title>HTML текст</title>
</head>
<body>
<p style="font-size:9px">Текст высотой 9 пикселей</p>
<p style="font-size:12px">Текст высотой 12 пикселей</p>
<p style="font-size:15px">Текст высотой 15 пикселей</p>
<p style="font-size:18px">Текст высотой 18 пикселей</p>
</body>
</html>

Посмотрите пример форматирования HTML текста в новом окне.
Атрибуты style="" со значениями есть линейные CSS включения. Дело в том, что чистый HTML не используется при создании сайтов и нет никакого смысла тратить время на изучение некоторых его элементов, которые вы забудете, начав изучение второй ступени сайтостроения -- Cascading Style Sheets. Такой подход существенно съэкономит ваше время! К тому же, в пятой, новой версии HTML, которая пока еще не получила официальный статус рекомендации, не поддерживаются теги <font> </font>, с помощью которых, в HTML 4.01 можно установить размер текста.
#701
Katletos
Админ
Сообщений: 60
25.08.2010 23:08:02
Re: Уроки HTML для начинающих
Урок 4. Определяем цвет HTML текста при помощи CSS:
CSS атрибуты, определяющие цвет HTML текста:
Цвет текста в HTML определяется с помощью CSS атрибутов.
Цвет HTML текста может быть задан в режиме HEX, например, color:#cc0000.
Цвет текста в HTML также может быть задан словом, например, color:Black.
Определяем цвет HTML текста:
<html>
<head>
<title>Цвет текста в HTML</title>
</head>
<body>
<h1 style="color:#ff0000">Заголовок 1-го уровня</h1>
<p style="color:#ffff00">Первый параграф</p>
<p style="color:#00ff00">Второй параграф</p>
<p style="color:#0000ff">Третий параграф</p>
</body>
</html>
Строка style="color:#000000" является линейным CSS включением -- устанавливает цвет HTML текста в режиме HEX. HEX -- шестнадцатеричная система счисления (цифры от 0 до 9 и латинские буквы от a до f), которая по структуре сравнима с RGB (Red Greеn Blue).
Результат:
[изображение]
Еще пример:
<html>
<head>
<title>Цвет текста в HTML</title>
</head>
<body style="color:#ff6c36">
<h1 align="center">Заголовок 1-го уровня</h1>
<p>Первый параграф</p>
<p>Второй параграф</p>
<p style="color:#0000ff">Третий параграф</p>
</body>
</html>
[изображение]
Значение #000000 определяет черный цвет, #ffffff – белый. Цвет также может быть задан словом, например, style="color:Red".
Номер цвета в формате НЕХ
#702
Mehdi
Сообщений: 24
09.11.2013 17:51:07
Re: Уроки HTML для начинающих
а как мне любую фотку или картинку написать на хтмл и поставит в в раздел шаблоны?
#34194
kent
Сообщений: 2041
09.11.2013 21:58:29
Re: Уроки HTML для начинающих
Mehdi: а как мне любую фотку или картинку написать на хтмл и поставит в в раздел шаблоны?

http://htmlbook.ru/html/img
#34210

Другие темы раздела