Этот раздел сайта полностью посвящен двум языкам создания сайта, а именно 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. Многие хотят выучить этот язык. Казалось бы, чего же проще - существует пугающе огромное число книг, посвященных этой теме. Неужели, язык html такой сложный, что ему посвящены огромные тома?
В этой статье я хочу попробовать дать начальные знания о предмете тем людям, которые хотят научиться верстке, направить их в нужное русло. Это не значит, что то, что я написал - непреложная истина. Я просто хочу, чтобы новички немного ориентировались в общих вопросах.
Для начала, я хотел бы привести примерный план этой статьи. Если кому-то что-то не интересно - может смело пропустить.
- Какие тэги нужно знать
- А как сделать красиво?
Что такое html и зачем он нужен
html - это не язык программирования, как многие думают. Это всего лишь, язык разметки. Его назначение - определять структуру документа. Если кто-то вам скажет, что html нужен, чтобы определять внешний вид странички - не верьте ему! Этот человек либо из прошлого, либо не совсем понимает предмет.
html определяет семантическое (смысловое) расположение элементов. Какой абзац за каким следует, какое содержимое связано логически, а какое представляет из себя совсем разные наборы данных, куда вставить картинку и куда перейти по нажатию на эту ссылку. В принципе, если бы сейчас для верстки страниц применялся только html, все сайты вряд ли бы сильно отличались внешне. Если кто-то скажет, что установка фоновой картинки - задача html - плюньте ему в лицо не верьте ему.
Поддержкой html, как и многих других технологий, связанных с web, занимается консорциум W3C . Если вы хотите узнать все из первых рук - пожалуйте на их сайт. Но должен вас предупредить: спецификации, выпускаемые W3C, носят рекомендательный характер, поэтому браузеры всегда по-разному воспринимают один и тот же html код. Это делает верстку гораздо сложнее, чем она есть на самом деле.
В настоящее время последняя спецификация html имеет номер 4.0. Есть так же, язык xhtml, который гораздо более требователен к разработчику, потому что содержит более жесткие стандарты. Так, тэги в html могут писаться в любом регистре, а в xhtml - только в нижнем. И так далее. Я придерживаюсь спецификации xhtml и буду ниже описывать ее.
Язык html составляет набор тэгов. Это директивы браузеру, которые указывают ему сруктуру вашего документа. Прошу заметить: структуру . За внешний вид сегодня отвечает другая технология — CSS, разговор о которой пойдет ниже. Для того, чтобы выучить html, по сути, нужно выучить набор тэгов и их аттрибутов и все! Можно приступать к созданию тестовых сайтов.
Какие тэги нужно знать?
Для того, чтобы начать работу, нужно выучить небольшой набор тэгов. Сейчас я приведу их перечисление, сгруппировав по определенным признакам. (Группировка является моим субъективным видением предмета и не претендует на абсолютную истинность)
- Основные: html, head, title, body;
- Структурные: div, span;
- Текстовые: p, ul, ol, li, h1-h6, br, pre;
- Таблицы: table, tr, td;
- Ссылки: a;
- Мультимедиа: img, object;
- Фреймы: frameset, frame, iframe;
- Формы: form, input, textarea, label, select, option;
- Факультативные: hr;
- Специальные: script, link, meta;
Как видно, тэгов не так уж и много. Однако, их изучение может занять значительное время, потому что многие из этих тэгов могут снабжаться атрибутами, которые заставляют эти элементы вести себя как-то не так.
Кто-то может возмутиться и сказать, что знает другие тэги, которые работают. Да, действительно, я привел список не всех тэгов, поддерживаемых браузерами. Однако, эти тэги являются основными, и человек, который знает их может сказать, что он знает html. Я нарочно не включал в свой список тэги типа font, которые являются устаревшими. Эти тэги настолько плохи, что даже говорить о них нет смысла, потому что сейчас есть значительно более мощные средства, позволяющие управлять внешним видом страниц и их частей. Лично я считаю необходимым и достаточным знание вышеприведенных тэгов. Потому что остальные либо нужны очень редко, либо не нужны вовсе. А посему, я предлагаю начинать изучение html с изучения этих тэгов.
Как сделать красиво?
Тот, кто попытается сверстать страничку при помощи вышеприведенных тэгов, получит в результате, довольно скромнооформленную страницу, которая будет белой с черным текстом и синими ссылками. Кое-кому, возможно, удастся разнообразить позиционирование блоков информации при помощи таблиц и атрибутов align. Кто-то попытается оживить страницу при помощи вставки картинок. Однако, есть специальное средство для настройки внешнего вида страниц. Это CSS.
Сейчас практически ни один сайт не обходится без применения технологии CSS. Именно на CSS возложена миссия определения оформления документа. Фон страницы, отступы, выравнивания, шрифты, цвета и многое другое находится в компетенции CSS. Поэтому сейчас рекомендуется не использовать теги и атрибуты, определяющие оформление страниц и элементов, а использовать вместо них правила CSS. О том, как же применять CSS лучше почитать в книгах. Но я хочу сказать, что если вы встретили тэг или атрибут, определяющий внешний вид элемента, 10 раз подумайте, прежде, чем применять его! Лучше узнайте, какое правило CSS отвечает за отображение элемента в таком виде, в котором вы хотите его видеть. За очень редким исключением, такое правило находится всегда.
С чего лучше начать изучение верстки?
Верстать лучше всего начинать после того, как поймешь принципы работы веб. Лично я бы составил такой план обучения:
- Изучение принципов работы web и структуры клиент-сервер
- Изучение тэгов и их атрибутов, с практическими занятиями по их применению
- Изучение правил CSS с практическими занятиями по их применению
- Изучение табличной верстки
- Верстка простого макета таблицами
- Верстка сложного макета таблицами
- Изучение директив DOCTYPE
- Изучение блочной верстки (тэг div)
- Верстка простого макета дивами
- Верстка сложного макета дивами
- Хитрости, приемы, хаки и прочие премудрости от гуру
В принципе, для начального уровня подготовки и знания основ html, достаточно пройти только первые 5 пунктов. (такой вариант будет идеальным для веб-программистов, которые не будут верстать сайты. Знание html им нужно только для того, чтобы выводить данные, полученные в результате выполнения скрипта.)
Когда-то давно я захотел сделать свой первый сайт IT-тематики. Из этой области я знал только совсем простые азы HTML и пожалуй все. Но желание и смелости у меня было хоть отбавляй, поэтому без особой боязни я зарегистрировал свое первое доменное имя.
Мой путь в освоении CSS и HTML был долгий, примерно 2.5 года и, я думаю, что процесс самообучения не закончится уже никогда. Но вот как сейчас помню, что мне очень сильно хотелось найти точку опоры, с которой можно было бы начать осваивать эту новую для меня область, так как информации обрушилось сразу очень много и переварить ее было непросто.
Я, полный решимости, зарегистрировал свой первый домен и принялся достигать поставленные цели. В то время я знал, что большинство сайтов, которые есть в Интернет, работают на различных уже готовых системах управления материалом, то есть CMS. И первой моей задачей было - найти CMS.
При выборе CMS я обращал внимание только на одно - CMS должна быть не требовательной к ресурсам сервера, так как желание, наверное, каждого новичка в этой области, свести к минимуму все затраты. Ну, то что CMS должна быть блоговой это понятно.
После долгих блужданий по сети я наткнулся на CMS Textpattern. По прошествию уже 2.5 лет я с уверенностью могу сказать, что с выбором Textpattern я не прогадал. Это самая лучшая CMS для блога, которая есть в паблике.
При колоссальной производительности эта CMS может размещаться практически на любом хостинге, где есть MySQL и поддержка PHP. В данный момент я использую недорогой хостинг, не VPS, и размещаю на нем 16 сайтов. Суточное посещение всех сайтов равняется примерно 5000 уникальных посетителей в сутки. Я думаю, что это хороший показатель производительности Textpattern.
Основной проблемой, с которой я столкнулся после установки этой CMS, это абсолютное мое незнание основ CSS. Я по крупице выуживал информацию из русскоязычного сообщества, пока в итоге не наткнулся на сайт http://htmlbook.ru . До этой своей находки, я подумывал о покупке книге по CSS, но теперь я даже рад, что не успел этого сделать, так как это была бы очередная покупка нового пылесборника.
На сайте HTMLbook я нашел очень много хорошо структурированной информации. Для новичка - это просто клад. Я и сейчас нередко обращаюсь в к этому ресурсу, так как все запомнить нельзя, да и не нужно это. Главное знание человека - это знать где достать то, что тебе нужно!
Если Вы только в самом начале своего профессионального жизненного пути и собираетесь сделать освоить CSS и HTML, то мой Вам совет: не покупайте бумажные толмуды, которые устаревают до момента издания, а пользуйтесь WEB-сервисами, которые не только сэкономят ваши деньги, а будут отличным подспорьем, находящимся всегда под рукой.
P.S. Всегда дивлюсь, когда забредаю на какой-нибудь "блог начинающего манимейкера" или как сейчас модно "бомжа", который пытается заработать кучу денег, но толком не представляет как самостоятельно сделать уникальный дизайн для своего сайта и получается что есть куча бомжей похожих друг на друга. Можно конечно и заплатить за дизайн, но копейка рубль бережет, да и никто лучше не сделает, как Ты сам.
Я решил уделить больше внимания новичкам, желающим приобрести знания в области сайтостроения. На это меня подтолкнула моя преподавательница, которая допускала уж очень много ошибок в методичках к лабораторным работам. Я бы с удовольствием бы глянул на тот ресурс, с которого была взята учебная инфа, и оставил бы там пару строк своего мнения. Но сейчас не об этом. В своей первой лекции я расскажу о том
Из чего состоит структура HTML-документа
Тег
сообщает о том, что начинается структура html-документа,
— что заканчивается. Между тегами
хранится в большей части информация для браузера и поисковых систем. В тегах
Теперь немного поясню. Все теги (тэг — элемент языка разметки гипертекста ) делятся на два типа «одиночные» и «закрывающиеся». Кроме того теги заключаются в следующие символы < и > , именно они отличают тег от обычного текста html . Рассмотрим несколько самых простых «одиночных» тегов:
— тег, который отвечает за перенос на новую строку, в том месте, где установлен данный тег. Рассмотрим код с использованием этого тега.
А это мой первый сайт.
Результат можно посмотреть .
— тег, который рисует горизонатльную линию. Этот тег относится к блочным элементам, линия всегда начинается с новой строки. Имеет 5 атрибутов:
- align — Определяет выравнивание линии. Может принимать значение left, center, right.
- color — Задаёт цвет линии.
- noshade — Рисует линию без трехмерных эффектов.
- size — Задаёт толщину линии.
- width — Задаёт ширину линии.
Код с использованием тега
:
А это мой первый сайт.
Визуальный пример находится .
Ещё один «одиночный» тег — это . Данный тег спользуются для хранения информации предназначенной для браузеров и поисковых систем. Поисковые системы обращаются к метатегам для получения описания сайта, ключевых слов и других данных. Разрешено использовать неограниченное число метатегов, все они должны находится между и . Параметры любого метатега имеют вид «имя=значение», который определяется ключевыми словами content , name или http-equiv . Т.к. метатеги предназначены для машин, никакого визуального изменения они не вносят, поэтому я приведу лишь исходный код:
Эта строка говорит о том, что создатель страницы считает, что на странице используется кодировка UTF-8. В HTML5 всё стало проще, для того, чтобы указать кодировку, достаточно лишь следующей строки:
Cуществуют и другие одиночные теги (,
,