В последнее время всё чаще и чаще различные интернет ресурсы устраивают холивары на тему: является ли HTML языком програмирования или нет. Как водится, аргументов в пользу обеих точек зрения приводят немалое количество, поэтому я решил поставить для себя точку в этом ненужном споре.
Определение языка программирования.Язы́к программи́рования - формальная знаковая система , предназначенная для записи компьютерных программ. Язык программирования определяет набор лексических, синтаксических и семантических правил, задающих внешний вид программы и действия , которые выполнит исполнитель (компьютер) под её управлением.
- Аспе́ктно-ориенти́рованное программи́рование (АОП) - парадигма программирования, основанная на идее разделения функциональности для улучшения разбиения программы на модули.
- Структу́рное программи́рование - методология разработки программного обеспечения, в основе которой лежит представление программы в виде иерархической структуры блоков. Предложена в 70-х годах XX века Э. Дейкстрой, разработана и дополнена Н. Виртом.
- Процедурное программирование - программирование на императивном языке, при котором последовательно выполняемые операторы можно собрать в подпрограммы, то есть более крупные целостные единицы кода, с помощью механизмов самого языка.
- Логи́ческое программи́рование - парадигма программирования, основанная на автоматическом доказательстве теорем, а также раздел дискретной математики, изучающий принципы логического вывода информации на основе заданных фактов и правил вывода. Логическое программирование основано на теории и аппарате математической логики с использованием математических принципов резолюций.
- Объе́ктно-ориенти́рованное программи́рование (ООП) - парадигма программирования, в которой основнымиконцепциями являются понятия объектов и классов. В случае языков с прототипированием вместо классов используются объекты-прототипы.
- Функциона́льное программи́рование - раздел дискретной математики и парадигма программирования, в которой процессвычисления трактуется как вычисление значений функций в математическом понимании последних (в отличие от функций как подпрограмм в процедурном программировании).
- Мультипарадигма́льный язы́к программи́рования - как правило, язык программирования, который был разработан специально как инструментмультипарадигмального программирования, то есть изобразительные возможности которого изначально предполагалось унаследовать от нескольких, чаще всего неродственных языков.
- Эзотерический язык программирования - язык программирования, разработанный для исследования границ возможностей разработки языков программирования, для доказательства потенциально возможной реализации некой идеи (так называемое «доказательство концепции», англ. proof of concept), в качестве произведения программного искусства, или в качестве шутки (компьютерного юмора).
Все языки программирования делятся на две группы: декларативные и императивные
.
Программа на императивном языке программирования с математической точки зрения представляет собой общее решение поставленной задачи, иными словами, ответ на вопрос «как делать?». Это последовательность команд, которые должен выполнить исполнитель.
Программа на декларативном языке программирования является сочетанием формализованной в рамках языка программирования задачей и всех необходимых для её решения теорем, проще говоря, ответ на вопрос «что делать?». Конкретную последовательность выполняемых действий выполняет компилятор, или чаще интерпретатор – программа, в реальном времени выполняющая код программы без его преобразования в машинный код.
HTML - язык разметки гипертекста, который сделал интернет таким, каким мы его знаем и любим. Именно благодаря этому замечательному инструменту сайты выглядят красиво и современно, а также обеспечивается удобство их использования. Язык HTML просто компонует элементы веб-страницы в удобный для пользователя вариант. Его работа сравнима с тем, что делают типа MS Word или OpenOffice. Они превращают безликую массу букв в документ, в котором есть абзацы, жирный текст, курсив, таблицы и даже изображения. Примерно то же самое делает язык HTML, с той лишь разницей, что его документы отображаются в браузере, да и возможности этого инструмента гораздо шире, чем у текстового редактора. Для разметки используются теги — специальные команды, описывающие структуру веб-страницы. Они заключены в угловые скобки - , чтобы браузер мог отличить их от общей массы текста. Далее мы рассмотрим основы HTML для начинающих.
Визуальные редакторыНовички, только ступившие на путь изучения HTML, часто начинают свою работу с программ, позволяющих создавать сайты без каких-либо знаний. В них можно просто расположить элементы на экране так, как они будут отображаться в браузере. Казалось бы, вот он — источник вечной благодати, позволяющий избавиться от большинства веб-разработчиков. Но не всё так просто, так как у визуальных редакторов есть масса недостатков, которые делают невозможным их использование в серьёзных проектах.
Все эти программы создают много ненужных тегов, которые делают конечный вариант страницы громоздким и неоптимальным. Конечно, в наш век скоростного интернета это имеет меньшее значение, чем раньше, но есть ряд причин, по которым лаконичный и грамотно написанный сайт получается более практичным, чем его собрат, созданный в визуальном редакторе. Веб-страница, сделанная в такой программе, будет плохо обрабатываться поисковыми роботами, так как для них важен каждый килобайт кода, а громоздкий и нелогичный код с кучей едва ли придётся им по вкусу. Помимо этого, редакторы часто отстают от времени, становясь неактуальными, а тратить ресурсы на их развитие нецелесообразно, так как ни один профессионал не пользуется этими продуктами. Поэтому каждый, кто хочет работать в сфере создания сайтов, должен знать основы HTML.
ТегиКак упоминалось выше, теги описывают браузеру структуру веб-страницы. Большинство из них имеют открывающий и закрывающий тег, но далеко не все. Например, ..., где вместо точек находится содержимое. Первый из них показывает, где начинается тег, а второй закрывает его. Внутри могут находиться другие элементы разметки страницы, они могут вкладываться друг в друга подобно матрёшке. Тут важно своевременно закрывать теги, чтобы страница отображалась корректно.
Встречаются также одиночные теги, которые не нужно закрывать. В них содержимое находится внутри, так же как и может быть прописан для большинства HTML-тегов и задаёт свойства элемента. Обозначается он в открывающем теге и выглядит примерно так: атрибут=«...», где вместо точек находится значение атрибута. Знание тегов является первым и самым важным шагом для освоения HTML. Основы этого искусства также подразумевают понимание структуры веб-страницы.
Структура документаКаждый документ HTML имеет соответствующее расширение, например, Index.html. Так браузер сможет понять, с чем он имеет дело, и правильно отобразит страницу. Все файлы, используемые для создания сайта, желательно хранить в одной директории, что в дальнейшем существенно облегчит вам жизнь. Основы языка разметки гипертекста HTML предполагают чёткое понимание структуры документа. Начинается он с тега , сообщающего браузеру версию HTML, которая используется в этом документе. На данный момент актуальна пятая версия языка, так что тут не нужно ничего выдумывать, можно смело вставлять приведённый выше тег в начало любой страницы.
Потом идут основные парные структуры, составляющие «скелет» сайта. Первый тег, в который вложены все остальные — .... Всё, что находится за его пределами, не распознаётся браузером как веб-страница, так что он открывает документ и закрывает его. Этот тег является обязательным для любого документа. В нём также содержатся ещё несколько обязательных тегов, которые будут рассмотрены ниже.
HeadВнутри тега ... содержится информация технического характера, которая не будет отображаться на странице, но, тем не менее, является важной частью документа HTML. Основы сайта закладываются именно в этом месте, здесь выбирается кодировка и вводится название страницы. Оно содержится внутри обязательного тега .... Отображается название в верхней части браузера, где также можно разместить небольшую иконку, характеризующую содержимое страницы. Желательно сразу указать кодировку документа для его корректного отображения. Это можно сделать при помощи тега . Метатеги предоставляют данные о структуре страницы и обычно располагаются внутри head.
LinkЗнание основ HTML также предполагает использование каскадных стилей оформления, или css. В них задаются свойства элементов, которые будут отображены на странице. Современный подход к этой задаче предполагает вынесение таких характеристик, как цвет, высота и местоположение элемента, во внешний файл для большего удобства. Для подключения css-файла используется тег . В готовом виде это выглядит примерно вот так: , где href указывает на местоположение файла, а type - на его тип.
BodyИменно в этой части HTML-документа создаётся видимая часть страницы. Всё, что делается внутри «тела», будет показано браузером. В используется огромное количество тегов HTML. Основы — это форматирование текста, работа со ссылками и простейшие инструменты для структурирования веб-страницы. Чтобы приступить к работе в HTML, достаточно знать основные теги и уметь ими пользоваться. Ниже приведены самые популярные из них:
- - применяется для выделения подстроки, на которую будет распространяться особый стиль, описанный в css;
- - создаёт ссылку на веб-странице; адрес перехода задаётся атрибутом href;
- - один из популярнейших тегов современности; каждый, кто решил изучить основы языка HTMLl, должен уделить ему особое внимание, поскольку это блочный элемент, на основе которого сделана львиная доля современных сайтов (параметры для блоков задаются в css, и внутри этого тега могут располагаться другие блоки);
Выделяет абзац из текста; содержимое абзаца находится между открывающим и закрывающим тегами;
- - нумерованный список, элементы которого заключаются в парный тег
- - маркированный список, в котором, так же как и в нумерованном, элементы обозначаются тегом
- - - заголовки документа (цифра обозначает уровень заголовка, то есть - главный заголовок, а последующие варианты являются его подзаголовками, кстати, заголовки уровней , почти невозможно встретить на просторах интернета), также важно помнить, что на странице может быть лишь один заголовок ;
- - жирный текст;
- - курсив;
- - вставка картинки на интернет страницу (это единичный тег, ему не требуется закрывающий, но в нём обязательно нужно указать атрибут alt, в котором указывается текст для изображения);
- - вставка видео на веб-страницу;
- - тег, вставляющий в документ аудио файл.
Это далеко не все теги, необходимые для создания собственной веб-страницы, но их вполне достаточно, чтобы заложить основы HTML для начинающих.
CSSРазвитие языка HTML привело к тому, что каждый тег обзавёлся массой атрибутов, да и требования к внешнему виду веб-страниц существенно возросли. Код стал громоздким и неудобным, сложно было прочитать его, не то что адаптировать или изменить. К тому же, если на вашем сайте десять страниц, на которых много заголовков, отмеченных зелёным цветом, а вам вдруг захотелось сделать их красными, то придётся попотеть, изменяя каждый вручную. С появлением каскадных таблиц стилей этот процесс стал простым и логичным, да и HTML-код стал куда более читаемым.
Применение CSSДля создания веб-страниц необходимо знать основы HTML и CSS, так как сейчас без знания каскадных таблиц стилей делать в этой сфере нечего. В них задаются атрибуты для любого элемента, распространяющиеся на весь документ. Таким образом, можно задать цвет сразу для всех элементов
Для того чтобы подключить файл css к документу, существует тег link. Чуть выше был описан принцип его использования, но он не является единственным вариантом объединения всех стилей в одном месте. Есть ещё тег , который располагается в «голове» документа и позволяет прописать стили, не используя файлы CSS. Не обязательно пользоваться либо одним методом, либо другим. Их можно успешно комбинировать для получения наилучшего результата. Для создания файла с таблицами стилей нужно создать файл с расширением.css, например, Styles.css.
JavaScriptНередко человек, решивший заняться понимает, что для его задач недостаточно тех средств, которые предлагает HTML. Основы позволят создать красивую страницу, но что делать, если вдруг понадобилось сделать её интерактивной? Для этих целей существует уникальный программирования, который прекрасно взаимодействует с HTML. Называется он JavaScript, так как задумывался как младший брат популярного языка Java. Сегодня эти языки обзавелись существенными различиями, и пропасть между ними только растёт.
JavaScript может расширить возможности HTML, он позволяет создавать и редактировать теги. Также при помощи этого замечательного инструмента можно работать с Cokie, загружать данные с сервера, не перезагружая страницу, сделать сайт более интерактивным, чем позволяют возможности HTML. Есть у этого языка и ограничения, которые связаны с безопасностью. Если JavaScript используется не на серверной части, то он будет выполняться в условиях, ограничивающих его возможности, дабы злоумышленники не могли задействовать вредоносный код на любом компьютере.
РедакторыОсновы HTML для новичка предполагают знания о наиболее удобных и практичных программах для создания веб-страниц. Как было написано выше, визуальные редакторы, такие как Dreamweaver и ему подобные, не подходят для этих целей. Так что же, писать теги в обычном блокноте? Этот вариант также сомнителен, так как стандартный блокнот не располагает никакими специальными инструментами для вёрстки. С этой задачей может неплохо справиться Notepad++. Большой плюс этого продукта в том, что он имеет открытый код и распространяется абсолютно бесплатно. В нём присутствует удобная подсветка синтаксиса и автоматическое закрывание тегов. Notepad++ также предоставляет широкий выбор языков интерфейса, а его возможности легко расширяются при помощи многочисленных дополнений.
Sublime Text 3 — программа, похожая на Notepad++, но распространяющаяся на платной основе. Именно она покорила сердца большинства разработчиков. Sublime Text 3 идеально подходит для JavaScript, CSS и HTML. Основы работы с ней придётся изучать самостоятельно, но оно того стоит. В ней заложены воистину безграничные возможности для тонкой настройки, что позволяет максимально подогнать программу под свои нужды.
Основы HTML и CSS для начинающихКак видите, изучить искусство создания веб-страниц не так уж и сложно, как кажется на первый взгляд. Всего несколько месяцев практических занятий превратят вас из робкого пользователя в начинающего разработчика. Научиться вёрстке гораздо проще, чем освоить какой-нибудь язык программирования или Linux. На самом деле тегов HTML не так уж и много, важно понять практический аспект их применения.
Не лишним в этом деле будет навык работы в Adobe Photoshop. Эта программа позволяет работать с фотографиями, картинками и прочими графическими элементами веб-страницы. На данный момент именно "Фотошоп" лучше всего справляется с такими задачами, конкурентов у него немного. Для тех, кому этот продукт компании Adobe пришёлся не по нраву, есть Lightroom, GIMP, Illustrator и другие программы с похожими функциями.
Что даёт знание HTMLНавыки создания веб-страниц очень актуальны сегодня, так как интернет расширяется не по дням, а по часам. Каждое предприятие, любой, даже самый маленький магазинчик, мастерские и спортивные клубы — все хотят иметь собственный сайт. И конечно же, для этого им понадобится разработчик, владеющий CSS и HTML. Основы просто освоить, после чего дело за практикой. Так как технологии вёрстки постоянно развиваются, то фронтенд-разработчики всегда будут востребованы. Тот, кто решит посвятить себя этой интересной отрасли, никогда не останется без работы.
HTML (от англ. HyperText Markup Language - язык гипертекстовой разметки) - стандартный язык разметки документов в сети интернет. Является, по сути, главным и единственным языком для построения веб-страниц, который умеет вмещать скрипты и элементы других языков: Java, php, CSS и др.
Хотя теоретическую часть изучения этого языка можно познать за какие-то 2-3 месяца, практические навыки обычно разрабатываются всю жизнь, ведь это один из самых динамичных языков программирования, который постоянно развивается, дополняется и модернизируется, тем самым принуждая веб-программиста улучшать свои навыки.
Любой пользователь может в реальном времени узнать, на каком языке написана страница в сети: нужно кликнуть ПКМ по пустому пространству и выбрать "Просмотр кода страницы" - языки страницы будут находиться в тегеЧтобы понять, HTML 5, нужно разобраться в том, чем является язык XHTML...
XHTML - подобный языку HTML язык разметки веб-страниц, чаще всего используемый для построения сложных веб-приложений, но обладающий намного более сложным синтаксисом и чувствительностью к ошибкам. Когда говорят о важности структуры документа, то всегда упоминают XHTML, а не HTML.
Изучение XHTML не займет намного больше времени, чем изучение HTML, однако его эффективность на фоне появления нового языка - HTML 5 - заметно падает.
Когда умные ребята, которые всю жизнь изучали языки веб-программирования, поняли, что постоянное метание между простым для глаза HTML и сложным, но правильным XHTML просто надоедает - они решили создать нечто универсальное, что-то, что будет содержать синтаксические разметки и того и другого языков, при этом не будет терять качества. Так и был создан HTML 5, который официально находится в стадии разработки, но, по сути, является рабочим стандартом (англ. HTML Living Standard).
Прежде чем приступить к изучению чего-то и трате своего времени, нужно определиться с целями. Если цель - сверстать пару страниц или сделать сайт-визитку, то вряд ли потребуется даже покупка учебников: хватит одного-двух месяцев усердной работы с использованием интернет-ресурсов по изучению HTML и CSS (Таблицы каскадных стилей - язык описания внешнего вида документа), и сайт будет готов.
Если же человек хочет заняться веб-программированием и познать тонкости ручной верстки, то времени он потратит примерно в 10-15 раз больше. Дабы понять синтаксис всех языков типа SGML, нужно будет изучить сначала XML (язык структурирования веб-документов со сложным синтаксисом), потом заняться изучением HTML 5 и попутно (так как эти два языка неразлучны) заняться изучением CSS, а в конце "залить" все это хорошим Java.
Многие ошибочно предполагают, что для успешной разработки веб-ресурсов требуется знать 1-2 языка. Это не так. Знание такого малого количества языков делает веб-программиста "неповоротливым" - неспособным мыслить креативно.Чтобы преуспеть в веб-программировании, требуется сила воли. Ну, и следованием советам не помешает.
Начинать изучение языков программирования стоит с теории этих языков - сначала будущему "верстальщику" нужно разобраться в концепции этих языков, в их функциях, узнать, в между HTML и XML и т.д.
В процессе изучения необходимо использовать медиа-ресурсы: сегодня существует множество образовательных сайтов, на которых информация представлена в удобоваримом виде, а, следовательно, изучение языка будет приносить не только пользу, но и удовольствие.
Практика. После изучения "теоретической базы", нужно незамедлительно приступать к практике - блокнот или редактор типа Notepad++ должен быть открыт на компьютере 24 часа в сутки.
Язык программирования - так же, как английский или французский - не будет развиваться, если его не практиковать.
Reg.ru: домены и хостинг
Крупнейший регистратор и хостинг-провайдер в России.
Более 2 миллионов доменных имен на обслуживании.
Продвижение, почта для домена, решения для бизнеса.
Более 700 тыс. клиентов по всему миру уже сделали свой выбор.
*Наведите курсор мыши для приостановки прокрутки.
Назад Вперед
HTML, CSS, PHP, JavaScript, SQL – что и зачем?В этом материале я хочу обзорно рассмотреть назначение основных языков программирования и разметки, применяющихся в веб-разработке.
Идея написать эту статью родилась не спонтанно, а под влиянием часто повторяющихся вопросов, которые мне присылают в письмах и задают в службе поддержки.
Это вопросы следующего плана:
В каком порядке надо изучать языки создания сайтов?
- Что сложнее: JavaScript или PHP?
- Зачем нужен язык SQL?
- Чем отличаются версии CSS друг от друга, и какую из них следует изучать?
- Как работаю динамические сайты?
- Для чего нужен PHP?
и т.д…В данной статье я расскажу о роли каждого из названных языков в создании сайтов и, уверен, что подавляющее большинство общих вопросов отпадет у вас само собой.
В этом материале почти не будет примеров кода, т.к. перед нами стоит другая задача – получить общее представление о назначении каждого из языков и его месте в веб-разработке.
Итак, поехали. Начнем мы с языка HTML.
Расширения файлов: .htm , .html
HTML - это язык разметки гипертекста (от англ. HyperText Markup Language ).
Данный язык применяется для создания веб-страниц. Он интерпретируется (обрабатывается) браузером и отображается в виде документа в удобной для человека форме.
HTML – это неотъемлемая составляющая и основа практически любой веб-страницы. Язык HTML в первую очередь выступает как средство логической разметки страницы .
Именно HTML позволяет нам наделять содержимое страницы определенным смыслом, а реализуется это с помощью так называемых тэгов.
Тэги – это специальные маркеры, которые определенным образом интерпретируются браузером. Суть тэгов в том, что содержимое страницы, заключенное в разные тэги, по-разному обрабатывается браузером.
Скажем, мы можем заключить контент (содержимое) страницы в тэг параграфа, и данное содержимое будет считаться браузером параграфом.
Мы можем заключить содержимое в тэг списка, и тогда информация внутри него будет интерпретироваться как список.
Мы можем поместить контент в тэг таблицы, и содержимое в итоговом документе будет отображаться в виде таблицы и т.д.
Иными словами, каждый из HTML-тэгов, предназначенных для разметки текстовой информации, придает этой информации некоторый смысл .
Язык HTML имеет достаточно длительную историю развития, и за это время претерпел значительные изменения. Большая часть изменений связана с добавлением в язык новых тэгов и «выводом из обращения» устаревших. На момент написания этой статьи уже была начата разработка версии HTML 5.1.
Для разных версий HTML предусмотрено разное объявление типа документа . Рассмотрим с вами пару примеров объявления типа HTML 4.01 (на данный момент его можно считать уже устаревшим).
1. Строгий (Strict) : не содержит элементов, помеченных как «устаревшие» или «не одобряемые» (deprecated):
2. Переходный (Transitional): содержит устаревшие теги в целях совместимости и упрощения перехода со старых версий HTML:
3. С фреймами (Frameset): аналогичен переходному, но содержит также теги для создания наборов фреймов:
Объявления типов документов, приведенные выше, со временем будут все больше уходить в прошлое, уступая место версии HTML 5.
В HTML 5 используется только один вариант DOCTYPE (тип документа):
Также следует упомянуть о том, что существует еще и язык XHTML . Это расширяемый язык разметки гипертекста (от англ. Extensible Hypertext Markup Language ). На данный момент его развитие остановлено и рекомендуется использовать HTML. Новые версии XHTML не выпускаются.
В заключение хочу отметить также тот факт, что средствами HTML все же можно управлять не только логической структурой веб-страниц, но и некоторыми аспектами ее внешнего вида.
Однако такой подход считается неверным и устаревшим, т.к. для задания внешнего вида существует отдельный язык.
На этом с HTML мы завершаем и переходим к языку CSS.
Расширение файлов: .css
CSS – это язык описания внешнего вида документа, написанного с использованием языка разметки. Название произошло от англ. Cascading Style Sheets - каскадные таблицы стилей.
Проще говоря, язык CSS предназначен для того, чтобы придавать необходимый внешний вид HTML-документам.
Придание внешнего вида документам HTML – это хоть и самый популярный, однако лишь частный случай применения языка CSS, т.к. с его помощью можно придавать вид и документам других типов: XHTML, SVG и XUL . Про них мы отдельно говорить не будем, т.к. это выходит за рамки рассматриваемого вопроса.
Итак, целью создания CSS было отделение описания логической структуры веб-страницы от ее внешнего вида . Как вы уже знаете, для описания структуры используется HTML, для описания же того, как эта логическая структура будет выглядеть, отвечает как раз CSS.
Раздельное описание логической структуры и представления документа позволяет более гибко управлять внешним видом документа и минимизировать объем повторяющегося кода , который бы неизбежно возникал при использовании HTML для описания внешнего вида документа.
С помощью CSS веб-разработчик может задавать для страницы и отдельных ее элементов различные гарнитуры и размеры шрифта, цвета элементов, отступы элементов друг от друга, расположение отдельных блоков на странице и т.д.
Разумеется, для того, чтобы использовать CSS для придания внешнего вида HTML-документу, нужно этот документ как-то связать со стилями, т.е. «сообщить» HTML-документу, что он будет оформлен с помощью CSS.
Для этого существуют различные способы подключения CSS к документу, которые дают браузеру знать, что к странице в целом, либо к каким-то отдельным ее элементам должно быть применено стилевое оформление.
Таблицы стилей могут располагаться как непосредственно внутри того, документа, к которым они будут применяться, так и находиться в отдельном файле, имеющем расширение .css .
Важно понимать, что CSS-файл – это обычный текстовый файл . В нем пишутся специальные инструкции, описывающие внешний вид элемента и его позиционирование на странице а также комментарии (произвольные пояснения относительно написанных инструкций).
Стили CSS могут быть подключены к странице (либо внедрены в нее) четырьмя следующими способами:
1. Если таблица стилей находится в отдельном файле, то она подключается к документу с помощью специального тэга link , который должен располагаться в этом документе внутри тэга head :
В атрибуте href при этом указывается путь до подключаемого файла стилей.
2. Второй способ подключения применяется также в том случае, если стили находятся в отдельном файле. При этом используется директива @import , которая должна находиться в этом документе внутри тэгов style head ):
@import url(style.css);
Здесь, как вы можете видеть, путь до подключаемого файла указывается в круглых скобках после слова url .
3. Третий способ используется в случае, когда стили CSS расположены внутри того документа, к которому они должны применяться. В этом случае стили должны находиться в этом документе внутри тэгов style (которые, в свою очередь, должны находиться внутри тэгов head ):
body { color: red; }
В примере выше внутри тэгов style расположен стиль, задающий красный цвет текста для элемента body веб-страницы.
4. Четвертый способ также применяется в случаях, когда таблица стилей описана в самом документе. При этом стилевое оформление задается для какого-то конкретного элемента веб-страницы (тэга) посредством использования его атрибута style .
При этом все CSS-правила, заданные таким образом, будут применяться только к текущему тэгу (элементу веб-страницы).
Используем встроенные таблицы стилей.
В примере выше мы задаем размер шрифта и его цвет для одного конкретного абзаца текста в рамках документа.
Подводя итог по способам подключения стилей, можно сказать, что в первых двух случаях к документу применялись внешние таблицы стилей , в то время как в 3 и 4 способах мы имеем дело со встроенными (или внутренним) стилями.
Сами стилевые правила задаются в виде пар «свойство: значение;» . При этом применяются эти правила к так называемым селекторам. Скажем, в 3 примере мы имеем дело с селектором элемента (body ). В качестве свойства выступает color , а в качестве значения – red .
Всего существует 10 видов селекторов, рассмотрение которых, по понятным причинам, выходит за рамки данного обзора.
Важно, чтобы вы понимали общий принцип.
Селектор определяет один или группу элементов, к которым будут применяться стилевые правила (в нашем случае это все содержимое тэга body )
Свойство можно определить как вид преобразования, которое будет применено к элементу (в нашем случае это color , т.е. цвет текста).
Значение же определяет непосредственно значение определенного вида преобразования (в нашем примере это red , т.е. красный цвет).
В процессе своего развития язык CSS уже прошел достаточно длинный путь, и в настоящее время существует несколько его уровней: CSS1, CSS2, CSS2.1, CSS3. C конца 2011 года разрабатывается уже CSS4.
Смысл разных уровней в том, что происходит исправление существующих ошибок, добавление новых свойств, расширение механизма селекторов и т.д.
Иными словами, каждый следующий уровень является не чем-то обособленным, а логическим развитием и продолжением предыдущего уровня, позволяя более тонко и гибко управлять внешним видом web-страниц.
На этом обзор CSS мы заканчиваем и переходим к следующему звену – языку PHP.
Расширение файлов: .php
Когда вы уже хоть немного разобрались с HTML и CSS, то сразу возникает вопрос: «А что же дальше?» . Вы же хотели создавать классные сайты, а с помощью HTML и CSS сделать этого ну никак не получается…
Здесь вам нужен уже язык совершенно другого типа и назначения.
PHP на протяжении многих лет стабильно находится с списке наиболее популярных языков программирования и веб-разработки.
Что же такое PHP?
PHP расшифровывается как Hypertext PreProcessor (что-то вроде "преобработчик HTML").
Что это означает? Начнем немного издалека: есть два типа языков. Один тип называется "клиентским" , а другой - "серверным" .
Это значит, что клиентские языки работают в браузере каждого конкретного человека. Типичным представителем клиентских языков является JavaScript, о котором Вы наверняка слышали.
Все действия и команды, которые мы задаем, скажем, на языке JavaScript, выполняются браузером (для упрощения мы не рассматриваем серверный JavaScript).
Это означает, что один и тот же код, написанный нами, обрабатывается в одном случае браузером Internet Explorer, в другом - Firefox, в третьем - Opera, в четвертом - Google Chrome, т.е. тем обозревателем, который использует каждый конкретный человек для просмотра нашей страницы.
Браузер, таким образом, имеет альтернативное название - клиент .
В случае с серверными языками (к которым и относится PHP) мы наблюдаем другую картину.
Наш сайт всегда расположен на каком-либо сервере, т.е. мощном компьютере, специально предназначенном для размещения на нем сайтов многих людей.
Все команды и скрипты, написанные на языке PHP, выполняются именно на сервере , и никак иначе. После того, как PHP-скрипт выполнится на сервере, сервер "отдает" результат своей работы браузеру, который преобразует этот результат в удобный для нас вид.
Здесь важно понимать следующий момент: по исходному коду веб-страницы, который можно посмотреть в любом браузере через опцию вроде "Исходный код страницы" нельзя определить, использовался ли язык PHP для создания данной страницы, или нет.
Невозможно это сделать как раз потому, что PHP-скрипты обрабатываются на сервере, а в браузер передается уже готовый, обработанный вариант . По сути, только HTML-код.
Разница по сравнению с обычными статичными HTML-страницами заключается в одном дополнительном этапе обработки кода.
В случае с HTML-страницей есть только один этап: браузер обрабатывает HTML-код, т.е. разметку страницы в соответствии с определенными правилами, в результате чего мы и видим веб-страницу в нормальном виде.
В случае с PHP-страницей есть два этапа: сначала так называемый PHP-интерпретатор (обработчик) производит выполнение PHP-кода (в результате этого получается простой HTML-код), а после этого уже браузер обрабатывает результат этой обработки, т.е., по сути, выполняется тот самый этап, который является единственным в случае с HTML-страницей.
Вообще PHP прекрасно работает в паре с HTML . Более того, в HTML-код можно делать вставки PHP-кода, а с помощью PHP выводить HTML-разметку.
Важно запомнить следующий простой момент: Не имеет значения, насколько сложен Ваш PHP-код, в конечно итоге "на выходе" он станет обычным HTML.
Для чего использовать PHP?
HTML на 100% статичен. Встраивая же в наши страницы PHP-код, мы можем добиться того, чтобы содержимое одной и той же страницы было различно в зависимости от определенных условий (динамические страницы).
За долгие годы своего существования язык PHP зарекомендовал себя как великолепное решение для создания динамических веб-сайтов.
Что нужно, чтобы начать работать с PHP?
Для полноценной работы с PHP на Вашем компьютере нужны следующие вещи:
1. Веб-сервер Apache (он используется в большинстве случаев);
2. Система Управления Базами Данных (СУБД) MySQL (в базе данных хранится наполнение сайта);
3. Установленный интерпретатор PHP;
4. Текстовый редактор, в котором Вы будете писать код;
5. Браузер.Теперь чуть подробнее о первых трех пунктах.
1. Веб-сервер предназначен для имитации на Вашем компьютере того самого сервера, на котором потом будет размещаться Ваш сайт уже на хостинге в Интернет. Это нужно для того, чтобы у себя на компьютере Вы могли писать любые PHP-скрипты и смотреть, как они работают, вносить в них изменения и правки. Одним словом, это необходимо для так называемой отладки.
2. СУБД MySQL нужна для хранения информации, которая будет на Вашем сайте. В случае с HTML-страницами все содержимое сайта находится непосредственно в них. Каждая страница содержит определенный объем информации (контента).
При использовании PHP для целей хранения полезного информационного наполнения сайта используется, как правило, база данных. В подавляющем большинстве случаев это MySQL.
3. Интерпретатор PHP - это своеобразная программа, которая осуществляет обработку PHP-кода на веб-сервере. Без него мы никак не сможем выполнить наши PHP-скрипты и увидеть результат их работы.
Для того чтобы сообщить веб-серверу о том, что должна быть произведена обработка PHP-кода, необходимо использовать следующий синтаксис при добавлении PHP в HTML-документ:
В этом случае веб-сервер, дойдя до открывающего тэга PHP ( ) интерпретатор PHP прекращает свою работу.
Вернемся теперь к роли PHP в создании сайтов.
Представим для начала, что у нас есть простой статичный сайт, написанный на языке HTML. Он состоит из ряда страниц и представляет собой просто набор неизменных файлов.
На таком сайте нет возможности создать форму обратной связи, комментарии, регистрацию пользователей, поиск и т.д.
Кроме того, у такого сайта не может быть панели управления, из которой мы могли бы добавлять новые страницы, либо редактировать и удалять уже существующие.
При использовании только языка HTML мы сильно ограничены в создании действительно удобных и функциональных сайтов , поскольку мы не имеем никаких «рычагов управления» каждой конкретной страницей.
Все, что мы можем – это вручную открыть отдельную HTML-страницу в редакторе кода и как-то ее модифицировать.
Использование же языка PHP позволяет нам создавать действительно мощные сайты благодаря тому, что мы можем продумывать и реализовывать «поведение» нашего сайта .
Иными словами, мы можем сделать так, чтобы наш сайт вел себя по-разному в разных ситуациях , действуя по прописанным нами алгоритмам в зависимости от выполнения или невыполнения определенных условий.
Возможность задания нужной нам логики «поведения» сайта является одной из важнейших и наиболее ценных в языке PHP.
Наряду с уже озвученными преимуществами следует упомянуть, что PHP предоставляет нам множество инструментов для работы с данными различных типов.
Чаще всего приходится иметь дело с текстовыми данными и данными, представленными в виде массивов. Для облегчения этих задач в PHP предусмотрены многочисленные функции, позволяющие с легкостью манипулировать любой информацией .
Помимо этого, язык PHP позволяет нам работать с файлами и папками . Мы можем его средствами создавать, редактировать и удалять файлы и папки. Мы можем перемещать и переименовывать их и выполнять множество других операций.
Конечно же, нельзя обойти стороной и такой важный момент, как возможность использования PHP для организации более удобного взаимодействия пользователя с сайтом.
Это такие вещи, как:
Форма обратной связи;
- возможность комментирования;
- регистрация пользователей;
- поиск по сайту;
- запоминание введенной пользователем информации (по принципу «покупательской тележки»); и т.д.И, разумеется, PHP активно используется для создания самых разных панелей администратора, откуда вы можете просто и удобно управлять своим сайтом.
Добавление новых материалов, редактирование категорий, модерирование комментариев, изменение пунктов меню сайта, управление настройками – все это и многое-многое другое можно реализовать средствами PHP.
Резюмируя обзор по языку PHP, можно сказать, что следующим шагом после освоения HTML и CSS должно быть изучение языка PHP, т.к. именно он позволит вам перейти на принципиально иной уровень в создании сайтов.
С PHP мы заканчиваем и переходим к еще одному языку – JavaScript.
Расширение файлов: .js
JavaScript – это язык программирования, нашедший наиболее широкое применение в браузерах для придания интерактивности веб-страницам.
Важно понимать, что это далеко не единственная область применения JavaScript, однако в рамках нашей темы наиболее уместно рассматривать именно такой вариант использования этого языка.
Основной задачей JavaScript в рассматриваемом нами контексте является манипулирование элементами DOM-модели web-страницы.
Давайте разберемся с тем, что же такое DOM .
DOM – это объектная модель документа (от англ. Document Object Model ).
Согласно DOM, документ (например, веб-страница) может быть представлен в виде дерева объектов, обладающих рядом свойств, которые позволяют производить с ним различные манипуляции:
Получение узлов;
- изменение узлов;
- изменение связей между узлами;
- удаление узлов.Именно эти манипуляции и позволяет нам осуществлять над элементами страницы язык JavaScript.
Для добавления JavaScript-кода на страницу можно использовать тэг script . Его рекомендуется помещать внутри тэга head , хотя это и не обязательно.
Контейнеров script в одном документе может быть сколько угодно. При этом атрибут «type="text/javascript"» указывать необязательно, т.к. значение javascript является значением по умолчанию.
Ниже приведен пример скрипта, выводящего так называемое модальное окно с классической надписью «Hello, World!» внутри браузера:
alert("Hello, World!");
Располагать JavaScript-код можно и внутри тэга. Спецификация HTML описывает набор атрибутов, используемых для задания обработчиков событий. Рассмотрим такой пример:
Удалить
При этом при отрицательном ответе (т.е. «нет», если мы не уверены) происходит блокировка перехода по ссылке.
Обратите внимание, что такая практика использования JavaScript не считается хорошей.
Правильным вариантом применения JavaScript был бы такой подход. Сперва мы снабжаем идентификатором (id="alertLink" ) ссылку:
Удалить После этого пишем следующий код в отдельном JavaScript-файле (как его подключить к документу будет показано чуть ниже): window.onload = function() { var linkWithAlert = document.getElementById("alertLink"); linkWithAlert.onclick = function() { return confirm("Вы уверены?"); }; };
В этом примере мы создаем функцию, срабатывающую при загрузке веб-страницы. Эта функция находит элемент с идентификатором alertLink и отслеживает событие клика по нему (т.е. по ссылке «Удалить»).
По событию клика мы выводим модальное окно с уже знакомым нам сообщением.
Возможно, данный пример покажется вам немного сложным, если вы ничего не знаете о JavaScript, но на данном этапе это не так важно.
Важно, чтобы вы поняли сам принцип, подход к работе при использовании JavaScript.
И, наконец, как я и обещал чуть выше, давайте рассмотрим, как можно подключить JavaScript из внешнего файла.
Здесь ситуация очень похожа на ту, что была в случае с CSS, только вместо CSS-кода мы пишем в файле (с расширением.js) JavaScript-код, после чего подключаем его в нужный нам файл в тэге head при помощи конструкции:
После такой манипуляции нам будут доступны все функции, которые были написаны нами в JavaScript-файле.
Итак, можно сказать, что JavaScript – это язык, который позволяет вам активно управлять структурой вашей страницы, манипулировать ее элементами .
На практике это находит свое применение при создании различных анимационных эффектов, эффектов перемещения, растворения, увеличения и уменьшения объектов.
JavaScript применяется для создания различных фотогалерей , так называемых слайдеров или ротаторов контента , суть которых заключается в том, чтобы в определенном ограниченном пространстве происходило чередование различных объектов (например, изображений).
Часто JavaScript используется и для первичной проверки данных , которые пользователь вводит в формы.
Говоря о JavaScript, нельзя не упомянуть о специальных JavaScript-библиотеках (jQuery, Prototype, MooTools и др.)
Смысл JavaScript-библиотек заключается в том, чтобы предоставить кросс-браузерный интерфейс к методам DOM .
Это означает, что вы можете использовать определенные функции, уже написанные в рамках той или иной библиотеки и получать необходимый вам результат, одинаково хорошо работающий во всех браузерах.
К тому же библиотеки избавляют веб-разработчиков от необходимости изучать в деталях сам JavaScript, предоставляя ряд удобных в использовании инструментов, позволяющих с легкостью управлять объектной моделью документа.
Резюмируя, можно сказать, что JavaScript может стать «изюминкой» вашего сайта, причем как в плане его украшения, так и в плане дополнительного функционала, который можно обеспечить с помощью данного языка.
С JavaScript у нас все, и мы переходим к последнему языку – SQL
Расширения файлов: .sql
SQL – это информационно-логический язык, предназначенный для описания, изменения и извлечения данных, хранимых в реляционных базах данных.
Для того чтобы лучше разобраться с этим определением, мы начнем с самых основных понятий, без которых дальше идти просто бессмысленно.
Для чего вообще нужна база данных?
Сейчас, при разработке серьезных веб-приложений, практически всегда используются базы данных. В них хранится информация, необходимая для работы сайта - начиная от самого содержимого (контента), и заканчивая логинами и паролями пользователей и различными настройками сайта.
Несмотря на то, что в базе данных можно хранить не только текстовую информацию, но и, скажем, картинки, какие-то документы и т.д, как правило она все же используется именно для хранения текстовой информации, а информация другого типа хранится в виде файлов.
Базы данных имеют ряд преимуществ по сравнению, например, с хранением текстовой информации в файлах:
1. Высокая скорость получения информации;
2. Они позволяют получать произвольный доступ к данным. (т.е. легко обратиться к какой-то одной, конкретной записи в базе);
3. Из базы данных можно извлекать данные, соответствующие определенным критериям, которые нас интересуют;
4. Применение базы данных позволяет нам не беспокоиться о параллельном доступе к данным. Т.е. для нас в этом случае не важно, что одну и ту же запись одновременно могут затребовать несколько десятков человек.
Если бы мы имели дело с файлами, то нам пришлось бы намного сложнее.
Поэтому, параллельный доступ к данным - одно из важнейших преимуществ баз данных.
Отличие базы данных от СУБД
Важно различать термины "база данных" и "система управления базами данных" (СУБД) .
База данных - это информация, которую мы храним и структура этой информации, в то время как СУБД - это программа, которая предоставляет внешним приложениям доступ к базам данных.
База данных - это вещь, которую мы самостоятельно проектируем для каждого конкретного проекта, задавая ее структуру исходя из функций нашего будущего приложения.
СУБД же выбирается нами из определенного ограниченного списка (Oracle, MySQL, PostgreSQL и т.д.)
Чаще всего можно встретить связку PHP + MySQL . В большинстве случаев вы также будете работать именно с ней.
Рассмотрим теперь понятие реляционной базы данных .
На сегодняшний день так называемые реляционные базы данных являются самыми популярными.
Реляционные базы данных - это базы данных, состоящие из таблиц.
Само же слово "реляционные" происходит от англ. relation - отношение.
Под "отношением" понимается связь между различными таблицами, входящими в базу данных.
Что характерно, таблицы в базе данных - это действительно обычные таблицы, которые по своей сути идентичны любым таблицам, с которыми вы сталкивались в жизни - начиная от таблицы умножения, и заканчивая таблицами в Microsoft Excel .
Таблица имеет некоторое ограниченное количество столбцов (как правило, небольшое) и сколь угодно много строк.
Каким образом можно вставлять новые данные в базу, изменять их, удалять и производить иные манипуляции?
Для этого и существует специальный язык SQL (от англ. Structured query language - язык структурированных запросов).
Т.е. SQL - это универсальный компьютерный язык, разработанный именно для управления реляционными базами данных.
С его помощью мы можем выполнить практически любую операцию: начиная от создания базы данных и заканчивая выборкой из базы любого набора информации.
Как правило, SQL-запросы передаются в СУБД посредством внешней программы. При этом СУБД выполняет указанный запрос и возвращает в ответ некоторый результат.
Каждая команда SQL - это либо запрос данных из базы, либо обращение к базе данных, которое приводит к изменению данных в базе. В соответствии с тем, какие изменения происходят в базе данных, различают следующие типы запросов:
Запросы на создание или изменение в базе данных новых или существующих объектов (при этом в запросе описывается тип и структура создаваемого или изменяемого объекта);
- запросы на получение данных;
- запросы на добавление новых данных (записей)
- запросы на удаление данных;
- обращения к СУБД.Таким образом, язык SQL является тем связующим звеном, которое обеспечивает взаимодействие веб-приложения с базой данных и хранящейся в ней информацией.
Язык SQL сложно назвать простым, и полноценное его использование потребует от вас достаточно больших усилий по его изучению.
Именно поэтому во многих инструментах веб-разработки (к примеру, во фреймворке CodeIgniter) взаимодействие сайта с базой данных реализовано с помощью своеобразной «надстройки», которая позволяет выполнять с ней все необходимые действия, не изучая при этом сам язык SQL.
Однако если вы не используете инструментов, подобных CodeIgniter, то для создания полноценного веб-приложения, управляемого базой данных, вам, разумеется, нужно будет освоить SQL.
Ну что ж, давайте подведем небольшой итог этого обзора.
Фундаментом веб-разработки был и остается язык HTML . Без него все остальное практически лишено смысла, ведь именно HTML-разметка преобразуется браузером в ту итоговую картину, что мы видим на экране монитора.
CSS является инструментом задания внешнего вида и позиционирования различных элементов веб-страницы, что позволяет нам гибко управлять обликом нашего веб-приложения.
PHP позволяет нам создавать мощные динамические сайты, обладающие определенной логикой поведения. PHP также дает нам практически неограниченные возможности по расширению функционала сайта.
JavaScript выступает в качестве важного, но не всегда обязательного дополнения. Он способен существенно повысить удобство использования вашего сайта и его интерактивность, добавить в него определенную «изюминку».
Наконец, SQL позволяет нам организовать взаимодействие сайта с базой данных, что и позволяет нам, в связке с языком PHP создавать действительно мощные, функциональные сайты.
С уважением, Дмитрий Науменко.
P.S. Кое-что понятно, но куда двигаться дальше? Присмотритесь к премиум-урокам по различным аспектам сайтостроения, а также к бесплатному курсу по созданию своей CMS-системы на PHP с нуля. Все это поможет вам быстрее и проще освоить веб-технологии: начиная с HTML и CSS и заканчивая JavaScript, PHP и SQL.
Понравился материал и хотите отблагодарить?
Просто поделитесь с друзьями и коллегами!Я решил уделить больше внимания новичкам, желающим приобрести знания в области сайтостроения. На это меня подтолкнула моя преподавательница, которая допускала уж очень много ошибок в методичках к лабораторным работам. Я бы с удовольствием бы глянул на тот ресурс, с которого была взята учебная инфа, и оставил бы там пару строк своего мнения. Но сейчас не об этом. В своей первой лекции я расскажу о том
Из чего состоит структура HTML-документаТег сообщает о том, что начинается структура html-документа, — что заканчивается. Между тегами хранится в большей части информация для браузера и поисковых систем. В тегах содержится заголовок нашей страницы. Тег говорит о том, что далее идёт информация предназначенная для пользователя, же естесственно говорит о том, что информация для пользователя заканчивается.
Теперь немного поясню. Все теги (тэг — элемент языка разметки гипертекста ) делятся на два типа «одиночные» и «закрывающиеся». Кроме того теги заключаются в следующие символы < и > , именно они отличают тег от обычного текста html . Рассмотрим несколько самых простых «одиночных» тегов:
— тег, который отвечает за перенос на новую строку, в том месте, где установлен данный тег. Рассмотрим код с использованием этого тега.Мой первый сайт Привет всем!
А это мой первый сайт.Результат можно посмотреть .
— тег, который рисует горизонатльную линию. Этот тег относится к блочным элементам, линия всегда начинается с новой строки. Имеет 5 атрибутов:
- align — Определяет выравнивание линии. Может принимать значение left, center, right.
- color — Задаёт цвет линии.
- noshade — Рисует линию без трехмерных эффектов.
- size — Задаёт толщину линии.
- width — Задаёт ширину линии.
Код с использованием тега :
Мой первый сайт Привет всем!А это мой первый сайт.
Визуальный пример находится .
Ещё один «одиночный» тег — это . Данный тег спользуются для хранения информации предназначенной для браузеров и поисковых систем. Поисковые системы обращаются к метатегам для получения описания сайта, ключевых слов и других данных. Разрешено использовать неограниченное число метатегов, все они должны находится между и . Параметры любого метатега имеют вид «имя=значение», который определяется ключевыми словами content , name или http-equiv . Т.к. метатеги предназначены для машин, никакого визуального изменения они не вносят, поэтому я приведу лишь исходный код:
Эта строка говорит о том, что создатель страницы считает, что на странице используется кодировка UTF-8. В HTML5 всё стало проще, для того, чтобы указать кодировку, достаточно лишь следующей строки:
Cуществуют и другие одиночные теги (, ,
, , , , , , , , , , , , , ), но с ними я познакомлю вас чуть позже.Теперь давайте поговорим о «закрывающихся» тегах. Само название «закрывающийся тег», говорит о том, что тег требует обязательного закрытия. Это сделано для того, чтобы чётко ограничить часть текста, на которую действует тег.
Для наглядного примера взглянем на тег , который используется для выделения текста, он устанавливает жирное начертание шрифта. Теги и являются границами, которые определяют область выделения текста. Вот код, где в последней строке забыли закрыть тег :
Мой первый сайт Привет всем! А это мой первый сайт.
Привет всем! А это мой первый сайт.Как видите, ничего сложного нет, теперь вы можете создать несколько страниц перелинкованных между собой.
Теги для выделения текстаСуществует несколько способов выделить текст на странице. Сделать это можно с помощью стилей, а можно с помощью тегов. Нас (пока) интересует второй вариант.
— устанавливает жирное начертание шрифта.
— устанавливает курсивное начертание шрифта.
— добавляет подчеркивание к тексту.
— предназначен для акцентирования текста. Браузеры отображают такой текст курсивным начертанием.
— перечёркивает текст. Данный тег исключён из HTML5 вместо него рекомендуется использовать
— отображает текст моноширинным текстом. Исключён из HTML5.
— отображает шрифт в виде верхнего индекса. Шрифт при этом отображается выше базовой линии текста и уменьшенного размера.
— отображает шрифт в виде нижнего индекса. Текст при этом располагается ниже базовой линии остальных символов строки и уменьшенного размера.
— предназначен для акцентирования текста. Браузеры отображают такой текст жирным начертанием.
— уменьшает размер шрифта на единицу по сравнению с обычным текстом. В HTML размер шрифта измеряется в условных единицах от 1 до 7, средний размер текста, используемый по умолчанию, принят 3. Тег уменьшает текст на одну условную единицу. Допускается применение вложенных тегов , при этом размер шрифта будет меньше на 1 с каждым вложенным уровнем, но не может быть меньше, чем 1.
— увеличивает размер шрифта на единицу по сравнению с обычным текстом. В HTML размер шрифта измеряется в условных единицах от 1 до 7, средний размер текста, используемый по умолчанию, принят 3. Таким образом, добавление тега увеличивает текст на одну условную единицу. Допускается применение вложенных тегов , при этом размер шрифта будет больше с каждым уровнем.
— используется для выделения в тексте цитат. Содержимое контейнера автоматически отображается в браузере в кавычках.
— предназначен для выделения длинных цитат внутри документа. Текст, обозначенный этим тегом, традиционно отображается как выровненный блок с отступами слева и справа (примерно по 40 пикселов), а также с отбивкой сверху и снизу.
— определяет блок предварительно форматированного текста. Такой текст отображается обычно моноширинным шрифтом и со всеми пробелами между словами. По умолчанию, любое количество пробелов идущих в коде подряд, на веб-странице показывается как один. Тег Позволяет обойти эту особенность и отображать текст как требуется разработчику.
— определяет текстовый абзац. ТегЯвляется блочным элементом, всегда начинается с новой строки, абзацы текста идущие друг за другом разделяются между собой отбивкой. Величиной отбивки можно управлять с помощью стилей. Если закрывающего тега нет, считается, что конец абзаца совпадает с началом следующего блочного элемента.
.... — HTML предлагает шесть заголовков разного уровня, которые показывают относительную важность секции, расположенной после заголовка. Так, тег представляет собой наиболее важный заголовок первого уровня, а тег служит для обозначения заголовка шестого уровня и является наименее значительным. По умолчанию, заголовок первого уровня отображается самым крупным шрифтом жирного начертания, заголовки последующего уровня по размеру меньше. Теги ,…, относятся к блочным элементам, они всегда начинаются с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него добавляется пустое пространство. Тег имеет атрибут align , который определяет выравнивание заголовка, может принимать значения left — выравнивание заголовка по левому краю, center — выравнивание по центру, right — выравнивание по правому краю, justify — выравнивание по ширине (одновременно по правому и левому краю). Это значение работает только для заголовка, длина которого более, чем одна строка.
— представляет собой контейнер для изменения характеристик шрифта, таких как размер, цвет и гарнитура. Хотя этот тег до сих пор поддерживается всеми браузерами, он считается устаревшим и от его использования рекомендуется отказаться в пользу стилей. Тег имеет 3 атрибута: color — устанавливает цвет текста, face — определяет гарнитуру шрифта, size — задает размер шрифта в условных единицах.
— помечает текст как цитату или сноску на другой материал. Такое выделение удобно для изменения стиля текста через CSS, а также применяется для разделения кода HTML на структурные элементы. Браузеры обычно устанавливают текст внутри контейнера курсивом.
— указывает, что последовательность символов является аббревиатурой. С помощью атрибута title дается расшифровка сокращения, что позволяет понимать аббревиатуру тем людям, которые с ней не знакомы. Кроме того, поисковые системы индексируют полнотекстовый вариант сокращения, что может использоваться для повышения рейтинга документа.
По умолчанию, текст заключенный в контейнере подчеркивается пунктирной линией.
Ниже приведу код, в котором я использовал все эти теги:
Мой первый сайт
HTML and CSS are two of the core technologies for building Web pages. HTML provides the structure of the page, CSS the (visual and aural) layout, for a variety of devices. Along with graphics and scripting, HTML and CSS are the basis of building Web pages and Web Applications. Learn more below about:
What is HTML? HTML is the language for describing the structure of Web pages. HTML gives authors the means to: Publish online documents with headings, text, tables, lists, photos, etc.
Retrieve online information via hypertext links, at the click of a button.
Design forms for conducting transactions with remote services, for use in searching for information, making reservations, ordering products, etc.
Include spread-sheets, video clips, sound clips, and other applications directly in their documents.
With HTML, authors describe the structure of pages using markup. The elements of the language label pieces of content such as “paragraph,” “list,” “table,” and so on. What is XHTML?XHTML is a variant of HTML that uses the syntax of XML, the Extensible Markup Language. XHTML has all the same elements (for paragraphs, etc.) as the HTML variant, but the syntax is slightly different. Because XHTML is an XML application, you can use other XML tools with it (such as XSLT, a language for transforming XML content).
What is CSS?CSS is the language for describing the presentation of Web pages, including colors, layout, and fonts. It allows to adapt the presentation to different types of devices, such as large screens, small screens, or printers. CSS is independent of HTML and can be used with any XML-based markup язык language. The separation of HTML from CSS makes it easier to maintain sites, share style sheets across pages, and tailor pages to different environments. This is referred to as the separation of structure (or: content) from presentation.
What is WebFonts? WebFonts is a technology that enables people to use fonts on demand over the Web without requiring installation in the operating system. W3C has experience in downloadable fonts through HTML, CSS2, and SVG. Until recently, downloadable fonts have not been common on the Web due to the lack of an interoperable font format. The WebFonts effort plans to address that through the creation of an industry-supported, open font format for the Web (called "WOFF").Лекция подошла к концу, надеюсь приобретённые знания вам пригодятся! В следующей лекции я расскажу вам о том, что в себе хранит тег , научимся выполнять всевозможные манипуляции с изображениями, и познакомимся с таблицами.
При написании данной статьи описание некоторых тегов было взято отсюда