La Mejor Manera de Aprender HTML

() translation by (you can also view the original English article)

Aprender una nueva habilidad a menudo es intimidante al principio, saber por dónde empezar, a quién escuchar, qué ignorar - puede ser un proceso difícil de arrancar. Para eso es esta publicación. ¡Le ayudará a planear qué aprender y en qué orden, con la esperanza de hacer lo que parece ser un gran obstáculo mucho menor, manteniéndolo a usted interesado y animándolo a seguir aprendiendo!

Antes que Todo lo Demás: De el salto

Esta es la parte más crucial de cualquier proceso de aprendizaje - una vez que haya tomado la decisión de ampliar sus horizontes mediante el aprendizaje de una nueva habilidad, ¡usted ya está sobre el primer obstáculo! Tal vez usted es un diseñador y mirando más allá de la pluma, el papel y Photoshop, tal vez usted no ha tenido anteriormente nada que ver con la web, no importa. Ahora usted quiere construir páginas web y con la ayuda de los recursos que se enumeran a continuación, usted resolverá HTML en poco tiempo.

Para empezar hablaremos muy literalmente acerca de los conceptos básicos de HTML, después de lo cual examinaremos los recursos y las asignaciones para mantener la pelota rodando.

Entendiendo los Fundamentos: Su Primer Archivo HTML

Es importante que usted sepa lo que es HTML, así que aquí hay una definición rápida del World Wide Web Consortium (W3C), quienes trabajan incansablemente hacia una web estandarizada:

HTML es el lenguaje de publicación de la World Wide Web.

Fin. ¿Eso fue fácil, verdad? Con HTML (HyperText Markup Language - Lenguaje de Marcado de Hipertexto) puede crear documentos listos para su publicación en la web. El marcado HTML (como se le conoce) bien escrito describe la estructura del contenido de un documento. Usted puede especificar qué partes del documento son encabezados, qué partes son párrafos, establecer relaciones simples entre piezas de contenido e incluso establecer ciertos comportamientos básicos.

Dicho esto, comencemos con su primer archivo HTML. Necesitará un editor de texto plano (como el TextEdit por defecto en OS X o el Notepad de Windows). Ahora:

Inicie un nuevo archivo.
Escriba algún texto (como el clásico "Hola mundo").
Guarde el archivo, por ejemplo en su escritorio, como "index.html" (la extensión .html es bastante importante aquí, pero usted ya se habrá dado cuenta de ello).

Ahora necesita su segunda aplicación, un navegador web. Hay varios jugadores principales en el mercado de los navegadores, pero si usted usa Internet Explorer, Google Chrome, Firefox, Safari u Opera (y hay otros), su archivo index.html casi seguramente se abrirá en su navegador de elección por defecto.

Lo importante es que un navegador, cuando se da cuenta de que está tratando con un archivo .html, sabe procesar el contenido como HTML. Técnicamente, no hemos proporcionado el código HTML correcto aquí, pero los navegadores le ahorrarán muchos descuidos - la mera presencia de la extensión de archivo .html le dice a nuestro navegador lo suficiente. Sólo hemos escrito una línea simple de texto, pero mire cómo el navegador realmente la interpreta:

No se preocupe por esta ventana de depuración por ahora, sólo se utiliza para ilustrar nuestro punto.

¡Así que eso se encargó de su primer paso en HTML! Ahora entiende lo que es, lo que se necesita para empezar a escribirlo y está empezando a captar lo que hacen los navegadores con él.

Entendiendo los Fundamentos: Etiquetas HTML

Antes de sumergirnos dentro de cualquier recurso es necesario obtener algunos principios más para el futuro. ¿Recuerda usted las piezas adicionales de código que nuestro navegador parecía agregar? Esas eran etiquetas HTML, los bloques de construcción del marcado HTML. Una etiqueta describe un elemento y resalta ese hecho usando corchetes angulares. Esta es la etiqueta de apertura del elemento html que vimos anteriormente:

Aparte de lo que se conoce como una declaración de doctype, usamos la etiqueta html para iniciar nuestro documento, luego terminamos nuestro documento con una etiqueta de cierre correspondiente:

¿Ve la barra diagonal en la segunda etiqueta? Eso es lo que denota una etiqueta de cierre. Todo lo que colocamos entre las etiquetas html de apertura y cierre es nuestro documento HTML. Y ese es el primer principio de los pares de etiquetas HTML; ellas envuelven contenido de algún tipo. Estas dos envuelven el contenido de un párrafo:

OK, vamos a mirar hacia atrás en nuestro archivo original index.html una vez más, y luego le prometo que en realidad hablaremos de recursos de aprendizaje. ¿Ve cómo las etiquetas html se envuelven alrededor de otras etiquetas? Eso se conoce como anidamiento. Las etiquetas pueden envolver otras etiquetas. Luego esas etiquetas pueden incluso envolver más etiquetas, y este anidamiento puede continuar indefinidamente. Como muñecas Matryoshka exponenciales..

De esta manera podemos construir secciones de una página web; un encabezado que contiene títulos y reglas horizontales. Párrafos que contienen anclas y spans. Pies de página que contienen listas que contienen a su vez vínculos. Esta es la base de la construcción de la estructura HTML.

Eche un vistazo a esta ilustración. En la parte superior está el marcado HTML, debajo hay una representación visual de cómo los elementos están anidados unos dentro de otros.

Tarea 1: Siga un Curso Para Principiantes

Después de haber entendido los conceptos básicos absolutos, es hora de seguir adelante y obtener una comprensión firme de los fundamentos de HTML. Hay un par de cursos que le recomiendo mirar, ambos son absolutamente gratis y vale la pena seguirlos de principio a fin.

Codeacademy Fundamentos de la Web es un curso atractivo, interactivo, que abarca el nivel básico HTML antes de pasar a otras cosas (como CSS).Usted encontrará todos los cursos en Codeacademy muy convincentes ya que usted construye en la pantalla, mientras aprende la teoría sólida. Ganar puntos e insignias agrega un elemento de desafío y competitividad, además ¡los correos electrónicos de recordatorio le dan un impulso adicional si pierde el foco en cualquier momento!

Siga todos los aspectos de sus logros a medida que aprende

Tuts+ Premium 30 Días para Aprender HTML y CSS es una serie de videotutoriales presentados por Jeffrey Way. Vaya a su ritmo dejando de lado diez o quince minutos cada día durante un mes, viendo un tutorial corto a la vez. Como el curso en sí afirma "todo el mundo tiene el derecho de aprender a construir cosas maravillosas en la web".

Jeffrey le lleva a través de todos y cada uno de los aspectos básicos de HTML

Tarea 2: Elija un Editor de Código

Suficiente teoría por el momento, vamos a tomar un descanso y revisar algunas herramientas para hacer nuestra codificación HTML más fácil. Hasta ahora sólo he sugerido simples editores de texto plano para crear sus archivos HTML. Estos están perfectamente bien, pero hay editores de código disponibles que usted encontrará mucho más intuitivos para usar.

Las principales ventajas de usar un editor de código construido específicamente son:

Resaltado de sintaxis: Tener sus etiquetas HTML en un color, su contenido en otro, los comentarios y los otros varios aspectos del marcado HTML en otro, hace que el documento sea mucho más claro. La mayoría de los editores de código proporcionan una serie de diferentes esquemas de color para elegir; algunos oscuros sobre claro, algunos claro sobre osuro, algunos sutiles, algunos ... menos. A menudo, los miembros de la comunidad presentarán sus propios esquemas de color también. Vaya con lo que funcione para usted.
Autocompletado de código y sugerencias: ¿Cuál es la etiqueta correcta para usar en una fila de encabezado de tabla? Siempre me olvido. Afortunadamente, muchos editores de código sugerirán las etiquetas y la sintaxis para usted una vez que comience a escribir. Algunos también proporcionan una extensa documentación de idiomas, por lo que puede ir a buscar lo que sea por lo que está confundido.
Gestión de proyectos: Tener todos los archivos a mano es siempre útil cuando se construye un proyecto web. La mayoría de los editores de código le mostrará la estructura de sus archivos de proyecto, lo que le permite profundizar en las carpetas, comprobar los elementos y administrar los archivos rápidamente.
Números de línea: Una sutil ventaja frente a un editor de texto básico, pero ver qué línea de código está en qué número de línea que ayudará enormemente, especialmente cuando se buscan errores.

Hay muchas más ventajas, pero ésas se harán evidentes una vez que usted consiga implicarse más en escribir código. Entonces, ¿cuáles son sus opciones? Éstas son sólo algunas:

Sublime Text 2 $ 59. Posiblemente la opción más popular entre los desarrolladores en estos días, Sublime Text 2 tiene la enorme ventaja de tener una extensa comunidad detrás de él. Revise el curso gratuito de Tuts+ Premium Flujo de Trabajo Perfecto en Sublime Text 2 para obtener más información.
Coda 2 $75. Mle temo que solo para OS X sólo, pero sigue siendo un editor de código muy popular. Cubrimos Mejorando su Productividad: Consejos Rápidos para Coda hace un tiempo en Webdesingtuts+
Brackets Código Abierto. Esta es una de las últimas iniciativas de Adobe para soportar estándares HTML, CSS y JavaScript; un editor de código construido con esas mismas tecnologías. Son los primeros días para este editor de código, pero se ve muy prometedor y utiliza enfoques interesantes a algunos aspectos de la interfaz.
TextMate $53. OS X de nuevo, lo siento, pero durante mucho tiempo el editor favorito por los adictos de código.

Para obtener más información sobre los muchos editores de código disponibles, consulte la Guía del Diseñador Web Para Aplicaciones de Codificación y 18 IDEs Maravillosas para Windows, Mac y Linux.

Tarea 3: ¡Construya algo!

Ya es hora de que se ensucie las manos y ponga sus nuevas habilidades en la práctica. Desafíese construyendo la estructura de marcado HTML para las siguientes cosas:

Una página HTML en blanco: Eso puede no sonar muy interesante, pero la creación de una página vacía le familiarizará con un documento HTML estándar y sus componentes., <meta> y las etiquetas <link>. Recuerde el !doctype, las etiquetas <html> y <body>. Concéntrese en la etiqueta <head> y todo lo que vive anidado dentro de ella, como las etiquetas <title>, <meta> y <link>.
Un artículo de blog: Tipograficamente hablando, un artículo puede contener todos los jugadores importantes del marcado HTML. Comience con un <article> en sí mismo, tal vez un encabezado <h2>, etiquetas <p> por supuesto, tal vez salpicadas con etiquetas <em> para dar énfasis, o texto en <strong>. Incluso podría usar marcado menos obvio como una <blockquote> y una regla horizontal <hr>.
Miniaturas de portafolio: Las cosas pueden comenzar a ser un poco más complejas ahora, pero no olvide; en realidad no estás dándole estilo a nada de esto, sólo está tratando de estructurar los bloques de construcción de la manera más limpia y lógica posible. En este caso, puede usar una lista no ordenada <ul>, con elementos de lista <li> para mantener cada una de las miniaturas. Cada miniatura probablemente incluirá una imagen <img src="" alt=""> (que le dará la oportunidad de jugar con los atributos src y alt) envuelta en un ancla <a href=""> que enlazará a una imagen en una versión más grande.

Mantenga su marcado limpio e sangre las etiquetas anidadas para ayudar a la legibilidad. Además, adquiera el hábito de dejar comentarios para ayudar a otros que puedan necesitar trabajar con su código:

1	<div class="test">
2	<p>This is the content of the test div.</p>
3	</div><!-- end of test div -->

Revise su Trabajo

Habiendo construido algo en HTML, es hora de comprobarlo. Diríjase a validator.w3.org y ejecute su trabajo a través del validador. No siempre es vital que su marcado sea 100% válido, pero apuntar a esa gran palmada verde en la espalda es una gran manera de mantener altos sus estándares.

¡Bono!

Una vez que se sienta seguro de construir la estructura imaginaria, ¿por qué no dirigirse a un diseño real? Mire un diseño posicionado e imagine cómo se forma en términos de marcado.

Artículo por Brijan en dribbble

Tarea 4: Estudie el Marcado

Es importante que usted aprenda donde usar qué elementos

Ahora que usted se siente cómodo construyendo la estructura HTML, es hora de mejorar su vocabulario. Mientras escribe el marcado usted necesitara tantas etiquetas del elemento a su disposición como sea posible (y hay bastantes).

Es importante que aprenda dónde usar qué elementos, no para fines de estilo, sino para describir el contenido de su página de la manera más apropiada posible. Esto es lo que se conoce como semántica.

Si un fragmento de texto está destinado a ser un párrafo dentro de su diseño, utilice una etiqueta <p> para incluirlo. No utilice un <div>, por ejemplo. El uso de marcado semántico hace que sus páginas web sean eficientes, más accesibles a los navegadores, lectores de pantalla, motores de búsqueda - ¡incluso otros dispositivos que aún no han sido inventados! Ponga atención al describir su contenido correctamente y está ayudando a la web a convertirse en un lugar mejor, créame.

Estos son algunos recursos sólidos que cubren elementos HTML y sus propósitos previstos:

html5doctor.com es una colaboración de algunas de las mentes más agudas de la industria, dejando claro cómo deberíamos usar HTML semántico.
HTML Elements en Mozilla. ¿Nota el pequeño ícono 5 junto a algunos de los elementos? Denotan que esos elementos son adiciones recientes a la especificación HTML, actualmente denominada HTML5.

Tarea 5: Lea un Libro

Tener libros a mano siempre es excelente para hacer referencia a las cosas, o incluso para (sorprendentemente) leer de cubierta a cubierta. En esta etapa de su viaje por HTML, tómese el tiempo para hacerse con un par de libros de referencia. Yo recomiendo:

HTML y CSS Diseño y Construcción de Sitios Web - vale la pena para enterarse de la calidad de presentación, entre otras cosas.
Decodificando HTML5 de Rockable Press - Este libro ofrece una gran visión de los funcionamientos políticos detrás de los estándares HTML.
HTML5 PARA DISEÑADORES WEB de A Book Apart - Si todavía no posee una publicación A Book Apart, este es el mejor momento para presentarse a sí mismo.
Presentando HTML5 por Bruce Lawson y Remy Sharp - comienza a ser un poco complejo en términos de otras funcionalidades que ofrece HTML5, pero este es un libro de HTML al que definitivamente vale la pena echarle un vistazo.

Tarea 6: Participe en la Comunidad

Esta es la mejor parte de ser un profesional de la web: la comunidad. Cuando usted tenga una pregunta, o un problema, siempre hay alguien por ahí que ha encontrado lo mismo y estará dispuesto a ayudarle. ¡Vaya y participe en foros y comunidades creativas, pida ayuda y ofrezca consejos una vez que tenga la suficiente confianza para hacerlo!

Participe en las siguientes comunidades:

Stack Overflow: la mejor comunidad técnica de preguntas y respuestas por ahí. ¿Está aprendiendo HTML? Hay bastantes hilos ya en marcha.
Forrst: un gran lugar para comentarios creativos y técnicos sobre los proyectos en los que está trabajando. Funciona sólo con invitación si usted quiere participar, pero permanezca en los pasillos el tiempo suficiente y alguien lo dejará entrar..
GitHub: principalmente un repositorio abierto y en línea para almacenar y hacer versiones de su propio código, GitHub ofrece aprendizaje a través de ver cómo otros "lo hacen". Muchos de los proyectos en GitHub son intimidantemente avanzados para los principiantes HTML, pero tenga esto en mente para el futuro.
Creattica: es una comunidad en línea para creatividades. De y reciba opiniones acerca de sus últimos proyectos HTML.

Aparte de las comunidades, las redes sociales son la forma perfecta de interactuar con sus héroes HTML, plantear preguntas y ofrecer opiniones. Aquí hay un par de personas en Twitter que vale la pena seguir por su destreza HTML:

Tarea 7: Acelere su Flujo de Trabajo de Marcado

En esta etapa usted tiene un conocimiento sólido de lo qué es HTML, qué elementos se utilizan actualmente, cómo estructurar el marcado semántico, quiénes son los jugadores de la industria y ¡está listo para el desafío siguiente! El siguiente paso lógico sería concentrarse en CSS; darle estilo al marcado HTML que ahora escribe de una manera competente. En primer lugar, sin embargo, vamos a ver si podemos acelerar nuestro flujo de trabajo de marcado con un par de enfoques alternativos..

Markdown

Markdown le permite escribir utilizando un formato de texto plano fácil de leer y fácil de escribir.

Markdown es una forma más legible de escribir marcado de contenido HTML. Alivia una gran cantidad de codificación de etiquetas, cambiando todas esas tonterías por una sintaxis menos compleja. Una vez que haya escrito su documento de Markdown, ejecútelo a través de un analizador (como Dingus) para producir el equivalente HTML familiar.

Por ejemplo, ahora estamos familiarizados con estas etiquetas de encabezado HTML:

1	<h1>This is an H1</h1>
2
3	<h2>This is an H2</h2>
4
5	<h6>This is an H6</h6>

El equivalente en Markdown sería:

1	# This is an H1
2
3	## This is an H2
4
5	###### This is an H6

lo que significa que no tendría que preocuparse por el cierre de etiquetas - y la naturaleza sangrada de los encabezamientos Markdown hace la jerarquía visualmente mucho más clara, más legible a los ojos humanos.

Markdown es cada vez más popular y lo encontrará integrado en los editores de código y sistemas de gestión de contenidos. En términos de redacción de contenido web es ideal. Eche un vistazo a la página de sintaxis para obtener más información, o eche un vistazo a nuestro reciente tutorial de Documentación Rápida y Fácil con Markdown.

Emmet

Emmet acelera su codificación de marcado analizando y convirtiendo el código abreviado. Por ejemplo, en lugar de escribir manualmente:

1	<div>
2	<ul>
3	<li></li>
4	<li></li>
5	<li></li>
6	<li></li>
7	</ul>
8	</div>

usted utilizaría la forma abreviada:

1	div>ul>li*4

Emmet (antes conocido como Zen Coding) es un conjunto de herramientas de desarrollo web que puede mejorar en gran medida su flujo de trabajo HTML y CSS:

Lo que esto dice literalmente es "produce un div, que contenga una lista no ordenada, la cual contiene cuatro elementos de lista".

Dependiendo de la aplicación que esté usando, entonces teclearía (por ejemplo) el tabulador y Emmet procesaría esa sintaxis abreviada, generando marcado HTML como el ejemplo original. El potencial de ahorro de tiempo debería estar muy claro ya y Emmet hace mucho más que nuestro sencillo ejemplo aquí.

Emmet puede ser utilizado con una serie de editores de código y aplicaciones, eche un vistazo a Mejorando su Productividad: Consejos Rápidos para la Codificación Zen y 7 Impresionantes Consejos para ahorrar tiempo con Emmet HTML para obtener más ayuda inicial.

Conclusión

Seguir un plan de aprendizaje como este y aprovechar al máximo los recursos mencionados le enviará en su camino hacia el éxito en HTML. Aprender una nueva habilidad abre puertas, ¿quién sabe dónde le llevará esta habilidad?

Siguiente paso: Ahora que ha aprendido bien algunas habilidades de HTML, eche un vistazo a La Mejor Manera de Aprender CSS.

Cualquier sugerencia de aprendizaje es realmente bienvenida - ¡grítela en los comentarios!