Скачать презентацию HTML http www w 3 schools Скачать презентацию HTML http www w 3 schools

Что такое сайт.pptx

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

HTML HTML

http: // www. w 3 schools. com/html / http: // www. w 3 schools. com/html /

CREATE A LIST OF 10 ITEMS IN YOUR SHOP. CREATE A LIST OF 10 ITEMS IN YOUR SHOP.

HTML STRUCTURE • HTML is comprised of “elements” and “tags” • Begins with <html> HTML STRUCTURE • HTML is comprised of “elements” and “tags” • Begins with and ends with • Elements (tags) are nested one inside another: • Tags have attributes: logo • HTML describes structure using two main sections: and 4

test. html FIRST HTML PAGE <!DOCTYPE HTML> <html> <head> <title>My First HTML Page</title> </head> test. html FIRST HTML PAGE My First HTML Page

This is some text. . .

5

FIRST HTML PAGE: TAGS <!DOCTYPE HTML> Opening <html> tag <head> <title>My First HTML Page</title> FIRST HTML PAGE: TAGS Opening tag My First HTML Page Closing tag

This is some text. . .

An HTML element consists of an opening tag, a closing tag and the content inside. 6

FIRST HTML PAGE: HEADER HTML <!DOCTYPE HTML> header <html> <head> <title>My First HTML Page</title> FIRST HTML PAGE: HEADER HTML header My First HTML Page

This is some text. . .

7

FIRST HTML PAGE: BODY <!DOCTYPE HTML> <html> <head> <title>My First HTML Page</title> </head> <body> FIRST HTML PAGE: BODY My First HTML Page

This is some text. . .

HTML body 8

Link to Telerik" src="https://present5.com/presentation/-84838464_357934732/image-9.jpg" alt="SOME SIMPLE TAGS Link to Telerik" /> SOME SIMPLE TAGS Link to Telerik Web site • Image Tags logo • Text formatting tags This text is emphasized. new line 9 This one is more emphasized.

SOME SIMPLE TAGS – EXAMPLE some-tags. html <!DOCTYPE HTML> <html> <head> <title>Simple Tags Demo</title> SOME SIMPLE TAGS – EXAMPLE some-tags. html Simple Tags Demo This is a link. logo Bold and italic text. 10

TAGS ATTRIBUTES • Tags can have attributes • Attributes specify properties and behavior • TAGS ATTRIBUTES • Tags can have attributes • Attributes specify properties and behavior • Example: Attribute alt with value logo • Few attributes can apply to every element: • id, style, class, title • The id is unique in the document • Content of title attribute is displayed as hint when the element is hovered with the mouse • Some elements have obligatory attributes 11

HEADINGS AND PARAGRAPHS • Heading Tags (h 1 – h 6) <h 1>Heading 1</h HEADINGS AND PARAGRAPHS • Heading Tags (h 1 – h 6) Heading 1 Sub heading 2 Sub heading 3 • Paragraph Tags

This is my first paragraph

This is my second paragraph

• Sections: div and span
This is a div
12

HEADINGS AND PARAGRAPHS – EXAMPLE headings. html <!DOCTYPE HTML> <html> <head><title>Headings and paragraphs</title></head> <body> HEADINGS AND PARAGRAPHS – EXAMPLE headings. html Headings and paragraphs Heading 1 Sub heading 2 Sub heading 3

This is is my my first paragraph

second paragraph

This is a div
13

  • Apple
    • " src="https://present5.com/presentation/-84838464_357934732/image-14.jpg" alt="ORDERED LISTS:
      TAG • Create an Ordered List using
        :
        1. Apple
          2. " /> ORDERED LISTS:
            TAG • Create an Ordered List using
              :
              1. Apple
              2. Orange
              3. Grapefruit
              • Attribute values for type are 1, A, a, I, or i 1. Apple 2. Orange 3. Grapefruit i. Apple ii. Orange iii. Grapefruit a. Apple I. Apple b. Orange A. Apple B. Orange c. Grapefruit II. Orange 14 III. Grapefruit C. Grapefruit

        " src="https://present5.com/presentation/-84838464_357934732/image-15.jpg" alt="UNORDERED LISTS: TAG • Create an Unordered List using

          :
            " /> UNORDERED LISTS: TAG • Create an Unordered List using
              :
              • Apple
              • Orange
              • Grapefruit
              • Attribute values for type are: • disc, circle or square • Apple o Apple § Apple • Orange o Orange § Orange • Pear o Pear § Pear 15

            • <!DOCTYPE html> • <head> • <title>Медицинский колледж Авиценна</title> • <link href= • • • Медицинский колледж Авиценна • • • • •

            Мой первый сайт
            • •

            HTML (HYPERTEXT MARKUP LANGUAGE) • Example HTML code: <HTML> <head> <title>Hello World</title> </head> <body HTML (HYPERTEXT MARKUP LANGUAGE) • Example HTML code: Hello World Hello World 17

            HTML (HYPERTEXT MARKUP LANGUAGE) 18 HTML (HYPERTEXT MARKUP LANGUAGE) 18

            CSS (CASCADING STYLE SHEET) • • • Simple mechanism for adding style to web CSS (CASCADING STYLE SHEET) • • • Simple mechanism for adding style to web page Code be embedded into the HTML file HTML tag: • Also be in a separate file FILENAME. css • HTML tag: • Style types mainly include: • Font • Color • Spacing 19

            CSS (CASCADING STYLE SHEET) • Client’s browser dependable • Example code: p, h 1, CSS (CASCADING STYLE SHEET) • Client’s browser dependable • Example code: p, h 1, h 2 { margin-top: 0 px; margin-bottom: 100 px; padding: 20 px 40 px; } • More info: http: //www. w 3. org/Style/CSS/ http: //www. w 3 schools. com/css_intro. asp 20

            CSS (CASCADING STYLE SHEET) <HTML> <head> <title>Hello World</title> <style type=“text/css”> h 1 { margin-top: CSS (CASCADING STYLE SHEET) Hello World Hello World 21

            CSS (CASCADING STYLE SHEET) 22 CSS (CASCADING STYLE SHEET) 22

            HTML WITHOUT CSS 23 HTML WITHOUT CSS 23

            logo Simple tags <title> <body> <h 1>Header</h 1> <img src="logo" alt="logo" /> <b>Bold</b> and <i>italic</i> text. </html> </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=1770466839'></script> <script type='text/javascript'> /* <![CDATA[ */ var my_ajax_object = {"ajax_url":"https:\/\/present5.com\/wp-admin\/admin-ajax.php","nonce":"33a1179831"}; /* ]]> */ </script> <script type='text/javascript' src='https://present5.com/wp-content/themes/sampression-lite/lib/js/filer.js?ver=1770466839'></script> </body> </html>