Урок 1. Что такое HTML — изучаем что такое HTML структура. Как работать в html
Работа с основными HTML тегами и атрибутами для новичков
Сейчас мы с вами займемся изучением основных тегов. Начнем с того, какие теги являются обязательными на странице, формируя ее структуру.
Блок . Структура простейшей страницы
Страница сайта - это обычный текстовый файл с расширением .html. Внутри этого файла и хранится текст HTML страницы вместе с тегами. Этот файл обязательно должен иметь следующие теги: тег <html>, который должен содержать в себе текст всего сайта (все, что написано вне этого тега, браузером будет проигнорировано), а внутри него должны быть еще два тега: тег <head> для служебного содержимого страницы и тег <body> - для основного текста, который и виден на экране браузера.
В служебное содержимое, которое располагается внутри тега <head>, входит много различных вещей, но пока нам нужны только две из них. Это тег <title>, задающий название страницы, которое будет видно во вкладке браузера, и тег <meta>, который задает кодировку страницы (она ставится в атрибуте charset и обычно имеет значение utf-8, подробнее об этом в видео, которое будет ниже на пару абзацев).
Кроме того, перед тегом <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>Так код будет выглядеть в браузере:
Это обычный текст, а это курсивный текст.
Блок . Списки
Наряду с абзацами и заголовками существует еще один важный элемент страницы - это списки. Такие элементы наверняка знакомы всем пользователям интернета. Они представляют собой перечисление чего-либо (список) по пунктам. Возле каждого пункта списка обычно стоит закрашенный кружок (он называется маркер списка).
Списки создаются с помощью тега <ul>, внутри которого обязательно должны идти теги <li>. Тег ul задает сам список, а в теги li следует ложить пункты списка (то есть одному li соответствует один маркер списка). Имейте ввиду, что отдельно теги li использовать нельзя. Смотрите пример:
<!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> не требует закрывающего тега.
Блок . Ссылки в виде картинок
Ссылкой может быть не только текст, но и картинка - для этого достаточно тег <img> вложить в тег <a>, как это сделано в следующем примере. Нажмите на картинку - и вы перейдете по ссылке на сайт phphtml.net (чтобы потом вернуться назад на книжку - нажмите кнопку "назад" в браузере):
Так код будет выглядеть в браузере:
Блок . Разрыв строки
Вспомните, что будет, если сделать, к примеру, два абзаца рядом - в этом случае текст, который лежит в каждом из них, будет начинаться с новой строки.
Давайте убедимся в этом на следующем примере:
<!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 для начинающих
Данная статья не претендует быть исчерпывающим руководством по языку разметки документов HTML. В ней описываются основы HTML - базовые принципы, понятия и определения данной технологии, освоив которые, можно без труда двигаться дальше в изучении HTML кодинга.
Для изучения урока, скачайте архив с необходимыми файлами.HTML - это язык разметки документов. Правильное произношение - Эйч Ти Эм Эль.
Вы, наверняка, работали когда-нибудь в редакторе документов Word или подобных офисных приложениях? Наверное вы знаете, что данный вид редакторов имеет богатые возможности для редактирования текста, расположения элементов, вставки картинок и т. д.
Зачем, спросите вы, писать в статье, посвященной HTML о текстовых процессорах? А вот зачем. Если разобраться, что такое офисный редактор? Это приложение для редактирования и отображения документов.
Ключевое слово здесь - документ. То есть, мы создаем, редактируем и просматриваем документ в какой-то программе, в данном случае - в офисном редакторе. Если открыть такой документ в простом текстовом редакторе, например, в Блокноте, то мы увидим множество странных символов и знаков. Эта каша из символов непонятна человечеству, но понятна компьютерам. Благодаря этому внутреннему языку, документ Word приобретает определенную структуру и вид в самом редакторе, а документ предстает перед нами во всей своей красе с отформатированным текстом и картинками на своем месте.
HTML - это язык разметки документов для браузера. Word'ом здесь выступает браузер, а документом - HTML страничка. Это самая основа технологии HTML, понимание которой необходимо для того, чтобы не путать язык разметки веб документов с языками программирования. Название говорит за себя - с помощью HTML мы размечаем, где на странице будет показан элемент, картинка или текст, и в каком порядке они будут следовать друг за другом.
Да, простой набор и форматирование текста в офисных приложениях не имеют ни чего общего с программированием. Но наблюдательный читатель заметит важную деталь - в текстовом процессоре мы набираем, редактируем и форматируем текст и картинки с помощью визуальных кнопочек и меню, но почему же HTML код пишется вручную? Зачем изучать так много технических деталей написания разметки для документа?
На самом деле, существует масса редакторов, с помощью которых можно создавать и редактировать HTML странички по аналогии с Word. То есть исходный HTML код для нас скрыт и в него мы не лезем.
Этакий Word для HTML. Такие визуальные редакторы называются:
WYSIWYG редакторы - What You See Is What You Get. То есть, если перевести на русский: что видим, то и получаем.Я их называю "вузивуги". Хоть это фонетически и не правильно, зато ярко свидетельствует о бессмысленности данного изобретения. Новички очень часто используют такие редакторы для создания своих первых сайтов. Конечно, это удобно - не нужно углубляться в изучение тегов, стилей оформления и прочих, на первый взгляд, неприятных и сложных вещей. Редактор сам автоматически преобразует наши действия в HTML код.
Но, как говорится, ни чего просто так не бывает. А если конкретнее - у такого подхода есть очень серьезные недостатки. Что же мешает всем подряд использовать визуальные редакторы для оформления HTML страничек? Дело в том, что сформированные таким образом страницы имеют, как правило, очень много лишнего кода, очень много ошибок с семантической точки зрения. Сейчас, конечно, нет проблем со скоростным интернет соединением и разница в размере странички в 400 кб и 100 кб не существенна для скорости, однако оптимизированный и правильно написанный HTML код избавляет от множества проблем и дает массу преимуществ, а именно:
- Грамотный HTML код положительно влияет на поисковую оптимизацию, скорость сканирования поисковым роботом сайта. Сгенерированные вузивугой килобайты кода здесь не приемлемы и даже вредны;
- HTML код, сгенерированный WYSIWYG редактором имеет множество семантических ошибок. То есть, теги, генерируемые таким редактором используются не по назначению, там где нужно использовать, например, списки <ul>, редактор сгенерирует нам другой, ненужный нам тег. Зависит, конечно, от редактора, но здесь имеются ввиду комплексные решения для создания сайтов, а не простого редактирования текста в текстовой области средствами WYSIWYG.
- Генерируется много лишних тегов и структура документа получается раздутой. Допустим, вы передвигаете элемент в такой программе сначала вправо, потом влево, потом по центру - от каждого действия остается след в исходном HTML коде. Редактор - это программа и он не может знать, что именно вы хотите получить в результате, он формирует тонны кода с учетом всех возможных вариантов поведения документа в браузере.
- Как правило, редакторы для визуального оформления HTML кода, быстро устаревают. А ввиду отсутствия интереса со стороны профессионалов - вообще лишаются поддержки и останавливаются в развитии. А HTML развивается. Все развивается, кроме вузивуги. Соответственно, они не могут генерировать правильный и современный код, в котором были бы задействованы новые фишки и решения.
- Поддерживать такие проекты и развивать - кара небесная. Об использовании паттернов и повторном использовании кода речи вообще быть не может.
Так что, HTML будем писать только ручками. Адекватных инструментов для визуального редактирования HTML еще не придумали, да и врядли они появятся. Язык разметки HTML прост в освоении и понимании, а средств автоматизации написания HTML кода множество, но об этом в других уроках.
Повозившись немного с WYSIWYG редактором, юные HTML-гуру оставляют это бесперспективное занятие и двигаются дальше.
Структура документа HTML
Рекомендую для занятий скачать и установить редактор Sublime Text. Крайне не рекомендую использовать для HTML верстки встроенный в Windows "Блокнот", если вы не хотите сломать себе психику на ранних порах изучения HTML.
Мы решили, что код HTML документа будем писать вручную, то есть верстать. HTML Верстка - процесс создания HTML документа. В простонародье и осведомленных кругах - просто верстка. Любой документ имеет структуру и определенные правила построения. Из каких же элементов состоит код, какая структура у HTML?
Давайте создадим на компьютере первоначальный шаблон - файл index.html, откроем с помощью редактора и вставим в него следующий код:
<!doctype html> <html> <head> <title>Заголовок</title> <meta charset="UTF-8"> <link rel="icon" href="favicon.ico"> <link rel="stylesheet" href="style.css"> <script src="script.js" type="text/javascript"></script> </head> <body> Тело документа </body> </html> Обратите внимание, документы HTML имеют расширение .html.Итак, по порядку из примера.
<!doctype html> - тип документа (доктайп)
<!doctype html>Данная конструкция всегда указывается в начале документа для правильного "понимания" браузером того, какая версия HTML используется при построении документа.
Ввиду того, что HTML постоянно развивается, он имеет несколько версий, как и любой программный продукт. Текущая версия HTML - пятая и приведенный в примере доктайп является актуальным.
В принципе, углубляться в изучение типов документа нет ни какого смысла, ибо с выходом HTML5 данная конструкция стала стандартом. Просто вставляйте ее в начало документа каждый раз, когда начинаете верстать макет сайта.
<html> - начало документа
<html>Первый тег, который мы встречаем после доктайпа, это <html>.
HTML тег - структурная единица разметки HTML документа. Код HTML складывается из кирпичиков, которые именуются тегами. Каждый тег имеет свою функцию, а изучение языка разметки HTML, в конечном счете, заключается именно в изучении тегов и их свойств в документе.
Хотелось бы отметить, что изучение HTML не такое сложное занятие, как может показаться на первый взгляд. Выучить используемые в разметке документа теги - не такая уж и большая нагрузка на мозг.
Итак, разметка документа начинается с тега <html> и заканчивается закрывающим тегом </html>. Каждый тег, который содержит в себе другие теги или элементы должен закрываться закрывающим тегом. Например, <html></html>, <p></p>, <div></div>, и т. д.
Тег <html> является обязательным, так как содержит всю структуру документа и является оболочкой для остальных элементов.
Тег <head>
<head>Далее, мы видим тег <head>, который содержит другие, пока не понятные нам элементы. Содержит другие элементы - это значит, что элементы или теги находятся между открывающим и закрывающим тегом конструкции:
<тег> содержание или другие теги </тег>Тег <head> предназначен для хранения метаинформации HTML документа, то есть информации, которая не отображается в самом документе, но является важной и во многом определяет, как документ будет выглядеть и как себя вести.Данный тег обязателен в документе.
Тег <title> - заголовок документа
<title>Заголовок</title>Заголовок <title> является обязательным тегом, содержащим текстовую метаинформацию, которая отображается в заголовке браузера или вкладки. Тег <title> должен находиться в теге <head>. Также, содержимое данного тега используется поисковыми системами для отображения документа в результатах выдачи.
Метатег <meta charset="UTF-8" >
<meta charset="UTF-8" >Метатег, содержащий информацию о кодировке документа. Очень желательно указывать данный тег во всех создаваемых документах для правильного отображения. Отсутствие данного тега может привести к тому, что вместо слов, на странице будут отображены неведомые символы и текст перестанет быть разборчивым и человекопонятным.
Метатег - специализированный тег, предназначенный для предоставления структурированных данных о странице. Метатеги чаще всего используются в теге <head>. Метатеги не являются обязательными в структуре HTML документа.
Рекомендую во всех HTML документах изначально использовать кодировку UTF-8, как в примере выше.
Фавиконка (favicon)
<link rel="icon" href="favicon.ico" >Подключает к документу файл с изображением фавиконки. Фавиконка (favicon) - миниатюрный значок, отображаемый рядом с названием документа во вкладке браузера. Фавиконка - это графический файл, размером 16 x 16 (или 32 x 32) пикселей, который может иметь различные форматы, такие, как png, jpg, ico, gif. Традиционно используется формат ico. Анимированные фавиконки - это gif файлы, содержащие анимацию. Наблюдать анимированный фавикон можно, например, ВКонтакте, когда приходит новое сообщение.
CSS стили документа
<link rel="stylesheet" href="style.css">Подключает к документу CSS файл со стилями оформления HTML.
CSS - каскадные стили оформления HTML документа. У каждого тега, который находится в теге <body>, имеется набор свойств, такие как - цвет, ширина, высота, положение относительно других элементов. Все эти свойства и есть стили CSS, которые можно вынести во внешний файл. Конструкция <link> подключает внешние файлы к документу HTML, в том числе и стили CSS.
Примечание: свойство href конструкции <link > указывает расположение внешнего файла. В нашем примере, файл style.css и favicon.ico, находятся в той-же папке, что и файл index.html. <link> не имеет закрывающего тега.
Тег <script>
<script src="script.js" type="text/javascript"></script>Тег <script> содержит код или ссылку на файл javaScript и чаще всего используется внутри тега <head>, хотя инструмент оптимизации скорости загрузки страниц от Google, рекомендует данный тег использовать в конце документа, перед закрывающим тегом </body>.
В нашем примере подключается внешний файл script.js, который находится в той-же папке, что и основной файл index.html.
Итак, друзья, мы рассмотрели основные элементы, которые используются в теге <head> чаще всего. Кроме этих элементов, для <head> есть ряд других, более специфичных и не обязательных.
</head>Закрываем тег <head> и шагаем дальше.
Тело aka body
<body>Вот здесь то и начинается все самое интересное и визуально осязаемое в HTML верстке документа.
Перейдем, непосредственно, к верстке видимой части страницы. Все, что мы пишем и верстаем внутри тега <body> будет отображено в браузере. Откроем наш файл index.html в браузере для того, чтобы наглядно видеть, что мы делаем в редакторе.
Тег <body> может содержать любые HTML теги, необходимые для оформления документа и обеспечения его функционала (формы). Приведу таблицу наиболее используемых тегов и вкратце опишу каждый. Вы можете сразу выполнять приведенные примеры в редакторе.
Тег |
Описание |
| <a> | Тег для создания ссылок в документе.Пример: <a href="http://webdesign-master.ru">текст ссылки</a> Атрибут href указывает документ, на который будет вести данная ссылка. |
| <em>, <strong> | Делает текст курсивом или жирным (акцентируемым).Пример: <em>текст курсивом</em> <strong>жирный (акцентируемый) текст</strong> |
| <h2>, <h3>, <h4>, <h5>, <h5>, <h6> | Заголовки документа. Всего существует 6 уровней заголовков, но на практике используются только от h2 до h5. В документе должен быть только один заголовок, выделенный тегом h2, как главный заголовок документа.Примеры: <h2>Заголовок первого уровня</h2> <h3>Заголовок второго уровня</h3> <h4>Заголовок третьего уровня</h4> ... и т. д. |
| <ol>, <ul> | Списки документа. Представляют собой нумерованный или маркированный список. Элементом такого списка является тег <li>Примеры: <ul> <li>Элемент маркированного списка 1</li> <li>Элемент маркированного списка 2</li> </ul> <ol> <li>Элемент нумерованного списка 1</li> <li>Элемент нумерованного списка 2</li> </ol> |
| <p> | Абзац. Данный тег определяет абзац текста, отбитый от остальных абзацев. Закрывать данный тег очень желательно.Пример: <p>Внешний вид HTML разметки во многом определяется CSS стилями.</p> <p>Тем не менее, некоторые веб-мастера предпочитают не использовать стили на первых этапах проекта.</p> |
| <img> | Картинка. С помощью данного тега в HTML разметку можно вставить картинку. Обязательно указывайте у всех изображений альтернативный текст - атрибут "alt". Данный тег "самозакрывающийся".Пример: <img src="путь_до_картинки.jpg" alt="Текст"> |
| <form> + <input> + <textarea> | Формы и элементы ввода.Формы предназначены для ввода информации в систему на сервере. Этакая обратная связь пользователя и сайта. Например, формы используются, когда нужно отправить какое-то сообщение на сервер. Кроме того, формы могут выполнять и другие функции, но основная задача - отправка данных на сервер.Пример - простая форма отправки сообщения, в которой пользователь сайта указывает свое имя, E-mail и какой-то текст: <form action="ссылка_на_скрипт_обработки_формы"> <input type="text" name="name"> <input type="text" name="email"> <textarea name="text"> Текст сообщения <textarea> <input type="submit" value="Написать"> </form> |
| <span> | Определяет подстроку в строке.Применяется для определения стиля части строки посредством CSS. Один из самых часто используемых тегов. Без оформления, ни как не проявляет себя в браузере.Пример: Изучение HTML, в большинстве случаев, не вызывает <span>ни каких сложностей</span> у новичков. |
| <video>, <audio> | Теги предназначены для вставки видео и аудио в документ. Обязателен закрывающий тег.Примеры: <video src="rolik_chuma.mp4" controls></video> <audio src="muzichka.mp3" controls></audio> Параметр controls говорит нам о том, что на странице должны отображаться элементы управления медиаконтентом, как в обычном аудио/видео плеере. |
| <div> | Во истину, королевский тег. Самый используемый и популярный тег в HTML разметке страницы. Это блочный элемент, предназначенн для управления блоками на сайте. Часто употребляется понятие "дивной" верстки - это значит, что все блоки на сайте сверстаны с использованием данных тегов. Может содержать другие теги <div>.Пример: <div> <div> Текст во вложенном блоке </div> </div> Все элементы <div>, в большинстве случаев, оформляются свойствами CSS стилей. Обязателен закрывающий тег </div>. |
| <iframe> | Данный тег загружает внешнюю страницу в документ.Пример: <iframe src="http://rtfm.org.ru"></iframe> |
Мы рассмотрели далеко не все теги, да это и не нужно на данном этапе. Главное - понять основную идею HTML, научиться использовать представленные выше теги, а потом двигаться дальше.
Обратите внимание на то, что все названия в подключаемых файлах должны писаться латинскими символами, без пробелов.
Например, не:
<video src="ролик чума.mp4" controls></video>а:
<video src="rolik_chuma.mp4" controls></video>Это необходимо для большей совместимости содержимого страницы. К тому-же, стандарты написания HTML кода, диктуют.
Итак, теперь мы знаем некоторые основы HTML: какая структура должна быть у типового HTML документа, знаем некоторые наиболее ходовые теги, пора приступить к самому вкусному - а именно, печенькам.
Практическое задание по HTML верстке
Если вы еще не скачали архив с примерами, сделайте это. Для примера, можете подглядывать в файл example.html, который также находился в архиве.
- Распакуйте архив и в папке с распакованными файлами создайте файл index.html. Откройте созданный файл с помощью текстового редактора Sublime Text;
- Создайте первоначальную структуру документа с доктайпом, тегом <html>, содержащим <header> и <body> и перейдите к редактированию содержимого тега <body>;
- Откройте файл readme.txt и выполните соответствующие задания в созданном вами файле index.html. Для проверки результата, откройте index.html в вашем любимом браузере.
На этом урок по основам HTML окончен, в следующем уроке "Основы CSS" мы научимся управлять стилями элементов документа, познакомимся ближе с каскадными таблицами стилей, научимся использовать классы стилей и сделаем нашу верстку красивой и красочной.
До новых встреч, друзья!
Премиум уроки от WebDesign Master:
webdesign-master.ru
Что такое HTML и с чего начать изучение HTML?
Не будем вдаваться в подробности и историю что такое HTML, а сразу перейдем основным моментам. HTML — это основа построения любого сайта! При изучении темы сайтостроения необходимо начинать именно с него. Здесь нет ничего тяжелого. Освоить данную технологию сможет АБСОЛЮТНО КАЖДЫЙ!
Сразу хочу заметить, что это НЕ язык программирования, а язык разметки.
Почему выучить HTML легко?
Чтобы говорить свободно на английском языке не нужно знать все слова, которые есть в английском языке. Так и здесь, Вам лишь необходимо усвоить некоторые из основных тегов и научиться с ними работать. А дальше Вам лишь останется практиковаться и нарабатывать навык.
Давайте приступим к изучению этой увлекательной, и одновременно простой, технологии.
Немного теории…
Любая страница состоит из тегов. То есть страница выглядит на самом деле не так как мы привыкли это видеть, а состоит из множества тегов, каждый из которых, играет определенную роль.
Это похоже на большую стену из кирпичиков. Если все кирпичики на ней положены аккуратно, то и вся стена выглядит красиво. Поэтому при написании структуры страницы необходимо уделять внимание каждому тегу, потому что он является "кирпичиком" для нашей будущей страницы.
Но что такое тег в HMTL?
Это элемент HTML страницы, который так или иначе влияет на отображение и разметку страницы. На словах понять это достаточно сложно, поэтому необходимо сразу все смотреть именно на практике и привыкать к коду. Посмотрите на изображение ниже:
Это структура самой простой страницы. А вот эти повторяющиеся слов в треугольных скобках — это и есть теги. Если Вы откроете свой текстовый редактор и напишете данный код, а затем сохраните в формате HTML, то у Вас получится HTML страничка. Пока что не понятно что такое HTML? 🙂
Из этой структуры можно увидеть те теги, которые должны обязательно присутствовать. Это теги:
Чтобы было более наглядно, я выделил их оранжевым цветом на изображении ниже:
Все, что мы будем писать между тегами <head> и </head> мы не увидим на нашей странице. Эти теги могут сообщать браузеру о кодировке, о заголовке нашей страницы, здесь могут подключить различные стили, скрипты и так далее. Все это Вы увидите в последующих уроках.
А вот все теги, которые мы будем писать между тегами <body> и </body>, в зависимости от его предназначения, будет влиять именно на структуру нашей HTML страницы.
Ну что, стало более понятно что такое HTML? 😉 Но мы не останавливаемся и движемся дальше…
Некоторые теги могут иметь закрывающий тег, а некоторые нет. Например тега <body> есть закрывающий тег </body>. Как Вы могли уже догадаться, закрываются теги с помощью наклонной черты.
Очень важно соблюдать открытие и закрытие тегов. Чтобы не было ошибок. Браузер ошибку может и не показать, а вот структура Вашей страниц будет неправильной и при дальнейшей работе со стилями (где займемся внешним видом) будут большие проблемы. Поэтому если у тега есть закрывающий тег, то он обязательно должен присутствовать в правильном месте.
Давайте на примере разберем как НЕ надо закрывать теги и в каком порядке это необходимо делать. Пример двух тегов:
Правильный HTML КОД
| 1 | <div><p>Произвольный текст</p></div> |
То, что Вы видите выше — это правильный порядок написания закрывающих тегов. Но может быть такая ситуация
ОШИБКА В HTML КОДЕ
| 1 | <div><p>Произвольный текст</div></p> |
Так закрывать теги категорически запрещается!
Практика, чтобы понять что такое HTML…
Поближе узнать, что такое HTML, можно лишь на практике. Для этого можно использовать любой текстовый редактор. Даже блокнот. Но я рекомендую использовать Notepad++, потому что функци для работы с HTML здесь гораздо больше. Скачать его можно по ссылке Скачать Notepad++. В данном редакторе есть все возможности для создания и редактирования HTML страниц.
Начнем. После открытия программы вы увидите такое окошко:
Чтобы создать HTML страницу, необходимо ввести "тело" страницы в данное окошко. Вы можете скопировать текст ниже и просто вставить его. Но лучше введите все руками. Так Вы сможете быстрее запомните и привыкнете к тегам.
HTML КОД
| 1 2 3 4 5 6 7 8 9 | <html> <head> <title>Изучаю HTML - Начало</title> </head> <body> <h2>Основной заголовок</h2> <h4>Более маленький подзаголовок</h4> </body> </html> |
Итак, у вас должно получиться следующее:
Далее необходимо сохранить данную страницу в HTML формате. Для этого нажимаем в меню "Файл", здесь жмем "Сохранить как…". Вводим имя HTML страницы. Я назвал ее index.html. Затем просто сохраняем в удобное место у себя на компьютере. После этого появится подсветка HTML тегов, потому что редактор Notepad++ поймет что это HTML документ. А с подстветкой работать гораздо приятнее.
Сейчас можно открыть этот файл в любом браузере. И если Вы в своем браузере увидели такую вот картину:
То необходимо дописать после закрывающего тега </title> вот такую строчку:
HTML КОД
И убедиться в том, что в текстовом редакторе выбрана кодировка UTF-8 (без BOM):
И тогда Вы увидите следующую страничку в своем браузере:
Видео урок — что такое HTML? (практика)
Если при прочтении Вам было тяжело, то посмотрите данный видео урок:
Вывод
Замечательно, у нас получилась первая HMTL страничка. Если же что-то пошло не так, то обязательно повторите все шаги и убедитесь в том, что Вы все сделали точно также. Теперь у Вас сложилось первое впечатление о HTML и что это такое.
Урок 1. Что такое HTML — изучаем что такое HTML структура 4.90/5 (98.00%) 20 голос(ов)
Понравилась статья - расскажи друзьям! :)
Вконтакте
Одноклассники
Google+
www.sitehere.ru
Как работать и подключить CSS к HTML документу на практике
Добро пожаловать в следующий урок из серии уроков по CSS! С вами вновь Макс Метелев и сегодня мы разберем на практике как работать с CSS и как его подключить к html документу.
В прошлом уроке мы бегло узнали историю его появления. Если не читали, то настоятельно рекомендую.
Завариваем кофе, чай, берем плюшки и вперед за изучение основ сайтостроения.
Как работает CSS?
В этом уроке вы создадите свой первый файл стилей. Многие из свойств, используемых в каскадных таблицах стилей аналогичны в HTML. Поэтому если вы уверенно разбираетесь в гипертекстовой разметке, то, скорее всего, вы быстро усвоите многие «приблуды» CSS. Давайте рассмотрим на примере.
Базовый синтаксис CSS
Например, нам нужен красный фоновый цвет веб страницы. Используя HTML мы бы сделали примерно так:
В стилях подобное мы бы достигли написанием следующего кода:
body {background-color: #FF0000;}
body {background-color: #FF0000;} |
Как вы должны были заметить написание и там, и там одинаково. Данный пример демонстрирует фундаментальную модель CSS:
Но где размещать код CSS спросите Вы? Вполне логичный и здравый вопрос. Именно этим мы сейчас и займемся.
Как подключить CSS к HTML документу?
Можно выделить 3 способа подключения CSS к веб странице. Все их мы сейчас рассмотрим на примере. Внимательно смотрите 3 способ, так как он самый правильный с точки зрения стандартов верстки и логики. Другие тоже верны, но это «грубые» варианты. Их лучше не использовать.
Метод 1 – Внутристроковое размещение стилей (через атрибут style)
Первый путь заключается в подключении CSS к HTML посредством атрибута style. Основываясь на приведенным выше примере с красным цветом наш код записался бы так:
<html> <head> <title>Example</title> </head> <body> <p>Здесь красная страница</p> </body> </html>
<html> <head> <title>Example</title> </head> <body> <p>Здесь красная страница</p> </body> </html> |
Метод 2 – Через использование тегов style
Другой способ подразумевает включение парных тегов стилей <style></style> внутрь той страницы, где мы хотим применить их. Например, как здесь:
<html> <head> <title>Простой пример</title> <style type="text/css"> body {background-color: #FF0000;} </style> </head> <body> <p>Здесь снова красная страница</p> </body> </html>
<html> <head> <title>Простой пример</title> <style type="text/css"> body {background-color: #FF0000;} </style> </head> <body> <p>Здесь снова красная страница</p> </body> </html> |
Метод 3 – Внешнее подключение файлов стилей.
Это рекомендуемый и правильный метод заключается в увязке файла стилей и веб страницы через подключение в html документ всего лишь одной строчки:
<link rel="stylesheet" type="text/css" href="style/style.css" />
<link rel="stylesheet" type="text/css" href="style/style.css" /> |
Единственное условие вы должны сохранить отдельно файл со стилями и назвать его, например style.css и быть он должен в папке CSS или Style. Такую ситуацию можно проиллюстрировать вот так:
Следует обратить внимание на место, где будет подключаться наша строчка, которая вызывает файл со стилями. Она должна находиться между служебными тегами <head></head> . Можно разместить ее сразу после тега заголовка страницы <title> , как на этом примере:
<html> <head> <title>My document</title> <link rel="stylesheet" type="text/css" href="style/style.css" /> </head> <body> </body> </html>
<html> <head> <title>My document</title> <link rel="stylesheet" type="text/css" href="style/style.css" /> </head> <body> </body> </html> |
Ссылка говорит браузеру, что он должен использовать макет из файла CSS для отображения html документа. Т.е как, своего рода, должная инструкция поисковику. Иди вот в это место, цепляй файл стилей и украшай страницу так, как я написал. Ну это образно говоря:-)
Самое важное то, что вы можете иметь неограниченное количество веб страниц и иметь при этом один файл со стилями.
Эта техника поможет сэкономить вам уйму времени. Представьте, что Вы хотите изменить цвет фона веб-сайта с количеством 100-200 страниц, таблица CSS спасет вас от необходимости вручную изменять все эти 100-200 документов.
Давайте еще раз закрепим все на практике.
Попробуйте самостоятельно
Откройте NOTEPAD++ или другую программу для редактирования и создания веб страниц и создайте два файла – один со страничкой html, а другой с файлом стилей:
Default.htm
<html> <head> <title>My document</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h2>My first stylesheet</h2> </body> </html>
<html> <head> <title>My document</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h2>My first stylesheet</h2> </body> </html> |
Style.css
body { background-color: #FF0000; }
body { background-color: #FF0000; } |
Теперь возьмите и поместите эти два файла в одну папку. Не забудьте сохранить файлы с правильными расширениями (.htm и .css соответственно)
Откройте в браузере файл default.htm и посмотрите, как ваша страница приобрела красный фон. Поздравляем Вас! Вы сделали свой первый файл стилей.
В следующем уроке мы взглянем на некоторые свойства CSS
smarticle.ru
Изучаем HTML теги и атрибуты. Учимся работать с текстом, списками и изображениями в HTML
В этой статье мы продолжаем изучение основ HTML и рассмотрим самые необходимые в работе теги и атрибуты, а также научимся работать с текстом, списками и изображениями в HTML. Это базовые знания, которые являются обязательными не только при создании сайтов, но и при публикации материалов, так как именно при помощи HTML формируются страницы сайтов. Изложенного материала будет достаточно для освоения основ работы с текстом, списками и зображениями на сайте. Все это поможет придать желаемый вид материалам на ваших сайтах.
Итак, первым делом, прежде чем приступить к дальнейшему изучению основ HTML, давайте узнаем, что такое теги и атрибуты в HTML. Тема тегов уже затрагивалась в статье «Основы HTML. Как создать HTML страницу», поэтому начнем сразу с атрибутов.
Атрибуты в HTML — это так называемые свойства, которые сообщают браузеру дополнительную информацию о том, как нужно отображать тот или иной элемент на странице. При помощи атрибутов, например, можно задать выравнивание тексту, шрифт, цвет и т.д. Одним словом атрибуты являются неотъемлемыми элементами языка гипертекстовой разметки HTML.
Работа с текстом в HTML — Абзацы, ссылки и атрибуты в HTML
Чаще всего при редактировании HTML кода страниц сайта работа заключается в добавлении или редактировании абзацев, атрибутов, заголовков и ссылок. Сразу хочется заметить, что о ссылках у меня есть отдельная подробная статья «Свойства ссылок. Как закрыть от индексации ссылки на сайте», поэтому остановимся лишь на первых трех пунктах.
Для того, чтобы создать абзац в HTML применяется специальный тег <p>. Все что вам понадобится, это выделить нужный участок текста и поместить его в теги абзацев. На практике это будет выглядеть следующим образом.
<p>Текст или другой код внутри абзацев</p>Как видите тег абзацев парный, поэтом в конце абзаца нужно поставить закрывающий тег </p>. Поскольку язык гипертекстовой разметки HTML не очень строгий, то допускает наличие разнообразных ошибок, таких как, например, отсутствие некоторых закрывающих тегов. При этом браузер сам их проставит и зачастую страница будет отображаться нормально. Все же рекомендую очень тщательно относиться к правильности кода и не допускать ошибок, так как это залог успешной работы вашего сайта.
Теперь давайте рассмотрим, как изменить свойства абзацев для придания им нужного вида. В HTML это делается при помощи специальных атрибутов. В силу новых правил языка гипертекстовой разметки лучше использовать специальный атрибут STYLE, который позволяет придавать элементам те свойства, который вам нужны.
Итак, в атрибуте STYLE можно использовать все те же свойства, что и в каскадных таблицах стилей. Более подробно об этих свойствах вы можете узнать в следующих статьях:
Для того, чтобы использовать эти свойства вам достаточно перечислить их в кавычках через точку с запятой, не забывая указать нужные значения возле каждого свойства, а также точку с запятой в конце списка свойств. Например, нам нужно задать размер шрифта 12 пикселей и выровнять его по центру. Из статей выше вы моги узнать, что за размер шрифта отвечает свойство font-size, а за его выравнивание – text-align. В результате у нас получится следующий HTML код.
<p>Произвольный текст</p>Теперь текст будет написан шрифтом размером 12 пикселей и будет выровнен по центру. Аналогичным образом элементам в HTML можно придавать и другие свойства, например, выделить текст жирным шрифтом.
<p>Произвольный текст</p>При этом текст примет полужирное начертание без применения каких-либо других тегов. Если же вам нужно выделить отдельные слова жирным шрифтом или курсивом, то для этих целей существуют другие теги, такие как <strong> и <em>. Для этого достаточно просто в нужном месте выделить слова этими тегами.
<strong>Слово выделенное жирным шрифтом</strong> <em>Слово выделенное курсивом</em>Также хочу заметить, что выделение слов этими тегами влияет на поисковую оптимизацию страниц. Исходя их этого я не рекомендую выделять много слов на странице этими тегами, как и заголовками, о которых речь пойдет дальше.
Заголовки в HTML. Заголовки h2 – H6
Во всех статьях независимо от их объема существует необходимость создания заголовков. Заголовки играют важную роль в оптимизации страниц под поисковые системы, поэтому их использование обязательно на каждом сайте. В HTML для создания заголовков существуют специальные теги. Всего их шесть. Для заголовков первого уровня – h2, для второго – h3, для третьего – h4 и т.д. до заголовка шестого уровня H6. При этом желательно чтобы заголовок каждого уровня встречался не более одного раза на странице. Особенно это касается заголовка первого уровня h2.
Итак, для создания заголовка на странице достаточно просто выделить нужный участок текста тегами заголовков H и поставить нужный уровень.
<h2>Заголовок первого уровня</h2>Как видите данный тег тоже является парным и его нужно закрывать. Аналогичным образом создаются заголовки второго уровня, третьего и т.д.
<h3>Заголовок второго уровня</h3> <h4>Заголовок третьего уровня</h4>Более подробно о том, зачем использовать заголовки вы можете прочитать в статье «Поисковая оптимизация страниц».
Работа со списками в HTML
Язык гипертекстовой разметки HTML позволяет создавать как маркированные, так и нумерованные списки. Для этих целей существуют специальные теги списков. Для начала давайте рассмотрим процесс создания маркированных списков, а затем приступим к рассмотрению нумерованных списков.
Маркированные списки в HTML
Для создания маркированных списков в HTML применяются специальные теги <UL> и <LI>. Тег <UL> используется для создания всего списка, а тег <LI> для создания отдельного элемента списка. По умолчанию элементы списка маркируются обычным черным кружочком, который можно изменить при помощи атрибута TYPE. В пределах одного списка можно использовать различную маркировку элементов списка.
<ul type="circle"> <!--Задаем по умолчанию маркировку в виде пустых кружочков--> <li>элемент 1</li> <li>элемент 2</li> <li type="disc">элемент 3</li> <!--Задаем для данного элемента маркировку в виде черного кружочка--> <li type="square">элемент 4</li> <!--Задаем для данного элемента маркировку в виде черного квадратика--> </ul>Результатом работы вышеприведенного кода будет список.
Нумерованные списки в HTML
Нумерованные списки в HTML создаются аналогичным образом с единственным отличием, что в них вместо тега <UL> применяется тег <OL>, который сообщает браузеру, что данный список является нумерованным. В качестве нумерации данного вида списков HTML могут использоваться как цифры, так и буквы.
Нумерованные списки могут иметь следующие атрибуты.
- TYPE – используется для указания стиля нумерации.
- START — служит для задания начального номера списка, отличного от 1.
- VALUE — дает возможность назначить произвольный номер любому элементу списка.
Пример списка с обычной числовой нумерацией.
<ol> <li>элемент 1</li> <li>элемент 2</li> <li>элемент 3</li> </ol>Пример списка с буквенной нумерацией.
<ol type="A"> <!--Если указать в качестве значения маленькую букву а, то список будет пронумерован маленькими буквами--> <li>элемент 1</li> <li>элемент 2</li> <li>элемент 3</li> </ol>Пример списка с произвольной числовой нумерацией.
<ol start="5"> <!--Указываем номер первого элемента нумерованного списка--> <li>элемент 1</li> <li value="9">элемент 2</li> <!--Присваиваем данному элементу номер 9--> <li>элемент 3</li> </ol>Вышеприведенные списки будут выглядеть в браузере следующим образом.
Теперь давайте перейдем к завершающей части статьи и рассмотрим основы работы с изображениями в HTML.
Работа с изображениями в HTML
В HTML для вставки изображений используется специальный тег IMG внутри которого нужно указать атрибут SRC, в качестве значения для которого нужно указать ссылку на изображение. При этом также рекомендуется указывать разрешение для изображения во избежание некорректного отображения на сайте.
Итак, код для вставки изображения будет иметь следующий вид.
<img title="Основы HTML" alt="Основы HTML" src="http://dmitriydenisov.com/wp-content/uploads/2011/05/social-voting-logo.jpg">Где
- Height – высота изображения.
- Width – ширина изображения.
- Class – класс CSS задающий свойства для изображения.
- Title – заголовок, который отображается при наведении курсора на изображение.
- Alt – описание для изображения. Используется поисковыми системами при поиске картинок.
- Src – путь к изображению.
Для того чтобы сделать данное изображение ссылкой, достаточно просто поместить вышеприведенный код внутри тега <a> и прописать в качестве значения атрибута href ссылку на нужную нам страницу.
<a href="http://dmitriydenisov.com/"><img title="Основы HTML" alt="Основы HTML" src="http://dmitriydenisov.com/wp-content/uploads/2011/05/social-voting-logo.jpg"></a>Теперь наше изображение стало ссылкой и при нажатии на него пользователь перейдет на сайт http://dmitriydenisov.com.
На этом, пожалуй, статья подошла к концу. Если у вас остались какие-то вопросы по данной статье, вы всегда можете задать их в комментариях к статье.
Вы также можете подписаться на новостную рассылку любым удобным для вас способом в пункте «Подписка» либо воспользоваться формой ниже.
На этом все. Удачи вам и до скорых встреч на страницах блога dmitriydenisov.com
Обнаружили ошибку? Выделите ее и нажмите Ctrl+Enter
dmitriydenisov.com
Основы работы с языком CSS для новичков
Мы с вами уже разобрали основные теги языка HTML и теперь пришло время навести красоту. Хотелось бы иметь возможность менять цвет текста, его размер, фон и многое другое. Это делается с помощью языка CSS.
Блок . Как работать с CSS
Каждому тегу в HTML соответствует так называемый селектор CSS. К примеру, тегу <p> соответствует CSS селектор p, с помощью которого мы можем обратиться ко всем абзацам HTML страницы и, например, покрасить их всех одновременно в красный цвет. После селектора следует ставить фигурные скобки {}, внутри которых следует писать CSS свойства.
CSS свойства и задают цвет, размер шрифта и другие интересные вещи. Их следует писать в таком формате: имя свойства, потом двоеточие, потом значение этого свойства (например, свойство - это цвет, а "красный" - это значение). Потом нужно поставить точку с запятой и можно писать следующее свойство.
Давайте покрасим все абзацы в красный цвет:
Это HTML код:
<p> Абзац с текстом. </p>Это CSS код:
p { color: red; }Так код будет выглядеть в браузере:
Абзац с текстом.
А теперь давайте покрасим абзацы в зеленый цвети сделаем их большого размера:
<p> Абзац с текстом. </p> p { color: red; font-size: 25px; }Так код будет выглядеть в браузере:
Абзац с текстом.
Обратите внимание на оформление CSS кода: каждое новое свойство пишется с новой строки.
Блок . Способы подключения CSS к HTML коду
Давайте теперь разберемся с тем, как сделать так, чтобы написанный CSS применился к нашему HTML коду. Это можно сделать тремя способами.
Первый способ заключается в том, что CSSбудет написан в отдельном файле и специальным образом подключен к нашей HTML странице.
Еще два способа заключаются в том, что CSS код будет написан прямо на HTML странице.
Первый способ используется гораздо чаще (в подавляющем большинстве случаев). Одновременно можно применять все три способа.
Давайте разберемся с этими способами более подробно.
Способ 1. Отдельный CSS файл
Самый распространенный способ подключения CSS - это когда он хранится в отдельном файле и этот файл подключается ко всем страницам нашего сайта.
Преимущество такого подхода в том, что CSS файл один, а HTML файлов может быть любое количество, хоть тысяча. Мы сделаем изменение в одном месте CSS файла, например, покрасим все абзацы в красный цвет, и эти изменения применятся на всей 1000 HTML страниц, к которым подключен наш CSS файл. Очень удобно и быстро.
Чтобы подключить CSS файл к HTML странице, в теге head следует написать такую конструкцию: <link rel="stylesheet" href="путь к CSS файлу">.
Сам CSS файл должен быть с расширением .css. Обычно его называют styles.css или style.css.
В следующем примере к нашему HTML файлу подключается CSS файл style.css:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Это заголовок тайтл</title> <link rel="stylesheet" href="style.css"> </head> <body> <p> Это абзац с текстом. </p> </body> </html>Можно подключать не один файл, а несколько. Давайте подключим файлы style1.css, style2.css и style3.css:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Это заголовок тайтл</title> <link rel="stylesheet" href="style1.css"> <link rel="stylesheet" href="style2.css"> <link rel="stylesheet" href="style3.css"> </head> <body> <p> Это абзац с текстом. </p> </body> </html>Способ 2. CSS внутри тега style
Второй способ заключается в том, что CSS код можно написать в теге <style> Его можно размещать как внутри <head> (чаще всего), так и внутри <body>.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Это заголовок тайтл </title> <style> p { color: red; } </style> </head> <body> <p> Это абзац с текстом. </p> </body> </html>Недостаток этого способа в том, что CSS код применяется только к одной странице сайта, а не ко многим. Этот способ обычно применяется тогда, когда нужно написать CSS на конкретной странице сайта, не затрагивая остальных, и, в общем случае, к употреблению не рекомендуется.
Правило такое: если что-то можно сделать первым способом, то использовать второй способ - дурной тон.
Способ 3. CSS внутри атрибута style
Третий способ заключается в том, что можно добавить атрибут style любому тегу на странице и прямо там написать для него HTML код. Обратите внимание на то, что при этом никаких селекторов писать не нужно, так как CSS код применится только к тому тегу, для которого он написан:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Это заголовок тайтл</title> </head> <body> <p> Это абзац с текстом. </p> </body> </html>Третий способ, так же, как и второй, не сильно рекомендуется к использованию, потому что он захламляет HTML код. В настоящее время общепринято то, что языки нужно разделять по отдельным файлам - в одном файле мы пишем на языке HTML, а в другом - на CSS.
Впрочем, иногда без второго и третьего способа не обойтись.
Блок . Комментарии CSS
Так же, как и в HTML, в CSS можно ставить комментарии. Они оформляются следующим образом: слеш и звездочка /*, потом текст комментария, потом звездочка и слеш */. Смотрите пример:
p { /* Тут находится комментарий CSS. */ color: red; font-size: 27px; }Видео про CSS
Посмотрите следующее видео из заочного курса: скачайте его по данной ссылке. Там я рассказываю про подключение CSS, а также демонстрирую работу с некоторыми свойствами (эти знания пригодятся вам в следующем уроке).
Что вам делать дальше:
Приступайте к решению задач по следующей ссылке: задачи к уроку.
Когда все решите - переходите к изучению новой темы.
code.mu
Как работают все сайты, и что такое HTML и CSS
Здравствуйте, уважаемые читатели сайта Uspei.com. Мы приступаем к изучению «гипертекстовой разметки текста», сокращенно код HTML, составляющий основу любого сайта, и который нам нужно изучить, чтобы научиться строить эти самые сайты. Давайте для начала разберем некоторые важные моменты, которые облегчат нам изучение и понимание, что такое HTML язык.
Как работают сайты?
Как происходит процесс от набора адреса сайта в браузере до его отображения на экране? Это упрощенная модель интернета и наш компьютер, который хочет в него войти. В общем смысле интернет это всего лишь несколько компьютеров объединенных в сеть (сервера). Каждый сервер имеет свой IP-адрес, это его отличает от других таких миллионов серверов. Бывает 2 вида серверов: Первый вид серверов (WEB) это те, где хранятся сайты. На одном сервере может быть 1-2 сайта (например Вконтакте, Одноклассники, которые занимают несколько серверов), а могут храниться тысячи небольших и мелких. Все сервера хранятся у хостера.
Хо́стинг (англ. hosting) — услуга по предоставлению ресурсов для размещения информации на сервере, постоянно находящемся в сети. Подробно о работе хостинга мы говорили в этой статье.
Второй тип - вспомогательные сервера, которые помогают нам взаимодействовать и работать в сети. Один из таких серверов это DNS сервера, которые хранят соответствие названий сайтов IP-адресам их серверов. Буквенные названия сайтов не имеют никакого значения для компьютеров, они понимают только числовые значения и IP-адреса.
Например, я набираю в браузере адрес своего блога и она быстро загружается. На самом деле весь процесс остался за кулисами, и мы видим только результат. Что же там произошло? Давайте разберемся.
Наш браузер после ввода названия сайта обратился к DNS-серверу, тот в свою очередь установил по базе данных IP-адрес WEB-сервера, где хранится моя подписная страница и получив от него положительный ответ передал мне набор данных таких, как сам HTML код, картинки и таблицу стилей CSS. Базовые стили мы коротко изучили в этом небольшом курсе.
К оглавлению ↑Что такое HTML и CSS и в чем отличие
HTML код содержит информацию «что содержится на странице», а таблица стилей CSS определяет дизайн, расположение и внешний вид сайта. Браузер же, получив данные, преобразует их в картинку, которую мы видим. При этом, если мы посмотрим исходный код сайта, то мы увидим тот самый HTML код, который нам прислали с сервера. Здесь мы видим текст, картинки. А в CSS файле мы видим цвета, формы и т.д.
В языке HTML в качестве так сказать слов используются теги. Их огромное множество, но в практической деятельности используются только 20% из них. Позже, когда мы с вами начнем создавать свой сайт с нуля, вы в этом убедитесь.
HTML это только строительный материал, из которого строится сайт. CSS же все это дело упорядочивает, придает ему цвет, вид и форму. Вот пример старой подписной страницы с "голым" HTML кодом.
И та же страница с уже подключенными таблицами стилей CSS
К оглавлению ↑ Зачем нужно изучать HTML и CSS
Теперь еще один главный момент… зачем вам все это нужно... Если вы серьезно хотите заняться бизнесом в интернете, вам просто НЕОБХОДИМО знать основы HTML и CSS. Это как буквы алфавита и правила русского языка, без знания и понимания которых вы не сможете построить красивую и грамотную речь.
Никто не заставляет вас получать образование программиста, изучите ОСНОВЫ и никто и никогда не заметит ваш «акцент» в языке интернета при создании и обслуживании вашего сайта. Вы всегда сможете сами изменить дизайн вашего сайта или блога, «позаимствовать» 🙂 дизайн на тех сайтах, что вам приглянулись, да и это просто ИНТЕРЕСНО!!!
На следующем занятии нам понадобится программа Notepad++, скачайте и установите ее.
До встречи! Успевайте всё и всегда на страницах блога Uspei.com
Твитнуть
Поделиться
Плюсануть
Поделиться
Класснуть
Линкануть
Запинить
Буду благодарен, если поделитесь новостью в соцсетях
uspei.com
