Html первые шаги

HTML5 первые шаги

Хотите уже сейчас перевести свой сайт на HTML5? Нет ничего проще! Открываете страницу в коде и меняете тип документа (DOCTYPE) на вот такую изячную конструкцию:

<!DOCTYPE html>

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

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

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

И, не отходя от кассы, сразу же заменим длинное объявление кодировки сайта на вот такую:

<meta charset=utf-8>

Красиво, черт! Однако пытливый глаз тру-верстальщика сразу же отметит вопиющее нарушение: «Где, черт побери, кавычки?!»

Так вот, уважаемые, HTML5 настолько суров лоялен, что в плане синтаксиса возможна ограниченная анархия. Можно кавычки ставить, а можно и нет, можно слово meta написать хоть строчными, хоть прописными буквами, хоть даже так MeTa. Главное — чтобы вы сами потом не запутались.

Более того, HTML5 допускает даже такие невинные шалости, как полное отсутствие привычных и незыблемых столпов <html>, <head> и <body>.

Не верите? Наберите в текстовике следующий код, сохраните страницу и проверьте ее валидатором:

<!DOCTYPE html>
<meta charset=utf-8>
<title>Аз есмь труЪ-сайт</title>
<p>Проще некуда</p>

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

К примеру, если в Опере использовать отладочную тулзу Opera Dragonfly, то можно обнаружить, что браузер сам подставляет недостающие теги (при просмотре кода через Ctrl+U этого не увидеть).

Идем дальше. Следующее приятное новшество — это, опять же, упрощенное определение языка страницы:

<html lang=ru>

Раньше конструкция выглядела чаще всего так:

<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">

Упрощению также подверглись т.н. ссылочные отношения (link relations) или rel. Теперь нет необходимости прописывать для них тип (type=" "):

<link rel="stylesheet" href="style.css" />

вместо:

<link rel="stylesheet" href="style.css" type="text/css" />

поскольку для stylesheet и не бывает других типов кроме type="text/css".

Хотя это доступно не для всех rel. К примеру, с rel="alternate" так поступать нельзя, ибо он по-определению не однозначен.

И, наконец, раз уж HTML5 совсем не строг, то можно избавиться и от слэша с пробелом перед закрывающей угловой скобкой:

<link rel="stylesheet" href="style.css">

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

На сегодня все. В следующий раз рассмотрим по-настоящему новые тэги в HTML5 и поговорим подробнее о семантике.

HTML5 Введение
HTML5 первые шаги
HTML5 новые тэги header, footer, nav, aside, section, article, hgroup, main
HTML5 новые тэги time, figure, video, audio, canvas

www.websovet.com

HTML – первые шаги в изучении языка

От автора: все когда-то начинается. Вот и вы решили наконец освоить науку сайтостроения. Начинать в ней нужно с языка html. Первые шаги в нем очень важно делать уверенно, иначе можно споткнуться и не продолжить изучение. Как вам максимально просто и эффективно освоить язык, я рассказу сегодня.

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

Как начинал я и что из этого вам нужно понять

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

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

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

Итак, как я учил этот язык? Я воспользовался услугами Яндексов и Гуглов, куда забил соответствующую информацию (что-то вроде изучения html). Попался мне сразу на глаза 1 сайт, где было 15 уроков по html в порядке усложнения. Купил я, значится, тетрадку на 48 листов, собрался с духом и начал изучение, записывая практически каждую буковку в тетрадь и по 300 раз в день используя только что изученные теги.

Дело это было невероятно интересное. Собственно, такой способ изучения имеет одну проблему:

Таким образом, буквально за 1 месяц я изучил язык. Не полностью, конечно. Я вам скажу, что его и не нужно изучать от и до. Например, спросите у меня сейчас, что означает тег dfn или bdi? Я полезу в справочник глянуть. Но это никак не помешает мне легко создавать сайты на html, потому что 70-80% тегов и атрибутов в нем используются крайне редко и практически не нужны в стандартных ситуациях.

Самый быстрый способ изучения html до высокого уровня – пошаговый план

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

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

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

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

Следующий шаг – это полноценная практика. А именно, вы сверстаете сайт. Очень простой, потому что для первого раза именно такой и нужен. Самое главное на этом этапе – научиться применять полученные знания. Ведь без применения знания не имеют никакой ценности. Вы ведь хотите изучить html не для того, чтобы хвастаться перед друзьями? Надеюсь, не для этого. Цель – научиться использовать html как базовый язык при создании сайтов.

Следующий и последний шаг – это изучение самой актуальной информации по новым тегам и возможностям, которые принес html5, изучение новых возможностей css3. Ну а в самом курсе вы наконец-то совершите мощный прорыв в сайтостроении: сверстаете три сайта, каждый сложнее предыдущего. Ах да, даже 4, потому что там еще пару уроков идут вам бонусом.

Последним сайтом, который вы сверстаете, будет интернет-магазин. Чувствуете мощь такого обучения? Сейчас вы полный 0 (даже может не знаете, что такое тег), а уже через 1 месяц у вас будет шаблон профессионального интернет-магазина. Я даже не знаю, какой пример привести. Это все равно, что вы катались на четырехколесном велосипеде, а потом сразу пересели в BMW.

Итог

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

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

Html первые шаги

webformyself.com

Каскадные таблицы стилей есть один из способов оформления HTML документа. Ни более, и не менее. Тем не менее, философия этого способа радикально отличается от типично разметочного «сюда мы сунем <b>, а сюда, пожалуй, <font face=arial>». Недостатки такого подхода видны сразу — при попытке сменить оформление сайта придется менять все страницы и все элементы, один за другим.

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

Более того, сейчас можно с уверенностью сказать, что CSS предоставляет гораздо более широкие возможности для форматирования, нежели собственно стандарт HTML. К тому же ситуация с разными браузерами, по-разному понимающими различные атрибуты CSS, понемногу меняется. К примеру, браузеры IE и Opera, которыми, как ни крути, пользуется подавляющее большинство серферов, отображают простые таблицы CSS практически одинаково. Ну там, где они отображают неодинаково, должны помочь будущие статьи.

На сегодняшний день официально принятой стандартами W3C версией CSS является 2, а в разработке находится 3 версия. Повторюсь, что не все свойства CSS2 поддерживаются браузерами. Тем не менее, некоторые свойства CSS2 являются краеугольным камнем важных аспектов DHTML программирования — всяких там менюшек всплывающих, бегающих картинок и прочего мельтешения на экране.

Для начала мы рассмотрим простейший синтаксис CSS и методы подключения таблиц.

Синтаксис CSS

Сама таблица — обычный текстовой файл, обычно сохраняемый с расширением «.css«. Формат таблиц практически свободный, что и будет показано далее. Файл состоит из определений, или правил (rules). В общем виде правило выглядит так — сначала идет selector, я буду называть его определителем, который обозначает, к каким именно элементам HTML нужно применять оформление, затем идет открывающая фигурная скобка, в ней через точку с запятой перечисляются атрибуты оформления CSS, затем фигурная скобка закрывается.

  selector {attribute-name:attribute-definition [;attribute-name:attribute-definition[...]]}  

Любое количество пробельных (символов табуляции, пробела и переноса строки) может быть вставлено между селектором, скобкой, атрибутами. Не допускается никаких непробельных символов после закрытой скобки. Например, в следующем примере символ «;» после скобки лишний:

  selector {attributes};  

Примером правильного кода может быть следующий:

  selector1 {attribute1;  	attribute2}  selector2 {attribute1;attribute2;attribute3}  

Оформление определителя для всех элементов одного типа

Первый (простейший) способ указания определителя — задать оформление для всего базового класса элементов, например элеменов параграфа <p> и <cite>

  p {text-align: right }  cite {font-family: monospace }  

В данном случае все параграфы документа, не имеюшие уточняющих классовых или идентификаторных атрибутов, будут иметь выравнивание по правому краю, а аналогичные элементы cite — форматирование моноширинным шрифтом. Обратите внимание, что конкретный шрифт не задан, поскольку на машине пользователя, если он использует один из вариантов Unix, может и не быть, скажем, шрифта Courier (хотя надо сказать его клоны имеются практически на всех Линуксовых дистрибутивах). Тем не менее, текст отобразится корректно — установленным по умолчанию в браузере моноширинным шрифтом.

… одного класса

Другим способом, также очень популярным, является субклассирование элементов. То есть, у Вас есть параграфы заголовка, параграфы цитат, параграфы копирайта. Для каждого из них можно создать свой класс:

  p.head {text-align: center }  p.cit {text-align: left; text-indent: 5em }  p.copy {font-size:xx-small; color: blue }  .sans {color:red}  

После точки пишется название класса. Если имя основного тэга не указано (то есть перед точкой ничего нет), то оформление будет применяться для всех типов элементов, имеющих class=classname. Выглядит это так:

  <p class=head>Параграф заголовка  <p class=cit>Параграф цитат  <p class=copy>Параграф копирайта  <a class=sans>Ссылка класса sans</a>.  

Следующим способом является задание оформления для именованных (определенный идентификаторами) элементов документа. Выглядит это так:

…идентификатора

  #menu {position:absolute; top:0; left:0; width:100; height:40}  

А применяется так:

  <div id=menu>Это кусочек будущего меню</div>  

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

Оформление контекстного определителя

Предположим, Вы хотели бы, чтоб все ссылки отображались обычным шрифтом голубого цвета, но ссылки внутри таблицы должны быть мельче, и не должны подчеркиваться. Можно, конечно, определить для этого отдельный класс, но есть более изящное решение — указать, в каком именно контексте (то есть, внутри какого элемента) для данного тэга применять оформление. Т.е.:

  a {color: blue; text-decoration: underline }  td a {font-size:xx-small; text-decoration: none}  td.menu a {color:red;}  td cite a {color:green; text-decoration:overline}  

Как видите, число вложений неограничено. Однако я не советовал слишком уж увлекаться. Одного контекста обычно бывает вполне достаточно (максимум двух). Таким образом, для этой таблицы стилей мы имеем:

Обычная ссылка

Ссылка внутри таблицы
Ссылка внутри таблицы и внутри тэга cite

Ну и напоследок…

Группировка определителей

При необходимости, можно указать общее оформление для целого набора определителей. Ясно будет из примера:

  a, h2, h3, td, td.menu {text-decoration: none; font-face: Arial; font-size:x-small}  

Элементы a, h2, h3, td, td.menu не будут подчеркиваться, выводится будут шрифтом Arial, а размер у них будет (догадались? 🙂 x-small.

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

www.firststeps.ru

первые шаги Учебник по Html для чайников :http://www.postroika.ru/html/1step22.html
Главная / Html / Учебник по Html. Ступенька 1-ая.

Учебник по Html для чайников. Инструментарий.

Ступенька 1-ая.

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

D:первые шаги

У себя на компьютере я создала такую папку на диске D, и назвала ее Первые Шаги. Вы, естественно, можете создать вашу папку, где угодно, и назвать ее, как угодно.
Теперь откроем блокнот – notepad (start – programs – accessories – notepad или пуск – программы – стандартные – блокнот) и скопируем туда следующий текст:
Html первые шаги

<html>

<head>

<title>Мой первый шаг </title>

</head>

<body>

Здравствуйте, это моя первая страница.

<br>

Добро пожаловать! 🙂

</body>

</html> (посмотреть)


Сохраним этот документ, присвоив ему имя *.html

D:первые шагиindex.html

Многие читатели спотыкаются на фразе: «А теперь сохраним этот документ, присвоив ему имя *.html«, они пишут письма, о том, что у них получается сохранить, только как текстовой документ *.txt, а вот как *.html — никак. Чтобы в дальнейшем избежать этого глупого недоразумения, я и пишу это примечание.

Если вы сохраняете документ, через Файл -> Сохранить (File -> Save), то, естественно, что он сохраняется как *.txt. Надо сохранять ваш документ следующим образом:

— Файл -> Сохранить Как (File -> Save as)

— Дальше вводите имя своего документа, например: index.html (а не просто index; приписочка *.html должна быть обязательно).

— Если вы уже сохранили ваш документ, как *.html, то при внесении изменений в этот документ вы можете уже сохранять их через Файл -> Сохранить (File -> Save).

Вот и все. Надеюсь, теперь у всех все будет в порядке.

Теперь откроем броузер, допустим, Internet Explorer (не закрывайте блокнот, он нам еще пригодится), и откроем в броузере наш документ.

Файл — Открыть — кнопка Обзор — Наш документ (index.html)

File – Open – Browse – index.html

Если мы чего-то изменим в нашем *.html документе (в блокноте), то, чтобы посмотреть, как это выглядит в нашем броузере, надо не забывать нажимать в броузере кнопку ОБНОВИТЬ. Если изменений не видно, то это значит, что вы где-то что-то неправильно написали, или забыли сохранить документ.

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

Обсудить этот материал на форуме

www.liveinternet.ru

Учебник по Html для чайников. Простейшие.

Ступенька 13-ая.

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

Наша страничка может состоять из нескольких документов. Один из них главный (index.html) — он открывается первым и должен обязательно лежать на вашем сайте в интернете. Остальные документы вы можете называть как угодно (photos.html, about_me.html, my_pets.html, friends.html, gh516hgd.html). Они все могут лежать в одной директории (папке), а могут в разных.

При помощи ссылок мы связываем эти документы. Так с главной страницы по ссылкам мы можем перейти на страницу с фотографиями, с этой страницы мы можем перейти обратно на главную страницу, или, допустим, на страницу с нашими стихотворениями, и т.д.

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

Для начала создадим новый документ (в нашем примере prf.html) в той же директории (папке), где находится наш главный документ index.html. Содержание документа выдумайте сами, у вас для этого уже достаточно знаний.

Пусть prf.html — документ с вашими фотографиями. Тогда мы можем без зазрения совести фразу «посмотреть мои фотографии» сделать ссылкой на prf.html:

<a href="prf.html">посмотреть мои фотографии</a>

Тэг <a></a> делает ссылкой заключенную в него картинку или фразу (текст). Принципы прописывания пути мы уже знаем:

(1) - <a href="prf.html">мои фотографии</a>
(2) - <a href="photos/prf.html">мои фотографии</a>
(3) - <a href="http://www.homepage.ru/prf.html">мои фотографии</a>

В случае (1) документ лежит в той же директории (папке), что и документ, в котором мы ссылаемся на prf.html, в случае (2) документ лежит в поддиректории /photos, в случае (3) мы ссылаемся на сайт http://www.homepage.ru, где лежит нужный нам документ.

Первые два примера (1) и (2) – называют относительными путями. (3) – абсолютный, т.е. указанный полностью, включая имя сайта (в нашем случае — http://www.homepage.ru/). Абсолютный путь мы используем, когда ссылаемся на чужие странички, относительный мы используем, когда ссылаемся на документы внутри нашего сайта.

Для всех ссылок в нашем документе мы можем прописать цвета: link — цвет просто ссылки, alink — цвет активной ссылки (нажатой), vlink — цвет уже посещенной ссылки.

<body text="#336699" bgcolor="#000000" link="#339999" alink="#339999" vlink="#339999">

Как и цвет для всего текста в документе, цвета ссылок мы прописываем в <body>. В нашем примере цвета для просто ссылки, активной и посещенной — одинаковые, но они могут быть разными – это на ваше усмотрение.

Итак, пропишем цвета для ссылки и саму ссылку в нашем документе:

vplaksina.narod.ru

HTML теги (синтаксис)

Они бывают двух видов:

Как определить, когда тег должен быть первого вида а когда второго? Да никак — просто запомнить. К счастью запоминать много не придётся.

Атрибуты тегов

Одним словом это параметры, типа х="2" или адрес_ссылки="http://google.com".

Структура страницы

Между тегами <head> и </head> находится необходимая информация о странице, а также подключаются CSS-стили и в некоторых случаях скрипты.

Между <body> и </body> уже само содержание страницы.

Содержимое тега

Как ни странно, иногда этих четырёх строчек бывает достаточно. Сейчас расскажу, что они означают.

Кстати, на нубо-сайтах я встречал целые помойки в <head>, бывало даже так, что некоторые строчки повторялись по три раза 🙂

Это кодировка страницы. Чаще всего используется именно UTF-8, даже на зарубежных сайтах. Поэтому рекомендую не париться и тупо копировать её отсюда.

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

Описание страницы, должно отличается от заголовка. Для посетителей не имеет никакого значения, но важно для поисковиков, в частности для Google, он чаще всего составляет сниппет из этого описания, а это уже видят потенциальные посетители.

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

Подключение стилей. Там где href="" указываем путь к таблице стилей (я про файл .css)

Содержимое тега <body>

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

Ссылка:

Картинка:
Обратите внимание, что ширина и высота указываются здесь просто цифрами без "px".
Описание и размеры картинки важны только для поисковиков.

Форматирование текста:
Google любит красиво отформатированные тексты.

В HTML ещё много всяких фишек по форматированию, но вместо них лучше использовать CSS.

Списки:
При помощи стилей с ними можно вытворять что угодно. Иногда очень удобно использовать именно их.

Маркированный список:

Нумированный список:

Блочные элементы:

Функциональность блоков будет более подробно рассмотрена в статье про вёрстку.

А теперь нажмите Ctrl + U и взгляните на HTML-код этой страницы. Практически ничего нового, удачи 🙂

misha.blog

Язык важен

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

Html первые шаги

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

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

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

Html первые шаги

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

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

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

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

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

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

Html первые шаги

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

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

start-luck.ru

You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.