Самоучитель по css и html – HTML: учебник самоучитель видео скачать бесплатно, изучение html начинающим

Самоучитель, справочник html, css, javascript и php

Сеть Интернет уже давно стала для нас чем-то необходимым, каждодневным и универсальным. В сети каждый находит для себя что-то нужное, интересное или даже необходимое. Обилие Интернет сайтов, сервисов социальных сетей, форумов и многих других, полезных и не очень, ресурсов просто поражает. В сети можно найти все: от списка ресторанов и кинотеатров, куда бы вы хотели пойти, до подробного описания принципа работы адронного коллайдера, с подробными примерами и чертежами по его созданию.

Но как это работает, что нужно сделать, чтобы построить свой собственный сайт?

Если вас интересуют именно эти вопросы — вы зашли по адресу. Сайт www.puzzleweb.ru – это универсальный самоучитель и справочник по HTML 5, CSS, JavaScript и PHP, на страницах которого вы сможете не только узнать, как работают интернет сайты, но и научитесь создавать их самостоятельно.

Как пользоваться сайтом?

Для удобства восприятия и изучения материала сайт разделен на четыре основных раздела, в каждом из которых вы найдете всю необходимую информацию по интересующей вас теме:

Для кого создан сайт www.puzzleweb.ru?

Сайт будет полезен не только для начинающих WEB-программистов, но и для тех, кто уже умеет создавать сайты и приложения. Благодаря наличию на нашем ресурсе удобных справочников по CSS и HTML, вы всегда сможете быстро определить значение интересующего вас тега или свойства, не теряя времени на поиски информации в книгах или в Интернете. На страницах наших самоучителей вы найдете множество практических примеров исходного кода страниц, скриптов, которые вы с легкостью сможете применить для создания собственного проекта.

puzzleweb.ru

Самоучитель CSS | Отличия html и CSS

Каскадные таблицы стилей (Cascading Style Sheets) предоставляют дополнительные возможности для разметки html-документа и свободу по созданию уникального дизайна для веб-страниц.

Прежде чем приступить к изучению CSS, у вас уже должен быть небольшой опыт работы с HTML, имеется ввиду, что вы уже создавали простые страницы и знакомы с основными HTML тегами для разметки документа.

Стили по умолчанию

Когда браузер обрабатывает HTML-код, он использует встроенный по умолчанию стиль представления HTML-элементов на веб-странице. Чтобы понять, что такое «стиль по умолчанию» рассмотрим в качестве примера элементы <h2> — <h6>: заголовки являются блочными элементами, занимают всю доступную ширину в родительском элементе, имеют разрыв строки до и после элемента, текст заголовка отображается жирным начертанием и имеет определённый размер, в зависимости от уровня заголовка, всё это вместе является встроенным стилем для заголовков.

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

Что такое CSS?

• CSS — Каскадные Таблицы Стилей(Cascading Style Sheets)
• Стиль — правило, описывающее форматирование отдельного элемента на странице
• Стили были добавлены для решения проблемы оформления веб-страниц
• Стили можно хранить в отдельных документах, что уменьшает размер HTML-кода

Чем полезны таблицы стилей помещенные в отдельный документ? Ответ очень прост, можно собрать все стили, которые используются на сайте, в один внешний файл с расширением .css и связать его со всеми страницами сайта. После этого, когда вы будете редактировать стиль, изменения моментально затрагивают все элементы на страницах сайта, где есть ссылка на данный внешний файл со стилями. Таким образом, вы можете полностью изменить внешний вид путем редактирования единственного файла таблицы стилей, что существенно упрощает работу, нежели редактировать стили на каждой странице в отдельности.

HTML и CSS

CSS и HTML — это два разных языка для разных целей.

При написании html-кода для CSS, выбирая теги, ориентируйтесь на роль, которую играет фрагмент текста на веб странице, а не на внешний вид, который текст приобретает благодаря этому тегу.

Применяя CSS для дизайна веб-страницы, вы используете HTML только по его прямому назначению, то есть именно для разметки веб-страницы на логические фрагменты, не заботясь о форматировании и внешнем виде страницы.

Небольшой пример использования CSS:

С помощью стилей, картинка была позиционирована с левой стороны, а для текста был изменен размер, цвет и добавлена тень.

В браузере Internet Explorer 9 и в более ранних версиях не поддерживается свойство, добавляющее тень к тексту.

puzzleweb.ru

Лучшие ресурсы для изучения html и css

Сайт дня (как попасть): Хочешь дешево купить iPhone?

Один из предыдущих постов на Shakin.ru назывался Как перестать работать на дядю.

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

Сначала немного определений:

Html (от английского «HyperText Markup Language» — язык разметки гипертекста) — это стандартный язык разметки веб-страниц.

Css (от английского «Cascading Style Sheets» — каскадные таблицы стилей) — это технология описания внешнего вида веб-страницы.

Без знания html и css вести свой сайт будет очень проблематично — даже счетчик статистики или тот же баннер поставить не получится. Не бегать же за помощью к специалистам или создавать тему за темой на форумах? Нужно просто взять и выучить.

По своему опыту могу сказать, что html и css можно выучить за 1 месяц. Конечно, я не говорю о профессиональных высотах — вы до них сами доберетесь при желании.

На мой взгляд, лучший способ выучить html, css, да и другие тематики, включая продвижение сайтов — это завести свой сайт и на нем практиковаться. Кстати, можете посмотреть первый созданный мною сайт по картам для игры Counter-Strike, созданием которых я тогда увлекался. Вот карты и их скрины, созданные стариком Глобатором в те времена, когда он еще не знал, что такое топ-10, тИЦ и PR, и беззаботно резвился на солнышке создавал трехмерные карты 🙂 . Я создал этот сайт за месяц, изучая html и css на практике.

Для того, чтобы выучить html и css, совсем необязательно быть техническим специалистом. К примеру, я вообще гуманитарий и по математике у меня в основном было «2» 🙂 . Так что выучить html и css под силу любому желающему. Перечисленные мною ресурсы подойдут также и для того, чтобы в любой момент вы могли с их помощью выяснить какой-либо интересующий вас момент по html и css.

Сайты для изучения html и css

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

Htmlbook.ru — один из самых полезных сайтов по html и css. Этот ресурс создан в 2002 году. Для новичков будет полезен раздел Шаг за шагом, в котором хорошо структурированы многое важные моменты.

Давайте вместе составим рейтинг Sape

Sdelaysite.com — блог Андрея Морковина, профессионального вебмастера, на котором вы можете найти много полезных материалов. Основная тема блога Андрея — верстка. В частности, рекомендую серию из 14 видеоуроков по верстке.

Dimox.name — отличный блог Димокса, на котором можно найти массу материалов по продвинутому использованию css, верстке, а также по другим темам.

Ruseller.com — css учебник и уроки по html и многим другим тематикам, полезным для вебмастера.

Html.manual.ru — хороший онлайн справочник по html. В левой колонке можно быстро перейти на интересующий вас пункт меню.

Спецификация по html — спецификация по html на русском.

Htmlcoder.visions.ru — полезные статьи по html. Причем это не просто скучные статьи, а действительно интересные материалы с профессиональными советами. На этом сайте также есть раздел со статьями по css.

Ru.html.net — онлайн учебник html и css с практическими советами и рекомендациями. Как и на предыдущем ресурсе, на этом сайте есть раздел с материалами по css.

Css.manual.ru — справочник-руководство по css. В статьях приводятся наглядные примеры с картинками.

Colorpilot.ru — как написано в названии этого сайта, это учебные странички. Которые, на мой взгляд, будут очень полезны новичкам.

Dimasweb.narod.ru — когда я зашел на этот сайт, то сразу вспомнил, что когда-то он мне очень помог разобраться в некоторых нюансах html и css. Там несколько необычная навигация, но к ней можно быстро привыкнуть.

Wcode.ru/html — краткие, но полезные уроки html. Ничего лишнего.

Xhtml.ru — секреты и советы по xhtml, а также по другим веб-технологиям.

Форумы и разделы форумов по html и css

Форумы — прекрасная возможность для новичков задавать вопросы и общаться со специалистами. Помню, когда я не мог вставить счетчик mail.ru на свой сайт или из-за лишней кавычки неделю не мог выяснить, почему мой сайт криво отображается — то я получал ответы на свой вопросы именно на форумах. Я благодарен тем добрым людям, которые мне тогда помогли, и продолжают помогать другим новичкам.

Forum.htmlbook.ru — форум, целиком посвященный html и css.

Html.by — полезный форум для вебмастера по html, css и многим другим тематикам.

Раздел веб-строительство на серче — можно найти ответы не только на вопросы по html, но и на смежные темы.

Англоязычные ресурсы по html и css

Если уровень знания английского позволяет вам читать и понимать английский, то это дает вам огромные возможности. Рунет — это капля в 2 с небольшим процента в океане мирового Интернета. Представляете, сколько там всего интересного? С помощью знания английского можно делать регулярные вылазки за пределы капли с целью самообразования и поиска полезных материалов 😉 .

Раздел html и css на nettuts.com — очень рекомендую вам посетить этот ресурс. В образовательном плане я считаю этот сайт самым полезным для вебмастера. Там масса подробных статей и видеоуроков по всем вопросам вебмастеринга.

W3schools.com/css — подробный справочник по css на английском. Также есть справочник по html.

Рубрика html и css уроков на webdesign.org — если вы хотите быть на волне технологии и быть в курсе всего самого нового в html и css, то этот сайт — для вас. Во как написал, даже самому понравилось 🙂 ! Уроки обновляются с завидной регулярностью.

Когда-то Глобатор добавлял туда свои уроки по Фотошопу, переведенные на английский. Мне нравилось делать экспорт своего контента в англоязычный интернет. Тогда я понял, как можно эффективно продвигаться в зарубежном интернете, если переводить свой уникальный контент на английский и распространять его в англоязычном интернете. Сейчас поищем. О, нашел! Вот мои уроки! Один даже заслужил Editor’s Peak в категории Photoshop Tutorials в августе 2006 года! Я узнал об этом только сейчас… *Слезы счастья покатились по его небритой щеке* 😉 …

Представляете, кем бы я был, если бы развивался дальше в теме Фотошопа? Я бы был настоящим монстром! Но я связался с SEO и прозябаю тут, набирая эти буквы скрюченными от мороза пальцами  🙂 . Да шучу, тут тоже тепло и неплохо кормят 🙂 .

Раздел html уроков на good-tutorials.com — очень, очень много полезных уроков по html с постоянными обновлениями. Также есть раздел css уроков.

Html раздел форума Digitalpoint — моего любимого англоязычного форума, на котором много действительно полезной информации. Естественно, как же без css раздела 🙂 !

Htmlcodetutorial.com/help — полезный англоязычный форум по html и css. На нем есть разделы по программированию, SEO и т.д.

Htmldog.com — оригинальный ресурс с уроками разного уровня сложности.

Желаю вам успешного освоения html и css!

Глобатор

Постовой (обмен постовыми): Твиттер, как источник трафика на блог. Советы и рекомендации

Crawling ..Ничего, пройдет и по нашей улице инкассатор

Десерт на сегодня — видеоролик и классных роботах, созданных по примеру животных:

Подпишитесь на рассылку блога с полезными материалами по SEO

Оцените, пожалуйста, статью, я старался 🙂 :

shakin.ru

Самоучитель HTML, CSS. Справочники по тегам и свойствам

ВКонтакте провели обновление системы онлайн-трансляций

25/11/2018, 10:33

iPhone XS популярнее iPhone X и iPhone 8

05/10/2018, 19:09

ICANN – C 11 октября могут возникать перебои в работе Интернета

07/09/2018, 9:06

Проблемы с микрофоном у некоторых iPhone 7 после обновления iOS

07/05/2018, 9:51

Горнолыжный курорт Шерегеш получил скоростной мобильный интернет

22/03/2018, 10:19

Потерянный смартфон поможет найти новое мобильное «Облако Mail.Ru»

27/12/2017, 9:58

«Одноклассники» добавили возможность создать лонгриды

17/12/2017, 10:32

msiter.ru

Подключение таблиц стилей CSS и HTML. Самоучитель для начинающих

Чтобы изучить верстку интернет-страничек, необходимо на примере почувствовать влияние каскадных таблиц стилей на отображение содержания в окне браузера. Поэтому продолжим знакомство с HTML и CSS на практике.

Создание структуры сайта или шаблона

Сделать это без знания CSS и HTML не представляется возможным и я предлагаю вместе со мной пробежаться по азам создания простого сайта, структура каталогов и файлов которого может быть в дальнейшем перенесена на какую-нибудь систему.

Сейчас мы не выбираем ни название, ни тип будущего сайта, мы готовим структуру, которая подойдет для любых сайтов.

Открывайте ваш редактор текста, выбирайте синтаксис HTML и сохраните документ в папку (папка с названием сайта) test.ru/www вашего виртуального веб-сервера (денвер) под именем index.html.

Подробная инструкция по настройке денвера и подключению виртуальных хостов читать здесь.

Рядом с ним создайте два каталога «css» и «images». В папку «css» сохраните еще один документ и обзовите его style.css, синтаксис выставьте соответственно «css».

Напомню, что синтаксис меняется в программе «Notepad++» в меню «Синтаксис» путем выбора соответствующего стиля. Если у нового файла выбран определенный синтаксис (например css), то при сохранении он уже автоматически присвоит файлу нужное расширение.

Итак, у вас открыто два основных текстовых файла: index.html и style.css. Вот с ними мы и будем работать. Привыкайте, чтобы кодировка была выставлена у гипертекстового файла UTF-8. В настройках редактора можно отметить, чтобы файлы создавались по умолчанию в юникоде (кодировка UTF-8). Настройки редактора приведены в статье «Настройка Notepad++».

В принципе, минимальная структура сайта или шаблона сайта выглядит именно так. В дальнейшем могут быть созданы еще каталоги с названиями: «html» для других страничек сайта, «js» для скриптов JavaScripts и другие.

Шаблон файла XHTML 1.0 Transitional

Ниже приведен шаблон чистого html-файла, его вы можете применять для создания своих сайтов или шаблонов оформления ко многим системам управления контентом. Использовать мы будем стандарт XHTML 1.0 Transitional.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head>
        <title>Название сайта или странички (Отображается в заголовке окна браузера)</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="Description" content="Краткое описание содержимого">
        <meta name="Keywords" content="Ключевые, слова">
        <meta name="Robots" content="index, follow">
    </head>
    <body>
        Test.ru - сайт для тестеров
    </body>
</html>

Структура файла index.html

Первой строчкой объявляем тип документа и используемый стандарт, которому свойственны определенные правила кода.  В дальнейшем в обучении мы будем использовать только такой формат, и только юникод.

Затем идет два больших блока (заголовок — title) и (тело документа — body), расположенных в общем блоке . Вам уже должны быть знакомы эти контейнеры из прошлого занятия.

В заголовке содержится скрытая «мета-информация». Это и описание страницы (Description) и ключевые слова (Keywords), это и присоединенные файлы скриптов и таблиц стилей, это и указания использованной кодировки, команд поисковому роботу и многое другое. Все это мы обязательно изучим по мере прохождения страниц самоучителя CSS и HTML. Пока же это все лишнее, ведь сначала нам нужно научиться верстать.

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

Подключение таблиц стилей CSS и HTML

Существует три способа использования таблиц стилей CSS в HTML-файлах:

• Указание стилей в элементе разметки
• Указание стилей в заголовке страницы
• Подключение отдельного CSS-файла (или файлов)

Первый способ нужный, но очень узкий, так как применим лишь к конкретному элементу. Фактически он расширяет или заменяет стандартные атрибуты конкретного тега. Указание стиля происходит путем описания стилей в значении атрибута «style». Сразу приведу пример написания и не будем на этом зацикливаться.

<body>

или

<a href="http://seoskop.ru">

В первом примере мы поменяли цвет текста, цвет фона и поставили растягивание текста «по ширине» ко всему документу. Во втором примере опять же определили цвет конкретной ссылки и ее декорирование (ссылки изначально синие и подчеркнутые, а мы сделали ее черной и без подчеркивания).

Второй способ гораздо шире, так как задает стиль для всего документа (всей страницы). Неудобство этого способа — громоздкие файлы *.html, ведь в заголовке будет много строк описания стилей элементов. Если у нас многостраничный сайт, то в каждом файле придется снова прописывать целиком все стили заново.

Указание стилей происходит следующим способом:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head>
        <title>Название сайта или странички (Отображается в заголовке окна браузера)</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="Description" content="Краткое описание содержимого">
        <meta name="Keywords" content="Ключевые, слова">
        <meta name="Robots" content="index, follow">
        <style type="text/css">
            body{
                color:#0000ff; /*цвет текста документа*/
                background-color:red; /*цвет фона*/
                text-align:justify; /*выравнивание текста по ширине*/
            }
            a{
                text-decoration:none; /*отмена подчеркивания*/
                color:#000000; /*черный цвет ссылок*/
            }
        </style>
    </head>
    <body>
        Test.ru - сайт для тестеров
    </body>
</html>

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

Не забывайте сохранять документы, у меня уже автоматически получается нажимать ctrl+s, этого действия я даже не замечаю за собой.

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head>
        <title>Название сайта или странички (Отображается в заголовке окна браузера)</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="Description" content="Краткое описание содержимого">
        <meta name="Keywords" content="Ключевые, слова">
        <meta name="Robots" content="index, follow">
        <link rel="stylesheet" href="/css/style.css" type="text/css" /> <!--подключаем файл CSS-->
    </head>
    <body>
        Test.ru - сайт для тестеров
    </body>
</html>

Тогда для получения того же результата, что и ранее в файле стилей style.css нужно прописать код:

body{
    color:#0000ff; /*цвет текста документа*/
    background-color:red; /*цвет фона*/
    text-align:justify; /*выравнивание текста по ширине*/
}
a{
    text-decoration:none; /*отмена подчеркивания*/
    color:#000000; /*черный цвет ссылок*/
}

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

Файл «.htaccess»

Создайте текстовый файл в корне вашего сайта и обзовите его .htaccess. В него добавьте строчку

AddDefaultCharset utf-8

Данная строчка позволит правильно отображать кириллический текст, содержащихся в файлах с кодировкой юникод. На данном этапе не забивайте себе голову назначением файла, но имейте в виду, что он очень важен для сайта и позже от его конфигурации будет зависеть работа самого сайта.

Возможно, что сам эксплорер (проводник) вам не разрешит так обозвать файл и скажет, что у файла должно быть не только расширение, но и имя файла. Пользуйтесь нормальным файловым менеджером, например  TotalCommander.

Теперь можно запустить денвер и набрать в строке браузера имя нашего сайта. У меня это test.ru. Из нашего примера мы получим жуткое, но заметное! сочетание цветов. Не обращайте на это внимание, сейчас не в этом соль статьи.

Приоритеты таблиц стилей CSS

Чтобы выяснить приоритеты нам придется прибегнуть к исследованиям, то есть применить к одному документу все три способа и оценить результаты. Поиграем с документом:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head>
        <title>Название сайта или странички (Отображается в заголовке окна браузера)</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="Description" content="Краткое описание содержимого">
        <meta name="Keywords" content="Ключевые, слова">
        <meta name="Robots" content="index, follow">
        <link rel="stylesheet" href="/css/style.css" type="text/css" />
        <style type="text/css">
            body{
                color:#ff00ff;
                background-color:grey;
                text-align:center;
            }
            a{
                text-decoration:underline;
                color:red;
            }
        </style>
    </head>
    <body>
        <a href="http://test.ru"> Test.ru - сайт для тестеров </a>
        <p>
            Test.ru - сайт для тестеров
        </p>
    </body>
</html>


Для эксперимента я добавил стиль вторым способом ниже, чем подключил CSS-файл и к элементам применил совсем другие настройки. В результате у меня оказался серый фон, сиреневый текст по центру страницы и красная ссылка с подчеркиванием. Получается, что стили из файла style.css проигнорированы, а применены те, что описаны в заголовке страницы.

Если вы поменяете последовательность стилей, то есть пропишете строчку подключения файла CSS ниже стилей в заголовке, то заметите, что все кардинально поменялось и применен стиль из файла style.css. Это означает, что порядок расположения стилей в каком бы то ни было виде влияет на результат, иными словами — последний стиль будет решающим. Но всегда ли?

Давайте изменим файл еще раз:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head>
        <title>Название сайта или странички (Отображается в заголовке окна браузера)</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="Description" content="Краткое описание содержимого">
        <meta name="Keywords" content="Ключевые, слова">
        <meta name="Robots" content="index, follow">
        <link rel="stylesheet" href="/css/style.css" type="text/css" />
        <style type="text/css">
            body{
                color:#ff00ff;
                background-color:grey;
                text-align:center;
            }
            a{
                text-decoration:underline;
                color:red;
            }
        </style>
    </head>
    <body>
        <a href="http://test.ru"> Test.ru - сайт для тестеров </a>
        <p>
            Test.ru - сайт для тестеров
        </p>
    </body>
</html>

После такого поворота событий браузер будет вынужден применить стиль, указанный прямо внутри элемента. В данном случае наша ссылка станет зеленой, так как мы указали это внутри тега <a>. Но и это еще не все. Внесите изменения в  файл style.css:

body{
    color:#0000ff;
    background-color:red;
    text-align:justify;
}
a{
    text-decoration:none;
    color:#000000 !important;
}


Обратите внимание, что в стилях я использовал дополнительный параметр !important, который сделал свойство приоритетным по сравнению с другими, даже при условии того, что описан он раньше других и должен быть по идее заменен.

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

В следующей статье мы продолжим изучать связку таблиц стилей и html и будем приближаться к намеченной цели – блочной верстке на элементах

seoskop.ru

HTML — Учебник для начинающих / ProgLang

<!DOCTYPE html>
<html>
   <body>
      <h2>Привет мир!</h2>
   </body>
</html>