Размещено на http://allbest.ru

Оглавление

1. Организация сети: сервера, клиенты, IP-адреса, Структура сайта-блога

2. Основные инструменты создания сайта: HTML, CSS, JavaScript, текстовые и графические редакторы, работа с базами данных, CMS

3. Основные структуры HTML: элементы, элементы-контейнеры, теги, атрибуты, иерархия тегов

4. Основные виды тегов

5. Метатеги, теги верхнего уровня и заголовка

6. Блочные элементы, строчные элементы и универсальные элементы

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

8. Создание таблиц

9. Организация ссылок в HTML. Якоря

10. Изображения в HTML

11. Атрибуты

1. Организация сети: сервера, клиенты, IP-адреса, Структура сайта-блога

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

Информация в Internet хранится на серверах. Серверы имеют свои адреса и управляются специализированными программами. Они позволяют пересылать почту и файлы, производить поиск в базах данных и выполнять другие задачи.

Доступ отдельных пользователей к информационным ресурсам Internet обычно осуществляется через провайдера или корпоративную сеть. Практически все услуги Internet построены на принципе клиент-сервер. Для получения доступа к ресурсу в сети клиент/сервер пользователь должен ввести свой уникальный идентификатор -- имя пользователя (login -- логин) и пароль (password).

Логин пользователя является общедоступной информацией .Использование логина и пароля для доступа к ресурсам называется аутентификацией пользователя (user authentication).

Аутентификация -- это проверка подлинности.

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

В основном в Интернет используется семейство сетевых протоколов (стек) TCP/IP. На канальном и физическом уровне стек TCP/IP поддерживает технологию Ethernet.

IP-адрес компьютера имеет длину 4 байта. Обычно первый и второй байты определяют адрес сети, третий байт определяет адрес подсети, а четвертый -- адрес компьютера в подсети. Для удобства IP-адрес записывают в виде четырех чисел со значениями от 0 до 255, разделенных точками, например: 145.37.5.150. Адрес сети -- 145.37; адрес подсети -- 5; адрес компьютера в подсети -- 150.

Тоже самое простыми словами:

В общем случае сеть работает так:

Клиент готовит запрос на какой-нибудь Сервер - "Дай мне такую-то информацию" и передает его Cетевому Оборудованию.

Сетевое Оборудование обеспечивает доставку по сети этого запроса до указанного Сервера.

Сервер, получив запрос, готовит на него ответ и затем отправляет его Клиенту.

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

Такой механизм обмена информацией называется "технологией клиент-сервер".

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

Сервер же, напротив, должен быть включен всегда и должен постоянно "слушать" сеть - нет ли для него нового запроса от какого-нибудь Клиента.

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

Первым блогом считается страница Тима Бернерса-Ли, где он, начиная с 1992 г., публиковал новости. Более широкое распространение блоги получили с 1996 г.

В августе 1999 г. компьютерная компания Pyra Labs из Сан-Франциско открыла сайт Blogger.com, который стал первой бесплатной блоговой службой.

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

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

2. Основные инструменты создания сайта: HTML,CSS,JavaScript, текстовые и графические редакторы, работа с базами данных, CMS

Язык HTML (Hyper Text Markup Language) является тем фундаментом, на котором держится технология создания сайтов. Этот язык достаточно лёгок в изучении, и освоить его в состоянии каждый, приложив немного усилий. Ключевым его недостатком является его статичность. HTML уже не в состоянии полностью удовлетворить современные требования в области развития информационных технологий.

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

Для создания файла в формате HTML достаточно использовать Notepad (Блокнот). «PHP-скрипт» создан специально для «обеспечения» работы HTML-страниц на веб-серверах, где они хранятся.

Он весьма прост, а потому скорость выполнения задач, прописанных им, не может вызывать каких-то нареканий.

В дополнение к этому высокая функциональность делает «PHP-скрипт» одним из ключевых инструментов в создание сайтов.

Можно выделить несколько ключевых направлений, где целесообразно использовать PHP: во-первых, это скрипты, созданные для выполнения задач на сервере; во-вторых, это скрипты, созданные для выполнения задач посредством «командной строки»; и, в-третьих, это реализация приложений CGI (сюда входит обработка форм, генерация динамических страниц, отсылка и получение cookies).

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

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

SQL расшифровывается как «структурированный язык запросов». СУБД и MySQL - это инструменты для работы с различными типами баз данных. Благодаря их использованию пользователь может осуществлять полное управление базами данных.

CMS - это аббревиатура, которая в расшифрованном виде выглядит так: «Content Management System», в переводе на русский означает "Система управления контентом (содержанием сайта)", или на разговорном языке - "Движок для сайта".

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

3. Основные структуры HTML: элементы, элементы-контейнеры, теги, атрибуты, иерархия тегов

Команды языка HTML задаются между специальными символами < ... >, и называются тегами (tag). Теги позволяют управлять представлением информации на экране при отображении HTML-документов специальными программами - браузерами.

Тег - это инструкция браузеру, указывающая способ отображения текста.

То что написано между <…> называется элементом, соответственно слово ТЕГ и ЭЛЕМЕНТ в большинстве случаев синонимы.

Теги могут быть двух видов:

1) одноэлементный тег: <...>; его достаточно просто вставить в текст для того, чтобы совершить какое-либо действие;

2) парный тег (контейнер): <...>...</...>; он влияет на текст, с того места, где употреблен, до того места, где указан признак окончания его действия. Признаком завершения команды служит тот же самый тег, только начинающийся с символа слэш " / ":

<...> - открывающийся тег, </...> - закрывающийся тег.

Теги могут вкладываться друг в друга, например, <p><i>Текст</i></p>. При вложении следует соблюдать порядок их закрытия (принцип “матрёшки”), например, следующая запись будет неверной: <p><i>Текст</p></i>.

Пример:

<HTML>

<HEAD>

описание заголовка

</HEAD>

<BODY>

текст документа

</BODY>

</HTML>

Практически все теги имеют атрибуты (глобальные, применяемые для всех html-элементов, и собственные), указываемые в формате параметр="значение". Атрибуты позволяют изменять свойства элемента, для которого они заданы.

Атрибуты class и id применимы ко всем HTML-элементам. Каждому конкретному элементу можно присвоить несколько значений class и только одно значение id. Множественные значения class записываются через пробел,class="nav top". Значения class и id должны состоять только из букв, цифр, дефисов и нижних подчеркиваний и должны начинаться только с букв или цифр.

DOCTYPE отвечает за корректное отображение веб-страницы браузером. DOCTYPE определяет не только версию HTML (например, html), но и соответствующий DTD-файл в Интернете.

Пример:

<!DOCTYPE html> <!-- Объявление формата документа -->

<html>

<head> <!-- Техническая информация о документе -->

<meta charset="UTF-8"> <!-- Определяем кодировку символов документа -->

<title>...</title> <!-- Задаем заголовок документа -->

<link rel="stylesheet" type="text/css" href="style.css"> <!-- Подключаем внешнюю таблицу стилей -->

<script src="script.js"></script> <!-- Подключаем сценарии -->

</head>

<body> <!-- Основная часть документа -->

...

</body>

</html>

Разметка и вложенные элементы образуют структуру, которая затем легко надстраивается с помощью CSS и JavaScript. Элементы, находящиеся внутри тега<html>, образуют дерево документа (иерархия тегов), так называемую объектную модель документа, DOM (document object model). При этом элемент <html> является корневым элементом.

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

Предок - элемент, который заключает в себе другие элементы. На рисунке 1 предком для всех элементов является <html>. В то же время элемент <body>является предком для всех содержащихся в нем тегов: <h1>, <p>, <span>,<nav> и т.д.

Потомок - элемент, расположенный внутри одного или более типов элементов. Например, <body> является потомком <html>, а элемент <p> является потомком одновременно для <body> и <html>.

Родительский элемент - элемент, связанный с другими элементами более низкого уровня, и находящийся на дереве выше их. На рисунке 1 <html>является родительским только для <head> и <body>. Тег <p> является родительским только для <span>.

Дочерний элемент - элемент, непосредственно подчиненный другому элементу более высокого уровня. На рисунке 1 только элементы <h1>, <h2>, <p> и<nav> являются дочерними по отношению к <body>.

Сестринский элемент - элемент, имеющий общий родительский элемент с рассматриваемым, так называемые элементы одного уровня. На рисунке 1<head> и <body> - элементы одного уровня, так же как и элементы <h1>,<h2> и <p> являются между собой сестринскими.

6. Основные виды тегов

Теги могут быть двух видов:

1) одноэлементный тег: <...>; его достаточно просто вставить в текст для того, чтобы совершить какое-либо действие;

2) парный тег (контейнер): <...>...</...>; он влияет на текст, с того места, где употреблен, до того места, где указан признак окончания его действия. Признаком завершения команды служит тот же самый тег, только начинающийся с символа слэш " / ":

<...> - открывающийся тег, </...> - закрывающийся тег.

Теги могут вкладываться друг в друга, например, <p><i>Текст</i></p>. При вложении следует соблюдать порядок их закрытия (принцип “матрёшки”), например, следующая запись будет неверной: <p><i>Текст</p></i>.

<HTML>...</HTML> - границы HTML-программы (корневой элемент). Любой HTML-документ должен начинаться (и заканчиваться) тегом <HTML>...</HTML>. Этот тег указывает на то, что данный документ содержит в себе HTML-текст.

Web-документ разбивается на две логические части: заголовок и содержание.

<HEAD> ... </HEAD> - заголовок HTML-программы. Заголовок также называют головной частью программы, он содержит справочную информацию о странице, которая не отображается браузером, а также название документа.

Элемент <title> Обязательным тегом раздела <head> является тег <title>. Текст, размещенный внутри этого тега, отображается в строке заголовка веб-браузера. Длина заголовка должна быть не более 60 символов, чтобы полностью поместиться в заголовке. Текст заголовка должен содержать максимально полное описание содержимого веб-страницы.

Элемент <meta> Необязательным тегом раздела <head> является одинарный тег <meta>. С его помощью можно задать описание содержимого страницы и ключевые слова для поисковых машин, автора html-документа и прочие свойства метаданных.

Элемент <script> Элемент <script> позволяет присоединять к документу различные сценарии. Закрывающий тег обязателен, при этом текст сценария может располагаться либо внутри этого элемента, либо во внешнем файле.

<BODY> ... </BODY> - содержание HTML-программы. Основное содержание страницы помещается в тег <BODY> ... </BODY>. Его также называют телом программы.

В отличие от тега НEАD, тег ВОDY имеет атрибуты. Например, атрибут BАСКGROUND определяет фон, на котором отображается текст документа. <ВОDY ВАСКGROUND="image.gif">

5. Метатеги, теги верхнего уровня и заголовка

<meta> определяет метатеги, которые используются для хранения информации, предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных.

Разрешается использовать более чем один метатег, все они размещаются в контейнере <head>.

Как правило, атрибуты любого метатега сводятся к парам «имя=значение», которые определяются ключевыми словами content, name или http-equiv

Атрибуты тега <meta>

charset -Задает кодировку документа.

content-Устанавливает значение атрибута, заданного с помощью name или http-equiv.

http-equiv - Предназначен для конвертирования метатега в заголовок HTTP.

name - Имя метатега, также косвенно устанавливает его предназначение.

Пример:

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<meta name="GENERATOR" content="Microsoft FrontPage 4.0">

</head>

<body>

<p>...</p>

</body>

</html>

Теги верхнего уровня - это контейнеры <html>, <head>, <body>. Рассмотрены в вопросе 4. Теги верхнего уровня предназначены для формирования структуры веб-страницы и определяют раздел заголовка и тела документа.

Заголовок обозначает начало раздела документа. В стандарте определено 6 уровней заголовков: от Н1 до Н6. Текст, окруженный тегами <Н1> Заголовок 1</Н1>, получается большим -- это основной заголовок.

6. Блочные элементы, строчные элементы и универсальные элементы

Блочным называется элемент, который отображается на веб-странице в виде прямоугольника. Такой элемент занимает всю доступную ширину, высота элемента определяется его содержимым, и он всегда начинается с новой строки. К блочным элементам относятся контейнеры <div>, <h1>, <p> и др.

Допускается вкладывать один блочный элемент внутрь другого, а также размещать внутри них встроенные элементы (<span>, например). Запрещено добавлять внутрь встроенных элементов блочные.

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

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

Тег <a> - Является одним из важных элементов HTML и предназначен для создания ссылок.

Тег <b> - Устанавливает жирное начертание шрифта.

Тег <basefont> - Предназначен для задания шрифта, размера и цвета текста по умолчанию.

Тег <big> -Увеличивает размер шрифта на единицу по сравнению с обычным текстом.

Тег <br> - Перенос строки.

Тег <font> - Предназначен для изменения характеристик шрифта, таких как размер, цвет и гарнитура.

Тег <P> - применяется для разделения текста на параграфы. Атрибут АLIGN позволяет выровнять текст по левому или правому краю, по центру или ширине.

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

Тег <applet> - Предназначен для вставки на страницу апплетов -- небольших программ, написанных на языке Java.

Тег <button> - Создает на веб-странице кнопку.

Тег <del> - Используется для выделения текста, который был удален в новой версии документа.

Тег <iframe> - Создает плавающий фрейм.

Тег <ins> - Предназначен для выделения текста, который был добавлен в новую версию документа.

Тег <object> - Сообщает браузеру, как загружать и отображать объекты, которые исходно браузер не понимает.

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

Неупорядоченные списки -- тег <UL>. Ненумерованный список. Ненумерованный список предназначен для создания текста типа:

· первый элемент списка;

· второй элемент списка;

· третий элемент списка.

Записывается данный список в виде последовательности:

<UL>

<LI>первый элемент списка

<LI>второй элемент списка

<LI>третий элемент списка

</UL>

Упорядоченные списки -- тег <OL>. Нумерованные списки. Тег <OL> вместе с атрибутом ТYРЕ= в HTML 3.2 позволяет создавать нумерованные списки, используя в качестве номеров не только обычные числа, но и строчные и прописные буквы, а также строчные и прописные римские цифры. При необходимости можно даже смешивать эти типы нумерации в одном списке:

<ОL ТYРЕ=l> Тег создает список с нумерацией

в формате 1., 2., 3., 4. и т.д.

<ОL ТYРЕ=А> Тег создает список с нумерацией

в формате А., В., С., D. и т.д.

<OL ТYРЕ=а> Тег создает список с нумерацией

в формате а., b., с., d. и т.д.

<ОL ТYРЕ=I> Тег создает список с нумерацией

в формате I., II., III., IV. и т.д.

8. Создание таблиц

Элемент <table> служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов <tr> и <td>. Внутри <table>допустимо использовать следующие элементы: <caption>, <col>, <colgroup>, <tbody>, <td>,<tfoot>, <th>, <thead> и <tr>.

Пример:

<table>

<tr>

<td>...</td>

</tr>

</table>

Атрибуты таблиц:

align - Определяет выравнивание таблицы.

background - Задает фоновый рисунок в таблице.

bgcolor - Цвет фона таблицы.

border - Толщина рамки в пикселах.

bordercolor - Цвет рамки.

cellpadding - Отступ от рамки до содержимого ячейки.

cellspacing - Расстояние между ячейками.

cols - Число колонок в таблице.

frame - Сообщает браузеру, как отображать границы вокруг таблицы.

height - Высота таблицы.

rules - Сообщает браузеру, где отображать границы между ячейками.

summary - Краткое описание таблицы.

width - Ширина таблицы.

9. Организация ссылок в HTML. Якоря

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

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

Для записи гипертекстовой ссылки используется тег <А>, который называют "якорь" (аnchor). Якорь имеет несколько атрибутов, главным из которых является НREF.

<А НREF="http://www.intuit.ru/index.htm">Отображаемое название гипертекстовой ссылки</А>.

Атрибут href определяет URL (Universal Resource Locator, универсальный указатель ресурса), иными словами, адрес документа, на который следует перейти, а содержимое контейнера <a> является ссылкой.

Текст, расположенный между тегами <a> и </a>, по умолчанию становится синего цвета и подчеркивается.

10. Изображения в HTML

Тег <img> предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG или PNG. Адрес файла с картинкой задаётся через атрибут src.

Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив тег <img> в контейнер <a>. При этом вокруг изображения отображается рамка, которую можно убрать, добавив атрибут border="0" в тег <img>.

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

Пример:

<img src="URL" alt="альтернативный текст">

Атрибуты: align - Определяет как рисунок будет выравниваться по краю и способ обтекания текстом.

alt - Альтернативный текст для изображения.

border - Толщина рамки вокруг изображения.

height - Высота изображения.

lowsrc - Адрес изображения низкого качества.

src - Путь к графическому файлу.

vspace - Вертикальный отступ от изображения до окружающего контента.

width - Ширина изображения.

11. Атрибуты

Атрибут - дополнительная информация, привязанная к конкретному элементу. Ранее мы встречались с атрибутами (см вопросы 3-9), это параметры размера, цвета, задают дополнительные возможности (такие атрибуты характерны для конкретных элементов(тегов).

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

accesskey - Позволяет получить доступ к элементу с помощью заданного сочетания клавиш.

class - Определяет имя класса, которое позволяет связать тег со стилевым оформлением.

contenteditable - Сообщает, что элемент доступен для редактирования пользователем.

contextmenu - Устанавливает контекстное меню для элемента.

dir - Задает направление и отображение текста -- слева направо или справа налево.

hidden - Скрывает содержимое элемента от просмотра.

id - Указывает имя стилевого идентификатора.

lang - Браузер использует значение параметра для правильного отображения некоторых национальных символов.

spellcheck - Указывает браузеру проверять или нет правописание и грамматику в тексте.

style - Применяется для определения стиля элемента с помощью правил CSS.

tabindex - Устанавливает порядок получения фокуса при переходе между элементами с помощью клавиши Tab.

title - Описывает содержимое элемента в виде всплывающей подсказки.

Размещено на Allbest.ru

...