Код:

Lilitochka-club

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Lilitochka-club » Уроки по созданию сайтов » Программирование на языке HTML


Программирование на языке HTML

Сообщений 1 страница 20 из 29

1

Урок первый.
Наша первая страничка.
Открываем установленный заменитель "Блокнота" - "Bred3". Где его взять и как установить, я описывал в разделе "Введение в программирование" в теме "Необходимые программы".
Вписываем туда следующий html-код:

Код:
<html>
<head>
     <title>Lilitochka-club - Главная страница</title>
</head>
<body>
     Hello World!
</body>
</html>

Получится у вас примерно следующее:
http://i045.radikal.ru/1102/02/0028201dd621.jpg
Теперь откройте меню "Файл" => "Сохранить как..."
В открывшемся окне в боковой панели, нажмите ярлык "Мой компьютер" и выберите место куда вы хотите сохранить созданную веб-страницу.
После этого напротив надписи "Имя файла:" введите имя с расширением файла.
Примеры (имя.расширение):
1. index.html
2. index.htm
Если вы хотите опубликовать страничку в интернете, то имя файла должно быть написано только латинскими буквами. Главная страница обычно называется "index", это главное условие, потому что все поисковики и хостинги так настроены, что ищут и регистрируют главную страницу в первую очередь с таким именем. Названия страницы сайта не должно содержать пробела, т.е. такое название как: "cool server" будет считаться не верным, но можно написать вот так: "cool_server". Имя веб-страницы соедененные знаком тере "-", типа "Lilitochka-club" некоторыми хостингами будет не принято, так что придется поискать подходящий хостинг или же переименовать.
Услуга хостинга - это грубо говоря услуга предоставления места на сервере под ваш сайт.
Но если вы не собираетесь выкладывать веб-страницу в Интернете, т.е. не будете заливать ее на хостинг, а пользоваться дома на компьютере, то имя веб-страницы может быть любое, хоть с пробелами, хоть с тире, хоть русскими буквами.
Но в любом случае расширение файла веб-страницы (оно написано справа от точки после имени файла) может быть только двух видов *.html и *.htm
Расширение нужно для того, чтобы компьютер понял какого типа этот файл и с какой программой он ассоциируется, т.е. чем именно его открывать.
Вот что у вас примерно получится:
http://s020.radikal.ru/i708/1309/67/708a8ce42d57.jpg
Нажимаем "Сохранить" и смотрим что изменилось:
http://s014.radikal.ru/i327/1102/a9/f7aa0441f9bb.jpg
Видите, у вас теперь шрифт стал не однообразным, это называется синтаксическая подсветка, она выделила html-код (теги), чтобы вам было проще их отличать от обычного текста. Со временем вы оцените всю полезность синтаксической подсветки.
Теперь зайдите в меню "Инструменты" => "Выполнить"
У вас в браузере откроется ваша страничка.
Если синтаксической подсветки у вас не появилось, то значит вы просто неправильно настроили праграмму "Bred3". Перейдите в указанную ранее тему, где я выкладывал описание откуда ее скачать, как установить и настроить. Перечитайте все заново и настройте программу, как там указано.
Если при нажатии пункта "Выполнить" у вас не открылась страничка в браузере, то это может быть связано с тем, что у вас ее блокирует антивирус или файерфол. Тогда просто зайдите в ту папку куда вы сохранили вашу веб-станицу и дважды кликнув левой кнопкой мышки, запустите ее.
Разбираться с тем что означают те или иные теги, будем в следующих уроках.

Теги: Программирование,НTML,синтаксис,атрибуты,параметры

Отредактировано Законник (2011-07-28 21:49:41)

+1

2

Урок второй.
На самом деле HTML - это не язык программирования, как думают многие. Это язык гипертекстовой разметки. Что это значит? В принципе, вы в текстовом редакторе Word тоже занимаетесь текстовой разметкой и можете сохранять в нем веб-страницы, но они получаются грузными, потому что содержамного лишнего кода.
Посмотрите сами:
Пример программирования вручную:

Код:
<html>
<head>
     <title>Lilitochka-club - Главная страница</title>
</head>
<body>
     Hello World!
</body>
</html>

Пример кода созданного  программой Word:

Код:
<html xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:w="urn:schemas-microsoft-com:office:word"
xmlns="http://www.w3.org/TR/REC-html40">
<head>
<meta http-equiv=Content-Type content="text/html; charset=windows-1251">
<meta name=ProgId content=Word.Document>
<meta name=Generator content="Microsoft Word 11">
<meta name=Originator content="Microsoft Word 11">
<link rel=File-List href="Hello%20World.files/filelist.xml">
<title>Lilitochka-club - Главная страница</title>
<!--[if gte mso 9]><xml>
 <o:DocumentProperties>
  <o:Author>Пользователь</o:Author>
  <o:Template>Normal</o:Template>
  <o:LastAuthor>Пользователь</o:LastAuthor>
  <o:Revision>1</o:Revision>
  <o:TotalTime>1</o:TotalTime>
  <o:Created>2011-02-09T02:41:00Z</o:Created>
  <o:LastSaved>2011-02-09T02:42:00Z</o:LastSaved>
  <o:Pages>1</o:Pages>
  <o:Words>1</o:Words>
  <o:Characters>12</o:Characters>
  <o:Company>Дом</o:Company>
  <o:Lines>1</o:Lines>
  <o:Paragraphs>1</o:Paragraphs>
  <o:CharactersWithSpaces>12</o:CharactersWithSpaces>
  <o:Version>11.9999</o:Version>
 </o:DocumentProperties>
</xml><![endif]--><!--[if gte mso 9]><xml>
 <w:WordDocument>
  <w:GrammarState>Clean</w:GrammarState>
  <w:PunctuationKerning/>
  <w:ValidateAgainstSchemas/>
  <w:SaveIfXMLInvalid>false</w:SaveIfXMLInvalid>
  <w:IgnoreMixedContent>false</w:IgnoreMixedContent>
  <w:AlwaysShowPlaceholderText>false</w:AlwaysShowPlaceholderText>
  <w:Compatibility>
   <w:BreakWrappedTables/>
   <w:SnapToGridInCell/>
   <w:WrapTextWithPunct/>
   <w:UseAsianBreakRules/>
   <w:DontGrowAutofit/>
  </w:Compatibility>
  <w:BrowserLevel>MicrosoftInternetExplorer4</w:BrowserLevel>
 </w:WordDocument>
</xml><![endif]--><!--[if gte mso 9]><xml>
 <w:LatentStyles DefLockedState="false" LatentStyleCount="156">
 </w:LatentStyles>
</xml><![endif]-->
<style>
<!--
 /* Style Definitions */
 p.MsoNormal, li.MsoNormal, div.MsoNormal
	{mso-style-parent:"";
	margin:0cm;
	margin-bottom:.0001pt;
	mso-pagination:widow-orphan;
	font-size:12.0pt;
	font-family:"Times New Roman";
	mso-fareast-font-family:"Times New Roman";}
@page Section1
	{size:595.3pt 841.9pt;
	margin:0cm 0cm 0cm 0cm;
	mso-header-margin:35.45pt;
	mso-footer-margin:35.45pt;
	mso-paper-source:0;}
div.Section1
	{page:Section1;}
-->
</style>
<!--[if gte mso 10]>
<style>
 /* Style Definitions */
 table.MsoNormalTable
	{mso-style-name:"Обычная таблица";
	mso-tstyle-rowband-size:0;
	mso-tstyle-colband-size:0;
	mso-style-noshow:yes;
	mso-style-parent:"";
	mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
	mso-para-margin:0cm;
	mso-para-margin-bottom:.0001pt;
	mso-pagination:widow-orphan;
	font-size:10.0pt;
	font-family:"Times New Roman";
	mso-ansi-language:#0400;
	mso-fareast-language:#0400;
	mso-bidi-language:#0400;}
</style>
<![endif]-->
</head>
<body lang=RU style='tab-interval:35.4pt'>
<div class=Section1>
<p class=MsoNormal><span lang=EN-US style='mso-ansi-language:EN-US'>Hello
World!<o:p></o:p></span></p>
</div>
</body>
</html>

А на экране будет смотреться практически одинаково. Чем больше строк кода в странице, тем дольше она будет загружаться из Интернета. Создать сайт в визуальном редакторе проще, но представьте, если столько много строчек кода потребовалось для отображения всего двух слов, то сколько будет "лишнего" кода, когда вы будете создавать более солидный сайт с меню, графикой, текстом, ссылками? В некоторых визуальных редакторах код получается просто километровым. Но надо признать, что существуют визуальные редакторы, где количество "лишнего" кода минимально, правда в основном это платные программы и довольно дорогие.

0

3

Нетскейп композер - бесплатная, кода лишнего почти нет.
Всегда в ней сайты ваяю :)

0

4

Урок третий.
По сути это продолжение первого урока.
Многие наверное задавались вопросом, что такое "теги"? Тег - это элемент гипертекстовой разметки текста. Он бывает трех видов: одиночный, открывающий и закрывающий. Иногда некоторые произносят, как "тэг", что возможно более правильно, так как слово происходит от английского "tag", поэтому будем учиться говорить правильно. Тэги могут содержать или не содержать в себе атрибуты, которые служат чем-то вроде параметров тэгов.
Сайты в Интернете работают на принципе интерпретатора. Допустим, у вас есть веб-страница и вы ее открываете в браузере. Браузер построчно читает html-код вашей страницы, распознает в ней тэги и их атрибуты, и на основе полученных данных отображает веб-страницу на экране. Браузер - это программа для просмотра веб-страниц и веб-сайтов, наиболее известные из них: Internet Explorer, . Т.е. если сайт написан на языке HTML, то весь процесс его преобразования в то, что вы видите на экране происходит не где-то, а прямо на вашем компьютере. Когда вы открываете сайт, он из Интернета скачивается на ваш жесткий диск в специальную папке, которую пользователи обычно называют папкой временных файлов Интернета, а программисты "кэшем". Все загруженные в браузер файлы, будь то страницы или графика сохраняется спорва в кэш, а уже потом это все оттуда распознает и отображает браузер.
В результате можно сделать вывод, что "тэги" - это что-то вроде особых меток, которые задают настройки отображения текста, графики, таблиц, флеш-баннеров и т.д. в браузере.
Тэги обычно помещают в угловые скобки, чтоб интерпретатор браузера не перепутал их с обычным текстом. Если в тэге нет знака дроби с наклонов вправо "/", то этот тэг является "открывающим". Если же в тэге есть этот знак, то он является закрывающим. Такая дробь называется "слэшем". Между открывающим и закрывающим тэгами чаще всего находится текст или другие тэги, т.е. они служат "контейнером" для чего-то другого. Если у открывающего тэга нет парного закрывающего, значит он одиночный. Есть правда одно исключение. Взгляните на адрес: http://lilitochka.ru. Первая часть адреса сайтов "http://" называется "префикс" и у него есть наклонные дроби. Поэтому не надо путать дробь у закрывающего тэга (например, </title>) и дробь префикса, т.е. адреса который может быть прописан в атрибутах открывающего тэга. Да, еще стоит отметить, что тэги не чувствительны к регистру, т.е. вы можете написать их по разному, а браузер будет работать с ними одинаково: <title>, <Title>, <TITLE> и даже <TiTlE>.
Теперь рассмотрим пример из первого урока и разберем все тэги по их назначению.

Код:
<html>
<head>
     <title>Lilitochka-club - Главная страница</title>
</head>
<body>
     Hello World!
</body>
</html>

Тэг <html> имеет обязательный парный тэг </html> и указывает браузеру, что это HTML документ. Весь основной код веб-страницы находится меду этими тэгами.
Тэг <head> имеет обязательный парный тэг </head>. Это грубо говоря контейнер для информации, которая не отображается в окне браузера. Там располагаются тэги заголовка страницы, а также тэги для работы с поисковиками. Хотя иногда там размещают еще стили и скрипты.
Тэг <title> имеет обязательный парный тэг </title>. Его место в HTML-коде неизменно и определено внутри блока <head>..</head>. Он не отображается в основном окне браузере вместе с текстом и графикой. Тэг <title> задает заголовок страницы, т.е. ее название, которое мы видим в верхнем левом углу браузера. Допустим, если в коде веб-страницы ввести вот эту строку: <title>Программирование на языке HTML (Lilitochka-club)</title> , - то в браузере она будет выглядеть так:
http://s002.radikal.ru/i198/1309/33/64ff8d7a448d.jpg
Тэг <body> имеет парный тэг </body>. Внутри этого тэга находится вся видимая часть HTML-докуманта, т.е. всё то, что вы видите в окне бразузера (тексты статей, графику и другие объекты. Он располагается внутри блока <html>..</html>, но после <head>..</head>.
Тэг <body> имеет не обязательные атрибуты:
- атрибут bgcolor - устанавливает цвет фона страницы. Существуют уже готовые таблицы цветов для HTML-страниц. В атрибуте можно прописать как название цвета, так и его номер, отображаться будет одинаково. Обратите внимание, что перед номером цвета всегда ставится знак решетки и если я ничего не путаю, то сам номер пишется в шестнадцатеричном виде.
Правильное использование атрибута:

Код:
<body bgcolor="Cornsilk">

или

Код:
<body bgcolor="#FFF8DC">

Вот ссылки на таблицы цветов:
http://www.ph4.ru/grafika_color_scale.ph4
http://www.javaportal.ru/htmlandcss/tablecolors.html
http://www.artlebedev.ru/tools/colors/
http://35rus.ru/htmlcolor.php
Если мало, можете поискать сами, их в Интернете много.
- атрибут background - служит для вставки адреса фоновой картинки, что дает браузеру возможность отобразить на странице графический фон. имя графических файлов должно быть написано исключительно латинскими символами.
Допустим у вас есть картинка фона с именем и расширением "image.jpg", которая лежит в той же папке, что и программируемый вами HTML-докумант. Тогда код будет выглядеть так:

Код:
<body background="image.jpg">

Если картинка лежит в соседней папке (например, img), то вы пишите сперва имя папки, слэш и имя файла:

Код:
<body background="img/image.jpg">

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

Код:
<body background="http://lilitochka.ru/image.jpg">

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

Код:
<body background="http://lilitochka.ru/img/image.jpg">

Грамотные веб-мастера, используя фоновую картинку для сайта, еще прописывают и цвет фона. Зачем они это делают, когда картинка фона всё равно перекрывает собой цвет фона, на манер верхнего слоя? Дело в том, что некоторые пользователи экономят деньги на трафике, отключая на сайтах загрузку картинок или у них медленный интернет, в этом случае без картинок страницы будут загружаться быстрее. А теперь нюанс! Представьте, картинка фона у вас темного цвета и вы запрограммировали, чтобы текст отображался белыми буквами. Пользователь отключил загрузку картинок и у него загрузилась страница без фонового рисунка. Что он увидит? А ничего! По умолчанию цвет фона белый! А буквы у в этом примере тоже белые. Получается, что у вас все сольется, одно белое окно перед глазами. Поэтому надо прописывать еще и цвет фона, чтоб не было таких накладок у пользователей.
Атрибуты тэгов пишутся через пробел, причем порядок установки атрибутов непроизвольный:

Код:
<body bgcolor="Cornsilk" background="image.jpg">

или

Код:
<body background="image.jpg" bgcolor="Cornsilk">

Продолжение следует...

0

5

Последняя  ссылка  на  таблицы  цветов - больше всего понравилась.  У меня  тоже  есть парочка в  Избранном. Кину и  эту!

0

6

Продолжение третьего урока.
Итак, атрибуты тэга <body>:
- атрибут link - задает цвет ссылок на веб-странице.
Синтаксис следующий:

Код:
<body link="Blue">

или

Код:
<body link="#0000FF">

В принципе так прописывают цвет практически в любых атрибутах, либо названием цвета, либо его номером.
- атрибут vlink - задает цвет ссылок, на которых вы уже побывали. Иногда это довольно удобно, например, если ссылки представляют собой меню сайта и пунктов очень много, то при этом атрибуте вы всегда можете увидеть какие пункты меню вы уже просмотрели.
- атрибут alink - задает цвет ссылки при нажатии на нее мышью. Т.е. перед тем как пройти по ссылке на другую страницу ее цвет изменится на заданный в этом атрибуте. Но если вы вернетесь на ту страницу, то цвет будет прежним. Он меняется только при нажатии и потом восстанавливается.
- атрибут text - задает цвет всему имеющемуся тексту на веб-странице.
Это были основные атрибуты тэга <body>. Но есть еще и более специфические.
Атрабуты задающие отступы от сторон экрана:
- leftmargin - отступ от левой части экрана;
- topmargin - отступ от верхней части экрана;
- rightmargin - отступ от правой части экрана;
- bottommargin - отступ от нижней части экрана.
Значение атрибутов обозначается целым положительным числом и измеряется в пикселях экрана от нуля и далее.
Синтаксис:

Код:
<body leftmargin="0" topmargin="0" rightmargin="0" bottommargin="0">

Это этот код расчитан в основном только на браузер Internet Explorer и остальных он либо работает плохо, либо выообще не работает. Что делать? Для остальных браузеров есть еще два атрибута заменяющих эти:
- marginwidth - отступ по горизонтали (справа-слева);
- marginheight - отступ по вертикали(вверху-внизу).
Т.е. эти два атрибута устанавливают оступы сразу по обеим сторонам экрана, а не по отдельности, как в четырех предыдущих.
Синтаксис тот же:

Код:
<body marginwidth="0" marginheight="0">

Поэтому лучше при программировании задавать сразу все атрибуты отступов:

Код:
<body leftmargin="0" topmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0">

Продолжение следует...

0

7

Урок четвертый.
Оформление текста.

Ну, вы уже познакомились немного с тем, как можно задать цвет всего текста одним цветом с помощью атрибутов тэга <body>. Но этого мало для красоты сайта, поэтому изучим основные тэги оформления текста веб-страниц.
Тэг <p> и парный ему закрывающий тэг </p> служат для создания параграфа текста. Т.е. любой текст принято вставлять между этими тэгами. Обычно так поступают, когда оформляют абзацы текста или весь текст целиком, как это делается вы увидите ниже.
Тэг <p> имеет атрибут "align". Атрибут этот имеет четыре значения: left, right, center, justify.
left - выравнивание текста по левому краю;
right - выравнивание текста по правому краю;
center - выравнивание текста по центру;
justify - выравнивание текста по ширине.
Песли вы не используете атрибуты в этом тэге, текст по умолчанию выравнивается по левому краю.
А налогичные параметры форматирования текста есть в текстовом редакторе Word.
Синтаксис:

Код:
<p>..</p>
<p align="left">..</p>
<p align="right">..</p>
<p align="center">..</p>
<p align="justify">..</p>

Естественно между тэгами должен быть текст, точки я просто так, для примера обозначил.
Тэг <br> одиночный, закрывающий тэг не требуется. Тэг <br> служит для переноса текста на строку ниже.
Зачем это нужно?
К примеру, тэг <p> обладает тоже функцией перевода строки. Всё, что находится за закрывающим тегом </p> будет начинаться с новой строки.
Поэтому если надо, чтобы каждое предложение начиналось с новой строки, то можно сделать так:

Код:
<html>
<head>
     <title>Название сайта</title>
</head>
<body>
     <p align="justify">Первое предложение.</p>
     <p align="justify">Второе предложение.</p>
     <p align="justify">Третье предложение.</p>
</body>
</html>

То на странице сайта, это будет выглядеть так:

Первое предложение.

Второе предложение.

Третье предложение.

Но есть другой вариант:

Код:
<html>
<head>
     <title>Название сайта</title>
</head>
<body>
     <p align="justify">Первое предложение.
     Второе предложение.
     Третье предложение.</p>
</body>
</html>

И на экране это будет выглядеть так:

Первое предложение.Второе предложение.Третье предложение.

Задумаемся, почему так неказисто отобразился текст?.. http://s61.radikal.ru/i174/1007/3e/1de540a0d735.gif Дело в том, что если в тэг <p>..</p> вставили весь текст, а не отдельные абзацы, то необходимо между абзацами вставлять тэг <br>, обозначая конец одной строки и начало другой.
Код будет выглядеть так:

Код:
<html>
<head>
     <title>Название сайта</title>
</head>
<body>
     <p align="justify">Первое предложение.<br>
     Второе предложение.<br>
     Третье предложение.</p>
</body>
</html>

На экране это отобразится уже так, как нам надо:

Первое предложение.
Второе предложение.
Третье предложение.

Зачем такие сложности? Почему существует два способа отображения текста. Это всё зависит от ваших нужд. Если быть внимательными, то первый вариант, когда тэгом <p> выделены абзацы текста, предусматривает отступ между абзацами. Если его не нужно делать, то используйте первый.
Продолжение следует....

Отредактировано Законник (2011-02-26 16:02:38)

0

8

Продолжение урока.
Чтобы выделить текст или небольшой участок текста жирным шрифтом, то его помещают в тэг <b>, парный закрывающий тэг </b> обязателен.
Синтаксис:

Код:
<html>
<head>
     <title>Название сайта</title>
</head>
<body>
     <p>Привет, <b>Мир</b>!</p>
</body>
</html>

Но есть и аналог этого тэга! Тэг <strong> тоже выделяет текст жирным шрифтом, парный закрывающий тэг </strong> обязателен.
Синтаксис:

Код:
<html>
<head>
     <title>Название сайта</title>
</head>
<body>
     <p>Привет, <strong>Мир</strong>!</p>
</body>
</html>

Чтобы выделить текст или небольшой участок текста наклонным шрифтом, то его помещают в тэг <i>, парный закрывающий тэг </i> обязателен.
Синтаксис:

Код:
<html>
<head>
     <title>Название сайта</title>
</head>
<body>
     <p><i>Привет</i>, Мир!</p>
</body>
</html>

Но и у этого тэга есть аналог! Тэг <em> тоже выделяет текст наклонным шрифтом, парный закрывающий тэг </em> обязателен.
Синтаксис:

Код:
<html>
<head>
     <title>Название сайта</title>
</head>
<body>
     <p><em>Привет</em>, Мир!</p>
</body>
</html>

Надо заметить, что сейчас грамотные программисты используют для этих целей только тэги <strong> и <em>. Это связано с тем, что поисковики предпочитают обрабатывать именно эти тэги, а <b> и <i> считают устаревшими. Спорить с ними бесполезно, остается только подстраиваться.
Чтобы выделить текст или небольшой участок текста подчеркнутым шрифтом, то его помещают в тэг <u>, парный закрывающий тэг </u> обязателен.
Синтаксис:

Код:
<html>
<head>
     <title>Название сайта</title>
</head>
<body>
     <p><u>Привет, Мир!</u></p>
</body>
</html>

Чтобы выделить текст или небольшой участок текста зачеркнутым шрифтом, то его помещают в тэг <s>, парный закрывающий тэг </s> обязателен.
Синтаксис:

Код:
<html>
<head>
     <title>Название сайта</title>
</head>
<body>
     <p><s>Привет, Мир!</s></p>
</body>
</html>

А теперь главное правило! Чтобы тэги работали правильно, они не должна пересекаться!
Допустим, у вас есть три слова. Первое и второе надо выделить жирным, при при этом надо выделить наклонным шрифтом второе и третье.
Неправильный синтаксис (типичная ошибка):

Код:
<html>
<head>
     <title>Название сайта</title>
</head>
<body>
     <p><strong>Один <em>два</strong> три</em></p>
</body>
</html>

Правильный синтаксис:

Код:
<html>
<head>
     <title>Название сайта</title>
</head>
<body>
     <p><strong>Один</strong> <em><strong>два</strong></em> <em>три</em></p>
</body>
</html>

Здесь мы выделили тэгами каждое слово, но можно и по другому - смотрите ниже.
Еще один пример правильного синтаксиса:

Код:
<html>
<head>
     <title>Название сайта</title>
</head>
<body>
     <p><strong>Один <em>два</em></strong> <em>три</em></p>
</body>
</html>

Или так:

Код:
<html>
<head>
     <title>Название сайта</title>
</head>
<body>
     <p><strong>Один</strong> <em><strong>два</strong> три</em></p>
</body>
</html>

Думаю вы поняли, что тут присутствует принцип "матрешки", тэги должны располагаться один в другом - <strong><em>..</em></strong>, но не должны пересекаться друг с другом - <em><strong>..</em></strong>
Продолжение следует...

Отредактировано Законник (2011-04-04 06:31:37)

0

9

Продолжаем занятия.
Как оформить весь текст одним цветом мы выяснили. Но что если вам понадобится выделить слово или абзац другим цветом или даже шрифтом?
Для этой цели используется тэг <font> и парный ему </font>.
Его атрибуты:
face - задает вид шрифта;
size - задает размер шрифта;
color - задает цвет шрифта.
Как мы знаем атрибуты можно использовать как вместе, так и по отдельности.
Вот список наиболее распространенных названий шрифтов для атрибута "face":
1. Arial, Helvetica, sans-serif;
2. Times New Roman, Times, serif;
3. Courier New, Courier, monospace;
4. Georgia, Times New Roman, Times, serif;
5. Verdana, Arial, Helvetica, sans-serif;
6. Geneva, Arial, Helvetica, sans-serif;
7. georgia, palatino;
8. Times New Roman, sans-serif;
9. arial, verdana, tahoma, sans-serif;
10. Monotype Corsiva.
Остальные шрифты вы найдете в справочниках, когда будете программировать. Если вы заметили, то некоторые шрифты в списке приведены через запятую по несколько штук. Это сделано для того, чтобы секст в браузере пользователей отображался корректно. Дело в том, что не во всех операционных системах (ОС) есть полный набор шрифтов и если вы выделите текст веб-страницы одним шрифтом, а в ОС пользователя зашедшего на ваш сайт такого шрифта нет, то текст у него в браузере будет отображаться не так как вами было задумано, если он вообще будет отображаться, а бывает по разному. Поэтому было найдено решение, теперь в качестве параметра ставят не одно имя шрифта, а 2-4 шрифта одного типа. Браузер примет к сведению их все и если первого из них нет в ОС пользователя, то текст будет выделен другим шрифтом из тех, что вы прописали в качестве параметра. Аккуратнее в экспериментах, если прописать в качестве рабочего значения параметра шрифты разных типов, то они могут отображаться не корректно. Описывать все типы или классификации шрифтов не вижу смысла. В приведенном списке имеются стандартные и корректные шрифты - пользуйтесь пока ими.
Размеры шрифтов для атрибута "size" обычно выглядят так: 1, 2, 3, 4, 5, 6, +1, +2, +3, +4, +5, +6, -1, -2, -3, -4, -5, -6.
Цвета вставляются так же, как и в предыдущих случаях.
Синтаксис:

Код:
<html>
<head>
<title>Название сайта</title>
</head>
<body>
<p align="justify">
     <font color="#009999" size="+1" face="Geneva, Arial, Helvetica, sans-serif">Привет</font>, <font color="#3399FF" size="4" face="Times New Roman, Times, serif">Мир!</font>
</p>
</body>
</html>

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

Отредактировано Законник (2011-07-05 12:59:30)

0

10

http://i013.radikal.ru/1104/8a/90df75943920.gif а как ссылки размещать с лева, с права и таблички?

0

11

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

Отредактировано Законник (2011-05-21 15:26:38)

0

12

Урок 5.
Ссылки.
Для вставки ссылки в веб-страницу используют тэг <a> и обязательный парный закрывающий ему тэг </a>. Между этими открывающим и закрывающим тэгами должно быть вписано название ссылки, иначе она не отобразится на созданной вами веб-странице.
Атрибуты:
1) href - этот атрибут задает URL (т.е. адрес) ссылки. Как вы понимаете это самый важный атрибут тэга <a> и без него ссылка работать не будет;
Синтаксис:

Код:
<a href="http://lilitochka.ru">Lilitochka-club</a>

При нажатии на такую ссылку, она загрузится в этом же окне.
Атрибут "href" имеет параметр "mailto:", для того, чтобы сделать ссылку на адрес электронной почты.
Допустим, что адрес почты будет такой: login@mail.ru
Синтаксис:

Код:
<a href="mailto:login@mail.ru">Моя почта</a>

2) target - этот атрибут задает параметр  загрузки веб-страницы или файла в окне браузера;
Рассмотрим основные параметры атрибута "target":
_blank - загружает ссылку в новое окно, не закрывая при этом старое;
Синтаксис:

Код:
<a href="http://lilitochka.ru" target="_blank">Lilitochka-club</a>

_parent - загружает ссылку в родительском окне;
Синтаксис:

Код:
<a href="http://lilitochka.ru" target="_parent">Lilitochka-club</a>

_self - по умолчанию. Загружает ссылку в это же окно, где был произведен клик по ссылке;
Синтаксис:

Код:
<a href="http://lilitochka.ru" target="_self">Lilitochka-club</a>

_top - загружает ссылку в topmost окно.
Синтаксис:

Код:
<a href="http://lilitochka.ru" target="_top">Lilitochka-club</a>

А теперь несколько советов. Параметр "_blank" при написании сайтов вы будете пользоваться достаточно часто, поэтому возьмите его себе на вооружение. А вот параметр "_self" вы можете как использовать, так и не использовать - разницы практически нет никакой. Остальные параметры применяются крайне редко.
3) title - служит для вывода всплывающей подсказки при наведении на ссылку курсора компьютерной мыши. Текст всплывающей подсказки вы выбираете лично, т.е. какой захотите - это как пояснение к тексту названия вашей ссылки.
Синтаксис:

Код:
<a href="http://lilitochka.ru" title="Форум Лилиточка Клуб">Lilitochka-club</a>

Ссылки бывают разных видов, рассмотрим пока основные из них:
1) Внешние;
Эти ссылки содержат префикс "http://". Чаще всего внешние ссылки используют для того, чтобы загрузить страницу стороннего ресурса, хотя некоторые веб-мастера используют их для переходов на страницы своего сайта. Занятие я вам скажу кропотливое, особенно если ссылок у вас много. Делается это в основном для того, чтобы удержать пользователя на сайте. Если интернет-пользователь скопирует страницу вашего сайта с размещенными на ней внешними ссылками себе на жесткий диск своего ПК, то потом, нажав на ссылку на сохраненной странице, он перейдет на ваш сайт (конечно при условии если Интернет у него в тот момент будет включен).
Синтаксис:

Код:
<a href="http://lilitochka.ru">Lilitochka-club</a>

или

Код:
<a href="http://lilitochka.ru/index.html">Lilitochka-club</a>

2) Внутренние;
Эти ссылки, которые не содержат префикс "http://" и доменного имени, и состоят только из имени файла веб-страницы с соответствующим расширением.
Синтаксис:

Код:
<a href="index.html">Lilitochka-club</a>

или

Код:
<a href="index.htm">Lilitochka-club</a>

Обычно внутренние ссылки используют для загрузки страниц находящихся:
- в одной или в соседней папке на одном ПК. Это подразумевает, что ни удаляться, ни переноситься в другое место (с другим адресом) эти файлы не будут, иначе при нажатии на ссылку ваш браузер выдаст вам сообщение, что требуемая страница не обнаружена.
Цель использования:
Допустим страницы вы не собираетесь публиковать в интернет-хостинг, т.е. для домашнего использования или просто тестируете перед заливкой на хостинг.
Для того, чтобы дать ссылку на соседний файл, лежащий в той же папке, что и исходный, достаточно указать в адресе лишь его имя и расширение.
Синтаксис:

Код:
<a href="index.html">Lilitochka-club</a>

или

Код:
<a href="index.htm">Lilitochka-club</a>

Допустим, в папке "1" лежит файл "index.html" и папка "2". В папке "2" лежит файл "index2.html". В веб-странице "index.html" надо дать ссылку на файл "index2.html". Для этого в адресе ссылки ставим имя папки, знак слэша и имя файла с расширением.
Синтаксис:

Код:
<a href="2/index2.html">Lilitochka-club</a>

Но это сработает только, если файл лежит в папке, которая находится внутри папки и исходным файлом веб-страницы, т.е. тем, где вы помещаете ссылку.
- на хостинге, лежащих у одного пользователя, под одним доменным именем. Это облегчает процесс программирования сайта - никаких длинных адресов в ссылках, не надо их привязывать к доменному имени. Браузер при ссылке на домен "http://lilitochka.ru" или какой другой, ищет файл главной страницы, чаще всего он имеет имя "index", если только программист на самом хостинге не задал другие настройки. Остальные страницы браузер подгружает сам и при переходах по внутренним ссылкам в адресной строке браузера появляется полный адрес этой страницы, включая префикс, доменное имя, имена попок и веб-страниц. А определить то, что на сайте используются внутренние ссылки, можно только глянув на ее исходный код.
3) Ссылки на e-mail (т.е. ссылка на чью-то электронную почту).
Синтаксис был разобран выше.
Остается только упомянуть еще один момент. Ссылки бывают прямыми и косвенными. Последние на пользовательском слэнге называются "кривыми". Рассмотрим разницу:
- Прямые ссылки ведут туда, куда вам надо, т.е. адрес в ней именно той страницы, которую вы хотите загрузить.
- Косвенные ссылки бывают двух типов:
1. При нажатии на такую ссылку вы сперва попадаете на промежуточную веб-страницу, а уже потом вас автоматически перенаправляют на нужную вам веб-страницу. В такие веб-страницы встроены специальные скрипты (программный код), которые отсчитывают несколько секунд и загружают нужную веб-страницу или сайт. Чаще всего это делается, чтобы перед переходом по ссылке вы посмотрели рекламу и хозяин такого сайта на вас заработал. Бывает конечно, что на таких промежуточных веб-страницах нет автоматического перенаправления, там вам предложат еще ссылку для перехода именно на нужный вам сайт. Такое чаще встречается при ссылках на файлообменники, при нажатии на них вы оказываетесь на промежуточных страницах без автоматического перенаправления, где сказано, что авторы сайта не несут ответственности за содержание этих файлов и вы берете на себя всю ответственность, если нажмете на ссылку для перехода. Плюс на этой странице может быть еще и реклама.
2. При нажатии на такую ссылку вы попадаете вообще не туда, куда вам было надо, хоть на порно сайт. От того эти ссылки и называют "кривыми".
А размещение ссылок на веб-странице производится тэгами текстовой разметки: <p>, <center>, <h1> и т.д.
Незнакомые тэги мы еще разберем, а пока небольшой пример, который покажет, как отобразить ссылку по правому краю.
Синтаксис:

Код:
<html>
<head>
     <title>Название сайта</title>
</head>
<body>
     <p align="right"><a href="http://lilitochka.ru/index.html">Lilitochka-club</a></p>
</body>
</html>

И на последок расскажу одну хитрость. Если вы создадите ссылку на вашей странице, но не укажите в ней адрес, то она не будет отображаться как ссылка. В работе веб-программиста часто приходится писать страницы, где адреса ссылок еще не определены, т.е. они появятся в последствии и в итоге вы не можете увидеть весь дизайн целиком. Но этот казус можно обойти! Просто вместо адреса поставьте знак решетки - "#".
Синтаксис:

Код:
<html>
<head>
     <title>Название сайта</title>
</head>
<body>
     <p align="right"><a href="<a href="#">Lilitochka-club</a></p>
</body>
</html>

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

Отредактировано Законник (2011-07-15 14:01:07)

0

13

Урок 6.
Правила хорошего тона.

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

Код:
<html>
<head>
<title>Название сайта</title>
</head>
<body>
<table><tr><td></td><td><table><tr><td></td><td></td></tr></table></td><td></td></td></tr></table>
</body>
</html>

Пример 2. Правильное отображение текста исходного кода веб-страницы.
Синтаксис:

Код:
<html>
<head>
<title>Название сайта</title>
</head>
<body>
<table>
     <tr>
          <td></td>
          <td>
               <table>
                    <tr>
                         <td></td>
                         <td></td>
                    </tr>
               </table>
          </td>
          <td></td>
          </td>
     </tr>
</table>

Как вы надеюсь поняли, в данном случае слово "неправильный" означает "неудобный", а не то что код в таком виде нельзя использовать. В неудобном виде велика вероятность того, что вы где-то допустите ошибку и чтобы этого избежать, программистами используются отступы. Количество пробелов в отступах не регламентировано, поэтому каждый программист назначает их количество сам. Лично я использую пять пробелов в одном отступе, на мой взгляд этого хватает (немного, но и не мало).
Не пугайтесь, что приведенные в этих двух примерах тэги вам не знакомы. Эти тэги используются для формирования таблиц, их мы изучим позже. Сейчас же запомните саму суть - такое (или похожее) расположение кода, как во втором примере, используется у всех тэгов имеющих парный закрывающий тэг. Если вы будете придерживаться правил оформления исходного кода, то это сильно сэкономит вам время и нервы.

Отредактировано Законник (2011-07-20 12:37:54)

0

14

Законник написал(а):

Для вставки ссылки в веб-страницу используют тэг <a> и обязательный парный закрывающий ему тэг </a>. Между этими открывающим и закрывающим тэгами должно быть вписано название ссылки, иначе она не отобразится на созданной вами веб-странице.

Во спасибо! А то я думала и что делать с этим А))))

0

15

Лана
А вы что, сайт пишите?

0

16

Законник написал(а):

А вы что, сайт пишите?

нее...
Это я на ссылку наткнулась. а она с этими А-шками. И никак не открывалось с ними(с а) ,а прочла у тебя в теме про эНти А. убрала их и...открылся сайтик куда мне надо было попасть.
так что - пасиб за тему!!! http://i072.radikal.ru/1007/54/a282be9a8bcf.gif

0

17

Урок 7.
Ставим картинки.

Для вставки используем тэг <img>. Обратите внимание, что у него нет парного закрывающего тэга, как у других тэгов, что мы разбирали ранее. Стоит заметить, что не все графические файлы можно использовать для вставки картинки на сайт. Для публикации в веб используют следующие форматы (расширения) графических файлов (изображений): *.gif, *.jpg, *.jpeg, *.png, *.bmp.
Атрибуты тэга <img>:
1) src - это обязательный атрибут, он служит для вставки адреса (URL) картинки. Имя файла должно быть написано латинскими символами.
Синтаксис:

<img src="images.gif">

2) align - этот атрибут выравнивает картинку относительно текста и имеет несколько параметров.
Параметры:
- left - выравнивание картинку по левому краю, т.е. текст будет обтекать ее справа;
- right - выравнивание картинку по правому краю , т.е. текст будет обтекать ее слева;
- bottom - выравнивание по нижнему краю;
- top - выравнивание по верхнему краю;
- middle - выравнивание по середине.
Синтаксис:

Код:
<img src="images.gif" align="left">

3) alt - этот атрибут задает альтернативный текст названия картинки. Если ваш браузер долго грузит страницы или вы по какой-то причине отключили отображение картинок в браузере (скажем в целях экономии интернет-трафика или увеличения скорости загрузки веб-страниц), то на экране вы увидите лишь пустую форму картинки, а не ее саму. Атрибут alt позволяет вставить название картинки, так пользователи, не видя ее, смогут догадаться, что она из себя представляет. Кроме того, этот атрибут позволяет поисковым ботам правильно индексировать картинки на вашем сайте, т.е. понимать их тематику.
Синтаксис:

Код:
<img src="images.gif" alt="Водопад">

4) border - задает толщину рамки вокруг картинки. Параметры определяются числами, т.е. условными величинами в пикселях. По умолчанию рамка вокруг картинки не ставится, но в некоторых версиях браузеров вы можете заметить некую цветовую окантовку. Поэтому если вы не хотите видеть рамку, то поставьте параметр атрибута "0" (ноль).
Синтаксис:

Код:
<img src="images.gif" border="0">
<img src="images.gif" border="1">
<img src="images.gif" border="2">
и т.д.

5) height - задает высоту картинки.
6) width - задает высоту картинки.
Параметры этих двух атрибутов устанавливаются числами являющимися значениями в пикселях. Атрибут ставится для ускорения загрузки веб-страницы браузером. Для корректной работы сайта лучше использовать атрибуты высоты и ширины.
Чтобы узнать размеры графического файла, нужно нажать правой кнопкой мыши по файлу картинки и выбрать "Свойства".
Без этих атрибутов картинка будет отображаться в свою реальную величину. Кроме того, если вы хотите увеличить или уменьшить имеющуюся картинку на сайте, то это не обязательно делать в графическом редакторе! Можно пропорционально изменить параметры атрибутов. Допустим, ваш файл имеет размеры сторон 120 на 130. Вам надо чтобы картинка была увеличена в двое. В параметрах тогда указываете размеры 180 на 195, и браузер ее сам растянет. Но надо соблюдать пропорцию, чтобы размеры увеличивались или уменьшались либо в количественном, либо в процентном соотношении. Если ошибиться в расчетах, то изображение получиться местами сильно растянуто или сжато, что может быть смешно, но не выгодно. А вот если вам надо будет уменьшить изображение, то лучше это сделать в графическом редакторе! Тогда вы сократите еще и объем занимаемой файлом памяти, а следовательно и увеличите скорость загрузки веб-страницы - пользователи же будут вам за это только признательны. А вот при использовании пропорционального уменьшения значений высоты и ширины в параметрах этих атрибутов, то вы просто уменьшите отображаемый размер картинки у себя на экране, но ее занимаемый объем памяти останется прежним.
Атрибуты могут использоваться как вместе, так и по отдельности.
Синтаксис:

Код:
<img src="images.gif" width="120" height="130">

7) hspace - задает значение в пикселях для создания отступа слева и справа от картинки.
8) vspace - задает значение в пикселях для создания отступа сверху и снизу от картинки.
Эти два атрибута нужны для того, чтобы текст не прилипал к краям картинки, иначе это будет смотреться не очень красиво.
Атрибуты могут использоваться как вместе, так и по отдельности.
Синтаксис:

Код:
<img src="images.gif" hspace="5" vspace="5">

В заключение дам еще "пару" рекомендаций по использованию картинок:
1. Картинки для корректного отображения в тексте, лучше вставлять в тэги <p>..</p>.
Синтаксис:

Код:
<html>
<head>
<title>Документ Без Имени</title>
</head>
<body>
<p><img src="images.gif" alt="Скриншот - Окно браузера" width="200" height="148" hspace="5" vspace="5" border="2" align="left">Я программирую на языке HTML. Я очень люблю программировать на языке HTML. Я учу программированию на языке HTML. Вы будете учиться программировать сайты на языке HTML.</p>
</body>
</html>

http://i015.radikal.ru/1107/35/5f9b0fc7cfd6.jpg
2. В качестве картинки может быть ссылка. Т.е. при нажатии на картинку вы переходите на другую страницу. Обычно этот прием используют для вставки баннеров или кнопок на сайт. Синтаксис использования ссылок, т.е. их атрибуты и параметры мы проходили, поэтому думаю разберетесь.
Синтаксис:

Код:
<a href="index.htm" target="_blank"><img src="images.gif" alt="Скриншот - Окно браузера" width="120" height="130" hspace="5" vspace="5" border="2" align="left"></a>

3. Если вы редактировали изображения в графических редакторах, то обратите внимание, что многие из них вставляют в картинку лишние метаданные. Проверить это можно если залезть в свойства файла, как описывалось ранее. Свойства => Сводка => Дополнительно (это для Windows XP). Особенно рьяно туда прописывает лишнюю инфу всеми известный Фотошоп. Там в метаданных вы увидите название и версию графической программы, в которой редактировался файл, а также кучу разного рода комментариев и данных об истории редактирования файла. Некоторые цифровые фотоаппараты прописывают туда версию фотокамеры, а новые сотовые с камерой вообще могут прописать в файл географические координаты места съемки. Словом, это всё занимает место, т.е. увеличивает объем файла, а следовательно и скорость загрузки веб-страницы с такой картинкой. Значит надо удалять ненужные метаданные и уменьшать размер объема памяти занимаемой этим файлом (картинкой). Лично я это делаю при помощи хорошей и главное бесплатной программой XnView. Это небольшой просмотрщик графических файлов с возможностью редактирования. У него есть функция удаления метаданных. Где его скачать и как им пользоваться, я расскажу чуть позже в другой теме, где выкладываю ссылки на полезные программы.

Отредактировано Законник (2011-07-28 21:52:19)

0

18

Законник написал(а):

Кроме того, если вы хотите увеличить или уменьшить имеющуюся картинку на сайте, то это не обязательно делать в графическом редакторе! Можно пропорционально изменить параметры атрибутов. Допустим, ваш файл имеет размеры сторон 120 на 130. Вам надо чтобы картинка была увеличена в двое. В параметрах тогда указываете размеры 180 на 195, и браузер ее сам растянет. Но надо соблюдать пропорцию, чтобы размеры увеличивались или уменьшались либо в количественном, либо в процентном соотношении.

Здоровско!! http://s39.radikal.ru/i086/1007/34/6a401b60cdc5.gif

0

19

Урок 8.
Теперь научимся удалять у графических файлов (картинок) метаданные. Э
Для начала откроем просмотрщик графических файлов "XnView" и познакомимся с самими метаданными. Как установить и настроить этот просмотрщик, вы можете узнать в теме "Необходимые программы".
1. Открываем просмотрщик графических файлов "XnView".
2. В его меню находим фотографии и картинки лежащие у вас на жестком диске ПК в соответствующей папке.
3. Заходим в свойства выбранной картинки. Это делается несколькими способами:
- Наводим курсор мыши на ярлык картинки в просмотрщике и нажимаем правую кнопку мыши. В открывшемся контекстном меню, нажимаем пункт "Свойства".
- Левой кнопкой мыши один раз кликаем по ярлыку картинки в просмотрщике, т.е. мы ее выделяем. Затем в меню просмотрщика нажимаем "Правка" => "Свойства".
- Левой кнопкой мыши два раза кликаем по ярлыку картинки в просмотрщике, т.е. мы ее открываем. Затем в меню просмотрщика нажимаем "Правка" => "Свойства".
- Левой кнопкой мыши один раз кликаем по ярлыку картинки в просмотрщике, т.е. мы ее выделяем. Затем нажимаем на клавиатуре кнопку "Alt" и не отпуская ее кнопку "Enter".
- Левой кнопкой мыши два раза кликаем по ярлыку картинки в просмотрщике, т.е. мы ее открываем.  Затем нажимаем на клавиатуре кнопку "Alt" и не отпуская ее кнопку "Enter".
4. Открывшемся окне "Свойства", откройте вкладку "EXIF"
Вот скриншоты этого окна для фотографий сделанных при помощи цифровой фотокамеры и обработанной при помощи Фотошопа.
http://i082.radikal.ru/1109/e3/f840bcdbdbba.jpg
http://i057.radikal.ru/1109/e8/023d77947939.jpg
Как видите, на скриншотах ясно видно, что у одной картинки в метаданных прописаны фирма производитель и модель камеры, а у другой название и версия графического редактора, в котором она была обработана. Некоторые сотовые и смартфоны подключенные к системе спутниковой навигации умудряются прописывать в метаданные фотографий сделанных на нем даже приблизительные географические координаты. Всё это занимает место занимаемой файлом памяти. Чем больше файл картинки, тем он дольше будет загружаться из Интернета на вашем сайте. А не у всех пользователей есть быстрый Интернет. Поэтому стоит подумать о посетителях вашего сайта и сократить объем занимаемой памяти вашими картинками. Если удалить ненужные метаданные, то размер файлов уменьшится.
Удаление метаданных из картинок. Два способа.
Способ первый:
1. Выделяем ярлык картинки, но не открываем картинку в просмотрщике.
2. Открываем меню "Правка", там находим пункт "Метаданные", в открывшемся списке нажимаем "Удалить...".
http://i058.radikal.ru/1109/c5/6d9011f0ce7e.jpg
Вам откроется небольшое окно, где вы можете выбрать какие метаданные вам требуется удалить, для этого просто проставьте галочки. Вы также можете попытаться оптимизировать изображение, поставив галочку у пункта "Оптимизировать". Но стоит заметить, что не всегда этот алгоритм оптимизации действует эффективно. Бывает, что после оптимизации качество изображения остается прежним, а объем занимаемой памяти уменьшается, как и было задумано разработчиками. Но в некоторых случаях можно наблюдать и ухудшение качества изображения и увеличение объема занимаемой памяти. Поэтому, если вы поставите галочку у пункта "Оптимизировать", то позаботьтесь о том, чтобы иметь копию этого файла, если после оптимизации результат вам не понравится, либо вообще не оптимизируйте файл картинки и ограничитесь только удалением метаданных.
http://s53.radikal.ru/i139/1309/26/6c99cdfd5e76.jpg
При удалении всех метаданных в свойствах файла пропадет вкладка "EXIF".
http://s57.radikal.ru/i158/1109/53/22835df3e83c.jpg
Способ второй:
1. Дважды кликаем по ярлыку картинки и открываем ее в просмотрщике.
2. Открываем меню "Правка", там находим пункт "Метаданные", в открывшемся списке нажимаем "Удалить все метаданные".
http://s48.radikal.ru/i119/1109/83/d2cecd92ad8c.jpg
После удаления метаданных результат работы надо сохранить. Для этого открываем меню "Файл" и нажимаем "Сохранить", если хотим, чтобы изменения были применены именно к этому файлу. Или же нажимаем "Сохранить как...", чтобы сохранить результаты в другом месте или в этом же, но под другим именем файла.

0

20

Урок 9.
Таблицы и их свойства.

Основным тэгом таблицы является тэг <table>. Это и есть по сути сама таблица или ее каркас. Внутри этого тэга помещают другие тэги, которые обозначают строки (<tr></tr>) и ячейки (<td></td>) таблицы.
Атрибуты тэга <table>:
1) align - отвечает за выравнивание таблицы относительно документа.
Параметры:
- center - выравнивание по центру;
- left - выравнивание по левому краю;
- right - выравнивание по правому краю.
Синтаксис:

Код:
<table align="center">
     <tr>
          <td>Привет, Мир!</td>
     </tr>
</table>

Это пример кода, где таблица выравнивается по центру. Если вам надо сделать выравнивание в другую сторону, то просто замените соответствующий параметр атрибута "align".
2) background - задает рисунок заднего фона таблицы.
Синтаксис:

Код:
<table background="image.jpg">
     <tr>
          <td>Привет, Мир!</td>
     </tr>
</table>

3) bgcolor - задает цвет заднего фона таблицы.
Синтаксис:

Код:
<table bgcolor="#00CCFF">
     <tr>
          <td>Привет, Мир!</td>
     </tr>
</table>

Таблицы цветов были рассмотрены в предыдущих уроках, где объяснялось, как задать цвет общего фона сайта. Как использовать картинку вместо фона сайта тоже проходили, отличия здесь минимальны. Т.е. тут ничего принципиально нового для вас нет.
4) border - задает толщину рамки таблицы в пикселях. Если хотите, чтобы рамка вообще не отображалась, то задайте значение параметра этого атрибута "ноль".
Синтаксис:

Код:
<table border="0">
     <tr>
          <td>Привет, Мир!</td>
     </tr>
</table>

5) bordercolor - задает цвет рамки таблицы.
Синтаксис:

Код:
<table bordercolor="#0099CC">
     <tr>
          <td>Привет, Мир!</td>
     </tr>
</table>

6) cellspacing - задает расстояние измеряемое в пикселях между ячейками таблицы. То есть насколько далеко ячейки будут располагаться друг от друга.
7) cellpadding - задает расстояние измеряемое в пикселях между внутренней частью рамки ячейки и ее содержимым. То есть, если у вас в ячейке таблицы находится текст, то этим атрибутом и его параметром вы можете задать отступ между "стенками" ячейки и этим текстом или картинкой (в зависимости от содержимого таблицы).
Синтаксис:

Код:
<table cellspacing="2" cellpadding="3">
     <tr>
          <td>Привет, Мир!</td>
     </tr>
</table>

8) width - задает ширину таблицы в пикселях или процентах.
9) height - задает высоту таблицы в пикселях. Стоит заметить, что такая нужная функция, как высота таблицы в 100% в языке гипертекстовой разметки "HTML 4" до сих пор не реализована.
Синтаксис:

Код:
<table width="300" height="50">
     <tr>
          <td>Привет, Мир!</td>
     </tr>
</table>

Стоит заметить, что у вас на начальном этапе программирования таблиц на веб-странице могут возникнуть проблемы с размерами таблиц и их ячеек. Простой пример. Вы задаете высоту в 25 пикселей. Но шрифт текста в ней уже занимает 25 пикселей, а при этом вы, для красоты его отображения на экране, задаете отступ еще в 3 пикселя по краям, что прибавляет уже целых 6 пикселей в высоту (по три пикселя сверху и снизу текста). В таких случаях не стоит рассчитывать на то, что браузер станет подавлять эти ошибки. Как я уже писал, вот такие мелочи разные браузеры иногда отображают по разному. Так что в этом случае у вас есть два пути, либо задать высоту в 31 пиксель, либо высоту вообще не задавать, так как в этом примере текст уже занимал 25 пикселей и вместе с отступами высота и так будет 31 пиксель. Можно конечно еще уменьшить сам текст до 19 пикселя и с отступом в 6 пикселей высота станет как раз 25 пикселей. Но в примере нам надо было сохранить размер текста. Если нет, то рассматривайте и третий вариант.
Но помните, еще раз повторюсь, что в разных браузерах один и тот же код может отображаться по разному. Поэтому, если вы намереваетесь заняться программированием сайтов, запаситесь всеми видами наиболее распространенных браузеров, как новыми версиями, так и старыми. Чтобы протестировать созданный вами сайт, как он будет смотреться у пользователей.
В следующем уроке мы рассмотрим строки и ячейки таблиц. А в завершение для наглядности приведу один исходный код таблицы с некоторыми атрибутами.
Opera 11.51:
http://s017.radikal.ru/i422/1110/fa/0986b1f18e72.jpg
Mozilla Firefox 3.6.23:
http://s43.radikal.ru/i100/1110/c2/721535bfb7a0.jpg
Internet Explorer 8:
http://i008.radikal.ru/1110/53/09937467a9df.jpg
Синтаксис:

Код:
<html>
<head>
<title>Документ Без Имени</title>
</head>
<body>
<table width="100%" border="3" align="center" cellpadding="5" cellspacing="3" bordercolor="#0033CC" bgcolor="#00CCFF">
     <tr>
          <td>Привет, Мир!</td>
          <td>Привет, Мир!</td>
     </tr>
     <tr>
          <td>Привет, Мир!</td>
          <td>Привет, Мир!</td>
     </tr>
</table>
</body>
</html>

+1


Вы здесь » Lilitochka-club » Уроки по созданию сайтов » Программирование на языке HTML


Рейтинг форумов | Создать форум бесплатно © 2007–2016 «QuadroSystems» LLC