Песочница

друже 26 мая 2015 в 11:18

Обучение HTML/CSS/JS

• CSS ,
• HTML ,
• JavaScript

Youtube

• www.youtube.com/user/agragregra - очень интересный канал, который поможет вам набить руку по созданию сайтов различной сложности с нуля;
• www.youtube.com/user/ArtSorax - много полезного материала для начинающих.Упор делается на CSS и JS;
• www.youtube.com/user/WebMagistersRu - с этого канала лично я начала знакомство со средой веб-разработки. Все рассказано доступным и понятным языком, основа основ, так сказать.
• www.youtube.com/user/loftblog - команда LoftBlog берет интервью у начинающих и состоявшихся IT-специалистов и разработчиков, а так же проводят видео обучение;
• www.youtube.com/user/TheSWAT727 - видеоканал содержит в себе информацию и обучающие материалы по Web-разработке в целом, охватываю Front-end, Back-end, обзоры текстовых редакторов и прочую полезную информацию для начинающих разработчиков и дизайнеров.

Интернет-ресурсы

• htmlbook.ru - святыня для начинающих специалистов. Данный ресурс содержит огромное количество информации в доступной и понятной форме + форум. Именно с этого я советую начинать знакомство с HTML/CSS;
• webdesign-master.ru - познавательный сайт для более глубокого ознакомления с web-дизайном и версткой;
• learn.javascript.ru - название сайта говорит само за себя. Советую начать обучение после ознакомления с основами HTML5/CSS3.

Сервисы

• www.codecademy.com - англоязычный сервис, где можно проверить свои знания на практике. Все интуитивно понятно, глубокие познания английского языка не потребуются;
• htmlacademy.ru - русскоязычный сервис, где упор идет на практику + немного теории. Очень интересный ресурс, курсы и задания;
• jsfiddle.net - так сказать «песочница» для web-разработчиков. Здесь в режиме онлайн можно код и тут же смотреть результат. Сервис будет вам помощником по указанию ошибок;
• validator.w3.org - здесь можно проверить свой кода на валидность, что бы исправить свои ошибки или недочеты кода HTML;
• jigsaw.w3.org/css-validator - аналогичный сервис, предназначенный для проверки на валидность CSS кода.

Итог

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

Теги: Обучение, материал, сайты, разработка сайтов

Данным циклом я хочу открыть серию уроков, посвященных HTML . Я принял такое решение, потому что мне хотелось бы попробовать обучить создавать пользователей сайты с нуля. Такая мысль была у меня в голове уже довольное долгое время. Лишь вставал вопрос, с чего начать, с HTML или непосредственно приступить к установке движка и дальнейшей его настройки.

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

Итак, что же такое HTML ?

Сама аббревиатура расшифровывается как Н урегТ ехt M arkиp L aпguage (язык гипертекстовой разметки ).

А если выражаться просто, то HTML – это специальный язык разметки, который объясняет браузеру, как отображать ту или иную веб-страничку . Т. е. каким шрифтом показывать текст, в каком порядке компоновать элементы, какие элементы отображать подчеркнутыми и т. д. И в зависимости от того, какой элемент будет встречаться браузеру, в соответствии с заложенными в сам браузер правилами, этот элемент так и будет отображаться. Однако, эти правила потом можно будет поменять, но об этом я уже буду говорить в своих следующих уроках, которые будут посвящены CSS .

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

Один день из моей жизни

Подготовка к концерту

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

Репетиция

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

Концерт

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

Для начала вам надо будет набрать этот текст в каком-нибудь текстовом редакторе (наиболее удобным я считаю является Notepad ++ ) и сохранить файл под именем index .html где-нибудь у себя на диске. При двойном щелчке на сохраненном файле у вас откроется страничка примерно такого вида.

Обратите внимание на то, что сами тэги при этом не отображаются, а отображается сам контент, который находится между ними. А отсюда вы можете сделать вывод, что тэги выступают в HTML в качестве оформительского элемента.

Посмотрите на исходный код. Как вы могли уже заметить, в нем перед словом “Один”, есть небольшой отступ. Однако браузер его не учел, он просто его проглотил молча, как будто и не было его никогда. Более того, если вы попробуете поставить множество пробелов между словами, то они все будут восприняты браузером как один пробел, - у HTML есть такая особенность.

И вот ещё такой совет, - когда пишите HTML -код, приучайте себя к тому, чтобы делать отступы в тех тэгах, которые являются вложенными в другие. Например, тэги title и body вложены в тэг html . Значит, когда будете писать эти тэги, то не забывайте делать соответствующие отступы. Обычно они делаются с помощью двух пробелов, либо табуляции, - это уже дело вкуса. Зачем это нужно? Сейчас, в том небольшом кусочке документа, который я привёл как пример выше - информации немного, поэтому и запутаться там довольно проблематично. Однако, если на страничке будет находиться множество вложенных элементов, то не будет ничего проще, как заплутать в этом огромном коде и с трудом сообразить, в какой части документа вы сейчас находитесь. Так что лучше приучать себя к хорошему стилю сразу, потом вы это сами поймете и вам это сыграет в дальнейшем хорошую службу.

Стоит также указать и самый необходимый минимум тэгов, которые должны быть в HTML -документе. Я говорю про эту часть:

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

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

А теперь попробуем разобрать сами, какой тэг нашего примера выше за что отвечает.

Тэг html означает, что начинается вывод html кода.

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

body – начинается основная часть документа.

h 1 – заголовок.

h 2 – подзаголовок.

p – абзац.

На этом пожалуй всё! Если это был ваш первый HTML -документ, то я вас поздравляю! Да, он выглядит не так здорово, как нам бы того хотелось. Но тем не менее, у нас есть материал, над которым мы уже можем работать. А в следующих уроках, всё будет ещё интереснее, и мы потихоньку коснёмся работе с каскадными таблицами стилей (CSS ) .

• < Назад

Для комментирования, вам необходимо зарегистрироваться.

или изучаем уроки HTML самостоятельно и бесплатно

Вы хотите создать свой сайт в сети интернет? - Очень хорошо! HTML уроки помогут вам в этом.

HyperText Markup Language или сокращенно HTML - язык гипертекстовой разметки документов, продукт W3C консорциума - лежит в основе почти всех существующих web-страниц, что ставит его на первое место в иерархии инструментов для создания сайтов. Следует уделить особое внимание изучению уроков этого раздела.

• Уроки HTML - это уроки по созданию интернет-страниц.
• Уроки HTML - первая ступень на пути освоения разработки интернет-сайтов.
• Уроки HTML и уроки веб-дизайна - совершенно различные понятия.

Новые, современные уроки по HTML разработаны специально для начинающих .

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

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

Б удьте осторожны! Вы можете пристраститься к новому занятию.

Новые уроки HTML | Пример HTML кода

Рассмотрим его элементы:

Теги, определяющие начало и конец документа.

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

Теги, определяющие главный заголовок документа.

Эта секция содержит всю видимую часть web-страницы.

В браузере мы увидим Hello World! :

Для изучения HTML необходим Блокнот . В нем мы будем вручную печатать код. Пожалуй, все... Интерпретацией кода занимается программное обеспечение для просмотра web-страниц, то есть Internet Explorer, Firefox, Opera, Chrome и другие браузеры.

В уроках данного курса будет представлен HTML 5 , XHTML и CSS включения. Такая комбинация является оптимальной для обучения и позволяет значительно ускориться в освоении материала.

В настоящее время на официальном сайте W3C консорциума уже доступна спецификация HTML 5 . Разработка пятой версии началась еще в 2007 году, в основе ее лежит XML и по сути она является, дополненным новыми элементами и атрибутами, XHTML -ем. Пятая версия HTML предлагает более широкую функциональность и упрощает процесс создания интерактивных сайтов и web-приложений. Помимо этого, HTML 5 содержит дополнительные элементы, обеспечивающие размещение внутри web-страницы мультимедийного контента.

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

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

Этот раздел сайта полностью посвящен двум языкам создания сайта, а именно HTML и CSS. Здесь вы сможете поэтапно изучить языки, узнать все от основ до самых сложных моментов.

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

В данном разделе размещены уроки по стандартам языка HTML5 и CSS3, соответственно, если же будут какие либо более новые версии данных языков, они так же будут отражены в новых уроках этого раздела, и вы обязательно узнаете .

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

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

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

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

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

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

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

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

CSS значительно расширяет возможности работы с любыми объектами html, в этом уроке я хотел бы вам подробно рассказать о тех параметрах которые можно применять к изображениям.

HTML расшифровывается как H yper T ext M arkup L anguage, т.е. язык гипертекстовой разметки — основной строительный блок веб-страниц, используется для создания и визуального представления веб-станиц.

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