03 - html tags

antonio.decarne PPT making software
0

Presentation Transcript

  • 1.Html tags Corso di Web Designper principianti
  • 2. ……. ……. ……. L'HTML è un linguaggio formato da parole chiave dette ‘tag’. I tag lavorano a coppie all’interno delle quali si inserirà un contenuto. La prima coppia di tag che utilizzeremo sono i tag HTML. Tag di apertura Tag di chiusura
  • 3. …….

    Questo è un
    paragrafo con ritorno a capo

    ……. ……. I tag HTML che non hanno contenuto sono detti tag vuoti. Il tag
    , che definisce un ritorno a capo, è un tag vuoto e non ha un tag di chiusura
  • 4. Questo dice al browser che il codice è HyperText Markup Language. Due cose da notare. La parola HTML è racchiusa tra parentesi angolari Nel secondo tag, quello di chiusura, HTML è preceduto da un forward slash
  • 5.Quindi tutti i tag devono essere racchiusi tra parentesi angolari ‘<‘ e ‘>’. Questo dice al browser che c’è del codice HTML che deve essere eseguito e che non deve essere mostrato nella pagina web. Omettendo una di queste parentesi, la pagina web potrebbe non essere visualizzata correttamente.
  • 6. Il primo tag comunica al browser di iniziare a fare qualcosa Il secondo tag dice al browser di smettere di farlo Il simbolo di stop è quella barra in avanti.
  • 7. Il tag ‘HEAD va inserito all’interno del tag HTML. Anche qui il tag HEAD è racchiuso tra parentesi angolari Il tag di chiusura è racchiuso tra parentesi angolari ed è preceduto da un forward slash.
  • 8.La sezione HEAD della pagina HTML è il posto dove si inseriscono delle istruzioni speciali per il browser. Il browser non visualizzerà direttamente sulla pagina web il contenuto di questa sezione.
  • 9.Per esempio, se vogliamo visualizzare le parole ‘Hello World’ sulla nostra pagina, e scriviamo queste parole nella sezione HEAD, il browser le ignorerà, perché ‘Hello World’ è un testo e non un’istruzione speciale che il browser può interpretare.
  • 10.Un’istruzione speciale che è possibile inserire nella sezione HEAD e che il browser può interpretare è il tag ‘TITLE’:
  • 11. Il tag TITLE viene sempre inserito all’interno della sezione HEAD
  • 12.Il tag TITLE non fa molto. E sicuramente non deve essere confuso con il nome della pagina web. Qualunque cosa si digita tra i due tag TITLE apparirà nella parte superiore della finestra del browser.
  • 13. La parte finale e più importante della pagina tipo HTML è la sezione ‘BODY’. E’ proprio tra questi due tag BODY il posto dove scriveremo la maggior parte del codice.
  • 14.Un tag speciale è ‘DOCTYPE’. Non è proprio un tag HTML, ma un’istruzione che comunica al browser la versione HTML utilizzata. Per dire che utilizziamo la versione HTML5 del nostro linguaggio di markup dobbiamo scrivere semplicemente:
  • 15. DOCTYPE deve essere la prima istruzione della nostra pagina web. Non esiste un tag finale DOCTYPE Notare il punto esclamativo dopo la prima parentesi angolare e lo spazio tra DOCTYPE e HTML.
  • 16. La mia prima pagina Questa sarà la nostra pagina tipo (skeleton) per iniziare a creare nuove pagine web.
  • 17.Il codice scritto va salvato in un file seguendo le procedure del programma utilizzato per la scrittura. Per il nome è meglio utilizzare sempre lettere minuscole. Non è obbligatorio ma è fortemente raccomandato. E’ meglio evitare l’uso degli spazi all’interno del nome. È possibile usare trattini o underscore in caso di nomi composti. Es.: prima_web_page.htmlprima-web-page.htmlprimawebpage.html
  • 18.Parole chiave: TAG <head> <!doctype> skeleton </li> </ul> </div> </div> </div> <div class="col-md-4 show-book-part"> <div class="show-relate-panel"> <div class="show-relate-title"> <span>Related</span> <!-- <span class="relate-content-down" style="display: none;float: right;"><svg t="1627556332535" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2937" width="20" height="20"><path d="M512 995.328C244.736 995.328 28.16 778.752 28.16 512 28.16 245.248 244.736 28.672 512 28.672s483.328 216.576 483.328 483.84c0 266.752-216.576 482.816-483.328 482.816z m0-56.832c235.52 0 426.496-190.976 426.496-426.496S747.52 85.504 512 85.504 85.504 276.48 85.504 512 276.48 938.496 512 938.496z m5.632-335.872C601.6 519.168 628.736 493.056 712.704 409.6c8.704-8.704 18.432-13.312 30.72-10.24 23.04 5.12 32.256 31.744 17.408 49.664-1.536 2.048-3.584 3.584-5.12 5.632C664.064 545.792 629.248 579.584 537.6 670.72c-16.896 16.384-33.792 16.384-50.176 0-92.16-91.648-127.488-125.952-219.648-217.088-9.216-9.216-13.312-19.456-10.24-31.744 4.608-16.384 21.504-26.112 37.888-22.016 4.096 1.024 8.192 3.072 11.264 5.632 2.048 1.536 4.096 3.584 6.144 5.632 83.456 82.944 110.08 109.056 193.536 191.488 1.536 1.536 3.072 4.096 5.632 7.68 2.56-3.584 4.096-6.144 5.632-7.68z" p-id="2938"></path></svg></span> <span class="relate-content-up" style="display: none;float: right;"><svg t="1627556388000" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3224" width="20" height="20"><path d="M511.729 0C794.698 0 1024 229.302 1024 511.729S794.698 1024 512.271 1024c-282.96900001 0-511.729-229.302-511.729-512.271C0 229.302 229.302 0 511.73 0z m0 60.172c-249.36 0-451.557 202.198-451.557 451.557S262.37 963.286 511.729 963.286 963.286 761.088 963.286 511.72999999c0.542-249.36-201.656-451.557-451.557-451.55699999z m-5.96299999 356.15c-88.90200001 88.36-117.633 116.006-206.53500001 204.366-9.21499999 9.216-19.515 14.094-32.525 10.842-24.394-5.41999999-34.151-33.61-18.43-52.582 1.626-2.169 3.794-3.795 5.42-5.963 97.033-96.492 133.895-132.27 230.929-228.76 17.888-17.347 35.777-17.347 53.124 1e-8 97.576 97.033 134.98 133.353 232.555 229.84399999 9.757 9.757 14.094 20.6 10.842 33.61-4.88 17.346-22.768 27.646-40.115 23.309-4.336-1.084-8.673-3.253-11.926-5.96300001-2.168-1.626-4.336-3.795-6.505-5.96299999-87.818-87.818-116.006-114.922-204.36600001-202.74-1.626-1.626-3.253-4.337-5.96299999-8.131-3.252 3.794-4.337 5.96300001-6.505 8.13z" p-id="3225"></path></svg></span> --> </div> <!-- <div class="show-relate-box" style="height: px;"> --> <div class="show-relate-box" style="height: 489px;"> <ul class="show-relate-list"> <li class="show-relate-item"> <a class="relate-img" href="https://slidehtml5.com/25378935.html" target="_blank"> <div class="show-relate-bookImg"> <img alt="ANYFLIP Digital slide making software" src="https://online.slidehtml5.com/bwxu/toxl/data/shot.jpg" class="img-rounded" /> <div class="mask-img">view</div> </div> </a> <div class="show-relate-col"> <p class="show-relate-bookTitle"> <a href="https://slidehtml5.com/25378935.html" target="_blank" title="ANYFLIP">ANYFLIP</a> </p> <p class="show-relate-author"><a href="//slidehtml5.com/homepage/bwxu">ELIZA BINTI MIN NUDIN Moe</a></p> </div> </li> <li class="show-relate-item"> <a class="relate-img" href="https://slidehtml5.com/26551503.html" target="_blank"> <div class="show-relate-bookImg"> <img alt="Kalor dan Perpindahannya Digital slide making software" src="https://online.slidehtml5.com/bume/iuet/data/shot.jpg" class="img-rounded" /> <div class="mask-img">view</div> </div> </a> <div class="show-relate-col"> <p class="show-relate-bookTitle"> <a href="https://slidehtml5.com/26551503.html" target="_blank" title="Kalor dan Perpindahannya">Kalor dan Perpindahannya</a> </p> <p class="show-relate-author"><a href="//slidehtml5.com/homepage/bume">sudarwanto060166</a></p> </div> </li> <li class="show-relate-item"> <a class="relate-img" href="https://slidehtml5.com/98208473.html" target="_blank"> <div class="show-relate-bookImg"> <img alt="Suhu Digital slide making software" src="https://online.slidehtml5.com/bume/smoe/data/shot.jpg" class="img-rounded" /> <div class="mask-img">view</div> </div> </a> <div class="show-relate-col"> <p class="show-relate-bookTitle"> <a href="https://slidehtml5.com/98208473.html" target="_blank" title="Suhu">Suhu</a> </p> <p class="show-relate-author"><a href="//slidehtml5.com/homepage/bume">sudarwanto060166</a></p> </div> </li> <li class="show-relate-item"> <a class="relate-img" href="https://slidehtml5.com/48384518.html" target="_blank"> <div class="show-relate-bookImg"> <img alt="PPT KOORDINAT KARTESIUS Digital slide making software" src="https://online.slidehtml5.com/mpgw/nnlb/data/shot.jpg" class="img-rounded" /> <div class="mask-img">view</div> </div> </a> <div class="show-relate-col"> <p class="show-relate-bookTitle"> <a href="https://slidehtml5.com/48384518.html" target="_blank" title="PPT KOORDINAT KARTESIUS">PPT KOORDINAT KARTESIUS</a> </p> <p class="show-relate-author"><a href="//slidehtml5.com/homepage/mpgw">mimi.umayah</a></p> </div> </li> <li class="show-relate-item"> <a class="relate-img" href="https://slidehtml5.com/85128955.html" target="_blank"> <div class="show-relate-bookImg"> <img alt="TRACING NAME OF TRANSPORT Digital slide making software" src="https://online.slidehtml5.com/baus/mory/data/shot.jpg" class="img-rounded" /> <div class="mask-img">view</div> </div> </a> <div class="show-relate-col"> <p class="show-relate-bookTitle"> <a href="https://slidehtml5.com/85128955.html" target="_blank" title="TRACING NAME OF TRANSPORT">TRACING NAME OF TRANSPORT</a> </p> <p class="show-relate-author"><a href="//slidehtml5.com/homepage/baus">e027143</a></p> </div> </li> <li class="show-relate-item"> <a class="relate-img" href="https://slidehtml5.com/83251633.html" target="_blank"> <div class="show-relate-bookImg"> <img alt="Korean Grammar 1- 단어의 종류 Digital slide making software" src="https://online.slidehtml5.com/bpnf/xwjg/data/shot.jpg" class="img-rounded" /> <div class="mask-img">view</div> </div> </a> <div class="show-relate-col"> <p class="show-relate-bookTitle"> <a href="https://slidehtml5.com/83251633.html" target="_blank" title="Korean Grammar 1- 단어의 종류">Korean Grammar 1- 단어의 종류</a> </p> <p class="show-relate-author"><a href="//slidehtml5.com/homepage/bpnf">mydear1962000</a></p> </div> </li> <li class="show-relate-item"> <a class="relate-img" href="https://slidehtml5.com/74178399.html" target="_blank"> <div class="show-relate-bookImg"> <img alt="Bus. venture Pickandeat Digital slide making software" src="https://online.slidehtml5.com/tzzg/vosw/data/shot.jpg" class="img-rounded" /> <div class="mask-img">view</div> </div> </a> <div class="show-relate-col"> <p class="show-relate-bookTitle"> <a href="https://slidehtml5.com/74178399.html" target="_blank" title="Bus. venture Pickandeat">Bus. venture Pickandeat</a> </p> <p class="show-relate-author"><a href="//slidehtml5.com/homepage/tzzg">joerriefayerivera26</a></p> </div> </li> <li class="show-relate-item"> <a class="relate-img" href="https://slidehtml5.com/89153475.html" target="_blank"> <div class="show-relate-bookImg"> <img alt="Korean Grammar 1-음운 Digital slide making software" src="https://online.slidehtml5.com/bpnf/ypoi/data/shot.jpg" class="img-rounded" /> <div class="mask-img">view</div> </div> </a> <div class="show-relate-col"> <p class="show-relate-bookTitle"> <a href="https://slidehtml5.com/89153475.html" target="_blank" title="Korean Grammar 1-음운">Korean Grammar 1-음운</a> </p> <p class="show-relate-author"><a href="//slidehtml5.com/homepage/bpnf">mydear1962000</a></p> </div> </li> </ul> </div> </div> <div class="show-new-panel"> <div class="show-relate-title">Latest Release</div> <ul class="show-new-list"> <li> <span style="padding-right: 5px;">1.</span> <a href="https://slidehtml5.com/25378935.html" title="ANYFLIP" target="_blank">ANYFLIP</a> </li> <li> <span style="padding-right: 5px;">2.</span> <a href="https://slidehtml5.com/25563381.html" title="BUKU PROGRAM VERIFIKASI PKPPD" target="_blank">BUKU PROGRAM VERIFIKASI PKPPD</a> </li> <li> <span style="padding-right: 5px;">3.</span> <a href="https://slidehtml5.com/26551503.html" title="Kalor dan Perpindahannya" target="_blank">Kalor dan Perpindahannya</a> </li> <li> <span style="padding-right: 5px;">4.</span> <a href="https://slidehtml5.com/98208473.html" title="Suhu" target="_blank">Suhu</a> </li> <li> <span style="padding-right: 5px;">5.</span> <a href="https://slidehtml5.com/48384518.html" title="PPT KOORDINAT KARTESIUS" target="_blank">PPT KOORDINAT KARTESIUS</a> </li> <li> <span style="padding-right: 5px;">6.</span> <a href="https://slidehtml5.com/85128955.html" title="TRACING NAME OF TRANSPORT" target="_blank">TRACING NAME OF TRANSPORT</a> </li> </ul> </div> </div> </div> </div> <!-- GDS --> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Creativework", "name": "03 - html tags - antonio.decarne Oline Presentation | SlideHTML5", "headline": "03 - html tags - antonio.decarne Oline Presentation | SlideHTML5-antonio.decarne", "datePublished": "Thu, 14 Oct 2021 04:54:51 GMT", "dateModified": "", "author": { "@type": "Organization", "name": "antonio.decarne" }, "publisher": { "@type": "Organization", "name": "antonio.decarne" }, "description": "html tags. Create a presentation online and convert your ppt to HTML like 03 - html tags now.", "Text": "Corso di Web Designper principianti. <html> \u2026\u2026. \u2026\u2026. \u2026\u2026. <\/html>. L'HTML \u00e8 un linguaggio formato da parole chiave dette \u2018tag\u2019.. I tag lavorano a coppie all\u2019interno delle quali si inserir\u00e0 un contenuto.. La prima coppia di tag che utilizzeremo sono i tag HTML.. Tag di apertura. Tag di chiusura. <html> \u2026\u2026. <p> Questo \u00e8 un <br> paragrafo con ritorno a capo <\/p>\u2026\u2026. \u2026\u2026. <\/html>. I tag HTML che non hanno contenuto sono detti tag vuoti.. Il tag <br>, che definisce un ritorno a capo, \u00e8 un tag vuoto e non ha un tag di chiusura. <html> <\/html>. Questo dice al browser che il codice \u00e8 HyperText Markup Language. Due cose da notare.. La parola HTML \u00e8 racchiusa tra parentesi angolari. Nel secondo tag, quello di chiusura, HTML \u00e8 preceduto da un forward slash. Quindi tutti i tag devono essere racchiusi tra parentesi angolari \u2018<\u2018 e \u2018>\u2019. Questo dice al browser che c\u2019\u00e8 del codice HTML che deve essere eseguito e che non deve essere mostrato nella pagina web. Omettendo una di queste parentesi, la pagina web potrebbe non essere visualizzata correttamente.. <html> <\/html>. Il primo tag comunica al browser di iniziare a fare qualcosa. Il secondo tag dice al ..." } </script> </div> </div> <div class="footer-container"> <div class="footer-box"> <div class="col"> <strong>SlideHTML5</strong> <a href="//slidehtml5.com">Home</a> <a href="/explore">Explore</a> <a href="/about">About Us</a> </div> <div class="col"> <strong>Support</strong> <a href="/contact">Contact Us</a> <a href="/faq">FAQ</a> <a href="https://blog.slidehtml5.com">Blog</a> </div> <div class="col"> <strong>Legal Terms</strong> <a href="/dmca">DMCA</a> <a href="/cookies-policy">Cookies Policy</a> <a href="/privacy">Privacy</a> <a href="/termsofservice">Terms of Service</a> </div> <div class="col4"> <img src="//static.slidehtml5.com/web/images/index/slidehtml5-logo.png" alt="SlideHtml5" /> <!-- <p> <a href="/#"><img src="//static.slidehtml5.com/web/images/footer/facebook.png" /></a> <a href="/#"><img src="//static.slidehtml5.com/web/images/footer/twitter.png" /></a> <a href="/#"><img src="//static.slidehtml5.com/web/images/footer/youtube.png" /></a> <a href="/#"><img src="//static.slidehtml5.com/web/images/footer/instagram.png" /></a> </p> --> <p>Free online presentation maker for an exceptional way of presenting. Make interactive online presentations that impress, inspire, and connect.</p> <p>© 2021 SlideHTML5. All rights reserved</p> </div> </div> <div class="footer-servered"> <p>© 2021 SlideHTML5.</p> <p>All rights reserved</p> </div> </div> <!-- Google Tag Manager (noscript) --> <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-K3W39L6" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <!-- End Google Tag Manager (noscript) --> </body> </html><script type="text/javascript"> var explore_liked = 0; var explore_subed = ""; var explore_url = "https://online.slidehtml5.com/hyrz/riyu/"; var explore_bookId = "33271"; var explore_userId = "3860"; var explore_uLink = "hyrz"; var explore_bLink = "riyu"; var explore_number = "29396035"; var explore_title = "03 - html tags"; var self_userId = "0"; function copyToClipboard(b) { var d = $("#" + b); d.select(); try { var a = document; if (d.createTextRange) { a = d.createTextRange; } a.execCommand("Copy"); alert("\u590d\u5236\u6210\u529f\u3002\u73b0\u5728\u60a8\u53ef\u4ee5\u7c98\u8d34\uff08Ctrl+v\uff09\u5230Blog \u6216BBS\u4e2d\u4e86\u3002"); return } catch (e) {} alert("\u60a8\u4f7f\u7528\u7684\u6d4f\u89c8\u5668\u4e0d\u652f\u6301\u6b64\u590d\u5236\u529f\u80fd\uff0c\u8bf7\u4f7f\u7528Ctrl+C\u6216\u9f20\u6807\u53f3\u952e\u3002"); } </script>