INTRODUCCION A HTML

 A través de las redes sociales puedes compartir con tus amigos tus fotos, videos, pensamientos. Con la llegada de los Smartphone ha sido aun mas sencillo navegar en la red y encontrar sitios web en cualquier tema de interés.

Para empezar se debe planificarla estructura del sitio a través de un mapa general en el que se definan algunas características como :
  • El objetivo del sitio web.
  • Tipo de publico al que va dirigido.
  • Los contenidos que tendrá (secciones).
  • Estilo del sitio (colores, diseño).
Una vez se termina el proceso de planeación, es momento de conocer el lenguaje que se emplea para el desarrollo, construcción o escritura del sitio web, se llama HTML (Hyper Text Markup Languaje), en español se traduce Lenguaje de Marcas de Hipertexto. Este lenguaje esta compuesto por una serie de instrucciones a las que se le denomina etiquetas o marcas.

Todos los archivos HTLM son solo texto, se necesita un editor de texto, aplicación o programa que permita escribir texto plano sin agregar ningún formato especifico, ejemplo un blog de notas.
Una vez escrito el texto, se guarda con la extensión ".htlm" y al abrir el archivo (posicionar el mouse sobre dicho archivo, dar clic con el botón derecho y seleccionar la opción abrir), es el navegador el que interpreta y da forma en la pantalla para que el usuario pueda ver lo que se ha diseñado.

El lenguaje HTML permite crear muchos elementos y hacer dinámico y atractivo un sitio web, todos los elementos que imágenes que se establecen a través de etiqueta o líneas de escritura y existen etiquetas para insertar imágenes, figuras, para agregar colores de fondo o color de la fuente, para insertar tablas y formularios, para crear listas, y para hipervínculos que permiten dirigirnos a otras paginas, entre otros. El Lenguaje HTML el que permite crear paginas web, darles estructura y contenido. 
Existen diferentes tipos de etiquetas que se utilizan para crear un sitio web.




ETIQUETAS DE TEXTO


En una pagina web también puedes programar un formulario para obtener información de los usuarios y, existen etiquetas para poder programarlos.

ETIQUETAS DE CREACION DE FORMULARIOS





Las tablas de contenido son un medio de organizar información en filas y columnas que te permiten almacenar los datos de forma ordenada.

ETIQUETAS PARA LA CREACION DE TABLAS DE CONTENIDO


Un documento HTML esta delimitado por las etiquetas <html> y </html>. Dentro de este documento, podemos asimismo distinguir dos partes principales:
1. El encabezado o cabecera, delimitado por y donde colocaremos etiquetas de índole informativo como por ejemplo el título de la página..
 2. El cuerpo, delimitado por las etiquetas y , que será donde colocaremos el texto e imágenes delimitados a su vez por otras etiquetas. 


Las etiquetas tiene una manera de expresarse a la que se le llama sintaxis, se escribe entre los símbolos "<" y ">" y para cerrarse se escribe el nombre de la etiqueta precedido con el símbolo "/". También existen los atributos que nos permiten personalizar las etiquetas.



A continuación se muestra un ejemplo sencillo de codigo HTML:


Generalmente, las páginas suelen ser muy atractivas en cuanto a su diseño, colores, las imágenes que muestran pero hay un trabajo de programación detrás de ellas. Vas a conocer cómo se ven desde su escritura siguiendo el procedimiento que se muestra a continuación:
 
1. Entra a internet desde un equipo de cómputo.
 2. Busca una página de tu interés.
 3. Presionar Ctrl+U y observa cómo se abre una pestaña con el código fuente HTML.
4. Observa el código y localiza las etiquetas que se utilizan. Trata de identificar las que revisaste en esta lección. 

Hay otra forma más rápida consiste en hacer clic con el botón derecho del ratón en cualquier punto del área donde el navegador muestra la página web y elegir «Ver código fuente de la página». Aparte de poder ver el código fuente HTML de una página web con las opciones antes descritas, Internet Explorer, Firefox y Google Chrome tienen también unas herramientas conocidas como inspectores de página que se pueden activar con F12. Con estas herramientas es posible visualizar una página web y seleccionar dentro de ella un elemento concreto del cual queremos conocer cuál es el código HTML con el que está hecho señalando el elemento en cuestión simplemente con el ratón. Al hacer esto, el código se mostrará en un área especial dentro del navegador en el que el usuario podrá ver el código HTML en cuestión, además, de las reglas CSS que aplican a ese código HTML en concreto. Este tipo de análisis resulta sumamente instructivo para aprender a desarrollar en HTML. 

 Ahora que has visto el código HTML de una página web realizarás una práctica sencilla.

 1. Abre el bloc de notas de tu computadora. Se que encuentras en el Menú Inicio > Programas > Accesorios >Bloc de notas.
 2. Una vez que tengas abierto el bloc de notas escribe cuidadosamente las siguientes etiquetas:
  •  Etiqueta de apertura de documento HTML: <html>
  •  Etiquetas de apertura y cierre del encabezado: <head> y </head 
  •   Etiquetas de apertura y cierre del cuerpo: <body> y </body> 
  •  Etiqueta de cierre de documento HTML </html>

3. Encabezado. Escribe cuidadosamente entre las etiquetas de apertura y cierre del encabezado las siguientes etiquetas y texto para crear el tema principal:
<h4>
 HTML es un lenguaje que se utiliza para el desarrollo de páginas de Internet </h4>



4. Cuerpo. Escribe cuidadosamente entre las etiquetas de apertura y cierre del cuerpo las siguientes etiquetas y texto para crear el tema principal, como se muestra. 
<body bgcolor="F3C1C1">
<p><b>BIENVENIDOS</b></p<
<p>- Un curso donde será una manera práctica de aprender -</b>.</p>

<p>La excelencia no es un acto, es un hábito (Aristóteles)</p>

<h4>

Datos del creador

</h4>

Escribe aquí tu nombre<br>

WhatsApp: Escribe aquí tu número telefónico<br>
email: Escribe aquí tu email<br>
</body>

5.- Una vez que hayas escrito todas las etiquetas y contenido sugerido, guarda el documento dando clic en la pestaña "archivo", clic en "guardar como", escritorio, nombre del archivo " mi primer sitio web.html" y clic en el botón guardar.



6. Ahora abre el archivo que se generó y podrás ver el resultado. Solamente tienes que posicionar el cursor sobre el archivo, dar clic con el botón derecho del mouse y seleccionar la opción abrir.






Comentarios

Entradas más populares de este blog

MODELO RELACIONAL