В этой главе: Как браузер получает веб-страницы? Зачем нужен HTML-редактор? Что из себя представляет HTML-документ? Что такое html? Что такое теги? Каждый раз, открывая браузер, вы попадаете на веб-сайт, который может состоять из одной или множества веб-страниц с различной информацией. Основной технологией создания таких веб-страниц является язык HTML. Как браузер получает веб-страницы? Для общего понимания… Читать далее »
Ссылки HTML тег a С помощью html тега <A> создаются ссылки на сайте. Причем как внешние, так и внутренние. Тег a встречается на каждой странице сайта. Если бы его не было, то было бы очень затруднительно перемещаться по интернету, поскольку каждый адрес страницы (URL) пришлось бы писать вручную. Синтаксис тега <A> <a class=«имя класса» target=«параметр»… Читать далее »
Пример к 12 уроку HTML код <html> <head> <title>12 урок</title> <meta charset=»utf-8″> <link rel=»stylesheet» href=»style.css»> <link rel=»stylesheet» href=»style.css» media=»screen»> <meta name=»viewport» content=»width=device-width, initial-scale=1″ > </head> <body> <div class=»container»> <div class=»row»> <div class=»cols col-2″> <div class=»logo»> <a href=»index.html»><img src=»images/logo.png»></a> </div> </div> <div class=»cols col-10″> <div class=»menu»> <ul> <li><a href=»index.html»>Главная</a></li> <li><a href=»index.html»>Главная</a></li> <li><a href=»index.html»>Главная</a></li> <li><a href=»index.html»>Главная</a></li> </ul>… Читать далее »
Ссылка на скачивание BOOTSTRAP Адаптивный дизайн представляет собой процесс организации макета сайта таким образом, что в зависимости от типа устройства пользователя или размера экрана вся важная информация подстраивается в удобной для него форме. Большинство дизайнеров выбирают макет на основе сетки, так как с ним проще работать на разных типах устройств. Право выбора остается за вами:… Читать далее »
Шаблон главной страницы Примеры адаптивной верстки по ссылке1 и ссылке2 код HTML <html> <head> <title>4 урок</title> <meta charset=»utf-8″> <link rel=»stylesheet» href=»style.css»> <link rel=»stylesheet» href=»style.css» media=»screen»> <meta name=»viewport» content=»width=device-width, initial-scale=1″ > </head> <body> <div class=»wrapper»> <div class=»header»>Блочный тег</div> <div class=»sidebar»></div> <div class=»content»> <div class=»col-3″><img src=»images/colorwebdesign.jpg»></div> <div class=»col-3″>Блочный тег</div> <div class=»col-3″>Блочный тег</div> <div class=»col-2″><img src=»images/colorwebdesign.jpg»></div> <div class=»col-2″>Блочный тег</div> <div… Читать далее »
Адаптивный веб-дизайн «Адаптивный веб-дизайн (англ. Responsive web design) — дизайн веб-страниц, обеспечивающий отличное отображение сайта на различных устройствах, подключённых к интернету.» Зачем нужен адаптивный веб-дизайн? 1) Большое разнообразие устройств, с которых можно выходить в Интернет. В настоящее время существует множество устройств, которыми люди пользуются, в том числе, и для того, чтобы выходить в Интернет. Все… Читать далее »
Задание к двенадцатому уроку Задание 1 В блоке сайдбар создайте выпадающий список используя свойства display,position, Псевдоклассы :first-child :last-child, псевдоэлементы ::before и ::after. Пример страницы урок 10 Код html <div class=»sidebar»> <ul class=»ms»> <li class=»mslist»><a href=»»>Заголовок</a> <ul class=»msdrop»> <li><a href=»»>Подзаголовок</a></li> <li><a href=»»>Подзаголовок</a></li> <li><a href=»»>Подзаголовок</a></li> <li><a href=»»>Подзаголовок</a></li> <li><a href=»»>Подзаголовок</a></li> </ul> </li> <li><a href=»»>Заголовок</a></li> <li class=»mslist»><a href=»»>Заголовок</a> <ul class=»msdrop»> <li><a href=»»>Подзаголовок</a></li>… Читать далее »
Создайте страницу контакты, и разместите на ней карту и контактную форму. Пример на сайте урок 9
<html> <head> <meta charset=»utf-8″> <title>Трансформация и плавность перехода</title> <link rel=»stylesheet» href=»test.css»> </head> <body> <div class=»block»>Трансформация</div> </body> </html> test.css *{ margin:0; padding:0; box-sizing:border-box; } .block{ width:200px; height:200px; background:#ff0; border-top:5px red solid; border-left:5px green solid; border-right:5px blue solid; border-bottom:5px orange solid; text-align:center; line-height:200px; } Добавьте анимацию к своей странице как на примере урок8 Задание для восьмого… Читать далее »
Задание сверстать старницу на подобие этой WebMaster или inext Iwemaster Inext IWebMaster Код HTML <html> <head> <meta charset=»utf-8″> <title>6 урок</title> <link rel=»stylesheet» href=»style.css»> </head> <body> <div id=»header» class=»fix»> <div class=»center»> <div class=»row»> <div class=»logo»> <h3> <a href=»index.html»>IWebmaster.kz</a> </h3> </div> <div class=»menu»> <ul> <li><a href=»index.html»>Главная</a></li> <li><a href=»»>О нас</a></li> <li><a href=»»>Услуги</a></li> <li><a href=»#»>Контакты</a></li> </ul> </div> </div> </div> </div>… Читать далее »