Почему стоит заняться веб-разработкой и с чего начать. С чего начать html

С чего начать изучение 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, h2-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. Они могут начать учиться прямо сейчас, находя, при помощи поисковых систем, необходимую информацию и экспериментируя дома. Ведь для начала тренировок нужно очень мало - браузер, текстовый редактор и неплохой справочник.

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

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

Твитнуть

Понравилась статья? Поставь плюс один!

dayte2.com

HTML первые шаги - простая инструкция для начала изучения

Приветствую вас, дорогие читатели! Сегодня мы поговорим о «языке гипертекстовой разметки». Почему его должен знать каждый дизайнер, и как сделать в html первые шаги. Если дизайнер не знает иностранных языков, это не самое страшное. Самое страшное, когда он не владеет даже базовыми знаниями html. В таком случае он рискует навсегда остаться «иностранцем» в веб-индустрии.

Язык важен

Вы разговариваете? Представьте себе, ваш браузер тоже!

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

Качественный ресурс – это прежде всего, грамотный код. А чтобы разбираться в нём, необходимо его изучить. Существует много толковых учебников, которые помогут новичку разобраться в html, книги научат читать чужой код и писать свой с нуля.

Все мы знаем, что учиться чему-то новому проще сразу на практике. Специально для новичков был разработан бесплатный онлайн‑курс «Базовый HTML и CSS». Источник поможет понять основы вёрстки, ее законы, особенности и свойства кода.

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

Кстати о проблемах. У новичков часто возникают ошибки в написании кода. Тут важно помнить, что учитывается всё: пробелы, точки и запятые. Лишний знак или отсутствие оного приведут к некорректному отображению информации. А потому следить за этим нужно очень внимательно.

Главное — практика

Самое приятное, что для создания сайта, вам не потребуется сложное программное обеспечение. Можно просто обойтись блокнотом. Открываем блокнот и пишем в нём:

<html> <head> <title>Моя первая страничка</title> </head> <body> Hello World! <br> Меня зовут (имя), это моя первая страничка! </body> </html>

Затем, сохраните всё написанное как html документ, важно, чтобы расширение было html. Как это сделать? В документе нажимаете «файл», затем «сохранить как», в поле «имя файла» задаём: index.html. После всех этих операций остаётся сделать самое интересное! Правой клавишей жмём по нашему документу, открываем любым браузером.

Вуаля! Вы написали страничку, и это только начало!

Как вы видите, код отвечает за содержимое страницы. Другими словами – за вёрстку. Как правило, за дизайн ресурса отвечает один человек, за вёрстку – другой. Но золотой серединой является то, когда один человек умеет верстать и отрисовывать картинку.

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

Как и где учиться

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

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

Алленова Наталья Вячеславовна написала толковую, подробную книгу по html (смотреть). Структура издания позволяет двигаться постепенно, осваивая более сложные алгоритмы, основанные на простых элементах. Теория и практика приятно сочетаются и дополняют друг друга.

Здесь вы найдете ответы на конкретные вопросы: как создавать формы? Как выстраивать таблицы? Как вставить картинку? Никаких абстрактных рассуждений на тему пойди туда, не знаю куда. Многие учебники в этом проигрывают, с ними вы либо теоретик, либо практик, у которого ничего не работает. Согласитесь, это не самые радужные перспективы.

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

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

До новых встреч!

start-luck.ru

Введение в HTML. С чего начать WEB-программирование

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

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

И так С чего же начинать?

Для начала нам нужно выбрать редактор в котором мы и будем создавать веб-страницы. Можно выбрать любой понравившийся вам редактор, например HTMLPad, Блокнот, Bred, Notepad++, PHPDesigner , который позволит нам работать с HTML-кoдoм напрямую.

Начав изучать HTML я выбрал редактор Notepad++ он простой в использовании и имеет удобную подсветку кода. Однако со временем я перешел на PHPDesigner.v7.2.5, который заменил стандартный блокнот Notepad++. PHPDesigner обладает множеством разных настроек - панели инструментов, неограниченное число отмены действий, есть подсветка HTML тегов и кода других языков WEB-программирования. PHPDesigner разработан именно для веб-разработки, и, еще, у него есть возможность создавать Интернет-проекты на PHP, CSS, JS и HTML.

И так начнем! Вы уже запустили свой редактор, в нем и создадим каркас нашей первой HTML- страницы. Берем код, который показан ниже и вставляем его в редактор.

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Первая HTML страница</title> </head> <body> </body> </html>

Чтобы не запутаться создадим отдельную папку для работы HTML и в эту папку сохраним наш файл который назовем index.html . Файл главной страницы всегда носит имя index и расширение html. Расширение может также меняться, например на PHP, если в нем присутствует PHP код, но об этом немного позже. А пока разберем код, который мы сохранили в наш файл.

Первая строка показывает браузеру тип создаваемого документа !DOCTYPE, далее указывается, что документ создан на языке HTML 4.01 с версией 4.01 и под версией Transitional - это переходная подверсия которая позволяет использовать как все устаревшие теги, так и новые теги версии 4.01.

Существует несколько типов документа !DOCTYPE и отличаются они версиями языка. Углубляться, мы тут не будет, а только скажу, что в последнее время используется версия HTML5 и для нее используется совсем простой вид, который показан ниже.

HTML

<!DOCTYPE HTML>

Дальше идет наш каркас, который состоит из Тегов.

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

И первый тег это <html>, обратите внимание что для него в самом низу есть, соответствующий ему, закрывающейся тег </html> (добавляется обратный слеш в начале).

Отсюда, мы должны знать, что есть парные теги – это открывающий соответствующий ему закрывающий тег и есть одинарные теги например тег <img> используемый для вывода изображения.

Тег <html> - это тег, в котором содержатся все остальные теги языка. И следующей тег, который идет это <head>, что в переводе c английского обозначает голова. Данный тег является парным тегом и должен обязательно иметь закрывающий тег </head>. В теге head указываются специальные теги (метатеги), указывающие на кодировку, в которой создана страница, заголовок страницы, а так же все подключаемые файлы со скриптами и стилями.

У нас в шаблоне выше указаны два специальных тега: первый тег - <meta>, который содержит атрибут charset=utf-8", определяющиий кодировку страницы. utf-8 - это универсальная кодировка которая будет правильно отображаться во всех браузерах. !!! Имейте ввиду что, выбрав кодировку utf-8, вы должны задать эту же кодировку файлу, в котором вы работаете. Второй тег - это <title> </title>, с помощью него указывается заголовок нашей страницы.

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

На этом со вступлением мы завершим, а дальше мы будем работать в основном с видимой частью страницы с тегами, которые будут находится внутри каркаса <body>.

webteoretik.ru

С чего начать изучение html?

Что такое html и зачем он нужен

Какие тэги нужно знать?

Основные: html, head, title, body;
Структурные: div, span;
Текстовые: p, ul, ol, li, h2-h6, br, pre;
Таблицы: table, tr, td;
Ссылки: a;
Мультимедиа: img, object;
Фреймы: frameset, frame, iframe;
Формы: form, input, textarea, label, select, option;
Факультативные: hr;
Специальные: script, link, meta;

Как сделать красиво?

С чего лучше начать изучение верстки?

Изучение принципов работы web и структуры клиент-сервер
Изучение тэгов и их атрибутов, с практическими занятиями по их применению
Изучение правил CSS с практическими занятиями по их применению
Изучение табличной верстки
Верстка простого макета таблицами
Верстка сложного макета таблицами
Изучение директив DOCTYPE
Изучение блочной верстки (тэг div)
Верстка простого макета дивами
Верстка сложного макета дивами
Хитрости, приемы, хаки и прочие премудрости от гуру

Итог

Твитнуть

Понравилась статья? Поставь плюс один!

chartest.psy-effect.ru

С чего начать создание сайта. Познание азов HTML. | Web-Creature

Привет всем желающим начать изучение такого дела, как создание сайта или блога.

И тут встает вопрос: “С чего же мне начинать?”

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

Так как Вы нe имeeтe ни мaлeйшeгo пpeдcтaвлeния o сайтостроении и HTML, тo для начала вaм подойдут такие peдaктopы: Word или Notepad++.

Что дальше? Давайте сделаем следующее...Откройте редактор (Word, Notepad++ или какой-то другой) и скопируйте в него такое:

P.S.: Все, что выделено красным цветом Вы исправляете, а комментарии, которые выделенные черным ( и все, что находится между этими скобками), — удаляете (по Вашему желанию, т.к. браузер игнорирует комменты).

<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1251"><title>Ваш заголовок</title></head><body><font face="Verdana,Sans-serif" size="2" color="#000000"><b>Название Вашего раздела</b><p>Здесь Ваш текст.<p><center><img border=0 src=«Имя графического файла с расширением» Width=«Его размер по горизонтали» Height=«Его размер по вертикали» alt=«Здесь Вы указываете выпадающую подсказку»></center></font></body></html>

Сохраните документ с расширением html (например, 001.html или index.html) и запустите: Вы только что создали свою первую internet-страницу. Мои поздравления!

Но мы написали всего лишь простейший код. Копнем глубже...

Каждый HTML-документ, который отвечает спецификации HTML, должен начинаться строкой декларации версии HTML !DOCTYPE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

Именно эта строка поможет браузеру определить, как правильно интерпретировать созданный Вами документ. В нашем случае мы говорим браузеру, что HTML соответствует международной спецификации в версии 3.2 (это очень старая версия). Из примера наглядно видно, самый короткий html-документ состоит буквально из одной строки, которая в любом случае должна находиться поверх всего остального кода.

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 3.2 Final//EN»>

Давайте немного разберемся во всем этом. С помощью HTML мы создаем разметку интернет-страницы, то есть размещаем на ней разные элементы (заголовки, текст, изображения и разные файлы). Здесь можна провести аналогии со строительстом: сначала делают фундамент, потом сруб, крышу, столярку, инженерные сеты – в правильном порядке расставляют конструктивные элементы. Так же и с нашим HTML.

Теперь немного о тегах — знаках, которые располагаются в скобках.

Тег — это оформленная единица HTML-кода. Для примера, <HEAD>, <FONT ...>, <BODY>, <HTML> и так далее. Теги бывают как начальными (те, что открываются) и конечными (те, что закрываются), которые начинаются со знака «/»). Пример закрывающихся тегов: </HEAD>, </FONT>, </BODY>, </HTML>.

Элемент — это понятие, которое было введено для удобства. Пример: элемент HEAD составляют два тега — открывающийся <HEAD> и закрывающийся </HEAD>. Поэтому, элемент — понятие более емкое, которое обозначает пару тегов, а также часть документа (страницы) между этими тегами, на которую они влияют.

Большинство тегов парные: имеют открывающуюся часть <> и закрывающуюся </>. Между ними и находятся коды, которые распознает и интерпретирует браузер. Любой HTML-документ всегда начинаться с отрывающегося тега <HTML> и заканчивается закрывающим </HTML>. Дальше следует заголовок <HEAD></HEAD>. Внутри этих тегов (между ними) всегда должна находиться информация о кодировки страницы, в нашем случае <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> (хотя, наиболее оптимальной на сегодняшнее время является кодировка charset=utf-8), а также теги, которые определяют название нашей страницы: <TITLE></TITLE>. Только сейчас между тегами, определяющими содержимое документа <BODY></BODY> можно размещать контент – свои статьи, графические файлы, видео- и аудиофайлы. Одним словом, различного рода информацию.

Вывод. Теги <HTML> и </HTML> - это фундамент нашего сайта. Теги <HEAD></HEAD> - это крыша нашего сайта.

Все что находится между тегами <BODY></BODY> — это сруб нашего сайта, а сруб строится из кирпичиков. Так такими кирпичиками и является наш контент (различного рода информация), который отображен в виде тегов, размещаемых в ”теле” нашей интернет-страницы (между тегами <BODY></BODY>).

Популярность: 52%

Еще по этой теме...

Рейтинг:

Загрузка ...

web-creature.net

С чего начать создание сайта? HTML |

Вы решили создать сайт?

Итак, с чего начать создание сайта?

С чего начать создание сайта? HTML Каждый из нас понимает, что лучшее средство рассказать о том, что вам интересно в жизни, над чем вы работаете, что можете предложить другим, — это реклама. И on-line реклама на сегодняшний день является самой доступной и действенной потому, что может охватить большее количество людей, которым будут так же интересны ваши знания и ваши предложения.

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

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

Что такое HTML

Всемирная паутина соткана из web-страниц (Web-pages), а эти страницы создаются при помощи языка разметки гипертекста (HyperТext Markup Language, HTML). Хотя многие, особенно новички, говорят сегодня о «Программировании (именно с большой буквы) на HTML», HTML вовсе не является языком программирования. HTML – это язык разметки. Вы используете HTML для разметки текстового документа, точно так же, как это делает редактор при помощи жирного красного карандаша. Эти пометки служат для определения формата (или стиля), который будет использован при выводе текста на экран монитора.

Структура HTML-документа

M в аббревиатуре HTML означает «mark up» – размечать.

Текст размечается тегами, которые являют собой ключевые слова языка, заключенные в угловые скобки «<» и «>».

Чаще их употребляют парами, чтобы отметить начало и конец некоторого куска текста.

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

Закрывающий тег отличается от открывающего наличием косой черты «/».

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

Естественно, нельзя обойтись без комментариев. Они служат для удобства разработчика, для пояснений. Комментарии не обрабатываются браузером и не отображаются, но они загружаются вместе со всем документом и влияют на время загрузки. Поэтому, добавляя комментарии, надо придерживаться «золотой середины».

Комментарии заключаются между фрагментами <!— и —> и могут занимать несколько строк.

Общий вид HTML-документа:

<!DOCTYPE html> <html> <head> Заголовок HTML-документа (не отображается на экране) </head> <body> Тело HTML-документа (отображается на экране)  </body> </html>

<!DOCTYPE html>;

HTML_doctype Первый тег <!DOCTYPE html>; – это идентификатор применяемого стандарта HTML. В приведенном примере задано соответствие последнему стандарту HTML5.

Описание и использование

Указание doctype должно быть в самом верху любого HTML документа, перед тегом <html>.

doctype — это не HTML тег. Это инструкция браузеру про версию языка разметки страницы.

Возможные doctype:

HTML 5

пример:

<!DOCTYPE html">

HTML 4.01 Strict — включает все HTML элементы и атрибуты, кроме устаревших презентационных. Фреймсеты также не разрешены.

пример:

<!DOCTYPE HTML"-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional — включает все HTML элементы и атрибуты, вместе с устаревшими презентационными. Фреймсеты не разрешены.

пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset — тоже что и HTML 4.01 Transitional, но разрешает фреймсеты.

пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 Strict — включает все HTML элементы и атрибуты, кроме устаревших презентационных. Фреймсеты также не разрешены. Разметка должна быть правильно XML оформлена.

пример:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">html

XHTML 1.0 Transitional — включает все HTML элементы и атрибуты, вместе с устаревшими презентационными. Фреймсеты не разрешены. Разметка должна быть правильно XML оформлена.

пример:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset — тоже что и XHTML 1.0 Transitional, но разрешает фреймсеты. Разметка должна быть правильно XML оформлена.

пример:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1 — тоже что и XHTML 1.0 Strict , но разрешает добавление модулей.

пример:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Теперь ясно, какой !DOCTYPE оказывается максимально подходящим:

Строгий синтаксис формата HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Информация в заголовке <head>

Контейнер <head> содержит информацию для браузеров и поисковых систем.

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

Содержимое тега <head> не отображается напрямую на веб-странице, за исключением тега <title> устанавливающего заголовок окна веб-страницы.

Внутри контейнера <head> допускается размещать следующие элементы: <base>,<basefont>, <bgsound>, <link>, <meta>, <script>, <style>, <title>.

Синтаксис

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> </head> <body> </body> </html>

Содержание контейнера <body>

Между парой тегов <body>…</body> хранится всё содержание web-страницы, которое отображается на экране монитора в окне браузера. Информацию, которую следует выводить в документе, следует располагать именно внутри контейнера <body>. К такой информации относится текст, изображения, теги, скрипты JavaScript и т.д.

Тег <body> также применяется для определения цветов ссылок и текста на веб-странице. Подобная практика в HTML 4 осуждается и взамен для указания цветовой схемы рекомендуется использовать стили, применяя их к селектору BODY. Тем не менее, большинство атрибутов до сих пор поддерживается разными браузерами.

Открывающий и закрывающий теги <body> на веб-странице не являются обязательными, однако хорошим стилем считается их использование, чтобы определить начало и конец HTML-документа.

Синтаксис

Все открывающиеся теги, за небольшим исключение, должны быть обязательно закрыты!!!

Продолжение в следующих уроках.

kinsite.ru

Почему стоит заняться веб-разработкой и с чего начать / Песочница / Хабр

Всем привет!

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

Почему стоит заняться веб-разработкой?

Для меня это чистое творчество. Представьте себе абсолютно чистый холст, как у художника. У вас есть все краски, кисточки, осталось лишь научиться рисовать. Обычно это сложнее, чем кажется, но не для веб-мастера. Сейчас в просторах интернета масса всевозможных инструкций, онлайн-курсов, примеров с наглядными иллюстрациями. И в принципе, создать что-то новое при помощи этих мануалов не так уж сложно. Веб-разработка открывает широкие, почти безграничные возможности для творчества. Конечно, языки программирования, не заточенные под веб, тоже позволяют реализовать много интересного, но, как мне кажется, в среде веб-разработки сделать это гораздо проще.

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

С чего начать?

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

HTML-тег это элемент веб-страницы, который обычно имеет следующий формат:

<div>Содержимое тега</div> После того, как вы переварите теги, время приступить к изучению атрибутов для каждого тега. Атрибут — это свойство тега. Атрибутов много, и они все разные, то есть отвечают за разные функции тега. Есть универсальные атрибуты, которые подходят для всех тегов, но и зачастую встречаются атрибуты, которые уникальны для тега. Это уже немного сложнее, но это можно легко запомнить, если каждый тег закреплять практикой.

Атрибут пишется внутри тега:

<div align=”center”>Содержимое тега</div> В данном случае выбран атрибут align, который определяет выравнивание содержимого внутри тега. Атрибут обычно имеет несколько значение. Center означает что содержимое будет выравнено по центру.

Вот очень полезные ссылки, которые помогут вам быстро начать:htmlbook.ru/htmlhtml.manual.ruwww.codecademy.com/tracks/web

После этого следует приступать к изучению CSS-стилей. Что это такое? Простыми словами, это стили к HTML-тегам, которые располагаются на веб-странице. Стилей гораздо больше, чем HTML-тегов. Но это и хорошо, так как вы можете создавать абсолютно разные варианты с одним и тем же тегом. Стили нужно знать, и чем больше, тем лучше. Для себя можно провести следующую параллель: стили – дизайн тегов.

Обычно стили пишутся либо прямо в HTML документе, при помощи специального тега style:

Ниже ссылки, в которых вы сможете найти более подробное описание каждого стиля:htmlbook.ru/csscss.manual.ruwww.codecademy.com/tracks/web

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

Хочу добавить ещё несколько полезных советов: — Всегда уделяйте особое внимание путям (URL) к файлам или к картинкам. Зачастую именно тут спотыкаются не только новички, но опытные веб-мастера. — Постарайтесь запомнить 20-30 кодов для цвета. Например, #000000 – чёрный, #FFFFFF – белый и так далее. Вот полезные ссылки: www.puzzleweb.ru/html/colors_html.php, www.artlebedev.ru/tools/colors. — Начните работать с HTML, CSS в среде Notepad++. Очень простой, понятный редактор с подсветкой синтаксиса. — Советую хорошо ознакомиться с DOM — Постарайтесь подтянуть английский язык.

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

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

habr.com