Скачать презентацию Creating Web Pages Part 1 1 OVERVIEW Скачать презентацию Creating Web Pages Part 1 1 OVERVIEW

55598b0252c8f69d66ae00bbf0f69287.ppt

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

Creating Web Pages Part 1 1 Creating Web Pages Part 1 1

OVERVIEW: HTML-What is it? n Hyper. Text Markup Language, the authoring language used to OVERVIEW: HTML-What is it? n Hyper. Text Markup Language, the authoring language used to create documents on the World Wide Web. n It defines the structure and layout of a Web document by using a variety of tags and attributes. n The correct structure for an HTML document starts with (enter here what document is about) and ends with . n All the information to be displayed on the Web page goes between the and tags. n There are hundreds of other tags used to format and lay out the information in a Web page. n Tags are also used to specify hypertext links, which allow Web developers to direct users to other Web pages with only a click of the mouse on either words or an image. 2

THE WEB DEVELOPMENT PROCESS What Does HTML Look Like? Sample Web Page HTML that THE WEB DEVELOPMENT PROCESS What Does HTML Look Like? Sample Web Page HTML that generated this Sample Web Page* * You can see the code underlying a Web page by selecting View / Source from your browser menu. 3

THE WEB DEVELOPMENT PROCESS: How do I create HTML code? You can (1) create THE WEB DEVELOPMENT PROCESS: How do I create HTML code? You can (1) create it using Windows Notepad, (2) save it as an HTML file, and then (3) view it locally using your browser. 4

THE WEB DEVELOPMENT PROCESS: How do I put my HTML files on the Web? THE WEB DEVELOPMENT PROCESS: How do I put my HTML files on the Web? You can (1) get an FTP program such as the free core. FTP, (3) transfer (i. e. , “upload”) your file(s). (2) use it to sign on to a web host for which you have an account, and then 5

THE WEB DEVELOPMENT PROCESS: How do I view my Web page? By typing its THE WEB DEVELOPMENT PROCESS: How do I view my Web page? By typing its address into a Web browser: 6

HTML FILE STRUCTURE: What are the basic structural elements? n The <html> tag should HTML FILE STRUCTURE: What are the basic structural elements? n The tag should start at the beginning of the document and end after the close of the body element. n The element provides useful, but hidden, information about the page. n The element is also found within most HTML documents. n n n The title is placed within the <head> element and so cannot be seen when the page is displayed. Most browsers display the title in the title bar at the top of the browser window. When an HTML document is published on the Web, search engines will access the title element. To attract users to your page, you should write a clear and concise title that describes what the page is about. The <body> element encloses the displayable content of the HTML documents. It starts at the end of the <head> element and ends just before the closing <html> tag. 7 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="HTML FILE STRUCTURE: What are HTML Elements? n n HTML elements are represented by" src="https://present5.com/presentation/55598b0252c8f69d66ae00bbf0f69287/image-8.jpg" alt="HTML FILE STRUCTURE: What are HTML Elements? n n HTML elements are represented by" /> HTML FILE STRUCTURE: What are HTML Elements? n n HTML elements are represented by tags, which are enclosed in angle brackets. Most HTML elements include a start tag, an end tag, and the content between them. HTML elements have their own unique attributes that assign specific qualifies, such as color, to the element. Attributes are always assigned values that are enclosed in double quotes and set equal to the attribute name. 8 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="HTML FILE STRUCTURE: What do I need to know about HTML syntax? n n" src="https://present5.com/presentation/55598b0252c8f69d66ae00bbf0f69287/image-9.jpg" alt="HTML FILE STRUCTURE: What do I need to know about HTML syntax? n n" /> HTML FILE STRUCTURE: What do I need to know about HTML syntax? n n n It is not casesensitive. It ignores all white space in a document other than the single spaces between words. When you nest elements within other elements, they must close in the reverse order in which they were opened. 9 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="HTML FILE STRUCTURE: Does neatness matter? Code snippet #1 Yes, it does matter, because" src="https://present5.com/presentation/55598b0252c8f69d66ae00bbf0f69287/image-10.jpg" alt="HTML FILE STRUCTURE: Does neatness matter? Code snippet #1 Yes, it does matter, because" /> HTML FILE STRUCTURE: Does neatness matter? Code snippet #1 Yes, it does matter, because neat code is much easier to create, edit, and maintain. Here are some guidelines to help you to create neat code: Code snippet #2 n n n Start each element on a new line Leave a blank line between elements that define large chunks of content. Indent elements that are nested within other elements 10 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="LEARNING HTML: Is there a quick way to practice writing and executing code without" src="https://present5.com/presentation/55598b0252c8f69d66ae00bbf0f69287/image-11.jpg" alt="LEARNING HTML: Is there a quick way to practice writing and executing code without" /> LEARNING HTML: Is there a quick way to practice writing and executing code without having to create an. html file? Yes! You can use W 3 Schools’ Tryit Editor* on the Web. You type your code in on the left, press the button, and the result appear on the right. * http: //www. w 3 schools. com/html/tryit. asp? filename=tryhtml_basic 11 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="HTML ENTITIES: <h 1> … <h 6>: 12 " src="https://present5.com/presentation/55598b0252c8f69d66ae00bbf0f69287/image-12.jpg" alt="HTML ENTITIES: <h 1> … <h 6>: 12 " /> HTML ENTITIES: <h 1> … <h 6>: 12 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="HTML ENTITY ATTRIBUTES: <body bgcolor=“” text=“” link=“” alink=“” vlink=“”>: 13 " src="https://present5.com/presentation/55598b0252c8f69d66ae00bbf0f69287/image-13.jpg" alt="HTML ENTITY ATTRIBUTES: <body bgcolor=“” text=“” link=“” alink=“” vlink=“”>: 13 " /> HTML ENTITY ATTRIBUTES: <body bgcolor=“” text=“” link=“” alink=“” vlink=“”>: 13 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="HTML COLOR: Hexadecimal Color Codes 14 " src="https://present5.com/presentation/55598b0252c8f69d66ae00bbf0f69287/image-14.jpg" alt="HTML COLOR: Hexadecimal Color Codes 14 " /> HTML COLOR: Hexadecimal Color Codes 14 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="CONTROLLING TEXT FLOW: 15 " src="https://present5.com/presentation/55598b0252c8f69d66ae00bbf0f69287/image-15.jpg" alt="CONTROLLING TEXT FLOW: 15 " /> CONTROLLING TEXT FLOW: 15 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="CONTROLLING TEXT FLOW: <p></p> 16 " src="https://present5.com/presentation/55598b0252c8f69d66ae00bbf0f69287/image-16.jpg" alt="CONTROLLING TEXT FLOW: <p></p> 16 " /> CONTROLLING TEXT FLOW: <p></p> 16 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="CONTROLLING TEXT FLOW:   17 " src="https://present5.com/presentation/55598b0252c8f69d66ae00bbf0f69287/image-17.jpg" alt="CONTROLLING TEXT FLOW:   17 " /> CONTROLLING TEXT FLOW:   17 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="CONTROLLING TEXT FLOW: <hr > 18 " src="https://present5.com/presentation/55598b0252c8f69d66ae00bbf0f69287/image-18.jpg" alt="CONTROLLING TEXT FLOW: <hr > 18 " /> CONTROLLING TEXT FLOW: <hr > 18 </p> </div> <div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="LINKS: The basic <a></a> tag 19 " src="https://present5.com/presentation/55598b0252c8f69d66ae00bbf0f69287/image-19.jpg" alt="LINKS: The basic <a></a> tag 19 " /> LINKS: The basic <a></a> tag 19 </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 id="sidebarrelated"> <div id="text-2" class="box_small box widget widget_text"><div id="crp_related"> </div></div></div> </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 (d, w, c) { (w[c] = w[c] || []).push(function() { try { w.yaCounter32395810 = new Ya.Metrika({ id:32395810, clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true, params: yaParams }); } catch(e) { } }); var n = d.getElementsByTagName("script")[0], s = d.createElement("script"), f = function () { n.parentNode.insertBefore(s, n); }; s.type = "text/javascript"; s.async = true; s.src = "https://mc.yandex.ru/metrika/watch.js"; if (w.opera == "[object Opera]") { d.addEventListener("DOMContentLoaded", f, false); } else { f(); } })(document, window, "yandex_metrika_callbacks"); </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.18'></script> <script type='text/javascript' src='https://present5.com/wp-content/themes/sampression-lite/lib/js/scripts.js?ver=1.1'></script> <script type='text/javascript' src='https://present5.com/wp-content/themes/sampression-lite/lib/js/shuffle.js?ver=4.9.18'></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]--> </body> </html>