Principios básicos de programación Web
Breve introduccion al HTML
El HTML (Hipertext Markup Language) es lo que nos permite decirle al navegador cómo debe mostrar la información: formato de los textos, colores, orden de los párrafos, etc.
A menudo observamos como una misma página puede visualizarse de manera diferente (colores, ancho de tablas, formato de textos, etc.) en función del navegador que se utilice: el HTML no es una forma de codificar la información, sino de especificar el formato que debe darse a la información. Por ejemplo, podemos transmitir la palabra "¡Hola!" que tenemos guardada en un fichero de texto. Pero, ¿cómo decirle al navegador que la muestre de color rojo y centrada? El HTML es la respuesta.
Como empezar a construir nuestra Web:
Primero que nada necesitamos un programa para editar nuestros archivos yo utilizo Notepad++ que es un programa libre lo podemos descargar en http://notepad-plus-plus.org/download/v5.9.6.2.html
Bueno comenzamos con lo basico de HTML
Primero que nada debemos crear un archivo.txt (un archivo de texto) y ponerle como nombre index.html(cambiarle la extensión de txt a html) ustedes se preguntaran porque use el nombre index.htlm? bueno al subir nuestra pagina web a un host el primer archivo que abre va a ser el index.html. No importa sino entienden esto lo voy a explicar después.
A este archivo creado anteriormente le damos clik derecho y ponemos abrir con y buscamos el programa Notepad++ luego empezamos a editar el cuerpo de nuestra pagina, quedaria algo asi:
Link de la imagen: http://***/r/21lrh9e/5
Bien ahora después de tener esto voy a explicar para que sirven algunas etiquetas:
La etiqueta presenta frecuentemente dos partes:
Una apertura de forma general <etiqueta>
Un cierre de tipo </etiqueta>
Todo lo incluido en el interior de esa etiqueta sufrirá las modificaciones que caracterizan a esta etiqueta. Así por ejemplo:
Las etiquetas <b> y </b> definen un texto en negrita. Si en nuestro documento HTML escribimos una frase con el siguiente código:
<b>Esto esta en negrita</b>
El resultado Será:
Esto esta en negrita
Las etiquetas <p> y </p> definen un párrafo. Si en nuestro documento HTML escribiéramos:
<p>Hola, estamos en el párrafo 1</p>
<p>Ahora hemos cambiado de párrafo</p>
El resultado sería:
Hola, estamos en el párrafo 1
Ahora hemos cambiado de párrafo
En caso de no colocar la etiqueta <p></p> por mas de dar un clik en enter y que veamos un salto de linea cuando hagamos ejecutar el archivo.html
vamos a ver esto:
Hola, estamos en el párrafo 1Ahora hemos cambiado de párrafo.
Partes de un documento HTML
Además de todo esto, un documento HTML ha de estar delimitado por la etiqueta <html> y </html>. Dentro de este documento, podemos asimismo distinguir dos partes principales:
El encabezado, delimitado por <head> y </head> donde colocaremos etiquetas de índole informativo como por ejemplo el titulo de nuestra página.
El cuerpo, flanqueado por las etiquetas <body> y </body>, que será donde colocaremos nuestro texto e imágenes delimitados a su vez por otras etiquetas como las que hemos visto.
El resultado es un documento con la siguiente estructura:
<html>
<head>
Etiquetas y contenidos del encabezado
Datos que no aparecen en nuestra página pero que son importantes para catalogarla: Titulo, palabras clave,...
</head>
<body>
Etiquetas y contenidos del cuerpo
Parte del documento que será mostrada por el navegador: Texto e imágenes
</body>
</html>
Ahora le vamos a agregar esto:
<html>
<head>
<title>Aca colocamos el titulo de nuestra pagina</title>
</head>
<body>
<p><b>Bienvenido,</b></p>
<p>En este punto colocamos todo lo que va a ver la persona en el cuerpo de nuestra pagina</p>
<p>Obvio que la van a encontrar desnutrida y fea pero esto es el principio de apoco le vamos dando color</p>
</body>
</html>
Después de hacer esto le damos a guardar o también podemos hacer Ctrl + S
y luego le damos doble clik a nuestro archivo que llamamos index.html.
Link de la imagen: http://***/r/2m5173n/5
Algunas etiquetas que podemos empezar a usar:
<h1> Encabezado de nivel 1
<h2> Encabezado de nivel 2
<h3> Encabezado de nivel 3
<h4> Encabezado de nivel 4
<h5> Encabezado de nivel 5
<h6> Encabezado de nivel 6
Estas etiquetas determinan el tamaño de letra que usamos en nuestra pagina la etiqueta <h1> es la de tamaño mas grande, a todas debemos cerrarlas asi </h1>.
<i> Muestra texto en itálica</i>
<img> Inserta una imagen</img>
<s> Muestra texto tachado</s>
<p> Define un párrafo</p>
<title> Define el título del documento</title>
<u> Muestra texto subrayado </u>
<b>Esto esta en negrita</b>
</hr> Hace una linea
<ul>Viñetas (voy a poner unos ejemplos a continuacion).
En caso de querer poner en nuestra pagina estos simbolo <> que son los que abren y cierran etiquetas no vamos a poder hacerlo porque cuando ejecutemos el html lo reconoce como etiquetas entonces debemos colocar un codigo especial para que al ejecutar la pagina veamos <> dichos simbolos un ejemplo para que nos quede un poco mas claro seria si nosotros queremos explicar en nuestra pagina que significa la etiqueta <h1> debemos poner este codigo < para hacer < y para el opuesto > esto > a estos codigos lo sacamos de:
http://www.ascii.cl/htmlcodes.htm
Generalmente no vamos a utilizar estos codigos asi que no se asusten los podemos utilizar para algun signo raro o que el html no reconosca como la letra ñ que debemos colocrar Ñ
Numeración y Viñetas
En la numeración se utiliza la instrucción <OL></OL>. Cada uno de los elementos de la lista está precedido de la instrucción <LI>. En la instrucción <OL> se puede incluir el tipo de numeración:
type = tipo
Indica el tipo de numeración utilizada. Si no se indica se entiende que será una lista ordenada numéricamente.
Los tipos posibles son :
Para usar cualquiera de los siguientes debemos poner type= y el que elijan.
1 = Numéricamente. (1,2,3,4,... etc.)
a = Letras minúsculas. (a,b,c,d,... etc.)
A = Letras mayúsculas. (A,B,C,D,... etc.)
i = Números romanos en minúsculas. (i.ii,iii,iv,v,... etc.)
I = Números romanos en mayúsculas. (I,II,III,IV,V,... etc.)
Link de imagen: http://***/r/1zoxir9/5
Las viñetas se representan con la instrucción <UL></UL> para delimitar la lista, y <LI> para indicar cada uno de los elementos. En la instrucción <UL> se puede incluir el tipo de viñeta:
disk = Indica un punto
circle = Indica un punto sin relleno
square = Indica un cuadrado
Link de la imagen: http://***/r/5bnre8/5
Bien acalaro que todas las viñetas las podemos juntar:
Link de la imagen:http://***/r/15p4y7o/5
Bueno por ultimo un par de ejercicios para que realicen en caso de resultarles difíciles escriban estan comprimidos en archivos .rar descomprimir y se encuentran con 2 carpetas en ellas encontraran un archivo pdf el cual tiene el ejercicio tienen que hacerlo como esta en el pdf pero en html y otro archivo html el cual tiene la solución en caso de no poder hacerlo hacer clik derecho y abrir con Notepad++ para ver como realizarlo.
Espero que le sirva de algo esta breve introducción a HTML en unos dias van a tener una segunda parte y luego continuo con Hojas de estilo en cascada CSS.
Atencion: solo acepto criticas constructivas.