Работа с основными HTML тегами и атрибутами для новичков
Сейчас мы с вами займемся изучением основных тегов. Начнем с того, какие теги являются обязательными на странице, формируя ее структуру.
Блок . Структура простейшей страницы
Страница сайта — это обычный текстовый файл с расширением .html. Внутри этого файла и хранится текст HTML страницы вместе с тегами. Этот файл обязательно должен иметь следующие теги: тег <html>, который должен содержать в себе текст всего сайта (все, что написано вне этого тега, браузером будет проигнорировано), а внутри него должны быть еще два тега: тег <head> для служебного содержимого страницы и тег <body> — для основного текста, который и виден на экране браузера.
В служебное содержимое, которое располагается внутри тега <head>, входит много различных вещей, но пока нам нужны только две из них. Это тег <title>, задающий название страницы, которое будет видно во вкладке браузера, и тег <meta>, который задает кодировку страницы (она ставится в атрибуте
Кроме того, перед тегом <html> обычно пишется конструкция doctype, которая указывает версию языка HTML, на которой сделан сайт. Актуальная сейчас версия языка имеет номер пять и доктайп для нее должен выглядеть так — <!DOCTYPE html>.
Итак, давайте посмотрим на основную структуру страницы (чтобы запустить это пример в браузере — скопируйте его в текстовый файл с расширением .html и откройте в браузере, если у вас проблемы с этим — посмотрите видео под примером):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Это заголовок тайтл</title>
</head>
<body>
Это основное содержимое страницы.
</body>
</html>Как выглядит этот пример в браузере смотрите по данной ссылке.
Думаю, после того, как вы прочитали про основную структуру страницы, у вас по-прежнему остается некоторое недопонимание, как все это выглядит на практике. Поэтому я снял специальное видео, в котором покажу вам, как сделать вашу первую HTML страницу и запустить ее в браузере (в нем я также расскажу про title страницы, про кодировки, про оформление кода). Посмотрите его и только потом переходите к дальнейшему чтению:
Тут скоро будет видео как начать: как сохранить с расширением .html, структура страницы, кодировки.
Ну, а теперь, научившись создавать простейшие страницы, мы перейдем к изучению полезных тегов, которые следует использовать внутри тега <body>. Это будут теги для абзацев, заголовков, списков, ссылок и других полезных вещей. Итак, приступим.
Блок . Абзацы
Одним из основных элементов страницы являются абзацы. Их можно сравнить с абзацами в книге — каждый абзац начинается с новой строки и имеет так называемую красную строку (это когда первая строка текста абзаца немного отступает вправо). По умолчанию красной строки нет, но ее легко сделать (об этом чуть позже).
Абзац создается с помощью тега <p> таким образом:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Это заголовок тайтл</title>
</head>
<body>
<p>
Это абзац.
</p>
<p>
Это еще один абзац.
</p>
<p>
И еще один абзац.
</p>
</body>
</html>Так код будет выглядеть в браузере:
Это абзац.
Это еще один абзац.
И еще один абзац.
Блок . Заголовки h2, h3, h4, h5, h5, h6
Кроме абзацев важное значение на странице имеют заголовки. Их также можно сравнить с заголовками из книги — каждая глава имеет свой заголовок (название этой главы) и разбита на параграфы, которые тоже имеют свои заголовки. Ну, а основной текст страницы располагается в абзацах.
Заголовки создаются с помощью тегов <h2>, <h3>, <h4>, <h5>, <h5>, <h6>. Они имеют разную степень важности. В заголовке h2 следует располагать название всей HTML страницы, в h3 — название блоков страницы, в h4 — название подблоков и так далее.
Все заголовки по умолчанию жирные и имеют разный размер (это можно поменять через CSS, но об этом позже). Смотрите пример:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Это заголовок тайтл</title> </head> <body> <h2>Заголовок h2</h2> <h3>Заголовок h3</h3> <h4>Заголовок h4</h4> <h5>Заголовок h5</h5> <h5>Заголовок h5</h5> <h6>Заголовок h6</h6> <p>Это первый абзац.</p> <p>Это второй абзац.</p> <p>Это третий абзац.</p> </body> </html>
Так код будет выглядеть в браузере:
Заголовок h3
Заголовок h4
Заголовок h5
Заголовок h5
Заголовок h6
Это первый абзац.
Это второй абзац.
Это третий абзац.
Блок . Жирный
Вы уже знаете, что заголовки по умолчанию жирные. Однако, можно сделать жирным и обычный текст — достаточно взять его в тег <b>. Смотрите пример:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Это заголовок тайтл</title>
</head>
<body>
<p>
Это обычный текст, а это <b>жирный</b> текст.
</p>
</body>
</html>Так код будет выглядеть в браузере:
Это обычный текст, а это жирный текст.
Обратите внимание на то, что тег <b> следует использовать внутри какого-либо другого тега, например абзаца. В этом случае абзацы создают общую структуру страницы (абзацы и заголовки), а тег
b делает жирным отдельные кусочки текста.Блок . Курсив
Кроме жирного можно сделать также и курсив с помощью тега <i>:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Это заголовок тайтл</title>
</head>
<body>
<p>
Это обычный текст, а это <i>курсивный</i> текст.
</p>
</body>
</html>Так код будет выглядеть в браузере:
Это обычный текст, а это курсивный текст.
Блок . Списки
Наряду с абзацами и заголовками существует еще один важный элемент страницы — это списки. Такие элементы наверняка знакомы всем пользователям интернета. Они представляют собой перечисление чего-либо (список) по пунктам. Возле каждого пункта списка обычно стоит закрашенный кружок (он называется маркер списка).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Это заголовок тайтл</title>
</head>
<body>
<ul>
<li>Первый пункт списка.</li>
<li>Второй пункт списка.</li>
<li>Третий пункт списка.</li>
</ul>
</body>
</html>Так код будет выглядеть в браузере:
- Первый пункт списка.
- Второй пункт списка.
- Третий пункт списка.
Списки, созданные через тег ul, называются неупорядоченными списками. Такое название им дано потому, что существуют еще и
упорядоченные списки, у которых вместо маркеров-точек будут маркеры-цифры. Такие списки вместо тега ul имеют тег <ol>, а пункты таких списков также создаются через теги li.Давайте сделаем упорядоченный список, используя тег ol:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Это заголовок тайтл</title>
</head>
<body>
<ol>
<li>Первый пункт списка.</li>
<li>Второй пункт списка.</li>
<li>Третий пункт списка.</li>
</ol>
</body>
</html>Так код будет выглядеть в браузере:
- Первый пункт списка.
- Второй пункт списка.
- Третий пункт списка.
Удобство упорядоченных списков в том, что я могу вставить новый пункт списка в любое место — и нумерация сама перестроится (то есть мне не приходится за ней следить в случае каких-либо изменений, как было бы в том случае, если бы я расставлял ее вручную).
Блок . Ссылки
Ссылки являются теми элементами, которые делают из интернета интернет. Нажимая на ссылки, мы можем переходить с одной страницы сайта на другу. Если бы их не было — интернет был бы просто набором страниц, никак не связанных друг с другом.
Ссылка создается с помощью тега <a>, при этом у нее должен быть обязательный атрибут href, в котором хранится адрес той страницы, на которую ведет ссылка. Смотрите пример:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Это заголовок тайтл</title>
</head>
<body>
<a href="http://phphtml.net">Ссылка на сайт phphtml.net.</a>
</body>
</html>Так код будет выглядеть в браузере:
Ссылки бывают абсолютные и относительные, кроме того, они могут вести как на ваш сайт, так и на чужой. Эти сложные моменты лучше показывать, а не описывать текстом, поэтому я снял для вас следующее видео. Посмотрите его и только потом переходите к дальнейшему чтению:
Тут скоро будет видео про ссылки абсолютные и относительные
Блок . Картинки
Давайте теперь разберемся с тем, как разместить изображение на странице вашего сайта. Для этого предназначен тег <img>, имеющий обязательный атрибут src, в котором хранится путь к файлу картинки.
Как это работает, посмотрим на следующем примере:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Это заголовок тайтл</title>
</head>
<body>
<img src="smile.png">
</body>
</html>Так код будет выглядеть в браузере:
Обратите внимание на то, что тег <img> не требует закрывающего тега.
Блок . Ссылки в виде картинок
Ссылкой может быть не только текст, но и
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Это заголовок тайтл</title>
</head>
<body>
<a href="http://phphtml.net"><img src="smile.png"></a>
</body>
</html>Так код будет выглядеть в браузере:
Блок . Разрыв строки
Вспомните, что будет, если сделать, к примеру, два абзаца рядом — в этом случае текст, который лежит в каждом из них, будет начинаться с новой строки.
Давайте убедимся в этом на следующем примере:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Это заголовок тайтл</title>
</head>
<body>
<p>Это первый абзац.</p>
<p>Это второй абзац.</p>
</body>
</html>Так код будет выглядеть в браузере:
Это первый абзац.
Это второй абзац.
Бывают, однако, ситуации, когда мы хотели бы, чтобы у нас был один абзац, но некоторый текст в нем начинался с новой строки. Зачем такое может понадобится? К примеру, я хочу набрать стихотворение, но не хочу разбивать каждую его строку в отдельный абзац, так как это было бы не очень логично.
Чтобы сделать такое, в том месте, где должен быть разрыв строки, следует написать тег <br>. Учтите, что этот тег особенный и не имеет закрывающего.
Давайте посмотрим на его работу на следующем примере:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Это заголовок тайтл</title>
</head>
<body>
<p>Это первая строка текста, <br> а это вторая.</p>
</body>
</html>Так код будет выглядеть в браузере:
Это первая строка текста,
а это вторая.
Блок . Комментарии HTML
Практически во всех языках программирования есть такое понятие как «комментарии». Комментарии — это такой текст, который будет проигнорирован браузером — на экране он будет не виден, но останется в исходном коде страницы.
Для чего нужны комментарии? Во-первых, для того, чтобы оставлять в исходном коде пометки себе или тому человеку, который будет править ваш код после вас. Во-вторых, с помощью комментариев можно убирать некоторые вещи, которые вы бы сейчас хотели удалить, но потом, может быть, захотите вернуть. Их можно просто временно закомментировать, а потом откомментировать при необходимости.
Комментарии в HTML оформляются следующим образом: сначала уголок, знак ! и два дефиса — <!—, потом текст комментария, а потом два дефиса и уголок — —>. Смотрите пример:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Это заголовок тайтл</title>
</head>
<body>
<!--
Это комментарий HTML -
на странице сайта он не отображается.
-->
Это основное содержимое страницы.
</body>
</html>Что вам делать дальше:
Приступайте к решению задач по следующей ссылке: задачи к уроку.
Когда все решите — переходите к изучению новой темы.
code.mu
Учебники HTML и CSS для начинающих и не только
Если вы приняли решение выучить язык верстки, используемый при создании веб-страниц, может показаться, что времени и усилий придется потратить не меньше, чем при изучении иностранного языка. Но на самом деле все не так сложно, как кажется, и есть немало специализированной литературы для начинающих, которая способна значительно упростить этот процесс.
Самоучитель по HTML и CSS, как это уже понятно из названия, позволяет получить необходимые знания самостоятельно, без прохождения специальных курсов или других подобных занятий. Конечно, очень важную роль играет выработка практических навыков, поэтому полученные из книги знания непременно нужно тут же реализовать на практике.
Но какой же учебник выбрать? С чего начать – HTML или CSS? Какая литература лучше подойдет для “чайников”? Чтобы помочь вам найти ответы на эти и многие другие вопросы, я подготовил подборку, в которую вошли действительно полезные и проверенные книги, что помогут вам в деле изучения html-верстки и использования каскадных таблиц стилей.
Вы можете купить их в известных онлайн-магазинах (Озон, Лабиринт) или же попробовать поискать где-нибудь на сайтах в электронном формате для свободного скачивания.
Не воспринимайте список ниже как рейтинг, ведь каждый учебник HTML и CSS в этом списке, вне сомнения, принесет пользу как начинающему, так и более опытному вебмастеру.
Бен Хеник. HTML и CSS. Путь к совершенству
Книга во многом напоминает университетский учебник, преимущественно благодаря подробному стилю изложения, вниманию к деталям и рассмотрению самых простых элементов. При веб-разработке обойтись одним только HTML для создания страниц сайта уже давно нельзя. Поэтому автор рассматривает аспекты изучения и работы с языком разметки, а также каскадными таблицами стилей в их органическом сочетании.
Эрик Мейер. CSS. Каскадные таблицы стилей. Подробное руководство
Последнее издание книги (третье) было выпущено в 2008-м году, что мало сказалось на ее актуальности. Это полный справочник по CSS с множеством примеров, которые помогут в освоении полученных знаний на практике.
Муссиано Ч., Кеннеди Б. HTML & XHTML. Подробное руководство
Первое издание этой книги из серии «must have» вышло еще в далеком 2002-м году. С тех пор учебник выдержал три переиздания, последнее из которых вышло в печать в 2012-м. На более чем 700 страницах авторы рассматривают все составляющие языка HTML и особенности его применения при веб-разработке.
Дэвид Макфарланд. Большая книга CSS3
Самоучитель-энциклопедия из серии «Бестселлеры O’Reilly», выпущенная издательством «Питер». Настольная книга как для начинающих, так и для опытных разработчиков, на шести сотнях страниц которой можно найти не только исчерпывающую информацию о различных элементах каскадных таблиц стилей, но и множество практических приемов их применения для решения всевозможных задач.
Элизабет Фримен, Эрик Фримен. Изучаем HTML, XHTML и CSS
Интересная и навевающая положительный настрой обложка книги вполне соответствует ее содержанию. В непринужденной манере и понятном стиле авторы рассматривают информацию не только относительно изучения HTML, CSS и XHTML, но и уделяют внимание таким нюансам верстки, как кроссбраузерность, адаптивность и другие необходимые в мире современной веб-разработки умения.
Джон Дакетт. HTML и CSS. Разработка и дизайн веб-сайтов
Опытные вебмастера в этой книге не найдут ничего нового, а вот для новичка учебник будет в самый раз. Автор сделал упор на удобство восприятия и визуальную подачу информации, включив примеры кода, которые можно протестировать самостоятельно, благодаря CD-диску, который идет в комплекте. Отличный вариант для “чайника”, который начинает изучение с нуля.
В любом случае какой бы учебник по HTML вы не использовали при изучении языка разметки, книги являются лишь инструментом для ознакомления с теорией, а главным залогом успеха является именно практика. Поэтому с первых же дней пробуйте запускать рабочий проект и уже на нем применять полученные знания.
www.imagecms.net
web master | Учебники по CSS
Главная » Учебники по CSSЭти учебники для начинающих, основная задача которого — объяснить новичку язык программирования С++ — классы, их основные концепции, такие как полиморфизм, инкапсуляция, наследование. Особенностей ANSI-C++, в том числе такие понятия, как: массивы, структуры, списки, файлы, строки, функции, шаблоны.
Р.Эндрю |CSS. 100 и 1 совет [2010] |
|
Эта книга предназначена для тех веб-дизайнеров и разработчиков, не имеющих много времени на изучение большого количества теории при создании собственных сайтов. Здесь собраны готовые решения самых распространенных проблем, и эти решения уже можно применять на практике. Вы найдете ответы на самые сложные вопросы и практические способы использования CSS. Вы научитесь создавать сложные макеты страниц, элементы навигации и форм, будете легко решать проблемы, связанные со всеми особенностями современных браузеров. Чтобы изучать книгу, не нужно иметь специальную подготовку: в первой главе идет речь об основных особенностях CSS, но по ходу изучения сложность приводимых способов постепенно растет, поэтому читатель с базовыми знаниями CSS намного быстрее будет воспринимать материал. Страниц: 333 Формат: PDF |
Седерхольм Д.|CSS ручной работы, pdf, [2011] |
|
Книга посвящена современным технологиям веб-дизайна на основе CSS — каскадных таблиц стилей, использующихся при создании большинства современных интернет-сайтов. Издание затрагивает такие вопросы как использование в веб-дизайне новых свойств CSS3, гибкая работа с цветом при помощи RGBA, работа с «плавающими» элементами, использование «резиновой» верстки и гибких элементов дизайна, искусство работы с типографикой, jQuery, фоновыми элементами, а также массу других аспектов по совершенствованию веб-дизайна с помощью технологий CSS. В дизайне нет мелочей; есть детали, которые оказываются наиболее важными. «CSS ручной работы» — это книга о таких деталях, которые отличают хороший веб-дизайн от первоклассного.
|
Не забывайте написать ваш комментарий, понравилась ли статья. От вас пару слов, а мне — признание поисковых систем, что пишу нормальные человеческий статьи. Заранее спасибо вам!
profwebsit.ru
Учебники HTML
|
A> |
Учебники HTMLЗдесь можно скачать электронные пособия по HTML бесплатноНиже приведены учебники, пособия и различные справочные материалы по HTML, которые можно просмотреть или скачать бесплатно.
|
НавигацияГлавная NET Framework Аjax ASP Assembler Basic С++ C# CMS CSS Delphi DHTML Flash HTML Java JavaScript Linux Oracle Perl PHP Python Ruby SQL UML Unix Visual Studio Windows XML Безопасность Блоги Графика Дизайн Компьютер Маркетинг Новичкам Оптимизация Программы Протоколы Работа Раскрутка Сеть Схемотехника Телевидение Телефония Файлообмен ФОРУМ САЙТА |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
sky-seo-web.narod.ru