Рубрика «HTML-CSS»

Как сделать круглые изображения?

Как сделать круглые изображения? На этом уроке мы научимся делать круглые изображения. Для этого мы должны будем поместить изображения в круг и сделать рамки вокруг них. Круглые изображения: Чтобы скруглить уголки фотографий необходимо добавить свойство border-radius, значением которого выступает радиус закругления. Добавив к квадратному изображению данное свойство мы получим круглое изображение. Создаем новый блокнот Вводим …

Уроки по созданию полного веб сайта с HTML-CSS

Уроки по созданию полного веб сайта с HTML-CSS. Учимся легко, с нуля, пошагово, наглядно и просто созданию веб сайта! 1. Cоздание веб-сайта 2. Деление страницы на разделы 3. Создание CSS файла 4. Добавление баннера 5. Добавление гиперссылок 6. Добавление информации на главную страницу 7. Добавляем фотографию на главную страницу 8. Создание нижнего раздела сайта 9. Создание страницы Литературная жизнь 10. Создание страницы Произведения 11. Добавление фотогалереи …

Как сделать баннер с наложением друг на друга различных картинок

Как сделать баннер с наложением друг на друга различных картинок в приложении Adobe Photoshop. На этом уроке мы научимся создавать простой баннер, но уже с наложенными друг на друга картинками и усложненными деталями в приложении Adobe Photoshop. Для начала создадим баннер c размерами 800 на 200. Вставляем с помощью инструмента выделения желаемую картинку. Далее вырезаем …

Создание страницы Произведения

Создание страницы Произведения На этом уроке мы создадим страницу “Произведения”. Создаем новый блокнот:  Копируем данные с файла index.html Мы собираемся использовать виджеты вкладок для отображения стихов в браузере. Открываем http://jqueryui.com/tabs/ Нажимаем на view source ,копируем данные, которые вышли, и вставляем их в наш файл :  Копируем обозначенные точкой ссылки и вставляем их в графу поиск …

Добавление фотогалереи

Добавление фотогалереи На этом уроке мы добавим фотографии в раздел “Фотогалерея” на нашем сайте.На странице фотогалереи вы будете иметь эскизы изображений. Эскиз-это небольшая версия изображения. При нажатии на миниатюры исходное изображение будет открыто на новой странице. 1. Соберите свои изображения и подготовьте эскизы ваших изображений размером 200×150 пикселей с помощью программного обеспечения photo editor. 2. …

Создание страницы Литературная жизнь

Создание страницы Литературная жизнь На этом уроке мы создадим страницу “Литературная жизнь”. Создаем новый блокнот: Копируем данные с файла index.html Вводим данные с картинки (указываем в параметре <p> свою информацию) Вместо <img class=»img-left» src=»Images/Image2.jpg» width=»300px» alt=»Gabdulla Tuqay»> вставляем название фото, которое вы хотите видеть на страницах литературная жизнь. Сохраняем файл: В результате получаем:  Следующий урок …

Создание нижнего раздела сайта

Создание нижнего раздела сайта На этом уроке мы оформим самый нижний раздел нашего сайта. Открываем раннее созданный файл index.tml с помощью блокнота . Вводим параметры с картинки: В параметре <li> мы указываем ссылки с сайтов, которые использовались для получения информации на наш сайт. Открываем раннее созданный файл StyleSheet.css с помощью блокнота. Вводим параметры с картинки: …

Добавляем фотографию на главную страницу

Добавляем фотографию на главную страницу На этом уроке мы научимся вставлять фотографию на главную страницу. Открываем раннее созданный файл index.html с помощью блокнота. Вводим параметры с картинки: Открываем раннее созданный файл StyleSheet.css с помощью блокнота. Вводим параметры с картинки: В итоге мы получаем: Следующий урок — Создание нижнего раздела сайта Предыдущий урок — Добавление информации на главную …

Добавление информации на главную страницу

Добавление информации на главную страницу На этом  уроке мы разместим информацию на главную страницу нашего сайта. Открываем раннее созданный файл index.html с помощью блокнота. Вводим параметры с картинки: <strong>-параметр, отвечающий за начертание текста(полужирный) <p>-параметр ,отвечающий за абзац <br>— параметр ,отвечающий за новую строку Вместо данных на картинке вносите свои данные(информация о человеке) Открываем раннее созданный …

Добавление гиперссылок

Добавление гиперссылок На этом уроке мы научимся рассортировывать информацию на нашем сайте на отдельные страницы. Открываем раннее созданный файл index.html с помощью блокнота. Вводим параметры с картинки: href — это основной и необходимый атрибут тега a, указывающий браузеру, какое действие надо выполнить при клике на ссылку. Открываем раннее созданный файл StyleSheet.css с помощью блокнота. Вводим параметры с …