Как сделать свой сайт и заработать на нем, Практическое пособие для начинающих по заработку в Интернете - Мухутдинов Евгений (2012)
-
Год:2012
-
Название:Как сделать свой сайт и заработать на нем, Практическое пособие для начинающих по заработку в Интернете
-
Автор:
-
Жанр:
-
Язык:Русский
-
Издательство:Питер
-
Страниц:86
-
ISBN:978-5-459-01666-6
-
Рейтинг:
-
Ваша оценка:
В издании все основные этапы создания сайтов и получения дополнительного заработка в сети Интернет: поиск идей для интернет-проекта, выбор домена и хостинга, создание нового сайта, его раскрутка и продвижение в поисковых системах, получение многочисленного дохода при помощи контекстной рекламы, различных платных загрузок, партнерских программ и других действующих способов.
Если вы хотите получать стабильный ежемесячный доход с помощью своего сайта, затратив при этом минимум своих усилий и затрат, эта книга специально для вас.
Как сделать свой сайт и заработать на нем, Практическое пособие для начинающих по заработку в Интернете - Мухутдинов Евгений читать онлайн бесплатно полную версию книги
Как вы уже, наверное, догадались, необходимую информацию для подобного поиска Google берет из атрибутов width и height. Соответственно, при создании сайтов было бы неразумно отказаться от их использования.
Сейчас мы применим указанные выше атрибуты на нашей тестовой странице. Нужно изменить HTML-код согласно листингу 3.1.
Листинг 3.1. Использование атрибутов alt, width и height <html>
<html>
<head>
<title>МФУ для дома</title>
</head>
<body>
<h1>МФУ для дома</h1>
<img src="
alt="МФУ для дома фото" width="200" height="200">
<img src="mfu_0.jpg" alt="МФУ для дома фото" width="200"
height="200" >
</body>
</html>
Теперь можно посмотреть, какие изменения произошли на веб-странице. После использования атрибута alt появился альтернативный текст, а добавление атрибутов width и height привело к появлению рамки, показывающей размер изображения (рис. 3.14).
Рис. 3.14. Результат использования атрибутов alt, width и height
Теперь пришла пора немного рассказать об использовании таблиц. Но перед тем как продолжить, вернем нашу страницу на Рабочий стол, чтобы отображались обе картинки.
Использование таблиц
Работая с текстовыми редакторами, мы не раз использовали таблицы, чтобы, к примеру, более наглядно представить числовую информацию. В сайтах у таблиц изначально было несколько другое предназначение: размещение элементов веб-страницы по своим местам (позиционирование). Иными словами, в ячейки таблицы помещались определенные элементы: меню сайта, заголовок, картинки, текст и т. д. Иногда границы делались невидимыми, и при просмотре веб-страницы пользователь видел лишь результат верстки с помощью таблицы, даже не догадываясь о ее существовании.
На данный момент использование таблиц для верстки считается вчерашним днем, но, как бы то ни было, они применяются и наверняка будут применяться еще долго. Дело в том, что использование таблиц – быстрореализуемый вариант, когда тот или иной элемент веб-страницы не получается правильно разместить другими способами.
В качестве эксперимента добавим на нашу веб-страницу под рисунками небольшую таблицу, состоящую из двух строк и двух столбцов (четыре ячейки), добавив немного кода (листинг 3.2).
Листинг 3.2. Добавление таблицы под рисунками <html>
<html>
<head>
<title>МФУ для дома</title>
</head>
<body>
<h1>МФУ для дома</h1>
<img src="
alt="МФУ для дома фото" width="200" height="200">
<img src="mfu_0.jpg" alt="МФУ для дома фото" width="200"
height="200">
<table>
<tr>
<td>Ячейка 1</td>
<td>Ячейка 2</td>
</tr>
<td>Ячейка 3</td>
<td>Ячейка 4</td>
</body>
</html>
При просмотре в браузере мы видим, что под рисунками появилась таблица с прозрачными границами, состоящая из четырех ячеек. В каждой ячейке есть надпись – Ячейка 1, Ячейка 2, Ячейка 3, Ячейка 4 (рис. 3.15).
Рис. 3.15. На странице появилась таблица с невидимыми границами, состоящая из четырех ячеек
Теперь мы предлагаем вам самостоятельное задание. Необходимо поместить первое изображение вместо надписи Ячейка 1, а второе – вместо надписи Ячейка 4. Если вы все сделаете правильно, то результат будет таким, как на рис. 3.16.
Рис. 3.16. Изображения в ячейках таблицы
Пример с использованием таблицы в качестве инструмента позиционирования изображений выбран неслучайно. Таблицу мы будем применять при описании конкретных вариантов размещения рекламных блоков.
Теперь пора перейти от обычных таблиц к каскадным таблицам стилей.
Введение в CSS





