https://steemitimages.com/DQmRVAi7BHdx7MhMpbBqSKyymCxvkcicRc62C3voJeEUZU5/titulo.png

Buenos días amigos de la comunidad steemit, Muchas veces hemos querido realizar nuestra propia página web, y pensamos que es un trabajo difícil, que solamente los expertos en HTML pueden lograrlo. Les puedo decir a los que tienen poca experiencia que solamente tienen que seguir unos pocos pasos para realizar su propia página web:

1. Conocer el significado de HTML , en inglés HyperText Markup Language (lenguaje de marcas de hipertexto). Es el lenguaje utilizado para la elaboración de páginas web y define una estructura de etiquetas también conocidas como TAG, las cuales son utilizadas para la presentación del contenido de la página web que se esta diseñando; Este puede ser texto, imágenes, videos, link de referencia, entre otras cosas. En otras palabras este lenguaje estructura documentos. (títulos, párrafos, listas...) que van a ser definidas por este lenguaje mediante TAGS. Cualquier cosa que no sea una TAG es parte del documento q. Por ello al diseñar los documentos debemos centrarnos en proporcionar un contenido claro y bien estructurado que resulte fácil de leer y entender.

2. Conocer la estructura de un documento HTML:

Comienza con la etiqueta https://steemitimages.com/DQmT531NuJ6PoK7EGcwix9RqTJvGntpdp66T3358QgptfNP/html.png : define el inicio del documento HTML, le indica al navegador que lo que viene a continuación debe ser interpretado como código HTML. https://steemitimages.com/DQmci3wR3JQzJ8hGHGR2mbQJa454aKJsbGE2PFFYQz8CK1V/_html.png : Indica el fin del documento.

https://steemitimages.com/DQmao7Ye1YhtFQZDx7btKDeV4eEiaLkDmzHK54iRUGfjBLz/head.png : define la cabecera del documento HTML; esta cabecera suele contener información sobre el documento que no se muestra directamente al usuario como, por ejemplo, el título de la ventana del navegador. Dentro de la cabecera https://steemitimages.com/DQmao7Ye1YhtFQZDx7btKDeV4eEiaLkDmzHK54iRUGfjBLz/head.png es posible encontrar: https://steemitimages.com/DQmWCKzS32a4zMjkGb322oLtmKKs4mdaPxaha5nZxBxbaNU/title.png que define el título de la página. Por lo general, el título aparece en la barra de título encima de la ventana. https://steemitimages.com/DQmSBJmLQEkJkNymEXWgP99U7K1bSzzTheGLWHH29iXvAvM/_title.png. También suele utilizarse la etiqueta https://steemitimages.com/DQmUuQhDPuTgYtPWwWH3yHbqfodEBrAUA7Tcs33MYHq2d6f/style.png : para colocar el estilo interno de la página; ya sea usando CSS u otros lenguajes similares. Luego https://steemitimages.com/DQmWpz1hERTM4AwYCrX84cuWHWCHf3rchvCaxPAJ98wwd7h/_style.png https://steemitimages.com/DQmTEAZj4K829UmyKzCKDdxWecCRanRyADXxd6bwynHB9tS/_head.png

https://steemitimages.com/DQmbdwQMvqF8i6SNE8QHrLFRzPr7339XDrW9RzGSgPYrt5P/body.png Define el contenido principal o cuerpo del documento. Esta es la parte del documento html que se muestra en el navegador; dentro de esta etiqueta pueden definirse propiedades comunes a toda la página, como color de fondo y márgenes. Dentro del cuerpo BODY es posible encontrar numerosas etiquetas. A continuación se indican algunas a modo de ejemplo: https://steemitimages.com/DQmcfgSqAtd428e74X5nFQWNcNiPnA6cvxpm7s8qkAXWQHZ/etiquetas%20en%20body.png https://steemitimages.com/DQmPHfmvm6dRCrRdJzzLh4H1wVVdCPPnaRsXk2wgHALTVYM/_body.png

3. Tener un Computador configurado como servidor web: Un servidor, es un equipo de cómputo de propósito general que brinda servicios informáticos y de comunicaciones. Por lo tanto un servidor web o servidor HTTP es un programa informático que procesa una aplicación del lado del servidor, realizando conexiones con el cliente para generar una respuesta en cualquier lenguaje o aplicación del lado del cliente. Los servidores Web más populares son Internet Information Server o IIS, de Microsoft; y Apache, de Apache Software Foundation.

Ahora vamos a realizar paso a paso un documento html y mostraremos la salida en el navegador Chrome:

https://steemitimages.com/DQmWsKufVw7vvdp4NzSzms4PqEYjDDyDJ5om8uoS9J6M7iM/html1.png

https://steemitimages.com/DQmPMduSqa4pxwr1aL6TmMsjKFNKs14usi6Vm6ZWFAV8k4t/comentario%20html1.png

Salida en Navegador:

https://steemitimages.com/DQmQdsbrcbtgWDRDmzcMMfB8TkthxTCKaFHTTeeSeFcXEng/salida1.png

Cuando estamos diseñando nuestra página web, normalmente tenemos inconveniente con el texto que estamos presentando es por ello que vamos a ver la funcionalidad de la etiqueta de párrafo: https://steemitimages.com/DQmTjoeESG5GzkN4XYem5CzYU9bGUj9cvuqcBY1EfjnTpng/parrafo.png

https://steemitimages.com/DQmRoop6J9ZpmdTZQ664oLRDjCLLLdWHe7SEpLewB2fv1S1/codigo_html2.png

Como les mencione antes, las propiedades de las etiquetas las podemos definir mediante el style, por ejemplo la justificación de texto y el color.

https://steemitimages.com/DQmZsw4Uu2hyFCQ251XNmWAfsyD6FrHmKLvz4sCw1tceJoC/comentario_codigo_html2.png

Salida en Navegador:

https://steemitimages.com/DQmbsKKyHSGYwjLBUujTqwJzZosnQAwCwQLHmrhQm9j6B3y/salida2.png

Ya sabemos como trabajar con párrafos, ahora veremos como trabajar con imágenes y ubicarlas en nuestra página web haciendo uso de tablas. Existen quienes no les gustan usar tabla en su diseño html, en su lugar usan CSS: Hojas de estilo en cascada (siglas en inglés de Cascading Stylesheets). Yo les dejo esa elección a ustedes amigos, pero el fin de este post es dar algunas sugerencias para aquellas personas con poca o ninguna experiencia en diseños de paginas html.

https://steemitimages.com/DQmZPgpy1G7YKEsmvq4gWyCnd7VxGaJRLTtWYN3MaXfkd2u/codigo_html3.png

https://steemitimages.com/DQmRd9Kg47L359dc9gNkHeMpQf7fwc2hrZ3j3CHPEorjH4V/comentario_codigo_html3.png

Salida en el Navegador

https://steemitimages.com/DQmX3nQDJ4qWDMZGTtk6kcaAbq2krcgdxNyfB9VTkRhPGLe/salida3.png

Para posicionar las imágenes en el diseño y tener el control de donde queremos ubicarlas podemos usar la etiquetahttps://steemitimages.com/DQmQXmUd8VgYRPi8WEm7934paNmKtVnUCiBP6EZEYYRWkCq/etiqueta_tabla.png La tabla funciona con celda posición Fila, Columna. Para ello utilizamos TR=Fila, TD=columna.

https://steemitimages.com/DQmV8TSBxQE7z8JMMsXDdGvivfmfxpXV5SS3brTAGVdyRQw/comentario_2_codigo_html3.png

Salida en el Navegador

https://steemitimages.com/DQmW9feALbcv13bAoN2PHjJAbb4ej41HrgQQjKtvtef6vqW/salida4.png

Espero que esta introducción les ayude a iniciarse en el diseño de paginas web, Saludos amigos de steemet. Pendiente que en la próxima publicación les mostrare algunas herramientas tecnológicas que te permiten de una manera sencilla mejorar la apariencia de tu diseño web.