Занятие 3 Верстка сайтов Frame FORM CSS Докладчик

Занятие 3. Верстка сайтов. Frame, FORM, CSS Докладчик: Калимуллин К. Г. Генеральный директор ООО «Группа Компаний ИТМ» http: //www. itmcompany. ru/

Тег FRAME Разбивает экран на различные страницы. Помогает делать дублирующие части.

Тег FRAME. Применение. <P>В этом документе содержится: <UL> <LI><A href="contents_of_frame 1. html">Миленький текстик</A> <LI><IMG src="contents_of_frame 2. gif" alt="Симпатичная картинка"> <LI><A href="contents_of_frame 3. html">Еще славный текстик</A> </UL>

Тег FRAME. Применение. ваыв

Правда о FRAME. Изживший тег для использования, был популярен в 90 -е. Подходит для ленивых(не нужно интегрировать сайт с CMS). Плохо индексируется поисковиками.

Тег FORM Даёт возможность взять с пользователя информацию. Да, анкеты, авторизации и т. д. сделаны с помощью тега

. . . Параметры action Адрес программы или" src="https://present5.com/presentation/212f98d7e31067008ba84dca85fa1789/image-7.jpg" alt="Тег FORM. Применение. Синтаксис

Тег FORM. Пример.

Тег FORM. Пример.

Тег FORM. INPUT. Основной параметр тега , определяющий вид элемента — type. Он позволяет задавать следующие элементы формы: текстовое поле (text), поле с паролем (password), переключатель (radio), флажок (checkbox), скрытое поле (hidden), кнопка (button), кнопка для отправки формы (submit), кнопка для очистки формы (reset), поле для отправки файла (file) и кнопка с изображением (image).

Тег FORM

Тег FORM. Правда. Тег, без которого не возможно сделать связь с клиентом сайта. Наиболее распространен. Имеет множество вариантов использования. - единственный тег, который делается не <Input type=“…”> </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="CSS. Каскадные таблицы стилей. Решает вопрос разделение ДИЗАЙНА и HTML-кода. Удобны для построение САЙТа," src="https://present5.com/presentation/212f98d7e31067008ba84dca85fa1789/image-13.jpg" alt="CSS. Каскадные таблицы стилей. Решает вопрос разделение ДИЗАЙНА и HTML-кода. Удобны для построение САЙТа," /> CSS. Каскадные таблицы стилей. Решает вопрос разделение ДИЗАЙНА и HTML-кода. Удобны для построение САЙТа, когда необходимо определить и использовать единую стилистику на множестве страниц. Позволяют делать тонкие настройки, на которые не способен голый HTML. </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="CSS. Каскадные таблицы стилей. Подключение. 1. <link rel=”stylesheet” type=”text/css” href=”mystyle. css” media=”all” /> 2." src="https://present5.com/presentation/212f98d7e31067008ba84dca85fa1789/image-14.jpg" alt="CSS. Каскадные таблицы стилей. Подключение. 1. <link rel=”stylesheet” type=”text/css” href=”mystyle. css” media=”all” /> 2." /> CSS. Каскадные таблицы стилей. Подключение. 1. <link rel=”stylesheet” type=”text/css” href=”mystyle. css” media=”all” /> 2. <style type=”text/css”>. . . </style> 3. <p style=”color: red”>Я абзац, выделенный красным цветом, других таких на сайте нет</p> </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="CSS. Каскадные таблицы стилей. Применение HTML-файл <h 1>Сказка</h 1> <p>В одной далёкой стране, на" src="https://present5.com/presentation/212f98d7e31067008ba84dca85fa1789/image-15.jpg" alt="CSS. Каскадные таблицы стилей. Применение HTML-файл <h 1>Сказка</h 1> <p>В одной далёкой стране, на" /> CSS. Каскадные таблицы стилей. Применение HTML-файл <h 1>Сказка</h 1> <p>В одной далёкой стране, на краю болота, под пеньком, жил ёжик. И вот однажды …</p> CSS-файл: /* оформляем заголовки: */ h 1 { color: red; background-color: yellow; font: Tahoma 2 em; } /* оформляем абзацы текста: */ p { color: grey; line-height: 150%; } </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="CSS. Каскадные таблицы стилей. Общее правило. a {text-decoration: none; } p. announce {border: 1" src="https://present5.com/presentation/212f98d7e31067008ba84dca85fa1789/image-16.jpg" alt="CSS. Каскадные таблицы стилей. Общее правило. a {text-decoration: none; } p. announce {border: 1" /> CSS. Каскадные таблицы стилей. Общее правило. a {text-decoration: none; } p. announce {border: 1 px dashed black; } /* здесь селектор - p. announce */ p. note { display: block; /* да, объявлений может быть несколько */ float: right; /* и их не обязательно писать на одной строке */ } </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="CSS. Каскадные таблицы стилей. Правда. 1. Начинайте использовать сразу, разобраться в ваших <font …" src="https://present5.com/presentation/212f98d7e31067008ba84dca85fa1789/image-17.jpg" alt="CSS. Каскадные таблицы стилей. Правда. 1. Начинайте использовать сразу, разобраться в ваших <font …" /> CSS. Каскадные таблицы стилей. Правда. 1. Начинайте использовать сразу, разобраться в ваших <font … и т. д. потом уже никто не сможет. 2. Пользуйтесь справочником. Никто не знает все свойства стилей наизусть. 3. Помните о слове СПЕЦИФИКАЦИЯ. (http: //www. w 3. org/TR/CSS 2/ ) – туда смотрят производители броузеров 4. Не все стили одинаково полезны – не все броузеры правильно работают со всеми тегами. </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Спасибо за внимание! Задавайте вопросы! Контакты: kamil@itmcompany. ru Тел. +7(8422) 65 -25 -81, 45" src="https://present5.com/presentation/212f98d7e31067008ba84dca85fa1789/image-18.jpg" alt="Спасибо за внимание! Задавайте вопросы! Контакты: kamil@itmcompany. ru Тел. +7(8422) 65 -25 -81, 45" /> Спасибо за внимание! Задавайте вопросы! Контакты: kamil@itmcompany. ru Тел. +7(8422) 65 -25 -81, 45 -92 -60 Сот. +7 -9510 -95 -36 -37 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="" src="" alt="" /> </p> </div> </div> <div id="inputform"> <script>$("#inputform").load("https://present5.com/wp-content/plugins/report-content/inc/report-form-aj.php"); </script> </div> </p> <!--end entry-content--> </div> </article><!-- .post --> </section><!-- #content --> <div class="three columns"> <div class="widget-entry"> </div> </div> </div> </div> <!-- #content-wrapper --> <footer id="footer" style="padding: 5px 0 5px;"> <div class="container"> <div class="columns twelve"> <!--noindex--> <!--LiveInternet counter--><script type="text/javascript"><!-- document.write("<img src='//counter.yadro.ru/hit?t26.10;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+ ";"+Math.random()+ "' alt='' title='"+" ' "+ "border='0' width='1' height='1'><\/a>") //--></script><!--/LiveInternet--> <a href="https://slidetodoc.com/" alt="Наш международный проект SlideToDoc.com!" target="_blank"><img src="https://present5.com/SlideToDoc.png"></a> <script> $(window).load(function() { var owl = document.getElementsByClassName('owl-carousel owl-theme owl-loaded owl-drag')[0]; document.getElementById("owlheader").insertBefore(owl, null); $('#owlheader').css('display', 'inline-block'); }); </script> <script type="text/javascript"> var yaParams = {'typepage': '1000_top_300k', 'author': '1000_top_300k' }; </script> <!-- Yandex.Metrika counter --> <script type="text/javascript" > (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date(); for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }} k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(32395810, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true }); </script> <noscript><div><img src="https://mc.yandex.ru/watch/32395810" style="position:absolute; left:-9999px;" alt="" /></div></noscript> <!-- /Yandex.Metrika counter --> <!--/noindex--> <nav id="top-nav"> <ul id="menu-top" class="top-menu clearfix"> </ul> </nav> </div> </div><!--.container--> </footer> <script type='text/javascript'> /* <![CDATA[ */ var wpcf7 = {"apiSettings":{"root":"https:\/\/present5.com\/wp-json\/contact-form-7\/v1","namespace":"contact-form-7\/v1"}}; /* ]]> */ </script> <script type='text/javascript' src='https://present5.com/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=5.1.4'></script> <script type='text/javascript' src='https://present5.com/wp-content/themes/sampression-lite/lib/js/jquery.shuffle.js?ver=4.9.26'></script> <script type='text/javascript' src='https://present5.com/wp-content/themes/sampression-lite/lib/js/scripts.js?ver=1.13'></script> <script type='text/javascript' src='https://present5.com/wp-content/themes/sampression-lite/lib/js/shuffle.js?ver=4.9.26'></script> <!--[if lt IE 9]> <script type='text/javascript' src='https://present5.com/wp-content/themes/sampression-lite/lib/js/selectivizr.js?ver=1.0.2'></script> <![endif]--> <script type='text/javascript' src='https://present5.com/wp-content/themes/sampression-lite/lib/js/notify.js?ver=1772350927'></script> <script type='text/javascript'> /* <![CDATA[ */ var my_ajax_object = {"ajax_url":"https:\/\/present5.com\/wp-admin\/admin-ajax.php","nonce":"cba9eb06fb"}; /* ]]> */ </script> <script type='text/javascript' src='https://present5.com/wp-content/themes/sampression-lite/lib/js/filer.js?ver=1772350927'></script> </body> </html>