Share
Aprender una nueva habilidad es a menudo intimidante al principio; saber por dónde empezar, a quién escuchar, qué ignorar, puede ser un proceso difícil para moverse. Para eso es este post. Le ayudará a planificar qué aprender y en qué orden, con suerte haciendo que lo que parece ser un gran obstáculo sea mucho menor, lo mantendrá interesado y lo alentará a continuar aprendiendo.!
Esta es la parte más crucial de cualquier proceso de aprendizaje: ¡una vez que haya tomado la decisión de ampliar sus horizontes al aprender una nueva habilidad, está superando el primer obstáculo! Tal vez usted es un diseñador y busca ir más allá de la pluma, el papel y Photoshop, tal vez no haya tenido nada que ver con la web, no importa.. Ahora desea crear páginas web y, con la ayuda de los recursos que se enumeran a continuación, podrá descifrar el HTML rápidamente..
Para empezar, hablaremos muy literalmente sobre los conceptos básicos de HTML, después de lo cual veremos los recursos y las tareas para mantener la bola en movimiento..
Es importante que sepa qué es HTML, así que aquí hay una definición rápida del World Wide Web Consortium (W3C) que trabaja incansablemente hacia una web estandarizada:
HTML es el lenguaje de publicación de la World Wide Web..
El fin. Eso fue fácil, ¿verdad? Con HTML (HyperText Markup Language) puede crear documentos listos para su publicación en la web. El marcado HTML bien escrito (como se menciona) describe la estructura del contenido dentro de un documento. Puede especificar qué bits del documento son encabezados, qué bits son párrafos, establecer relaciones simples entre partes de contenido e incluso establecer cierto comportamiento básico.
Dicho esto, comencemos con su primer archivo HTML. Necesitará un editor de texto plano (como el TextEdit predeterminado en OS X o el Bloc de notas de Windows). Ahora:
Ahora necesitas tu segunda aplicación, un navegador web. Hay varios jugadores principales en el mercado de los navegadores, pero ya sea que use Internet Explorer, Google Chrome, Firefox, Safari u Opera (y hay otros), su archivo index.html seguramente se abrirá en su navegador preferido de forma predeterminada.
Lo importante es que un navegador, cuando se da cuenta de que está tratando con un archivo .html, sabe procesar los contenidos como HTML. Técnicamente, no hemos proporcionado el código HTML correcto aquí, pero los navegadores no le darán mucha importancia: la mera presencia de la extensión de archivo .html le dice a nuestro navegador lo suficiente. Solo hemos escrito una línea de texto simple, pero observe cómo el navegador en realidad lo interpreta:
No te preocupes por esta ventana de depuración por ahora, solo se usa para ilustrar nuestro punto.
¡Así que eso cuida tu primer paso en HTML! Ahora entiendes lo que es, lo que se necesita para comenzar a escribirlo y estás empezando a comprender lo que los navegadores hacen con él..
Antes de sumergirnos en cualquier recurso, es necesario obtener algunos principios básicos más bajo nuestros cinturones. ¿Recuerdas las piezas extra de código que nuestro navegador parecía agregar? Esas eran las etiquetas HTML, los bloques de construcción del marcado HTML. Una etiqueta describe un elemento y resalta ese hecho utilizando corchetes angulares. Este es el etiqueta de apertura del elemento html que vimos anteriormente:
Aparte de lo que se conoce como una declaración doctype, usamos la etiqueta html para iniciar nuestro documento, luego terminamos nuestro documento con un acompañante etiqueta de cierre:
¿Ver 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; Envuelven contenido de algún tipo. Estos dos envuelven el contenido de un párrafo:
Bien, volveremos a mirar nuestro archivo index.html original una vez más, luego prometo que realmente hablaremos sobre los recursos de aprendizaje. ¿Ves cómo las etiquetas html están envueltas alrededor de otras etiquetas? Eso se conoce como anidando. Las etiquetas pueden envolver alrededor de otras etiquetas. Entonces 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 encabezados y reglas horizontales. Párrafos que contienen anclas y vanos. Los pies de página que contienen listas que luego contienen enlaces. Esta es la base para construir una estructura HTML..
Echa un vistazo a esta ilustración. En la parte superior está el formato HTML, debajo hay una representación visual de cómo se anidan los elementos entre sí..
Después de haber comprendido 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 te recomiendo que eches un vistazo, los cuales son absolutamente libre Y vale la pena seguir de principio a fin..
Suficientemente académico por el momento, tomemos un descanso y revisemos algunas herramientas para facilitar nuestra codificación HTML. Hasta ahora solo he sugerido editores de texto simple para crear sus archivos HTML. Estos están perfectamente bien, pero hay editores de código disponibles que encontrarás mucho más intuitivos de usar.
Las ventajas clave de usar un editor de código especialmente diseñado son:
Hay muchas más ventajas, pero esas se harán evidentes una vez que se involucre más en la escritura del código. Entonces, ¿cuáles son sus opciones? Aquí hay algunos:
Para obtener más información sobre los numerosos editores de código disponibles para usted, consulte la Guía del diseñador web para codificar aplicaciones y 18 IDE maravillosos para Windows, Mac y Linux..
Ya es hora de que te ensucies las manos y pongas en práctica tus nuevas habilidades. Desafíate a ti mismo construyendo la estructura de marcado HTML para las siguientes cosas:
Accentsconagua
!doctype, la </code>, <code><meta></code> etiquetas y <code><link></code> etiquetas.</li> <li> <strong>Un articulo de blog</strong>: Hablando tipográficamente, un artículo puede contener a todos los jugadores importantes de marcado HTML. Comenzar con un <code><article></code> en sí, tal vez un <code><h2></code> título, <code><p></code> etiquetas por supuesto, tal vez salpicadas de <code><em></code> etiquetas para enfatizar, o <code><strong></code> texto. Incluso se podría utilizar un marcado menos obvio como un <code><blockquote></code> y una regla horizontal <code><hr></code>.</li> <li> <strong>Miniaturas de cartera</strong>: Las cosas pueden comenzar a volverse un poco más complejas ahora, pero no lo olvides; en realidad no está diseñando nada de esto, solo está tratando de estructurar los bloques de construcción de la manera más limpia y lógica posible. En este caso, podrías usar una lista desordenada. <code><ul></code>, con elementos de lista <code><li></code> Para sujetar cada una de las miniaturas. Cada miniatura probablemente comprendería una imagen <code><img></code> (lo que te dará la oportunidad de jugar con los atributos src y alt) envuelto en un ancla <code><a></code> que enlazará a una versión más grande. Mucha bondad de anidación allí.</li> </ul> <p>Mantén tus etiquetas limpias y sangra las etiquetas anidadas para facilitar la lectura. Además, adopte el hábito de dejar comentarios para ayudar a otras personas que puedan necesitar trabajar con su código:</p> <pre><div> <p>Este es el contenido de la prueba div..</p> </div><!-- end of test div --></pre> <h3>Revisa tu trabajo</h3> <p>Habiendo construido algo en HTML, es hora de comprobarlo. Dirígete a validator.w3.org y ejecuta tu trabajo a través del validador. No siempre es vital que su marca sea 100% válida, pero apuntar a esa gran bofetada verde en la espalda es una excelente manera de mantener sus estándares altos.</p> <img src="//accentsconagua.com/img/images_20/the-best-way-to-learn-html_9.png"> <h3>Prima!</h3> <p>Una vez que te sientas seguro construyendo una estructura imaginaria, ¿por qué no convertir tu mano en un diseño real? Mira el diseño de un diseño e imagina cómo se forma en términos de marcado.</p> <img src="//accentsconagua.com/img/images_20/the-best-way-to-learn-html_10.png"><br>Artículo, por Brijan en dribbble <hr> <h2>Tarea 4: Swot up on Markup</h2> <blockquote><p>Es importante que aprendas dónde usar qué elementos.</p></blockquote> <p>Ahora te sientes cómodo construyendo una estructura HTML, es hora de mejorar tu vocabulario. Mientras escribe el marcado, necesita tantas etiquetas de elementos a su disposición como sea posible (y hay bastantes).</p> <p>Es importante que aprendas dónde usar qué elementos, no para propósitos de estilo, sino para describir el contenido de tu página de la manera más apropiada posible. Esto es lo que se conoce como semántica.</p> <p>Si una parte del texto pretende ser un párrafo dentro de su diseño, use un <code><p></code> etiqueta para encerrarlo. No use un <code><div></code>, por ejemplo. El uso del marcado semántico hace que sus páginas web sean más eficientes, más accesibles para los navegadores, lectores de pantalla, motores de búsqueda, ¡incluso para otros dispositivos que aún no se han inventado! Tenga cuidado al describir su contenido correctamente y está ayudando a que la web crezca en un lugar mejor, créame.</p> <p>Aquí hay algunos recursos sólidos que cubren los elementos HTML y sus propósitos previstos:</p> <ul> <li> html5doctor.com es una colaboración de algunas de las mentes más agudas de la industria, que deja claro cómo deberíamos utilizar HTML semántico..</li> <li> Elementos HTML en Mozilla. Nota la pequeña <strong>5</strong> ¿Iconos por algunos de los elementos? Indican que esos elementos son adiciones recientes a la especificación HTML, actualmente denominadas HTML5.</li> </ul> <hr> <h2>Tarea 5: Leer un libro</h2> <p>Tener libros a mano siempre es bueno para hacer referencia a cosas, o incluso (sorprendentemente) leer de principio a fin. En esta etapa de su viaje de HTML, tómese el tiempo para obtener un par de libros de referencia. Yo recomiendo:</p> <img src="//accentsconagua.com/img/images_20/the-best-way-to-learn-html_11.png"> <ul> <li> Diseño y creación de sitios web HTML y CSS: vale la pena conseguir la calidad de la presentación, entre otras cosas..</li> <li> Decodificación de HTML5 de Rockable Press: este libro ofrece una gran perspectiva del funcionamiento político detrás de los estándares HTML.</li> <li> HTML5 PARA DISEÑADORES WEB DE A Book Apart: si aún no tiene una publicación de A Book Apart, este es el mejor momento para presentarse..</li> <li> La introducción de HTML5 por Bruce Lawson y Remy Sharp comienza a ser un poco compleja en términos de otras funcionalidades que ofrece HTML5, pero este es un libro HTML que vale la pena echarle un vistazo..</li> </ul> <hr> <h2>Tarea 6: Participar en la comunidad</h2> <p>Aquí está la mejor parte de ser un profesional de la web: la comunidad. Siempre que tenga una pregunta o un problema, siempre hay alguien que se encuentra con lo mismo y estará dispuesto a ayudarlo. Vaya y únase a foros y comunidades creativas, solicite ayuda y ofrezca consejos una vez que tenga la confianza suficiente para hacerlo!</p> <p>Participe participando en las siguientes comunidades:</p> <ul> <li> Stack Overflow: la mejor comunidad técnica de preguntas y respuestas que existe. ¿Estás aprendiendo HTML? Hay bastantes hilos en marcha ... </li> <li> Primero: un excelente lugar para comentarios técnicos y creativos sobre los proyectos en los que está trabajando. Es solo una invitación si quieres participar, pero pasa el tiempo suficiente en los pasillos y alguien te dejará entrar ... </li> <li> GitHub: principalmente un repositorio abierto y en línea para almacenar y crear versiones de su propio código, GitHub ofrece aprendizaje a través de cómo otros "lo hacen". Muchos de los proyectos en GitHub son intimidantemente avanzados para los principiantes de HTML, pero ten esto en cuenta para el futuro.</li> <li> Creattica: es una comunidad en línea para creativos. Da y recibe comentarios sobre tus últimos proyectos HTML.</li> </ul> <p>Aparte de las comunidades, las redes sociales son la manera perfecta de interactuar con tus héroes HTML, plantear preguntas y ofrecer opiniones. Aquí hay un par de usuarios de Twitter que vale la pena seguir por su destreza en HTML:</p> <ul> <li>@ html5doctor</li> <li>@brucel</li> <li> @wdtuts naturalmente ... </li> <li> Los nettuts naturalmente ... </li> <li>@LeaVerou</li> <li>@zeldman</li> <li>@meyerweb</li> <li>@smashingmag </li> </ul> <hr> <h2>Tarea 7: acelerar el flujo de trabajo de marcado</h2> <p>En esta etapa, tendrá una idea de qué es HTML, qué elementos se utilizan actualmente, cómo estructurar el marcado semántico, quiénes son los actores de la industria y está listo para el próximo desafío. El siguiente paso lógico sería concentrarse en CSS; Al diseñar el marcado HTML, ahora eres competente en la escritura. Pero primero, veamos si podemos acelerar nuestro flujo de trabajo de marcado con un par de enfoques alternativos ... </p> <h3>Reducción</h3> <blockquote><p>Markdown le permite escribir utilizando un formato de texto sin formato fácil de leer y escribir..</p></blockquote> <p>Markdown es una forma más legible de escribir marcas de contenido HTML. Alivia una gran cantidad de codificación de etiquetas al cambiar 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.</p> <p>Por ejemplo, ahora estamos familiarizados con estas etiquetas de encabezado HTML:</p> <pre><h1>Este es un H1</h1> <h2>Este es un H2</h2> <h6>Este es un H6</h6></pre> <p>El equivalente de Markdown sería:</p> <pre># Este es un H1 ## Este es un H2 ###### Este es un H6</pre> <p>lo que significa que no tendría que preocuparse por cerrar etiquetas, y la naturaleza con sangría de los encabezados de Markdown hace que la jerarquía sea mucho más clara, más legible para los ojos humanos..</p> <p>Markdown se está volviendo cada vez más popular y lo encontrará integrado en editores de código y sistemas de administración de contenido. En términos de escribir contenido web es ideal. Eche un vistazo a la página de sintaxis para obtener más información, o consulte nuestro reciente tutorial Documentación rápida y fácil usando Markdown.</p> <h3>Hormiga</h3> <p>Emmet acelera la codificación de su marca analizando y convirtiendo el código abreviado. Por ejemplo, en lugar de escribir manualmente:</p> <pre><div> <ul> </ul> </div></pre> <p>Usted usaría la forma abreviada:</p> <pre>div> ul> li * 4</pre> <blockquote><p>Emmet (anteriormente conocido como Zen Coding) es un conjunto de herramientas para desarrolladores web que puede mejorar considerablemente su flujo de trabajo HTML y CSS:</p></blockquote> <p>Lo que esto dice literalmente es "generar un div, que contiene una lista no ordenada, que contiene cuatro elementos de lista".</p> <p>Dependiendo de la aplicación que esté utilizando, luego presionaría (por ejemplo) TAB y Emmet procesaría esa sintaxis abreviada, lo que generaría un marcado HTML como en el ejemplo original. El potencial de ahorro de tiempo ya debería ser muy claro, y Emmet lo hace <em>mucho</em> más que nuestro simple ejemplo aquí.</p> <p>Emmet se puede usar con varios editores de código y aplicaciones, eche un vistazo a Mejora de su productividad: consejos rápidos para la codificación Zen y 7 consejos impresionantes de ahorro de tiempo de Emmet HTML para obtener más ayuda para comenzar.</p> <hr> <h2>Conclusión</h2> <p>Seguir un plan de aprendizaje como este y aprovechar al máximo los recursos mencionados lo enviará en su camino hacia el éxito de HTML. Aprender una nueva habilidad abre puertas, quién sabe dónde te llevará esta habilidad?</p> <p><strong>Próximo paso:</strong> Ahora que tiene algunas habilidades de HTML en su haber, eche un vistazo a la mejor manera de aprender CSS.</p> <p>Cualquier sugerencia de aprendizaje es muy bienvenida - grite en los comentarios!</p>
<div class="rek-block">
<center>
<ins class="adsbygoogle"
style="display:inline-block;width:580px;height:400px"
data-ad-client="ca-pub-3810161443300697"
data-ad-slot="9434875811"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</center>
</div>
<div class="h-alltags">
<a href="articles/webdesign">Diseño web</a>
</div>
</div>
</div>
</div>
</div>
<div class="next_posts clearfix">
<div class="n_post">
<div class="next_posts-h1 left_nh1"><a href="/articles/code/the-best-way-to-learn-javascript.html">La mejor manera de aprender JavaScript</a></div>
<div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_26_1/the-best-way-to-learn-javascript_2.jpg');"></div>
</div>
<div class="n_post">
<div class="next_posts-h1 right_nh1"><a href="/articles/webdesign/the-best-way-to-learn-css.html">La mejor manera de aprender CSS</a></div>
<div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_19/the-best-way-to-learn-css_17.png');"></div>
</div>
</div>
<footer>
<div class="container">
<div class="footer-langs">
<ul class="site-langs-list">
<li><a href="https://www.accentsconagua.com"><i class="flag flag-DE"></i>Deutsch</a></li>
<li><a href="https://fr.accentsconagua.com"><i class="flag flag-FR"></i>Français</a></li>
<li><a href="https://nl.accentsconagua.com"><i class="flag flag-NL"></i>Nederlands</a></li>
<li><a href="https://no.accentsconagua.com"><i class="flag flag-NO"></i>Norsk</a></li>
<li><a href="https://sv.accentsconagua.com"><i class="flag flag-SE"></i>Svenska</a></li>
<li><a href="https://it.accentsconagua.com"><i class="flag flag-IT"></i>Italiano</a></li>
<li><a href="https://es.accentsconagua.com"><i class="flag flag-ES"></i>Español</a></li>
<li><a href="https://ro.accentsconagua.com"><i class="flag flag-RO"></i>Românesc</a></li>
</ul>
</div>
<div class="h-block"><a href="/">es.accentsconagua.com</a><div class="h-block-a"></div></div>
<div class="footer-text">
Información interesante y consejos útiles sobre programación. Desarrollo de sitios web, diseño web y desarrollo web. Tutoriales de Photoshop. Creación de juegos de ordenador y aplicaciones móviles. Conviértete en un programador profesional desde cero.
</div>
</div>
</footer>
<div class="search">
<img class="searchico" src="//accentsconagua.com/img/search.svg" alt="">
</div>
<div class="modal">
<div class="modal-content">
<span class="close-button">×</span>
<input class="searchmain" type="text" id="search-input" placeholder="Buscar...">
<ul class="searchli" id="results-container"></ul>
</div>
</div>
<link rel="stylesheet" href="css/flags.css">
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script>
<script>
window.addEventListener("load", function(){
window.cookieconsent.initialise({
"palette": {
"popup": {
"background": "#edeff5",
"text": "#838391"
},
"button": {
"background": "#4b81e8"
}
},
"theme": "classic",
"position": "bottom-right"
})});
</script>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script src="js/scripts.min.js"></script>
<script src="js/common.js"></script>
<link rel="stylesheet" href="css/fontawesome-all.min.css">
<script>
var modal = document.querySelector(".modal");
var trigger = document.querySelector(".search");
var closeButton = document.querySelector(".close-button");
function toggleModal() {
modal.classList.toggle("show-modal");
}
function windowOnClick(event) {
if (event.target === modal) {
toggleModal();
}
}
trigger.addEventListener("click", toggleModal);
closeButton.addEventListener("click", toggleModal);
window.addEventListener("click", windowOnClick);
</script>
<script src="https://unpkg.com/simple-jekyll-search@1.5.0/dest/simple-jekyll-search.min.js"></script>
<script>
SimpleJekyllSearch({
searchInput: document.getElementById('search-input'),
resultsContainer: document.getElementById('results-container'),
json: '/search.json',
searchResultTemplate: '<li><a href="{url}">{title}</a></li>'
})
</script>
<script src="jquery.unveil2.min.js"></script>
<script>
$('img').unveil();
</script>
</body>
</html>