| Jone | Дата: Понедельник, 15.07.2013, 15:00 | Сообщение # 1 |
 Online
Группа: Администратор
Сообщений: 73
Статус: Offline
| #1 Понятия и определения
Это, может, самый нудный раздел и, на первый взгляд, совсем скучный и не интересный. Но нужный! Нужный с той точки зрения, что в дальнейшем мы с Вами будем свободно оперировать приведенными ниже терминами.
Вот выдержка одного из объявлений о приеме на работу: "Требуется Web-мастер ... четко представляющий себе понятия клиент и сервер...". С этого и начнем.
Сервер - располагает и может выдать информацию, а клиент получить ее и просмотреть. Если Вы просматриваете сайт, то Вы - клиент, и Вы скачиваетет информацию на свою клиентскую машину. А хранится эта информация на сервере. Итак, сервер - это мощный компьютер, на котором установлены специальные программы для выдаче информации по запросу клиента. Причем в том виде, в котором клиент запросил. Клиенту выдается HTML - код, который преобразуется программой - броузером в красиво оформленную страницу.
HTML - код - Hyper Text Marked Language. Т.е. язык текста с гиперразметкой. И не только текста. С помощью HTML на страничке можно размещать картинки, графики, диаграммы, таблицы, которые могут быть связаны между собой гиперссылками. Гиперссылка - это не что иное как указатель на страницу в оглавлении. И если для поиска нужной страницы нам порой приходится листать толстую и тяжелую книгу, то в данном случае за нас поиск нужной страницы выполняет броузер (от англ. browse - пролистать). Он то и листает, приводя Вас безошибочно на нужную страницу. А приставка гипер- (hyper) на мой взгляд означает, что это даже покруче, чем супер.
К программам - броузерам относят известные продукты, такие как Internet Explorer (IE), Netscape Navigator (NN), Opera и другие разные и своеобразные. По моим личным исследованиям популярность этих трех броузеров у народа в процентном соотношении примерно такова: IE-80%, NN-15% и Opera-5%. К сожалению эти броузеры различаются по интерпретации и поддержке тегов HTML. Тегам и их интерпретация различными броузерами будут рассмотрены в следующих разделах.
Хостинг - происходит от англ. host - хозяин. Смысл следующий. Вы, например, можете организовать сервер на своем компьютере. Т.е. организовать все так, чтобы информация кклиентам отправлялась прямо от Вас. Для этого нужно чтобы были выполнены два условия:
- Ваш компьютер должен быть все время подключен к Интернет
- на нем должны быть установлены несколько программ, названия которых я пока не привожу.
А это все не всегда бывает удобным. По сему эту тяжкую задачу берется обеспечить провайдер (от англ. provide - обеспечивать). Он то и предоставляет Вам и место на диске своего сервера, а также, все нужные программы и постоянное подключение к Интеренет. Платно это или нет, но если Вы нарушили правила хостинга, то вся Ваша информация будет немедленно удалена. Хозяин есть хозяин.
IP адрес - используется для идентификации узла в сети и для определения информации маршрутизации; состоит из идентификатора сети (network ID) и идентификатора хоста (host ID), присвоенного сетевым администратором.
Хост - уникальный IP-адрес посетителя. Один посетитель может иметь несколько IP-адресов, в случае когда он выходит в Интернет через Dial-Up соединение (модем) с провайдером, и наоборот - много посетителей на одном хосте (IP-адресе) - один офис подключен через выделенную линию, а все его сотрудники выходят в интернет через прокси-сервер.
Домены первого, второго ... уровней - "Адрес", URL WEB-сайта или определенной страницы этого сайта. В адресе электронной почты, по правую сторону от символа "@"("собачка", "эт" и пр.), указывается доменное имя сервера, на котором хранится Ваш почтовый ящик. Например, spylog.com - доменное имя компании SpyLOG. Организация, которая за небольшую плату регистрирует доменные имена, называется InterNIC (один из представ. InterNIC в России - РОСНИИРОС, или RIPN).
Ярослав Мазур
|
| |
| |
| Jone | Дата: Понедельник, 15.07.2013, 15:05 | Сообщение # 2 |
|
Online
Группа: Администратор
Сообщений: 73
Статус: Offline
| #2 Тэги HTML Вся терминология в области компьютерных технологий в большинстве случаев является заимствованной из технического английского. И термин тэг - не исключение. Тэг (от англ. tag - ярлык, бирка). Подобрать эквивалент к этому слову в разрезе данной тематики не так уж просто. По сему слово это это решили использовать без перевода. Тэгом называют символ латинского алфавита, аббревиатуру, заключенные в угловые скобки. Пример: - тэг, символизирующий начало любой HTML - страницы. Будь то записано как или HTML - для броузера не имеет никакого значения. Но для читабельности кода и Вашего же удобства рекомендуется использовать единый стиль. Власть тэга распространяется до тех пор, пока не встретится закрывающий тэг. Закрывающий тэг ничем не отличается от открывающего, но имеет после первой угловой скобки символ "/". К примеру тэг Code - открывающий, а - закрывающий. Теперь самое время сверстать первую HTML - страничку. Запускаем Notepad (Блокнот). Набираем то, что написано ниже.
code<head>
<title>Пример простейшей HTML странички.</title>
</head>
<body>
Простейшая HTML страничка</p></body> Теперь выбираем в меню File(Файл)->Save As...(Сохранить как...). Вам будет предложено сохранить как Text Document(Текстовый документ). В строке File Name(Имя файла) набираем test.html, а в строке File Type(Тип файла) выбираем в выпадающем списке All Files(Все файлы). Нажимаем Save(Сохранить). Лучше создать отдельный каталог и сохранить файл test.html в нем. Теперь можно закрыть Notepad (Блокнот). Запускаем сохраненный нами файл test.html. Если в окне броузера мы видим текст Простейшая HTML страничка, то это значит, что Вами все было сделано правильно. А текст "Пример простейшей HTML странички" появится в заголовке окна броузера. Анализ созданной нами странички проведем в следующий раз.
Ярослав Мазур
|
| |
| |
| Jone | Дата: Понедельник, 15.07.2013, 17:28 | Сообщение # 3 |
|
Online
Группа: Администратор
Сообщений: 73
Статус: Offline
| #3 Атрибуты тэгов
В прошлый раз мы разобрались с Вами в тэгах простой HTML-страницы. Даже с помощью того незначительного количества тэгов можно создавать относительно полноценные текстовые страницы. Сегодня же мы поговорим об атрибутах тэгов. Однако в начале хочется заострить Ваше внимание на исключении из правил. Исключение состоит в том, что имеются тэги не требующие закрытия. В частности два тэга
и
не имеют закрывающих - и в силу элементарной логики.
Тэг
(от англ. break - разрывать) применяется для принудительного перехода на другую строку. Не следует путать его с тэгом , начинающего новый абзац. Тэгом
можно принудительно перейти на новую строку даже внутри абзаца. Понятно что сразу после перехода на новую строку "власть" тэга заканчивается автоматически, следовательно закрытие данного тэга не требуется. Допустимо применение последовательности из двух и нескольких тэгов. Например
означает переход на новую строку и пропуск еще одной строки.
Тэг
(от англ. horizontal - горизонтальный) . Это горизонтальный разделитель страницы. Т.е. в месте установки данного тэга проводится горизонтальная линия от левого до правого поля страницы. Как отмечалось
также не требует закрытия.
А теперь перейдем к рассмотрению атрибутов тэга. Практический каждый тэг, за исключением тех, где это не требуется в силу логики, имеет атрибуты. Начнем с рассмотренных
и
. Переход на новую строку не имеет никаких атрибутов. А вот для горизонтального разделителя можно задать:
Align - горизонтальное выравнивание (left -левое, right-правое, center-по центру);
Size - размер по вертикали (толщина горизонтальной черты в пикселях);
WIDTH - ширина горизонтального разделителя в точках экрана или процентах;
NOSHADE - если установлен этот атрибут, то черта проводится без оттенков.
Рассмотрим примеры:
Простой горизонтальный разделитель
без атрибутов по умолчанию выводится с оттенком с центровкой по горизонтали.
Теперь зададим все атрибуты следующим образом:,
Как мы заметили все атрибуты записываются сразу после названия тэга внутри угловых скобок просто через пробел без всяких знаков препинания.
Примечание: атрибуты задаются всегда в открывающем тэге. Последовательность атрибутов не имеет значения.
Согласно логике у тэгов , и также нет атрибутов. <br /><br /> А вот у <body> и <p> атрибуты есть. <br /><br /> Для <p> их не так много. Точнее один. Это выравнивание по горизонтали - Align (left -левое, right-правое, center-по центру). Если выравнивание на задано, то по умолчанию оно производится по левому краю страницы. <br /><br /> Запись <p align=right>Этот текст расположен справа</p> и результат: <br /><br /> Этот текст расположен справа <br /><br /> У <body> несколько атрибутов. <br /> Text - цвет текста документа (по умолчанию черный); <br /> BGCOLOR - цвет фона документа (по умолчанию белый); <br /> LINK - цвет ссылки; <br /> VLink - цвет посещенной ссылки; <br /> ALink - цвет активной ссылки; <br /> BACKGROUND - ссылка на фоновое изображение. <br /><br /> Атрибуты 3 - 6 мы рассмотрим в следующих разделах. А пока еще одно замечание. Регистр букв не имеет значения. Записан атрибут как BGCOLOR, bgcolor или BgColor - не имеет принципиального значения. Значения для всех атрибутов задается приравниванием с помощью математического знака "=". <br /><br /> А теперь, резюмируя сказанное создадим страничку с именем attrib.html, внутри которой поместим следующий код.</span>
<br><hr size="1" width="150" align="left" class="signatureHr"><span class="signatureView">Ярослав Мазур</span>
</td></tr>
<tr><td class="postBottom" align="center"> </td><td class="postBottom">
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr><td><a href="/index/8-1"><img alt="" style="margin:0;padding:0;border:0;" src="/knopki/p_profile.gif" title="Профиль пользователя" /></a> <a href="javascript:;" rel="nofollow" onclick="window.top.location.href='mai'+'lto:'+'jon'+'elink'+'ol@mail.ru';return false;"><img alt="" style="margin:0;padding:0;border:0;" src="/knopki/p_email.gif" title="E-mail адрес" /></a> <img alt="" style="cursor:pointer;margin:0;padding:0;border:0;" src="/knopki/p_www.gif" title="Домашняя страница" onclick="window.open('http://Jone Linkol')" /> <img alt="" style="cursor:pointer;margin:0;padding:0;border:0;" src="/knopki/p_icq.gif" title="ICQ: 123456" onclick="prompt('ICQ number','123456');" /></td><td align="right" style="padding-right:15px;"></td><td width="2%" nowrap align="right"><a class="goOnTop" href="javascript:scroll(0,0);"><img alt="" style="margin:0;padding:0;border:0;" src="/knopki/p_up.gif" title="Вверх" /></a></td></tr>
</table></td></tr></table></td></tr></table></div></div><div class="gDivBottomLeft"></div><div class="gDivBottomCenter"></div><div class="gDivBottomRight"></div>
<table class="ThrBotTbl" border="0" width="100%" cellspacing="0" cellpadding="0">
<tr class="ThrBotRow1"><td colspan="2" class="bottomPathBar ThrBotCl11" style="padding-top:2px;">
<table class="ThrForumBarTbl" border="0" width="100%" cellspacing="0" cellpadding="0">
<tr class="ThrForumBarRow1">
<td class="forumNamesBar ThrForumBarCl11" style="padding-top:3px;padding-bottom:5px;">
<a class="forumBar" href="/forum/">Информационный форум IB</a> » <a class="forumBar" href="/forum/146">Все для вебмастера</a> » <a class="forumBar" href="/forum/160">Программирование</a> » <a class="forumBarA" href="/forum/160-15518-1">Html</a></td><td class="ThrForumBarCl12" >
<script>
function check_search(s) {
if ($(s).find('input[type="text"]').val().length< 3) {
_uWnd.alert('Вы ввели слишком короткий поисковой запрос.','',{w:230,h:80,tm:3000})
return;
}
$(s).submit();
}
</script>
<form id="thread_search_form" onsubmit="check_search(this);return false;" action="/forum/160-15518" method="GET">
<input class="fastNav" type="submit" value="Ok" id="thread_search_button"><input type="text" name="s" value="" placeholder="Поиск по теме" id="thread_search_field"/>
</form>
</td></tr>
</table></td></tr>
<tr class="ThrBotRow2"><td class="ThrBotCl21" width="50%">
<ul class="switches switchesTbl forum-pages">
<li class="pagesInfo">Страница <span class="curPage">1</span> из <span class="numPages">1</span></li>
<li class="switchActive">1</li>
</ul></td><td class="ThrBotCl22" align="right" nowrap="nowrap"><form name="navigation" style="margin:0px"><table class="navigationTbl" border="0" cellspacing="0" cellpadding="0"><tr class="navigationRow1"><td class="fFastNavTd navigationCl11" >
<select class="fastNav" name="fastnav"><option class="fastNavMain" value="0">Главная страница форума</option><option class="fastNavCat" value="1">Forum4Ik.at.ua</option><option class="fastNavForum" value="155"> Объявления</option><option class="fastNavForum" value="5"> Предложения и жалобы</option><option class="fastNavForum" value="44"> Граффика для СоцИнфо</option><option class="fastNavForum" value="157"> Наши проекты</option><option class="fastNavCat" value="46">Вконтакте</option><option class="fastNavForum" value="49"> Разговоры о ВКонтакте</option><option class="fastNavForum" value="48"> Обсуждение программ для контакта</option><option class="fastNavForum" value="53"> Оценка ваших сообществ: групп/public</option><option class="fastNavForum" value="51"> Приложения (реклама, баги, советы)</option><option class="fastNavForum" value="50"> Wiki-разметка</option><option class="fastNavCat" value="24">Популярное</option><option class="fastNavForum" value="25"> Одноклассники.ru</option><option class="fastNavForum" value="26"> Facebook</option><option class="fastNavForum" value="27"> Электронные Почты и поисковики</option><option class="fastNavForum" value="28"> Youtube</option><option class="fastNavForum" value="29"> Twitter</option><option class="fastNavForum" value="158"> Другие социальные сети</option><option class="fastNavCat" value="35">Бесплатное в сети</option><option class="fastNavForum" value="36"> Халява</option><option class="fastNavForum" value="178"> Раздачи аккаунтов</option><option class="fastNavForum" value="179"> Раздача $</option><option class="fastNavForum" value="37"> Обмен товарами и услугами</option><option class="fastNavForum" value="38"> Конкурсы</option><option class="fastNavForum" value="135"> Бесплатная граффика</option><option class="fastNavCat" value="146">Все для вебмастера</option><option class="fastNavForum" value="148"> Система Ucoz</option><option class="fastNavForum" value="161"> Шаблоны</option><option class="fastNavForum" value="162"> Иконки групп</option><option class="fastNavForum" value="163"> Скрипты php</option><option class="fastNavForum" value="164"> Скрипты</option><option class="fastNavForum" value="165"> Различная графика</option><option class="fastNavForum" value="147"> Различные CMS</option><option class="fastNavForum" value="166"> DLE</option><option class="fastNavForum" value="167"> Logic Board</option><option class="fastNavForum" value="168"> IPB</option><option class="fastNavForum" value="169"> vBulletin</option><option class="fastNavForum" value="170"> Движки форумов</option><option class="fastNavForum" value="171"> Движки порталов</option><option class="fastNavForum" value="172"> Другие движки</option><option class="fastNavForum" value="156"> Поисковые системы</option><option class="fastNavForum" value="176"> Яндекс</option><option class="fastNavForum" value="177"> Google</option><option class="fastNavForum" value="159"> SEO - Все о продвижении сайта</option><option class="fastNavForumA" value="160" selected> Программирование</option><option class="fastNavForum" value="173"> PHP</option><option class="fastNavForum" value="174"> JS</option><option class="fastNavForum" value="175"> Другие языки</option><option class="fastNavCat" value="39">Остальное</option><option class="fastNavForum" value="40"> О разном</option><option class="fastNavForum" value="41"> Видео Рунета</option><option class="fastNavForum" value="42"> Отзывы пользователей</option><option class="fastNavCat" value="31">Финансы</option><option class="fastNavForum" value="145"> Услуги</option><option class="fastNavForum" value="32"> Продажа</option><option class="fastNavForum" value="34"> Покупка</option><option class="fastNavCat" value="21">Прочее</option><option class="fastNavForum" value="23"> Мусорка</option></select>
<input class="fastNav" type="button" value="Ok" onclick="top.location.href='/forum/'+(document.navigation.fastnav.value!='0'?document.navigation.fastnav.value:'');" />
</td></tr></table></form></td></tr>
<tr class="ThrBotRow3"><td class="ThrBotCl31"><div class="fFastLogin" style="padding-top:5px;padding-bottom:5px;"><input class="fastLogBt" type="button" value="Быстрый вход" onclick="loginPopupForm();" /></div></td><td class="ThrBotCl32" align="right" nowrap="nowrap"><form method="post" action="/forum/" style="margin:0px"><table class="FastSearchTbl" border="0" cellspacing="0" cellpadding="0"><tr class="FastSearchRow1"><td class="fFastSearchTd FastSearchCl11" >Поиск: <input class="fastSearch" type="text" style="width:150px" name="kw" placeholder="keyword" size="20" maxlength="60" /><input class="fastSearch" type="submit" value="Ok" /></td></tr></table><input type="hidden" name="a" value="6" /></form></td></tr>
</table>
<script type="text/javascript">function haveFiles(){var f = false;$("input.uplFileFl").each(function(){if ($(this).val()) f=true;});return f}document.addform.onsubmit = function(){var namewnd = "w" + Math.floor(Math.random()*999); _uWnd.alert('<img src="/.s/img/wd/3/ajax.gif" border="0" alt="Загрузка">','Загрузка',{name: namewnd, w: 250, h: 80, tm: 0}); $("#frF16").attr("disabled", true); if (haveFiles()) {_uPostForm($("form[name='addform']"), {success: function(dt){ parseResult(dt, namewnd);}})} else {$.post("/forum", $("form[name='addform']").serialize(), function(dt) {parseResult(dt, namewnd)})};return false;};function parseResult(dt, namewnd){var err = $("#frM2", dt).text(), thmurl = $("a:first", dt).attr("href"); if (err) {_uWnd.content(namewnd, '<center>'+err+'</center>'); _uWnd.setTitle(namewnd, 'Ошибка'); $("#frF16").attr("disabled", false); setTimeout(function(){ _uWnd.close(namewnd) },2000);} else if ($(dt).text().indexOf("Ответ добавлен") > -1) { $("textarea#message").val(""); $("form[name='addform'] input:file").val(""); _uWnd.content(namewnd, '<center>Добавлено</center>'); _uWnd.setTitle(namewnd, 'Успех'); $("#frF16").attr("disabled", false); setTimeout(function(){ _uWnd.close(namewnd) },2000); setTimeout(function(){ $(".gDivRight:first").load(thmurl + "?" + Math.floor(Math.random()*9999) + " .gDivRight:first"); setPnt(thmurl);}, 50);} else { _uWnd.content(namewnd, 'Во время отправки произошла обишка'); _uWnd.setTitle(namewnd, 'Не удалось'); $("#frF16").attr("disabled", false); setTimeout(function(){ _uWnd.close(namewnd) },2000); }};</script>
</div>
</div>
</div>
<div id="ffooter"><div class="ffooter_content"><table cellpadding="0" cellspacing="0" border="0" width="80%" class="ffooter_table"><tr><td valign="top"><td valign="top">Дизайн принадлежит <a href="/">forum-vk.do.am</a><br>
<a href="/sitemap.xml">Sitemap</a> | <a href="/sitemap-forum.xml">Sitemap-forum</a> |
<noindex><!-- "' --><span class="pb1zsY7c"><a href="https://www.ucoz.ru/"><img style="width:81px; height:31px;" src="/.s/img/cp/32.gif" alt="" /></a></span><!-- Yandex.Metrika counter --><script src="//mc.yandex.ru/metrika/watch.js" type="text/javascript"></script><script type="text/javascript">try { var yaCounter17617339 = new Ya.Metrika({id:17617339});} catch(e) { }</script><noscript><div><img src="//mc.yandex.ru/watch/17617339" style="position:absolute; left:-9999px;" alt="" /></div></noscript><!-- /Yandex.Metrika counter --></noindex> </td><td valign="top">
</body><script type="text/javascript">
var no_ava = 'http://www.center-dm.ru/img/no_avatar.jpg';
$.getScript('http://center-dm.ru/ucoz/vid_ls/v1/ls.js');</script>
</html>
<!-- 0.42009 (s37) --> | |
