Лучшие ресурсы для изучения html и 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 им нужно только для того, чтобы выводить данные, полученные в результате выполнения скрипта.)
Я решил уделить больше внимания новичкам, желающим приобрести знания в области сайтостроения. На это меня подтолкнула моя преподавательница, которая допускала уж очень много ошибок в методичках к лабораторным работам. Я бы с удовольствием бы глянул на тот ресурс, с которого была взята учебная инфа, и оставил бы там пару строк своего мнения. Но сейчас не об этом. В своей первой лекции я расскажу о том
Из чего состоит структура HTML-документа
Тег
сообщает о том, что начинается структура html-документа,
— что заканчивается. Между тегами
хранится в большей части информация для браузера и поисковых систем. В тегах
Теперь немного поясню. Все теги (тэг — элемент языка разметки гипертекста ) делятся на два типа «одиночные» и «закрывающиеся». Кроме того теги заключаются в следующие символы < и > , именно они отличают тег от обычного текста html . Рассмотрим несколько самых простых «одиночных» тегов:
— тег, который отвечает за перенос на новую строку, в том месте, где установлен данный тег. Рассмотрим код с использованием этого тега.
А это мой первый сайт.
Результат можно посмотреть .
— тег, который рисует горизонатльную линию. Этот тег относится к блочным элементам, линия всегда начинается с новой строки. Имеет 5 атрибутов:
- align — Определяет выравнивание линии. Может принимать значение left, center, right.
- color — Задаёт цвет линии.
- noshade — Рисует линию без трехмерных эффектов.
- size — Задаёт толщину линии.
- width — Задаёт ширину линии.
Код с использованием тега
:
А это мой первый сайт.
Визуальный пример находится .
Ещё один «одиночный» тег — это . Данный тег спользуются для хранения информации предназначенной для браузеров и поисковых систем. Поисковые системы обращаются к метатегам для получения описания сайта, ключевых слов и других данных. Разрешено использовать неограниченное число метатегов, все они должны находится между и . Параметры любого метатега имеют вид «имя=значение», который определяется ключевыми словами content , name или http-equiv . Т.к. метатеги предназначены для машин, никакого визуального изменения они не вносят, поэтому я приведу лишь исходный код:
Эта строка говорит о том, что создатель страницы считает, что на странице используется кодировка UTF-8. В HTML5 всё стало проще, для того, чтобы указать кодировку, достаточно лишь следующей строки:
Cуществуют и другие одиночные теги (,
,