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

Основы хтмл

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

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

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

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

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

Основы для начинающих

Что такое html — если посмотреть, что пишет Википедия - (HyperText Markup Language)язык гипертекстовой разметки документов. Большинство страниц в интернете содержат разметку страницы на этом языке. Данный язык интерпретируется браузерами, полученный в результате форматированный текст отображается на вашем мониторе компьютера или мобильного устройства.

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

Из чего должна состоять структура документа, какие теги должны присутствовать. Давайте разберем все на одном маленьком примере. Я написал некоторый текст в MS Office и показал его вот на этом скриншоте.

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

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

Блог Евгения Несмелова! сайт Основы html и css для начинающих

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

< html > < body > < h2 >< / h2 > < p > Добропожаловатьнамойблог, сейчасвыпроходитеурокпоОсновамHTML . Есливампонравиласьданнаястатья, можетеподписатьсянаданныйблог, чтобполучатьновыестатьинасвойэлектронныйящик. < / p > < h2 > БлогЕвгенияНесмелова! Nesmelov . ru Основыhtml иcss дляначинающих< / h2 > < / body > < / html >

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

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

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

Текст

< strong > < i > Текст< / strong > < / i >

Структура html документа

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

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

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

ВСЕГДА закрывайте теги, если вы его отрыли, обязательно нужно его закрыть. В противном случае будет ошибка и ваш документ будет некорректно отображаться на странице. Так же существуют исключения, про них не следует забывать.

Четко нужно понимать, что существует заголовок документа и его тело. Заголовок это все, что состоит в теге . Тело документа (), в теле документа состоит все содержимое страницы. Если возникает необходимость оставить участок кода для себя, тем самым заключить данные теги в комментарии, для этого используется тег . Все, что находится внутри такого тега, служит в роли комментария и не воспринимается браузерами.

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

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

Содержание

< head > Содержание< / head >

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

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

После обязательного тега title, идет необязательный, но так же не мало важный тег meta. Данный тег является одинарным. С помощью данного тега задается описание для страницы (description) и ее ключевые слова (keywords).

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

< meta name = "robots" content = "index, follow" > < meta http - equiv = "refresh" content = "20" > < meta http - equiv = "refresh" content = "5; url=http://сайт/" >

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

Тег style так же можно использовать для задания стилей на странице. Если вы используете много разных стилей css, в таком случае желательно задавать их в отдельном файле. Если нужно указать несколько из них, все это можно задать прямо в html документе.

.base { width: 100px; background-color: #000; height: 150px; color: #fff; }

< style type = "text/css" > Base { width : 100px ; background - color : #000; height : 150px ; color : #fff;

Или добавить стили конкретно к одному тегу, для этого внутри самого тега нужно добавить элемент style. Данный тег нужно использовать внутри контейнера , который задает стили для страницы. Можно использовать несколько таких тегов, ошибкой это не будет.

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

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

< link href = "css/style-lg.css" rel = "stylesheet" > < link href = "css/style-md.css" rel = "stylesheet" > < link href = "css/style-sm.css" rel = "stylesheet" >

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

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

Заголовки страницы h1 h2 h3

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

Наличие таких заголовком в статье сыграет важную роль при продвижении страницы. Кроме этого, ихнее использование дает вам четкую структуру страницы, ее заголовок, подзаголовки, выделения, подпункты и так далее. Всегда пользуйтесь ними и применяйте на практике. На многих CMS, например таких как WordPress, при написании текста, можно заметить «заголовок 1», "заголовок 2", "заголовок 3" и так далее. Именно они и отвечают за h1, h2 и h3.

Если вы пишите основной текст с нового абзаца, вы пишите тег

В начале и закрываете его в конце

. Обозначение абзаца в html равносильно создание нового абзаца в документе MS Word. Больше ничего нового в документ я не добавлял. Но, это еще далеко не все, что должно присутствовать в html документе. Посмотрим на еще один пример, описание будет немного позже.

HTML документ

Этот текст будет полужирным, а этот - ещё и курсивным

< ! DOCTYPE html > < html > < head > < meta http - equiv = "Content-Type" content = "text/html; charset=utf-8" / > < title > HTML документ< / title > < / head > < body > < p > < b > < / b > < / p > < / body > < / html >

Основные элементы Head и Title

В каждом документе присутствует элемент head и Title. Первый из них , который идет сразу после первого тега . В данном теге идет вся информация о странице, в нем так же заключается элемент . Title –информация о заголовке странице, другими словами название страницы, ее имя. Именно в тайтл вы указываете правильное название страницы, по которому пользователь будет искать вас через поисковую систему, очень важный момент. Оба элемента должны быть открыты и так же закрыты. Закрывается каждый элемент знаком «/». В итоге получается вот такая картинка.

Заголовок& \Содержание страницы

< / html >

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

Редактор Notepad++

Для работы с кодом используйте программку Notepad++. Она бесплатная, найти ее в интернете не составит труда. Очень удобная для восприятия любого кода, так же удобно показывается открывающийся тег и закрывающийся. Поддерживаем синтаксис более 40 языков программирования. Как раз то, что нужно для изучения основ html.

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

Элемент DOCTYPE

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

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

Коротко на понятном языке про основы html: Данная строчка говорит браузеру о том, что данный документ является XHTML версия 1.0, используется английский язык и вся эта каша расположена по данному адресу. Далее в теге meta указываем кодировку, которая используется. Чаще всего используется виндовс 1251.

Description — затрагивается тема по SEO, один из трех главных тегов, который должен присутствовать абсолютно в каждом документе, данный тег указывает описание страницы. Что написано на этой странице, короткое описание, не больше двух предложений. Тег keywords, так же затрагивается тема по SEO, данный тег является обязательным. В нем пишутся ключевые слова, по которым пользователи интернета будут находить вас через поисковые системы.

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

Что необходимо запомнить с данного урока про основы html:

Почти все теги открываются и закрываются;

Начинается документ с тега ;

Наличие тега ;

Наличие тега ;

Четкая структура html документа.

Все главные страницы всегда должны называться словом index . Так принято и так все привыкли, без разницы какое будет расширение у файла, это может быть и html и php. Называется он всегда только так.

Посмотрите видео про основы html от компании Webformyself.

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

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

Определение языка программированияЯзы́к программи́рования - формальная знаковая система , предназначенная для записи компьютерных программ. Язык программирования определяет набор лексических, синтаксических и семантических правил, задающих внешний вид программы и действия , которые выполнит исполнитель (компьютер) под её управлением.

Так сказано в Википедии , и большинство остальных ресурсов либо полностью употребляет это определение, либо вольно излагает его без потери смысла. Рассмотрим поподробнее составные части определения ЯП:

• Формальный язык - это множество конечных слов (строк, цепочек) над конечным алфавитом.
• Знаковая система - это система однообразно интерпретируемых и трактуемых сообщений/сигналов, которыми можно обмениваться в процессе общения. Иногда знаковые системы помогают структурировать процесс общения с целью придания ему некой адекватности в плане реакций его участников на те или иные «знаки». В качестве примера знаковой системы обычно приводят язык (как в письменной форме так и, в случае естественных языков, в форме речи).
• Компью́терная програ́мма - последовательность инструкций, предназначенных для исполнения устройством управления вычислительной машины.
• Ле́ксика - совокупность слов того или иного языка, части языка или слов, которые знает тот или иной человек или группа людей.
• Синтаксис - сторона языка программирования, которая описывает структуру программ как наборов символов (обычно говорят - безотносительно к содержанию). Синтаксису языка противопоставляется его семантика. Синтаксис языка описывает «чистый» язык, в то же время семантика приписывает значения (действия) различным синтаксическим конструкциям.
• Сема́нтика в программировании - дисциплина, изучающая формализации значений конструкций языков программирования посредством построения их формальных математических моделей. В качестве инструментов построения таких моделей могут использоваться различные средства, например, математическая логика, λ-исчисление, теория множеств, теория категорий, теория моделей, универсальная алгебра. Формализация семантики языка программирования может использоваться как для описания языка, определения свойств языка, так и для целей формальной верификации программ на этом языке программирования.
• Язы́к - знаковая система, соотносящая понятийное содержание и типовое звучание (написание).

Более простым языком это может быть изложено так:

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

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

Виды языков программирования

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

Рассмотрим поближе определения разных типов по версии Википедии :

• Аспе́ктно-ориенти́рованное программи́рование (АОП) - парадигма программирования, основанная на идее разделения функциональности для улучшения разбиения программы на модули.
• Структу́рное программи́рование - методология разработки программного обеспечения, в основе которой лежит представление программы в виде иерархической структуры блоков. Предложена в 70-х годах XX века Э. Дейкстрой, разработана и дополнена Н. Виртом.
• Процедурное программирование - программирование на императивном языке, при котором последовательно выполняемые операторы можно собрать в подпрограммы, то есть более крупные целостные единицы кода, с помощью механизмов самого языка.
• Логи́ческое программи́рование - парадигма программирования, основанная на автоматическом доказательстве теорем, а также раздел дискретной математики, изучающий принципы логического вывода информации на основе заданных фактов и правил вывода. Логическое программирование основано на теории и аппарате математической логики с использованием математических принципов резолюций.
• Объе́ктно-ориенти́рованное программи́рование (ООП) - парадигма программирования, в которой основными концепциями являются понятия объектов и классов. В случае языков с прототипированием вместо классов используются объекты-прототипы.
• Функциона́льное программи́рование - раздел дискретной математики и парадигма программирования, в которой процесс вычисления трактуется как вычисление значений функций в математическом понимании последних (в отличие от функций как подпрограмм в процедурном программировании).
• Мультипарадигма́льный язы́к программи́рования - как правило, язык программирования, который был разработан специально как инструмент мультипарадигмального программирования, то есть изобразительные возможности которого изначально предполагалось унаследовать от нескольких, чаще всего неродственных языков.
• Эзотерический язык программирования - язык программирования, разработанный для исследования границ возможностей разработки языков программирования, для доказательства потенциально возможной реализации некой идеи (так называемое «доказательство концепции», англ. proof of concept), в качестве произведения программного искусства, или в качестве шутки (компьютерного юмора).

Императивный и декларативный подход
Все языки программирования делятся на две группы: декларативные и императивные .

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

Программа на декларативном языке программирования является сочетанием формализованной в рамках языка программирования задачей и всех необходимых для её решения теорем, проще говоря, ответ на вопрос «что делать?». Конкретную последовательность выполняемых действий выполняет компилятор, или чаще интерпретатор – программа, в реальном времени выполняющая код программы без его преобразования в машинный код.

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

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

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.

Понравился материал и хотите отблагодарить?
Просто поделитесь с друзьями и коллегами!

Реферат

1. Краткая история WWW

2. Язык HTML - построение Web-документов:

а) шаблон Web-документа

б) форматирование текста

в) форматирование параграфов

г) работа с изображениями изображений:

I. фоновые изображения

II. статические и динамические изображения

е) фреймы:

I. Вертикальные фреймы

II. Горизонтальные фрейм

III. Вложенные фреймы

Альтернативные средства офрмления документов

1. Краткая история World Wide Web

Общеизвестно, что сеть Internet–это, в частности, громадное хранилище всевозможной информации. До появления службы World Wide Web (WWW) навигацию по Internet в поисках нужной информации нельзя было назвать удобной. Чтобы получить файл с FTP–сервера, приходилось отдельно загружать приложение–клиент. При этом нужно было помнить свой пароль, приходилось перемещаться по многочисленным каталогам в поисках нужного файла, не забывая перед его получением установить правильный режим передачи; знать многочисленные команды работы с FTP–серверами и т.д. Если же нужно было просмотреть какую–либо конференцию, то приходилось запускать уже другое приложение, у которого был свой набор команд для чтения, пересылки, сохранения сообщений из конференций. Все это былонеудобно.

Около пяти лет назад была предпринята попытка организовать информационный порядок в сети Internet. Это привело к появлению службы World Wide Web (Всемирная Паутина), которая получила рождение в Европейском Центре Ядерных Исследований в Швеции. В основе идеи WWW лежат так называемые hypermedia документы или Web–документы, также называемые Web–страницами, призванные навести порядок в организации и поиске данных. Эти документы могут содержать как текстовую, так и не текстовую информацию (например, изображения, звук), а также ссылки. Ссылки – это указатели, с помощью которых можно свободно перемещаться из одного места документа в другое место, или же вообще ссылаться на отдельный документ, который может находиться на другом конце света. Хотя Web–документы могут содержать самую разную информацию, не только текстовую, их практически всегда называют гипертекстовыми (hypertext) документами, что в общем, не совсем верно.

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

С появлением WWW сеть Internet стала обслуживать текст и графику, с помощью мыши стало возможным путешествовать по всему миру и легко находить нужную информацию с помощью простого указания и щелчка. Стало легко перекачивать файлы и читать конференции. Вот почему служба WWW приобрела всемирную популярность и получила большое распространение. Каждый день в сети Internet появляются в больших количествах Web–серверы и публикуются тысячи новых документов.

Для построения Web–документов в WWW используется специальный язык HTML, что означает HyperText Markup Language – язык гипертекстовой разметки, язык форматирования данных. Основанный на языке SGML (Standard Generalized Markup Language), язык HTML определяет форматирование и организацию данных в Web–документах. Он не определяет то, как точно будет размещен текст на экране, этот язык определяет структуру данных. Web–документ может содержать не только текстовую информацию, и поэтому язык HTML правильнее было бы называть HyperMedia Markup Language, однако в литературе практически всегда употребляется аббревиатура HTML. Документ, созданный на языке HTML – это обычный файл в ASCII–формате. В его основе лежат специальные дескрипторы (теги), которые и определяют форматирование данных в любом Web–документе. Естественно, для просмотра HTML–документов в World Wide Web необходимо специальное программное обеспечение. Такие программы называются броузерами (от англ. browse – листать, просматривать). С их помощью можно загружать и просматривать Web–странички, осуществлять навигацию по WWW и т.д. В настоящий момент существует довольно большое количество броузеров, из которых самыми популярными являются броузеры Microsoft Internet Explorer, Netscape Navigator и NCSA Mosaic. Броузер, прочитав HTML–файл, с помощью дескрипторов интерпретирует содержащиеся в документе данные и соответствующим образом отображает их на экране компьютера.На рис. 1 показан пример Web–документа:

Рис.1 Пример Web–документа

Язык HTML быстро развивается. В процессе своего развития он приобретал новые возможности и утрачивал мало использовавшиеся и устаревшие. В настоящий момент текущей официальной версией языка HTML является версия 3.2, обладающая развитыми средствами построения Web–документов. По сравнению с версией HTML 2.0 новая версия предлагает такие новые возможности, как таблицы, «обтекание» изображений текстом, встраивание апплетов Java и др. возможности.

На сегодняшний день кроме официальной версии языка также существуют версии HTML от фирм Microsoft и Netscape, которые также поддерживают и дополнительные возможности, не описанные в спецификации к официальной версии HTML. Чтобы решить проблему совместимости броузеров при отображении документов, составленных с использованием элементов неофициальных версий языка HTML, вышеупомянутые фирмы включают в свои продукты поддержку альтернативной версии языка. На подходе уже есть версия языка под номером 4.0, называемая Dynamic HTML, обещающаяусовершенствованные старые и новые захватывающие возможности для оформления Web–документов. W3C (World Wide Web Consortium – организация по стандартам в World Wide Web) уже предлагает на рассмотрение эту версию языка как стандарт. Существуют варианты новой версии языка от фирм Microsoft и Netscape, которые, однако, пока несовместимы между собой. В настоящей работе раскрываются основные средства построения документов из языка HTML версии 3.2 фирмы Netscape Communications.

2. Язык HTML. Построение Web–документов

Как было сказано выше, форматирование документа на языке HTML задается специальными дескрипторами. Дескриптором называется команда форматирования данных и заключена эта команда в угловые скобки «». Существуют открывающие и закрывающие дескрипторы, между которыми размещается текст, подлежащий форматированию. Открывающие дескрипторы задают способ форматирования, вторые его отменяют. Разница между такими дескрипторами заключается в том, что в закрывающем дескрипторе перед именем стоит косая черта. Например, дескрипторы . Существуют также дескрипторы, которые не требуют закрывающего варианта.

Язык HTML не чувствителен к регистру букв, поэтому все дескрипторы можно задавать как прописными, так и строчными буквами. Броузер будет их однозначно интерпретировать в любом написании.

Если просмотреть исходный текст типичной Web–странички, то можно увидеть примерно следующее содержание:

заголовок документа

текст

текст

текст

текст

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

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

Форматирование текста

Форматирование текста подразумевает вывод на экран текста, выделенного определенным шрифтом или с определенными атрибутами.

Для форматирования текста нужно заключить строку или строки текста между парой дескрипторов. Ниже приводится основной список дескрипторов и результаты форматирования текста:

Например, если необходимо вывести некую строку на экране курсивом, то в тело Web–документа необходимо ввести следующее:

Этот текст написан курсивом

В результате броузер отобразит:

Этот текст написан курсивом

Дескрипторы можно комбинировать друг с другом в произвольном порядке, например, комбинация

Это текст напечатан полужирным курсивом

приведет к следующему результату:

Это текст напечатан полужирным курсивом

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

Это мигающий текст

Однако это расширение языка фирмы Netscape используется весьма редко и поэтому, возможно, скоро устареет.

В дизайне Web–страничек часто используются шрифты различных размеров. Вывести строку с размером шрифта, отличным от обычного можно с помощью дескрипторов текст , где число n – число от 1 до 7, определяющее размер шрифта относительно обычного. Таким образом, следующий текст в теле документа

Этот текст на четыре размера больше обычного

на экране будет выглядеть следующим образом:

Этот текст на четыре размера больше обычного.

Необходимо заметить, что пары дескрипторов и , а также и являются элементами языка HTML версии фирмы Netscape и поэтому могут не поддерживаться остальными броузерами.

Форматирование абзацев

Текстовая информация, размещаемая на Web–страницах, организована в абзацы. Абзац начинается дескриптором и завершается закрывающим дескриптором

, однако последний необязателен. Пример кода на HTML:

Первый абзац

Второй абзац

В результате на экране будет такой результат:

Первый абзац

Второй абзац

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

Первая строка

Вторая строка

В результате броузер выведет на экран:

Первая строка

Вторая строка

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

Создание заголовков

Заголовки различного уровня задаются с помощью дескрипторов и , где n – число от 1 до 6. Самый крупный заголовок задается дескриптором , самый маленький – дескриптором . Например:

Это заголовок уровня 1

Это заголовок уровня 3

Это заголовок уровня 6

В результате на экране будет выведено:

Это заголовок уровня 1

Это заголовок уровня 3

Это заголовок уровня 6

Заголовки являются одним из наиболее часто используемых элементов оформления документов в WWW.

Создание списков

В языке HTML существует возможность задавать списки трех типов: нумерованные списки, ненумерованные списки, списки определений. Начало и конец списка задается специальными дескрипторами, а перед каждым элементом списка задается дескриптор

, не имеющий закрывающего варианта.

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

Элемент списка

Элемент списка

Элемент списка

Результат:

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

Элемент списка

Элемент списка

Элемент списка

Результат:

* Элемент списка

* Элемент списка

* Элемент списка

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

Первое определяемое понятие

Пояснение первого понятия

Второе определяемое понятие

Пояснение второго понятияі

Результат:

Первое определяемое понятие.

Пояснение первого понятия.

Второе определяемое понятие.

Пояснение второго понятия.

Ссылки

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

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

Атрибут HREF указывает на имя метки в текущем документе.

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

Это метка

На экране метка в отличие от ссылок ничем не выделяется среди остального текста.

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

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

Внедрение изображений

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

Для вставки иллюстраций в документ используется дескриптор :

Атрибут задает имя файла картинки. Имя файла может указывать на как локальный файл, так и на удаленный файл, для чего следует указать соответствующий URL. Файл может представлять собой статическое изображения и иметь графический формат, понимаемый броузером, либо динамическое изображение, представленное в формате GIF89A. В последнем случае в окне броузера файл будет выведен как анимация.

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

Часто при подготовке страничек с использованием графики случается, что желаемый размер изображения не совпадает с действительным. Например, необходимо поместить картинку на определенной площади с определенным размером. Для этого нужно использовать атрибуты WIDTH и HEIGHT, которые задают требуемые размеры изображения в ширину и высоту соответственно. Например, если необходимо поместить изображение большого размера на площади высотой в 100 и шириной в 200 пикселов, то в тело документа необходимо записать следующее:

Порядок следования этих атрибутов может быть произвольным.

Обилие графики в документе, с одной стороны, улучшает его общий вид, с другой стороны, существенно увеличивает время его загрузки. Чтобы найти компромисс между скоростью загрузки документа и его наглядностью, дизайнеры Web–страниц часто прибегают к такому приему: изображение размещают на страничке в меньшем формате и делают его ссылкой на себя. Если щелкнуть мышкой на таком изображении, то броузер загрузит его и отобразит в оригинальных размерах. Изображение–ссылка описывается в документе следующим образом:

Интересной возможностью представляется «обтекание» изображение текстом. Это весьма популярный способ оформления Web–страниц. При этом на экране картинка окружена текстом, например, слева и снизу. «Обтекание» текста достигается использованием атрибута ALIGN, который имеет такие параметры, как:

LEFT – текст будет охватывать изображение слева-снизу.

RIGHT – текст обхватывает изображение справа-снизу

TOP – изображение окружено текстом справа-сверху

BOTTOM – изображение окружено текстом справа-снизу

MIDDLE – изображение окружено текстом справа-посредине

Например, при составлении Web–странички, приведенной на рис. 1, была использована такая запись в теле документа, описывающая изображение:

Изображения можно использовать и в качестве фона документа. Весь текст и все иллюстрации в документе будут выводиться броузером поверх фонового изображения. Фоновые изображения задаются весьма просто следующим образом:

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

Фреймы

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

Существует два типа фреймовых документов: фрейм–содержащие документы и простые документы. Фрейм–содержащие документы задают структуру самого фрейм–документа, т.е. задают данные о том, как будет разбито окно броузера на подокна. Такие документы содержат ссылки на другие документы. Обычные же документы – это те документы, которые не содержат данные, определяющие фреймы.

Структура фрейм–содержащего документа в общем случае имеет такой вид:

заголовок

Текст

Область задания фреймовой структуры

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

Ниже приводится пример фреймового документа:

Ваш броузер не поддерживает фреймы!

;
Ω>… – W ;
β>… – b ;
‘>… – a ;
∑>… – S ;

НЕТ ОБЩЕГО СТАНДАРТА!!!

Управления расположения текста относительно границ страници :

Текст

“center”
“right”
“justify”

- так же как и в web выводит текст на экран;

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

*.gif, *.jpg, *.png – можно использовать любое из этих расширений.

Простейший способ вставить рисунок – рассположить его в том же катологе где находиться HTML-страничка.

Управление расположением:

Widht = “N” – в пикселях
“K”- в процентах
Height =“N”
“K”

Смещение на заданую величину

Hspace = “N”
“K”
Vspace = “N”
“K”

Вывод анимации:

Для указания количества воспроизведений нужно вставить loop = “N” после названия файла, где N-число.

Пример.
Требуется вывести картинку по центру экрана и подписать его.

Мой.....

1…
2
3 ...

Гиперссылки

Это выполнение оператора go to;

Особенность web-странице – віполняется в диалоге, во время перемещения стрелочки, она заменяется на изображение и нажатием на левую кнопку мышки переходит на другую web-страницу. Это самый главный инструмент при работе с web. В классической программе – нужно все время следить за положением курсора и обрабатывать сообщения Windows.
Web-страници никаких обработок не делают.

Варианты записи адресса:

текст – тот текст в html на который перейдет курсор, при нажатиии на изображение;
___.gif – картинка, связаная с текстом;
___.html – движение по web-сайту;
Myweb.com.ua – на интернет адресс.

Анимация на web-страницах.

Основной элемент анимации – это использования gif-анимации. Можна выводить и avi-файлы.
Недостаток – пользователь должен сохранить эти файлы, а это дорого.

Анимация средствами html

В html нет граффических операторов, функций графики.

____
____

Параметры управления движением

1. Direction = right, left, up, down.

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

2. Loop = INFINITE; (бесконечно)
Loop = 0;
Loop = N; (анимационный повтор N раз)

3.Behavior = scroll; изображение двигается слева направо и наоборот
Behavior = slide; движение до конца строки
Behavior = alternative; движение из одного конца строки в другой.

Размер обложки анимации

Width = Dx
Height = Dy
Align = middle; (top) перемещение по центру, по верхней части экрана
bgcolor = цвет; цвет фона, области движения
scrollmount = K; скорость движения
scrolldelay = M; величина задержки между движениями.

Движущаяся информация

1.текст + рисунок
2.текст

• бегущая строка
• изображение линий

Рисование линий

______
По умолчанию появится линия на весь экран, толщина линии 1 пиксель.
Возможно управление, есть 2 параметра:
Width = N – ширина линии
Size = H – толщина линии
Color = - цвет

Вывод звука

Для начала нужно иметь звуковой файл.
Фоновый звук – открывается страничка и сразу играет звук.

Wav
Параметры:
Loop = N – количество проигрований музыки
Balance = “___” - ±10000 дополнительная регулировка, определяет смещение по ролику относительно начала, конца файла.
Volume = “___” – громкость
“0” – максимальная громкость.
“10000” – звук выключен.
Есть возможность выводить мультимедиа проигрователь.

Поделись статьей:

Похожие статьи

17 апреля 2015
Отвязываем страничку в инстаграм от фейсбука

17 апреля 2015
Как подключиться к компьютеру по локальной сети?

17 апреля 2015
Процесс System (NT Kernel System) грузит систему: что делать?

17 апреля 2015
Обновление прошивки смартфонов Samsung Galaxy