Практическая часть, Создание и описание сайта - Создание сайта на языке HTML
Создание и описание сайта
Главная страница - прямо по центру главной страницы расположены все последние новости про мобильные устройства и технологии.
HTML код:
<section id="middle">
<div class="mainside">
<div class="content">
<article class="post">
<img class="poster" src="Адрес файла с картинкой" alt="" />
<h3 class="title"><a href="Ссылка на страницу">Заголовок</a></h3>
<div class="text">Текст...</div>
<div class="more"><a href="Ссылка на страницу">Читать дальше</a></div>
<div class="clr"></div>
</article>
CSS код:
#middle {background: #fafafa; - Определяет цвет фона.
Border: solid 2px #1a9ad0; - Cвойство border позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента.
Border-top: none;
Border-radius: 0px 0px 20px 20px; - Устанавливает радиус скругления уголков рамки.}
.mainside {background: #fafafa; - Определяет цвет фона.
Border-radius: 0px 0px 0px 20px; - Устанавливает радиус скругления уголков рамки.
Border-right: solid 2px #1a9ad0; - Cвойство border позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента.
Margin-right: 300px; - Устанавливает величину отступа от каждого края.
Padding: 20px 0px; - Устанавливает значение полей вокруг содержимого элемента.}
.content {width: 660px; - Устанавливает ширину блочных или заменяемых элементов.
Float: left; - Выравнивает элемент по левому краю.
Padding: 0 10px; - Устанавливает значение полей вокруг содержимого элемента.}
.post {border-bottom: solid 2px #1a9ad0; - Cвойство border позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента.
Margin-bottom: 20px; - Устанавливает величину отступа от каждого края.
Padding-bottom: 10px; - Устанавливает значение полей вокруг содержимого элемента.}
.post. poster {float: left; - Выравнивает элемент по левому краю.
Border: solid 2px #1a9ad0; - Cвойство border позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента.
Padding: 3px; - Устанавливает значение полей вокруг содержимого элемента.
Margin: 0 10px 10px 0; - Устанавливает величину отступа от каждого края.
Width: 205px; - Устанавливает ширину блочных или заменяемых элементов.
Height: 145px; - Устанавливает высоту блочных или заменяемых элементов}
.post. title {color: #1a9ad0;
Font-size: 16px; - Определяет размер шрифта.
Font-weight: bold; - Устанавливает насыщенность шрифта. bold -- полужирное начертание.
Margin: 0 10px; - Устанавливает величину отступа от каждого края.}
.post. text {margin: 10px; - Устанавливает величину отступа от каждого края.
Color: #888888; - Определяет цвет текста.
Font-size: 16px; - Определяет размер шрифта.
Font-family: Tahoma; - Устанавливает семейство шрифта.}
.post. text a {text-decoration: underline; - Устанавливает подчеркнутый текст.}
.post. more {text-align: right;
Padding: 5px; - Устанавливает значение полей вокруг содержимого элемента.
Margin: 5px; - Устанавливает величину отступа от каждого края.
Float: right; - Выравнивает элемент по правому краю.}
.post. more a {background: #2aaae0; - Определяет цвет фона.
Display: inline-block;
Line-height: 20px;
Height: 20px; - Устанавливает высоту блочных или заменяемых элементов
Padding: 2px 10px; - Устанавливает значение полей вокруг содержимого элемента.
Text-decoration: none; - Отменяет все эффекты, в том числе и подчеркивания у ссылок, которое задано по умолчанию.
Color: #fff; - Определяет цвет текста.
Font-size: 12px; - Определяет размер шрифта.
Font-weight: bold; - Устанавливает насыщенность шрифта. bold -- полужирное начертание.
Border: solid 1px #1a9ad0; - Cвойство border позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента.
Border-radius: 2px; - Устанавливает радиус скругления уголков рамки.
Float: right; - Выравнивает элемент по правому краю.}
.post. more a:hover {background: #5ac0f0;} - Определяет цвет фона.
Справа на главной странице расположен меню сайта и три самых популярных новостей:
Новости - здесь пользователи могут прочитать о самых свежих новостях мобильных телефонов и смартфонов.
Цены - здесь пользователи могут узнать цены на мобильные устройства в Ташкенте.
Полезное - здесь расположены полезные статьи о мобильных устройствах.
Приложения - здесь расположена информация про самые популярные приложения для мобильных устройств.
HTML код:
<aside class="sidebar">
<nav class="side_menu">
<ul><li><a href="index. html">НОВОСТИ</a></li>
<li><a href="index6.html">ПРИЛОЖЕНИЯ</a></li>
<li><a href="index4.html">ЦЕНЫ</a></li>
<li><a href="index5.html">ПОЛЕЗНОЕ</a></li></ul></nav>
<div class="block">
<div class="title">Самое популярное</div>
<div class="text">
<a href="novosti008.html">Qualcomm может разработать обновленную версию Snapdragon 810 специально для Samsung</a><br></br>
<a href="novosti007.html">LG удалось продать 59,6 миллиона смартфонов за 2014 год</a><br></br>
<a href="novosti001.html">Слухи о веб-версии WhatsApp оказались правдой</a><br></br>
</div></div>
CSS код:
.sidebar {margin-right: -290px; - Устанавливает величину отступа от правого края.
Width: 275px; - Устанавливает ширину блочных или заменяемых элементов.
Padding: 0 5px; - Устанавливает значение полей вокруг содержимого элемента.
Float: right; - Выравнивает элемент по правому краю.}
.side_menu {border-bottom: solid 2px #1a9ad0;
Margin-bottom: 10px; - Устанавливает величину отступа от каждого края.}
.side_menu ul {padding-bottom: 10px; - Устанавливает значение полей вокруг содержимого элемента.
Overflow: hidden; - Отображается только область внутри элемента, остальное будет скрыто.}
.side_menu ul li {float: left; - Выравнивает элемент по левому краю,
Margin-bottom: 10px; - Устанавливает величину отступа от каждого края.}
.side_menu ul li:nth-last-child(2n+1) {margin-left: 4px; - Устанавливает величину отступа от каждого края.}
.side_menu ul li a {background: #2aaae0; - Определяет цвет фона.
Display: inline-block; - Это значение генерирует блочный элемент, который обтекается другими элементами веб-страницы подобно встроенному элементу. компьютерный сайт гипертекстовый
Line-height: 25px; - Устанавливает межстрочный интервал текста, отсчет ведется от базовой линии шрифта.
Height: 30px; - Устанавливает высоту блочных или заменяемых элементов
Padding: 0 10px; - Устанавливает значение полей вокруг содержимого элемента.
Width: 112px; - Устанавливает ширину блочных или заменяемых элементов.
Text-decoration: none; - Отменяет все эффекты, в том числе и подчеркивания у ссылок, которое задано по умолчанию.
Color: #fff; - Отменяет все эффекты, в том числе и подчеркивания у ссылок, которое задано по умолчанию.
Font-size: 10px; - Определяет размер шрифта.
Font-weight: bold; - Устанавливает насыщенность шрифта. bold -- полужирное начертание.
Border: solid 1px #1a9ad0; - Cвойство border позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента.
Border-radius: 10px; - Устанавливает радиус скругления уголков рамки.}
.side_menu ul li:nth-last-child(2n+1) a {border-radius: 10px; - Устанавливает радиус скругления уголков рамки.}
.side_menu ul li a:hover {background: #5ac0f0; - Определяет цвет фона.}
.block {margin-bottom: 25px; - Устанавливает величину отступа от каждого края.
Padding: 5px; - Устанавливает значение полей вокруг содержимого элемента.}
.block. title {padding-left: 0 10px; - Устанавливает значение полей вокруг содержимого элемента.
Font-weight: bold; - Устанавливает насыщенность шрифта. bold -- полужирное начертание.
Font-size: 14px; - Определяет размер шрифта.}
.block. text {margin-top: 5px; - Устанавливает величину отступа от каждого края.
Font-size: 12px; - Определяет размер шрифта.}
Cверху слева расположен логотип сайта и слоган
HTML код:
<header id="header">
<h1 class="logotype">
<a href="/">Все о мобильной технике и технологиях</a></h1>
<div class="clr"></div></header>
CSS код:
.logotype {float: left;} - Выравнивает элемент по левому краю;
.logotype a {background: url(../images/logo. png) no-repeat; - Устанавливает фоновое изображение. / Устанавливает одно фоновое изображение в элементе без его повторений,;
Padding: 30px 0 0 30px; - Устанавливает значение полей вокруг содержимого элемента.
Display: block; - Элемент показывается как блочный.
Min-height: 5px; - Задает минимальную высоту.
Min-width: 115px; - Устанавливает минимальную ширину.
Font-size: 14px; - Определяет размер шрифта.
Text-decoration: none; - Отменяет все эффекты, в том числе и подчеркивания у ссылок, которое задано по умолчанию.
Color: #1a9ad0; - Определяет цвет текста.}
.clr {clear: both;} - Отменяет обтекание элемента одновременно с правого и левого края.
Чуть снизу справа расположен форма поиска для того чтобы пользователи могли искать интересующую их новости и статьи
HTML код:
<div class="search"><form>
<input class="form" type="text" placeholder="Фраза для поиска" />
<input class="submit" type="submit" value="" /></form></div>
CSS код:
.search {background: #fff; - Определяет цвет фона
Float: right; - Выравнивает элемент по правому краю
Border: solid 2px #1a9ad0; - Cвойство border позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента.
Margin: 5px 25px 0 0; - Устанавливает величину отступа от каждого края.
Border-radius: 5px; - Устанавливает радиус скругления уголков рамки.}
Search input {float: left; - Выравнивает элемент по левому краю.
Margin: 0; - Устанавливает величину отступа от каждого края.}
Search input. form {background: none;
Line-height: 20px; - Устанавливает межстрочный интервал текста.
Height: 20px; - Устанавливает высоту блочных или заменяемых элементов.
Width: 200px; - Устанавливает ширину блочных или заменяемых элементов.
Font-size: 10px; - Определяет размер шрифта.
Color: #888888; - Определяет цвет текста.
Padding: 0 5px; - Устанавливает значение полей вокруг содержимого элемента.}
Search input. submit {height: 20px; - Устанавливает высоту блочных или заменяемых элементов.
Width: 20px; - Устанавливает ширину блочных или заменяемых элементов.
Margin-left: 5px; Устанавливает величину отступа от левого края}
Снизу по центру есть возможность перейти на следующую или на предыдущую страницу на сайте:
HTML код:
<div style="text-align:center">
<div class="navi">
<span>1</span>
<a href="index2.html">2</a>
<a href="index3.html">3</a></div></div>
CSS код:
.navi {display: inline-block; - Это значение генерирует блочный элемент, который обтекается другими элементами веб-страницы подобно встроенному элементу.
Border-bottom: solid 2px #1a9ad0; - Свойство border позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента.
Padding: 0 5px 5px 5px; - Устанавливает значение полей вокруг содержимого элемента.
Font-weight: bold; - Устанавливает насыщенность шрифта. bold -- полужирное начертание
Overflow: hidden; - Отображается только область внутри элемента, остальное будет скрыто.}
.navi a, .navi span {float: left; - Выравнивает элемент по левому краю,
Margin: 0 6px; - Устанавливает величину отступа от каждого края.}
.navi span {color: #1a9ad0;
Text-decoration: underline; - Устанавливает подчеркнутый текст }
.navi a, .navi span. nav_ext {color: #1a9ad0; - Определяет цвет текста.}
.navi span. nav_ext {text-decoration: none; - Отменяет все эффекты, в том числе и подчеркивания у ссылок, которое задано по умолчанию. }
Похожие статьи
-
Проектирование и разработка сайта Средства разработки Язык гипертекстовой разметки HTML В Интернете сосредотачивается и передается достаточно большое...
-
Запись шаблона CSS - Создание сайта на языке HTML
Любое правило таблицы стилей CSS состоит из селектора и определения шаблона. Селектор выступает в роли указателя стилевого правила для определенного...
-
Структура WEB-страницы - Создание сайта на языке HTML
Заготовка типичной WEB-страницы: <HTML> <HEAD> <TITLE> Структура WEB-страницы </title> <STYLE> H2 {font-family: Arbat;}CODE { font-family:...
-
За структуру HTML-документа отвечают следующие теги: <HTML> - в данном контейнере находится все содержимое HTML-документа. <HEAD> - содержит...
-
Для того, чтобы создать страницу сайта достаточно в текстовом редакторе, в блокноте сделать следующую надпись: Первая страница сайта создана. После...
-
Теоритическая часть, История и версии HTML - Создание сайта на языке HTML
История и версии HTML Первая версия HTML была разработана в 1989 году Тимом Бенерс-Ли для популярного в прошлом браузера Mosaic. Но в то время ни для...
-
Оформление сайта, Язык HTML - Создание сайта
Оформление или дизайн - это внешний вид сайта. Эта та оболочка, которую вам придется надевать на ваш сайт, как этикетку на коробку с товаром. От этой...
-
История создания и развития языка HTML - Язык HTML как средство создания информационных ресурсов
В 1989 году Тим Бернерс-Ли, сотрудник центра высоких технологий (CERN), предложил проект распределенной гипертекстовой системы под названием WWW (World...
-
Заключение, Список литературы - Язык HTML как средство создания информационных ресурсов
На сегодняшний момент перспективы развития языка представляются четче, чем раньше, но все еще не совсем просто. Над языком трудятся две организации,...
-
На сегодняшний момент HTML5 все еще разрабатывается. Все еще ведутся обсуждения по поводу следующих нерешенных проблем: - Доработка некоторых элементов...
-
Таблицы стилей - Создание сайта на языке HTML
Впервые каскадные таблицы стилей CSS были реализованы в браузере Internet Explorer 3.0. Однако в то время развитие CSS находилось в зачаточном состоянии,...
-
Принцип работы языка. Синтаксис Как и было сказано ранее основой для HTML-были приняты текстовые документы, содержащие в себе HTML5. Рассмотрим следующий...
-
Введение - Создание сайта на языке HTML
В век цифровых технологий и массовой компьютеризации, интернет стал неотъемлемой частью нашей жизни, а web-программирование и дизайн престижной и...
-
Создание заголовков - Создание сайта
Заголовки - отличный инструмент структурной организации содержимого Веб-страницы. Стандарт HTML предусматривает возможность использования заголовков...
-
Практическое решение примеров в программе Macromedia Flash (скриншоты примеров) Пример анимационная баннер сайта. Пример баннер сайта состоит 227 кадров...
-
"WWWSQLDesigner" позиционируется как абсолютно бесплатный, доступный для пользователей, универсальный веб-редактор, значительно упрощающий процесс...
-
Гипертекст - Создание сайта на языке HTML
Уже достаточно много времени затрачено на то, чтобы научиться при помощи HTML и браузера выводить на экран тексты. Но это просто Тексты . Используя...
-
Что такое HTML. Hyper Text Markup Language (HTML) является стандартным языком, предназначенным для создания гипертекстовых документов в среде WEB....
-
HTML - Разработка сайта рекламного агентства "ART"
HTML (HyperText Markup Language) - язык разметки (маркировки) гипертекста. Гипертекст своим развитием обязан интернету, хоть и создавался он совсем не...
-
Классификация команд языка. - Технология создания и управления баз данных
Команды SQL Команда Назначение Описание данных CREATE TABLE Создает структуру таблицы Манипулирование данными INSERT Добавляет новые записи в таблицу...
-
Некоторые WWW browser позволяют пользователю, заполнив специальную форму, возвращающую полученное значение, выполнять некоторые действия на вашем...
-
Тэги в HTML. - Создание электронного учебника (по HTML) в редакторе Microsoft Front Page
Тэги тела документа идентифицируют отображаемые в окне компоненты HTML-документа. Тело документа может содержать ссылки на другие документы, текст и...
-
Разрезаем изображения - Создание сайта
В последнее время весьма актуальной задачей, стоящей перед Web-дизайнерами является разработка интерактивной графики. Одной из разновидностей такой...
-
CoDeSys -- универсальный инструмент разработки прикладных программ для программируемых логических контроллеров на языках стандарта IEC 61131-3. Данный...
-
Создание Web-страниц в прикладной программе FrontPage - Создание сайта
Создание новой пустой Web-страницы Если при открытии окна программы FrontPage в нем отображается пустая страница, то разработку веб - страницы можно...
-
Использование техники фреймов позволяет разбить окно браузера на произвольное число независимых подокон, каждое из которых отображает отдельную HTML -...
-
Center Выравнивание текста по центру. Текст помещается по центру горизонтали окна браузера или контейнера, где расположен текстовый блок. Left...
-
Структура web-документа - Создание сайта
Каждый HTML-документ, отвечающий спецификации HTML какой-либо версии, должен начинаться со строки объявления версии HTML <!DOCTYPE...>, которая обычно...
-
Назначение системы Сайт "вопрос-ответ" предназначен для поиска ответов на интересующие пользователей вопросы, с рейтингом пользователей, возможностью...
-
Структура сайта в виде блок-схемы (Рисунок 1) Рисунок 1 - Структура сайта в виде блок-схемы Mockup главной страницы Макет сайта (Рисунок 2) был выполнен...
-
Все тэги HTML начинаются с "<" (левой угловой скобки) и заканчиваются символом ">" (правой угловой скобки). Как правило, существует стартовый тэг и...
-
Что такое Flash? Flash (от англ. Flash - "вспышка", произносится "флэш") Flash - это технология веб-мультипликации и создания интерактивного контента от...
-
Для создания банка данных использовали пошаговый алгоритм, последовательно фотографируя картотеки встреч видов птиц с отметкой карточек, которые были...
-
Создание заголовка страницы - Создание сайта
Создайте в программе Adobe PhotoShop новый документ с размерами, соответствующими размерам заголовочной части страницы (посмотреть размер с помощью...
-
Бесшовный фон - Создание сайта
Фон web-страниц в значительной мере определяет стиль и привлекательность всего сайта. В программе PhotoShop создайте документ размером 100х100 пикселов с...
-
Создание баннера - Создание сайта
Баннер представляет собой рекламный рисунок для рекламы в Интернете созданного сайта. Как правило, баннер - это графическое изображение прямоугольной...
-
Применение полученных знаний на практике. Создание приложения - Программирование на языке C++
Я применил полученные знания при разработке простого приложения TodoList. Я соблюдал все принципы SOLID. Придерживаясь принципа инверсии зависимости я...
-
Сервисы сайта - Создание сайта
Сервисы сайта направлены на облегчение использования сервисов компании. Так, например, онлайн-консультация позволяет пользователю быстро получить ответ...
-
Окно прикладной программы FrontPage - Создание сайта
После запуска программы FrontPage (Пуск - программы - Microsoft Office - FrontPage ) на экране появится окно программы, в котором отображается новая...
-
Знакомство с программой FrontPage - Создание сайта
Прикладная программа FrontPage 2003 - это визуальный html-редактор для быстрого создания сайта. Язык HTML является основным языком программирования Web -...
Практическая часть, Создание и описание сайта - Создание сайта на языке HTML