Ya que tengo un fondo impreso, siempre estoy dispuesto a ayudar a los diseñadores de otras áreas a comenzar con el diseño web y el desarrollo básico. Sé por experiencia que la transición es extremadamente intimidante que muchas personas simplemente no creen que puedan manejar.

Afortunadamente, también puedo confirmar el hecho de que probablemente no sea tan difícil como puedes imaginar. En el mundo de la codificación hardcore, el rango de HTML y CSS es bastante bajo en el barrera de entrada escala.

Hoy vamos a comenzar una serie que examina los componentes básicos del desarrollo web. HTML, CSS, JavaScript; Si eres un principiante completo y completo que quizás ni siquiera tenga una idea básica de lo que estas tecnologías son mucho menos cómo manejarlas, entonces esta serie es para ti.

¿Qué es HTML?

Hay un millón de maneras en que podría comenzar esta discusión. Podríamos profundizar en cómo HTML significa el lenguaje de marcado de hipertexto o cómo fue inventado en 1980 por el físico Tim Berners-Lee como un sistema para compartir documentos, pero puede obtener todo eso de Wikipedia. Si está interesado en la historia de la World Wide Web, le recomiendo que investigue el tema más a fondo, pero eso no nos ayuda mucho en nuestra discusión sobre qué es el HTML de hoy y cómo necesitará usarlo.

Lo que realmente necesitas entender es el propósito conceptual de HTML. ¿Para qué sirve? ¿Por qué lo necesitas? ¿Cómo se compara y se relaciona con otras tecnologías como CSS y JavaScript?

HTML: La pieza más importante

En este sentido, HTML puede considerarse como el componente fundamental de la web tal como lo conoces. ¿Hay una arquitectura subyacente de tecnología complicada que compone? ¿Internet? pero la buena WWW depende en gran medida de HTML.

De hecho, técnicamente, HTML es todo lo que necesitas para crear una página web. Unas pocas líneas de HTML extremadamente simples cargadas en un servidor web constituirían una página web, que definitivamente no es algo que pueda decirse para CSS y, por lo general, no es algo que se pueda decir sobre JavaScript. El punto aquí es que, si bien todas estas tecnologías están estrechamente relacionadas, HTML es la pieza fundamental del rompecabezas.

Ahora, antes de que se emocione demasiado, eso no significa que solo pueda aprender HTML. Sería difícil encontrar una página web moderna que no utilice, como mínimo, una combinación de HTML y CSS.

Lenguajes de marcado

Para entender realmente qué es HTML, deberás entender qué son los lenguajes de marcado y por qué existen (después de todo, estoy furtivamente en ese sentido).

Básicamente, la web está escrita en texto plano. Ahora, por? Texto simple? No solo me refiero a la falta de imágenes, me refiero a la falta de formato rico de ningún tipo. A diferencia de Microsoft Word, donde puede crear fácilmente texto en cursiva en negrita en cualquier tamaño de punto, escribir código es más parecido a usar WriteRoom o IA Writer; todo lo que obtienes son simples letras y símbolos antiguos.

La metáfora de la máquina de escribir

Imagine componer un ensayo en una máquina de escribir antigua, y luego entregarle ese ensayo a alguien para que pueda ingresarlo en una computadora. Su máquina de escribir no tiene ninguna función de formato, pero cuando su asociado ingresa su ensayo en el procesador de textos moderno, desea que tenga encabezados, texto en negrita, texto en cursiva, listas con viñetas y más. ¿Cómo le dirías a esa persona dónde implementar estas características?

La respuesta es, por supuesto, que marcarías? su documento e inserte indicadores adicionales de cómo desea que se formatee el texto. Estos no estarían presentes en el resultado final, sino que están destinados simplemente a decirle al intérprete cómo hacer que todo se vea como usted desea. Así es exactamente como funciona un lenguaje de marcas. Con HTML, este marcado se logra a través de etiquetas.

ETIQUETA usted es él

Mientras escribo este artículo, lo hago en HTML de texto plano. Esto significa cuando quiero negrita algo, simplemente no puedo presionar un botón. En su lugar, inserto una etiqueta en negrita:

La última palabra estará en <b>negrita</b>.

¿Ves como he usado?? para indicar donde empezaría el texto en negrita? También nota cómo lo usé?? para indicar dónde terminaría el texto en negrita. Para poner algo en cursiva, uso la misma técnica.

<i>Esto está en cursiva.</i> Esto no es

Las partes entre corchetes se conocen como etiquetas, y cada conjunto de etiquetas tiene un punto de inicio y de detención. Con estos, usted le dice al intérprete, en nuestro caso un navegador web como Firefox, cómo quiere que se formatee el contenido. Cuando colocamos contenido entre una etiqueta de apertura y una etiqueta de cierre, generalmente decimos que tenemos? en una etiqueta.

Etiquetas de Ejemplo

Ahora que sabe qué son las etiquetas, aquí hay algunos ejemplos más básicos de algunas etiquetas HTML:

• párrafo

• encabezamiento

  (h2, h3, h4, etc. crean encabezados incrementalmente más pequeños)

• texto pequeño

Enlaces, Etiquetas y Atributos

Aquí es donde el? Hipertexto? en? lenguaje de marcado de hipertexto? entra una parte. Una de las partes principales sobre la escritura de HTML, y de hecho sobre el uso de la web en general, es la vinculación. Así es como funciona todo bien? Si hay una página web cargada en su navegador y desea acceder a otra página, ¿qué hace? Haga clic en un enlace! Este sistema es fantástico para conectar todos los diversos bits y piezas de información almacenados en la web.

Para enlazar algo en HTML, por supuesto usamos una etiqueta. Sin embargo, esta etiqueta se verá un poco más compleja que la mayoría. Veamos un ejemplo que enlaza con la página de inicio de Design Shack.

Lee Design Shack todos los días para conocer los increíbles detalles de la calidad del diseño.

Aquí no solo tenemos una etiqueta pero un atributo también. La etiqueta () le dice al navegador que hay un enlace y el atributo (href) le dice al navegador dónde debe ir el enlace. La sintaxis para este tipo de estructura es la siguiente:

Texto, imágenes, etc.

En nuestro ejemplo anterior, cualquier cosa entre la? A? etiquetas se convierte en un enlace. Así que las palabras? Design Shack? habría sido un enlace de texto activo que, al hacer clic, dirigía al usuario a la URL href, que era la página de inicio de Design Shack.

Colocar una imagen a través de HTML funciona de la misma manera. Usamos el? Src? atributo para apuntar el navegador a la ubicación de la imagen y el? alt? atributo para el texto que aparecerá en lugar de la imagen si no se puede mostrar. Observe que la estructura de la etiqueta de cierre es un poco diferente esta vez con todo el? Img? Información colocada dentro de una sola etiqueta.

<img src="//lesptitesaffairesdemayl.be/img/images_1/what-is-html-back-to-basics_4.jpg"> <p>Ahora tenemos una buena idea de cómo HTML es un lenguaje de marcado y lo que eso significa. Sabemos que es básicamente una forma de dar texto sin formato al navegador y hacer que tenga un formato rico e incluso contenido activo que se puede hacer clic en algún extremo. Lo último que debemos comprender es cómo encaja en la imagen general de una página web completa.</p> <p>Como hemos visto en los ejemplos anteriores, HTML <em>principalmente</em> se relaciona con la entrada directa de contenido en una página. La estructura subyacente real de cualquier página web es el tipo de declaraciones etiquetadas que acabamos de conocer. La mayoría del texto y los enlaces que ve en cualquier página, así como muchas de las imágenes, se implementan directamente con HTML. </p> <h3>HTML significa ser aburrido</h3> <p>Como dije anteriormente, HTML es técnicamente todo lo que necesita para una página web. Sin embargo, este contenido HTML por sí mismo es bastante simple. Tenga en cuenta que en ninguna parte de los ejemplos anteriores le hemos dicho a la página qué color de fondo queremos usar, qué tamaño debe tener el texto, qué fuentes aplicar, dónde, qué ancho deben ser ciertas partes y cómo deben alinearse, etc. </p> <p>Simplemente hemos incluido el contenido sin pensar realmente en cómo será. Mirando cualquier página en la web, puedes ver que nadie se detiene aquí. Cada sitio tiene su propia apariencia, su propia combinación de colores, tipografía, diseño, etc.</p> <p>Por ejemplo, imagine que su sitio de noticias local recoge una historia de Associate Press. Podrían imprimir la historia literalmente y, por lo tanto, tener la misma estructura HTML básica para ese contenido, aunque probablemente se vería muy diferente de la versión en el sitio de AP. ¿Por qué?</p> <h3>CSS es la piel, el cabello y la ropa</h3> <p>La respuesta es que el HTML moderno no se usa generalmente para gobernar el estilo estético y el diseño. Para esto, hemos adoptado algo llamado hojas de estilo en cascada, o CSS.</p> <p>El flujo de trabajo típico de un desarrollador web puede ser insertar todos los diversos contenidos puros primero en un documento HTML, luego saltar a CSS y comenzar a crear ese contenido para que aparezca de una manera más agradable a la vista. Un año más tarde, el desarrollador podría regresar y agregar un nuevo archivo CSS que hace que el sitio web se vea completamente diferente, todo sin tocar el HTML. </p> <p>JavaScript entra en este juego al tomar un papel más activo en la forma en que la página <em>se comporta</em>. Animaciones, envío de formularios, contenido dinámico, estos son el dominio de JavaScript. Últimamente, CSS ha estado invadiendo este territorio, pero ese es un tema para otro día. </p> <h2>¿Qué es HTML5?</h2> <img src="//lesptitesaffairesdemayl.be/img/images_1/what-is-html-back-to-basics_5.jpg"> <p>Antes de terminar esto, probablemente te estarás preguntando de qué diablos se trata toda esta charla sobre HTML5. HTML5 es exactamente lo que parece: la quinta iteración principal de HTML.</p> <p>Las tecnologías web no están escritas en piedra, están en constante evolución y expansión. Al igual que los diseñadores de impresión, generalmente tienen que mantenerse al día con las últimas novedades en la última versión de Photoshop, así que los diseñadores web deben estar atentos a los cambios en los estándares web. </p> <p>HTML5 trae muchas características nuevas a la mesa al tiempo que elimina un poco de grasa innecesaria de su instalación anterior. Por ejemplo, los desarrolladores de HTML5 tienen algunas etiquetas nuevas con las que trabajar que hacen que la estructura básica de una página web sea más lógica. </p> <p>Para más información sobre HTML5, echa un vistazo a nuestra serie completa sobre el tema:</p> <ul> <li>HTML5: los fundamentos</li> <li>HTML5: Nuevos elementos</li> <li>HTML5: Cambios semánticos</li> <li>HTML5: Consíguelo trabajando hoy</li> </ul> <h2>Conclusión: ¡Más por venir!</h2> <p>Este artículo fue pensado para darle una descripción conceptual básica de HTML. Si comenzó a leer sin una idea de qué es HTML y cómo se usa, es de esperar que ahora tenga una idea básica de estos conceptos.</p> <p>A medida que miremos hacia el futuro, expandiré este tema y recorreré la anatomía básica de un documento HTML y luego pasaré a otra pregunta importante: ¿Qué es CSS? </p> <p>¡Asegúrese de volver pronto para más sobre estos temas!</p> <p><em>Fuentes de imagen: xlibber, Ryan Amos, Dave Parker</em></p>