Советы и лайфхаки

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

Содержание

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

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

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

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

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

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

HTML

Самоучитель HTML – это подробное руководство по языку разметки HTML, включая все обновления и дополнения к языку в версии HTML 5. Полезно знать, что на каком бы языке программирования ни был бы написан сайт, для браузера пользователя его структура всегда подается в виде HTML. Справочник html также поможет вам свободно ориентироваться в данном языке.


CSS

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


JavaScript

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


PHP

Если вы хотите научиться создавать динамические веб-сайты, уже знакомы с основами разметки HTML, но не представляете себе, как использовать для этих целей язык программирования PHP, то наш раздел по 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 стартовал рейтинг, где специалисты и сервисы будут соревноваться в восьми номинациях:

https://blog.sape.ru/2018/12/davayte-vmeste-sostavim-reyting-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

Компания Flurry Analytics провела исследование рынка смартфонов, которое продемонстрировало, что за семь дней с начала продаж смартфонов iPhone XS и iPhone XS Max их доля на рынке Америки
ICANN – C 11 октября могут возникать перебои в работе Интернета

07/09/2018, 9:06

Корпорация по управлению доменными именами и IP-адресами (ICANN) впервые со времени появления сети Интернет готовится поменять криптографические ключи, предназначенные для защиты системы доменных имен (DNS). Согласно сообщению смена ключей начнется 11 октября
Проблемы с микрофоном у некоторых iPhone 7 после обновления iOS

07/05/2018, 9:51

В руки СМИ попал некая инструкция, предназначенная Apple для распространения среди авторизованных центров сервисного обслуживания данной компании. В этом документе говорится о возникновении проблем с микрофоном у некоторого, как там сказано, "ограниченного количества" смартфонов линейки iPhone 7 и iPhone 7 Plus
Горнолыжный курорт Шерегеш получил скоростной мобильный интернет

22/03/2018, 10:19

Мобильный оператор Tele2 запустил новые базовые станции, призванные улучшить мобильную связь 4G на популярном горнолыжном курорте в Сибири. Теперь в зону стабильного покрытия скоростного мобильного интернета входит вся территория курорта Шерегеш, в том числе гора Курган и склоны горы Мустаг
Потерянный смартфон поможет найти новое мобильное "Облако Mail.Ru"

27/12/2017, 9:58

Разработчики мобильного приложения "Облако Mail.Ru" для устройств на iOS и Android выпустили новую версию своей программы, в которую была добавлена новая возможность — мгновенное фото во время попытки неавторизованного доступа. Новую опцию можно включить во время настройки PIN-кода в облачном приложении
"Одноклассники" добавили возможность создать лонгриды

17/12/2017, 10:32

Соцсеть "Одноклассники" представила новую функцию — платформу для написания, так называемых, лонгридов. Благодаря новой платформе теперь каждый пользователь социальной сети получает возможность выложить контент, в который сможет вставить различные медиа материалы

msiter.ru

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

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

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

Статьи этого самоучителя по 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

HTML (англ. HyperText Markup Language) — расшифровывается как «язык гипертекстовой разметки», который является наиболее часто используемым языком.

HTML был создан Тимом Бернерс-Ли в конце 1991 года, но первой стандартной спецификацией HTML стала «HTML 2.0», которая была опубликована в 1995 году. Основной версией HTML была 4.01, и она была опубликована в конце 1999 года. Хоть версия HTML 4.01 широко распространена, но в настоящее время существует версия HTML 5, которая является расширением HTML 4.01 и была опубликована в 2012 году.

Аудитория

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

Предпосылки

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

  • иметь опыт работы с любым текстовым редактором, таким как блокнот, notepad++ и другие;
  • уметь создать каталоги (папки) и файлы на своем компьютере;
  • уметь перемещаться по различным каталогам;
  • уметь записывать содержимое в файл и сохранять его на компьютере;
  • иметь понимание изображений в разных форматах, таких как JPEG, JPG и PNG.

Попробовать HTML онлайн

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

<!DOCTYPE html>
<html>
   <body>
      <h2>Привет мир!</h2>
   </body>
</html>
Поделитесь:

proglang.su

Учебник CSS для начинающих. Что такое CSS?

Введение

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

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

Ну и что? Спросите Вы.. Зачем мне этот пресловутый CSS? Я и HTML-ом в чистом виде неплохо обходился!

Приведу ряд доводов в пользу использования CSS:

HTML в чистом виде имеет весьма ограниченный набор инструментов не позволяющий решать те или иные дизайнерские и функциональные задумки веб-мастера. Ну вот хотя бы, к примеру, взять больной вопрос всех начинающих веб-ремесленников "Как убрать подчеркивание ссылки?" или "Как сделать чтобы наведя курсором на эту самую ссылку она меняла цвет и подсвечивалась?" с помощью одного HTML этого никак не сделать!! А сколько их еще таких "больных вопросов"? - тьма.. Тут то и приходит на помощь CSS, который решает большинство задач касающихся дизайна сайта.

Предположим, Вы написали сайт в нем 100 страниц.. хороший сайт, информативный, люди на него ходят.. И вдруг по каким либо причинам Вам понадобилось изменить его дизайн, ну не знаю, мода изменилась, Вы нашли более лучшее дизайнерское решение, заказчику пришлось не по душе.. да мало ли еще почему.. Сколько времени и сил у Вас уйдёт на то что бы полностью переделать все 100 страниц сайта? CSS предлагает разумное решение этой задачи. А что если один раз в отдельном файле полностью описать весь дизайн сайта? Допустим: все заголовки <h2> делать красным цветом, параграфы <p> писать курсивам, ссылки <a> не подчёркивать 🙂 фон на всех страницах залить зелёным, и т. д. … а потом просто заставить эти 100 страниц HTML обращаться к файлу CSS и черпать из него нужную информацию? Теперь когда Вам вздумается, к примеру, перекрасить все заголовки из красного в зеленый, Вам ненужно открывать все 100 страниц находить в них теги <h2> и указывать в каждом что ты теперь не красный а зелёный! Вам нужно всего лишь открыть файл описание и изменить в нем цвет элемента <h2> на зелёный и всё!! Все заголовки на всех страницах сайта как по взмаху волшебной палочки станут зелеными.

Ввиду того, что CSS позволяет выносить повторяющиеся стилевые описания одних и тех же элементов в один файл происходит значительная "разгрузка" документов HTML, а это экономия объема, трафика, времени, денег.. HTML код становится лёгким, удобным для чтения и редакции.

Ну как? Заинтриговал? Если да то рекомендую перейти к непосредственному изучению CSS. В главах этого учебника Вы научитесь внедрять каскадные таблицы стилей на страницы Вашего сайта, познакомитесь с основными стилевыми свойствами элементов на примере создания сайта с использованием CSS, вникните в тонкости и хитрости дела. Если Вы уже знакомы c каскадными таблицами стилей и Вас интересует исключительно справочная информация, то предлагаю заглянуть в справочник CSS где собранны и кратко описаны свойства CSS и их возможные значения.





www.webremeslo.ru

Отправить ответ

avatar
  Подписаться  
Уведомление о