Invata bazele HTML. Un tutorial simplu. Este dedicat incepatorilor in limbajul HTML.

Vei invata ca a face o pagină de web este într-adevăr foarte simplu.
Totul se rezuma la un fisier text cu extensia html.

HTML = Hyper Text Mark-up language

Limbajul HTML utilizează “etichete” (tags), astfel încât browserele sa stie cum sa afiseze link-uri, text şi imagini.

Elementele  HTML sunt notate astfel:

<numele elementului> De exemplu: <body>, <header>
Cele mai multe elemente sunt, de obicei, asociate cu elemente de sfarsit.

Exemplu: si ; si ; si

Pentru a intelege mai usor, o sa dau exemplu cea mai simpla pagina HTML:




Titlul meu


Pagina mea web in HTML.


Codul de mai sus va afisa in o pagina web cu titlul “Titlul meu” si va contine:

Pagina mea web in HTML

Unele elemente permit utilizarea de atribute care pot avea anumite valori:

...

Tag-ul <html> spune browser-ului că dosarul conţine coduri HTML şi trebuie să fie primul lucru care apare în document, în timp ce tag-ul final </html> trebuie să fie ultimul lucru

Elementul <head> conţine informaţii generale, numite meta-informaţii, despre un document. Meta înseamnă “informaţii despre”.

Conform standardului HTML, numai câteva tag-uri sunt legale în interiorul elementului <head> . Acestea sunt:

, , , , </p> <style>, şi <script></code></p> <h4><strong>Tag-ul <body> conţine informaţii pe care dorim sa le afisam pe pagina de web.</strong></h4> <p>Copiaza codul de mai sus intr-un fisier text si salveaza-l sub denumirea index.html apoi deschide fisierul cu un browser gen Internet Explorer, Mozilla Firefox sau Google Chrome.</p> <p>Pentru a vedea codul HTML corespunzator paginii afisate in browser, selectati View, Document Source.</p> <hr> <h3>Cateva din elementele unei pagini web explicate pe scurt</h3> <h4>Heading</h4> <p>Acestea sunt notate de la incepand de la <strong>< h1 ></strong> pana la <strong>< h6 ></strong> si pot reprezenta rubricile paginii.</p> <p><strong>Exemplu de cod:</strong><br /> <code></p> <h1>Rubrica cu marime text foarte mare</h1> <h2>Rubrica cu marime text mare</h2> <h3>Rubrica cu marime text medie</h3> <p></code></p> <p><strong>Vizualizare HTML:</strong></p> <blockquote> <h1>Rubrica cu marime text foarte mare</h1> <h2>Rubrica cu marime text mare</h2> <h3>Rubrica cu marime text medie</h3> </blockquote> <hr> <h4>Linkuri</h4> <p>Acestea sunt definite de tagul <strong>< a ></strong></p> <p><strong>Exemplu de cod:</strong><br /> <code><br /> <a href="http://eajutor.ro">Legatura catre siteul Eajutor.ro</a><br /> </code></p> <p><strong>Vizualizare HTML:</strong></p> <blockquote><p><a href="http://eajutor.ro">Legatura catre siteul Eajutor.ro</a></p></blockquote> <hr> <h4>Imagini</h4> <p>Imaginile sunt definite de elementul <strong>< img ></strong></p> <p><strong>Exemplu de cod:</strong><br /> <code><br /> <img src="eajutor_logo.jpg" width="100" height="50" /><br /> </code></p> <p>Acest element va afisa in pagina web imaginea corespunzatoare fisierului <strong>eajutor_logo.jpg</strong> aflat pe server.</p> <hr /> <h4>Paragrafe</h4> <p>Paragrafele sunt definite de elementul <strong>< p ></strong></p> <p><strong>Exemplu de cod:</strong><br /> <code></p> <p>Acesta este un paragraf.</p> <p>Alt paragraf.</p> <p></code></p> <p><strong>Vizualizare HTML:</strong></p> <blockquote> <p>Acesta este un paragraf.</p> <p>Alt paragraf.</p> </blockquote> <p>[ad name="v1"]</p> </div><!--end article-content--> </article><!--end article--> <section class="main-color container-wrap social-share-wrap"> <div class="container"> <div class="share-links"> <div class="hr-title hr-long"><abbr>Share this</abbr></div> <span class="kleo-love"> <a href="#" class="item-likes" id="item-likes-671" title="Like this"><span class="item-likes-count">2</span> <span class="item-likes-postfix">likes</span></a> </span> <span class="kleo-facebook"> <a href="http://www.facebook.com/sharer.php?u=https://tutoriale.eajutor.ro/html/tutorial-html-incepatori/invata-bazele-html.html" class="post_share_facebook" onclick="javascript:window.open(this.href,'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=220,width=600');return false;"> <i class="icon-facebook"></i> </a> </span> <span class="kleo-twitter"> <a href="https://twitter.com/share?url=https://tutoriale.eajutor.ro/html/tutorial-html-incepatori/invata-bazele-html.html" class="post_share_twitter" onclick="javascript:window.open(this.href,'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=260,width=600');return false;"> <i class="icon-twitter"></i> </a> </span> <span class="kleo-googleplus"> <a href="https://plus.google.com/share?url=https://tutoriale.eajutor.ro/html/tutorial-html-incepatori/invata-bazele-html.html" onclick="javascript:window.open(this.href,'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"> <i class="icon-gplus"></i> </a> </span> <span class="kleo-pinterest"> <a href="http://pinterest.com/pin/create/button/?url=https://tutoriale.eajutor.ro/html/tutorial-html-incepatori/invata-bazele-html.html&media=&description=Invata bazele HTML" onclick="javascript:window.open(this.href,'', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"> <i class="icon-pinterest-circled"></i> </a> </span> <span class="kleo-mail"> <a href="mailto:?subject=Invata bazele HTML&body=https://tutoriale.eajutor.ro/html/tutorial-html-incepatori/invata-bazele-html.html" class="post_share_email"> <i class="icon-mail"></i> </a> </span> </div> </div> </section> <nav class="pagination-sticky member-navigation" role="navigation"> <a href="https://tutoriale.eajutor.ro/unix-linux/tutorial-securizare-server-linux.html" rel="prev"><span id="older-nav"><span class="outter-title"><span class="entry-title">Tutorial securizare server linux</span></span></span></a><a href="https://tutoriale.eajutor.ro/windows/booteaza-windows-prompt-grub.html" rel="next"><span id="newer-nav"><span class="outter-title"><span class="entry-title">Booteaza Windows din prompt Grub</span></a> </nav><!-- .navigation --> <!-- Begin Comments --> <section class="container-wrap"> <div class="container"> <div id="comments" class="comments-area"> <div class="hr-title hr-long"><abbr>0 Comments</abbr></div> <div id="respond-wrap"> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">Leave a reply <small><a rel="nofollow" id="cancel-comment-reply-link" href="/html/tutorial-html-incepatori/invata-bazele-html.html#respond" style="display:none;">Click here to cancel the reply</a></small></h3> <form action="https://tutoriale.eajutor.ro/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate> <p class="comment-notes"><span id="email-notes">Your email address will not be published.</span> Required fields are marked <span class="required">*</span></p><p class="comment-form-comment"><label for="comment">Comment</label><textarea class="form-control" id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea></p><div class="row"><p class="comment-form-author col-sm-4"><label for="author">Name</label> <span class="required">*</span><input id="author" name="author" type="text" class="form-control" value="" size="30" aria-required='true' /></p> <p class="comment-form-email col-sm-4"><label for="email">Email</label> <span class="required">*</span><input id="email" name="email" type="text" class="form-control" value="" size="30" aria-required='true' /></p> <p class="comment-form-url col-sm-4"><label for="url">Website</label><input id="url" name="url" type="text" class="form-control" value="" size="30" /></p></div> <p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes" /><label for="wp-comment-cookies-consent">Save my name, email, and website in this browser for the next time I comment.</label></p> <p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Post comment" /> <input type='hidden' name='comment_post_ID' value='671' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /> </p><p style="display: none;"><input type="hidden" id="akismet_comment_nonce" name="akismet_comment_nonce" value="ad7aaecbf8" /></p><p style="display: none;"><input type="hidden" id="ak_js" name="ak_js" value="247"/></p> </form> </div><!-- #respond --> <p class="akismet_comment_form_privacy_notice">This site uses Akismet to reduce spam. <a href="https://akismet.com/privacy/" target="_blank" rel="nofollow noopener">Learn how your comment data is processed</a>.</p> </div> </div><!-- #comments --> </div> </section> <!-- End Comments --> </div><!--end wrap-content--> </div><!--end main-page-template--> <div class="sidebar sidebar-main col-sm-3 sidebar-right"> <div class="inner-content widgets-container"> <div id="text-5" class="widget widget_text"> <div class="textwidget"><div style="margin-top:10px;"><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- 300x250, creat 07.04.2011 --> <ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-3355904246781982" data-ad-slot="0038811222"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div></div> </div><div id="categories-5" class="widget widget_categories"><h4 class="widget-title">Categorii tutoriale</h4> <ul> <li class="cat-item cat-item-7"><a href="https://tutoriale.eajutor.ro/tutoriale/apache" >Apache</a> </li> <li class="cat-item cat-item-100"><a href="https://tutoriale.eajutor.ro/tutoriale/blackberry" >Blackberry</a> </li> <li class="cat-item cat-item-42"><a href="https://tutoriale.eajutor.ro/tutoriale/domenii-web" >Domenii Web</a> </li> <li class="cat-item cat-item-83"><a href="https://tutoriale.eajutor.ro/tutoriale/exchange" title="Tutoriale Exchange Server. Configurare si ponturi">Exchange</a> </li> <li class="cat-item cat-item-1"><a href="https://tutoriale.eajutor.ro/tutoriale/general" title="Tutoriale care nu se incadreaza in nici o categorie de pe site.">General</a> </li> <li class="cat-item cat-item-3"><a href="https://tutoriale.eajutor.ro/tutoriale/html" title="Tutoriale HTML pentru incepatori si avansati">HTML</a> <ul class='children'> <li class="cat-item cat-item-41"><a href="https://tutoriale.eajutor.ro/tutoriale/html/referinta-html-xhtml" >Referinta Html</a> </li> <li class="cat-item cat-item-92"><a href="https://tutoriale.eajutor.ro/tutoriale/html/tutorial-html-incepatori" >Tutorial HTML incepatori</a> </li> </ul> </li> <li class="cat-item cat-item-5"><a href="https://tutoriale.eajutor.ro/tutoriale/javascript" >Javascript</a> </li> <li class="cat-item cat-item-94"><a href="https://tutoriale.eajutor.ro/tutoriale/office" >Office</a> </li> <li class="cat-item cat-item-49"><a href="https://tutoriale.eajutor.ro/tutoriale/photoshop" >PHOTOSHOP</a> </li> <li class="cat-item cat-item-4"><a href="https://tutoriale.eajutor.ro/tutoriale/php" >PHP</a> </li> <li class="cat-item cat-item-99"><a href="https://tutoriale.eajutor.ro/tutoriale/retelistica" >Retelistica</a> </li> <li class="cat-item cat-item-39"><a href="https://tutoriale.eajutor.ro/tutoriale/seo" >SEO</a> </li> <li class="cat-item cat-item-95"><a href="https://tutoriale.eajutor.ro/tutoriale/sql" >SQL</a> </li> <li class="cat-item cat-item-6"><a href="https://tutoriale.eajutor.ro/tutoriale/unix-linux" >UNIX/LINUX</a> </li> <li class="cat-item cat-item-23"><a href="https://tutoriale.eajutor.ro/tutoriale/windows" title="Tutoriale Windows.">Windows</a> <ul class='children'> <li class="cat-item cat-item-109"><a href="https://tutoriale.eajutor.ro/tutoriale/windows/powershell" >PowerShell</a> </li> </ul> </li> </ul> </div><div id="calendar-2" class="widget widget_calendar"><h4 class="widget-title">Calendar</h4><div id="calendar_wrap" class="calendar_wrap"><table id="wp-calendar"> <caption>May 2019</caption> <thead> <tr> <th scope="col" title="Monday">M</th> <th scope="col" title="Tuesday">T</th> <th scope="col" title="Wednesday">W</th> <th scope="col" title="Thursday">T</th> <th scope="col" title="Friday">F</th> <th scope="col" title="Saturday">S</th> <th scope="col" title="Sunday">S</th> </tr> </thead> <tfoot> <tr> <td colspan="3" id="prev"><a href="https://tutoriale.eajutor.ro/2013/04">« Apr</a></td> <td class="pad"> </td> <td colspan="3" id="next" class="pad"> </td> </tr> </tfoot> <tbody> <tr> <td colspan="2" class="pad"> </td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td> </tr> <tr> <td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td> </tr> <tr> <td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td> </tr> <tr> <td>20</td><td id="today">21</td><td>22</td><td>23</td><td>24</td><td>25</td><td>26</td> </tr> <tr> <td>27</td><td>28</td><td>29</td><td>30</td><td>31</td> <td class="pad" colspan="2"> </td> </tr> </tbody> </table></div></div> </div><!--end inner-content--> </div><!--end sidebar--> </div><!--end .row--> </div><!--end .container--> </section> <!--END MAIN SECTION--> </div><!-- #main --> <a class="kleo-go-top" href="#"><i class="icon-up-open-big"></i></a> <!-- SOCKET SECTION ================================================ --> <div id="socket" class="socket-color"> <div class="container"> <div class="template-page tpl-no col-xs-12 col-sm-12"> <div class="wrap-content"> <div class="row"> <div class="col-sm-12"> <div class="gap-10"></div> </div><!--end widget--> <div class="col-sm-12"> <p style="text-align: center;"><strong>©2019 KLEO Template</strong> a premium and multipurpose theme from <a href="http://www.seventhqueen.com" target="_blank">Seven<sup>th</sup> Queen</a></p> </div> <div class="col-sm-12"> <div class="gap-10"></div> </div><!--end widget--> </div><!--end row--> </div><!--end wrap-content--> </div><!--end template-page--> </div><!--end container--> </div><!--end footer--> </div><!-- #page --> <!-- Analytics --> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-8787429-2', 'auto'); ga('send', 'pageview'); </script> <!-- Modal Login form --> <div id="kleo-login-modal" class="kleo-form-modal main-color mfp-hide"> <div class="row"> <div class="col-sm-12 text-center"> <div class="kleo-pop-title-wrap main-color"> <h3 class="kleo-pop-title">Log in with your credentials</h3> </div> <form action="https://tutoriale.eajutor.ro/wp-login.php" name="login_form" method="post" class="kleo-form-signin sq-login-form"> <input type="hidden" id="sq-login-security" name="sq-login-security" value="53b7fe52c0" /><input type="hidden" name="_wp_http_referer" value="/html/tutorial-html-incepatori/invata-bazele-html.html" /> <input type="text" required name="log" class="form-control sq-username" value="" placeholder="Username"> <input type="password" required spellcheck="false" autocomplete="off" value="" name="pwd" class="sq-password form-control" placeholder="Password"> <div id="kleo-login-result"></div> <button class="btn btn-lg btn-default btn-block" type="submit">Sign in</button> <label class="checkbox pull-left"> <input class="sq-rememberme" name="rememberme" type="checkbox" value="forever"> Remember me </label> <a href="#kleo-lostpass-modal" class="kleo-show-lostpass kleo-other-action pull-right">Lost your password?</a> <span class="clearfix"></span> </form> </div> </div> </div><!-- END Modal Login form --> <!-- Modal Lost Password form --> <div id="kleo-lostpass-modal" class="kleo-form-modal main-color mfp-hide"> <div class="row"> <div class="col-sm-12 text-center"> <div class="kleo-pop-title-wrap alternate-color"> <h3 class="kleo-pop-title">Forgot your details?</h3> </div> <form name="forgot_form" action="" method="post" class="sq-forgot-form kleo-form-signin"> <input type="hidden" id="security-pass" name="security-pass" value="53b7fe52c0" /><input type="hidden" name="_wp_http_referer" value="/html/tutorial-html-incepatori/invata-bazele-html.html" /> <input type="text" required name="user_login" class="sq-forgot-email form-control" placeholder="Username or Email"> <div id="kleo-lost-result"></div> <button class="btn btn-lg btn-default btn-block" type="submit">Reset Password</button> <a href="#kleo-login-modal" class="kleo-show-login kleo-other-action pull-right">I remember my details</a> <span class="clearfix"></span> </form> </div> </div> </div><!-- END Modal Lost Password form --> <script type='text/javascript'> /* <![CDATA[ */ var wpcf7 = {"apiSettings":{"root":"https:\/\/tutoriale.eajutor.ro\/wp-json\/contact-form-7\/v1","namespace":"contact-form-7\/v1"}}; /* ]]> */ </script> <script type='text/javascript' src='https://tutoriale.eajutor.ro/wp-content/plugins/contact-form-7/includes/js/scripts.js'></script> <script type='text/javascript' src='https://tutoriale.eajutor.ro/wp-content/themes/kleo/assets/js/bootstrap.min.js'></script> <script type='text/javascript' src='https://tutoriale.eajutor.ro/wp-content/plugins/js_composer/assets/lib/waypoints/waypoints.min.js'></script> <script type='text/javascript' src='https://tutoriale.eajutor.ro/wp-content/themes/kleo/assets/js/plugins/magnific-popup/magnific.min.js'></script> <script type='text/javascript' src='https://tutoriale.eajutor.ro/wp-content/themes/kleo/assets/js/plugins/carouFredSel/jquery.carouFredSel-6.2.0-packed.js'></script> <script type='text/javascript' src='https://tutoriale.eajutor.ro/wp-content/themes/kleo/assets/js/plugins/carouFredSel/helper-plugins/jquery.touchSwipe.min.js'></script> <script type='text/javascript' src='https://tutoriale.eajutor.ro/wp-content/plugins/js_composer/assets/lib/bower/isotope/dist/isotope.pkgd.min.js'></script> <script type='text/javascript'> /* <![CDATA[ */ var kleoFramework = {"ajaxurl":"https:\/\/tutoriale.eajutor.ro\/wp-admin\/admin-ajax.php","themeUrl":"https:\/\/tutoriale.eajutor.ro\/wp-content\/themes\/kleo","loginUrl":"https:\/\/tutoriale.eajutor.ro\/wp-login.php","goTop":"1","ajaxSearch":"1","alreadyLiked":"You already like this","logo":"","retinaLogo":"","headerHeight":"88","headerHeightScrolled":"0","headerTwoRowHeight":"88","headerTwoRowHeightScrolled":"0","headerResizeOffset":"","loadingmessage":"<i class=\"icon icon-spin5 animate-spin\"><\/i> Sending info, please wait...","DisableMagnificGallery":"0","flexMenuEnabled":"0","errorOcurred":"Sorry, an error occurred","portfolioVideoHeight":"160"}; /* ]]> */ </script> <script type='text/javascript' src='https://tutoriale.eajutor.ro/wp-content/themes/kleo/assets/js/app.min.js'></script> <script type='text/javascript' src='https://tutoriale.eajutor.ro/wp-includes/js/wp-embed.min.js'></script> <script async="async" type='text/javascript' src='https://tutoriale.eajutor.ro/wp-content/plugins/akismet/_inc/form.js'></script> </body> </html>