Lenguaje de Marcas de Hipertexto
HTML: Antes de comenzar habría que aclarar la diferencia entre Diseño y Desarrollo.
El Diseño tiene que ver con lo estético de la pagina (LOOK & FEEL), color de fondo o imagen, tamaño y estilo de la fuente y hasta sonidos que se reproducen al cargar la pagina, la disposición de las imágenes o videos. Todo eso tiene que ver con el Diseño y se realiza por un diseñador. Pero el Desarrollo tiene que ver con el comportamiento de la pagina, y consta básicamente de 2 partes, La parte de "CLIENTES" y la parte de "SERVIDOR", generalmente creada por un Programador, aunque Diseñador y programador en este caso suele ser la misma persona.
Las consultas a una base de datos, la interaccion con otros sistemas, las busquedas, la forma en que se comunican CLIENTE Y SERVIDOR tiene que ver con el DESARROLLO. En la parte de cliente solemos utilizar CSS o JAVASCRIPT, En la parte de servidor utilizamos lenguajes scrip como PHP, PERL, ASP, ASP.NET
Nosotros utilizaremos para trabajar en el desarrollo de paginas Web el lenguaje "PHP" embembido o dentro del HTML.
Pero antes de ingresar cualquier codigo en PHP, repasaremos algunas etiquetas de HTML5 y su comportamiento, para tal efecto realizaremos algunas paginas muy basicas para mostrar el comportamiento de las etiquetas.
Para comenzar HTML5 nos obliga a poner la etiqueta <!DOCTYPE html> que solo es de apertura y luego la etiqueta de apertura "<HTML>" y finalizaremos con la etiqueta de cierre "</HTML>". Los documentos html se dviden en dos partes una No-visible que corresponde a todo lo que se encierra entre las etiquetas "<HEAD>" y "</HEAD>" que se encargan de limitar lo que sera la cabecera, esta etiqueta contiene otra muy importante <meta name="Description" Content="Descripcion de la pagina"> en esta etiqueta pondremos una descripcion de nuestra pagina, tendremos quee poner una descripción por cada pagina que tenga el sitio, ya que cada pagina tiene un contenido diferente. Los anteriores navegadores tenian mas en cueta estas etiquetas donde se ponia muchos "meta datos" o "meta etiquetas" pero hoy los navegadores solo toman en cuenta las etiquetas "description", tambien dentro del head debemos agregar la etiqueta <meta charset="utf-8"> si es que haremos nuestra pagina en esañol para evitar que en nuestra pagina se vean caracteres extraño ya que estamos definiendo el idioma. Y luego la etiqueta "<TITLE>" con su respectiva etiqueta de cierre "</TITLE>", el contenido de esta etiqueta también debe ser unico por cada pagina de nuestro sitio. Por otro lado tenemos la parte del "<BODY>" y "</BODY>" que es la parte visual de la pagina, donde también podemos poner Script y código PHP, imagenes , videos enlaces... . Antes que nada debemos escribir <!DOCTYPE html> lo que indica que trabajamos con "HTML5".
Vamos con un ejemplo basico:
Ejemplo 1:
<!DOCTYPE HTML>
<HTML lang="es">
<HEAD>
<TITLE>Primer HTML
</TITLE>
</HEAD>
<BODY>
</BODY>
Se puede copiar y pegar en un blog de nota con la extension ".html" pero debemos recordar guardarlo como "Todos los Archivos" en la opcion "Salvar como:".
De momento no tendremos algo muy atractivo, es solo para probar nuestro HTML.
Podriamos agregar entre las etiquetas <BODY> y </BODY>, lo siguiente:
<H1> Mi Primer Pagina Web</h1>, el archivo quedaria mas o menos asi:
Ejemplo 2:
<!DOCTYPE HTML>
<HTML lang="es">
<HEAD>
<TITLE>Primer HTML
</TITLE>
</HEAD>
<BODY>
<H1>Mi Primer Pagina Web</H1>
</BODY>
</HTML>
Y veriamos algo asi:
Podemos distinguir claramente el texto que pusimos en el titulo de la pagina "Primer HTML" dentro de las etiquetas <TITLE> y en el cuerpo de la misma el texto que pusimos dentro de la etiqueta <H1> "Mi Primer Pagina Web"><H1>, una cuestion que aclarar es que no hemos otorgado tamaño a una fuente, hemos determinado un TITULO de tamaño H1, tambien podriamos determinar titulos de otros tamaño, estos pueden ser de <H1>, <H2>, <H3>, <h4>, <H5> y <H6>. veamos los ejemplos:
Ejemplo 3:
<!DOCTYPE HTML>
<HTML lang="es">
<HEAD>
<TITLE>Primer HTML
</TITLE>
</HEAD>
<BODY>
<H1>Esto es un Titulo en H1</H1>
<H2>Esto es un Titulo en H2</H2>
<H3>Esto es un Titulo en H3</H3>
<h4>Esto es un Titulo en H4</H4>
<H5>Esto es un Titulo en H5</H5>
<H6>Esto es un Titulo en H6</H6>
<center>Y esto es texto normal Centrado</center></BODY>
</HTML>
Este seria el resultado:
La etiqueta <CENTER>, obviamente, centra todo lo que se ponga entre ella y su correspondiente cierre, puede ser una imagen o un video o un simple titulo. Iremos probando estas características a medida que veamos mas ejemplos.
A continuación veremos varias etiquetas propias de HTML, veremos la etiqueta que nos ayudara a poner comentarios, muy útiles para mantener la claridad de nuestro código, La etiqueta de comentario es "<!--" para la apertura y "-->" para el cierre de comentarios.
Ejemplo 4:
<!DOCTYPE HTML>
<HTML lang="es">
<HEAD>
<TITLE>Primer HTML
</TITLE>
</HEAD>
<BODY>
<!-- Esto es un comentario de varias lineas
pero no se ve en nuestro navegador -->
</BODY>
</HTML>
En este caso simplemente veríamos el navegador vacío.
Podemos cambiar el color de fondo de nuestra página agregando una propiedad a la etiqueta <BODY>, por ejemplo:
si queremos que nuestra pagina tengo un color de fondo azul deberiamos agregar la propiedad de etiqueta BGCOLOR="051780", también podriamos poner BGCOLOR="NAVY" obteniendo un color similar de fondo.
Codigo :
<!DOCTYPE HTML>
<HTML lang="es">
<HEAD>
<TITLE>Primer HTML
</TITLE>
</HEAD>
<BODY BGCOLOR="051780">
</BODY>
</HTML>
Para obtener las variaciones de color utilizamos el sistema RGB (Red, Green, Blue) que nos permite modificar sus valores entre 00 el valor mas bajo y FF el valor mas alto. Practica con algunos ejemplos donde podrias tomar el código anterior y cambiar el valor de BGCOLOR="RRGGBB" para ver su funcionamiento.
Imágenes, Enlaces y Textos alternativos.
Hablaremos un poco del tratamiento que le da HTML5 a las imagenes.
Listas desordenadas y Ordenadas.
Video inspirador:
https://www.youtube.com/watch?v=WniL0xrH-JQ&feature=youtu.be
http://edgarphp.blogspot.com.ar/2016/08/bienvenido-al-php-presentacion.html
Link: Presentacion - HTML5 - CSS - Servidores - PHP - MySQL
