Html для чайника

Мир переходит в цифровую эру и некоторые люди уже живут в Интернете больше, чем в «реальной жизни». И мы видим, как бизнес реагирует на эти изменения:

• все магазины постепенно переезжают в Сеть или обзаводятся онлайн-представительством;
• маркетологи всё чаще отдают предпочтение рекламным сетям в интернете, оставляя без внимания привычные радио и телевидение;
• некоторые компании рождаются в сети развиваясь в огромные порталы принося своим владельцам многомиллиардные прибыли.

Такое развитие веб-пространства порождает закономерное желание «влиться» в этот процесс и научиться создавать сайты самостоятельно.

Если Вы загорелись желанием сделать свой сайт или хотите стать веб-программистом, но не знаете с чего начать – не беда: существуют специальные курсы «HTML и CSS. Основы создания сайта », которые разработаны специально чтобы помочь Вам в этом. Можно пойти и другим путём: взять толстенную книжку под названием «Уроки HTML для чайников» и начать усиленно штудировать, но в этом случае потребуется значительно больше времени, поскольку искать ответы на возникающие вопросы Вам придётся самостоятельно.

HTML — это не язык программирования, а язык разметки. С его помощью нельзя сделать полноценный сайт, можно только создать «оболочку», где элементы взаимодействия с пользователем будут видны, но не будут работать. Тем не менее, веб-программирование невозможно без знания HTML.

Представьте, как вы едете на автомобиле известной престижной марки по родному городу. Наслаждаетесь плавностью движения, удобством управления, комфортом салона. Останавливаясь на светофоре, вы, как в голливудских фильмах 80-х, спускаете на переносицу тёмные очки и подмигиваете стоящим на перекрёстке девушкам… вот только они не реагируют. Их ваша «крутая» машина совершенно не впечатлила. А всё потому, что у неё нет кузова, есть только мотор, колёса, руль и пара сидений. В такой ситуации среднестатистическая девушка и не поймёт, что вы на дорогом автомобиле, для неё вы просто чудик на развалюхе. Точно так же, если создать гениальный по функциональности сайт, но забыть о его внешнем оформлении, то его ждёт столь же печальная участь. То есть Вы конечно же можете заняться веб-программированием и сделать отличный сайт, но если не озаботитесь созданием для него удобной и понятной «оболочки» на HTML, то станете для жителей Рунета чудиком на развалюхе.

Web-программирование, как и любая другая деятельность, начинается с составления плана. В первую очередь нужно ответить на следующие вопросы:

• какова тематика ресурса?
• кто будет посещать его?

Если не озаботится этими вопросами в самом начале, то велик риск создать сайт, который будет интересен только его создателю. А сайт без пользователей, всё равно что машина без бензина – далеко не уедешь… Если же с аудиторией Вы угадаете, то велик шанс, среди посетителей найти единомышленников, которые помогут в развитии Вашего проекта.

Когда вы определитесь с тем, для кого будет сайт, нужно продумать его структуру и зарисовать основные страницы, проще всего это сделать на бумаге. Эскизы основных страниц готовы? Тогда пришло время отдать своё детище веб-дизайнеру, он придаст вашим наброскам «товарный вид». Если дизайнера нет – не беда: можно поискать в интернете подходящие сайты и заимствовать их элементы дизайна. В идеале к концу этого этапа у Вас должны появиться дизайн-макеты в виде графических файлов (как правило Photoshop) с внешним видом для всех основных страниц. Но учтите при разработке дизайна, да и интернет-сайта в целом во главу угла нужно ставить удобство использования, а уже потом красоту оформления.

Когда дизайн-макет будет готов, начнётся создание сайта на HTML. Пользуясь шпаргалкой-макетом, вам нужно будет с помощью языка описать все элементы и их расположение: логотипа, кнопок, меню, ленты новостей и так далее. С этого момента понадобятся знания вёрстки (HTML и CSS). От того насколько хорошо Вы умеете создавать HTML страницы зависит качество переноса дизайна из графического файла в браузер. Если на этом этапе возникнут сложности и толстая книжка «HTML для чайников» не будет давать необходимых ответов, то записавшись на уроки HTML и CSS Вы сможете попросить помощи у преподавателей – они с удовольствием помогут, поскольку обучение на живых примерах интереснее и продуктивнее.

При создании страниц учтите, что для каждого отдельного пользователя они будут отображаться в соответствии с размером его монитора. Поэтому верстальщик должен учитывать различные разрешения экрана, в связи с чем существует два подхода к вёрстке сайтов:

• фиксированный — расположение элементов и масштаб не меняются для различных пользователей с разными разрешениями экранов. Если у посетителя маленькое разрешение, у сайта появляется полоса прокрутки. Если же большое — полосы по краям сайта;
• «резиновым» — масштаб автоматически подстраивается под различные разрешения. При этом на мобильных устройствах сайтом будет также удобно пользоваться, как и на стационарных компьютерах.

После того как страницы свёрстаны приходит черёд веб-программистов их задача «вдохнуть жизнь» в созданные страницы, чтобы пользователь мог не только их просматривать, но и взаимодействовать с ними: модифицировать, оставлять комментарии, менять настройки…

Веб программирование делится на два вида:серверное (бэкенд) и клиентское (фронтенд).

Серверное web-программирование – это создание логики на стороне сервера: обработка запросов с клиентов, динамическое формирование HTML-страниц, взаимодействие с базой данных и т.д. Существует множество языков программирования для бэкенда: PHP, Python, Perl, Ruby… Самым распространённым из них является PHP, во многом за счёт своей простоты и функциональности, для его изучения, рекомендуем вам пройти курсы «Основы PHP »

Клиентское web-программирование – это создание логики на стороне браузера: отправка Ajax-запросов серверу и динамическое изменение страницы без перезагрузки, сохранение данных пользователя в браузере и их обработка. По умолчанию в браузерах присутствует один язык программирования – JavaScript, поэтому он лидирует по понятным причинам. Если вы всерьёз решили заняться web-программированием на форнтенде, то рекомендуем Вам посетить курс «JavaScript Базовый » для быстрого старта.

Учитесь новому, не останавливайтесь на достигнутом и ваш сайт будет развиваться вместе с Вами!

Сайт готов? Как бы ни была сложна разработка веб-сайта, сделать из него популярный ресурс — ещё сложнее. Помните в начале мы изучали целевую аудиторию нашего будущего сайта? Так вот от того насколько интересная информация будет для этой аудитории на Вашем сайте зависит популярность созданного проекта. Если ресурс будет не интересен посетителям, то не важно сколько усилий и средств будет вложено в его раскрутку – будущего у него не будет.

Если статья Вам показалась слишком сложной или вы хотите начать изучение программирования с самых основ – «Курс молодого бойца » даст базовые знания и направит в нужное русло. Сделайте первый шаг по дороге создания сайта, и кто знает может именно Ваш проект определит будущее интернета.

Html для чайника

Инструментарий. Основные понятия.

Ступенька 1 - "Основной инструментарий, учимся работать руками".

Ступенька 2 - "Что такое тэги?".

Ступенька 3 - "Обязательные тэги. Зачем телу голова, а голове тело?"

Простейшие.

Ступенька 4 - "Раскрась сам. Изменяем цвет текста".

Ступенька 5 - "Как изменять цвет фона страницы. Немного об этике цветов".

Ступенька 6 - "Параграфы и DIV. Учимся выравнивать текст".

Ступенька 7 - "Что такое заголовки и как задавать размер буковок".

Ступенька 8 - "Курсив, жирный текст, подчеркнутый и другие".

Ступенька 9 - "Стандартные шрифты. Как прописать свой шрифт".

Ступенька 10 - "Что такое путь? Как вставлять картинки".

Ступенька 11 - "Что можно сделать с картинкой. Картинка, как фон документа, и т.д.".

Ступенька 12 - "О любителе сосисок и принудительном прерывании обтекания текстом картинки".

Ступенька 13 - "Ссылка и как с нею бороться".

Ступенька 14 - "Ссылка на е-майл. Подсказка к текстовой ссылке".

Ступенька 15 - "Может ли картинка быть ссылкой".

Ступенька 16 - "Куда податься, на что ссылаться. Новое окно при нажатии на ссылку".

Ступенька 17 - "Карты. Как часть картинки сделать ссылкой".

Ступенька 18 - "Карты. Как часть картинки сделать ссылкой 2".

Ступенька 19 - "Карты. Как часть картинки сделать ссылкой 3".

Ступенька 20 - "Закладка. Как сделать ссылку внутри документа".

Ступенька 21 - "Учимся создавать таблицы".

Ступенька 22 - "Учимся создавать таблицы" продолжение.

Ступенька 23 - "Таблицы, вертикальное выравнивание (valign)".

Ступенька 24 - "Таблицы, учимся растягивать ячейки (rowspan, colspan)".

Ступенька 24-2 - "Дополнительная глава. Ответы на домашнее задание".

Ступенька 25 - "Таблицы, что такое cellspacing и cellpadding. Что делать с пространством".

Ступенька 26 - "Вложенные таблицы и некоторые нюансы".

Ступенька 29 - "Спецсимволы, или головная боль".

Ступенька 30 - "О линиях. Просто и полезно".

Ступенька 31 - "Как убрать отступы (поля) документа, topmargin, leftmargin, marginwidth, marginheight".

Ступенька 32 - "О списках. Неупорядоченные списки".

Ступенька 33 - "Упорядоченные списки. Ремарка: что такое спецификация и консорциум".

Ступенька 34 - "Cпецифические тэги, бегущая строка текста".

Ступенька 35 - "Вступление. Зачем они (фреймы) нужны."

Ступенька 36 - "Учимся создавать фреймы".

Ступенька 37 - "Учимся создавать фреймы" продолжение.

Ступенька 38 - "Учимся создавать фреймы" продолжение.

Ступенька 39 - "Убираем полосу прокрутки, избавляемся от рамок, регулируем ширину полей фрейма".

Ступенька 40 - "При нажатии на ссылку документ открывается в другом фрейме, в полное окно".

Ступенька 41 - "Последняя глава о фреймах. Что такое IFrame".

Объекты, скрипты и другие средства, чтобы оживить наш документ.

Ступенька 42 - "Немного об объектах. Вставка объектов в наш документ при помощи тэга OBJECT".

Коротко о HTML для чайников

Дорогие друзья, уже давно хотел написать что-то о HTML для чайников. Только учтите, что говоря «чайник» я подразумевая человека, начинающего познавать HTML, а не кухонную утварь. Если с этим разобрались, то стоит отметить, что HTML это очень много и мало одновременно. Говоря об этом языке разметки вам достаточно узнать что такое тег, атрибут, элемент, иерархия и структура HTML-документа – вот и всё. Но всего становится слишком много, если вдаваться в детали.

Поэтому я обойдусь без подробностей и остановлюсь лишь на самом основном. Не знаю, получится у меня это или нет, но давайте попробуем. Главное, не стесняйтесь задавать вопросы. Ведь, как обычно, я буду непроизвольно использовать жаргонные словечки и прочую абракадабру. У каждого свои недостатки. Приступим?

А начну я с того, что HTML-документ представляет собой обычный текстовый файл. Зачастую с расширением .html или .htm. Его можно создать и редактировать в любом текстовом редакторе. Например, в стандартном «Блокноте» операционной системы Windows. Для удобства рекомендую использовать бесплатную программу Notepad++, которая осуществляет и подсветку синтаксиса.

Копнём чуть глубже. По сути, HTML-код это набор чётко структурированных по иерархии элементов. Элементом в HTML можно назвать картинку, таблицу, строку текста и т.д. что определяется тегом. Тег – основная конструкция языка разметки HTML. Теги могут выступать в качестве контейнеров или объектов.

Говоря «контейнер » я подразумеваю конструкцию, состоящую из открывающего и закрывающего тегов. Например:

<p>Параграф, в котором есть <b>жирный</b> текс.</p>

В данном примере мы имеем два тега контейнера. Первый, это тег p. который преобразует своё содержание в параграф. Второй, это тег b. который выделяет содержащийся в нём текст жирным шрифтом. Точнее говоря, теги указывают на соответствующие преобразования и выделения, которые осуществляют браузеры. При этом синтаксис обоих контейнеров можно описать следующим образом:

Обратите внимание на то, что в приведённом примере контейнеры чётко структурированы. Так контейнер b входит в контейнер p. Несмотря на то, что многие браузеры допускаю некоторую вольность в иерархии, нарушать её не стоит. Например:

<p>Первая <b>строка.</p>

<p>Вторая</b> строка.</p>

Такой HTML-код будет обработано браузером вполне корректно, но иерархия уже будет нарушена.

Говоря «объект » я подразумеваю конструкцию, состоящую из одного открывающегося (HTML) или открывающегося и закрывающегося одновременно (XHTML) тега. Примером объекта может служить HTML-код картинки:

<img src="http://www.wmascat.ru/2012/08/image.jpg">

Понятно, что такие толь открывающиеся теги объекты несколько не вписываются в понятие иерархии. В XHTML это не допустимо. Здесь применяется тег объект, который является открывающимся и закрывающимся одновременно. Вот как выглядит тот же HTML-код картинки в XHTML:

<img src="http://www.wmascat.ru/2012/08/image.jpg" />

Другими словами, многое зависит от того, какой язык разметки вы выбрали. Несмотря на то, что браузеры допускают вольности по отношению к используемым типам разметки, нарушать их не стоит. Сам тип разметки документа задаётся в теге !doctype. С него и должен начинаться HTML-документ. Например:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Но давайте вернёмся к главному. В примере с картинкой, помимо названия тега имеется атрибут src. Что такое атрибут? Я бы сказал, что атрибут – это то или иное свойство тега. Так значением (указанное в одинарных или двойных кавычках, после знака равно) атрибута src тега img является адрес файла картинки.

Здесь следует отметить, что для каждого тега допустимы лишь определённые стандартом атрибуты, которые задают те или иные их свойства. Так атрибут alt в теге img задаёт альтернативный текст, который будет отображаться браузером в том случае, если файл картинки будет не доступен. Например:

<img alt="альтернативный текс" src="http://www.wmascat.ru/2012/08/image_not_exists.jpg">

Полный список тегов и их атрибутов, а также подробное описание для каждого из них вы можете найти на сайте htmlbook.ru в разделе «Справочник по HTML ».

Надеюсь, что вы уже поняли – HTML это структурированный язык разметки. Здесь всё чётко и понятно. По крайней мере, если соблюдать иерархию входящих в него элементов. А теперь давайте поговорим о структуре самого HTML-документа.

Как говорилось выше, любой HTML-документ лучше начинать с указания !doctype. После него идёт основной тег контейнер, который содержит весь HTML-документ, он так и называется html. Внутри него обычно находятся два основных тега контейнера head и body .

Тег head (голова документа) содержит описание HTML документа, метатеги и сопутствующие элементы (например: script. style и т.д.). Эти данные не выводятся и предназначены в первую очередь для браузеров, поисковиков и т.д. Тег body (тело документа) содержит сам HTML-код. Именно он обрабатывается и выводится в окне браузера.

Для того чтобы всё стало на свои места, ниже я приведу пример структуры HTML-документа:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!-- голова HTML-документа -->

</head>

<!-- HTML-код документа -->

</body>

</html>

Обращаю ваше внимание на то, что в данном примере, для наглядности иерархии, я использовал отступы. Обычно рекомендуют использовать два пробела, но я отдаю предпочтение табуляции (её размер можно зачастую задать в редакторе) .

• Несколько идущих подряд пробелов в HTML-коде отображаются браузером как один пробел. Исключением является тег pre и иже. Для того чтобы сделать два пробела, можно использовать мнемонику &nbsp; и пробел.
• Перенос строки отображается браузером как тот же пробел. Для того чтобы реализовать перенос строки, можно использовать тег br .

Ну а теперь самое главное – не ограничивайтесь только теорией. Пробуйте и экспериментируйте. Смотрите, что получается в том или ином браузере. Не забывайте, что у каждого браузера есть свои особенности. Ну а если вы хотите убедиться, что всё делаете правильно, используйте – валидаторы. Что это такое? Валидатор - это сервис, который проверяет ваш HTML-код на соответствие стандартом и указывает на имеющиеся ошибки. Например, валидатор от W3C.

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

в 9:00 • Изменить сообщение

HTML-код для чайников

В этом выпуске Вы узнаете:

1. Как содать html-документ
2. Что такое теги
3. Из каких обязательных тегов состоит любой html-документ
4. Как задать цвет фона, шрифта
5. Как изменять размер, цвет и тип шрифта

Итак, прежде чем приступить к обучению, создайте у себе на компьютере отдельную папку. Можете создать ее где угодно и назвать как Вам это будет угодно. Я создал у себе на компьютере папку на диске D: и назвал ее "Мои первые шаги"

Теперь Вам необходимо открыть блокнот – notepad (пуск – программы – стандартные – блокнот или кликни правой кнопкой – создать - Text document).

Дальше скопируйте в свой документ следующий текст:

Что это такое я расскажу Вам чуть позже.

Теперь необходимо сохраним этот документ, как html -документ. Это делается очень просто. Нажимаем:

1. Файл -> Сохранить как
2. Дальше необходимо присвоить имя для своего документа, например: index.html ( Примечание. обязательно после имени документа необходимо ставить .html. иначе Вы не создадите html-документ)
3. В дальнейшем если Вы уже создали html-документ и Вам необходимо сохранить изменения, можете это делать через: Файл -> Сохранить

Теперь не закрывая блокнот откройте браузер. например Internet Explorer и в нем откройте ранее созданный документ. Как это сделать:

Файл -> Открыть -> Обзор -> Наш документ (index.html)

В открывшемся браузере Вы увидите следующее .

Примечание. На будущее, если Вы что-то изменяете в своем блокноте, не забывайте сохранять это (для быстрого сохранения используйте "Ctrl + S "), а для того чтобы увидеть изменения в браузере необходимо нажимать кнопку "Обновить" или клавишу F5 .

Итак, для начала давайте разберемся, что же это такое "тег"?

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

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

К примеру, тег <br> - это тег, благодаря которому мы делаем перенос строки, своего рода "Enter".

Теги могут содержать внутри себя и другие теги. Очень важно не перепутать очередность их закрытия. К примеру:

Тег, который открывается первым, закрывается последним!

Запомните это! Любая другая очередность тегов будет не правильная и будет не корректно отображаться в браузере.

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

Итак, из каких же обязательных тегов состоит любой html-документ?

Любой документ должен открываться тегом <html>. но если есть тег который открывает документ, то и существует тег который закрывает наш документ. Это тег </html>. Но не все теги необходимо закрывать! К примеру тег <br> не требует закрывающегося тега.

Любой html-документ состоит из следующих обязательных тегов:

• <html> - тег, который открывает документ
• </html> - тег, который закрывает документ
• <head> и </head> - это голова документа
• <body> и </body> - это тело документа

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

Тело документа <body></body> - это то, где находится все содержимое нашего документа.

Итак, двигаемся дальше. Дальше мы научимся изменять цвет фона! Для раскраски Вам понадобится палитра цветов. Ее можно скачать здесь. Советую Вам сохранить ее себе на компьютер, она Вам еще не раз пригодится!

По умолчанию цвет фона установлен "белый". Для того чтобы изменить его используется атрибут "bgcolor". Он задается в уже знакомом нам теге <body>. Выглядит это следующим образом:

Для наглядности я прописал желтый цвет, но Вы можете прописать любой другой. Обратите внимание, что значению цвета обязательно должен предшествовать значок – "#"

Тегу <body> можно присвоить еще несколько атрибутов. Для того чтобы задать цвет шрифта во всем документе используется атрибут "text" .

Итак, в теге <body> мы одновременно можем прописывать несколько атрибутов, это касается и других тегов.

А как же окрасить отдельный участок текста?

Для этого используется тег <font>. который отвечает за шрифт. Для того, чтобы окрасить какой-либо участок текста совместно с тегом <font> используется атрибут "color". Кстати, атрибут "color". как и многие другие атрибуты может использоваться и с другими тегами. Давайте окрасим слова "Добро пожаловать!" в красный цвет.

Итак, понятно, что для окраски шрифта используется атрибут "color". а для того чтобы изменить размер шрифта существует атрибут "size" ".

<font size="+4"> текст </font>

<font size="+3"> текст </font>

Давайте посмотрим, как это выглядит в живую. Добавим к нам в текст еще пару строк и выделим следующий фрагмент.

HTML учебник для чайников

Я и сам в свое время начинал изучать html с подобных учебников, (HTML учебник для чайников ) сделал первый урок и затянуло, начал создавать сайты, первый мой сайт был довольно прикольный, на чистом html коде с нуля, фон сайты был черным, меню у сайта не было, сайт был разбит на колонки в которых были всякие рекламные блоки с помощью которых я собирался заработать)

Далее я сделал сайт путем переделки html шаблона. сайт был уже конечно красивее того первого, на сайте было около 50 страниц которые я сделал своими руками, и когда мне понадобилось вставить рекламный код на все страницы сайта, тогда я и понял какой это гемор делать сайты на чистом html коде( Мне повезло что у меня в аське завелся друг из России который помогал мне советами, нашол я его на каком-то форуме о заработке в интернете, он мне и подсказал что надо работать с сайтами на движках (системах управления контентом) о движках читайте на нашем сайте в разделе «Сайт с нуля»

Ступенька 2 — «Что такое тэги?».

Ступенька 3 — «Обязательные тэги. Зачем телу голова, а голове тело?»

Простейшие.

Ступенька 4 — «Раскрась сам. Изменяем цвет текста».

Ступенька 5 — «Как изменять цвет фона страницы. Немного об этике цветов».

Ступенька 6 — «Параграфы и DIV. Учимся выравнивать текст».

Ступенька 7 — «Что такое заголовки и как задавать размер буковок».

Ступенька 8 — «Курсив, жирный текст, подчеркнутый и другие».

Ступенька 9 — «Стандартные шрифты. Как прописать свой шрифт».

Ступенька 10 — «Что такое путь? Как вставлять картинки».

Ступенька 11 — «Что можно сделать с картинкой. Картинка, как фон документа, и т.д.».

Ступенька 12 — «О любителе сосисок и принудительном прерывании обтекания текстом картинки».

Ступенька 13 — «Ссылка и как с нею бороться».

Ступенька 14 — «Ссылка на е-майл. Подсказка к текстовой ссылке».

Ступенька 15 — «Может ли картинка быть ссылкой».

Ступенька 16 — «Куда податься, на что ссылаться. Новое окно при нажатии на ссылку».

Ступенька 17 — «Карты. Как часть картинки сделать ссылкой».

Ступенька 18 — «Карты. Как часть картинки сделать ссылкой 2″.

Ступенька 19 — «Карты. Как часть картинки сделать ссылкой 3″.

Ступенька 20 — «Закладка. Как сделать ссылку внутри документа».

Ступенька 21 — «Учимся создавать таблицы».

Ступенька 22 — «Учимся создавать таблицы» продолжение.

Ступенька 23 — «Таблицы, вертикальное выравнивание (valign)».

Ступенька 24 — «Таблицы, учимся растягивать ячейки (rowspan, colspan)».

Ступенька 24-2 — «Дополнительная глава. Ответы на домашнее задание».

Ступенька 25 — «Таблицы, что такое cellspacing и cellpadding. Что делать с пространством».

Ступенька 26 — «Вложенные таблицы и некоторые нюансы».

Ступенька 27 — «О рамках таблиц, и брюзжание о таблицах напоследок».

Ступенька 28 — «Создаем простой сайт с таблицами».

Дополнительные.

Ступенька 29 — «Спецсимволы, или головная боль».

Ступенька 30 — «О линиях. Просто и полезно».

Ступенька 31 — «Как убрать отступы (поля) документа, topmargin, leftmargin, marginwidth, marginheight».

Ступенька 32 — «О списках. Неупорядоченные списки».

Ступенька 33 — «Упорядоченные списки. Ремарка: что такое спецификация и консорциум».

Ступенька 34 — «Cпецифические тэги, бегущая строка текста».

Ступенька 35 — «Вступление. Зачем они (фреймы) нужны.»

Ступенька 36 — «Учимся создавать фреймы».

Ступенька 37 — «Учимся создавать фреймы» продолжение.

Ступенька 38 — «Учимся создавать фреймы» продолжение.

Ступенька 39 — «Убираем полосу прокрутки, избавляемся от рамок, регулируем ширину полей фрейма».

Ступенька 40 — «При нажатии на ссылку документ открывается в другом фрейме, в полное окно».

Ступенька 41 — «Последняя глава о фреймах. Что такое IFrame».

Всем советую качать данный учебник:

Уроки HTML для чайников скачать бесплатно