Introduccion al HTML

Que es un archivo HTML?

HTML es un acrónimo el cual significa Hyper Text Markup Language

Un archivo HTML es un archivo de texto el cual contiene pequeños tags llamados markup

  • Los markup tags le indican al navegador como desplegar la pagina
  • Un archivo HTML debe de tener una extension htm o html
  • Un archivo HTML puede ser creado utilizando un simple editor de texto

Quieres intentarlo?

Si estan utilizando Windows, inicien Notepad.

Si utilizan una Mac, arranquen SimpleText.

En OSX con TextEdit cambiamos las siguientes preferencias: Abrimos el muenu de Format y seleccionamos Plain text en lugar de Rich text. Luego abrimos la ventana de Preferences bajo el menu de Text Edit y seleccionamos Ignore rich text commands in HTML files. Tu codigo HTML probablemente no funcionara si no se hacen los cambios anteriores.

Escriban el siguiente texto:



Titulo de la pagina


Esta es una pagina HTML. Este texto esta en negrilla

Guardar el archivo como pagina.htm.

Iniciamos nuestro navegador de internet. Seleccionamos Open (u Open Page) en el menu de Archivo del navegador. Una caja de dialogo sera desplegada, seleccionen Browse (o Seleccionar Archivo) y seleccionamos el archivo pagina.htm que acabamos de crear y hacemos clic en Open. Ahora nos aparece una direccion local en la caja de dialogo, por ejemplo C:MyDocumentspagina.htm. Le damos clic en OK, y el navegador desplegara la pagina.

En el ejemplo anterior

La primera etiqueta en el documento HTML es . Esta etiqueta le indica al navegador el inicio de un documento HTML. La ultima etiqueta del documento es , la cual indica el fin del documento HTML.

El texto contenido dentro de las etiquetas y es la informacion del encabezado. La informacion del encabezado no se despliega en la ventana del navegador.

El texto dentro de la etiqueta es el titulo de la pagina. El titulo es desplegado en la parte superior del navegador.</p> <p>El texto contenido entre las etiquetas <body> es el texto que sera desplegado en el navegador.</p> <p>El texto entre <b> y </b> sera desplegado en negrilla.</p> <h3>Extension HTM o HTML?</h3> <p>Cuando creamos un archivo HTML, podemos usar la extension .html o .html. En nuestro ejemplo hemos utilizado la extension .htm, ya que en el pasado el software especifico para diseñar paginas solo permitia extensiones de tres letras.</p> <p>Con el software actual es posible usar .html.</p> <h3>Editores HTML</h3> <p>Es muy facil editar archivos HTML utilizando editores WYSIWYG <em>what you see is what you get</em> como FrontPage, Quagga o Dreamweaver, en lugar de escribir la pagina en un archivo de texto plano.</p> <p>Sin embargo, para poder obtener la destreza y practica de un buen desarrollador Web, les recomiendo usar un editor de texto para aprender HTML</p> <h3>F.A.Q</h3> <p>P: Despues de haber editado un archivo HTML, no puedo ver los resultados en mi navegador, por que?<br /> R: Asegurese de que el archivo haya sido guardado con el nombre y extension correctos, como <em>c:pagina.htm</em>. Tambien verifiquemos usar el mismo nombre cuando lo abramos desde el navegador.</p> <p>P: He editado un archivo HTML, pero los cambios no se reflejan en el navegador, por que?<br /> R: El navegador utiliza una tecnologia llamada cache, el cual guarda copias de las paginas de internet para no tener que leer la misma pagina dos veces. Cuando una pagina se modifica, el navegador lo desconoce. Utilicen el boton de refrescar del navegador o Control + F5 para forzar al navegador a leer la pagina nuevamente.</p> <p>P: Cual navegador debo de utilizar?<br /> R: En esta serie de HTML cualquier navegador funciona, como Internet Explorer, Firefox, Netscape u Opera. Sin embargo, algunos de los ejemplos y tecnicas que mostraremos en el futuro necesitan la ultima version de los navegadores.</p> <p>P: Necesito tener Windows instalado? O puedo utilizar otro sistema operativo?<br /> R: Toda la serie de entrenamiento se puede realizar sobre Linux, MacOS o Windows.<br /> <center></p> <form> <input type="button" value="Siguiente >>" onClick=location="http://www.guatewireless.org/elementos-de-html/"/><br /> </form> <p></center></p> <div class='sharedaddy sd-block sd-like jetpack-likes-widget-wrapper jetpack-likes-widget-unloaded' id='like-post-wrapper-1757035-197-5847c97708b58' data-src='//widgets.wp.com/likes/#blog_id=1757035&post_id=197&origin=www.guatewireless.org&obj_id=1757035-197-5847c97708b58' data-name='like-post-frame-1757035-197-5847c97708b58'><h3 class="sd-title">Like this:</h3><div class='likes-widget-placeholder post-likes-widget-placeholder' style='height: 55px;'><span class='button'><span>Like</span></span> <span class="loading">Loading...</span></div><span class='sd-text-color'></span><a class='sd-link-color'></a></div> <div id='jp-relatedposts' class='jp-relatedposts' > <h3 class="jp-relatedposts-headline"><em>Related</em></h3> </div> </div> </div> <div id="comments"> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">Comentario, Preguntas o agradecimientos? <small><a rel="nofollow" id="cancel-comment-reply-link" href="/tecnologia/desarrollo/html/introduccion-al-html.html#respond" style="display:none;">Cancel reply</a></small></h3> <form id="commentform" class="comment-form"> <iframe src="https://jetpack.wordpress.com/jetpack-comment/?blogid=1757035&postid=197&comment_registration=0&require_name_email=1&stc_enabled=1&stb_enabled=1&show_avatars=1&avatar_default=retro&greeting=Comentario%2C+Preguntas+o+agradecimientos%3F&greeting_reply=Leave+a+Reply+to+%25s&color_scheme=light&lang=en_US&jetpack_version=4.4.2&sig=8f49d2f2a433935c90c0302207c7b01eb9daa601#parent=http%3A%2F%2Fwww.guatewireless.org%2Ftecnologia%2Fdesarrollo%2Fhtml%2Fintroduccion-al-html.html" allowtransparency="false" style="width:100%; height: 430px;border:0;" frameBorder="0" scrolling="no" name="jetpack_remote_comment" id="jetpack_remote_comment"></iframe> </form> </div> <input type="hidden" name="comment_parent" id="comment_parent" value="" /> </div><!-- #comments --> <nav class="singlenav cf"> <div class="older">« <a href="http://www.guatewireless.org/tecnologia/software/wordpress-software-tecnologia/script-para-actualizar-wordpress.html" rel="prev">WordPress Update Script</a></div> <div class="newer"><a href="http://www.guatewireless.org/tecnologia/desarrollo/html/elementos-de-html.html" rel="next">Elementos de HTML</a> »</div> </nav> </div> <div id="widgetarea-one" class="col4"> <aside id="ad-sidebarcuadrado" class="widget �lambda_604 cf"><script type="text/javascript"> <!-- function FixCookieDate (date) { var base = new Date(0); var skew = base.getTime(); // dawn of (Unix) time - should be 0 if (skew > 0) // Except on the Mac - ahead of its time date.setTime (date.getTime() - skew); } var expdate = new Date (); FixCookieDate (expdate); expdate.setTime (expdate.getTime() + (365 * 24 * 60 * 60 * 1000)); // 1 year from now document.cookie = "wp_ozh_wsa_TopLeft" + "=" + escape (1) + "; expires=" + expdate.toGMTString() + "; path=" + "/"; //--> </script> </aside><aside id="search-2" class="widget widget_search cf"><h3><span>Buscar</span></h3><form method="get" class="searchform" action="http://www.guatewireless.org/"> <input type="text" class="field" name="s" value="" /> <input type="submit" class="submit" name="submit" value="search" /> </form> </aside><aside id="dsgnwrks_google_top_posts_widgets-2" class="widget google_top_posts cf"><h3><span>Recomendacion del editor</span></h3></aside> </div> </div> <div id="footer-bg"> <div id="footer" class="lw"> <p>© 2016 Guatewireless.org — All Rights Reserved.</p> <!-- <p>93 queries in 0.822 seconds.</p> --> </div> </div> <!-- Advertising Manager v3.5.3 (0.823 seconds.) --> <div style="display:none"> </div> <script type="text/javascript">quicktags({ id: 'comment-form', buttons: 'strong,em,link,block,code,close' });</script> <script type='text/javascript' src='http://www.guatewireless.org/wp-content/plugins/akismet/_inc/form.js?ver=3.2'></script> <script type='text/javascript' src='http://platform.twitter.com/widgets.js?ver=4.6.1'></script> <script type='text/javascript' src='http://apis.google.com/js/plusone.js?ver=4.6.1'></script> <script type='text/javascript' src='http://www.guatewireless.org/wp-content/plugins/jetpack/modules/photon/photon.js?ver=20130122'></script> <script type='text/javascript' src='http://s0.wp.com/wp-content/js/devicepx-jetpack.js?ver=201649'></script> <script type='text/javascript'> /* <![CDATA[ */ var JQLBSettings = {"fitToScreen":"0","resizeSpeed":"400","displayDownloadLink":"0","navbarOnTop":"0","loopImages":"","resizeCenter":"","marginSize":"","linkTarget":"_self","help":"","prevLinkTitle":"previous image","nextLinkTitle":"next image","prevLinkText":"\u00ab Previous","nextLinkText":"Next \u00bb","closeTitle":"close image gallery","image":"Image ","of":" of ","download":"Download","jqlb_overlay_opacity":"80","jqlb_overlay_color":"#000000","jqlb_overlay_close":"1","jqlb_border_width":"10","jqlb_border_color":"#ffffff","jqlb_border_radius":"0","jqlb_image_info_background_transparency":"100","jqlb_image_info_bg_color":"#ffffff","jqlb_image_info_text_color":"#000000","jqlb_image_info_text_fontsize":"10","jqlb_show_text_for_image":"1","jqlb_next_image_title":"next image","jqlb_previous_image_title":"previous image","jqlb_next_button_image":"http:\/\/www.guatewireless.org\/wp-content\/plugins\/wp-lightbox-2\/styles\/images\/next.gif","jqlb_previous_button_image":"http:\/\/www.guatewireless.org\/wp-content\/plugins\/wp-lightbox-2\/styles\/images\/prev.gif","jqlb_maximum_width":"","jqlb_maximum_height":"","jqlb_show_close_button":"1","jqlb_close_image_title":"close image gallery","jqlb_close_image_max_heght":"22","jqlb_image_for_close_lightbox":"http:\/\/www.guatewireless.org\/wp-content\/plugins\/wp-lightbox-2\/styles\/images\/closelabel.gif","jqlb_keyboard_navigation":"1","jqlb_popup_size_fix":"0"}; /* ]]> */ </script> <script type='text/javascript' src='http://www.guatewireless.org/wp-content/plugins/wp-lightbox-2/wp-lightbox-2.min.js?ver=1.3.4.1'></script> <script type='text/javascript' src='http://s.gravatar.com/js/gprofiles.js?ver=2016Decaa'></script> <script type='text/javascript'> /* <![CDATA[ */ var WPGroHo = {"my_hash":""}; /* ]]> */ </script> <script type='text/javascript' src='http://www.guatewireless.org/wp-content/plugins/jetpack/modules/wpgroho.js?ver=4.6.1'></script> <script type='text/javascript' src='http://www.guatewireless.org/wp-includes/js/comment-reply.min.js?ver=4.6.1'></script> <script type='text/javascript' src='http://www.guatewireless.org/wp-includes/js/wp-embed.min.js?ver=4.6.1'></script> <script type='text/javascript' src='http://www.guatewireless.org/wp-content/plugins/jetpack/_inc/postmessage.js?ver=4.4.2'></script> <script type='text/javascript' src='http://www.guatewireless.org/wp-content/plugins/jetpack/_inc/jquery.jetpack-resize.js?ver=4.4.2'></script> <script type='text/javascript' src='http://www.guatewireless.org/wp-content/plugins/jetpack/_inc/jquery.inview.js?ver=4.4.2'></script> <script type='text/javascript' src='http://www.guatewireless.org/wp-content/plugins/jetpack/modules/likes/queuehandler.js?ver=4.4.2'></script> <iframe src='http://widgets.wp.com/likes/master.html?ver=20160429#ver=20160429' scrolling='no' id='likes-master' name='likes-master' style='display:none;'></iframe> <div id='likes-other-gravatars'><div class="likes-text"><span>%d</span> bloggers like this:</div><ul class="wpl-avatars sd-like-gravatars"></ul></div> <!--[if IE]> <script type="text/javascript"> if ( 0 === window.location.hash.indexOf( '#comment-' ) ) { // window.location.reload() doesn't respect the Hash in IE window.location.hash = window.location.hash; } </script> <![endif]--> <script type="text/javascript"> var comm_par_el = document.getElementById( 'comment_parent' ), comm_par = (comm_par_el && comm_par_el.value) ? comm_par_el.value : '', frame = document.getElementById( 'jetpack_remote_comment' ), tellFrameNewParent; tellFrameNewParent = function() { if ( comm_par ) { frame.src = "https://jetpack.wordpress.com/jetpack-comment/?blogid=1757035&postid=197&comment_registration=0&require_name_email=1&stc_enabled=1&stb_enabled=1&show_avatars=1&avatar_default=retro&greeting=Comentario%2C+Preguntas+o+agradecimientos%3F&greeting_reply=Leave+a+Reply+to+%25s&color_scheme=light&lang=en_US&jetpack_version=4.4.2&sig=8f49d2f2a433935c90c0302207c7b01eb9daa601#parent=http%3A%2F%2Fwww.guatewireless.org%2Ftecnologia%2Fdesarrollo%2Fhtml%2Fintroduccion-al-html.html" + '&replytocom=' + parseInt( comm_par, 10 ).toString(); } else { frame.src = "https://jetpack.wordpress.com/jetpack-comment/?blogid=1757035&postid=197&comment_registration=0&require_name_email=1&stc_enabled=1&stb_enabled=1&show_avatars=1&avatar_default=retro&greeting=Comentario%2C+Preguntas+o+agradecimientos%3F&greeting_reply=Leave+a+Reply+to+%25s&color_scheme=light&lang=en_US&jetpack_version=4.4.2&sig=8f49d2f2a433935c90c0302207c7b01eb9daa601#parent=http%3A%2F%2Fwww.guatewireless.org%2Ftecnologia%2Fdesarrollo%2Fhtml%2Fintroduccion-al-html.html"; } }; if ( 'undefined' !== typeof addComment ) { addComment._Jetpack_moveForm = addComment.moveForm; addComment.moveForm = function( commId, parentId, respondId, postId ) { var returnValue = addComment._Jetpack_moveForm( commId, parentId, respondId, postId ), cancelClick, cancel; if ( false === returnValue ) { cancel = document.getElementById( 'cancel-comment-reply-link' ); cancelClick = cancel.onclick; cancel.onclick = function() { var cancelReturn = cancelClick.call( this ); if ( false !== cancelReturn ) { return cancelReturn; } if ( !comm_par ) { return cancelReturn; } comm_par = 0; tellFrameNewParent(); return cancelReturn; }; } if ( comm_par == parentId ) { return returnValue; } comm_par = parentId; tellFrameNewParent(); return returnValue; }; } if ( window.postMessage ) { if ( document.addEventListener ) { window.addEventListener( 'message', function( event ) { if ( "https:\/\/jetpack.wordpress.com" !== event.origin ) { return; } jQuery( frame ).height( event.data ); } ); } else if ( document.attachEvent ) { window.attachEvent( 'message', function( event ) { if ( "https:\/\/jetpack.wordpress.com" !== event.origin ) { return; } jQuery( frame ).height( event.data ); } ); } } </script> <script type='text/javascript' src='http://stats.wp.com/e-201649.js' async defer></script> <script type='text/javascript'> _stq = window._stq || []; _stq.push([ 'view', {v:'ext',j:'1:4.4.2',blog:'1757035',post:'197',tz:'-6',srv:'www.guatewireless.org'} ]); _stq.push([ 'clickTrackerInit', '1757035', '197' ]); </script> </body> </html>