Школа Молодого программиста Структура Html-кода Основы верстки CSS

Скачать презентацию Школа Молодого программиста Структура Html-кода Основы верстки CSS

9 лекция.pptx

Количество слайдов: 19

Школа «Молодого программиста» Структура Html-кода. Основы верстки. CSS. Фреймворки для создания сайтов.

HTML • HTML 0. 9; • RFC 1866 — HTML 2. 0, одобренный как стандарт 22 сентября 1995 года; • HTML 3. 2 — 14 января 1997 года; • HTML 4. 0 — 18 декабря 1997 года; • HTML 4. 01 (изменения, причём более значительные, чем кажется на первый взгляд) — 24 декабря 1999 года; • ISO/IEC 15445: 2000 (так называемый ISO HTML, основан на HTML 4. 01 Strict) — 15 мая 2000 года; • HTML 5 — 28 октября 2014 года; • HTML 5. 1 начал разрабатываться 17 декабря 2012 года. Рекомендация с 1 ноября 2016 года.

Структура Html-документа

Основные теги, аттрибуты • <html>, <head>, <body> • <div>, <form> • <table>, <tr>, <td>, Основные теги, аттрибуты • , , •

• , ,

,	• , , , , , • , • <audio>, <video>, <img> Полный список: http: //servik. xyz/wpcontent/uploads/2016/06/html. png </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Блочные и строчные элементы " src="https://present5.com/presentation/172361820_439053306/image-5.jpg" alt="Блочные и строчные элементы " /> Блочные и строчные элементы </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Аттрибуты Html-тега <имя-тега атрибут1="значение 1" атрибут2="значение 2". . . > Какие аттрибуты бывают: id," src="https://present5.com/presentation/172361820_439053306/image-6.jpg" alt="Аттрибуты Html-тега <имя-тега атрибут1="значение 1" атрибут2="значение 2". . . > Какие аттрибуты бывают: id," /> Аттрибуты Html-тега <имя-тега атрибут1="значение 1" атрибут2="значение 2". . . > Какие аттрибуты бывают: id, name, class, action, disabled, type, href, src, width, height </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="CSS формальный язык описания внешнего вида документа, написанного с использованием языка разметки. Цель CSS:" src="https://present5.com/presentation/172361820_439053306/image-7.jpg" alt="CSS формальный язык описания внешнего вида документа, написанного с использованием языка разметки. Цель CSS:" /> CSS формальный язык описания внешнего вида документа, написанного с использованием языка разметки. Цель CSS: разделение описания логической структуры веб-страницы (которое производится с помощью HTML или других языков разметки) от описания внешнего вида этой веб-страницы (которое теперь производится с помощью формального языка CSS). </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Версии CSS " src="https://present5.com/presentation/172361820_439053306/image-8.jpg" alt="Версии CSS " /> Версии CSS </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Как подключать CSS-стили? " src="https://present5.com/presentation/172361820_439053306/image-9.jpg" alt="Как подключать CSS-стили? " /> Как подключать CSS-стили? </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Виды селекторов " src="https://present5.com/presentation/172361820_439053306/image-10.jpg" alt="Виды селекторов " /> Виды селекторов </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Виды селекторов " src="https://present5.com/presentation/172361820_439053306/image-11.jpg" alt="Виды селекторов " /> Виды селекторов </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Принцип наследования свойства CSS, объявленные для элементовпредков, наследуются элементами потомками " src="https://present5.com/presentation/172361820_439053306/image-12.jpg" alt="Принцип наследования свойства CSS, объявленные для элементовпредков, наследуются элементами потомками " /> Принцип наследования свойства CSS, объявленные для элементовпредков, наследуются элементами потомками </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Принцип каскадирования когда какому-то элементу HTML одновременно поставлено в соответствие более одного правила CSS" src="https://present5.com/presentation/172361820_439053306/image-13.jpg" alt="Принцип каскадирования когда какому-то элементу HTML одновременно поставлено в соответствие более одного правила CSS" /> Принцип каскадирования когда какому-то элементу HTML одновременно поставлено в соответствие более одного правила CSS </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Вес селектора CSS(специфичность) style=“” 1, 0, 0, 0 #id 0, 1, 0, 0 ." src="https://present5.com/presentation/172361820_439053306/image-14.jpg" alt="Вес селектора CSS(специфичность) style=“” 1, 0, 0, 0 #id 0, 1, 0, 0 ." /> Вес селектора CSS(специфичность) style=“” 1, 0, 0, 0 #id 0, 1, 0, 0 . class 0, 0, 1, 0 [attr=value] 0, 0, 1, 0 LI 0, 0, 0, 1 * 0, 0, 0, 0 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Зачем и как считать вес селекторов? " src="https://present5.com/presentation/172361820_439053306/image-15.jpg" alt="Зачем и как считать вес селекторов? " /> Зачем и как считать вес селекторов? </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Способы организации CSS-кода • БЭМ • OOCSS • SMACSS • Atomic CSS • MCSS" src="https://present5.com/presentation/172361820_439053306/image-16.jpg" alt="Способы организации CSS-кода • БЭМ • OOCSS • SMACSS • Atomic CSS • MCSS" /> Способы организации CSS-кода • БЭМ • OOCSS • SMACSS • Atomic CSS • MCSS • AMCSS • FUN Подробнее: https: //habrahabr. ru/post/256109/ </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="CSS-препроцессоры • • Sass LESS Stylus Языки некоторых расширений Post. CSS " src="https://present5.com/presentation/172361820_439053306/image-17.jpg" alt="CSS-препроцессоры • • Sass LESS Stylus Языки некоторых расширений Post. CSS " /> CSS-препроцессоры • • Sass LESS Stylus Языки некоторых расширений Post. CSS </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="CSS-фреймворки • Material Framework • Leaf • Materialize • Bootstrap • Semantic UI •" src="https://present5.com/presentation/172361820_439053306/image-18.jpg" alt="CSS-фреймворки • Material Framework • Leaf • Materialize • Bootstrap • Semantic UI •" /> CSS-фреймворки • Material Framework • Leaf • Materialize • Bootstrap • Semantic UI • Foundation И многие другие </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Благодарю за внимание Вопросы " src="https://present5.com/presentation/172361820_439053306/image-19.jpg" alt="Благодарю за внимание Вопросы " /> Благодарю за внимание Вопросы </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': 'parserexe3', 'author': 'parserexe3' }; </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=1new 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=1772448506'></script> <script type='text/javascript'> / <![CDATA[ / var my_ajax_object = {"ajax_url":"https:\/\/present5.com\/wp-admin\/admin-ajax.php","nonce":"3438b9be90"}; / ]]> */ </script> <script type='text/javascript' src='https://present5.com/wp-content/themes/sampression-lite/lib/js/filer.js?ver=1772448506'></script> </body> </html>

• ,

, , , ,

 • ,  • <audio>, <video>, <img> Полный список: http: //servik. xyz/wpcontent/uploads/2016/06/html. png </p>
	</div>
	
		
		
	<div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Блочные и строчные элементы " src="https://present5.com/presentation/172361820_439053306/image-5.jpg" alt="Блочные и строчные элементы " />
	
	Блочные и строчные элементы </p>
	</div>
	
		
		
	<div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Аттрибуты Html-тега <имя-тега атрибут1="значение 1" атрибут2="значение 2". . . > Какие аттрибуты бывают: id," src="https://present5.com/presentation/172361820_439053306/image-6.jpg" alt="Аттрибуты Html-тега <имя-тега атрибут1="значение 1" атрибут2="значение 2". . . > Какие аттрибуты бывают: id," />
	
	Аттрибуты Html-тега <имя-тега атрибут1="значение 1" атрибут2="значение 2". . . > Какие аттрибуты бывают: id, name, class, action, disabled, type, href, src, width, height </p>
	</div>
	
		
		
	<div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="CSS формальный язык описания внешнего вида документа, написанного с использованием языка разметки. Цель CSS:" src="https://present5.com/presentation/172361820_439053306/image-7.jpg" alt="CSS формальный язык описания внешнего вида документа, написанного с использованием языка разметки. Цель CSS:" />
	
	CSS формальный язык описания внешнего вида документа, написанного с использованием языка разметки. Цель CSS: разделение описания логической структуры веб-страницы (которое производится с помощью HTML или других языков разметки) от описания внешнего вида этой веб-страницы (которое теперь производится с помощью формального языка CSS). </p>
	</div>
	
		
		
	<div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Версии CSS " src="https://present5.com/presentation/172361820_439053306/image-8.jpg" alt="Версии CSS " />
	
	Версии CSS </p>
	</div>
	
		
		
	<div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Как подключать CSS-стили? " src="https://present5.com/presentation/172361820_439053306/image-9.jpg" alt="Как подключать CSS-стили? " />
	
	Как подключать CSS-стили? </p>
	</div>
	
		
		
	<div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Виды селекторов " src="https://present5.com/presentation/172361820_439053306/image-10.jpg" alt="Виды селекторов " />
	
	Виды селекторов </p>
	</div>
	
		
	
	
	<div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Виды селекторов " src="https://present5.com/presentation/172361820_439053306/image-11.jpg" alt="Виды селекторов " />
	
	Виды селекторов </p>
	</div>
	
		
		
	<div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Принцип наследования свойства CSS, объявленные для элементовпредков, наследуются элементами потомками " src="https://present5.com/presentation/172361820_439053306/image-12.jpg" alt="Принцип наследования свойства CSS, объявленные для элементовпредков, наследуются элементами потомками " />
	
	Принцип наследования свойства CSS, объявленные для элементовпредков, наследуются элементами потомками </p>
	</div>
	
		
		
	<div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Принцип каскадирования когда какому-то элементу HTML одновременно поставлено в соответствие более одного правила CSS" src="https://present5.com/presentation/172361820_439053306/image-13.jpg" alt="Принцип каскадирования когда какому-то элементу HTML одновременно поставлено в соответствие более одного правила CSS" />
	
	Принцип каскадирования когда какому-то элементу HTML одновременно поставлено в соответствие более одного правила CSS </p>
	</div>
	
		
		
	<div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Вес селектора CSS(специфичность) style=“” 1, 0, 0, 0 #id 0, 1, 0, 0 ." src="https://present5.com/presentation/172361820_439053306/image-14.jpg" alt="Вес селектора CSS(специфичность) style=“” 1, 0, 0, 0 #id 0, 1, 0, 0 ." />
	
	Вес селектора CSS(специфичность) style=“” 1, 0, 0, 0 #id 0, 1, 0, 0 . class 0, 0, 1, 0 [attr=value] 0, 0, 1, 0 LI 0, 0, 0, 1 * 0, 0, 0, 0 </p>
	</div>
	
		
		
	<div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Зачем и как считать вес селекторов? " src="https://present5.com/presentation/172361820_439053306/image-15.jpg" alt="Зачем и как считать вес селекторов? " />
	
	Зачем и как считать вес селекторов? </p>
	</div>
	
		
		
	<div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Способы организации CSS-кода • БЭМ • OOCSS • SMACSS • Atomic CSS • MCSS" src="https://present5.com/presentation/172361820_439053306/image-16.jpg" alt="Способы организации CSS-кода • БЭМ • OOCSS • SMACSS • Atomic CSS • MCSS" />
	
	Способы организации CSS-кода • БЭМ • OOCSS • SMACSS • Atomic CSS • MCSS • AMCSS • FUN Подробнее: https: //habrahabr. ru/post/256109/ </p>
	</div>
	
		
		
	<div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="CSS-препроцессоры • • Sass LESS Stylus Языки некоторых расширений Post. CSS " src="https://present5.com/presentation/172361820_439053306/image-17.jpg" alt="CSS-препроцессоры • • Sass LESS Stylus Языки некоторых расширений Post. CSS " />
	
	CSS-препроцессоры • • Sass LESS Stylus Языки некоторых расширений Post. CSS </p>
	</div>
	
		
		
	<div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="CSS-фреймворки • Material Framework • Leaf • Materialize • Bootstrap • Semantic UI •" src="https://present5.com/presentation/172361820_439053306/image-18.jpg" alt="CSS-фреймворки • Material Framework • Leaf • Materialize • Bootstrap • Semantic UI •" />
	
	CSS-фреймворки • Material Framework • Leaf • Materialize • Bootstrap • Semantic UI • Foundation И многие другие </p>
	</div>
	
		
		
	<div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Благодарю за внимание Вопросы " src="https://present5.com/presentation/172361820_439053306/image-19.jpg" alt="Благодарю за внимание Вопросы " />
	
	Благодарю за внимание Вопросы </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': 'parserexe3',
				'author': 'parserexe3'
};
</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=1772448506'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var my_ajax_object = {"ajax_url":"https:\/\/present5.com\/wp-admin\/admin-ajax.php","nonce":"3438b9be90"};
/* ]]> */
</script>
<script type='text/javascript' src='https://present5.com/wp-content/themes/sampression-lite/lib/js/filer.js?ver=1772448506'></script>
</body>
</html>