Для создания интересных web-сайтов необходима программа создания и редактирования файлов изображений.

К сожалению, в Windows и других операционных системах отсутствуют хорошие программы для редактирования изображений. Таким образом, вы может вложить деньги в приобретение Paint Shop Pro, PhotoShop или Macromedia Fireworks - это три лучшие программы редактирования изображений, имеющиеся в данный момент на рынке.

 

Чтобы не покупать дорогую программу для работы с изображениями, вы можете загрузить бесплатную программу, свободно распространяемую через интернет, например Irfan View или Inkscape, возможности которых лишь незначительно уступают профессиональным редакторам.

 

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

1. Правой клавишей мыши щёлкните на изображении в Internet.

2. Выберите " Save picture as..." в меню.

3. Выберите место для сохранения на вашем компьютере и нажмите " Save".

 

Проделайте это с изображением, расположенным в папке Для студентов, и скопируйте его в папку, где находятся ваши HTML-документы. (Заметьте, что этот логотип сохраняется в файле формата PNG: logo.png):

 

 

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

 

Необходимо знать ещё две вещи об изображениях.

 

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

 

Пример 2:

 

< img src=" images/logo.png" >

 

Пример 3:

 

< img src=" http: //www.html.net/logo.png" >

 

Во-вторых, изображения могут быть ссылками:

 

Пример 4:

 

< a href=" http: //www.html.net" >

< img src=" logo.png" > < /a>

 

 

Ещё атрибуты.

 

Вам всегда нужно использовать атрибут src, который указывает браузеру, где находится изображение. Помимо этого есть ещё и другие атрибуты, которые могут понадобиться при работе с изображениями.

 

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

 

Пример 5:

 

< img src=" logo.gif" alt=" HTML.net logo" >

 

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

 

Атрибут title можно использовать для краткого описания изображения:

 

Пример 6:

 

< img src=" logo.png" title=" Learn HTML from HTML.net" >

 

Если вы поместите курсор, без щелчка, над ссылкой, вы увидите, что текст " Learn HTML from HTML.net" появился во всплывающем боксе.

 

Два других важных атрибута - width и height:

 

Пример 7:

 

< img src=" logo.png" width=" 141" height=" 32" >

 

Атрибуты width и height можно использовать для установки ширины и высоты изображения, соответственно. Значение указывается в пикселях. Пиксель это единица для измерения разрешения экрана. (Обычное разрешение - 800x600 и 1024x768 пикселей). В отличие от сантиметров, пиксели являются относительными единицами, которые зависят от разрешения данного экрана. Для пользователя с высоким разрешением экрана 25 пикселей могут выглядеть как 1 сантиметр, а эти же 25 пикселей при низком разрешении могут соответствовать 1.5 сантиметрам экрана.

 

Если вы не установите width и height, изображение будет показано в своём реальном размере. При помощи width и height вы можете изменять размеры:

 

Пример 8:

 

< img src=" logo.png" width=" 32" height=" 32" >

 

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

 

Тем не менее, неплохо использовать атрибуты width и height, поскольку браузер сможет определять размер изображения на странице до его полной загрузки. Это позволит браузеру быстрее и более качественно загружать страницы.

 

Лабораторная работа №4

Таблицы.

Таблицы

 

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

 

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

 

Пример 1:

 

< table>

< tr>

< td> Cell 1< /td>

< td> Cell 2< /td>

< /tr>

< tr>

< td> Cell 3< /td>

< td> Cell 4< /td>

< /tr>

< /table>

 

будет выглядеть в браузере:

Cell 1	Cell 2
Cell 3	Cell 4

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

 

Для вставки таблиц используются 3 базовых тэга:

· < table> - начало и конец таблицы.

· < tr> - " table row/ряд таблицы", начинает и заканчивает горизонтальный ряд ячеек.

· < td> - сокращение от " table data/табличные данные". Этот тэг начинает и заканчивает каждую ячейку ряда таблицы.

 

В Примере 1 таблица начинается с < table>, затем идёт < tr>, указывающий на начало нового ряда. В ряду вставлены две ячейки: < td> Cell 1< /td> и < td> Cell 2< /td>. Ряд закрывается < /tr>, и сразу начинается новый ряд < tr>. В новом ряду также две ячейки. Таблица закрывается < /table>.

 

Р яды это горизонтальные строки ячеек, а столбцы - вертикальные столбцы ячеек:

 

Cell 1 и Cell 2 образуют ряд. Cell 1 и Cell 3 образуют столбец.

 

В вышеприведённом примере в таблице имеются два ряда и два столбца. Но в таблице может быть неограниченное число рядов и столбцов.

 

Пример 2:

 

< table>

< tr>

< td> Cell 1< /td>

< td> Cell 2< /td>

< td> Cell 3< /td>

< td> Cell 4< /td>

< /tr>

< tr>

< td> Cell 5< /td>

< td> Cell 6< /td>

< td> Cell 7< /td>

< td> Cell 8< /td>

< /tr>

< tr>

< td> Cell 9< /td>

< td> Cell 10< /td>

< td> Cell 11< /td>

< td> Cell 12< /td>

< /tr>

< /table>

 

будет выглядеть в браузере:

Cell 1	Cell 2	Cell 3	Cell 4
Cell 5	Cell 6	Cell 7	Cell 8
Cell 9	Cell 10	Cell 11	Cell 12

Ещё атрибуты.

 

Например, атрибут border используется для специфицирования толщины рамки вокруг таблицы:

 

Пример 3:

 

< table border=" 1" >

< tr>

< td> Cell 1< /td>

< td> Cell 2< /td>

< /tr>

< tr>

< td> Cell 3< /td>

< td> Cell 4< /td>

< /tr>

< /table>

 

будет выглядеть в браузере:

Cell 1	Cell 2
Cell 3	Cell 4

 

Толщина рамки специфицируется в пикселях.

 

Как и с изображениями, вы можете указывать размер таблицы в пикселях или в процентах от размера экрана:

 

Пример 4:

 

< table border=" 1" width=" 30%" >

 

Этот пример будет отображён в браузере как таблица шириной в 30% экрана. Проверьте сами.

 

У таблиц есть много атрибутов. Вот ещё два:

· align: специфицирует выравнивание содержимого всей таблицы по горизонтали, в ряду или в отдельной ячейке. Например, left, center или right.

· valign: специфицирует выравнивание по вертикали в ячейке. Например, top, middle или bottom.

 

 

Пример 5:

 

< td align=" right" valign=" top" > Cell 1< /td>

 

⇐ Предыдущая1234Следующая ⇒

Поделиться: