Язык html для создания web сайтов – Как написать простую HTML-страничку / Полезное / Сайты и биржи фриланса. Обзоры фриланс бирж. Новости. Советы. Фриланс для начинающих. FREELANCE.TODAY — Вебджем.рф

Содержание

2. Создание Web-страницы с помощью языка html

2.1 Язык html

Web-страницы могут существовать в любом формате, но в качестве стандарта принят Hyper Text Markup Language — язык разметки гипертекстов, предназначенный для создания форматированного текста, насыщенного изображениями, звуком, анимацией, видеоклипами и гипертекстовыми ссылками на другие документы, разбросанные как по всему Web-пространству, так и находящиеся на этом же сервере или являющиеся составной частью этого же Веб-проекта.

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

Язык HTML существует в нескольких вариантах и продолжает развиваться, но конструкции HTML скорее всего будут использоваться и в дальнейшем. Изучая HTML и познавая его глубже, создавая документ в начале изучения HTML и расширяя его насколько это возможно, мы имеем возможность создавать Web-страницы, которые могут быть просмотрены многими броузерами Web, как сейчас, так и в будущем. Это не исключает возможности использования других методов, например, метод расширенных возможностей, который предоставляется Netscape Navigator, Internet Explorer или некоторыми другими программами.

Работа по HTML — это способ усвоить особенности создания документов в стандартизированном языке, используя расширения, только если это действительно необходимо.

HTML был ратифицирован World Wide Web Consortium. Он поддерживается несколькими широко распространенными броузерами, и, возможно, станет основанием почти всего программного обеспечения, которое имеет отношение к Web.

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

Поскольку HTML-документы записываются в ASCII-формате, то для ее создания может использован любой текстовый редактор.

Обычно HTML-документ — это файл с расширением .html или .htm, в котором текст размечен HTML-тегами (англ. tag — специальные встроенные указания). Средствами HTML задаются синтаксис и размещение тегов, в соответствии с которыми браузер отображает содержимое Веб-документа. Текст самих тегов Веб-браузером не отображается.

Все теги начинаются символом ‘<‘ и заканчиваются символом ‘>’. Обычно имеется пара тегов — стартовый (открывающий) и завершающий (закрывающий) тег (похоже на открывающиеся и закрывающиеся скобки в математике), между которыми помещается размечаемая информация:

<p>Информация</p>

Здесь стартовым тегом является тег <P>, а завершающим — </P>. Завершающий тег отличатся от стартового лишь тем, что у него перед текстом в скобках <> стоит символ ‘

/‘ (слэш).

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

A) Объявление HTML; B) Заголовачная часть; C) Тело документа.

A) Объявление HTML

<HTML> и </HTML>. Пара этих тегов сообщает программе просмотра (браузеру) что между ними заключен документ в формате HTML, причем первым тегом в документе должен быть тег <HTML> (в самом начале документа), а последним — </HTML> (в самом конце документа).

B) Заголовочная часть.

<HEAD> и </HEAD>. Между этими тегами располагается информация о документе (название, ключевые слова для поиска, описание и т.д.). Однако наиболее важным является название документа, которое мы видим в верхней строке окна браузера и в списках «Избранное (BookMark)». Специальные программы-спайдеры поисковых систем используют название документа для построения своих баз данных. Для того чтобы дать название своему HTML-документу текст помещается между тегами

<TITLE> и </TITLE>.

<HTML> <HEAD> <TITLE>Моя первая страница</TITLE> </HEAD> </HTML>

C) Тело документа.

Третьей главной частью документа является его тело. Оно следует сразу за заголовком и находится между тегами <BODY> и </BODY>. Первый из них должен стоять сразу после тега </HEAD>, а второй — перед тегом </HTML>. Тело HTML-документа — это место, куда автор помещает информацию, отформатированную средствами HTML.

<HTML> <HEAD> <TITLE> Моя первая страница</TITLE> </HEAD> <BODY> ……………………………….. </BODY> </HTML>

Теперь мы можем написать HTML-код нашей странички:

<HTML> <HEAD> <TITLE>Моя первая страница</TITLE> </HEAD> <BODY> Здесь будут мои страницы! </BODY> </HTML>

HTML – язык создания веб-страниц сайта

HTML – язык создания веб-страниц сайта HTML – язык создания веб-страниц сайта

Для создания гипертекстовых документов, входящих в состав веб-сайтов, используются специальные программные средства, к которым, в первую очередь, относят язык разметки страниц и создания гипертекстовых документов HTML (HyperText Markup Language).

Гипертекстовый документ – файл, содержащий различные виды информации и имеющий в своей структуре ссылки (гиперссылки) на другие файлы или сам являющийся документом, на который есть ссылка в другом файле, расположенном на некотором сервере в любой точке планеты. Гипертекстовый документ, размещённый на сервере с использованием WWW-технологии, называют

Web-страницей (веб-страницей). Файл, содержащий HTML документ должен иметь расширение “.htm” или “.html”.
Язык разметки представляет собой совокупность тегов (тэгов), позволяющих отображать необходимые элементы документов (веб-страниц) в окне браузера, осуществлять связь с другими объектами и веб-страницами.
Тег или тэг (англ. “Tag”) является признаком объекта, управляющим кодом. Тэги представляют некоторые операторы (команды, дескрипторы), заключённые в скобки типа “< >”, причём ими начинается и заканчивается целая страница или некоторый фрагмент. Так как многие теги являются парными, они определяют начало и конец некоторого действия. В конце команды ставится слеж “/” с именем, используемым в её начале.

Для создания Web-страниц (веб-страниц) не обязательно иметь доступ к сети. Все известные программы просмотра (IE, Netscape, Mosaic, Опера и др.) могут открыть файл с документом, находящийся на электронном носителе пользователя.
Тэги можно вводить большими и маленькими буквами, например, тэги <BR>, <Br> и <br> равнозначны.
Тэг <br> означает принудительный перевод строки в тексте. Тэг, определяющий новый абзац (параграф – Paragraph) обозначается <P>.
Приведём другие теги, определяющие работу с текстом:
<B></B> – Bold (жирный)
<I></I> – Italic (курсив)
<font Times New Roman color=”red” size=5> – определяет тип шрифта, его цвет и размер.

Кроме этих тэгов в состав некоторых тэгов можно включать дополнительные условия, определяющие его расположение на странице (слева, справа, по середине или по ширине) и др.
Любой документ в виде веб-страницы имеет следующую минимальную структуру:
<HTML> – Начало страницы.
<HEAD> – Заголовок страницы.
<TITLE> </TITLE> – Заголовок страницы, отображаемый в верхней строке браузера.
</HEAD> – Конец заголовка страницы.
<BODY> – Начало отображаемой в браузере части документа.
</BODY> – Конец отображаемой в браузере части документа.
</HTML> – Конец страницы.
Для связи с другими объектами и веб-страницами используют парный тэг <A> – якорь (“анкор”), например,
<A HREF=»http://www.openweb.ru»> Мастерская </A> позволяет сделать слово “Мастерская” гипертекстовой ссылкой на сервер с именем “openweb.ru”.

Аналогично ссылку можно установить на объект внутри страницы (<A HREF=»#up»>Вверх</A>), предварительно установив место, к которому будет осуществлен переход внутри одной страницы, например, <a name=”#up”>;
на другую страницу (<A HREF=»news.htm»>Новости</A>) и
на адрес электронной почты, например,
<A HREF=mailto:[email protected]>[email protected] </A>.
Графические изображения и другие нетекстовые компоненты хранятся отдельно и не вставляются в документ непосредственно. Вместо этого в текст вставляют ссылку, указывающую программе просмотра имя файла, содержащего картинку. Стандартно поддерживаются форматы картинок “GIF” и “JPEG”. Картинка вставляется с помощью тэга <img src=»имя_файла.gif»>.
Для изображения горизонтальной полосы служит тэг
<HR>.
В тексте, расположенном между тэгами <BODY>, не допускается использование кавычек, символов “<” (меньше), “>” (больше), «/» и т.п. Их заменяют записями типа “"”, “<”, “>”.
Обычно используют следующую последовательность создания гипертекстового документа (веб-страницы):
1. Создают минимальный документ, в т.ч. по шаблону.
2. Вставляют между тэгами <HEAD> и </HEAD> название страницы (между тэгами <TITLE> </TITLE>), а за ними необходимые метаданные, определяющие используемую кодировку, вводимые ключевые слова и другие необходимые метаданные.
Для использования кодировки русских символов (кириллица) рекомендуется использовать следующий тэг:
<META http-equiv=content-type content=»TEXT/HTML; CHARSET=windows-1251″>.
3. Вставляют между тэгами <BODY> и </BODY> необходимые тексты и другие объекты, в т.ч. включая их в таблицы. Используют различные фоновые изображения в виде графических объектов, окрашенных областей или всей страницы в какие-либо цвета.
4. Размечают тексты (параграфы, заголовки, размер и т.д.). Устанавливают их цвет с учётом их хорошего зрительного восприятия человеком и принципов дизайна.
5. С учётом тех же требований вставляют ссылки на графические изображения и гипертекстовые связи.
6. Загружают подготовленный документ в программу просмотра (браузер) в автономном режиме и оценивают выполненную работу.
7. Проводят корректировку добиваясь получения необходимых, в том числе с точки зрения дизайна, результатов.
Практическое занятие:
Разработка (планирование) и дизайн сайта.
Создание главной и других веб-страниц сайта.
Первая (главная, домашняя или по-английски “Home Page”) страница – лицо сайта. Обычно на первой странице размещают элементы, обозначающие (идентифицирующие) её “хозяина” (название или имя, реквизиты, фото и др.), а также названия предлагаемых сайтом основных тем, ресурсов и услуг.
На основе тем работ, выполненных на первой лекции, студент (ка) создаёт тематический сайт.
Темы согласовываются с преподавателем!!!
Необходимые для наполнения страниц сайта материалы можно взять из любых традиционных (печатных) учебных, учебно-методических пособий, а также из Интернета.
Сайт должен содержать 5–7 веб-страниц.
Разработайте макет главной страницы сайта.
Главная страница сайта – файл с именем “index.htm”.
На ней между тэгами <HEAD> и </HEAD> в тэге <title> следует ввести название работы, и включить следующий тэг:
<META http-equiv=content-type content=»TEXT/HTML; CHARSET=windows-1251″>.
Затем в область между тэгами <BODY> и </BODY> включается:
1) это же название работы,
2) фамилия исполнителя и название его учебной группы, например, в таблицу, состоящую из одной строки и двух ячеек, размером в 60% и 40% соответственно.
<center> – этот тег означает, что описанная ниже таблица разместится по центру веб-страницы.
<table bgcolor=”#0000ff” border=0> – начало таблицы, при этом “border=0” означает, что вокруг таблицы не будет рамки, а “bgcolor=”#0000ff””, что цвет фона внутри таблицы будет синим.
<tr> – первая строка таблицы.
<td width=60% align=center><font color=”red” size=8> Название работы – по центру первой ячейки первой строки шириной в 60% таблицы размещается название работы красного цвета и высотой в 8 единиц.
Если необходимо включить в любую ячейку таблицы рисунок, например, логотип, то поступают следующим образом:
<td width=ХХ% align=center> <img src=”logo.gif” border=0 alt=”Логотип”> – в ячейке с шириной в ХХ% таблицы размещается картинка с именем “logo.gif”. Вокруг неё не будет рамки, а при установке на неё мыши появится текст “Логотип”.
</table> – конец таблицы.
Ниже (например, отступив одну строку) располагают горизонтальное меню. В качестве примера предлагается использовать структуру веб-сайта турфирмы с вариантами названия входящих в её состав веб-страниц:
● О нас (we.htm)
● Наши туры (our_tours.htm)
● Контакты и проезд (contacts.htm)
● Новости (news.htm)
Эти названия представляют собой гипертекстовые ссылки к соответствующим элементам иерархической структуры сайта (веб-страницам), позволяющим пользователю быстро и удобно находить искомые информационные ресурсы, в том числе на других сайтах.
Эта структура отобразится на главной странице, как правило, внутри горизонтальной таблицы, в нашем случае состоящей из четырёх колонок-ячеек. Необходимая для этого таблица формируется следующим образом:
<table border=2> – начало таблицы, при этом “border=2” означает, что вокруг таблицы будет рамка толщиной 2 пиксела.
Можно установить оптимальный её размер на странице, включив в тэг <table> сведения о ширине таблицы, например, <table width=75%>.
<tr> – первая строка таблицы.
Тэг <td> обозначает ячейку (столбец, колонку) в любой строке.
<td width=25%> <a href=”we.htm”>О нас </a> – первый столбец (колонка, ячейка) первой строки таблицы с ссылкой на веб-страницу “we.htm”.
<td width=25%> <a href=”our_tours.htm”>Наши туры </a> – второй столбец первой строки таблицы с ссылкой на веб-страницу “our_tours.htm”.
<td width=25%> <a href=”contacts.htm ”>Контакты и проезд </a> – третий столбец первой строки таблицы с ссылкой на веб-страницу “contacts.htm”.
<td width=25%> <a href=”news.htm”>Новости </a> – четвертый столбец первой строки таблицы с ссылкой на веб-страницу “news.htm.
</table> – конец таблицы.
Под таблицей разместим горизонтальную черту красного цвета:
<hr color=”red”>.
Далее сделаем несколько пустых строк, 2–4 раза применив следующую комбинацию тэгов: <p><br> – параграф и перевод строки.
Под ними в правой части страницы введём данные, отражающие дату выполнения работы, например:
<font color=”#FFFFFF” size=3> – синий цвет и размер шрифта.
<p align=right><i> Создан 21.10.2007 г. </i> – текст, выделенный курсивом, размещается по правому краю страницы.
После выполнения первой работы, необходимо создать остальные веб-страницы. Так, например, вторую страницу можно создать аналогично главной странице. Для этого сохраняют страницу “index.htm”, например, с именем “contacts.htm” для создания связанной веб-страницы “Контакты и проезд” и убирают с неё всё лишнее, оставив лишь таблицу с меню.
На второй странице область <BODY> начинается с меню (например, скопированного с первой страницы). Затем в неё включается краткое описание темы выполняемой работы. Если оно сопровождается графическими материалами, то и их следует включить в состав этой страницы.
Если на любой странице требуется использовать ненумерованный список, например, сведения об адресе, телефоне и электронной почте фирмы, то его можно сформировать следующим образом:
<HTML>
<HEAD>
<TITLE> Контакты и проезд </TITLE>
<HEAD>
<BODY>
Таблица-меню
<ul>
<li><p align=left>Наш адрес: ………
<li>Наш телефон: (495)……………….
<li>Наш адрес электронной почты: …………..
</ul>
<p>
</BODY>
</HTML>
Если необходим нумерованный список, то вместо парного тэга <ul> используют парный тэг <ol>.
Аналогичным образом создаются следующие страницы. Они обязательно должны отражать достоинства, недостатки и сферу использования описываемых устройств, систем, топологий и т.п., а также выводы и предложения студента (ки) относительно рассмотренного тематического материала.

Размещение ресурсов на сайте.
После выполнения всей работы по созданию сайта на локальном компьютере студента (ки), они проверяют работу ссылок, осуществляют окончательное оформление страниц (цвет страниц, текстов, размер и др.) и предъявляют свои работы преподавателю.
После получения положительной оценки данной работы, студент (ка) размещают свой сайт на бесплатном сервере и сообщают об этом преподавателю для проверки им работы сайта и выставления окончательной оценки за практическую работу.
Сайт создан в системе uCoz

Создание простой web-страницы на HTML
Что такое HTML? Из описания: HTML — язык разметки гипертакста (или язык гипертекстовой разметки).

Так давайте познакомимся с ним поближе.

Для начала создайте у себя на компьютере файл с любым названием и расширением .html (название должно быть на английском языке — например index.html). Что бы создать такой файл — создайте обычный текстовый документ («Пуск» — «Все программы» — «Стандартные» — «Блокнот») и сохраните («Файл» — «Сохранить как») его в любом месте, введя название и расширение (бывает, что при введении расширения блокнот все равно сохраняет его как текстовый файл, а нам нужет web файл. Для этого перед сохранением выберите тип файла — «Все файлы(*.*)»).

Это не обязательное условие (так как в настройках сервера можно поменять название первой страницы), а правило хорошего тона. Название первой страницы желательно именно index (index.html), так как сервер, при обращении к нему, выдает файл с таким именем — index.

При правильном сохранении, значок файла должен поменяться на значок браузера (по умолчанию Internet Explorer).

Теперь откройте этот файл через блокнот и скопируйте туда такой код.

<html> <body> Это первая web-страница! </body> </html>

Сохраните и откройте через браузер.

Поздравляю, вы только что создали свою первую web-страницу.

Текст «Это первая web-страница!» можете поменять на любой другой, например так — «Это моя первая web-страница!!!». сохраняем, обновляем браузер, любуемся результатом.

Но у нашей страницы нет загаловка.

Надо это исправить — немного подправим код, вернее добавим в него «Голову сайта», используя теги <head> и <title>.

<html> <head> <title>Первая страница</title> </head> <body> Это моя первая web-страница!!! </body> </html>

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

Пример здесь.

Описание тегов.

Самый первый тег это <html> (этот тег парный, т.е. закрывающий тег </html> обязателен) — он используется как контейнер, внутри которого находится все содержимое страницы (текст, изображения и прочее). Хотя этот тег (<html> и </html>) необязателен, но его использование говорит о правиле хорошего тона. Поэтому и вам советую его использовать.

Следующий тег — <head>. Это тоже парный тег (<head> и </head>). Этот тег не отображается на странице (кроме заголовка), но он необходим для указания дополнительный параметров страницы — описание страницы (используется поисковиками), ключевые слова (используется поисковиками), стили, скрипты, заголовок и прочее.

Тег <title> — парный тег (<title> и </title>), необходим для указания заголовка страницы. Причем этот тег нужно размещать только внутри тега <head>!

И последний, в нашем коде, тег — <body>. Тоже парный тег (<body> и </body>), внутри которого находится вся видимая часть сайта, т.е. тексты, картинки, ссылки, в общем информация которую вы хотите разместить на сайте.

В следующем уроке мы поговорим о видах тегов и правило их написания.

Список уроков Описание тегов
HTML, DHTML, JavaScript, PHP, MySQL, XML+XLST, Ajax, Api
Что такое HTML?
Всемирная паутина соткана из Web-страниц (Web-pages), а эти страницы создаются при помощи языка разметки гипертекста (HyperТext Markup Language, HTML). HTML — это язык разметки. Вы используете HTML для разметки текстового документа, точно так же, как это делает редактор при помощи жирного красного карандаша. Эти пометки служат для определения формата (или стиля), который будет использован при выводе текста на экран монитора. читать дальше…
Что такое DHTML?
DHTML (динамический HTML) — это набор средств, которые позволяют создавать интерактивные Web-страницы без увеличения загрузки сервера.
DHTML построен на объектной модели документа (Document Object Model, DOM), которая расширяет традиционный статический HTML-документ. DOM обеспечивает динамический доступ к содержимому документа, его структуре и стилям. В DOM каждый элемент Web-страницы является объектом, который можно изменять. DOM не определяет новых тэгов и атрибутов, а просто обеспечивает возможность программного управления всеми тэгами, атрибутами и каскадными листами стилей (CSS). читать дальше…
Что такое JavaScript?
JavaScript предназначен для написания сценариев для активных HTML-страниц. JavaScript не предназначен для создания автономных приложений. Программа на JavaScript встраивается непосредственно в исходный текст HTML-документа и интерпретируется брaузером по мере загрузки документа. С помощью JavaScript можно динамически изменять текст загружаемого HTML-документа и реагировать на события, связанные с действиями посетителя или изменениями состояния документа или окна.
Важная особенность JavaScript — объектная ориентированность. Программисту доступны многочисленные объекты, такие, как документы, гиперссылки, формы, фреймы и т.д. читать дальше…
Что такое PHP?
PHP (Personal Home Page) — серверный язык создания сценариев. Первая версия PHP была создана Расмусом Лердорфом в 1994 г. и представляла собой набор инструментов для отслеживания посетителей Web-страницы. Сегодня это полноценный мощный язык программирования, его название было изменено как рекурсивное образование PHP HyperText Preprocessor (препроцессор гипертекста PHP).
Конструкции PHP, вставленные в HTML-текст, выполняются сервером при каждом посещении страницы. Результат их обработки вместе с обычным HTML-текстом передается браузеру. читать дальше…
Что такое XML?
XML (eXtensible Markup Language) — расширяемый язык разметки. Основное внимание в XML сосредоточено на данных. В XML структурная разметка данных и представление данных строго разделены. читать дальше…
Что такое XSLT?
XSLT (eXtensible Stylesheet Language Transformations) — расширяемый язык преобразования листов стилей.
Язык XSLT служит транслятором, с помощью которого можно свободно модифицировать исходный текст. XLST играет решающую роль в утверждении XML в качестве универсального языка хранения и передачи данных. Область применения XSLT широка — от электронной коммерции до беспроводного Web. читать дальше…
Что такое AJAX?
Ajax расшифровывается как Asynchronous Javascript And XML (Асинхронные Javascript И XML) и технологией в строгом смысле слова не является.
Если в стандартном веб-приложении обработкой всей информации занимается сервер, тогда как браузер отвечает только за взаимодействие с пользователем, передачу запросов и вывод поступившего HTML, то в Ajax-приложении между пользователем и сервером появляется еще один посредник — движок Ajax. Он определяет, какие запросы можно обработать «на месте», а за какими необходимо обращаться на сервер. читать дальше…
Домены, Сайты, Хостинг, DNS
Домен — уникальный текстовый идентификатор, позволяющий легко запомнить и однозначно определить сайт. С помощью DNS-сервера доменное имя превращается в IP-адрес, по которому находится сервер, на котором распологается сайт.
Сайт (Web-сайт, Web-узел) — совокупность логически связанных web-страниц. Здесь Вы найдете много материалов о том как создать сайт, как сделать его посещаемым и как научить его приносить Вам деньги.
Хостинг (Hosting, Web-hosting, Collocation) — размещение страниц сайта на сервере, постоянно подключенном к Интернет. Эта статья поможет Вам с выбором хостинга для вашего сайта.
API для работы с доменами.
Создание сайта, CMS
Чтобы сделать хороший сайт, Вам прийдется разобраться в тонкостях HTML-верстки, программировании на PHP, javascript. Чтобы сделать простенький сайт достаточно разобраться в работе CMS.
Статья про создание сайтов проведет Вас пошагово от разработки концепции и до заработка
CMS (Content Management System) — система управления содержанием сайта. CMS иначе ещё называют «движек сайта», т.е. программа с помощью которой вы создаете и изменяете сайт, которая отвечает за его работу и отображение. Эта статья поможет Вам с выбором CMS для вашего сайта.
Здесь Вы найдете подборку шаблонов для вашего сайта.
Сервисы для Сайтов
SEO, Продвижение сайтов
SEO (Search Engines Optimization) — комплекс мер, направленный на улучшение позиций сайта в выдаче поисковой системой по конкретным поисковым запросам.
Каждый хочет, чтобы на его сайт заходило много людей. Откуда они могут узнать о сайте? Прежде всего от поисковой системы, такой как Яндекс, Google. Возникает желание, чтобы сайт был на первой странице при поиске. Как этого добиться Вы узнаете прочитав статью о поисковом продвижении.
Провести комплексный анализ сайта
Работа с изображениями
Здесь собраны различные сервисы работы с изображениями. Большинство примеров с открытым исходным кодом на PHP.
Шифрация и раскодирование
Здесь Вы найдете множество программ и сервисов, которые помогут Вам прочитать закодированное письмо или самому закодировать часть программы или кода. Большинство примеров с открытым исходным кодом.
Чей домен? Чей IP? Чей телефон?
Основные принципы создания Web-страниц. Язык HTML 5
Web-страницы выглядят зачастую очень пестро: разнокалиберные куски текста, таблицы, картинки, врезки, сноски и даже фильмы. Но описывается все это в виде обычного текста. Да-да, Web-страницы — суть текстовые файлы, которые можно создать с помощью хорошо знакомого нам редактора Блокнот, поставляемого в со- ставе Windows! (Разумеется, подойдет любой аналогичный текстовый редактор.)
Для форматирования содержимого Web-страниц применяется особый язык — HTML (HyperText Markup Language, язык гипертекстовой разметки). С помощью команд — тегов — этого языка создают и абзацы текста, и заголовки, и врезки, и даже таблицы.
Первая версия языка HTML появилась очень давно, еще в 1992 году. С тех пор по Сети утекло немало гигабайт… HTML также не стоял на месте. В данный момент готовится к выходу окончательная спецификация новой версии HTML под номером 5, и многие Web-обозреватели уже поддерживают некоторые ее возможности. Ее-то мы и будем изучать.
Язык HTML и его теги
Изучать HTML лучше всего на примере. Так что давайте сразу же создадим нашу первую Web-страничку. Благо Windows уже содержит необходимый для этого инструмент — Блокнот.
НА ЗАМЕТКУ
Вообще, для создания Web-страниц существует множество специальных программ — Web-редакторов. Они позволяют работать с Web-страницами, даже не зная HTML, — как с документами Microsoft Word, просто набирая текст и форматируя его. Также они следят за правильностью расстановки тегов, помогут быстро создать сложный элемент Web-страницы и даже опубликовать готовый Web-сайт в Сети. К таким программам принадлежит, в частности, известный Web-редактор Adobe Dreamweaver. Однако мы пока что будем пользоваться простейшим текстовым редактором Блокнот. Это позволит нам лучше познакомиться с HTML.
Откроем Блокнот и наберем в нем текст (или, как говорят бывалые программисты, код), приведенный в листинге 1.1.
Листинг 1.1
<!DOCTYPE html>
<HTML>
<HEAD>
<META HTTP-EQUIV=»Content-Type» CONTENT=»text/html; charset=utf-8″>
<TITLE>Пример Web-страницы</TITLE>
</HEAD>
<BODY>
<h2>Справочник по HTML</h2>
<P>Приветствуем на нашем Web-сайте всех, кто занимается Web-дизайном! Здесь вы сможете найти информацию обо всех интернет-технологиях, применяемых при создании Web-страниц. В частности, о языке
<STRONG>HTML</STRONG>.</P>
</BODY>
</HTML>
Проверим набранный код на ошибки и сохраним в файл с именем 1.1.htm. Только сделаем при этом две важные вещи.
1. Сохраним HTML-код в кодировке UTF-8. Для этого в диалоговом окне сохранения файла Блокнота найдем раскрывающийся список Кодировка и выберем в нем пункт UTF-8.
2. Заключим имя файла в кавычки. Иначе Блокнот добавит к нему расширение txt, и наш файл получит имя 1.1.htm.txt.
Все, наша первая Web-страница готова! Теперь осталось открыть ее в Web-обозревателе и посмотреть на результат.
Мы можем использовать стандартно поставляемый в составе Windows Web- обозреватель Microsoft Internet Explorer. Но Internet Explorer на данный момент не поддерживает HTML 5; его поддержку обещают только в версии 9, которая пока находится в разработке. HTML 5 поддерживают последние версии Mozilla Firefox, Opera, Apple Safari и Google Chrome, поэтому предпочтительнее какая-либо из этих программ.
Откроем же Web-страницу в выбранном Web-обозревателе (автор выбрал Firefox) и посмотрим на нее (рис. 1.3).
Рис. 1.3. Наша первая Web-страница
Видите? Мы создали Web-страницу, содержащую большой «кричащий» заголовок,
абзац текста, который автоматически разбивается на строки и содержит фрагмент текста, выделенный полужирным шрифтом (аббревиатура «HTML»). И все это — в «голом» тексте, набранном в Блокноте!
Теперь посмотрим, что же мы такое написали в файле 1.1.htm. Пока что ограни- чимся небольшим фрагментом HTML-кода (листинг 1.2).
Листинг 1.2
<h2>Справочник по HTML</h2>
<P>Приветствуем на нашем Web-сайте всех, кто занимается Web-дизайном! Здесь вы сможете найти информацию обо всех интернет-технологиях, применяемых при создании Web-страниц. В частности, о языке <STRONG>HTML</STRONG>.</P>
Здесь мы видим текст заголовка и абзаца. И еще странные слова, взятые в угловые скобки — символы < и >. Что это такое?
Это и есть теги HTML, о которых упоминалось ранее. Они превращают тот или иной фрагмент HTML-кода в определенный элемент Web-страницы: абзац, заголовок или текст, выделенный полужирным шрифтом.
Начнем с тегов <h2> и </h2>, поскольку они идут первыми. Эти теги превращают фрагмент текста, находящийся между ними, в заголовок. Тег <h2> помечает начало фрагмента, на который распространяется действие тега, и называется открывающим. А тег </h2> устанавливает конец «охватываемого» фрагмента и называется закрывающим. Что касается самого фрагмента, заключенного между открывающим и закрывающим тегами, то он называется содержимым тега. Именно к содержимому применяется действие тега.
Все теги HTML представляют собой символы < и >, внутри которых находится имя тега, определяющее назначение тега. Закрывающий тег должен иметь то же имя, что и открывающий; единственное отличие закрывающего тега — символ /, который ставится между символом < и именем тега.
Рассмотренные нами теги <h2> и </h2> в HTML фактически считаются одним тегом <h2>. Такой тег называется парным.
Поехали дальше. Парный тег <P> создает на Web-странице абзац; содержимое тега станет текстом этого абзаца. Такой абзац будет отображаться с отступами сверху и снизу. Если он полностью помещается по ширине в окне Web-обозревателя, то отобразится в одну строку; в противном случае сам Web-обозреватель разобьет его на несколько более коротких строк. (То же справедливо и для заголовка.)
Парный тег <STRONG> выводит свое содержимое полужирным шрифтом. Как мы видим, тег <STRONG> вложен внутрь содержимого тега <P>. Это значит, что содержи- мое тега <STRONG> будет отображаться как часть абзаца (тега <P>).
Давайте ради интереса выделим слова «Web-дизайном» курсивом. Для этого поместим соответствующий фрагмент текста абзаца в парный тег <EM>:
<P>Приветствуем на нашем Web-сайте всех, кто занимается
<EM>Web-дизайном</EM>! Здесь вы сможете найти информацию обо всех
.
Сохраним исправленную Web-страницу и обновим содержимое окна Web-обозревателя, нажав клавишу <F5>. Получилось! Да мы уже стали Web-дизайнерами!
Осталось рассмотреть важнейшие правила, согласно которым пишется HTML-код.
— Имена тегов можно писать как прописными (большими), так и строчными (малыми) буквами. Традиционно в языке HTML имена тегов пишут прописными буквами.
— Между символами <, >, / и именами тегов, а также внутри имен тегов не допускаются пробелы и переносы строк.
— В обычном тексте, не являющемся тегом, не должны присутствовать символы < и >. (Эти символы называют недопустимыми.) В противном случае Web- обозреватель сочтет фрагмент текста, где встречается один из этих символов, тегом и отобразит Web-страницу некорректно.
На этом пока закончим. Впоследствии, изучив другие языковые элементы HTML, мы пополним список этих правил.
Поделитесь на страничке
Следующая глава >
Языки программирования для создания сайта самостоятельно
При попытке создать блог или другой ресурс сразу возникает вопрос: какими программами можно создавать сайты, какое программное обеспечение выбрать для конструирования своего блога, интернет-магазина.
Статистика Яндекса указывает, что над вопросом, как создать свой проект, ежедневно задумывается более 1000 человек в день. Поэтому стоит обсудить выбор программ для создания сайта, а также типы языков программирования и порядок их изучения. Конечно, можно пойти на курсы php или обучение программированию и созданию сайтов на WordPress, например. Но если вы решили двигаться самостоятельно, то начать нужно с этой статьи.
Преимущества ручной вёрстки
Для начала стоит указать на преимущества, которые даёт ручное программирование, а также на известные недостатки.
О минусах легко догадаться:
— необходимо научиться программированию и вёрстке, а на это нужно время, терпение, сосредоточенность и упорство;
— создать сайт вручную существенно сложнее, чем при помощи конструктора, а чтобы внести изменения на него, нужно больше времени;
Собственно, это все минусы. Их мало, и ни один из них не связан со скоростью продвижения и качеством веб-сервиса, быстротой его работы. Поэтому крупные компании нанимают программистов и web-мастеров для создания собственных интернет-проектов без использования распространённых CMS.
Преимуществ у ручной вёрстки хватает:
Более высокая индексация. Сейчас можно слышать о том, что Яндекс и Гугл стали одинаково относиться к порталам с ручной вёрсткой и с разработкой на CMS. На самом деле это не так. Никогда сайт, созданный вручную, не будет приравниваться по индексации со своими шаблонными друзьями. Ведь он уникальный, более качественный, работает быстрее.
Быстрая работа и загрузка страниц. Свёрстанный вручную сайт создаёт меньше нагрузки на сервер, так как часть ресурсов не уходит на CMS. Конечно, при хорошем конструкторе в норме этого почти не заметно, но при большом количестве посетителей, загрузка страниц тормозится.
Уникальность сайта. Сейчас топовые CMS-системы хвастаются тысячами шаблонов. Может показаться, что этого хватит, чтобы создать на 100% уникальный проект. На самом деле, большая часть шаблонов будет тематически не применима к конкретно вашему проекту. В результате уникальность портала будет в лучшем случае недостаточной.
Качество портала в первую очередь означает его адаптацию под различные браузеры и любую ширину экрана пользователя (от ПК до смартфона). При создании веб-сервиса на CMS об этом можно спокойно забыть, никаких признаков качества у сайта не будет. При ручной вёрстке создать адаптивный на 100% портал трудно, но вполне достижимо.
Какие программы использовать
Возможно, вы уже знаете, что такое хостинг и домен. Обратите внимание, что на сервер провайдера страницы в формате html, css, php должны заливаться в уже готовом виде. При использовании конструктора таких проблем не возникает, так как страницы создаются прямо на сервере. Но при ручном создании сайта возникает вопрос, как создать документы в формате html, css или php.
Для этого вам понадобится блокнот, который есть на каждом компьютере. Для создания документа любого формата выполняются следующие действия:
Создаёте и открываете страницу блокнота. В ней вы пишите все необходимые коды.
Далее, нажимаете на кнопку «Файл» и потом «Сохранить как», в нижнем поле (прямо под названием документа) автоматически вам предлагает сохранить файл в формате текстового документа (txt). В этом нижнем поле необходимо выбрать пункт «Все типы документов» или «Все файлы».
После этого откроется возможность создать файл любого типа, указав через точку название типа документа. Внешне это никак не проявляется, но если вы напишите после названия .html или .css, то документ будет сохранён в виде системного файла.
Этот шаг не является обязательным. Обычно внизу имеется слово «Кодировка» и поле, в котором указан тип кодировки ANSI. В этом поле можно поменять тип кодировки, сменив значение на UTF-8.
Потом нажимаете «Сохранить» и смотрите на файл, который ваш компьютер распознаёт, как html-документ или системный css или php файл.
Типы языков web-программирования
Их очень много, не один десяток. Однако для создания большинства сайтов достаточно овладеть языками HTML, CSS, JavaScript и PHP. Для создания проектов с регистрацией, сложных форумов, социальных сетей понадобится овладеть программным обеспечением MySQL и языком XML. Но для большинства порталов достаточно первых четырёх способов программирования.
HTML – способ разметки. На нём указываются таблицы, расположение блоков, цвета, шрифт, ссылки. Именно он самый нужный, так как отвечает за наполнение сайта контентом. По сути, html не является языком программирования, так как на нём лишь указывается расположение и формат объектов.
CSS – тоже язык разметки, а не программирования. Название расшифровывается как каскадная таблица стилей. На нём указывают оформление сайта, картинку заднего фона, способ реакции ссылки или кнопки на курсор. Именно CSS задаёт внешний вид блоков с текстами и картинками.
JavaScript – браузерный язык программирования, который работает на стороне пользователя. На нём создаются функциональные элементы (выпадающее меню, всплывающие подсказки). Все эти элементы работают на стороне пользователя, то есть при взаимодействии с ними страница не перезагружается.
PHP – серверный язык программирования, который обеспечивает связь пользователя с сервером. Именно им отдаются команды, передать сообщение на e-mail или зарегистрироваться, создаются поля обратной связи или формы. Для коммерческого сайта он является жизненно важным, ведь иначе нельзя будет взять контактные данные клиента.
MySQL – это не язык, а программное обеспечение или база данных в форме таблиц, в которых сохраняется вся информация об авторизованном пользователе. Для взаимодействия с таблицами из MySQL используется язык SQL.
XML – язык программирования, который отвечает за взаимодействие компьютеров через сеть интернет. Для создания обычных сайтов он не используется, но будет жизненно необходим при создании социальных сетей.
Как изучать языки программирования
Языков существует масса, перечисленные выше представляют не более 10%. К тому же в каждом способе программирования существует множество элементов и нюансов их применения. Поэтому есть смысл пользоваться методикой разумной необходимости, когда сначала изучается минимум знаний для создания сайта, а потом они дополняются по мере надобности.
Начать нужно с HTML и CSS, затем перейти на JavaScript и PHP. При первом изучении языка лучше уделить внимание самым главным особенностям и элементам. Вернуться к более глубокому изучению можно позже, когда появится достаточно знаний для создания сайта. Разумеется, если вы захотите модернизировать и совершенствовать свой блог.
Понравилась статья?
Нет0 Да5 Жду продолжения0
Что собой представляет технология создания веб-сайта на html
От автора: в создании любой вещи, будь то стол, автомобиль или сайт, есть какая-то технология. Но наш портал не выступает в роли столярного справочника или автомобильного журнала, поэтому мы будем разбираться, что такое технология создания веб сайта на html.
Рис. 1. Такие шаги можно выделить в создании сайта.
Как создается сайт
Сразу же скажу, что сайт можно создать по-разному (с помощью движков, конструкторов), но я не зря уже дважды упомянул в тексте слово “html”. Да-да, именно с него все начинается. HTML – это язык, с помощью которого уже более двадцати лет создаются веб-сайты. Это самый главный строительный материал для нашего ресурса.
Вообще если говорить о создании профессионального проекта, то работу над ним всегда начинает веб-дизайнер. Это человек, который рисует внешний вид будущего шаблона в графичеком редакторе. На выходе мы получаем завершенный файл psd, который содержит все слои с необходимыми графическими элементами (например, логотип, иконки и прочие декоративные элементы).

Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
После этого работу продолжает верстальщик, который должен вдохнуть в жизнь красивую картинку, превратив ее в реальный шаблон с сохранением дизайна, нарисованного в макете. Для этого он активно использует языки HTML и CSS, на которых стоит все сайтостроение. В первую очередь, конечно, html, потому что это язык разметки гипертекста и без него невозможно создание абзацев, таблиц, изображений и вообще всего, без чего мы не можем себе представить современный интернет.
Обычно верстальщик создает несколько html-файлов (для разных страниц сайта, которые отличаются дизайном и структурой). А таблица стилей css обычно создается одна. Ее подключают ко всем страничкам и записывают в нее все правила, которые влияют на внешний вид элементов.
Работа с html и css
Я уже немного описал, как выглядит технология создания сайта html. Дальше вся работа происходит в этих нескольких файлах (в html-файлах и общей таблице стилей). Сначала прописывается служебная информация, вроде кодировки, метатегов, заголовка и т.д.
После этого формируется тело страницы. Содержащаяся в этом теге информация и будет выведена на экран. Сначала верстальщик создает основные блоки. Их количество зависит от макета. Стандартный набор: шапка, основная часть из двух-трех колонок и самый нижний блок. В процессе работы вертальщик может использовать любой из способов верстки, но зачастую от него требуется создать все на современных технологиях, адаптировав еще и под старые браузеры.
На самом деле единой технологии в создании сайта не существует. В html его можно сделать таблицами, на фреймах, с помощью блоков (чаще всего), с применением семантических элементов HTML5 и т.д. Сегодня в основном требуется последний вариант, так как это самый современный способ.
Фреймы – совсем уж старый и неудачный эксперимент. Таблицы – все еще возможный путь создания, но чаще всего с их помощью выводят именно табличные данные, а не сайт полностью. Блочная верстка (div + HTML 5 элементы) является самой основной сегодня.
Собственно, процесс создания очень простого сайта на блоках вы можете отследить в этих трех статьях (дать ссылки на те статьи, где разрабатывается простой шаблон). С табличной версткой вы можете познакомиться здесь (ссылка на статью о табличной верстке).
Доработка сайта
После того, как верстка сайта выполнена, ее обычно еще длительное время дорабатывают. Дело в том, что в процессе верстке могло накопиться определенное количество ошибок. Эти ошибки необходимо исправить. Если это необходимо, нужно сделать шаблон кроссбраузерным и адаптивным.
Также любой веб-разработчик стремится к порядку и не желает иметь в своем проекте ничего лишнего. Все изображения, шрифты и скрипты, применяемые при верстке проекта, необходимо разложить по папочкам и прописать к ним правильные пути.
На финальном этапе доработки из проекта удаляются все лишние свойства и теги. Обычно на сервере все файлы сжимают, чтобы они быстрее передавались по сети. Мелкие картинки объединяют в один большой спрайт. Эти меры способствуют значительному увеличению скорости сайта.
Перед тем, как выложить сайт на просторы сети, его проверяют на ошибки. Многие проблемы исправляют уже непосредственно на рабочем проекте. Это является вполне нормальным явлением.
Конечно же, сегодня мало кто использует статические сайты на html, потому что добавлять информацию на такой ресурс очень неудобно. Поэтому после того, как верстка шаблона полностью завершена, работа отнюдь не заканчивается. Следующий этап во многом сложнее. Это посадка, интеграция, натяжка (называйте как хотите) шаблона на одну из популярных CMS. Чаще всего на WordPress или Joomla, так как это самые популярные движки.
Рис. 2. Это wordpress и на нем сегодня делается подавляющее большинство сайтов.
На нашем блоге есть подробные видеокурсы, в которых описана технология создания сайта под эти движки.
Итог
Примерно так и выглядит технология создания веб-сайта на html. Конечно, в этой статье каждый шаг не описан подробно, но пошагово пройти все этапы можно с помощью других материалов на нашем сайте, даже если вы пока абсолютный ноль в сайтостроении.
Подписывайтесь на наш онлайн-журнал, потому что это уникальное место в сети, предлагающее вам огромное количество материала по сайтостроению.

Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
PSD to HTML
Верстка сайта на HTML5 и CSS3 с нуля
Смотреть